feat(web): 用户侧体验补齐——思维链/工具卡数据源 + 图片附件 + 语音上行 + home/vision/voice 真表现

- 打通 thinking/tool_call 运行时数据源：openai 发 thinking_*(reasoning_content)/tool_call_* (delta.tool_calls 累积重新组装 Args 非 JSON 串)；anthropic_stream 发 thinking_*(content_block thinking start/delta/stop)。ws_bridge 已映射 thinking.*/tool_call.*，前端渲染活。 - 前端消息模型 + 附件：ChatMessage 加 image?；ChatInput 加附件按钮(file→base64)、预览/移除、 image-aware onSend(text,image)；VisionMessageBody 升级图像卡+识别 chip；VoiceMessageBody 升级通话控制卡(live2D预留/波形/静音/挂断)；HomeMessageBody 读真实 deviceUpdates(去掉 sampleDevices 猜)。 - 激活 voice_input：ChatShell onVoice 不再 no-op → sendUp voice_input + 切 voice mode。 - addTool 改按工具名 upsert(修复 tool_call.start/end 重复卡)；ws_mode_switch 应用 agent 驱动 mode；addUserMessage/beginAssistant 带 image/mode；chatStream/useChat.send 带 image。 - 新增 image/phone 图标。已知限制(标注)：图片仅前端收集(后端 chatRequest 无 image 字段未接真推理)；流式工具卡无真实工具名(StreamEvent 只带 ID，回退 tool_<id前缀>)；mode 由 agent 驱动但后端未逐消息下发 mode (mode_switch 回显+默认当前 mode 兜底)；voice 为 UI+voice_input 上行(真实通话后置)。 go build/vet/test + 前端 tsc 绿。
2026-09-06 17:43:03 +08:00
1 parent b0bd93b15c
commit 2248ddce15
@@ -3,7 +3,7 @@ import { Button } from "./primitives";
 import { Icon } from "./Icon";

 export interface ChatInputProps {
-  onSend: (text: string) => void;
+  onSend: (text: string, image?: string) => void;
  sending: boolean;
  onVoice: () => void;
  placeholder?: string;
@@ -16,7 +16,9 @@ export function ChatInput({
  placeholder = "给昔涟发消息…",
 }: ChatInputProps): React.ReactNode {
  const [value, setValue] = useState("");
+  const [pendingImage, setPendingImage] = useState<string | undefined>(undefined);
  const taRef = useRef<HTMLTextAreaElement>(null);
+  const fileRef = useRef<HTMLInputElement>(null);

  // auto-grow the textarea up to a max height
  useEffect(() => {
@@ -26,45 +28,92 @@ export function ChatInput({
    el.style.height = Math.min(el.scrollHeight, 140) + "px";
  }, [value]);

+  const onPickFile = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const f = e.target.files?.[0];
+    if (!f) return;
+    const reader = new FileReader();
+    reader.onload = () => {
+      if (typeof reader.result === "string") setPendingImage(reader.result);
+    };
+    reader.readAsDataURL(f);
+    e.target.value = "";
+  };
+
+  const canSend = value.trim().length > 0 || Boolean(pendingImage);
+
  const submit = () => {
-    const t = value.trim();
-    if (!t || sending) return;
-    onSend(t);
+    if (sending || !canSend) return;
+    onSend(value.trim(), pendingImage);
    setValue("");
+    setPendingImage(undefined);
  };

  return (
    <div className="glass sticky bottom-0 border-t border-[var(--mu-glass-border)] p-3 md:p-4">
-      <div className="mx-auto flex max-w-2xl items-end gap-2 rounded-[var(--mu-radius-lg)] bg-[var(--mu-surface-2)] p-2 shadow-[var(--mu-shadow-1)]">
-        <textarea
-          ref={taRef}
-          value={value}
-          onChange={(e) => setValue(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === "Enter" && !e.shiftKey) {
-              e.preventDefault();
-              submit();
-            }
-          }}
-          rows={1}
-          placeholder={placeholder}
-          className="max-h-[140px] flex-1 resize-none bg-transparent px-2 py-2 text-sm text-[var(--mu-text-hi)] outline-none placeholder:text-[var(--mu-text-lo)]"
-        />
-        <button
-          onClick={onVoice}
-          aria-label="语音"
-          className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-[var(--mu-radius)] bg-[var(--mu-surface-4)] text-base transition-all duration-200 ease-[var(--mu-spring)] hover:bg-[var(--mu-surface-5)] active:scale-95"
-        >
-          <Icon name="mic" size={18} />
-        </button>
-        <Button
-          variant="primary"
-          onClick={submit}
-          disabled={sending || value.trim().length === 0}
-          className="shrink-0"
-        >
-          {sending ? "发送中…" : "发送"}
-        </Button>
+      <div className="mx-auto flex max-w-2xl flex-col gap-2">
+        {pendingImage ? (
+          <div className="relative inline-flex w-fit overflow-hidden rounded-[var(--mu-radius)] border border-[var(--mu-glass-border)]">
+            <img
+              src={pendingImage}
+              alt="待发送图片"
+              className="h-20 w-20 object-cover"
+            />
+            <button
+              onClick={() => setPendingImage(undefined)}
+              aria-label="移除图片"
+              className="absolute right-1 top-1 inline-flex h-5 w-5 items-center justify-center rounded-full bg-[var(--mu-surface-4)]/90 text-[var(--mu-text-hi)] transition-transform duration-200 hover:scale-110"
+            >
+              <Icon name="close" size={12} />
+            </button>
+          </div>
+        ) : null}
+        <div className="flex items-end gap-2 rounded-[var(--mu-radius-lg)] bg-[var(--mu-surface-2)] p-2 shadow-[var(--mu-shadow-1)]">
+          <input
+            ref={fileRef}
+            type="file"
+            accept="image/*"
+            className="hidden"
+            onChange={onPickFile}
+          />
+          <button
+            onClick={() => fileRef.current?.click()}
+            aria-label="发送图片"
+            title="发送图片"
+            className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-[var(--mu-radius)] bg-[var(--mu-surface-4)] text-base transition-all duration-200 ease-[var(--mu-spring)] hover:bg-[var(--mu-surface-5)] active:scale-95"
+          >
+            <Icon name="image" size={18} />
+          </button>
+          <textarea
+            ref={taRef}
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && !e.shiftKey) {
+                e.preventDefault();
+                submit();
+              }
+            }}
+            rows={1}
+            placeholder={placeholder}
+            className="max-h-[140px] flex-1 resize-none bg-transparent px-2 py-2 text-sm text-[var(--mu-text-hi)] outline-none placeholder:text-[var(--mu-text-lo)]"
+          />
+          <button
+            onClick={onVoice}
+            aria-label="语音"
+            title="发起语音通话"
+            className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-[var(--mu-radius)] bg-[var(--mu-surface-4)] text-base transition-all duration-200 ease-[var(--mu-spring)] hover:bg-[var(--mu-surface-5)] active:scale-95"
+          >
+            <Icon name="mic" size={18} />
+          </button>
+          <Button
+            variant="primary"
+            onClick={submit}
+            disabled={sending || !canSend}
+            className="shrink-0"
+          >
+            {sending ? "发送中…" : "发送"}
+          </Button>
+        </div>
      </div>
    </div>
  );
@@ -44,7 +44,9 @@ export type IconName =
  | "vision"         // 👁 vision (visibility_rounded)
  | "home"           // 🏠 home (home_rounded)
  | "arrow"          // → direction (arrow_forward_rounded)
-  | "terminal"       // 🖥 code (terminal_rounded);
+  | "terminal"       // 🖥 code (terminal_rounded)
+  | "image"          // 🖼 attachment/vision (image_rounded)
+  | "phone"          // 📞 voice call / hang up (call_rounded);

 const ICON_PATHS: Record<IconName, string> = {
  chart:
@@ -119,6 +121,10 @@ const ICON_PATHS: Record<IconName, string> = {
    "M5 11h10.2l-3.6-3.6L13 6l6 6-6 6-1.4-1.4 3.6-3.6H5v-2Z",
  terminal:
    "M4 3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H4Zm2.5 4 3 3.5-3 3.5L4.6 12l2.4-2.5-1-1 1-1.5Zm5.5 7h5v1.5h-5V14Z",
+  image:
+    "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2ZM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5Z",
+  phone:
+    "M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1l-2.3 2.2Z",
 };

 export interface IconProps {
@@ -87,14 +87,23 @@ export function MessageBubble({ message }: { message: ChatMessage }): React.Reac
 /** User-side bubble. The outer accent pill is shared; the inner content may be
 *  mode-shaped (e.g. code request renders in a mono pre). */
 function UserBubble({ message, mode }: { message: ChatMessage; mode: Mode }): React.ReactNode {
+  const body: React.ReactNode =
+    mode === "code" ? (
+      <pre className="whitespace-pre-wrap font-mono text-xs leading-relaxed">{message.content}</pre>
+    ) : message.content ? (
+      <span className="whitespace-pre-wrap">{message.content}</span>
+    ) : null;
  return (
    <div className="mu-rise-in flex justify-end">
      <div className="max-w-[80%] rounded-[var(--mu-radius-lg)] bg-[var(--mu-accent)] px-4 py-2.5 text-sm text-white shadow-[var(--mu-shadow-1)]">
-        {mode === "code" ? (
-          <pre className="whitespace-pre-wrap font-mono text-xs leading-relaxed">{message.content}</pre>
-        ) : (
-          <span className="whitespace-pre-wrap">{message.content}</span>
-        )}
+        {message.image ? (
+          <img
+            src={message.image}
+            alt="附件"
+            className="mb-1.5 block max-h-56 rounded-[var(--mu-radius-sm)] object-cover"
+          />
+        ) : null}
+        {body}
      </div>
    </div>
  );
@@ -1,7 +1,9 @@
+import { useEffect, useState } from "react";
 import type { ReactNode } from "react";
 import type { ChatMessage, Mode } from "../../lib/types";
 import { Tag } from "../primitives";
 import { Icon } from "../Icon";
+import { useAppStore } from "../../store/useAppStore";

 /**
 * Mode-specific assistant message bodies (design/07 §2). The shared outer
@@ -58,9 +60,11 @@ export function DocsMessageBody({ message }: { message: ChatMessage }): ReactNod
  );
 }

-/** home — device card line (icons + state chips). */
+/** home — device card line. Real device states come from the WS device_update
+ *  stream (store.deviceUpdates) rather than guessing names from the reply text. */
 export function HomeMessageBody({ message }: { message: ChatMessage }): ReactNode {
-  const devices = sampleDevices(message.content);
+  const deviceUpdates = useAppStore((s) => s.deviceUpdates);
+  const devices = deviceUpdates.slice(0, 8);
  return (
    <div className="space-y-2">
      {message.content ? (
@@ -68,8 +72,8 @@ export function HomeMessageBody({ message }: { message: ChatMessage }): ReactNod
      ) : null}
      {devices.length > 0 ? (
        <div className="flex flex-wrap gap-2 pt-1">
-          {devices.map((d) => (
-            <Tag key={d} tone="accent">
+          {devices.map((d, i) => (
+            <Tag key={i} tone="accent">
              <span className="inline-flex items-center gap-1">
                <Icon name="device" size={12} />
                {d}
@@ -102,27 +106,105 @@ export function WorkMessageBody({ message }: { message: ChatMessage }): ReactNod
  );
 }

-/** vision — image analysis summary card. */
+/** vision — image card (upload/preview) + recognition label. When the message
+ *  carries an `image` it is shown as a preview; the reply text renders as the
+ *  recognition summary alongside a 「识别」 chip. Falls back to a plain text
+ *  card when no image is attached (legacy persisted messages), so the render is
+ *  always safe. */
 export function VisionMessageBody({ message }: { message: ChatMessage }): ReactNode {
-  return shell(message.content ? (
-    <div className="space-y-1.5">
-      <div className="flex items-center gap-2 text-xs text-[var(--mu-text-lo)]">
-        <Icon name="vision" size={14} />
-        视觉分析
+  const hasImage = Boolean(message.image);
+  if (!message.content && !message.streaming && !hasImage) return null;
+  return (
+    <div className="overflow-hidden rounded-[var(--mu-radius-lg)] border border-[var(--mu-glass-border)] bg-[var(--mu-surface-3)]">
+      {hasImage ? (
+        <img
+          src={message.image as string}
+          alt="视觉分析图"
+          className="max-h-64 w-full border-b border-[var(--mu-glass-border)] object-cover"
+        />
+      ) : null}
+      <div className="space-y-1.5 px-4 py-2.5">
+        <div className="flex items-center gap-2 text-xs text-[var(--mu-text-lo)]">
+          <Icon name="vision" size={14} />
+          视觉分析
+          {hasImage ? <Tag tone="accent">识别</Tag> : null}
+        </div>
+        {message.content ? (
+          <span className="whitespace-pre-wrap text-sm text-[var(--mu-text-hi)]">{message.content}</span>
+        ) : message.streaming ? (
+          <span className="mu-blink text-xs text-[var(--mu-text-lo)]">识别中…</span>
+        ) : null}
      </div>
-      <span className="whitespace-pre-wrap">{message.content}</span>
    </div>
-  ) : fallbackText(message));
+  );
 }

-/** voice — speech session card. */
+/** voice — call-control card (live2D placeholder / waveform / mute / hang up).
+ *  Pure local UI state; a real call pipeline is deferred to a later milestone.
+ *  The upstream voice trigger is `ws.voice_input`. */
 export function VoiceMessageBody({ message }: { message: ChatMessage }): ReactNode {
-  return shell(message.content ? (
-    <div className="flex items-center gap-2 text-sm">
-      <Icon name="mic" size={16} className="text-[var(--mu-accent)]" />
-      <span className="whitespace-pre-wrap">{message.content}</span>
+  const [connected, setConnected] = useState(Boolean(message.streaming));
+  const [muted, setMuted] = useState(false);
+
+  // A finished voice reply rests in the "hung up" state rather than showing an
+  // active call forever.
+  useEffect(() => {
+    if (!message.streaming) setConnected(false);
+  }, [message.streaming]);
+
+  return (
+    <div className="rounded-[var(--mu-radius-lg)] border border-[var(--mu-glass-border)] bg-[var(--mu-surface-3)] px-4 py-3">
+      <div className="flex items-center gap-3">
+        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[var(--mu-accent)]/15 text-[var(--mu-accent)]">
+          <Icon name="mic" size={20} />
+        </div>
+        <div className="min-w-0">
+          <div className="text-sm font-medium text-[var(--mu-text-hi)]">语音通话</div>
+          <div className="text-xs text-[var(--mu-text-lo)]">{connected ? "通话中…" : "已挂断"}</div>
+        </div>
+      </div>
+
+      {/* live2D reserved slot */}
+      <div className="mt-3 flex h-24 items-center justify-center rounded-[var(--mu-radius-sm)] bg-[var(--mu-surface-2)]">
+        <span className="text-xs text-[var(--mu-text-lo)]">Live2D 预留位</span>
+      </div>
+
+      {/* waveform */}
+      <div className="mt-3 flex items-end justify-center gap-1">
+        {Array.from({ length: 12 }, (_, i) => (
+          <span
+            key={i}
+            className={`w-1 rounded-full bg-[var(--mu-accent)] ${connected && !muted ? "mu-blink" : "opacity-40"}`}
+            style={{ height: `${6 + ((i * 7) % 16)}px` }}
+          />
+        ))}
+      </div>
+
+      {/* controls */}
+      <div className="mt-3 flex items-center justify-center gap-4">
+        <button
+          onClick={() => setMuted((v) => !v)}
+          aria-label={muted ? "取消静音" : "静音"}
+          title={muted ? "取消静音" : "静音"}
+          className="inline-flex h-10 w-10 items-center justify-center rounded-full bg-[var(--mu-surface-4)] text-[var(--mu-text-mid)] transition-all duration-200 ease-[var(--mu-spring)] hover:bg-[var(--mu-surface-5)] active:scale-95"
+        >
+          <Icon name={muted ? "micOff" : "mic"} size={18} />
+        </button>
+        <button
+          onClick={() => setConnected(false)}
+          aria-label="挂断"
+          title="挂断"
+          className="inline-flex h-11 w-11 items-center justify-center rounded-full bg-[var(--mu-err)] text-white transition-all duration-200 ease-[var(--mu-spring)] active:scale-95"
+        >
+          <Icon name="phone" size={20} className="rotate-[135deg]" />
+        </button>
+      </div>
+
+      {message.content ? (
+        <div className="mt-2 whitespace-pre-wrap text-xs text-[var(--mu-text-lo)]">{message.content}</div>
+      ) : null}
    </div>
-  ) : fallbackText(message));
+  );
 }

 /** agents — sub-agent progress card (kept for the shared flow; monitors live in messages). */
@@ -149,10 +231,3 @@ export function modeBody(mode: Mode, message: ChatMessage): ReactNode {
    default: return <div className="rounded-[var(--mu-radius-lg)] border border-[var(--mu-glass-border)] bg-[var(--mu-surface-3)] px-4 py-2.5 text-sm text-[var(--mu-text-hi)]">{fallbackText(message)}</div>;
  }
 }
-
-/** tiny sample device extraction for the home card demo (content contains names). */
-function sampleDevices(content: string): string[] {
-  if (!content) return [];
-  const known = ["灯", "空调", "插座", "窗帘", "电视", "加湿器"];
-  return known.filter((k) => content.includes(k));
-}