@raingor/pi-web-switch 0.3.3 → 0.4.1

package/src/components/chat/ChatInput.tsx

@@ -0,0 +1,863 @@
+// ChatInput — message input bar with model selector, tool preset, and send controls.
+// Ported and simplified from pi-web's components/ChatInput.tsx.
+
+import { useState, useRef, useCallback, useEffect, type KeyboardEvent, forwardRef, useImperativeHandle } from "react";
+import type { AttachedImage, ChatInputHandle, ModelEntry, SlashCommandInfo, QueuedMessages } from "@/types/chat";
+import { useTranslation } from "@/lib/i18n";
+
+interface Props {
+  onSend: (message: string, images?: AttachedImage[]) => void;
+  onAbort: () => void;
+  onSteer?: (message: string, images?: AttachedImage[]) => void;
+  onFollowUp?: (message: string, images?: AttachedImage[]) => void;
+  isStreaming: boolean;
+  model?: { provider: string; modelId: string } | null;
+  isAutoModelSelection?: boolean;
+  modelNames?: Record<string, string>;
+  modelList?: ModelEntry[];
+  modelError?: string | null;
+  onModelChange: (provider: string, modelId: string) => void;
+  onCompact?: () => void;
+  onAbortCompaction?: () => void;
+  isCompacting?: boolean;
+  compactError?: string | null;
+  toolPreset: "none" | "default" | "full";
+  onToolPresetChange: (preset: "none" | "default" | "full") => void;
+  thinkingLevel: string;
+  onThinkingLevelChange: (level: any) => void;
+  retryInfo?: { attempt: number; maxAttempts: number; errorMessage?: string } | null;
+  queuedMessages?: QueuedMessages;
+  onRecallQueue?: () => void;
+  slashCommands?: SlashCommandInfo[];
+  slashCommandsLoading?: boolean;
+  onLoadSlashCommands?: () => void;
+  onBuiltinCommand?: (text: string) => Promise<{ handled: boolean; message?: string; error?: string }>;
+  inputHistory?: string[];
+  draftKey?: string;
+  cwd?: string;
+}
+
+const TEXTAREA_MIN_HEIGHT = 44;
+const TEXTAREA_MAX_HEIGHT = 200;
+const DRAFT_STORAGE_PREFIX = "pi-chat-draft:";
+
+export const ChatInput = forwardRef<ChatInputHandle, Props>(function ChatInput(props, ref) {
+  const {
+    onSend, onAbort, onSteer, onFollowUp, isStreaming,
+    model, isAutoModelSelection, modelNames, modelList, modelError, onModelChange,
+    onCompact, isCompacting, compactError,
+    toolPreset, onToolPresetChange,
+    thinkingLevel, onThinkingLevelChange,
+    retryInfo, queuedMessages, onRecallQueue,
+    slashCommands, slashCommandsLoading, onLoadSlashCommands,
+    onBuiltinCommand, inputHistory, draftKey, cwd,
+  } = props;
+
+  const { t } = useTranslation();
+  const [text, setText] = useState("");
+  const [showModelMenu, setShowModelMenu] = useState(false);
+  const [modelSearchQuery, setModelSearchQuery] = useState("");
+  const [showToolMenu, setShowToolMenu] = useState(false);
+  const [showSlashMenu, setShowSlashMenu] = useState(false);
+  const [attachedImages, setAttachedImages] = useState<AttachedImage[]>([]);
+  const [historyIndex, setHistoryIndex] = useState(-1);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const modelSearchInputRef = useRef<HTMLInputElement>(null);
+  const draftKeyRef = useRef(draftKey);
+  draftKeyRef.current = draftKey;
+
+  // Focus search input when model menu opens
+  useEffect(() => {
+    if (showModelMenu) {
+      setModelSearchQuery("");
+      requestAnimationFrame(() => {
+        modelSearchInputRef.current?.focus();
+      });
+    }
+  }, [showModelMenu]);
+
+  // ─── Imperative Handle ─────────────────────────────────
+
+  useImperativeHandle(ref, () => ({
+    insertText: (t: string) => {
+      setText((prev) => prev + t);
+      requestAnimationFrame(() => {
+        textareaRef.current?.focus();
+        textareaRef.current?.setSelectionRange(textareaRef.current.value.length, textareaRef.current.value.length);
+      });
+    },
+    insertIfEmpty: (content: string) => {
+      setText((prev) => (prev.trim() === "" ? content : prev));
+      textareaRef.current?.focus();
+    },
+    prependText: (t: string) => {
+      setText((prev) => t + (prev ? "\n\n" + prev : ""));
+      textareaRef.current?.focus();
+    },
+    addImages: (files: File[]) => {
+      for (const file of files) {
+        if (!file.type.startsWith("image/")) continue;
+        const reader = new FileReader();
+        reader.onload = () => {
+          const dataUrl = reader.result as string;
+          const base64 = dataUrl.split(",")[1];
+          if (base64) {
+            setAttachedImages((prev) => [...prev, {
+              data: base64,
+              mimeType: file.type,
+              previewUrl: dataUrl,
+            }]);
+          }
+        };
+        reader.readAsDataURL(file);
+      }
+    },
+  }), []);
+
+  // ─── Draft Persistence ─────────────────────────────────
+
+  useEffect(() => {
+    if (draftKey) {
+      const saved = localStorage.getItem(DRAFT_STORAGE_PREFIX + draftKey);
+      if (saved !== null) setText(saved);
+    }
+  }, [draftKey]);
+
+  useEffect(() => {
+    if (draftKey) {
+      localStorage.setItem(DRAFT_STORAGE_PREFIX + draftKey, text);
+    }
+  }, [text, draftKey]);
+
+  // ─── Auto-resize Textarea ──────────────────────────────
+
+  useEffect(() => {
+    const ta = textareaRef.current;
+    if (!ta) return;
+    ta.style.height = "auto";
+    ta.style.height = `${Math.min(ta.scrollHeight, TEXTAREA_MAX_HEIGHT)}px`;
+  }, [text]);
+
+  // ─── Send ──────────────────────────────────────────────
+
+  const handleSend = useCallback(async () => {
+    const trimmed = text.trim();
+    if (!trimmed && !attachedImages.length) return;
+    if (isStreaming) return;
+
+    // Check for built-in slash commands
+    if (onBuiltinCommand && trimmed.startsWith("/")) {
+      const result = await onBuiltinCommand(trimmed);
+      if (result.handled) {
+        setText("");
+        setAttachedImages([]);
+        setHistoryIndex(-1);
+        return;
+      }
+    }
+
+    onSend(trimmed, attachedImages.length ? attachedImages : undefined);
+    setText("");
+    setAttachedImages([]);
+    setHistoryIndex(-1);
+  }, [text, attachedImages, isStreaming, onSend, onBuiltinCommand]);
+
+  // ─── Keyboard Shortcuts ────────────────────────────────
+
+  const handleKeyDown = useCallback((e: KeyboardEvent<HTMLTextAreaElement>) => {
+    // Enter to send (without shift)
+    if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+      e.preventDefault();
+      if (isStreaming) {
+        onSteer?.(text);
+      } else {
+        void handleSend();
+      }
+      return;
+    }
+
+    // Shift+Enter for new line (default behavior)
+
+    // History navigation
+    if (e.key === "ArrowUp" && !e.shiftKey && text === "" && inputHistory && inputHistory.length > 0) {
+      e.preventDefault();
+      const newIdx = historyIndex === -1 ? 0 : Math.min(historyIndex + 1, inputHistory.length - 1);
+      setHistoryIndex(newIdx);
+      setText(inputHistory[newIdx] ?? "");
+      return;
+    }
+    if (e.key === "ArrowDown" && !e.shiftKey && historyIndex >= 0) {
+      e.preventDefault();
+      const newIdx = historyIndex - 1;
+      setHistoryIndex(newIdx);
+      setText(newIdx === -1 ? "" : inputHistory?.[newIdx] ?? "");
+      return;
+    }
+
+    // Slash command menu
+    if (e.key === "/" && text === "") {
+      setShowSlashMenu(true);
+      if (onLoadSlashCommands) onLoadSlashCommands();
+    }
+    if (e.key === "Escape") {
+      setShowSlashMenu(false);
+      setShowModelMenu(false);
+      setShowToolMenu(false);
+    }
+  }, [text, isStreaming, historyIndex, inputHistory, onSteer, handleSend, onLoadSlashCommands]);
+
+  // ─── Image Attach ──────────────────────────────────────
+
+  const handleFileSelect = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files ?? []);
+    if (ref && typeof ref === "object") {
+      ref.current?.addImages(files);
+    }
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  }, [ref]);
+
+  const handlePaste = useCallback((e: React.ClipboardEvent) => {
+    const items = e.clipboardData.items;
+    const images: File[] = [];
+    for (const item of items) {
+      if (item.type.startsWith("image/")) {
+        const file = item.getAsFile();
+        if (file) images.push(file);
+      }
+    }
+    if (images.length > 0) {
+      e.preventDefault();
+      if (ref && typeof ref === "object") {
+        ref.current?.addImages(images);
+      }
+    }
+  }, [ref]);
+
+  const removeImage = useCallback((index: number) => {
+    setAttachedImages((prev) => {
+      const next = [...prev];
+      const removed = next.splice(index, 1)[0];
+      if (removed?.previewUrl.startsWith("blob:")) URL.revokeObjectURL(removed.previewUrl);
+      return next;
+    });
+  }, []);
+
+  // ─── Render ────────────────────────────────────────────
+
+  const modelLabel = model
+    ? modelNames?.[`${model.provider}:${model.modelId}`] ?? model.modelId
+    : isAutoModelSelection
+      ? t("chat.auto")
+      : t("chat.no_model");
+
+  return (
+    <div style={{
+      position: "relative",
+      padding: "0 16px 12px 16px",
+    }}>
+      {/* Queue banner */}
+      {queuedMessages && (queuedMessages.steering.length > 0 || queuedMessages.followUp.length > 0) && (
+        <div style={{
+          marginBottom: 8,
+          padding: "6px 10px",
+          borderRadius: 8,
+          background: "var(--bg-panel)",
+          border: "1px solid var(--border)",
+          fontSize: 12,
+          color: "var(--text-muted)",
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+        }}>
+          <span>
+            {t("chat.steering_queued", String(queuedMessages.steering.length), String(queuedMessages.followUp.length))}
+          </span>
+          {onRecallQueue && (
+            <button
+              onClick={onRecallQueue}
+              style={{
+                marginLeft: "auto",
+                background: "none",
+                border: "none",
+                color: "var(--accent)",
+                cursor: "pointer",
+                fontSize: 12,
+              }}
+            >
+              {t("chat.recall")}
+            </button>
+          )}
+        </div>
+      )}
+
+      {/* Compact banner */}
+      {isCompacting && (
+        <div style={{
+          marginBottom: 8,
+          padding: "6px 10px",
+          borderRadius: 8,
+          background: "rgba(37,99,235,0.06)",
+          border: "1px solid rgba(37,99,235,0.2)",
+          fontSize: 12,
+          color: "var(--accent)",
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+        }}>
+          <svg className="animate-spin" width="12" height="12" viewBox="0 0 24 24" fill="none">
+            <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="2" opacity="0.25" />
+            <path d="M21 12a9 9 0 0 0-9-9" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+          </svg>
+          {t("chat.compacting")}
+        </div>
+      )}
+      {compactError && (
+        <div style={{
+          marginBottom: 8,
+          padding: "6px 10px",
+          borderRadius: 8,
+          background: "rgba(239,68,68,0.06)",
+          fontSize: 12,
+          color: "#dc2626",
+        }}>
+          {t("chat.compaction_failed", compactError)}
+        </div>
+      )}
+      {retryInfo && (
+        <div style={{
+          marginBottom: 8,
+          padding: "6px 10px",
+          borderRadius: 8,
+          background: "rgba(234,179,8,0.06)",
+          fontSize: 12,
+          color: "#d97706",
+        }}>
+          {t("chat.retrying", String(retryInfo.attempt), String(retryInfo.maxAttempts), retryInfo.errorMessage ? ": " + retryInfo.errorMessage : "")}
+        </div>
+      )}
+
+      {/* Slash command dropdown */}
+      {showSlashMenu && slashCommands && slashCommands.length > 0 && (
+        <div style={{
+          position: "absolute",
+          bottom: "100%",
+          left: 16,
+          right: 16,
+          maxHeight: 200,
+          overflow: "auto",
+          background: "var(--bg-panel)",
+          border: "1px solid var(--border)",
+          borderRadius: 8,
+          marginBottom: 4,
+          zIndex: 10,
+          boxShadow: "0 4px 12px rgba(0,0,0,0.08)",
+        }}>
+          {slashCommandsLoading && (
+            <div style={{ padding: "8px 12px", fontSize: 12, color: "var(--text-muted)" }}>{t("chat.loading")}</div>
+          )}
+          {slashCommands.map((cmd) => (
+            <button
+              key={cmd.name}
+              onClick={() => {
+                setText(`/${cmd.name} `);
+                setShowSlashMenu(false);
+                textareaRef.current?.focus();
+              }}
+              style={{
+                display: "block",
+                width: "100%",
+                padding: "6px 12px",
+                background: "none",
+                border: "none",
+                cursor: "pointer",
+                textAlign: "left",
+                fontSize: 13,
+                color: "var(--text)",
+              }}
+            >
+              <span style={{ color: "var(--accent)" }}>/{cmd.name}</span>
+              {cmd.description && (
+                <span style={{ color: "var(--text-muted)", marginLeft: 8, fontSize: 12 }}>{cmd.description}</span>
+              )}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Model selector dropdown */}
+      {showModelMenu && (
+        <div style={{
+          position: "absolute",
+          bottom: "100%",
+          left: 16,
+          right: 16,
+          maxHeight: 320,
+          display: "flex",
+          flexDirection: "column",
+          background: "var(--bg)",
+          border: "1px solid var(--border)",
+          borderRadius: 10,
+          marginBottom: 6,
+          zIndex: 20,
+          minWidth: 280,
+          boxShadow: "0 8px 24px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06)",
+        }}>
+          {/* Search header */}
+          <div style={{
+            padding: "10px 12px",
+            borderBottom: "1px solid var(--border)",
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            background: "var(--bg-panel)",
+            borderRadius: "10px 10px 0 0",
+          }}>
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--text-muted)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <circle cx="11" cy="11" r="8" />
+              <path d="m21 21-4.3-4.3" />
+            </svg>
+            <input
+              ref={modelSearchInputRef}
+              type="text"
+              value={modelSearchQuery}
+              onChange={(e) => setModelSearchQuery(e.target.value)}
+              placeholder={t("chat.search_models")}
+              style={{
+                flex: 1,
+                border: "none",
+                outline: "none",
+                background: "transparent",
+                fontSize: 13,
+                color: "var(--text)",
+                padding: 0,
+              }}
+              onKeyDown={(e) => {
+                if (e.key === "Escape") {
+                  setShowModelMenu(false);
+                }
+              }}
+            />
+            {modelSearchQuery && (
+              <button
+                onClick={() => setModelSearchQuery("")}
+                style={{
+                  background: "none",
+                  border: "none",
+                  cursor: "pointer",
+                  padding: 2,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  color: "var(--text-muted)",
+                }}
+              >
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M18 6 6 18" />
+                  <path d="m6 6 12 12" />
+                </svg>
+              </button>
+            )}
+          </div>
+
+          {/* Model list */}
+          <div style={{
+            overflow: "auto",
+            maxHeight: 260,
+          }}>
+            {(() => {
+              // Build display list: always include current model if set, then add other models
+              const displayList: ModelEntry[] = [];
+              const existingKeys = new Set<string>();
+
+              // Add current model first if it exists
+              if (model) {
+                const currentModelEntry: ModelEntry = {
+                  id: model.modelId,
+                  name: modelNames?.[`${model.provider}:${model.modelId}`] ?? model.modelId,
+                  provider: model.provider,
+                };
+                displayList.push(currentModelEntry);
+                existingKeys.add(`${model.provider}:${model.modelId}`);
+              }
+
+              // Add other models from modelList
+              if (modelList && modelList.length > 0) {
+                for (const m of modelList) {
+                  const key = `${m.provider}:${m.id}`;
+                  if (!existingKeys.has(key)) {
+                    displayList.push(m);
+                    existingKeys.add(key);
+                  }
+                }
+              }
+
+              // Filter by search query
+              const filteredList = modelSearchQuery.trim()
+                ? displayList.filter((m) =>
+                    m.name.toLowerCase().includes(modelSearchQuery.toLowerCase()) ||
+                    m.provider.toLowerCase().includes(modelSearchQuery.toLowerCase()) ||
+                    m.id.toLowerCase().includes(modelSearchQuery.toLowerCase())
+                  )
+                : displayList;
+
+              // If nothing to show
+              if (filteredList.length === 0) {
+                return (
+                  <div style={{ padding: "16px", fontSize: 13, color: "var(--text-muted)", textAlign: "center" }}>
+                    {modelSearchQuery
+                      ? t("chat.no_models_found")
+                      : (modelError ?? t("chat.no_models_available"))}
+                  </div>
+                );
+              }
+
+              return filteredList.map((m) => (
+                <button
+                  key={`${m.provider}:${m.id}`}
+                  onClick={() => {
+                    onModelChange(m.provider, m.id);
+                    setShowModelMenu(false);
+                    setModelSearchQuery("");
+                  }}
+                  onMouseEnter={(e) => { e.currentTarget.style.background = "var(--bg-hover)"; }}
+                  onMouseLeave={(e) => { e.currentTarget.style.background = "none"; }}
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 8,
+                    width: "100%",
+                    padding: "8px 12px",
+                    background: model?.provider === m.provider && model?.modelId === m.id ? "var(--bg-selected)" : "none",
+                    border: "none",
+                    cursor: "pointer",
+                    textAlign: "left",
+                    fontSize: 13,
+                    color: "var(--text)",
+                    transition: "background 0.1s",
+                  }}
+                >
+                  <span style={{ fontWeight: 500 }}>{m.name}</span>
+                  <span style={{ fontSize: 11, color: "var(--text-muted)", marginLeft: "auto" }}>{m.provider}</span>
+                  {model?.provider === m.provider && model?.modelId === m.id && (
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                      <polyline points="20 6 9 17 4 12" />
+                    </svg>
+                  )}
+                </button>
+              ));
+            })()}
+          </div>
+
+          {/* Footer with count */}
+          <div style={{
+            padding: "6px 12px",
+            borderTop: "1px solid var(--border)",
+            fontSize: 11,
+            color: "var(--text-muted)",
+            textAlign: "center",
+            background: "var(--bg-panel)",
+            borderRadius: "0 0 10px 10px",
+          }}>
+            {(() => {
+              const totalCount = (model ? 1 : 0) + (modelList?.length ?? 0);
+              const query = modelSearchQuery.trim();
+              if (query) {
+                const filteredCount = (modelList ?? []).filter((m: ModelEntry) =>
+                  m.name.toLowerCase().includes(query.toLowerCase()) ||
+                  m.provider.toLowerCase().includes(query.toLowerCase()) ||
+                  m.id.toLowerCase().includes(query.toLowerCase())
+                ).length + (model && (
+                  (modelNames?.[`${model.provider}:${model.modelId}`] ?? model.modelId).toLowerCase().includes(query.toLowerCase()) ||
+                  model.provider.toLowerCase().includes(query.toLowerCase()) ||
+                  model.modelId.toLowerCase().includes(query.toLowerCase())
+                ) ? 1 : 0);
+                return t("chat.models_filtered", String(filteredCount), String(totalCount));
+              }
+              return t("chat.models_count", String(totalCount));
+            })()}
+          </div>
+        </div>
+      )}
+
+      {/* Tool preset dropdown */}
+      {showToolMenu && (
+        <div style={{
+          position: "absolute",
+          bottom: "100%",
+          left: 100,
+          background: "var(--bg-panel)",
+          border: "1px solid var(--border)",
+          borderRadius: 8,
+          marginBottom: 4,
+          zIndex: 10,
+          minWidth: 160,
+          boxShadow: "0 4px 12px rgba(0,0,0,0.08)",
+        }}>
+          {(["default", "full", "none"] as const).map((preset) => (
+            <button
+              key={preset}
+              onClick={() => {
+                onToolPresetChange(preset);
+                setShowToolMenu(false);
+              }}
+              style={{
+                display: "block",
+                width: "100%",
+                padding: "8px 12px",
+                background: "none",
+                border: "none",
+                cursor: "pointer",
+                textAlign: "left",
+                fontSize: 13,
+                color: "var(--text)",
+              }}
+            >
+              {preset === "default" ? t("chat.default_tools") : preset === "full" ? t("chat.all_tools") : t("chat.no_tools")}
+              {toolPreset === preset && <span style={{ marginLeft: 8, color: "var(--accent)" }}>✓</span>}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Attached images preview */}
+      {attachedImages.length > 0 && (
+        <div style={{
+          display: "flex",
+          gap: 6,
+          marginBottom: 8,
+          flexWrap: "wrap",
+        }}>
+          {attachedImages.map((img, i) => (
+            <div key={i} style={{ position: "relative" }}>
+              <img
+                src={img.previewUrl}
+                alt="attachment"
+                style={{ width: 60, height: 60, objectFit: "cover", borderRadius: 6, border: "1px solid var(--border)" }}
+              />
+              <button
+                onClick={() => removeImage(i)}
+                style={{
+                  position: "absolute",
+                  top: -4,
+                  right: -4,
+                  width: 18,
+                  height: 18,
+                  borderRadius: "50%",
+                  background: "var(--text)",
+                  color: "var(--bg)",
+                  border: "none",
+                  cursor: "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  fontSize: 11,
+                }}
+              >
+                ×
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Input bar */}
+      <div style={{
+        display: "flex",
+        alignItems: "flex-end",
+        gap: 0,
+        borderRadius: 12,
+        border: "1px solid var(--border)",
+        background: "var(--bg)",
+        boxShadow: "0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02)",
+        overflow: "hidden",
+        transition: "border-color 0.15s ease, box-shadow 0.15s ease",
+      }}>
+        {/* Model selector button */}
+        <button
+          onClick={() => { setShowModelMenu(!showModelMenu); setShowToolMenu(false); setShowSlashMenu(false); }}
+          title={modelError ?? (modelList && modelList.length > 0 ? undefined : t("chat.no_models_available"))}
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: 4,
+            minHeight: TEXTAREA_MIN_HEIGHT,
+            height: "auto",
+            padding: "0 10px",
+            background: "none",
+            border: "none",
+            borderRight: "1px solid var(--border)",
+            color: model ? "var(--text)" : "var(--text-muted)",
+            cursor: "pointer",
+            fontSize: 12,
+            whiteSpace: "nowrap",
+            flexShrink: 0,
+            opacity: modelList && modelList.length === 0 && !model ? 0.5 : 1,
+          }}
+        >
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
+            <path d="M19 3v4" />
+            <path d="M21 5h-4" />
+          </svg>
+          <span style={{ maxWidth: 140, overflow: "hidden", textOverflow: "ellipsis", fontWeight: model ? 500 : 400 }}>{modelLabel}</span>
+          {(modelList && modelList.length > 0) && (
+            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ marginLeft: -2, opacity: 0.6 }}>
+              <polyline points="6 9 12 15 18 9" />
+            </svg>
+          )}
+        </button>
+
+        {/* Tool preset button */}
+        <button
+          onClick={() => { setShowToolMenu(!showToolMenu); setShowModelMenu(false); setShowSlashMenu(false); }}
+          title={t("chat.tool_preset")}
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            minHeight: TEXTAREA_MIN_HEIGHT,
+            height: "auto",
+            width: 36,
+            background: "none",
+            border: "none",
+            borderRight: "1px solid var(--border)",
+            color: toolPreset === "none" ? "var(--text-dim)" : "var(--text-muted)",
+            cursor: "pointer",
+            flexShrink: 0,
+          }}
+        >
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
+          </svg>
+        </button>
+
+        {/* Compact button */}
+        {onCompact && (
+          <button
+            onClick={onCompact}
+            disabled={isCompacting}
+            title={t("chat.compact_context")}
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              minHeight: TEXTAREA_MIN_HEIGHT,
+              height: "auto",
+              width: 36,
+              background: "none",
+              border: "none",
+              borderRight: "1px solid var(--border)",
+              color: isCompacting ? "var(--accent)" : "var(--text-dim)",
+              cursor: isCompacting ? "wait" : "pointer",
+              flexShrink: 0,
+            }}
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M21 12a9 9 0 1 1-3-6.7L21 8" />
+              <path d="M21 3v5h-5" />
+            </svg>
+          </button>
+        )}
+
+        {/* Textarea */}
+        <textarea
+          ref={textareaRef}
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          onKeyDown={handleKeyDown}
+          onPaste={handlePaste}
+          placeholder={isStreaming ? t("chat.type_to_steer") : t("chat.send_message")}
+          rows={1}
+          style={{
+            flex: 1,
+            minHeight: TEXTAREA_MIN_HEIGHT,
+            maxHeight: TEXTAREA_MAX_HEIGHT,
+            padding: "10px 12px",
+            border: "none",
+            outline: "none",
+            background: "transparent",
+            color: "var(--text)",
+            fontSize: 14,
+            lineHeight: 1.5,
+            resize: "none",
+            fontFamily: "inherit",
+            boxSizing: "border-box",
+          }}
+        />
+
+        {/* Image attach button */}
+        <button
+          onClick={() => fileInputRef.current?.click()}
+          title={t("chat.attach_image")}
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            minHeight: TEXTAREA_MIN_HEIGHT,
+            height: "auto",
+            width: 36,
+            background: "none",
+            border: "none",
+            color: "var(--text-dim)",
+            cursor: "pointer",
+            flexShrink: 0,
+          }}
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" />
+          </svg>
+        </button>
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="image/*"
+          multiple
+          onChange={handleFileSelect}
+          style={{ display: "none" }}
+        />
+
+        {/* Send/Abort button */}
+        <button
+          onClick={isStreaming ? onAbort : handleSend}
+          disabled={!isStreaming && !text.trim() && !attachedImages.length}
+          title={isStreaming ? t("chat.stop") : t("chat.send")}
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            minHeight: TEXTAREA_MIN_HEIGHT,
+            height: "auto",
+            width: 44,
+            background: isStreaming
+              ? "rgba(239,68,68,0.1)"
+              : (text.trim() || attachedImages.length) ? "var(--accent)" : "transparent",
+            border: "none",
+            borderLeft: "1px solid var(--border)",
+            color: isStreaming
+              ? "#dc2626"
+              : (text.trim() || attachedImages.length) ? "#fff" : "var(--text-dim)",
+            cursor: isStreaming || (text.trim() || attachedImages.length) ? "pointer" : "default",
+            flexShrink: 0,
+            borderRadius: "0 11px 11px 0",
+          }}
+        >
+          {isStreaming ? (
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+              <rect x="6" y="6" width="12" height="12" rx="2" />
+            </svg>
+          ) : (
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <line x1="12" y1="19" x2="12" y2="5" />
+              <polyline points="5 12 12 5 19 12" />
+            </svg>
+          )}
+        </button>
+      </div>
+
+      {modelError && (
+        <div style={{ marginTop: 4, fontSize: 11, color: "#d97706" }}>{modelError}</div>
+      )}
+    </div>
+  );
+});