@castlekit/castle 0.1.6 → 0.3.1

package/src/components/chat/archived-channels.tsx

@@ -0,0 +1,190 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Loader2, RotateCcw, Trash2, Hash, MessageCircle } from "lucide-react";
+import { Dialog, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { formatDateTime, formatTimeAgo } from "@/lib/date-utils";
+import type { Channel } from "@/lib/types/chat";
+
+interface ArchivedChannelsProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onRestored?: (channel: Channel) => void;
+}
+
+export function ArchivedChannels({
+  open,
+  onOpenChange,
+  onRestored,
+}: ArchivedChannelsProps) {
+  const [channels, setChannels] = useState<Channel[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [actionLoading, setActionLoading] = useState<string | null>(null);
+  const [confirmDelete, setConfirmDelete] = useState<string | null>(null);
+
+  const fetchArchived = async () => {
+    setLoading(true);
+    try {
+      const res = await fetch("/api/openclaw/chat/channels?archived=1");
+      if (res.ok) {
+        const data = await res.json();
+        setChannels(data.channels || []);
+      }
+    } catch {
+      // silent
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (open) {
+      fetchArchived();
+      setConfirmDelete(null);
+    }
+  }, [open]);
+
+  const handleRestore = async (channel: Channel) => {
+    setActionLoading(channel.id);
+    try {
+      const res = await fetch("/api/openclaw/chat/channels", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action: "restore", id: channel.id }),
+      });
+      if (res.ok) {
+        setChannels((prev) => prev.filter((c) => c.id !== channel.id));
+        onRestored?.(channel);
+      }
+    } catch {
+      // silent
+    } finally {
+      setActionLoading(null);
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    setActionLoading(id);
+    try {
+      const res = await fetch("/api/openclaw/chat/channels", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action: "delete", id }),
+      });
+      if (res.ok) {
+        setChannels((prev) => prev.filter((c) => c.id !== id));
+        setConfirmDelete(null);
+      } else {
+        const data = await res.json().catch(() => ({}));
+        console.error("[Archive] Delete failed:", res.status, data);
+      }
+    } catch (err) {
+      console.error("[Archive] Delete error:", err);
+    } finally {
+      setActionLoading(null);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogHeader>
+        <DialogTitle>Archived Channels</DialogTitle>
+      </DialogHeader>
+
+      <div className="min-h-[200px]">
+        {loading ? (
+          <div className="flex items-center justify-center py-12">
+            <Loader2 className="h-6 w-6 animate-spin text-foreground-secondary" />
+          </div>
+        ) : channels.length === 0 ? (
+          <div className="text-center py-12 text-foreground-secondary">
+            <MessageCircle className="h-8 w-8 mx-auto mb-2 opacity-50" />
+            <p className="text-sm">No archived channels</p>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {channels.map((channel) => (
+              <div
+                key={channel.id}
+                className="flex items-center justify-between px-3 py-2.5 rounded-[var(--radius-sm)] bg-surface-hover/50 hover:bg-surface-hover group"
+              >
+                <div className="flex items-center gap-1.5 min-w-0">
+                  <Hash className="h-4 w-4 shrink-0 text-foreground-secondary" strokeWidth={2.5} />
+                  <div className="min-w-0">
+                    <span className="text-sm text-foreground truncate block">
+                      {channel.name}
+                    </span>
+                    <span className="text-xs text-foreground-secondary">
+                      Created {formatDateTime(new Date(channel.createdAt).getTime())}
+                      {channel.archivedAt && (
+                        <> · Archived {formatTimeAgo(new Date(channel.archivedAt).getTime())}</>
+                      )}
+                    </span>
+                  </div>
+                </div>
+
+                <div className="flex items-center gap-1 shrink-0">
+                  {confirmDelete === channel.id ? (
+                    <>
+                      <span className="text-xs text-red-400 mr-1">
+                        Delete forever?
+                      </span>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="text-red-400 hover:text-red-300 hover:bg-red-500/10 h-7 px-2 text-xs"
+                        onClick={() => handleDelete(channel.id)}
+                        disabled={actionLoading === channel.id}
+                      >
+                        {actionLoading === channel.id ? (
+                          <Loader2 className="h-3 w-3 animate-spin" />
+                        ) : (
+                          "Yes"
+                        )}
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="h-7 px-2 text-xs"
+                        onClick={() => setConfirmDelete(null)}
+                      >
+                        No
+                      </Button>
+                    </>
+                  ) : (
+                    <>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-7 w-7 text-foreground-secondary hover:text-foreground"
+                        onClick={() => handleRestore(channel)}
+                        disabled={actionLoading === channel.id}
+                        title="Restore channel"
+                      >
+                        {actionLoading === channel.id ? (
+                          <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                        ) : (
+                          <RotateCcw className="h-3.5 w-3.5" />
+                        )}
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-7 w-7 text-foreground-secondary hover:text-red-400"
+                        onClick={() => setConfirmDelete(channel.id)}
+                        title="Delete permanently"
+                      >
+                        <Trash2 className="h-3.5 w-3.5" />
+                      </Button>
+                    </>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </Dialog>
+  );
+}

package/src/components/chat/channel-list.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { Hash, MessageCircle, Loader2, Archive } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import type { Channel } from "@/lib/types/chat";
+
+interface ChannelListProps {
+  activeChannelId?: string;
+  className?: string;
+  showCreateDialog?: boolean;
+  onCreateDialogChange?: (open: boolean) => void;
+  newChannel?: Channel | null;
+}
+
+export function ChannelList({
+  activeChannelId,
+  className,
+  onCreateDialogChange,
+  newChannel,
+}: ChannelListProps) {
+  const router = useRouter();
+  const [channels, setChannels] = useState<Channel[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const setShowCreate = onCreateDialogChange ?? (() => {});
+
+  const fetchChannels = async () => {
+    try {
+      const res = await fetch("/api/openclaw/chat/channels");
+      if (res.ok) {
+        const data = await res.json();
+        setChannels(data.channels || []);
+      }
+    } catch (error) {
+      console.error("Failed to fetch channels:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchChannels();
+  }, []); // Only fetch once on mount — channel list doesn't change on navigation
+
+  // Instantly add a newly created channel to the list
+  useEffect(() => {
+    if (newChannel && !channels.some((c) => c.id === newChannel.id)) {
+      setChannels((prev) => [newChannel, ...prev]);
+    }
+  }, [newChannel]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <div className={cn("flex flex-col gap-2", className)}>
+      {/* Loading skeleton */}
+      {loading && (
+        <div className="flex flex-col gap-1">
+          {[1, 2, 3, 4].map((i) => (
+            <div key={i} className="flex items-center gap-1.5 px-2 h-[34px] rounded-[var(--radius-sm)]">
+              <div className="skeleton h-4 w-4 rounded shrink-0" />
+              <div className="skeleton h-3.5 rounded" style={{ width: `${50 + i * 12}%` }} />
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Empty state */}
+      {!loading && channels.length === 0 && (
+        <div className="text-center py-8 text-foreground-secondary">
+          <MessageCircle className="h-8 w-8 mx-auto mb-2 opacity-50" />
+          <p className="text-sm">No active channels</p>
+          <Button
+            variant="outline"
+            size="sm"
+            className="mt-3"
+            onClick={() => setShowCreate(true)}
+          >
+            New channel
+          </Button>
+        </div>
+      )}
+
+      {/* Channel list */}
+      {!loading && channels.length > 0 && (
+        <div className="selectable-list">
+          {channels.map((channel) => (
+            <div
+              key={channel.id}
+              role="button"
+              tabIndex={0}
+              onClick={() => router.push(`/chat/${channel.id}`)}
+              onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") router.push(`/chat/${channel.id}`); }}
+              className={cn(
+                "selectable-list-item transition-colors group relative flex items-center gap-1.5 w-full text-left cursor-pointer",
+                activeChannelId === channel.id
+                  ? "bg-accent/10 text-accent"
+                  : "text-foreground"
+              )}
+            >
+              <Hash className="h-4 w-4 shrink-0" strokeWidth={2.5} />
+              <span className="truncate flex-1 min-w-0">{channel.name}</span>
+              <button
+                onClick={async (e) => {
+                  e.stopPropagation();
+                  try {
+                    const res = await fetch("/api/openclaw/chat/channels", {
+                      method: "POST",
+                      headers: { "Content-Type": "application/json" },
+                      body: JSON.stringify({ action: "archive", id: channel.id }),
+                    });
+                    if (res.ok) {
+                      setChannels((prev) => prev.filter((c) => c.id !== channel.id));
+                      if (activeChannelId === channel.id) {
+                        const remaining = channels.filter((c) => c.id !== channel.id);
+                        if (remaining.length > 0) {
+                          router.push(`/chat/${remaining[0].id}`);
+                        } else {
+                          router.push("/chat");
+                        }
+                      }
+                    }
+                  } catch {
+                    // silent
+                  }
+                }}
+                className="opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded hover:bg-surface-hover text-foreground-secondary hover:text-foreground cursor-pointer"
+                title="Archive channel"
+              >
+                <Archive className="h-3.5 w-3.5" />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+
+    </div>
+  );
+}

package/src/components/chat/chat-input.tsx

@@ -0,0 +1,328 @@
+"use client";
+
+import { useState, useRef, useEffect, useCallback } from "react";
+import { Send, Loader2, ImageIcon, X, Square } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { AgentMentionPopup, getFilteredAgents, type AgentInfo } from "./agent-mention-popup";
+
+interface ChatInputProps {
+  onSend: (content: string, agentId?: string) => Promise<void>;
+  onAbort?: () => void;
+  sending?: boolean;
+  streaming?: boolean;
+  disabled?: boolean;
+  agents: AgentInfo[];
+  defaultAgentId?: string;
+  channelId?: string;
+  className?: string;
+  /** Called when user presses Shift+ArrowUp/Down to navigate between messages */
+  onNavigate?: (direction: "up" | "down") => void;
+}
+
+export function ChatInput({
+  onSend,
+  onAbort,
+  sending,
+  streaming,
+  disabled,
+  agents,
+  defaultAgentId,
+  channelId,
+  className,
+  onNavigate,
+}: ChatInputProps) {
+  const [showMentions, setShowMentions] = useState(false);
+  const [mentionFilter, setMentionFilter] = useState("");
+  const [mentionHighlightIndex, setMentionHighlightIndex] = useState(0);
+  const [isEmpty, setIsEmpty] = useState(true);
+
+  const editorRef = useRef<HTMLDivElement>(null);
+
+  // Get plain text content from editor
+  const getPlainText = useCallback(() => {
+    if (!editorRef.current) return "";
+    return editorRef.current.innerText || "";
+  }, []);
+
+  // Get message content with mentions converted to IDs
+  const getMessageContent = useCallback(() => {
+    if (!editorRef.current) return { text: "", firstMentionId: undefined as string | undefined };
+
+    let text = "";
+    let firstMentionId: string | undefined;
+
+    const processNode = (node: Node) => {
+      if (node.nodeType === Node.TEXT_NODE) {
+        text += node.textContent || "";
+      } else if (node.nodeType === Node.ELEMENT_NODE) {
+        const element = node as HTMLElement;
+        if (element.classList.contains("mention-chip")) {
+          const agentId = element.dataset.agentId;
+          if (agentId) {
+            text += `@${agentId}`;
+            if (!firstMentionId) firstMentionId = agentId;
+          }
+        } else if (element.tagName === "BR") {
+          text += "\n";
+        } else {
+          element.childNodes.forEach(processNode);
+        }
+      }
+    };
+
+    editorRef.current.childNodes.forEach(processNode);
+    return { text: text.trim(), firstMentionId };
+  }, []);
+
+  // Check for @mention trigger
+  const checkForMentionTrigger = useCallback(() => {
+    const selection = window.getSelection();
+    if (!selection || !selection.rangeCount) return;
+
+    const range = selection.getRangeAt(0);
+    const container = range.startContainer;
+
+    if (container.nodeType !== Node.TEXT_NODE) {
+      setShowMentions(false);
+      return;
+    }
+
+    const text = container.textContent || "";
+    const cursorPos = range.startOffset;
+    const textBeforeCursor = text.slice(0, cursorPos);
+    const mentionMatch = textBeforeCursor.match(/@(\w*)$/);
+
+    if (mentionMatch) {
+      const newFilter = mentionMatch[1].toLowerCase();
+      if (newFilter !== mentionFilter) setMentionHighlightIndex(0);
+      setMentionFilter(newFilter);
+      setShowMentions(true);
+    } else {
+      setShowMentions(false);
+      setMentionFilter("");
+      setMentionHighlightIndex(0);
+    }
+  }, [mentionFilter]);
+
+  // Handle input changes
+  const handleInput = useCallback(() => {
+    const text = getPlainText();
+    setIsEmpty(!text.trim());
+    checkForMentionTrigger();
+  }, [getPlainText, checkForMentionTrigger]);
+
+  // Insert mention chip
+  const insertMention = useCallback(
+    (agentId: string) => {
+      const agent = agents.find((a) => a.id === agentId);
+      const displayName = agent?.name || agentId;
+
+      const selection = window.getSelection();
+      if (!selection || !selection.rangeCount || !editorRef.current) return;
+
+      const range = selection.getRangeAt(0);
+      const container = range.startContainer;
+
+      if (container.nodeType !== Node.TEXT_NODE) {
+        setShowMentions(false);
+        return;
+      }
+
+      const text = container.textContent || "";
+      const cursorPos = range.startOffset;
+      const textBeforeCursor = text.slice(0, cursorPos);
+      const atIndex = textBeforeCursor.lastIndexOf("@");
+
+      if (atIndex === -1) {
+        setShowMentions(false);
+        return;
+      }
+
+      const replaceRange = document.createRange();
+      replaceRange.setStart(container, atIndex);
+      replaceRange.setEnd(container, cursorPos);
+      selection.removeAllRanges();
+      selection.addRange(replaceRange);
+
+      const chipHtml = `<span class="mention-chip inline-flex items-center px-1.5 py-0.5 rounded bg-accent/20 text-accent font-medium text-sm cursor-default" contenteditable="false" data-agent-id="${agentId}">@${displayName}</span>&nbsp;`;
+      document.execCommand("insertHTML", false, chipHtml);
+
+      setShowMentions(false);
+      setMentionFilter("");
+      setIsEmpty(false);
+      editorRef.current.focus();
+    },
+    [agents]
+  );
+
+  // Handle paste (plain text only, with @mention chips)
+  const handlePaste = useCallback(
+    (e: React.ClipboardEvent) => {
+      const text = e.clipboardData.getData("text/plain");
+      if (text) {
+        e.preventDefault();
+        document.execCommand("insertText", false, text);
+        setIsEmpty(false);
+      }
+    },
+    []
+  );
+
+  // Handle submit
+  const handleSubmit = useCallback(
+    async (e?: React.FormEvent) => {
+      e?.preventDefault();
+      const { text, firstMentionId } = getMessageContent();
+      if (!text || sending || streaming || disabled) return;
+
+      const targetAgent = firstMentionId || defaultAgentId;
+
+      if (editorRef.current) editorRef.current.innerHTML = "";
+      setIsEmpty(true);
+
+      await onSend(text, targetAgent);
+    },
+    [getMessageContent, sending, streaming, disabled, defaultAgentId, onSend]
+  );
+
+  // Handle keyboard shortcuts
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      // Handle mention popup navigation
+      if (showMentions) {
+        const filteredAgents = getFilteredAgents(agents, mentionFilter);
+
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          setMentionHighlightIndex((prev) =>
+            prev < filteredAgents.length - 1 ? prev + 1 : 0
+          );
+          return;
+        }
+        if (e.key === "ArrowUp") {
+          e.preventDefault();
+          setMentionHighlightIndex((prev) =>
+            prev > 0 ? prev - 1 : filteredAgents.length - 1
+          );
+          return;
+        }
+        if (e.key === "Tab" || (e.key === "Enter" && !e.shiftKey)) {
+          e.preventDefault();
+          if (filteredAgents.length > 0) {
+            insertMention(filteredAgents[mentionHighlightIndex].id);
+          }
+          return;
+        }
+        if (e.key === "Escape") {
+          e.preventDefault();
+          setShowMentions(false);
+          return;
+        }
+      }
+
+      // Shift+ArrowUp/Down — navigate between messages
+      if (
+        (e.key === "ArrowUp" || e.key === "ArrowDown") &&
+        e.shiftKey &&
+        !e.ctrlKey &&
+        !e.metaKey &&
+        !e.altKey
+      ) {
+        e.preventDefault();
+        onNavigate?.(e.key === "ArrowUp" ? "up" : "down");
+        return;
+      }
+
+      // Regular Enter to send
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSubmit();
+        return;
+      }
+
+      if (e.key === "Escape") {
+        setShowMentions(false);
+        return;
+      }
+    },
+    [handleSubmit, showMentions, agents, mentionFilter, mentionHighlightIndex, insertMention, onNavigate]
+  );
+
+
+
+  // Focus editor on channel change or when it becomes enabled
+  useEffect(() => {
+    if (!disabled) {
+      editorRef.current?.focus();
+    }
+  }, [channelId, disabled]);
+
+  return (
+    <div className={cn("space-y-3", className)}>
+      {/* Input Area */}
+      <form onSubmit={handleSubmit} className="relative">
+        {/* @mention popup */}
+        {showMentions && (
+          <AgentMentionPopup
+            agents={agents}
+            filter={mentionFilter}
+            onSelect={insertMention}
+            onClose={() => setShowMentions(false)}
+            highlightedIndex={mentionHighlightIndex}
+          />
+        )}
+
+        <div className="flex items-end gap-3">
+          <div className="flex-1 min-w-0 relative">
+            {/* ContentEditable editor */}
+            <div
+              ref={editorRef}
+              contentEditable={!disabled}
+              onInput={handleInput}
+              onKeyDown={handleKeyDown}
+              onPaste={handlePaste}
+              data-placeholder="Message (Enter to send, Shift+Enter for new line, @ to mention)"
+              className={cn(
+                "w-full px-4 py-3 rounded-[var(--radius-sm)] bg-surface border border-border resize-none min-h-[48px] max-h-[200px] overflow-y-auto text-sm focus:outline-none focus:border-accent/50 break-words",
+                "empty:before:content-[attr(data-placeholder)] empty:before:text-foreground-secondary/50 empty:before:pointer-events-none",
+                (sending || streaming || disabled) && "opacity-50 pointer-events-none"
+              )}
+              role="textbox"
+              aria-multiline="true"
+              suppressContentEditableWarning
+            />
+
+          </div>
+
+          {/* Stop / Send button */}
+          {streaming ? (
+            <Button
+              type="button"
+              variant="destructive"
+              size="icon"
+              onClick={onAbort}
+              className="h-12 w-12 rounded-[var(--radius-sm)] shrink-0"
+              title="Stop response"
+            >
+              <Square className="h-5 w-5" />
+            </Button>
+          ) : (
+            <Button
+              type="submit"
+              size="icon"
+              disabled={isEmpty || sending || streaming || disabled}
+              className="h-12 w-12 rounded-[var(--radius-sm)] shrink-0"
+            >
+              {sending ? (
+                <Loader2 className="h-5 w-5 animate-spin" />
+              ) : (
+                <Send className="h-5 w-5" />
+              )}
+            </Button>
+          )}
+        </div>
+      </form>
+    </div>
+  );
+}