Add scheduled messages and strip markdown from iMessage responses

Strip markdown formatting (bold, italic, headers, code, links, lists) from LLM responses before sending via iMessage. Add scheduled messages feature with CRUD API, background scheduler loop, and admin frontend panel. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-06-03 23:25:10 -04:00
parent 3ba93c55f4
commit f5203e0466
12 changed files with 684 additions and 9 deletions
@@ -0,0 +1,68 @@
+import { userService } from "./userService";
+
+export interface ScheduledMessage {
+  id: string;
+  recipient: string;
+  channel: "imessage" | "email";
+  content: string;
+  subject: string | null;
+  scheduled_at: string;
+  status: "pending" | "sent" | "failed" | "cancelled";
+  error_message: string | null;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface CreateScheduledMessage {
+  recipient: string;
+  channel: "imessage" | "email";
+  content: string;
+  subject?: string;
+  scheduled_at: string;
+}
+
+class ScheduledMessageService {
+  private baseUrl = "/api/scheduled-messages";
+
+  async list(): Promise<ScheduledMessage[]> {
+    const response = await userService.fetchWithRefreshToken(`${this.baseUrl}/`);
+    if (!response.ok) throw new Error("Failed to list scheduled messages");
+    return response.json();
+  }
+
+  async create(data: CreateScheduledMessage): Promise<ScheduledMessage> {
+    const response = await userService.fetchWithRefreshToken(`${this.baseUrl}/`, {
+      method: "POST",
+      body: JSON.stringify(data),
+    });
+    if (!response.ok) {
+      const err = await response.json();
+      throw new Error(err.error ?? "Failed to create scheduled message");
+    }
+    return response.json();
+  }
+
+  async update(id: string, data: Partial<CreateScheduledMessage> & { status?: string }): Promise<ScheduledMessage> {
+    const response = await userService.fetchWithRefreshToken(`${this.baseUrl}/${id}`, {
+      method: "PUT",
+      body: JSON.stringify(data),
+    });
+    if (!response.ok) {
+      const err = await response.json();
+      throw new Error(err.error ?? "Failed to update scheduled message");
+    }
+    return response.json();
+  }
+
+  async remove(id: string): Promise<void> {
+    const response = await userService.fetchWithRefreshToken(`${this.baseUrl}/${id}`, {
+      method: "DELETE",
+    });
+    if (!response.ok) {
+      const err = await response.json();
+      throw new Error(err.error ?? "Failed to delete scheduled message");
+    }
+  }
+}
+
+export const scheduledMessageService = new ScheduledMessageService();
@@ -1,11 +1,12 @@
 import { useCallback, useState, useRef } from "react";
-import { LogOut, Shield, PanelLeftClose, PanelLeftOpen, Menu, X } from "lucide-react";
+import { LogOut, Shield, Clock, PanelLeftClose, PanelLeftOpen, Menu, X } from "lucide-react";
 import { QuestionBubble } from "./QuestionBubble";
 import { AnswerBubble } from "./AnswerBubble";
 import { ToolBubble } from "./ToolBubble";
 import { MessageInput } from "./MessageInput";
 import { ConversationList } from "./ConversationList";
 import { AdminPanel } from "./AdminPanel";
+import { ScheduledMessagesPanel } from "./ScheduledMessagesPanel";
 import { cn } from "../lib/utils";
 import { useConversations } from "../hooks/useConversations";
 import { useChat } from "../hooks/useChat";
@@ -22,6 +23,7 @@ export const ChatScreen = ({ setAuthenticated, isAdmin }: ChatScreenProps) => {
  const [showConversations, setShowConversations] = useState(false);
  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
  const [showAdminPanel, setShowAdminPanel] = useState(false);
+  const [showScheduler, setShowScheduler] = useState(false);

  const messagesEndRef = useRef<HTMLDivElement>(null);
  const isLoadingRef = useRef(false);
@@ -157,13 +159,22 @@ export const ChatScreen = ({ setAuthenticated, isAdmin }: ChatScreenProps) => {

            <div className="px-2 pb-3 pt-2 border-t border-white/8 flex flex-col gap-0.5">
              {isAdmin && (
-                <button
-                  onClick={() => setShowAdminPanel(true)}
-                  className="flex items-center gap-2 w-full px-3 py-2 rounded-xl text-sm text-cream/50 hover:text-cream hover:bg-white/8 transition-all cursor-pointer"
-                >
-                  <Shield size={14} />
-                  <span>Admin</span>
-                </button>
+                <>
+                  <button
+                    onClick={() => setShowAdminPanel(true)}
+                    className="flex items-center gap-2 w-full px-3 py-2 rounded-xl text-sm text-cream/50 hover:text-cream hover:bg-white/8 transition-all cursor-pointer"
+                  >
+                    <Shield size={14} />
+                    <span>Admin</span>
+                  </button>
+                  <button
+                    onClick={() => setShowScheduler(true)}
+                    className="flex items-center gap-2 w-full px-3 py-2 rounded-xl text-sm text-cream/50 hover:text-cream hover:bg-white/8 transition-all cursor-pointer"
+                  >
+                    <Clock size={14} />
+                    <span>Scheduler</span>
+                  </button>
+                </>
              )}
              <button
                onClick={handleLogout}
@@ -178,6 +189,7 @@ export const ChatScreen = ({ setAuthenticated, isAdmin }: ChatScreenProps) => {
      </aside>

      {showAdminPanel && <AdminPanel onClose={() => setShowAdminPanel(false)} />}
+      {showScheduler && <ScheduledMessagesPanel onClose={() => setShowScheduler(false)} />}

      <div className="flex-1 flex flex-col h-full overflow-hidden min-w-0">
        <header className="md:hidden flex items-center justify-between px-4 py-3 bg-warm-white border-b border-sand-light/60">
@@ -0,0 +1,283 @@
+import { useState } from "react";
+import { X, Clock, Send, Trash2, XCircle, RotateCcw } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import { Badge } from "./ui/badge";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "./ui/table";
+import { useScheduledMessages } from "../hooks/useScheduledMessages";
+import {
+  scheduledMessageService,
+  type CreateScheduledMessage,
+} from "../api/scheduledMessageService";
+
+type Props = {
+  onClose: () => void;
+};
+
+const STATUS_BADGE: Record<string, "amber" | "default" | "destructive" | "muted"> = {
+  pending: "amber",
+  sent: "default",
+  failed: "destructive",
+  cancelled: "muted",
+};
+
+export const ScheduledMessagesPanel = ({ onClose }: Props) => {
+  const { messages, loading, refresh } = useScheduledMessages();
+  const [channel, setChannel] = useState<"imessage" | "email">("imessage");
+  const [recipient, setRecipient] = useState("");
+  const [subject, setSubject] = useState("");
+  const [content, setContent] = useState("");
+  const [scheduledAt, setScheduledAt] = useState("");
+  const [error, setError] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+
+  const handleCreate = async () => {
+    setError("");
+    if (!recipient || !content || !scheduledAt) {
+      setError("Recipient, content, and scheduled time are required.");
+      return;
+    }
+    if (channel === "email" && !subject) {
+      setError("Subject is required for email.");
+      return;
+    }
+
+    setSubmitting(true);
+    try {
+      const data: CreateScheduledMessage = {
+        recipient,
+        channel,
+        content,
+        scheduled_at: new Date(scheduledAt).toISOString(),
+      };
+      if (channel === "email") data.subject = subject;
+      await scheduledMessageService.create(data);
+      setRecipient("");
+      setSubject("");
+      setContent("");
+      setScheduledAt("");
+      refresh();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to schedule message");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const handleCancel = async (id: string) => {
+    try {
+      await scheduledMessageService.update(id, { status: "cancelled" });
+      refresh();
+    } catch {}
+  };
+
+  const handleDelete = async (id: string) => {
+    try {
+      await scheduledMessageService.remove(id);
+      refresh();
+    } catch {}
+  };
+
+  const handleRetry = async (id: string) => {
+    try {
+      const futureTime = new Date(Date.now() + 30_000).toISOString();
+      await scheduledMessageService.update(id, { scheduled_at: futureTime });
+      refresh();
+    } catch {}
+  };
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-charcoal/40 backdrop-blur-sm"
+      onClick={(e) => e.target === e.currentTarget && onClose()}
+    >
+      <div
+        className={cn(
+          "bg-warm-white rounded-3xl shadow-2xl shadow-charcoal/20",
+          "w-full max-w-3xl mx-4 max-h-[85vh] flex flex-col",
+          "border border-sand-light/60",
+        )}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-6 py-4 border-b border-sand-light/60">
+          <div className="flex items-center gap-2.5">
+            <div className="w-8 h-8 rounded-xl bg-amber-pale flex items-center justify-center">
+              <Clock size={14} className="text-amber-glow" />
+            </div>
+            <h2 className="text-sm font-semibold text-charcoal">
+              Scheduled Messages
+            </h2>
+          </div>
+          <button
+            onClick={onClose}
+            className="w-7 h-7 rounded-lg flex items-center justify-center text-warm-gray hover:text-charcoal hover:bg-cream-dark transition-colors cursor-pointer"
+          >
+            <X size={15} />
+          </button>
+        </div>
+
+        <div className="overflow-y-auto flex-1 rounded-b-3xl">
+          {/* Create form */}
+          <div className="px-6 py-5 border-b border-sand-light/60 space-y-3">
+            <div className="flex items-center gap-2">
+              <button
+                onClick={() => setChannel("imessage")}
+                className={cn(
+                  "px-3 py-1.5 rounded-lg text-xs font-medium transition-colors cursor-pointer",
+                  channel === "imessage"
+                    ? "bg-leaf-pale text-leaf-dark"
+                    : "bg-sand-light/40 text-warm-gray hover:text-charcoal",
+                )}
+              >
+                iMessage
+              </button>
+              <button
+                onClick={() => setChannel("email")}
+                className={cn(
+                  "px-3 py-1.5 rounded-lg text-xs font-medium transition-colors cursor-pointer",
+                  channel === "email"
+                    ? "bg-leaf-pale text-leaf-dark"
+                    : "bg-sand-light/40 text-warm-gray hover:text-charcoal",
+                )}
+              >
+                Email
+              </button>
+            </div>
+
+            <div className="flex gap-2">
+              <Input
+                value={recipient}
+                onChange={(e) => setRecipient(e.target.value)}
+                placeholder={channel === "imessage" ? "+15551234567" : "user@example.com"}
+                className="flex-1"
+              />
+              <Input
+                type="datetime-local"
+                value={scheduledAt}
+                onChange={(e) => setScheduledAt(e.target.value)}
+                className="w-52"
+              />
+            </div>
+
+            {channel === "email" && (
+              <Input
+                value={subject}
+                onChange={(e) => setSubject(e.target.value)}
+                placeholder="Subject"
+              />
+            )}
+
+            <textarea
+              value={content}
+              onChange={(e) => setContent(e.target.value)}
+              placeholder="Message content..."
+              rows={3}
+              className="w-full rounded-xl border border-sand bg-cream-light px-3 py-2 text-sm text-charcoal placeholder:text-warm-gray/50 focus:outline-none focus:ring-2 focus:ring-leaf/30 resize-none"
+            />
+
+            {error && <p className="text-xs text-red-500">{error}</p>}
+
+            <Button onClick={handleCreate} disabled={submitting} size="sm">
+              <Send size={12} />
+              {submitting ? "Scheduling..." : "Schedule"}
+            </Button>
+          </div>
+
+          {/* Message list */}
+          {loading ? (
+            <div className="px-6 py-12 text-center text-warm-gray text-sm">
+              <div className="flex justify-center gap-1.5 mb-3">
+                <span className="loading-dot w-2 h-2 rounded-full bg-amber-soft inline-block" />
+                <span className="loading-dot w-2 h-2 rounded-full bg-amber-soft inline-block" />
+                <span className="loading-dot w-2 h-2 rounded-full bg-amber-soft inline-block" />
+              </div>
+              Loading...
+            </div>
+          ) : messages.length === 0 ? (
+            <div className="px-6 py-12 text-center text-warm-gray text-sm">
+              No scheduled messages yet.
+            </div>
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Channel</TableHead>
+                  <TableHead>Recipient</TableHead>
+                  <TableHead>Content</TableHead>
+                  <TableHead>Scheduled</TableHead>
+                  <TableHead>Status</TableHead>
+                  <TableHead className="w-28">Actions</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {messages.map((msg) => (
+                  <TableRow key={msg.id}>
+                    <TableCell className="capitalize text-xs">
+                      {msg.channel}
+                    </TableCell>
+                    <TableCell className="text-xs truncate max-w-[140px]" title={msg.recipient}>
+                      {msg.recipient}
+                    </TableCell>
+                    <TableCell className="text-xs truncate max-w-[180px]" title={msg.content}>
+                      {msg.content.length > 60
+                        ? msg.content.slice(0, 60) + "..."
+                        : msg.content}
+                    </TableCell>
+                    <TableCell className="text-xs text-warm-gray">
+                      {new Date(msg.scheduled_at).toLocaleString()}
+                    </TableCell>
+                    <TableCell>
+                      <Badge variant={STATUS_BADGE[msg.status]}>{msg.status}</Badge>
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex gap-1">
+                        {msg.status === "pending" && (
+                          <Button
+                            size="sm"
+                            variant="ghost-dark"
+                            onClick={() => handleCancel(msg.id)}
+                            title="Cancel"
+                          >
+                            <XCircle size={11} />
+                          </Button>
+                        )}
+                        {msg.status === "failed" && (
+                          <Button
+                            size="sm"
+                            variant="ghost-dark"
+                            onClick={() => handleRetry(msg.id)}
+                            title="Retry"
+                          >
+                            <RotateCcw size={11} />
+                          </Button>
+                        )}
+                        {(msg.status === "pending" || msg.status === "cancelled") && (
+                          <Button
+                            size="sm"
+                            variant="destructive"
+                            onClick={() => handleDelete(msg.id)}
+                            title="Delete"
+                          >
+                            <Trash2 size={11} />
+                          </Button>
+                        )}
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
@@ -9,6 +9,7 @@ const badgeVariants = cva(
        default: "bg-leaf-pale text-leaf-dark border border-leaf-light/50",
        amber: "bg-amber-pale text-amber-glow border border-amber-soft/40",
        muted: "bg-sand-light/60 text-warm-gray border border-sand/40",
+        destructive: "bg-red-50 text-red-600 border border-red-200/50",
      },
    },
    defaultVariants: {
@@ -0,0 +1,25 @@
+import { useState, useEffect, useCallback } from "react";
+import {
+  scheduledMessageService,
+  type ScheduledMessage,
+} from "../api/scheduledMessageService";
+
+export function useScheduledMessages() {
+  const [messages, setMessages] = useState<ScheduledMessage[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const refresh = useCallback(() => {
+    setLoading(true);
+    scheduledMessageService
+      .list()
+      .then(setMessages)
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  }, []);
+
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
+  return { messages, loading, refresh };
+}