@castlekit/castle 0.1.6 → 0.3.1

package/src/components/chat/create-channel-dialog.tsx

@@ -0,0 +1,171 @@
+"use client";
+
+import { useState, useRef } from "react";
+import { useRouter } from "next/navigation";
+import { Loader2, ChevronDown } from "lucide-react";
+import { Dialog, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
+import { useOpenClaw } from "@/lib/hooks/use-openclaw";
+import type { Channel } from "@/lib/types/chat";
+
+interface CreateChannelDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onCreated?: (channel: Channel) => void;
+}
+
+export function CreateChannelDialog({ open, onOpenChange, onCreated }: CreateChannelDialogProps) {
+  const router = useRouter();
+  const { agents } = useOpenClaw();
+  const [name, setName] = useState("");
+  const [selectedAgents, setSelectedAgents] = useState<string[]>([]);
+  const [defaultAgentId, setDefaultAgentId] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  // Default to first agent when agents load (once only)
+  const didInit = useRef(false);
+  if (agents.length > 0 && !didInit.current) {
+    didInit.current = true;
+    setDefaultAgentId(agents[0].id);
+    setSelectedAgents([agents[0].id]);
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!name.trim() || !defaultAgentId) {
+      setError("Please provide a name and select a default agent");
+      return;
+    }
+
+    setLoading(true);
+    setError("");
+
+    try {
+      const res = await fetch("/api/openclaw/chat/channels", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          name: name.trim(),
+          defaultAgentId,
+          agents: [...new Set([defaultAgentId, ...selectedAgents])],
+        }),
+      });
+
+      const data = await res.json();
+
+      if (res.ok && data.channel) {
+        onCreated?.(data.channel);
+        router.push(`/chat/${data.channel.id}`);
+        setName("");
+        setSelectedAgents([]);
+        setDefaultAgentId("");
+        onOpenChange(false);
+      } else {
+        setError(data.error || "Failed to create channel");
+      }
+    } catch (err) {
+      console.error("Failed to create channel:", err);
+      setError("Failed to create channel");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const toggleAgent = (agentId: string) => {
+    setSelectedAgents((prev) => {
+      const next = prev.includes(agentId)
+        ? prev.filter((id) => id !== agentId)
+        : [...prev, agentId];
+
+      if (next.length === 1) {
+        setDefaultAgentId(next[0]);
+      } else {
+        setDefaultAgentId("");
+      }
+
+      return next;
+    });
+  };
+
+  return (
+    <Dialog open={open} onClose={() => onOpenChange(false)}>
+      <DialogHeader>
+        <DialogTitle>Create Channel</DialogTitle>
+      </DialogHeader>
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        {/* Name */}
+        <div>
+          <label className="block text-sm font-medium mb-1.5">Channel Name</label>
+          <Input
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder="e.g., Project Discussion"
+            autoFocus
+          />
+        </div>
+
+        {/* Agent Selection */}
+        <div>
+          <label className="block text-sm font-medium mb-2">Agents</label>
+          <div className="selectable-list max-h-48 overflow-y-auto">
+            {agents.map((agent) => (
+              <div
+                key={agent.id}
+                className="selectable-list-item cursor-pointer"
+                onClick={() => toggleAgent(agent.id)}
+              >
+                <Checkbox
+                  checked={selectedAgents.includes(agent.id)}
+                />
+                <span className="text-sm select-none">{agent.name}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Default Agent */}
+        <div>
+          <label className="block text-sm font-medium mb-1.5">Default Agent</label>
+          <div className="relative">
+            <select
+              value={defaultAgentId}
+              onChange={(e) => setDefaultAgentId(e.target.value)}
+              className="input-base appearance-none pr-10 cursor-pointer"
+            >
+              <option value="">Select an agent</option>
+              {agents.map((agent) => (
+                <option key={agent.id} value={agent.id} disabled={!selectedAgents.includes(agent.id)}>
+                  {agent.name}
+                </option>
+              ))}
+            </select>
+            <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-foreground-secondary pointer-events-none" />
+          </div>
+        </div>
+
+        {/* Error */}
+        {error && <p className="text-sm text-error">{error}</p>}
+
+        {/* Actions */}
+        <div className="flex justify-end gap-2 pt-2">
+          <Button
+            type="button"
+            variant="ghost"
+            onClick={() => onOpenChange(false)}
+            disabled={loading}
+          >
+            Cancel
+          </Button>
+          <Button type="submit" disabled={loading || !name.trim() || !defaultAgentId}>
+            {loading && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
+            Create Channel
+          </Button>
+        </div>
+      </form>
+    </Dialog>
+  );
+}

package/src/components/chat/markdown-content.tsx

@@ -0,0 +1,205 @@
+"use client";
+
+import React, { useState, useCallback } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { Copy, Check } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface MarkdownContentProps {
+  content: string;
+  className?: string;
+}
+
+function CopyButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // Fallback for non-HTTPS
+      const textarea = document.createElement("textarea");
+      textarea.value = text;
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand("copy");
+      document.body.removeChild(textarea);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  }, [text]);
+
+  return (
+    <button
+      type="button"
+      onClick={handleCopy}
+      className="absolute top-2 right-2 p-1.5 rounded-md bg-white/10 hover:bg-white/20 transition-colors text-white/60 hover:text-white/90"
+      title={copied ? "Copied!" : "Copy code"}
+    >
+      {copied ? <Check className="h-3.5 w-3.5" /> : <Copy className="h-3.5 w-3.5" />}
+    </button>
+  );
+}
+
+/**
+ * Renders markdown content with syntax highlighting for code blocks.
+ * HTML rendering is disabled for XSS safety.
+ */
+export function MarkdownContent({ content, className }: MarkdownContentProps) {
+  return (
+    <div className={cn("prose prose-sm dark:prose-invert max-w-none [&>p]:my-0", className)}>
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        components={{
+          // Code blocks with syntax highlighting
+          code({ className: codeClassName, children, ...props }) {
+            const match = /language-(\w+)/.exec(codeClassName || "");
+            const codeString = String(children).replace(/\n$/, "");
+
+            // Block code (with language tag)
+            if (match) {
+              return (
+                <div className="relative group not-prose my-3">
+                  <div className="flex items-center justify-between px-4 py-1.5 bg-[#1e1e2e] rounded-t-lg border-b border-white/10">
+                    <span className="text-xs text-white/40 font-mono">{match[1]}</span>
+                    <CopyButton text={codeString} />
+                  </div>
+                  <SyntaxHighlighter
+                    style={oneDark}
+                    language={match[1]}
+                    PreTag="div"
+                    customStyle={{
+                      margin: 0,
+                      borderTopLeftRadius: 0,
+                      borderTopRightRadius: 0,
+                      borderBottomLeftRadius: "0.5rem",
+                      borderBottomRightRadius: "0.5rem",
+                      fontSize: "0.8125rem",
+                      lineHeight: "1.5",
+                    }}
+                  >
+                    {codeString}
+                  </SyntaxHighlighter>
+                </div>
+              );
+            }
+
+            // Multi-line code without language
+            if (codeString.includes("\n")) {
+              return (
+                <div className="relative group not-prose my-3">
+                  <CopyButton text={codeString} />
+                  <SyntaxHighlighter
+                    style={oneDark}
+                    PreTag="div"
+                    customStyle={{
+                      borderRadius: "0.5rem",
+                      fontSize: "0.8125rem",
+                      lineHeight: "1.5",
+                    }}
+                  >
+                    {codeString}
+                  </SyntaxHighlighter>
+                </div>
+              );
+            }
+
+            // Inline code
+            return (
+              <code
+                className="px-1.5 py-0.5 rounded bg-surface-hover font-mono text-[0.8125rem]"
+                {...props}
+              >
+                {children}
+              </code>
+            );
+          },
+
+          // Links
+          a({ href, children }) {
+            return (
+              <a
+                href={href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-accent hover:underline"
+              >
+                {children}
+              </a>
+            );
+          },
+
+          // Tables
+          table({ children }) {
+            return (
+              <div className="overflow-x-auto my-3 not-prose">
+                <table className="min-w-full text-sm border-collapse">
+                  {children}
+                </table>
+              </div>
+            );
+          },
+          th({ children }) {
+            return (
+              <th className="px-3 py-2 text-left text-xs font-medium text-foreground-secondary border-b border-border bg-surface-hover">
+                {children}
+              </th>
+            );
+          },
+          td({ children }) {
+            return (
+              <td className="px-3 py-2 text-sm border-b border-border/50">
+                {children}
+              </td>
+            );
+          },
+
+          // Blockquotes
+          blockquote({ children }) {
+            return (
+              <blockquote className="border-l-2 border-accent/50 pl-4 my-3 text-foreground-secondary italic">
+                {children}
+              </blockquote>
+            );
+          },
+
+          // Lists
+          ul({ children }) {
+            return <ul className="list-disc pl-5 my-2 space-y-1">{children}</ul>;
+          },
+          ol({ children }) {
+            return <ol className="list-decimal pl-5 my-2 space-y-1">{children}</ol>;
+          },
+
+          // Horizontal rule
+          hr() {
+            return <hr className="my-4 border-border" />;
+          },
+
+          // Paragraphs
+          p({ children }) {
+            return <p>{children}</p>;
+          },
+
+          // Headings
+          h1({ children }) {
+            return <h1 className="text-lg font-bold mt-4 mb-2">{children}</h1>;
+          },
+          h2({ children }) {
+            return <h2 className="text-base font-bold mt-3 mb-1.5">{children}</h2>;
+          },
+          h3({ children }) {
+            return <h3 className="text-sm font-bold mt-2 mb-1">{children}</h3>;
+          },
+        }}
+      >
+        {content}
+      </ReactMarkdown>
+    </div>
+  );
+}

package/src/components/chat/message-bubble.tsx

@@ -0,0 +1,168 @@
+"use client";
+
+import React from "react";
+import { Bot, User, AlertTriangle, StopCircle } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { formatTime, formatDateTime } from "@/lib/date-utils";
+import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
+import { Tooltip } from "@/components/ui/tooltip";
+import { MarkdownContent } from "./markdown-content";
+import { TwemojiText } from "@/components/ui/twemoji-text";
+import type { ChatMessage } from "@/lib/types/chat";
+import type { AgentInfo } from "./agent-mention-popup";
+import type { AgentStatus } from "@/lib/hooks/use-agent-status";
+
+interface MessageBubbleProps {
+  message: ChatMessage;
+  isAgent: boolean;
+  agentName?: string;
+  agentAvatar?: string | null;
+  userAvatar?: string | null;
+  agents: AgentInfo[];
+  isStreaming?: boolean;
+  /** Whether to show avatar and name (false for consecutive messages from same sender) */
+  showHeader?: boolean;
+  agentStatus?: AgentStatus;
+  userStatus?: AgentStatus;
+  highlighted?: boolean;
+  /** When true, shows bouncing dots instead of message content (typing indicator) */
+  isTypingIndicator?: boolean;
+}
+
+export function MessageBubble({
+  message,
+  isAgent,
+  agentName,
+  agentAvatar,
+  userAvatar,
+  agents,
+  isStreaming,
+  showHeader = true,
+  agentStatus,
+  userStatus,
+  highlighted,
+  isTypingIndicator,
+}: MessageBubbleProps) {
+  const formattedTime = formatTime(message.createdAt);
+  const fullDateTime = formatDateTime(message.createdAt);
+
+  // Prefer the name stored on the message (always available from DB, no FOUC).
+  // Fall back to the live agent name from the gateway, then a generic label.
+  const displayName = isAgent
+    ? (message.senderName || agentName || "Unknown Agent")
+    : "You";
+  const avatarSrc = isAgent ? agentAvatar : userAvatar;
+  const hasAttachments = message.attachments && message.attachments.length > 0;
+
+  // Map status to Avatar status prop
+  const avatarStatus = isAgent && agentStatus
+    ? ({ thinking: "away", active: "online", idle: "offline" } as const)[agentStatus]
+    : !isAgent && userStatus
+    ? ({ active: "online", idle: "offline", thinking: "away" } as const)[userStatus]
+    : undefined;
+
+  return (
+    <div className={cn("flex gap-3", showHeader ? "mb-[4px] first:mt-0" : "mt-0.5 pl-[48px]", highlighted && "bg-accent/10 -mx-2 px-2 py-1")}>
+      {/* Avatar — only shown on first message in a group */}
+      {showHeader && (
+        <div className="mt-0.5">
+          <Avatar size="sm" status={avatarStatus} statusPulse={agentStatus === "thinking"}>
+            {avatarSrc ? (
+              <AvatarImage src={avatarSrc} alt={displayName} />
+            ) : (
+              <AvatarFallback
+                className={cn(
+                  isAgent ? "bg-accent/20 text-accent" : "bg-foreground/10 text-foreground"
+                )}
+              >
+                {isAgent ? <Bot className="w-4 h-4" /> : <User className="w-4 h-4" />}
+              </AvatarFallback>
+            )}
+          </Avatar>
+        </div>
+      )}
+
+      {/* Message content */}
+      <div className="flex flex-col min-w-0">
+        {/* Name + time header — only on first message in a group */}
+        {showHeader && (
+          <div className="flex items-baseline gap-2">
+            <span className="font-bold text-[15px] text-foreground">
+              {displayName}
+            </span>
+            <Tooltip content={fullDateTime} side="top" delay={800}>
+              <span className={cn("text-xs text-foreground-secondary hover:text-foreground cursor-pointer transition-colors", isTypingIndicator && "opacity-0")}>
+                {formattedTime}
+              </span>
+            </Tooltip>
+          </div>
+        )}
+
+        {/* Attachments */}
+        {!isTypingIndicator && hasAttachments && (
+          <div className="flex gap-2 flex-wrap mb-1">
+            {message.attachments.map((att) => (
+              <img
+                key={att.id}
+                src={`/api/openclaw/chat/attachments?path=${encodeURIComponent(att.filePath)}`}
+                alt={att.originalName || "Attachment"}
+                className="max-w-[200px] max-h-[200px] rounded-lg object-cover border border-border"
+              />
+            ))}
+          </div>
+        )}
+
+        {/* Message text — no bubble, just plain text */}
+        <div className="text-[15px] text-foreground leading-[26px] break-words relative">
+          {isTypingIndicator ? (
+            <>
+              <span className="opacity-0" aria-hidden>Xxxxx</span>
+              <span className="absolute left-0 top-0 h-[26px] inline-flex items-center gap-1">
+                <span className="w-1.5 h-1.5 bg-foreground-secondary/60 rounded-full" style={{ animation: "dot-bounce 1.4s ease-in-out infinite", animationDelay: "0s" }} />
+                <span className="w-1.5 h-1.5 bg-foreground-secondary/60 rounded-full" style={{ animation: "dot-bounce 1.4s ease-in-out infinite", animationDelay: "0.16s" }} />
+                <span className="w-1.5 h-1.5 bg-foreground-secondary/60 rounded-full" style={{ animation: "dot-bounce 1.4s ease-in-out infinite", animationDelay: "0.32s" }} />
+              </span>
+            </>
+          ) : (
+            <>
+              <TwemojiText>
+                {isAgent && message.content ? (
+                  <MarkdownContent content={message.content} />
+                ) : (
+                  <span className="whitespace-pre-wrap">{message.content}</span>
+                )}
+              </TwemojiText>
+
+              {/* Streaming cursor */}
+              {isStreaming && (
+                <span className="inline-block w-2 h-4 bg-foreground/50 animate-pulse ml-0.5 align-text-bottom" />
+              )}
+            </>
+          )}
+        </div>
+
+        {/* Status badges */}
+        {message.status === "interrupted" && (
+          <div className="flex items-center gap-1 text-xs text-warning mt-1">
+            <AlertTriangle className="h-3 w-3" />
+            <span>Response interrupted</span>
+          </div>
+        )}
+        {message.status === "aborted" && (
+          <div className="flex items-center gap-1 text-xs text-foreground-secondary mt-1">
+            <StopCircle className="h-3 w-3" />
+            <span>Response stopped</span>
+          </div>
+        )}
+
+        {/* Token info for agent messages */}
+        {isAgent && !isStreaming && (message.inputTokens || message.outputTokens) && (
+          <div className="text-xs text-foreground-secondary/60 flex items-center gap-2 mt-1">
+            {message.inputTokens != null && <span>{message.inputTokens.toLocaleString()} in</span>}
+            {message.outputTokens != null && <span>{message.outputTokens.toLocaleString()} out</span>}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}