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 绿。
This commit is contained in:
Aska committed
1 parent
b0bd93b15c
commit
2248ddce15
14 files changed
+576
-102
No files matched your search
@@ -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));
|
||||
}
|
||||
Reference in new issue
Block a user