@jiangxiaosheng/digital-agent-platform 1.0.0

package/src/components/chat/input-bar.tsx

@@ -0,0 +1,561 @@
+"use client";
+
+import { useRef, useEffect, useState, useCallback } from "react";
+import { useTranslations } from "next-intl";
+import {
+  Mic, MicOff, VolumeX, Zap, Terminal, Plus, Trash2,
+  ChevronDown, ImagePlus, X, Send, Cpu,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import type { SkillInfo } from "@/lib/skills";
+import type { AttachedImage } from "@/types/agent";
+import type { ProviderGroup } from "@/app/api/models/route";
+
+interface ISpeechRecognition {
+  lang: string; continuous: boolean; interimResults: boolean;
+  onresult: ((e: { results: { 0: { 0: { transcript: string } } } }) => void) | null;
+  onend: (() => void) | null; onerror: (() => void) | null;
+  start(): void; stop(): void;
+}
+interface ISpeechRecognitionCtor { new (): ISpeechRecognition }
+
+export type SendMode = "normal" | "steer" | "followup";
+
+interface SlashCommand {
+  id: string; label: string; description: string;
+  icon: React.ReactNode; category: "system" | "skill";
+  insert?: string; action?: () => void;
+}
+
+interface InputBarProps {
+  onSend: (text: string, mode: SendMode, images?: AttachedImage[]) => void;
+  disabled?: boolean;
+  voiceEnabled?: boolean;
+  voiceSpeed?: number;
+  agentLanguage?: string;
+  ttsProvider?: "browser" | "openai";
+  ttsModel?: string;
+  voiceId?: string;
+  pendingReply?: string;
+  onSpeakDone?: () => void;
+  installedSkills?: SkillInfo[];
+  onNewSession?: () => void;
+  onClearMessages?: () => void;
+  isStreaming?: boolean;
+  currentModel?: { provider: string; modelId: string };
+  onModelChange?: (provider: string, modelId: string) => void;
+}
+
+const MODE_META: Record<SendMode, { label: string; color: string; desc: string; activeColor: string }> = {
+  normal:   { label: "发送",  color: "bg-blue-500 hover:bg-blue-600 dark:bg-cyan-600 dark:hover:bg-cyan-500",       activeColor: "text-blue-600 dark:text-cyan-400", desc: "普通发送" },
+  steer:    { label: "引导",  color: "bg-orange-500 hover:bg-orange-600 dark:bg-orange-600 dark:hover:bg-orange-500",       activeColor: "text-orange-600 dark:text-orange-400", desc: "中断并引导当前生成" },
+  followup: { label: "追加",  color: "bg-indigo-500 hover:bg-indigo-600 dark:bg-purple-600 dark:hover:bg-purple-500",           activeColor: "text-indigo-600 dark:text-purple-400", desc: "完成后追加" },
+};
+
+const MAX_IMAGES = 4;
+const ACCEPT_TYPES = "image/jpeg,image/png,image/gif,image/webp";
+
+async function fileToAttachedImage(file: File): Promise<AttachedImage> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const dataUrl = reader.result as string;
+      const base64 = dataUrl.split(",")[1];
+      resolve({
+        id: Math.random().toString(36).slice(2),
+        data: base64,
+        mimeType: file.type || "image/jpeg",
+        name: file.name,
+        previewUrl: dataUrl,
+      });
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+}
+
+export function InputBar({
+  onSend, disabled, voiceEnabled, voiceSpeed = 1, agentLanguage = "zh-CN",
+  ttsProvider = "browser", ttsModel, voiceId,
+  pendingReply, onSpeakDone, installedSkills = [], onNewSession, onClearMessages, isStreaming,
+  currentModel, onModelChange,
+}: InputBarProps) {
+  const t = useTranslations("chat");
+  const [text, setText] = useState("");
+  const [images, setImages] = useState<AttachedImage[]>([]);
+  const [mode, setMode] = useState<SendMode>("normal");
+  const [showModeMenu, setShowModeMenu] = useState(false);
+  const [showModelMenu, setShowModelMenu] = useState(false);
+  const [modelGroups, setModelGroups] = useState<ProviderGroup[]>([]);
+  const [recording, setRecording] = useState(false);
+  const [speaking, setSpeaking] = useState(false);
+  const [showPanel, setShowPanel] = useState(false);
+  const [slashFilter, setSlashFilter] = useState("");
+  const [selectedIdx, setSelectedIdx] = useState(0);
+  const [inputHistory, setInputHistory] = useState<string[]>([]);
+  const [historyIdx, setHistoryIdx] = useState(-1);
+  const [draftText, setDraftText] = useState("");
+  const [dragging, setDragging] = useState(false);
+
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const recognitionRef = useRef<ISpeechRecognition | null>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const dragCounterRef = useRef(0);
+
+  // Lazy-load model list when menu first opens
+  useEffect(() => {
+    if (!showModelMenu || modelGroups.length > 0) return;
+    fetch("/api/models").then(r => r.json()).then(setModelGroups).catch(() => {});
+  }, [showModelMenu, modelGroups.length]);
+
+  useEffect(() => {
+    const ta = textareaRef.current;
+    if (!ta) return;
+    ta.style.height = "auto";
+    ta.style.height = Math.min(ta.scrollHeight, 150) + "px";
+  }, [text]);
+
+  useEffect(() => {
+    if (!pendingReply || !voiceEnabled || typeof window === "undefined") return;
+
+    const speak = async () => {
+      if (ttsProvider === "openai") {
+        // OpenAI TTS
+        try {
+          setSpeaking(true);
+          const response = await fetch("/api/tts", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              text: pendingReply,
+              model: ttsModel || "tts-1",
+              voice: voiceId || "alloy",
+              speed: voiceSpeed || 1.0,
+            }),
+          });
+
+          if (!response.ok) throw new Error("TTS request failed");
+
+          const audioBlob = await response.blob();
+          const audioUrl = URL.createObjectURL(audioBlob);
+          const audio = new Audio(audioUrl);
+
+          audio.onended = () => {
+            setSpeaking(false);
+            onSpeakDone?.();
+            URL.revokeObjectURL(audioUrl);
+          };
+
+          audio.onerror = () => {
+            setSpeaking(false);
+            onSpeakDone?.();
+            URL.revokeObjectURL(audioUrl);
+          };
+
+          await audio.play();
+        } catch (error) {
+          console.error("OpenAI TTS error:", error);
+          setSpeaking(false);
+          onSpeakDone?.();
+        }
+      } else {
+        // Browser TTS
+        window.speechSynthesis?.cancel();
+        const utt = new SpeechSynthesisUtterance(pendingReply);
+        utt.lang = agentLanguage;
+        utt.rate = voiceSpeed || 1.0;
+        if (voiceId) {
+          const voices = window.speechSynthesis.getVoices();
+          const voice = voices.find(v => v.name === voiceId || v.voiceURI === voiceId);
+          if (voice) utt.voice = voice;
+        }
+        utt.onstart = () => setSpeaking(true);
+        utt.onend = () => { setSpeaking(false); onSpeakDone?.(); };
+        window.speechSynthesis.speak(utt);
+      }
+    };
+
+    speak();
+  }, [pendingReply, voiceEnabled, voiceSpeed, agentLanguage, ttsProvider, ttsModel, voiceId, onSpeakDone]);
+
+  useEffect(() => {
+    if (isStreaming && mode === "normal") setMode("steer");
+    if (!isStreaming && mode === "steer") setMode("normal");
+  }, [isStreaming, mode]);
+
+  const addImages = useCallback(async (files: File[]) => {
+    const valid = files.filter(f => f.type.startsWith("image/")).slice(0, MAX_IMAGES);
+    if (!valid.length) return;
+    const converted = await Promise.all(valid.map(fileToAttachedImage));
+    setImages(prev => [...prev, ...converted].slice(0, MAX_IMAGES));
+  }, []);
+
+  const removeImage = (id: string) => setImages(prev => prev.filter(i => i.id !== id));
+
+  const handleFileInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files) { void addImages(Array.from(e.target.files)); e.target.value = ""; }
+  };
+
+  const handlePaste = (e: React.ClipboardEvent) => {
+    const imageFiles = Array.from(e.clipboardData.items)
+      .filter(item => item.type.startsWith("image/"))
+      .map(item => item.getAsFile())
+      .filter(Boolean) as File[];
+    if (imageFiles.length) { e.preventDefault(); void addImages(imageFiles); }
+  };
+
+  const handleDragEnter = (e: React.DragEvent) => {
+    e.preventDefault(); dragCounterRef.current++;
+    if (Array.from(e.dataTransfer.items).some(i => i.type.startsWith("image/"))) setDragging(true);
+  };
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault(); dragCounterRef.current--;
+    if (dragCounterRef.current <= 0) { dragCounterRef.current = 0; setDragging(false); }
+  };
+  const handleDragOver = (e: React.DragEvent) => e.preventDefault();
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault(); dragCounterRef.current = 0; setDragging(false);
+    const files = Array.from(e.dataTransfer.files);
+    void addImages(files);
+  };
+
+  // Slash commands
+  const allCommands: SlashCommand[] = [
+    { id: "new", label: "新建会话", description: "开始全新对话", icon: <Plus className="h-4 w-4 text-blue-500" />, category: "system", action: () => { onNewSession?.(); setText(""); setShowPanel(false); } },
+    { id: "clear", label: "清空消息", description: "清空当前窗口消息", icon: <Trash2 className="h-4 w-4 text-red-500" />, category: "system", action: () => { onClearMessages?.(); setText(""); setShowPanel(false); } },
+    ...installedSkills.map((s) => ({
+      id: `skill:${s.name}`, label: s.name, description: s.description || "执行此 Skill",
+      icon: <Zap className="h-4 w-4 text-purple-500" />, category: "skill" as const,
+      insert: `/${s.name} `,
+    })),
+  ];
+
+  const filteredCommands = allCommands.filter(
+    (c) => !slashFilter || c.label.toLowerCase().includes(slashFilter.toLowerCase()) || c.description.toLowerCase().includes(slashFilter.toLowerCase())
+  );
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const val = e.target.value; setText(val); setHistoryIdx(-1);
+    if (val === "/" || /(?:^|\n)\/$/.test(val)) { setSlashFilter(""); setSelectedIdx(0); setShowPanel(true); }
+    else if (showPanel) {
+      const match = val.match(/(?:^|\n)\/([^\s]*)$/);
+      if (match) { setSlashFilter(match[1]); setSelectedIdx(0); } else setShowPanel(false);
+    }
+  };
+
+  const selectCommand = useCallback((cmd: SlashCommand) => {
+    if (cmd.action) { cmd.action(); return; }
+    if (cmd.insert) {
+      const newText = text.replace(/(?:^|\n)\/[^\s]*$/, (m) => m.startsWith("\n") ? "\n" + cmd.insert : cmd.insert ?? "");
+      setText(newText ?? ""); setShowPanel(false); textareaRef.current?.focus();
+    }
+  }, [text]);
+
+  const handleSend = () => {
+    if ((!text.trim() && !images.length) || disabled) return;
+    const toSend = text.trim();
+    onSend(toSend, mode, images.length ? images : undefined);
+    if (toSend) setInputHistory((prev) => [toSend, ...prev.filter((x) => x !== toSend)].slice(0, 50));
+    setText(""); setImages([]); setHistoryIdx(-1); setShowPanel(false);
+    if (mode === "steer" || mode === "followup") setMode("normal");
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (showPanel) {
+      if (e.key === "ArrowDown") { e.preventDefault(); setSelectedIdx((i) => Math.min(i + 1, filteredCommands.length - 1)); }
+      else if (e.key === "ArrowUp") { e.preventDefault(); setSelectedIdx((i) => Math.max(i - 1, 0)); }
+      else if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); if (filteredCommands[selectedIdx]) selectCommand(filteredCommands[selectedIdx]); }
+      else if (e.key === "Escape") setShowPanel(false);
+      return;
+    }
+    if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); handleSend(); return; }
+    if (e.key === "ArrowUp" && !text.trim()) {
+      e.preventDefault();
+      const newIdx = Math.min(historyIdx + 1, inputHistory.length - 1);
+      if (newIdx >= 0 && inputHistory[newIdx]) { if (historyIdx === -1) setDraftText(text); setText(inputHistory[newIdx]); setHistoryIdx(newIdx); }
+    }
+    if (e.key === "ArrowDown" && historyIdx >= 0) {
+      e.preventDefault();
+      const newIdx = historyIdx - 1;
+      if (newIdx < 0) { setText(draftText); setHistoryIdx(-1); } else { setText(inputHistory[newIdx]); setHistoryIdx(newIdx); }
+    }
+  };
+
+  const toggleRecording = () => {
+    if (recording) { recognitionRef.current?.stop(); setRecording(false); return; }
+    const win = window as unknown as { SpeechRecognition?: ISpeechRecognitionCtor; webkitSpeechRecognition?: ISpeechRecognitionCtor };
+    const Ctor = win.SpeechRecognition ?? win.webkitSpeechRecognition;
+    if (!Ctor) return;
+    const rec = new Ctor();
+    rec.lang = agentLanguage; rec.continuous = false; rec.interimResults = false;
+    rec.onresult = (e) => setText((prev) => prev + (prev ? " " : "") + e.results[0][0].transcript);
+    rec.onend = () => setRecording(false); rec.onerror = () => setRecording(false);
+    rec.start(); recognitionRef.current = rec; setRecording(true);
+  };
+  const stopSpeaking = () => { window.speechSynthesis?.cancel(); setSpeaking(false); onSpeakDone?.(); };
+
+  useEffect(() => {
+    panelRef.current?.querySelector(`[data-idx="${selectedIdx}"]`)?.scrollIntoView?.({ block: "nearest" });
+  }, [selectedIdx]);
+
+  const grouped = filteredCommands.reduce((acc, cmd) => {
+    if (!acc[cmd.category]) acc[cmd.category] = [];
+    acc[cmd.category].push(cmd);
+    return acc;
+  }, {} as Record<string, typeof filteredCommands>);
+  const CATEGORY_LABELS: Record<string, string> = { system: "系统命令", skill: "Skills" };
+  let flatIdx = 0;
+  const currentMode = MODE_META[mode];
+  const canSend = (text.trim().length > 0 || images.length > 0) && !(disabled && mode === "normal");
+  const borderColor = mode === "steer" ? "border-orange-400/60 dark:border-orange-700/60"
+    : mode === "followup" ? "border-blue-400/60 dark:border-blue-700/60"
+    : dragging ? "border-[#57BE6B] border-dashed" : "border-border";
+
+  return (
+    <div
+      className="border-t bg-background px-3 py-2 relative"
+      onDragEnter={handleDragEnter}
+      onDragLeave={handleDragLeave}
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
+    >
+      {/* Hidden file input */}
+      <input ref={fileInputRef} type="file" accept={ACCEPT_TYPES} multiple className="hidden" onChange={handleFileInput} />
+
+      {/* Slash command panel */}
+      {showPanel && (
+        <div ref={panelRef} className="absolute bottom-full left-3 right-3 mb-2 rounded-xl border bg-white dark:bg-zinc-800 shadow-2xl overflow-hidden z-50 max-h-64 overflow-y-auto">
+          <div className="flex items-center gap-2 px-3 py-2 border-b bg-secondary/30">
+            <Terminal className="h-3.5 w-3.5 text-muted-foreground" />
+            <span className="text-xs text-muted-foreground">{slashFilter ? `/${slashFilter}` : "输入命令名称过滤…"}</span>
+            <span className="ml-auto text-[10px] text-muted-foreground">↑↓ · Enter · Esc</span>
+          </div>
+          {filteredCommands.length === 0 ? (
+            <div className="px-4 py-5 text-center text-sm text-muted-foreground">没有匹配的命令</div>
+          ) : (
+            <div className="p-1">
+              {Object.entries(grouped).map(([cat, cmds]) => (
+                <div key={cat}>
+                  <div className="px-2 py-1 text-[10px] font-semibold text-muted-foreground uppercase tracking-wider">{CATEGORY_LABELS[cat] ?? cat}</div>
+                  {cmds.map((cmd) => {
+                    const idx = flatIdx++;
+                    const active = idx === selectedIdx;
+                    return (
+                      <button key={cmd.id} type="button" data-idx={idx}
+                        onClick={() => selectCommand(cmd)} onMouseEnter={() => setSelectedIdx(idx)}
+                        className={cn("w-full flex items-center gap-3 rounded-lg px-3 py-2.5 text-left transition-colors", active ? "bg-secondary" : "hover:bg-secondary/50")}>
+                        <div className="h-7 w-7 rounded-lg bg-secondary flex items-center justify-center shrink-0">{cmd.icon}</div>
+                        <div className="min-w-0 flex-1">
+                          <div className="flex items-center gap-2">
+                            <span className="text-sm font-medium">{cmd.label}</span>
+                            <code className="text-[10px] text-muted-foreground font-mono bg-secondary px-1.5 py-0.5 rounded">/{cmd.id.replace("skill:", "")}</code>
+                          </div>
+                          <p className="text-xs text-muted-foreground truncate mt-0.5">{cmd.description}</p>
+                        </div>
+                      </button>
+                    );
+                  })}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Main input card — no overflow-hidden here so the mode dropdown can escape */}
+      <div className={cn("rounded-xl border transition-colors", borderColor,
+        mode === "steer" ? "bg-orange-50/40 dark:bg-orange-900/10" :
+        mode === "followup" ? "bg-blue-50/40 dark:bg-blue-900/10" : "bg-background",
+      )}>
+        {/* Image previews — overflow-hidden only on this section for clipping */}
+        {images.length > 0 && (
+          <div className="flex gap-2 p-2 flex-wrap border-b border-border/60 rounded-t-xl overflow-hidden">
+            {images.map((img) => (
+              <div key={img.id} className="relative group/img">
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img src={img.previewUrl} alt={img.name}
+                  className="h-16 w-16 object-cover rounded-lg border border-border/60" />
+                <button type="button" onClick={() => removeImage(img.id)}
+                  className="absolute -top-1.5 -right-1.5 h-5 w-5 rounded-full bg-zinc-800 dark:bg-zinc-600 text-white flex items-center justify-center opacity-0 group-hover/img:opacity-100 transition-opacity shadow">
+                  <X className="h-3 w-3" />
+                </button>
+              </div>
+            ))}
+            {images.length < MAX_IMAGES && (
+              <button type="button" onClick={() => fileInputRef.current?.click()}
+                className="h-16 w-16 rounded-lg border-2 border-dashed border-border/60 flex items-center justify-center text-muted-foreground hover:border-[#57BE6B] hover:text-[#57BE6B] transition-colors">
+                <ImagePlus className="h-5 w-5" />
+              </button>
+            )}
+          </div>
+        )}
+
+        {/* Textarea */}
+        <textarea
+          ref={textareaRef}
+          value={text}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          onPaste={handlePaste}
+          onBlur={() => setTimeout(() => setShowPanel(false), 150)}
+          placeholder={
+            mode === "steer" ? "引导生成方向（将中断当前输出）…" :
+            mode === "followup" ? "追加消息（当前完成后发送）…" :
+            `${t("inputPlaceholder")}  ( / 唤出命令 · 粘贴/拖拽图片 )`
+          }
+          rows={1}
+          disabled={disabled && mode === "normal"}
+          className="w-full resize-none bg-transparent text-sm outline-none placeholder:text-muted-foreground disabled:opacity-50 px-3 pt-2.5 pb-1 max-h-[150px]"
+        />
+
+        {/* Toolbar */}
+        <div className="flex items-center gap-1 px-2 py-1.5">
+          {/* Attach image */}
+          <button type="button" onClick={() => fileInputRef.current?.click()}
+            title={`上传图片（最多 ${MAX_IMAGES} 张，支持拖拽/粘贴）`}
+            disabled={images.length >= MAX_IMAGES}
+            className="flex items-center justify-center h-7 w-7 rounded-lg text-muted-foreground hover:bg-secondary/60 hover:text-foreground transition-colors disabled:opacity-30 disabled:cursor-not-allowed">
+            <ImagePlus className="h-4 w-4" />
+          </button>
+
+          {/* Model selector */}
+          {onModelChange && (
+            <div className="relative">
+              <button type="button"
+                onClick={() => { setShowModelMenu(!showModelMenu); setShowModeMenu(false); }}
+                title={currentModel ? `当前模型：${currentModel.provider}/${currentModel.modelId}` : "切换模型"}
+                className={cn(
+                  "flex items-center gap-1 h-7 px-2 rounded-lg text-xs transition-colors hover:bg-secondary/60",
+                  currentModel ? "text-muted-foreground hover:text-foreground" : "text-muted-foreground",
+                )}
+              >
+                <Cpu className="h-3.5 w-3.5 shrink-0" />
+                {currentModel && (
+                  <span className="font-mono max-w-[80px] truncate">
+                    {currentModel.modelId.split("-").slice(-2).join("-")}
+                  </span>
+                )}
+                <ChevronDown className="h-3 w-3 opacity-50 shrink-0" />
+              </button>
+
+              {showModelMenu && (
+                <div className="absolute bottom-full left-0 mb-1 w-72 rounded-xl border bg-white dark:bg-zinc-800 shadow-xl z-50 overflow-hidden">
+                  <div className="px-3 py-2 border-b text-xs text-muted-foreground font-medium bg-secondary/30">
+                    切换模型（本次会话有效）
+                  </div>
+                  <div className="max-h-72 overflow-y-auto">
+                    {modelGroups.length === 0 ? (
+                      <div className="px-4 py-6 text-center text-sm text-muted-foreground">加载中…</div>
+                    ) : modelGroups.map((group) => (
+                      <div key={group.id}>
+                        <div className="px-3 py-1.5 text-[10px] font-semibold text-muted-foreground uppercase tracking-wider bg-secondary/20 sticky top-0">
+                          {group.name}
+                        </div>
+                        {group.models.map((model) => {
+                          const isActive = currentModel?.provider === model.providerId && currentModel?.modelId === model.id;
+                          return (
+                            <button key={model.id} type="button"
+                              onClick={() => { onModelChange(model.providerId, model.id); setShowModelMenu(false); }}
+                              className={cn(
+                                "w-full flex items-start gap-2.5 px-3 py-2 text-left transition-colors hover:bg-secondary/50",
+                                isActive && "bg-[#57BE6B]/10 dark:bg-[#57BE6B]/15",
+                              )}
+                            >
+                              <div className="flex-1 min-w-0">
+                                <div className="flex items-center gap-2">
+                                  <span className={cn("text-sm font-medium truncate", isActive && "text-[#57BE6B]")}>
+                                    {model.name}
+                                  </span>
+                                  {isActive && <span className="text-[10px] text-[#57BE6B] font-medium shrink-0">当前</span>}
+                                </div>
+                                <div className="flex items-center gap-2 mt-0.5">
+                                  <span className="text-[10px] text-muted-foreground font-mono">
+                                    {Math.round(model.contextWindow / 1000)}K ctx
+                                  </span>
+                                  {model.supportsThinking && (
+                                    <span className="text-[10px] text-purple-500">🧠 thinking</span>
+                                  )}
+                                  {model.inputTypes.includes("image") && (
+                                    <span className="text-[10px] text-blue-500">🖼 vision</span>
+                                  )}
+                                  {model.costInput && (
+                                    <span className="text-[10px] text-muted-foreground ml-auto shrink-0">
+                                      ${model.costInput}/M
+                                    </span>
+                                  )}
+                                </div>
+                              </div>
+                            </button>
+                          );
+                        })}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Voice */}
+          {voiceEnabled && (
+            speaking ? (
+              <button type="button" onClick={stopSpeaking} title="停止朗读"
+                className="flex items-center justify-center h-7 w-7 rounded-lg text-primary hover:bg-secondary/60 transition-colors">
+                <VolumeX className="h-4 w-4" />
+              </button>
+            ) : (
+              <button type="button" onClick={toggleRecording}
+                title={recording ? "停止录音" : "语音输入"}
+                className={cn("flex items-center justify-center h-7 w-7 rounded-lg transition-colors hover:bg-secondary/60",
+                  recording ? "text-destructive animate-pulse" : "text-muted-foreground hover:text-foreground")}>
+                {recording ? <MicOff className="h-4 w-4" /> : <Mic className="h-4 w-4" />}
+              </button>
+            )
+          )}
+
+          <div className="flex-1" />
+
+          {/* Mode picker */}
+          <div className="relative">
+            <button type="button" onClick={() => setShowModeMenu(!showModeMenu)}
+              className={cn("flex items-center gap-1 rounded-lg px-2 py-1 text-xs font-medium transition-colors hover:bg-secondary/60", currentMode.activeColor)}>
+              {currentMode.label}
+              <ChevronDown className="h-3 w-3 opacity-60" />
+            </button>
+            {showModeMenu && (
+              <div className="absolute bottom-full right-0 mb-1 min-w-[160px] rounded-xl border bg-white dark:bg-zinc-800 shadow-xl z-50 p-1 space-y-0.5">
+                {(Object.entries(MODE_META) as [SendMode, typeof MODE_META[SendMode]][]).map(([m, meta]) => (
+                  <button key={m} type="button" onClick={() => { setMode(m); setShowModeMenu(false); }}
+                    className={cn("w-full text-left rounded-lg px-3 py-2 text-sm transition-colors", mode === m ? "bg-secondary" : "hover:bg-secondary/50")}>
+                    <div className={cn("font-medium", MODE_META[m].activeColor)}>{meta.label}</div>
+                    <div className="text-[11px] text-muted-foreground">{meta.desc}</div>
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Send button */}
+          <button type="button" onClick={handleSend} disabled={!canSend}
+            title="发送（Enter）"
+            className={cn(
+              "flex items-center justify-center h-7 w-7 rounded-lg text-white transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
+              currentMode.color,
+            )}>
+            <Send className="h-3.5 w-3.5" />
+          </button>
+        </div>
+      </div>
+
+      {/* Drag overlay */}
+      {dragging && (
+        <div className="absolute inset-0 m-1 rounded-xl border-2 border-dashed border-[#57BE6B] bg-[#57BE6B]/5 flex flex-col items-center justify-center gap-1 pointer-events-none">
+          <ImagePlus className="h-6 w-6 text-[#57BE6B]" />
+          <p className="text-sm font-medium text-[#57BE6B]">松开鼠标上传图片</p>
+        </div>
+      )}
+    </div>
+  );
+}