feat(web-ai): add channel-aware assistant panel

apps/web/src/App.tsx

@@ -48,6 +48,8 @@ const SIDEBAR_ITEMS: SidebarItem[] = [
   { key: "settings", label: "系统设置", icon: Settings }
 ];
 
+const READY_SIDEBAR_KEYS = new Set(["todo", "ai"]);
+
 function toWebSession(payload: EmailLoginResult): WebSession {
   return {
     accessToken: payload.accessToken,
@@ -151,9 +153,11 @@ function App() {
                       <span className="text-sm whitespace-nowrap text-foreground">
                         {item.label}
                       </span>
-                      <span className="ml-auto whitespace-nowrap rounded-full border border-border bg-card px-2 py-0.5 text-[10px] text-muted-foreground">
+                      {READY_SIDEBAR_KEYS.has(item.key) ? null : (
-                        即将上线
+                        <span className="ml-auto whitespace-nowrap rounded-full border border-border bg-card px-2 py-0.5 text-[10px] text-muted-foreground">
-                      </span>
+                          即将上线
+                        </span>
+                      )}
                     </>
                   )}
                 </button>

apps/web/src/components/ai/ai-assistant-panel.tsx

@@ -0,0 +1,811 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  Bot,
+  CheckCircle2,
+  CircleAlert,
+  Globe2,
+  KeyRound,
+  LoaderCircle,
+  PlugZap,
+  RefreshCw,
+  SendHorizontal,
+  Settings2,
+  Sparkles
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import {
+  chatWithAi,
+  listAiBindings,
+  upsertAiBinding,
+  type UpsertWebAiBindingInput,
+  type WebAiBindingSummary,
+  type WebAiBindingsResponse,
+  type WebAiChannel,
+  WebAiApiError
+} from "@/services/ai-api";
+import type { WebSession } from "@/services/session-storage";
+
+type AiAssistantPanelProps = {
+  session: WebSession;
+};
+
+type AiBindingFormState = {
+  providerName: string;
+  model: string;
+  endpoint: string;
+  apiKey: string;
+  configId: string;
+  configName: string;
+  isEnabled: boolean;
+};
+
+type AiMessageRecord = {
+  id: string;
+  role: "user" | "assistant" | "system";
+  content: string;
+  meta?: string;
+};
+
+type PanelNotice = {
+  tone: "success" | "error";
+  message: string;
+};
+
+const CHANNEL_ORDER: WebAiChannel[] = ["USER_KEY", "ASTRBOT", "PUBLIC_POOL"];
+
+const CHANNEL_META: Record<
+  WebAiChannel,
+  {
+    title: string;
+    description: string;
+    icon: typeof KeyRound;
+    accentClassName: string;
+  }
+> = {
+  USER_KEY: {
+    title: "自备厂商",
+    description: "用户自己接入厂商接口",
+    icon: KeyRound,
+    accentClassName: "from-sky-500/15 via-transparent to-sky-500/5"
+  },
+  ASTRBOT: {
+    title: "AstrBot",
+    description: "复用 AstrBot 内已接入模型",
+    icon: PlugZap,
+    accentClassName: "from-amber-500/15 via-transparent to-amber-500/5"
+  },
+  PUBLIC_POOL: {
+    title: "公共 AI",
+    description: "使用站点管理员开放的公共通道",
+    icon: Globe2,
+    accentClassName: "from-emerald-500/15 via-transparent to-emerald-500/5"
+  }
+};
+
+function createFormState(binding?: WebAiBindingSummary | null): AiBindingFormState {
+  return {
+    providerName: binding?.providerName ?? "",
+    model: binding?.model ?? "",
+    endpoint: binding?.endpoint ?? "",
+    apiKey: "",
+    configId: binding?.configId ?? "",
+    configName: binding?.configName ?? "",
+    isEnabled: binding?.isEnabled ?? true
+  };
+}
+
+function createEmptyMessages(): Record<WebAiChannel, AiMessageRecord[]> {
+  return {
+    USER_KEY: [],
+    ASTRBOT: [],
+    PUBLIC_POOL: []
+  };
+}
+
+function createEmptySessionIds(): Partial<Record<WebAiChannel, string>> {
+  return {};
+}
+
+function formatTimeLabel(date = new Date()): string {
+  return date.toLocaleTimeString("zh-CN", {
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+}
+
+function trimOptionalValue(value: string): string | undefined {
+  const normalized = value.trim();
+  return normalized.length > 0 ? normalized : undefined;
+}
+
+function buildBindingPayload(
+  channel: Exclude<WebAiChannel, "PUBLIC_POOL">,
+  formState: AiBindingFormState,
+  currentBinding: WebAiBindingSummary | null
+): UpsertWebAiBindingInput {
+  return {
+    channel,
+    providerName: trimOptionalValue(formState.providerName),
+    model: trimOptionalValue(formState.model),
+    endpoint: trimOptionalValue(formState.endpoint),
+    configId: trimOptionalValue(formState.configId),
+    configName: trimOptionalValue(formState.configName),
+    apiKey: trimOptionalValue(formState.apiKey) ?? undefined,
+    isEnabled: formState.isEnabled ?? currentBinding?.isEnabled ?? true
+  };
+}
+
+function appendMessage(
+  records: Record<WebAiChannel, AiMessageRecord[]>,
+  channel: WebAiChannel,
+  message: AiMessageRecord
+): Record<WebAiChannel, AiMessageRecord[]> {
+  return {
+    ...records,
+    [channel]: [...records[channel], message]
+  };
+}
+
+export function AiAssistantPanel({ session }: AiAssistantPanelProps) {
+  const [bindingsResponse, setBindingsResponse] = useState<WebAiBindingsResponse | null>(null);
+  const [loadingBindings, setLoadingBindings] = useState(true);
+  const [refreshingBindings, setRefreshingBindings] = useState(false);
+  const [activeChannel, setActiveChannel] = useState<WebAiChannel>("USER_KEY");
+  const [settingsOpen, setSettingsOpen] = useState(true);
+  const [userKeyForm, setUserKeyForm] = useState<AiBindingFormState>(() => createFormState());
+  const [astrbotForm, setAstrbotForm] = useState<AiBindingFormState>(() => createFormState());
+  const [savingChannel, setSavingChannel] = useState<WebAiChannel | null>(null);
+  const [panelNotice, setPanelNotice] = useState<PanelNotice | null>(null);
+  const [messagesByChannel, setMessagesByChannel] = useState<
+    Record<WebAiChannel, AiMessageRecord[]>
+  >(() => createEmptyMessages());
+  const [sessionIds, setSessionIds] = useState<Partial<Record<WebAiChannel, string>>>(() =>
+    createEmptySessionIds()
+  );
+  const [draftMessage, setDraftMessage] = useState("");
+  const [sending, setSending] = useState(false);
+  const messagesEndRef = useRef<HTMLDivElement | null>(null);
+
+  const bindingMap = useMemo(() => {
+    const map = new Map<WebAiChannel, WebAiBindingSummary>();
+    for (const binding of bindingsResponse?.bindings ?? []) {
+      map.set(binding.channel, binding);
+    }
+    return map;
+  }, [bindingsResponse]);
+
+  const currentBinding =
+    activeChannel === "PUBLIC_POOL" ? null : (bindingMap.get(activeChannel) ?? null);
+  const currentMessages = messagesByChannel[activeChannel];
+  const publicPool = bindingsResponse?.publicPool ?? null;
+
+  const loadBindings = useCallback(
+    async (mode: "initial" | "refresh" = "refresh"): Promise<void> => {
+      if (mode === "initial") {
+        setLoadingBindings(true);
+      } else {
+        setRefreshingBindings(true);
+      }
+
+      try {
+        const response = await listAiBindings(session);
+        setBindingsResponse(response);
+        setUserKeyForm(
+          createFormState(response.bindings.find((item) => item.channel === "USER_KEY"))
+        );
+        setAstrbotForm(
+          createFormState(response.bindings.find((item) => item.channel === "ASTRBOT"))
+        );
+      } catch (error) {
+        setPanelNotice({
+          tone: "error",
+          message: error instanceof Error ? error.message : "AI ??????"
+        });
+      } finally {
+        setLoadingBindings(false);
+        setRefreshingBindings(false);
+      }
+    },
+    [session]
+  );
+
+  useEffect(() => {
+    void loadBindings("initial");
+  }, [loadBindings]);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({
+      block: "end",
+      behavior: "smooth"
+    });
+  }, [activeChannel, currentMessages.length]);
+
+  useEffect(() => {
+    if (!panelNotice) {
+      return;
+    }
+
+    const timer = window.setTimeout(() => {
+      setPanelNotice(null);
+    }, 2800);
+
+    return () => {
+      window.clearTimeout(timer);
+    };
+  }, [panelNotice]);
+
+  const sendBlockedReason = useMemo(() => {
+    if (activeChannel === "PUBLIC_POOL") {
+      if (!publicPool?.enabled) {
+        return "管理员尚未开放公共 AI。";
+      }
+
+      return null;
+    }
+
+    if (!currentBinding) {
+      return activeChannel === "USER_KEY" ? "请先保存自备厂商配置。" : "请先保存 AstrBot 配置。";
+    }
+
+    if (!currentBinding.isEnabled) {
+      return "当前渠道已关闭，请先启用后再发起对话。";
+    }
+
+    return null;
+  }, [activeChannel, currentBinding, publicPool]);
+
+  const channelStatusText = useMemo(() => {
+    if (activeChannel === "PUBLIC_POOL") {
+      return publicPool?.enabled ? "管理员已开放" : "当前不可用";
+    }
+
+    if (!currentBinding) {
+      return "尚未配置";
+    }
+
+    return currentBinding.isEnabled ? "已配置并启用" : "已配置但停用";
+  }, [activeChannel, currentBinding, publicPool]);
+
+  async function handleSaveChannel(channel: Exclude<WebAiChannel, "PUBLIC_POOL">): Promise<void> {
+    const formState = channel === "USER_KEY" ? userKeyForm : astrbotForm;
+    const binding = bindingMap.get(channel) ?? null;
+
+    try {
+      setSavingChannel(channel);
+      await upsertAiBinding(session, buildBindingPayload(channel, formState, binding));
+      setPanelNotice({
+        tone: "success",
+        message: channel === "USER_KEY" ? "自备厂商配置已保存。" : "AstrBot 配置已保存。"
+      });
+      if (channel === "USER_KEY") {
+        setUserKeyForm((current) => ({
+          ...current,
+          apiKey: ""
+        }));
+      } else {
+        setAstrbotForm((current) => ({
+          ...current,
+          apiKey: ""
+        }));
+      }
+      await loadBindings("refresh");
+    } catch (error) {
+      setPanelNotice({
+        tone: "error",
+        message: error instanceof Error ? error.message : "AI 配置保存失败"
+      });
+    } finally {
+      setSavingChannel(null);
+    }
+  }
+
+  async function handleSendMessage(): Promise<void> {
+    const message = draftMessage.trim();
+    if (!message || sendBlockedReason || sending) {
+      return;
+    }
+
+    const channel = activeChannel;
+    setSending(true);
+    setDraftMessage("");
+    setMessagesByChannel((current) =>
+      appendMessage(current, channel, {
+        id: crypto.randomUUID(),
+        role: "user",
+        content: message,
+        meta: formatTimeLabel()
+      })
+    );
+
+    try {
+      const response = await chatWithAi(session, {
+        channel,
+        message,
+        sessionId: sessionIds[channel]
+      });
+
+      setSessionIds((current) => ({
+        ...current,
+        [channel]: response.sessionId ?? current[channel]
+      }));
+      setMessagesByChannel((current) =>
+        appendMessage(current, channel, {
+          id: crypto.randomUUID(),
+          role: "assistant",
+          content: response.content,
+          meta: `${CHANNEL_META[response.channel].title} · ${response.providerName}${response.model ? ` · ${response.model}` : ""}`
+        })
+      );
+    } catch (error) {
+      const apiError =
+        error instanceof WebAiApiError
+          ? error
+          : new WebAiApiError(error instanceof Error ? error.message : "AI 请求失败");
+      const firstFailedAttempt = apiError.attempts?.find((item) => item.reasonMessage);
+      const content =
+        firstFailedAttempt?.reasonMessage && firstFailedAttempt.reasonMessage !== apiError.message
+          ? `${apiError.message}\n${firstFailedAttempt.reasonMessage}`
+          : apiError.message;
+
+      setMessagesByChannel((current) =>
+        appendMessage(current, channel, {
+          id: crypto.randomUUID(),
+          role: "system",
+          content,
+          meta: "调用失败"
+        })
+      );
+    } finally {
+      setSending(false);
+    }
+  }
+
+  function renderChannelButton(channel: WebAiChannel) {
+    const channelMeta = CHANNEL_META[channel];
+    const ChannelIcon = channelMeta.icon;
+    const selected = activeChannel === channel;
+    const binding = channel === "PUBLIC_POOL" ? null : (bindingMap.get(channel) ?? null);
+    const enabled =
+      channel === "PUBLIC_POOL" ? Boolean(publicPool?.enabled) : Boolean(binding?.isEnabled);
+    const statusLabel =
+      channel === "PUBLIC_POOL"
+        ? publicPool?.enabled
+          ? "可使用"
+          : "未开放"
+        : binding
+          ? enabled
+            ? "已启用"
+            : "已停用"
+          : "未配置";
+
+    return (
+      <button
+        key={channel}
+        type="button"
+        className={cn(
+          "rounded-2xl border px-3 py-3 text-left transition-all",
+          "bg-gradient-to-br shadow-sm",
+          channelMeta.accentClassName,
+          selected
+            ? "border-primary/50 bg-primary/8 ring-2 ring-primary/20"
+            : "border-border/70 hover:border-primary/25 hover:bg-muted/40"
+        )}
+        onClick={() => setActiveChannel(channel)}
+      >
+        <div className="flex items-start justify-between gap-3">
+          <div className="flex items-center gap-2">
+            <span className="rounded-xl bg-background/85 p-2 text-primary shadow-sm">
+              <ChannelIcon className="size-4" />
+            </span>
+            <div>
+              <div className="text-sm font-semibold text-foreground">{channelMeta.title}</div>
+              <div className="mt-0.5 text-xs text-muted-foreground">{channelMeta.description}</div>
+            </div>
+          </div>
+          <span
+            className={cn(
+              "rounded-full border px-2 py-0.5 text-[11px] font-medium",
+              enabled
+                ? "border-emerald-500/25 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300"
+                : "border-border bg-background/70 text-muted-foreground"
+            )}
+          >
+            {statusLabel}
+          </span>
+        </div>
+      </button>
+    );
+  }
+
+  function renderNotice() {
+    if (!panelNotice) {
+      return null;
+    }
+
+    return (
+      <div
+        className={cn(
+          "flex items-start gap-2 rounded-2xl border px-3 py-2 text-sm",
+          panelNotice.tone === "success"
+            ? "border-emerald-500/20 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300"
+            : "border-destructive/20 bg-destructive/10 text-destructive"
+        )}
+      >
+        {panelNotice.tone === "success" ? (
+          <CheckCircle2 className="mt-0.5 size-4 shrink-0" />
+        ) : (
+          <CircleAlert className="mt-0.5 size-4 shrink-0" />
+        )}
+        <span>{panelNotice.message}</span>
+      </div>
+    );
+  }
+
+  function renderPrivateConfigForm(channel: Exclude<WebAiChannel, "PUBLIC_POOL">) {
+    const formState = channel === "USER_KEY" ? userKeyForm : astrbotForm;
+    const setFormState = channel === "USER_KEY" ? setUserKeyForm : setAstrbotForm;
+    const binding = bindingMap.get(channel) ?? null;
+
+    return (
+      <div className="space-y-3">
+        <div className="grid gap-3 sm:grid-cols-2">
+          <label className="space-y-1.5">
+            <span className="text-xs font-medium text-muted-foreground">服务商标识</span>
+            <input
+              className="h-10 w-full rounded-xl border border-border bg-background px-3 text-sm outline-none transition-colors focus:border-primary/40"
+              value={formState.providerName}
+              onChange={(event) =>
+                setFormState((current) => ({
+                  ...current,
+                  providerName: event.target.value
+                }))
+              }
+              placeholder={channel === "USER_KEY" ? "如 openai / dashscope / deepseek" : "可选"}
+            />
+          </label>
+
+          <label className="space-y-1.5">
+            <span className="text-xs font-medium text-muted-foreground">模型</span>
+            <input
+              className="h-10 w-full rounded-xl border border-border bg-background px-3 text-sm outline-none transition-colors focus:border-primary/40"
+              value={formState.model}
+              onChange={(event) =>
+                setFormState((current) => ({
+                  ...current,
+                  model: event.target.value
+                }))
+              }
+              placeholder={channel === "USER_KEY" ? "如 gpt-4o-mini" : "可选"}
+            />
+          </label>
+        </div>
+
+        <label className="space-y-1.5">
+          <span className="text-xs font-medium text-muted-foreground">
+            {channel === "USER_KEY" ? "接口地址" : "AstrBot 地址"}
+          </span>
+          <input
+            className="h-10 w-full rounded-xl border border-border bg-background px-3 text-sm outline-none transition-colors focus:border-primary/40"
+            value={formState.endpoint}
+            onChange={(event) =>
+              setFormState((current) => ({
+                ...current,
+                endpoint: event.target.value
+              }))
+            }
+            placeholder={
+              channel === "USER_KEY" ? "如 https://api.openai.com/v1" : "如 http://100.64.0.21:6185"
+            }
+          />
+        </label>
+
+        {channel === "ASTRBOT" ? (
+          <div className="grid gap-3 sm:grid-cols-2">
+            <label className="space-y-1.5">
+              <span className="text-xs font-medium text-muted-foreground">configId</span>
+              <input
+                className="h-10 w-full rounded-xl border border-border bg-background px-3 text-sm outline-none transition-colors focus:border-primary/40"
+                value={formState.configId}
+                onChange={(event) =>
+                  setFormState((current) => ({
+                    ...current,
+                    configId: event.target.value
+                  }))
+                }
+                placeholder="如 default"
+              />
+            </label>
+
+            <label className="space-y-1.5">
+              <span className="text-xs font-medium text-muted-foreground">configName</span>
+              <input
+                className="h-10 w-full rounded-xl border border-border bg-background px-3 text-sm outline-none transition-colors focus:border-primary/40"
+                value={formState.configName}
+                onChange={(event) =>
+                  setFormState((current) => ({
+                    ...current,
+                    configName: event.target.value
+                  }))
+                }
+                placeholder="可选"
+              />
+            </label>
+          </div>
+        ) : null}
+
+        <label className="space-y-1.5">
+          <span className="text-xs font-medium text-muted-foreground">
+            {channel === "USER_KEY" ? "API Key" : "AstrBot API Key"}
+          </span>
+          <input
+            className="h-10 w-full rounded-xl border border-border bg-background px-3 text-sm outline-none transition-colors focus:border-primary/40"
+            value={formState.apiKey}
+            onChange={(event) =>
+              setFormState((current) => ({
+                ...current,
+                apiKey: event.target.value
+              }))
+            }
+            placeholder={binding?.hasApiKey ? "留空则保持当前密钥不变" : "请输入密钥"}
+          />
+          {binding?.maskedApiKey ? (
+            <div className="text-xs text-muted-foreground">
+              当前已保存密钥：{binding.maskedApiKey}
+            </div>
+          ) : null}
+        </label>
+
+        <label className="flex items-center gap-2 rounded-2xl border border-border/70 bg-background/70 px-3 py-2 text-sm text-foreground">
+          <input
+            type="checkbox"
+            checked={formState.isEnabled}
+            onChange={(event) =>
+              setFormState((current) => ({
+                ...current,
+                isEnabled: event.target.checked
+              }))
+            }
+          />
+          <span>保存后立即启用该渠道</span>
+        </label>
+
+        <div className="flex items-center justify-between gap-3">
+          <p className="text-xs leading-5 text-muted-foreground">
+            {channel === "USER_KEY"
+              ? "当前自备厂商通道按用户单独保存，适合个人独享密钥。"
+              : "AstrBot 通道按用户单独保存，可直接复用你在 AstrBot 中维护的模型配置。"}
+          </p>
+          <Button
+            type="button"
+            className="shrink-0"
+            onClick={() => void handleSaveChannel(channel)}
+            disabled={savingChannel === channel}
+          >
+            {savingChannel === channel ? (
+              <>
+                <LoaderCircle className="size-4 animate-spin" />
+                保存中
+              </>
+            ) : (
+              "保存配置"
+            )}
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  function renderPublicPoolCard() {
+    return (
+      <div className="space-y-3">
+        <div className="rounded-2xl border border-border/70 bg-background/70 p-3">
+          <div className="flex items-center justify-between gap-3">
+            <div>
+              <div className="text-sm font-semibold text-foreground">
+                {publicPool?.providerName || "公共 AI"}
+              </div>
+              <div className="mt-1 text-xs text-muted-foreground">
+                {publicPool?.model ? `默认模型：${publicPool.model}` : "管理员尚未设置默认模型"}
+              </div>
+            </div>
+            <span
+              className={cn(
+                "rounded-full border px-2 py-0.5 text-[11px] font-medium",
+                publicPool?.enabled
+                  ? "border-emerald-500/25 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300"
+                  : "border-border bg-background text-muted-foreground"
+              )}
+            >
+              {publicPool?.enabled ? "可用" : "不可用"}
+            </span>
+          </div>
+          <div className="mt-3 text-xs leading-5 text-muted-foreground">
+            公共 AI 由管理后台统一维护，普通用户仅可选择使用，不可查看或修改密钥。
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <section className="flex min-h-[720px] flex-col overflow-hidden rounded-[2rem] border border-border/70 bg-card/92 shadow-[0_24px_80px_-48px_rgba(15,23,42,0.55)] xl:sticky xl:top-0 xl:max-h-[calc(100vh-7rem)] xl:min-h-0">
+      <div className="border-b border-border/70 bg-gradient-to-br from-primary/12 via-background to-background px-5 py-4">
+        <div className="flex items-start justify-between gap-3">
+          <div>
+            <div className="flex items-center gap-2 text-sm font-medium text-primary">
+              <Sparkles className="size-4" />
+              AI 助手
+            </div>
+            <h2 className="mt-1 text-xl font-semibold tracking-tight text-foreground">
+              三路通道，按用户独立配置
+            </h2>
+            <p className="mt-1 text-sm text-muted-foreground">
+              你可以随时切换 AstrBot、自备厂商与公共 AI 进行问答和任务统筹。
+            </p>
+          </div>
+          <Button
+            type="button"
+            size="icon-sm"
+            variant="outline"
+            className="shrink-0"
+            onClick={() => void loadBindings("refresh")}
+            disabled={refreshingBindings}
+            aria-label="刷新 AI 配置"
+          >
+            {refreshingBindings ? (
+              <LoaderCircle className="size-4 animate-spin" />
+            ) : (
+              <RefreshCw className="size-4" />
+            )}
+          </Button>
+        </div>
+      </div>
+
+      <div className="flex min-h-0 flex-1 flex-col gap-4 overflow-hidden p-4">
+        {renderNotice()}
+
+        <div className="grid gap-2 sm:grid-cols-3 xl:grid-cols-1">
+          {CHANNEL_ORDER.map((channel) => renderChannelButton(channel))}
+        </div>
+
+        <div className="rounded-2xl border border-border/70 bg-background/80 p-3">
+          <div className="flex items-center justify-between gap-3">
+            <div className="flex items-center gap-2">
+              <span className="rounded-xl bg-primary/10 p-2 text-primary">
+                <Bot className="size-4" />
+              </span>
+              <div>
+                <div className="text-sm font-semibold text-foreground">
+                  {CHANNEL_META[activeChannel].title}
+                </div>
+                <div className="text-xs text-muted-foreground">{channelStatusText}</div>
+              </div>
+            </div>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              className="shrink-0"
+              onClick={() => setSettingsOpen((current) => !current)}
+            >
+              <Settings2 className="size-4" />
+              {settingsOpen ? "收起配置" : "配置渠道"}
+            </Button>
+          </div>
+        </div>
+
+        {settingsOpen ? (
+          <div className="rounded-2xl border border-border/70 bg-card/75 p-4">
+            {loadingBindings ? (
+              <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                <LoaderCircle className="size-4 animate-spin" />
+                正在加载 AI 配置...
+              </div>
+            ) : activeChannel === "PUBLIC_POOL" ? (
+              renderPublicPoolCard()
+            ) : (
+              renderPrivateConfigForm(activeChannel)
+            )}
+          </div>
+        ) : null}
+
+        <div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-2xl border border-border/70 bg-background/90">
+          <div className="border-b border-border/70 px-4 py-3">
+            <div className="text-sm font-semibold text-foreground">对话记录</div>
+            <div className="mt-1 text-xs text-muted-foreground">
+              当前渠道：{CHANNEL_META[activeChannel].title}
+            </div>
+          </div>
+
+          <div className="min-h-0 flex-1 space-y-3 overflow-y-auto px-4 py-4">
+            {currentMessages.length === 0 ? (
+              <div className="rounded-2xl border border-dashed border-border bg-muted/35 p-4 text-sm leading-6 text-muted-foreground">
+                <div className="font-medium text-foreground">还没有对话记录。</div>
+                <div className="mt-1">
+                  发送一句话试试看，例如“帮我根据当前未完成任务安排今天下午的执行顺序”。
+                </div>
+              </div>
+            ) : (
+              currentMessages.map((message) => (
+                <div
+                  key={message.id}
+                  className={cn(
+                    "max-w-[92%] rounded-2xl px-4 py-3 text-sm leading-6 shadow-sm",
+                    message.role === "user"
+                      ? "ml-auto bg-primary text-primary-foreground"
+                      : message.role === "assistant"
+                        ? "border border-border/70 bg-card text-foreground"
+                        : "border border-destructive/15 bg-destructive/8 text-foreground"
+                  )}
+                >
+                  <div className="whitespace-pre-wrap break-words">{message.content}</div>
+                  {message.meta ? (
+                    <div
+                      className={cn(
+                        "mt-2 text-[11px]",
+                        message.role === "user"
+                          ? "text-primary-foreground/80"
+                          : "text-muted-foreground"
+                      )}
+                    >
+                      {message.meta}
+                    </div>
+                  ) : null}
+                </div>
+              ))
+            )}
+            <div ref={messagesEndRef} />
+          </div>
+
+          <div className="border-t border-border/70 p-4">
+            {sendBlockedReason ? (
+              <div className="mb-3 rounded-2xl border border-amber-500/15 bg-amber-500/10 px-3 py-2 text-xs leading-5 text-amber-700 dark:text-amber-300">
+                {sendBlockedReason}
+              </div>
+            ) : null}
+
+            <textarea
+              value={draftMessage}
+              onChange={(event) => setDraftMessage(event.target.value)}
+              placeholder="输入你的问题，例如：结合我当前待办，帮我排一下今天的优先级。"
+              className="min-h-[120px] w-full rounded-2xl border border-border bg-background px-4 py-3 text-sm leading-6 outline-none transition-colors placeholder:text-muted-foreground focus:border-primary/40"
+            />
+
+            <div className="mt-3 flex items-center justify-between gap-3">
+              <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                {activeChannel === "PUBLIC_POOL" ? (
+                  <Globe2 className="size-4" />
+                ) : activeChannel === "ASTRBOT" ? (
+                  <PlugZap className="size-4" />
+                ) : (
+                  <KeyRound className="size-4" />
+                )}
+                <span>发送时将自动附带当前未完成任务摘要。</span>
+              </div>
+
+              <Button
+                type="button"
+                className="shrink-0"
+                onClick={() => void handleSendMessage()}
+                disabled={sending || draftMessage.trim().length === 0 || sendBlockedReason !== null}
+              >
+                {sending ? (
+                  <>
+                    <LoaderCircle className="size-4 animate-spin" />
+                    发送中
+                  </>
+                ) : (
+                  <>
+                    <SendHorizontal className="size-4" />
+                    发送
+                  </>
+                )}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

apps/web/src/pages/todo-shell-page.tsx

@@ -9,6 +9,7 @@ import {
   ServerCrash
 } from "lucide-react";
 import { useSyncEngine, type SyncEngineStatus } from "@/hooks/use-sync-engine";
+import { AiAssistantPanel } from "@/components/ai/ai-assistant-panel";
 import { TaskRichEditor } from "@/components/task-rich-editor";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
@@ -920,7 +921,7 @@ export function TodoShellPage({ session }: TodoShellPageProps) {
       <div className="space-y-4">
         <SyncStatusCard syncStatus={syncStatus} onTriggerSync={triggerSync} />
 
-        <div className="grid gap-4 lg:grid-cols-[320px_minmax(0,1fr)]">
+        <div className="grid gap-4 xl:grid-cols-[320px_minmax(0,1fr)_360px]">
           <TaskListPanel
             tasks={taskList}
             selectedTaskId={selectedTaskId}
@@ -946,6 +947,8 @@ export function TodoShellPage({ session }: TodoShellPageProps) {
             onDdlChange={handleDdlChange}
             onEditorChange={handleEditorChange}
           />
+
+          <AiAssistantPanel session={session} />
         </div>
       </div>
     </>

apps/web/src/services/ai-api.ts

@@ -0,0 +1,155 @@
+import type { WebSession } from "@/services/session-storage";
+
+export type WebAiChannel = "USER_KEY" | "ASTRBOT" | "PUBLIC_POOL";
+
+export type WebAiRouteAttempt = {
+  channel: WebAiChannel;
+  providerName: string | null;
+  model: string | null;
+  status: "skipped" | "failed" | "success";
+  reasonCode: string | null;
+  reasonMessage: string | null;
+};
+
+export type WebAiBindingSummary = {
+  id: string;
+  channel: WebAiChannel;
+  providerName: string;
+  model: string | null;
+  configId: string | null;
+  configName: string | null;
+  endpoint: string | null;
+  isEnabled: boolean;
+  hasApiKey: boolean;
+  maskedApiKey: string | null;
+  updatedAt: string;
+};
+
+export type WebAiBindingsResponse = {
+  routeOrder: WebAiChannel[];
+  bindings: WebAiBindingSummary[];
+  publicPool: {
+    enabled: boolean;
+    providerName: string | null;
+    model: string | null;
+    endpoint: string | null;
+    hasApiKey: boolean;
+  } | null;
+};
+
+export type UpsertWebAiBindingInput = {
+  channel: Exclude<WebAiChannel, "PUBLIC_POOL">;
+  providerName?: string;
+  model?: string;
+  configId?: string;
+  configName?: string;
+  endpoint?: string;
+  apiKey?: string;
+  isEnabled?: boolean;
+};
+
+export type WebAiChatResponse = {
+  channel: WebAiChannel;
+  providerName: string;
+  model: string | null;
+  content: string;
+  sessionId: string | null;
+  attempts: WebAiRouteAttempt[];
+};
+
+export class WebAiApiError extends Error {
+  attempts: WebAiRouteAttempt[] | null;
+
+  constructor(message: string, attempts?: WebAiRouteAttempt[] | null) {
+    super(message);
+    this.name = "WebAiApiError";
+    this.attempts = attempts ?? null;
+  }
+}
+
+const DEFAULT_API_BASE_URL = "http://localhost:3000";
+
+function resolveApiBaseUrl(): string {
+  const envBaseUrl = import.meta.env.VITE_API_BASE_URL as string | undefined;
+  if (!envBaseUrl) {
+    return DEFAULT_API_BASE_URL;
+  }
+
+  return envBaseUrl.replace(/\/+$/, "");
+}
+
+function createHeaders(session: WebSession): HeadersInit {
+  return {
+    "Content-Type": "application/json",
+    Authorization: `Bearer ${session.accessToken}`,
+    "x-user-id": session.user.id
+  };
+}
+
+async function createApiError(response: Response): Promise<WebAiApiError> {
+  try {
+    const body = (await response.json()) as {
+      message?: string | string[];
+      attempts?: WebAiRouteAttempt[];
+    };
+    const message = Array.isArray(body.message)
+      ? body.message.join("，")
+      : typeof body.message === "string" && body.message.trim().length > 0
+        ? body.message
+        : `请求失败（${response.status}）`;
+    return new WebAiApiError(message, body.attempts ?? null);
+  } catch {
+    return new WebAiApiError(`请求失败（${response.status}）`);
+  }
+}
+
+export async function listAiBindings(session: WebSession): Promise<WebAiBindingsResponse> {
+  const response = await fetch(`${resolveApiBaseUrl()}/ai/bindings`, {
+    method: "GET",
+    headers: createHeaders(session)
+  });
+
+  if (!response.ok) {
+    throw await createApiError(response);
+  }
+
+  return (await response.json()) as WebAiBindingsResponse;
+}
+
+export async function upsertAiBinding(
+  session: WebSession,
+  payload: UpsertWebAiBindingInput
+): Promise<WebAiBindingSummary> {
+  const response = await fetch(`${resolveApiBaseUrl()}/ai/bindings`, {
+    method: "POST",
+    headers: createHeaders(session),
+    body: JSON.stringify(payload)
+  });
+
+  if (!response.ok) {
+    throw await createApiError(response);
+  }
+
+  return (await response.json()) as WebAiBindingSummary;
+}
+
+export async function chatWithAi(
+  session: WebSession,
+  payload: {
+    channel: WebAiChannel;
+    message: string;
+    sessionId?: string;
+  }
+): Promise<WebAiChatResponse> {
+  const response = await fetch(`${resolveApiBaseUrl()}/ai/chat`, {
+    method: "POST",
+    headers: createHeaders(session),
+    body: JSON.stringify(payload)
+  });
+
+  if (!response.ok) {
+    throw await createApiError(response);
+  }
+
+  return (await response.json()) as WebAiChatResponse;
+}