@jiangxiaosheng/digital-agent-platform 1.0.0

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

@@ -0,0 +1,395 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import { useTranslations } from "next-intl";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypeHighlight from "rehype-highlight";
+import {
+  Copy, Check, ChevronDown, ChevronRight, Wrench, Loader2,
+  RefreshCw, GitBranch, Brain, ExternalLink, Volume2,
+} from "lucide-react";
+import type { ChatMessage, ToolCall, AttachedImage } from "@/types/agent";
+import { cn } from "@/lib/utils";
+
+// Detect absolute or ~-relative file paths with image/video extensions
+const MEDIA_PATH_RE = /(?:\/(?:Users|home|tmp|var|root)\S+|~\/\S+)\.(?:png|jpg|jpeg|gif|webp|svg|mp4|webm|mov)/gi;
+const IMAGE_EXTS = new Set(["png", "jpg", "jpeg", "gif", "webp", "svg"]);
+const VIDEO_EXTS = new Set(["mp4", "webm", "mov"]);
+
+function extractMediaPaths(content: string): { path: string; type: "image" | "video" }[] {
+  const matches = [...content.matchAll(MEDIA_PATH_RE)];
+  const seen = new Set<string>();
+  return matches
+    .map(m => m[0])
+    .filter(p => { if (seen.has(p)) return false; seen.add(p); return true; })
+    .map(p => {
+      const ext = p.split(".").pop()?.toLowerCase() ?? "";
+      return { path: p, type: IMAGE_EXTS.has(ext) ? "image" : VIDEO_EXTS.has(ext) ? "video" : "image" };
+    });
+}
+
+function serveUrl(filePath: string) {
+  return `/api/file-serve?path=${encodeURIComponent(filePath)}`;
+}
+
+interface MessageBubbleProps {
+  message: ChatMessage;
+  agentName?: string;
+  agentAvatar: string;
+  showTimestamp?: boolean;
+  onRetry?: (message: ChatMessage) => void;
+  onFork?: (message: ChatMessage) => void;
+  onSpeak?: (text: string) => void;
+}
+
+export function MessageBubble({
+  message, agentName, agentAvatar, showTimestamp, onRetry, onFork, onSpeak,
+}: MessageBubbleProps) {
+  const t = useTranslations("chat");
+  const [copied, setCopied] = useState(false);
+  const [thinkingOpen, setThinkingOpen] = useState(false);
+  const isUser = message.role === "user";
+
+  // Detect image/video file paths in assistant messages
+  const mediaPaths = useMemo(
+    () => (!isUser && message.content ? extractMediaPaths(message.content) : []),
+    [isUser, message.content]
+  );
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(message.content);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className="px-3">
+      {showTimestamp && (
+        <div className="flex justify-center my-2">
+          <span className="text-[11px] text-gray-500 neo-card bg-white dark:bg-slate-800/50 dark:backdrop-blur-sm rounded-full px-3 py-1 dark:border-slate-700/50">
+            {formatTime(message.createdAt)}
+          </span>
+        </div>
+      )}
+
+      <div className={cn("group flex items-end gap-2 mb-1", isUser ? "flex-row-reverse" : "flex-row")}>
+        {/* Avatar */}
+        <div className={cn(
+          "flex h-9 w-9 shrink-0 items-center justify-center rounded-xl text-lg shadow-lg transition-all duration-200 border",
+          isUser
+            ? "neo-card bg-gradient-to-br from-blue-500 to-indigo-500 dark:from-cyan-600 dark:to-blue-600 text-white text-sm font-bold border-blue-400/50 dark:border-cyan-500/50 group-hover:scale-110 group-hover:shadow-blue-500/30 dark:group-hover:shadow-cyan-500/50"
+            : "neo-card bg-white dark:bg-slate-800 text-xl border-gray-200 dark:border-slate-700 group-hover:scale-110 dark:group-hover:shadow-purple-500/30",
+        )}>
+          {isUser ? "我" : agentAvatar}
+        </div>
+
+        <div className={cn("flex flex-col gap-1.5 max-w-[75%]", isUser ? "items-end" : "items-start")}>
+          {!isUser && agentName && (
+            <span className="text-xs text-gray-500 px-1">{agentName}</span>
+          )}
+
+          {/* Thinking Block */}
+          {!isUser && message.thinking && (
+            <button
+              type="button"
+              onClick={() => setThinkingOpen(!thinkingOpen)}
+              className="flex items-center gap-1.5 rounded-xl border neo-card border-purple-200 bg-purple-50 dark:border-purple-500/30 dark:bg-purple-900/20 dark:backdrop-blur-sm px-3 py-1.5 text-xs text-purple-700 dark:text-purple-300 hover:bg-purple-100 dark:hover:bg-purple-900/30 dark:hover:border-purple-500/50 transition-all duration-200 w-full text-left group/think hover:scale-[1.02]"
+            >
+              <Brain className="h-3.5 w-3.5 shrink-0 transition-transform duration-200 group-hover/think:rotate-12" />
+              <span className="flex-1 font-medium">思考过程</span>
+              {thinkingOpen ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
+            </button>
+          )}
+          {thinkingOpen && message.thinking && (
+            <div className="rounded-xl border neo-card-inset border-purple-200 bg-purple-50/50 dark:border-purple-500/30 dark:bg-purple-900/10 dark:backdrop-blur-sm px-3 py-2 text-xs text-purple-800 dark:text-purple-200 w-full">
+              <div className="prose prose-xs max-w-none dark:prose-invert whitespace-pre-wrap leading-relaxed font-mono">
+                {message.thinking}
+              </div>
+            </div>
+          )}
+
+          {/* Main bubble */}
+          <div className="relative">
+            {isUser ? (
+              <span className="absolute right-[-5px] bottom-3 w-0 h-0 border-t-[5px] border-t-transparent border-b-[5px] border-b-transparent border-l-[6px] border-l-blue-500 dark:border-l-cyan-600" />
+            ) : (
+              <span className="absolute left-[-5px] bottom-3 w-0 h-0 border-t-[5px] border-t-transparent border-b-[5px] border-b-transparent border-r-[6px] border-r-white dark:border-r-slate-800" />
+            )}
+            <div className={cn(
+              "group/msg relative rounded-xl text-[14px] leading-[1.6] shadow-lg overflow-hidden transition-all duration-200 border backdrop-blur-sm",
+              isUser
+                ? "bg-gradient-to-br from-blue-500 to-indigo-500 dark:from-cyan-600 dark:to-blue-600 text-white rounded-br-[3px] border-blue-400/50 dark:border-cyan-500/50 hover:shadow-blue-500/20 dark:hover:shadow-cyan-500/30"
+                : "neo-card bg-white dark:bg-slate-800/90 text-gray-800 dark:text-gray-100 rounded-bl-[3px] border-gray-200 dark:border-slate-700/50 dark:hover:border-slate-600",
+            )}>
+              {/* Image attachments */}
+              {isUser && message.images && message.images.length > 0 && (
+                <div className="flex flex-wrap gap-1.5 p-2 pb-0">
+                  {message.images.map((img: AttachedImage) => (
+                    // eslint-disable-next-line @next/next/no-img-element
+                    <img key={img.id} src={img.previewUrl} alt={img.name}
+                      className="h-32 max-w-[180px] object-cover rounded-md" />
+                  ))}
+                </div>
+              )}
+              <div className="px-3.5 py-2.5">
+                {isUser ? (
+                  message.content ? <p className="whitespace-pre-wrap break-words">{message.content}</p> : null
+                ) : (
+                  <div className={cn(
+                    "prose prose-sm max-w-none break-words",
+                    "prose-p:my-1 prose-headings:my-2 prose-ul:my-1 prose-ol:my-1",
+                    "prose-code:bg-gray-100 dark:prose-code:bg-black/10 prose-code:rounded prose-code:px-1 prose-code:text-[13px]",
+                    "prose-pre:bg-gray-100 dark:prose-pre:bg-black/30 prose-pre:rounded-md prose-pre:text-[13px]",
+                    "dark:prose-invert",
+                  )}>
+                    <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeHighlight]}>
+                      {message.content}
+                    </ReactMarkdown>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {/* Inline media — images/videos detected in assistant message */}
+          {mediaPaths.length > 0 && (
+            <div className="w-full space-y-2 mt-1">
+              {mediaPaths.map(({ path: p, type }) => (
+                <div key={p} className="rounded-xl overflow-hidden border border-border/40 bg-black/5 dark:bg-white/5">
+                  {type === "image" ? (
+                    <div className="relative group/media">
+                      {/* eslint-disable-next-line @next/next/no-img-element */}
+                      <img
+                        src={serveUrl(p)}
+                        alt={p.split("/").pop()}
+                        className="w-full max-h-[480px] object-contain"
+                        loading="lazy"
+                      />
+                      <a
+                        href={serveUrl(p)}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        download={p.split("/").pop()}
+                        className="absolute top-2 right-2 opacity-0 group-hover/media:opacity-100 transition-opacity bg-black/60 text-white rounded-lg px-2 py-1 text-xs flex items-center gap-1"
+                      >
+                        <ExternalLink className="h-3 w-3" />
+                        打开原图
+                      </a>
+                      <p className="px-2 py-1 text-[10px] text-muted-foreground font-mono truncate border-t border-border/30">
+                        {p}
+                      </p>
+                    </div>
+                  ) : (
+                    <div>
+                      <video
+                        src={serveUrl(p)}
+                        controls
+                        className="w-full max-h-[360px]"
+                        preload="metadata"
+                      />
+                      <p className="px-2 py-1 text-[10px] text-muted-foreground font-mono truncate border-t border-border/30">
+                        {p}
+                      </p>
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+
+          {/* Tool calls */}
+          {message.toolCalls && message.toolCalls.length > 0 && (
+            <div className="w-full space-y-1">
+              {message.toolCalls.map((tc) => <ToolCallCard key={tc.id} toolCall={tc} />)}
+            </div>
+          )}
+
+          {/* Hover action bar */}
+          <div className={cn(
+            "flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-all duration-200",
+            isUser ? "self-end" : "self-start",
+          )}>
+            {/* Copy */}
+            <button type="button" onClick={handleCopy}
+              className="flex items-center gap-1 text-[11px] neo-button text-gray-600 hover:text-blue-600 dark:text-gray-400 dark:hover:bg-cyan-500/20 dark:hover:text-cyan-400 px-2.5 py-1 rounded-lg border-transparent dark:hover:border-cyan-500/50 transition-all duration-200 hover:scale-105">
+              {copied ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
+              {copied ? t("copied") : t("copyMessage")}
+            </button>
+            {/* Retry (assistant) */}
+            {!isUser && onRetry && (
+              <button type="button" onClick={() => onRetry(message)}
+                className="flex items-center gap-1 text-[11px] neo-button text-gray-600 hover:text-purple-600 dark:text-gray-400 dark:hover:bg-purple-500/20 dark:hover:text-purple-400 px-2.5 py-1 rounded-lg border-transparent dark:hover:border-purple-500/50 transition-all duration-200 hover:scale-105">
+                <RefreshCw className="h-3 w-3 transition-transform duration-200 hover:rotate-180" />重试
+              </button>
+            )}
+            {/* Fork (assistant) */}
+            {!isUser && onFork && (
+              <button type="button" onClick={() => onFork(message)}
+                className="flex items-center gap-1 text-[11px] neo-button text-gray-600 hover:text-indigo-600 dark:text-gray-400 dark:hover:bg-blue-500/20 dark:hover:text-blue-400 px-2.5 py-1 rounded-lg border-transparent dark:hover:border-blue-500/50 transition-all duration-200 hover:scale-105">
+                <GitBranch className="h-3 w-3" />分叉
+              </button>
+            )}
+            {/* Speak (assistant) */}
+            {!isUser && onSpeak && (
+              <button type="button" onClick={() => onSpeak(message.content)}
+                className="flex items-center gap-1 text-[11px] neo-button text-gray-600 hover:text-green-600 dark:text-gray-400 dark:hover:bg-green-500/20 dark:hover:text-green-400 px-2.5 py-1 rounded-lg border-transparent dark:hover:border-green-500/50 transition-all duration-200 hover:scale-105">
+                <Volume2 className="h-3 w-3" />朗读
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Typing indicator
+export function TypingBubble({ agentAvatar }: { agentAvatar: string }) {
+  return (
+    <div className="px-3">
+      <div className="flex items-end gap-2 mb-1">
+        <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-[6px] bg-white dark:bg-zinc-700 text-xl shadow-sm">
+          {agentAvatar}
+        </div>
+        <div className="relative">
+          <span className={cn("absolute left-[-5px] bottom-3 w-0 h-0 border-t-[5px] border-t-transparent border-b-[5px] border-b-transparent border-r-[6px] border-r-white dark:border-r-zinc-700")} />
+          <div className="bg-white dark:bg-zinc-700 rounded-lg rounded-bl-[3px] px-4 py-3 shadow-sm">
+            <div className="flex items-center gap-1.5">
+              {[0, 1, 2].map((i) => (
+                <span key={i} className="h-2 w-2 rounded-full bg-zinc-400 animate-bounce"
+                  style={{ animationDelay: `${i * 150}ms` }} />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Tool call card
+function ToolCallCard({ toolCall }: { toolCall: ToolCall }) {
+  const t = useTranslations("chat");
+  const [open, setOpen] = useState(false);
+  const [fullOutput, setFullOutput] = useState<string | null>(null);
+  const [loadingFull, setLoadingFull] = useState(false);
+
+  const isBash = toolCall.name === "bash" || toolCall.name === "user_bash";
+  // For bash: input is the raw command string; for others: may be JSON
+  const displayInput = (() => {
+    if (!toolCall.input) return null;
+    if (isBash) return toolCall.input; // already extracted as command string
+    try {
+      const parsed = JSON.parse(toolCall.input);
+      if (typeof parsed === "string") return parsed;
+      return JSON.stringify(parsed, null, 2);
+    } catch { return toolCall.input; }
+  })();
+
+  const shownOutput = fullOutput ?? toolCall.output;
+
+  const loadFull = async () => {
+    if (!toolCall.fullOutputPath || loadingFull) return;
+    setLoadingFull(true);
+    try {
+      const res = await fetch(`/api/bash-output?path=${encodeURIComponent(toolCall.fullOutputPath)}`);
+      const data = await res.json() as { output?: string; error?: string };
+      setFullOutput(data.output ?? data.error ?? "加载失败");
+    } catch (e) {
+      setFullOutput(`加载失败: ${String(e)}`);
+    } finally {
+      setLoadingFull(false);
+    }
+  };
+
+  return (
+    <div className={cn(
+      "rounded-lg border text-[12px] overflow-hidden w-full",
+      isBash ? "bg-gray-100 dark:bg-zinc-950 border-gray-300 dark:border-zinc-700" : "bg-black/5 dark:bg-white/5",
+    )}>
+      {/* Header */}
+      <button type="button" onClick={() => setOpen(!open)}
+        className={cn(
+          "flex w-full items-center gap-2 px-3 py-2 transition-colors text-left",
+          isBash
+            ? "text-gray-700 hover:bg-gray-200 dark:text-zinc-300 dark:hover:bg-zinc-800"
+            : "hover:bg-black/5 dark:hover:bg-white/5",
+        )}>
+        {toolCall.isLoading
+          ? <Loader2 className="h-3 w-3 text-muted-foreground animate-spin shrink-0" />
+          : isBash
+          ? <span className="text-[10px] font-bold text-zinc-500 shrink-0 font-mono">$_</span>
+          : <Wrench className="h-3 w-3 text-muted-foreground shrink-0" />}
+
+        {/* For bash: show the command in header; for others: show tool name */}
+        {isBash && displayInput ? (
+          <span className="font-mono flex-1 text-left truncate text-zinc-200">{displayInput}</span>
+        ) : (
+          <span className="font-mono font-medium flex-1 text-left truncate">{toolCall.name}</span>
+        )}
+
+        {!toolCall.isLoading && (
+          <span className={cn("text-xs shrink-0", toolCall.isError ? "text-red-400" : "text-green-400")}>
+            {toolCall.isError ? "✗" : "✓"}
+          </span>
+        )}
+        {toolCall.isLoading && <span className="text-muted-foreground text-[11px] animate-pulse shrink-0">{t("thinking")}</span>}
+        {open ? <ChevronDown className="h-3 w-3 shrink-0 text-zinc-500" /> : <ChevronRight className="h-3 w-3 shrink-0 text-zinc-500" />}
+      </button>
+
+      {/* Expanded body */}
+      {open && (
+        <div className={cn("border-t space-y-0", isBash ? "border-zinc-700" : "border-border")}>
+          {/* For non-bash: show input args */}
+          {!isBash && displayInput && (
+            <div className="px-3 py-2 border-b border-border">
+              <p className="text-muted-foreground mb-1 text-[11px] uppercase tracking-wide">{t("toolCall")}</p>
+              <pre className="whitespace-pre-wrap break-all text-[12px]">{displayInput}</pre>
+            </div>
+          )}
+
+          {/* Output area */}
+          {shownOutput !== undefined && (
+            <div className={cn("px-3 py-2", isBash && "bg-zinc-950")}>
+              {!isBash && <p className="text-muted-foreground mb-1 text-[11px] uppercase tracking-wide">{t("toolResult")}</p>}
+              <pre className={cn(
+                "whitespace-pre-wrap break-all text-[12px] max-h-64 overflow-auto leading-relaxed",
+                isBash ? "text-zinc-200 font-mono" : "",
+                toolCall.isError ? "text-red-400" : "",
+              )}>{shownOutput}</pre>
+
+              {/* Load full output button (when output was truncated) */}
+              {toolCall.truncated && toolCall.fullOutputPath && !fullOutput && (
+                <button type="button" onClick={loadFull} disabled={loadingFull}
+                  className="mt-2 flex items-center gap-1.5 text-[11px] text-zinc-400 hover:text-zinc-200 transition-colors disabled:opacity-50">
+                  {loadingFull
+                    ? <Loader2 className="h-3 w-3 animate-spin" />
+                    : <ChevronDown className="h-3 w-3" />}
+                  {loadingFull ? "加载中…" : "输出已截断，点击加载完整内容"}
+                </button>
+              )}
+            </div>
+          )}
+
+          {/* No output yet */}
+          {!shownOutput && !toolCall.isLoading && (
+            <div className="px-3 py-2">
+              <span className="text-[11px] text-zinc-500 italic">（无输出）</span>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function formatTime(date: Date): string {
+  const now = new Date(), d = new Date(date);
+  const diffDays = Math.floor((now.getTime() - d.getTime()) / 86400000);
+  const timeStr = d.toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" });
+  if (diffDays === 0) return timeStr;
+  if (diffDays === 1) return `昨天 ${timeStr}`;
+  if (diffDays < 7) return `${["周日","周一","周二","周三","周四","周五","周六"][d.getDay()]} ${timeStr}`;
+  return d.toLocaleDateString("zh-CN", { month: "numeric", day: "numeric" }) + " " + timeStr;
+}