@coze-arch/cli 0.0.18 → 0.0.19-alpha.502ddf

package/lib/__templates__/pi-agent/src/dashboard/web/src/pages/chat-page.tsx

@@ -0,0 +1,440 @@
+import React from "react";
+import { ArrowDown, ArrowUp, MessageSquareDashed, RefreshCw, Trash2 } from "lucide-react";
+import { Alert, AlertDescription, AlertTitle } from "../components/ui/alert";
+import { Button } from "../components/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select";
+import { ChatWsService, type ChatWsServerFrame } from "../services/chat-ws-service";
+import { useLocalStorageState } from "../hooks/use-local-storage-state";
+import { Streamdown } from "streamdown";
+import { code } from "@streamdown/code";
+import { cn } from "../utils";
+
+type ChatUiMessage = {
+  role: "user" | "assistant";
+  text: string;
+  timestamp?: number;
+};
+
+const MAIN_SESSION_KEY = "dashboard:dm:dashboard-user";
+
+function uniq<T>(items: T[]): T[] {
+  return Array.from(new Set(items));
+}
+
+function formatSessionLabel(sessionKey: string): string {
+  if (sessionKey === MAIN_SESSION_KEY) return "Main Session";
+  const parts = sessionKey.split(":");
+  if (parts.length < 2) return sessionKey;
+  const channel = parts[0] ?? "";
+  const kind = parts[1] ?? "";
+  if (kind === "dm") {
+    const senderId = parts.slice(2).join(":") || "unknown";
+    return `${channel} · dm · ${senderId}`;
+  }
+  if (kind === "group") {
+    const conversationId = parts.slice(2).join(":") || "unknown";
+    return `${channel} · group · ${conversationId}`;
+  }
+  if (kind === "thread") {
+    const conversationId = parts[2] ?? "unknown";
+    const threadId = parts.slice(3).join(":") || "unknown";
+    return `${channel} · thread · ${conversationId} · ${threadId}`;
+  }
+  return sessionKey;
+}
+
+export function ChatPage() {
+  const [sessionKey, setSessionKey] = useLocalStorageState<string>("pi-bot.dashboard.chat.sessionKey", MAIN_SESSION_KEY);
+  const [availableSessionKeys, setAvailableSessionKeys] = React.useState<string[]>([MAIN_SESSION_KEY]);
+  const [messages, setMessages] = React.useState<ChatUiMessage[]>([]);
+  const [input, setInput] = React.useState("");
+  const [loadingHistory, setLoadingHistory] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+  const [streaming, setStreaming] = React.useState(false);
+  const [isComposing, setIsComposing] = React.useState(false);
+  const currentRunIdRef = React.useRef<string | null>(null);
+  const scrollContainerRef = React.useRef<HTMLDivElement | null>(null);
+  const [stickToBottom, setStickToBottom] = React.useState(true);
+
+  const isNearBottom = React.useCallback((el: HTMLElement) => {
+    // Keep UX stable: only auto-follow when user is already near the bottom.
+    const NEAR_BOTTOM_PX = 120;
+    const distanceFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
+    return distanceFromBottom < NEAR_BOTTOM_PX;
+  }, []);
+
+  const scrollToBottom = React.useCallback(() => {
+    const el = scrollContainerRef.current;
+    if (!el) return;
+    el.scrollTop = el.scrollHeight;
+  }, []);
+
+  React.useLayoutEffect(() => {
+    if (!stickToBottom) return;
+    scrollToBottom();
+  }, [messages, stickToBottom, scrollToBottom]);
+
+  const refreshSessions = React.useCallback(async () => {
+    try {
+      const res = await fetch("/api/chat/sessions");
+      const json = (await res.json()) as { ok?: boolean; error?: string; sessions?: string[] };
+      if (!res.ok || json.ok === false) {
+        throw new Error(json.error || `${res.status} ${res.statusText}`);
+      }
+      const list = Array.isArray(json.sessions) ? json.sessions : [];
+      setAvailableSessionKeys(uniq([MAIN_SESSION_KEY, sessionKey, ...list].filter(Boolean)));
+    } catch {
+      // best-effort; keep prior list
+    }
+  }, [sessionKey]);
+
+  const loadHistory = React.useCallback(async () => {
+    setLoadingHistory(true);
+    setError(null);
+    try {
+      const qs = new URLSearchParams();
+      qs.set("sessionKey", sessionKey);
+
+      const res = await fetch(`/api/chat/history?${qs.toString()}`);
+      const json = (await res.json()) as {
+        ok?: boolean;
+        error?: string;
+        sessionKey?: string;
+        messages?: ChatUiMessage[];
+      };
+      if (!res.ok || json.ok === false) {
+        throw new Error(json.error || `${res.status} ${res.statusText}`);
+      }
+      if (typeof json.sessionKey === "string" && json.sessionKey.trim()) {
+        setSessionKey(json.sessionKey);
+      }
+      setMessages(Array.isArray(json.messages) ? json.messages : []);
+      // Loading history should land at the bottom by default.
+      setStickToBottom(true);
+    } catch (e) {
+      setError(String(e));
+    } finally {
+      setLoadingHistory(false);
+    }
+  }, [sessionKey, setSessionKey]);
+
+  React.useEffect(() => {
+    void loadHistory();
+  }, [loadHistory]);
+
+  React.useEffect(() => {
+    void refreshSessions();
+  }, [refreshSessions]);
+
+  const serviceRef = React.useRef<ChatWsService | null>(null);
+  if (!serviceRef.current) {
+    serviceRef.current = new ChatWsService({
+      resolveUrl: () => {
+        const proto = window.location.protocol === "https:" ? "wss" : "ws";
+        return `${proto}://${window.location.host}/api/chat/ws`;
+      },
+      onFrame: (frame: ChatWsServerFrame) => {
+        const currentRunId = currentRunIdRef.current;
+        const isActiveRun = currentRunId && frame.runId === currentRunId;
+
+        if (frame.type === "ack") {
+          if (isActiveRun && frame.status === "in_flight") {
+            setError("Session is busy (in_flight)");
+            setStreaming(false);
+          }
+          return;
+        }
+        if (frame.type === "meta") {
+          if (!isActiveRun) return;
+          setSessionKey(frame.sessionKey);
+          return;
+        }
+        if (frame.type === "delta") {
+          if (!isActiveRun) return;
+          if (!frame.delta) return;
+          setMessages((prev) => {
+            const next = prev.slice();
+            for (let i = next.length - 1; i >= 0; i--) {
+              if (next[i]!.role === "assistant") {
+                next[i] = { ...next[i]!, text: (next[i]!.text ?? "") + frame.delta };
+                break;
+              }
+            }
+            return next;
+          });
+          return;
+        }
+        if (frame.type === "done") {
+          if (!isActiveRun) return;
+          if (typeof frame.text === "string" && frame.text) {
+            setMessages((prev) => {
+              const next = prev.slice();
+              for (let i = next.length - 1; i >= 0; i--) {
+                if (next[i]!.role === "assistant") {
+                  if (!next[i]!.text) {
+                    next[i] = { ...next[i]!, text: frame.text };
+                  }
+                  break;
+                }
+              }
+              return next;
+            });
+          }
+          currentRunIdRef.current = null;
+          setStreaming(false);
+          return;
+        }
+        if (frame.type === "error") {
+          if (!isActiveRun) return;
+          setError(frame.error || "Unknown error");
+          currentRunIdRef.current = null;
+          setStreaming(false);
+        }
+      },
+    });
+  }
+
+  React.useEffect(() => {
+    void serviceRef.current!.connect();
+    return () => {
+      serviceRef.current?.close();
+    };
+  }, []);
+
+  const onReset = async () => {
+    setError(null);
+    try {
+      const res = await fetch("/api/chat/reset", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ sessionKey }),
+      });
+      const json = (await res.json()) as { ok?: boolean; error?: string; sessionKey?: string };
+      if (!res.ok || json.ok === false) {
+        throw new Error(json.error || `${res.status} ${res.statusText}`);
+      }
+      if (typeof json.sessionKey === "string" && json.sessionKey.trim()) {
+        setSessionKey(json.sessionKey);
+      }
+      setMessages([]);
+    } catch (e) {
+      setError(String(e));
+    }
+  };
+
+  const onStop = () => {
+    try {
+      const runId = currentRunIdRef.current ?? undefined;
+      serviceRef.current?.abort({ runId, sessionKey });
+    } catch {
+      // ignore
+    }
+    setStreaming(false);
+  };
+
+  const onSend = async () => {
+    const text = input.trim();
+    if (!text || streaming) return;
+
+    setError(null);
+    setStreaming(true);
+    setInput("");
+    // If user sends, treat it as intent to follow the latest messages.
+    setStickToBottom(true);
+
+    const now = Date.now();
+    setMessages((prev) => [
+      ...prev,
+      { role: "user", text, timestamp: now },
+      { role: "assistant", text: "", timestamp: now },
+    ]);
+
+    try {
+      const runId = `run-${Date.now()}-${Math.random().toString(16).slice(2, 8)}`;
+      currentRunIdRef.current = runId;
+      await serviceRef.current!.sendChatByKey({ runId, sessionKey, text });
+    } catch (e) {
+      setError(String(e));
+      setStreaming(false);
+    }
+  };
+
+  return (
+    <section className="flex h-full min-h-0 flex-col gap-4 p-4 sm:p-5 md:p-6">
+      <div className="flex flex-row items-center justify-between gap-3">
+        <div className="min-w-0">
+          <h1 className="text-lg font-semibold tracking-tight">对话</h1>
+        </div>
+        <div className="flex items-center gap-2">
+          <Select value={sessionKey} onValueChange={setSessionKey} disabled={streaming}>
+            <SelectTrigger className="min-w-[280px]" aria-label="切换会话">
+              <SelectValue placeholder="选择会话" />
+            </SelectTrigger>
+            <SelectContent>
+              {availableSessionKeys.map((key) => (
+                <SelectItem key={key} value={key}>
+                  {formatSessionLabel(key)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <Button
+            variant="outline"
+            className="aspect-square h-10 shrink-0 rounded-md p-0"
+            onClick={async () => {
+              await refreshSessions();
+              await loadHistory();
+            }}
+            disabled={loadingHistory || streaming}
+            aria-label={loadingHistory ? "正在刷新会话" : "刷新会话"}
+            title={loadingHistory ? "正在刷新会话" : "刷新会话"}
+          >
+            <RefreshCw className={cn("h-4 w-4", loadingHistory && "animate-spin")} />
+          </Button>
+          <Button
+            variant="outline"
+            className="aspect-square h-10 shrink-0 rounded-md p-0"
+            onClick={onReset}
+            disabled={streaming}
+            aria-label="重置会话"
+            title="重置会话"
+          >
+            <Trash2 className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      {error ? (
+        <Alert className="border-destructive/20 bg-destructive/5 text-destructive">
+          <AlertTitle>会话异常</AlertTitle>
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      ) : null}
+
+      <div className="flex min-h-0 flex-1 flex-col gap-3">
+        <div className="relative min-h-0 flex-1">
+          <div
+            ref={scrollContainerRef}
+            className="min-h-0 h-full overflow-auto p-3"
+            onScroll={(e) => {
+              const el = e.currentTarget;
+              setStickToBottom(isNearBottom(el));
+            }}
+          >
+            {messages.length === 0 ? (
+              <div className="flex h-full min-h-[220px] items-center justify-center">
+                <div className="flex flex-col items-center gap-3 text-center text-muted-foreground">
+                  <div className="flex h-12 w-12 items-center justify-center rounded-full bg-background/80">
+                    <MessageSquareDashed className="h-5 w-5" />
+                  </div>
+                  <div className="space-y-1">
+                    <p className="text-sm font-medium text-foreground/80">暂无消息</p>
+                    <p className="text-xs">开始发送一条消息吧</p>
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <div className="space-y-6">
+                {messages.map((m, idx) => (
+                  <div key={idx} className={cn("flex", m.role === "user" ? "justify-end" : "justify-start")}>
+                    <div
+                      className={cn(
+                        "streamdown-content text-sm",
+                        m.role === "user"
+                          ? "max-w-[min(720px,80%)] rounded-lg bg-secondary px-4 py-3 text-foreground"
+                          : "w-full max-w-none bg-transparent px-0 py-0 text-foreground",
+                      )}
+                    >
+                      {m.role === "assistant" && streaming && idx === messages.length - 1 && !m.text ? (
+                        <TypingPlaceholder />
+                      ) : (
+                        <Streamdown
+                          plugins={{ code }}
+                          parseIncompleteMarkdown={true}
+                          isAnimating={m.role === "assistant" && streaming && idx === messages.length - 1}
+                        >
+                          {m.text}
+                        </Streamdown>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+          {!stickToBottom && messages.length > 0 ? (
+            <Button
+              type="button"
+              variant="outline"
+              className="absolute bottom-4 left-1/2 h-9 w-9 -translate-x-1/2 rounded-full bg-background/95 p-0 shadow-sm backdrop-blur"
+              onClick={() => {
+                const el = scrollContainerRef.current;
+                if (!el) return;
+                el.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
+                setStickToBottom(true);
+              }}
+              aria-label="快速到底部"
+              title="快速到底部"
+            >
+              <ArrowDown className="h-4 w-4" />
+            </Button>
+          ) : null}
+        </div>
+
+        <div className="relative flex flex-col rounded-lg border border-border bg-background py-2">
+          <textarea
+            rows={2}
+            className="min-h-[56px] w-full resize-none border-0 bg-transparent px-4 pt-0.5 text-base leading-7 text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-60"
+            placeholder="在此输入你的要求"
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onCompositionStart={() => setIsComposing(true)}
+            onCompositionEnd={() => setIsComposing(false)}
+            onKeyDown={(e) => {
+              if (isComposing || e.nativeEvent.isComposing || e.keyCode === 229) {
+                return;
+              }
+              if (e.key === "Enter" && !e.shiftKey) {
+                e.preventDefault();
+                void onSend();
+              }
+            }}
+            disabled={streaming}
+          />
+          <div className="flex items-center justify-end px-3 pt-0.5">
+            <Button
+              variant="default"
+              className={cn(
+                "h-7 w-7 shrink-0 p-0 text-background",
+                streaming
+                  ? "rounded-full bg-foreground hover:bg-foreground/90"
+                  : "rounded-md bg-primary hover:bg-primary/90",
+              )}
+              onClick={streaming ? onStop : onSend}
+              disabled={!streaming && input.trim().length === 0}
+              aria-label={streaming ? "停止生成" : "发送消息"}
+              title={streaming ? "停止生成" : "发送消息"}
+            >
+              {streaming ? (
+                <span className="h-3 w-3 rounded-[2px] bg-current" aria-hidden="true" />
+              ) : (
+                <ArrowUp className="h-4 w-4" />
+              )}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function TypingPlaceholder() {
+  return (
+    <div className="inline-flex items-center gap-2 text-[15px] font-medium text-muted-foreground/90">
+      <span className="animate-pulse [animation-duration:1.6s]">生成中</span>
+      <span className="animate-pulse text-muted-foreground/70 [animation-delay:180ms] [animation-duration:1.6s]" aria-hidden="true">
+        ...
+      </span>
+    </div>
+  );
+}