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

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

@@ -0,0 +1,330 @@
+import React from "react";
+import { Alert, AlertDescription, AlertTitle } from "../components/ui/alert";
+import { Button } from "../components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../components/ui/card";
+import { Input } from "../components/ui/input";
+import { Label } from "../components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select";
+import { useFetch } from "../hooks/use-fetch";
+import { toast } from "sonner";
+
+type Overview = {
+  appName: string;
+  botStatus: string;
+  dashboardUrl: string;
+  agentMode: string;
+  workspaceDir: string;
+  agentDir: string;
+  enabledChannels: Array<{ id: string; enabled: boolean }>;
+};
+
+type Channels = {
+  routing: {
+    feishuGroupRequireMention: boolean;
+    wechatGroupRequireMention: boolean;
+  };
+  feishu: {
+    enabled: boolean;
+    requireMention?: boolean;
+    appId?: string;
+    domain?: string;
+    encryptKey?: string;
+    verificationToken?: string;
+    appSecret?: string;
+    thinkingReaction?: {
+      enabled?: boolean;
+      emojiType?: string;
+    };
+  };
+  wechat: {
+    enabled: boolean;
+    requireMention?: boolean;
+    implementation?: string;
+  };
+};
+
+type ModelOption = {
+  value: string;
+  label: string;
+};
+
+type ModelsConfig = {
+  defaultModel: string;
+  options: ModelOption[];
+};
+
+export function OverviewPage() {
+  const { data, error, loading } = useFetch<Overview>("/api/overview");
+  const enabledChannels = data?.enabledChannels ?? [];
+  const activeChannelCount = enabledChannels.filter((c) => c.enabled).length;
+  const botStatusText = data?.botStatus === "running" ? "运行中" : data?.botStatus === "stopped" ? "已停止" : "未知";
+
+  return (
+    <section className="space-y-4 p-4 sm:p-5 md:p-6">
+      <div className="grid gap-4 xl:grid-cols-[minmax(0,1.6fr)_minmax(320px,1fr)]">
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base">系统摘要</CardTitle>
+            <CardDescription>当前 bot、渠道与工作区的核心状态。</CardDescription>
+          </CardHeader>
+          <CardContent className="grid gap-3 sm:grid-cols-2">
+            <SummaryStat
+              label="运行状态"
+              value={botStatusText}
+              hint={data?.botStatus === "running" ? "服务运行中" : "等待服务状态"}
+            />
+            <SummaryStat
+              label="启用渠道"
+              value={String(activeChannelCount)}
+              hint={enabledChannels.length ? `${enabledChannels.length} 个渠道已接入` : "暂无渠道信息"}
+            />
+          </CardContent>
+        </Card>
+
+        <DefaultModelSection />
+      </div>
+
+      <ChannelsSection />
+    </section>
+  );
+}
+
+function DefaultModelSection() {
+  const { data, error, loading } = useFetch<ModelsConfig>("/api/models");
+  const [saving, setSaving] = React.useState(false);
+  const [form, setForm] = React.useState<ModelsConfig | null>(null);
+
+  React.useEffect(() => {
+    if (!data) return;
+    setForm({
+      defaultModel: typeof data.defaultModel === "string" ? data.defaultModel : "",
+      options: Array.isArray((data as unknown as { options?: unknown }).options)
+        ? (data as unknown as { options: ModelOption[] }).options
+        : [],
+    });
+  }, [data]);
+
+  const saveDefaultModel = async (defaultModel: string) => {
+    setSaving(true);
+    try {
+      const res = await fetch("/api/models", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ models: { defaultModel } }),
+      });
+      const json = (await res.json()) as { ok?: boolean; error?: string };
+      if (!res.ok || json.ok === false) {
+        throw new Error(json.error || `${res.status} ${res.statusText}`);
+      }
+      toast.success("已保存（需要重启进程生效）");
+    } catch (e) {
+      toast.error(`保存失败：${String(e)}`, { duration: 4500 });
+      throw e;
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const options = form?.options ?? [];
+  const onDefaultModelChange = async (nextValue: string) => {
+    if (!form || nextValue === form.defaultModel) return;
+    const previousValue = form.defaultModel;
+    setForm({ ...form, defaultModel: nextValue });
+    try {
+      await saveDefaultModel(nextValue);
+    } catch {
+      setForm((current) => (current ? { ...current, defaultModel: previousValue } : current));
+    }
+  };
+
+  return (
+    <Card className="border-border/60 bg-background/70 shadow-none">
+      <CardHeader className="pb-3">
+        <CardTitle className="text-base">默认模型</CardTitle>
+        <CardDescription>切换当前使用的默认模型。</CardDescription>
+      </CardHeader>
+      <CardContent>
+        {loading ? (
+          <Alert>
+            <AlertTitle>加载中</AlertTitle>
+            <AlertDescription>正在读取模型配置。</AlertDescription>
+          </Alert>
+        ) : error ? (
+          <Alert className="border-destructive/20 bg-destructive/5 text-destructive">
+            <AlertTitle>读取失败</AlertTitle>
+            <AlertDescription>错误：{error}</AlertDescription>
+          </Alert>
+        ) : form && options.length > 0 ? (
+          <Select
+            value={form.defaultModel}
+            onValueChange={onDefaultModelChange}
+            disabled={saving}
+          >
+            <SelectTrigger aria-label="选择默认模型">
+              <SelectValue placeholder="选择默认模型" />
+            </SelectTrigger>
+            <SelectContent>
+              {options.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        ) : form ? (
+          <Alert>
+            <AlertTitle>没有可选模型</AlertTitle>
+            <AlertDescription>当前还没有可用模型，请先补充模型定义。</AlertDescription>
+          </Alert>
+        ) : null}
+      </CardContent>
+    </Card>
+  );
+}
+
+function ChannelsSection() {
+  const { data, error, loading } = useFetch<Channels>("/api/channels");
+  const [saving, setSaving] = React.useState(false);
+  const [form, setForm] = React.useState<Channels | null>(null);
+
+  React.useEffect(() => {
+    if (data) setForm(data);
+  }, [data]);
+
+  const patch = (fn: (draft: Channels) => void) => {
+    if (!form) return;
+    const draft = { ...form, feishu: { ...form.feishu }, wechat: { ...form.wechat } };
+    fn(draft);
+    setForm(draft);
+  };
+
+  const onSave = async () => {
+    if (!form) return;
+    setSaving(true);
+    try {
+      const res = await fetch("/api/channels", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ channels: form }),
+      });
+      const json = (await res.json()) as { ok?: boolean; error?: string };
+      if (!res.ok || json.ok === false) {
+        throw new Error(json.error || `${res.status} ${res.statusText}`);
+      }
+      toast.success("已保存（需要重启进程生效）");
+    } catch (e) {
+      toast.error(`保存失败：${String(e)}`, { duration: 4500 });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <Card className="border-border/60 bg-background/70 shadow-none">
+      <CardHeader>
+        <CardTitle className="text-base">飞书配置</CardTitle>
+        <CardDescription>管理飞书渠道的启用状态与接入凭证。</CardDescription>
+      </CardHeader>
+      <CardContent>
+        {loading ? (
+          <Alert>
+            <AlertTitle>加载中</AlertTitle>
+            <AlertDescription>正在读取渠道配置。</AlertDescription>
+          </Alert>
+        ) : error ? (
+          <Alert className="border-destructive/20 bg-destructive/5 text-destructive">
+            <AlertTitle>读取失败</AlertTitle>
+            <AlertDescription>错误：{error}</AlertDescription>
+          </Alert>
+        ) : form ? (
+          <div className="space-y-4">
+            <div className="grid gap-4">
+              <CheckboxField
+                label="启用状态"
+                checked={!!form.feishu.enabled}
+                onChange={(checked) => patch((d) => (d.feishu.enabled = checked))}
+              />
+              <TextField
+                label="App ID"
+                value={form.feishu.appId ?? ""}
+                onChange={(value) => patch((d) => (d.feishu.appId = value))}
+              />
+              <TextField
+                label="App Secret"
+                value={form.feishu.appSecret ?? ""}
+                onChange={(value) => patch((d) => (d.feishu.appSecret = value))}
+              />
+            </div>
+            <div className="flex justify-start">
+              <Button
+                onClick={onSave}
+                disabled={!form || saving || loading || Boolean(error)}
+                className="shrink-0"
+              >
+                {saving ? "保存中…" : "保存"}
+              </Button>
+            </div>
+          </div>
+        ) : null}
+      </CardContent>
+    </Card>
+  );
+}
+
+function SummaryStat(props: { label: string; value: string; hint: string }) {
+  return (
+    <div className="rounded-2xl border border-border/70 bg-muted/30 p-4">
+      <div className="text-xs uppercase tracking-[0.18em] text-muted-foreground">{props.label}</div>
+      <div className="mt-3 text-2xl font-semibold tracking-tight">{props.value}</div>
+      <div className="mt-2 text-sm text-muted-foreground">{props.hint}</div>
+    </div>
+  );
+}
+
+function FieldShell(props: { label: string; children: React.ReactNode; description?: string }) {
+  return (
+    <div className="space-y-2">
+      <Label className="text-xs uppercase tracking-[0.16em] text-muted-foreground">{props.label}</Label>
+      {props.children}
+      {props.description ? <p className="text-xs text-muted-foreground">{props.description}</p> : null}
+    </div>
+  );
+}
+
+function TextField(props: {
+  label: string;
+  value: string;
+  placeholder?: string;
+  onChange: (value: string) => void;
+}) {
+  return (
+    <FieldShell label={props.label}>
+      <Input
+        className="font-mono text-xs sm:text-sm"
+        value={props.value}
+        placeholder={props.placeholder}
+        onChange={(e) => props.onChange(e.target.value)}
+      />
+    </FieldShell>
+  );
+}
+
+function CheckboxField(props: {
+  label: string;
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+}) {
+  return (
+    <FieldShell label={props.label}>
+      <label className="flex h-10 items-center gap-3 rounded-md border border-input bg-background/80 px-3 text-sm">
+        <input
+          type="checkbox"
+          className="h-4 w-4 rounded border-border accent-primary"
+          checked={props.checked}
+          onChange={(e) => props.onChange(e.target.checked)}
+        />
+        <span className="text-sm text-foreground">{props.checked ? "已启用" : "未启用"}</span>
+      </label>
+    </FieldShell>
+  );
+}

package/lib/__templates__/pi-agent/src/dashboard/web/src/services/chat-ws-service.ts

@@ -0,0 +1,167 @@
+export type ChatSessionIdentity = {
+  channel: "dashboard" | "feishu" | "wechat";
+  isDirectMessage: boolean;
+  senderId: string;
+  conversationId: string;
+  threadId?: string;
+};
+
+export type ChatWsClientFrame =
+  | { type: "chat.send"; runId: string; session?: ChatSessionIdentity; sessionKey?: string; text: string }
+  | { type: "chat.abort"; runId?: string; session?: ChatSessionIdentity; sessionKey?: string }
+  | { type: "ping" };
+
+export type ChatWsServerFrame =
+  | { type: "ack"; runId: string; status: "started" | "in_flight" }
+  | { type: "meta"; runId: string; sessionKey: string }
+  | { type: "delta"; runId: string; sessionKey: string; delta: string }
+  | { type: "done"; runId: string; sessionKey: string; text: string }
+  | { type: "error"; runId: string; sessionKey?: string; error: string };
+
+export type ChatWsLogFn = (
+  level: "debug" | "info" | "warn" | "error",
+  msg: string,
+  data?: Record<string, unknown>,
+) => void;
+
+export class ChatWsService {
+  private ws: WebSocket | null = null;
+  private ready: Promise<WebSocket> | null = null;
+  private manualClose = false;
+  private reconnectTimer: number | null = null;
+  private reconnectDelayMs = 300;
+
+  constructor(
+    private readonly opts: {
+      resolveUrl: () => string;
+      onFrame: (frame: ChatWsServerFrame) => void;
+      log?: ChatWsLogFn;
+    },
+  ) {}
+
+  private log(level: "debug" | "info" | "warn" | "error", msg: string, data?: Record<string, unknown>) {
+    try {
+      this.opts.log?.(level, msg, data);
+    } catch {
+      // ignore
+    }
+  }
+
+  async connect(): Promise<WebSocket> {
+    if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+      return this.ws;
+    }
+    if (this.ready) {
+      return this.ready;
+    }
+
+    const wsUrl = this.opts.resolveUrl();
+    this.log("debug", "ws.connect.begin", { wsUrl });
+
+    this.ready = new Promise<WebSocket>((resolve, reject) => {
+      try {
+        const ws = new WebSocket(wsUrl);
+        this.ws = ws;
+        this.manualClose = false;
+
+        ws.onopen = () => {
+          this.log("info", "ws.open", { wsUrl });
+          this.reconnectDelayMs = 300;
+          resolve(ws);
+        };
+
+        ws.onerror = () => {
+          this.log("warn", "ws.onerror", { wsUrl });
+        };
+
+        ws.onclose = (evt) => {
+          this.log("warn", "ws.onclose", { wsUrl, code: evt.code, reason: evt.reason, manual: this.manualClose });
+          this.ws = null;
+          this.ready = null;
+          if (!this.manualClose && this.reconnectTimer == null) {
+            const delay = Math.min(2000, this.reconnectDelayMs);
+            this.reconnectDelayMs = Math.min(2000, this.reconnectDelayMs * 2);
+            this.reconnectTimer = window.setTimeout(() => {
+              this.reconnectTimer = null;
+              void this.connect();
+            }, delay);
+          }
+        };
+
+        ws.onmessage = (evt) => {
+          let msg: unknown = null;
+          try {
+            msg = JSON.parse(String(evt.data)) as unknown;
+          } catch {
+            this.log("warn", "ws.bad-json", { dataType: typeof evt.data });
+            return;
+          }
+          if (!msg || typeof msg !== "object") return;
+          const type = (msg as { type?: unknown }).type;
+          if (typeof type !== "string") return;
+          this.opts.onFrame(msg as ChatWsServerFrame);
+        };
+      } catch (e) {
+        reject(e);
+      }
+    });
+
+    try {
+      return await this.ready;
+    } catch (e) {
+      this.ready = null;
+      throw e;
+    }
+  }
+
+  async sendChat(params: { runId: string; session: ChatSessionIdentity; text: string }): Promise<void> {
+    const ws = await this.connect();
+    const frame: ChatWsClientFrame = {
+      type: "chat.send",
+      runId: params.runId,
+      session: params.session,
+      text: params.text,
+    };
+    ws.send(JSON.stringify(frame));
+  }
+
+  async sendChatByKey(params: { runId: string; sessionKey: string; text: string }): Promise<void> {
+    const ws = await this.connect();
+    const frame: ChatWsClientFrame = {
+      type: "chat.send",
+      runId: params.runId,
+      sessionKey: params.sessionKey,
+      text: params.text,
+    };
+    ws.send(JSON.stringify(frame));
+  }
+
+  abort(params: { runId?: string; session?: ChatSessionIdentity; sessionKey?: string }): void {
+    const ws = this.ws;
+    if (!ws || ws.readyState !== WebSocket.OPEN) {
+      return;
+    }
+    const frame: ChatWsClientFrame = {
+      type: "chat.abort",
+      ...(params.runId ? { runId: params.runId } : {}),
+      ...(params.session ? { session: params.session } : {}),
+      ...(params.sessionKey ? { sessionKey: params.sessionKey } : {}),
+    };
+    ws.send(JSON.stringify(frame));
+  }
+
+  close(): void {
+    if (this.reconnectTimer != null) {
+      window.clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = null;
+    }
+    this.manualClose = true;
+    try {
+      this.ws?.close();
+    } catch {
+      // ignore
+    }
+    this.ws = null;
+    this.ready = null;
+  }
+}

package/lib/__templates__/pi-agent/src/dashboard/web/src/styles.css

@@ -0,0 +1,203 @@
+@import "tailwindcss";
+@source "../../../../node_modules/streamdown/dist/*.js";
+@source "../../../../node_modules/@streamdown/code/dist/*.js";
+
+:root {
+  color-scheme: light;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --radius: 0.625rem;
+}
+
+.dark {
+  color-scheme: dark;
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+}
+
+@theme inline {
+  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --radius-sm: calc(var(--radius) - 6px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 8px);
+}
+
+@layer base {
+  * {
+    box-sizing: border-box;
+  }
+
+  body {
+    @apply bg-background font-sans text-foreground antialiased transition-colors;
+    height: 100vh;
+    overflow: hidden;
+  }
+
+  #root {
+    height: 100%;
+  }
+
+  a {
+    @apply text-inherit;
+  }
+
+  h1,
+  h2,
+  h3,
+  p {
+    @apply m-0;
+  }
+}
+
+@supports (height: 100dvh) {
+  @layer base {
+    body {
+      height: 100dvh;
+    }
+  }
+}
+
+.streamdown-content [data-streamdown] {
+  overflow-wrap: anywhere;
+}
+
+.streamdown-content [data-streamdown="code-block"] {
+  position: relative;
+  margin: 1rem 0;
+  gap: 0.5rem;
+  border: 1px solid color-mix(in oklab, var(--border) 100%, transparent);
+  border-radius: 0.875rem;
+  background: color-mix(in oklab, var(--muted) 65%, var(--background));
+  padding: 0.75rem;
+}
+
+.streamdown-content [data-streamdown="code-block-header"] {
+  display: flex;
+  min-height: 1.75rem;
+  align-items: center;
+  height: auto;
+  padding: 0 4.5rem 0 0.125rem;
+  color: var(--muted-foreground);
+  font-size: 0.75rem;
+}
+
+.streamdown-content [data-streamdown="code-block-header"] + div {
+  position: absolute;
+  top: 0.75rem;
+  right: 0.75rem;
+  left: auto;
+  z-index: 20;
+  margin: 0;
+  padding: 0;
+}
+
+.streamdown-content [data-streamdown="code-block-actions"] {
+  gap: 0.375rem;
+  border: 1px solid color-mix(in oklab, var(--border) 100%, transparent);
+  border-radius: 0.625rem;
+  background: color-mix(in oklab, var(--background) 88%, transparent);
+  padding: 0.25rem;
+  box-shadow: none;
+  backdrop-filter: none;
+}
+
+.streamdown-content [data-streamdown="code-block-actions"] button {
+  display: inline-flex;
+  height: 1.75rem;
+  width: 1.75rem;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: 0.5rem;
+  background: transparent;
+  color: var(--muted-foreground);
+  transition:
+    background-color 150ms ease,
+    color 150ms ease;
+}
+
+.streamdown-content [data-streamdown="code-block-actions"] button:hover {
+  background: color-mix(in oklab, var(--accent) 100%, transparent);
+  color: var(--foreground);
+}
+
+.streamdown-content [data-streamdown="code-block-actions"] button:focus-visible {
+  outline: 2px solid color-mix(in oklab, var(--ring) 65%, transparent);
+  outline-offset: 1px;
+}
+
+.streamdown-content [data-streamdown="code-block-body"] {
+  border: 1px solid color-mix(in oklab, var(--border) 100%, transparent);
+  border-radius: 0.75rem;
+  background: color-mix(in oklab, var(--background) 92%, var(--muted));
+  margin-top: 0.5rem;
+  padding: 0.875rem 1rem;
+}
+
+.streamdown-content [data-streamdown="code-block-body"] pre {
+  margin: 0;
+  background: transparent;
+}
+
+.streamdown-content pre {
+  overflow: auto;
+}
+
+.streamdown-content img {
+  max-width: 100%;
+  height: auto;
+}

package/lib/__templates__/pi-agent/src/dashboard/web/src/utils/index.ts

@@ -0,0 +1,11 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { cloneDeep } from "lodash-es";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function deepClone<T>(value: T): T {
+  return cloneDeep(value);
+}