@seqyuan/annodex 0.1.11 → 0.1.12

package/components/ChatInput.tsx

@@ -0,0 +1,1103 @@
+"use client";
+
+import React, { useRef, useState, useCallback, useEffect, useImperativeHandle, forwardRef, KeyboardEvent } from "react";
+
+export interface AttachedImage {
+  data: string;   // base64, no prefix
+  mimeType: string;
+  previewUrl: string; // object URL for display
+}
+
+export interface AttachedDocument {
+  data: ArrayBuffer;
+  fileName: string;
+  mimeType: string;
+  size: number;
+  extractedText?: string;
+  extractionError?: string;
+  truncated?: boolean;
+}
+
+interface ModelOption {
+  provider: string;
+  modelId: string;
+  name: string;
+}
+
+interface Props {
+  onSend: (message: string, images?: AttachedImage[], documents?: AttachedDocument[]) => void;
+  onAbort: () => void;
+  isStreaming: boolean;
+  model?: { provider: string; modelId: string } | null;
+  modelNames?: Record<string, string>;
+  modelList?: { id: string; name: string; provider: string }[];
+  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?: "auto" | "off" | "minimal" | "low" | "medium" | "high" | "xhigh";
+  onThinkingLevelChange?: (level: "auto" | "off" | "minimal" | "low" | "medium" | "high" | "xhigh") => void;
+  availableThinkingLevels?: string[] | null;
+  thinkingLevelMap?: Record<string, string | null> | null;
+  retryInfo?: { attempt: number; maxAttempts: number; errorMessage?: string } | null;
+  soundEnabled?: boolean;
+  onSoundToggle?: () => void;
+}
+
+export interface ChatInputHandle {
+  insertText: (text: string) => void;
+  insertIfEmpty: (text: string) => void;
+  addImages: (files: File[]) => void;
+  addFiles: (files: File[]) => void;
+}
+
+const TOOL_PRESETS = ["off", "default", "full"] as const;
+const TOOL_PRESET_MAP: Record<typeof TOOL_PRESETS[number], "none" | "default" | "full"> = { off: "none", default: "default", full: "full" };
+
+const THINKING_LEVELS = ["auto", "off", "minimal", "low", "medium", "high", "xhigh"] as const;
+const THINKING_LEVEL_DESC: Record<typeof THINKING_LEVELS[number], string> = {
+  auto: "沿用默认设置",
+  off: "关闭推理",
+  minimal: "最少推理",
+  low: "低强度推理",
+  medium: "中等推理",
+  high: "高强度推理",
+  xhigh: "最高强度推理",
+};
+
+function DocAttachmentPreview({ doc, onRemove }: { doc: AttachedDocument; onRemove: () => void }) {
+  const ext = doc.fileName.split(".").pop()?.toLowerCase() ?? "";
+  const icon = getDocIcon(ext);
+  const sizeStr = formatDocSize(doc.size);
+
+  return (
+    <div
+      style={{
+        position: "relative",
+        display: "flex",
+        alignItems: "center",
+        gap: 6,
+        padding: "5px 10px 5px 7px",
+        background: "var(--bg-panel)",
+        border: "1px solid var(--border)",
+        borderRadius: 6,
+        maxWidth: 200,
+      }}
+      title={doc.fileName}
+    >
+      <span style={{ color: icon.color, fontSize: 14, flexShrink: 0 }}>{icon.emoji}</span>
+      <div style={{ minWidth: 0, flex: 1 }}>
+        <div
+          style={{
+            fontSize: 11,
+            color: "var(--text)",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            lineHeight: 1.3,
+          }}
+        >
+          {doc.fileName}
+        </div>
+        <div style={{ fontSize: 10, color: "var(--text-dim)", lineHeight: 1.3 }}>
+          {ext.toUpperCase()} · {sizeStr}{doc.extractionError ? " · no text" : doc.truncated ? " · truncated" : doc.extractedText ? " · text" : ""}
+        </div>
+      </div>
+      <button
+        onClick={onRemove}
+        style={{
+          flexShrink: 0,
+          width: 14,
+          height: 14,
+          borderRadius: "50%",
+          background: "var(--bg-hover)",
+          border: "none",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          cursor: "pointer",
+          padding: 0,
+          color: "var(--text-dim)",
+        }}
+        onMouseEnter={(e) => { e.currentTarget.style.color = "var(--text)"; }}
+        onMouseLeave={(e) => { e.currentTarget.style.color = "var(--text-dim)"; }}
+      >
+        <svg width="7" height="7" viewBox="0 0 7 7" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
+          <line x1="1" y1="1" x2="6" y2="6" /><line x1="6" y1="1" x2="1" y2="6" />
+        </svg>
+      </button>
+    </div>
+  );
+}
+
+function getDocIcon(ext: string): { emoji: string; color: string } {
+  switch (ext) {
+    case "pdf": return { emoji: "📄", color: "#ef4444" };
+    case "docx":
+    case "doc": return { emoji: "📝", color: "#3b82f6" };
+    case "xlsx":
+    case "xls": return { emoji: "📊", color: "#22c55e" };
+    case "pptx":
+    case "ppt": return { emoji: "📽", color: "#f97316" };
+    default: return { emoji: "📎", color: "var(--text-muted)" };
+  }
+}
+
+function formatDocSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+const DOCUMENT_TEXT_MAX_CHARS = 60_000;
+
+function truncateDocumentText(text: string): { text: string; truncated: boolean } {
+  const clean = text.replace(/\r\n/g, "\n").replace(/\n{4,}/g, "\n\n\n").trim();
+  if (clean.length <= DOCUMENT_TEXT_MAX_CHARS) return { text: clean, truncated: false };
+  return {
+    text: `${clean.slice(0, DOCUMENT_TEXT_MAX_CHARS)}\n\n[truncated after ${DOCUMENT_TEXT_MAX_CHARS} characters]`,
+    truncated: true,
+  };
+}
+
+function decodeXmlText(value: string): string {
+  return value
+    .replace(/&lt;/g, "<")
+    .replace(/&gt;/g, ">")
+    .replace(/&amp;/g, "&")
+    .replace(/&quot;/g, "\"")
+    .replace(/&apos;/g, "'");
+}
+
+async function extractPdfText(arrayBuffer: ArrayBuffer): Promise<string> {
+  const pdfjsLib = await import("pdfjs-dist/legacy/build/pdf.mjs") as typeof import("pdfjs-dist");
+  pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
+    "pdfjs-dist/legacy/build/pdf.worker.min.mjs",
+    import.meta.url
+  ).toString();
+  const doc = await pdfjsLib.getDocument({ data: arrayBuffer.slice(0) }).promise;
+  const pages: string[] = [];
+  for (let pageNum = 1; pageNum <= doc.numPages; pageNum += 1) {
+    const page = await doc.getPage(pageNum);
+    const textContent = await page.getTextContent();
+    const text = textContent.items
+      .map((item) => "str" in item ? item.str : "")
+      .filter(Boolean)
+      .join(" ");
+    if (text.trim()) pages.push(`Page ${pageNum}\n${text}`);
+  }
+  return pages.join("\n\n");
+}
+
+async function extractDocxText(arrayBuffer: ArrayBuffer): Promise<string> {
+  const JSZip = (await import("jszip")).default;
+  const zip = await JSZip.loadAsync(arrayBuffer);
+  const parts = [
+    "word/document.xml",
+    ...Object.keys(zip.files)
+      .filter((name) => /^word\/(footnotes|endnotes|comments)\.xml$/i.test(name))
+      .sort(),
+  ];
+  const chunks: string[] = [];
+  for (const part of parts) {
+    const file = zip.file(part);
+    if (!file) continue;
+    const xml = await file.async("string");
+    const withBreaks = xml
+      .replace(/<w:(br|cr)[^>]*\/>/g, "\n")
+      .replace(/<\/w:p>/g, "\n");
+    const matches = [...withBreaks.matchAll(/<w:t[^>]*>([\s\S]*?)<\/w:t>/g)];
+    chunks.push(...matches.map((match) => decodeXmlText(match[1])));
+  }
+  return chunks.join("").replace(/[ \t]+\n/g, "\n");
+}
+
+async function extractXlsxText(arrayBuffer: ArrayBuffer): Promise<string> {
+  const XLSX = await import("xlsx");
+  const workbook = XLSX.read(arrayBuffer, { type: "array" });
+  return workbook.SheetNames.map((name) => {
+    const sheet = workbook.Sheets[name];
+    const csv = XLSX.utils.sheet_to_csv(sheet);
+    return `Sheet: ${name}\n${csv}`;
+  }).join("\n\n");
+}
+
+async function extractPptxText(arrayBuffer: ArrayBuffer): Promise<string> {
+  const JSZip = (await import("jszip")).default;
+  const zip = await JSZip.loadAsync(arrayBuffer);
+  const slideFiles = Object.keys(zip.files)
+    .map((name) => ({ name, match: /^ppt\/slides\/slide(\d+)\.xml$/i.exec(name) }))
+    .filter((item): item is { name: string; match: RegExpExecArray } => item.match !== null)
+    .sort((a, b) => Number(a.match[1]) - Number(b.match[1]));
+  const slides: string[] = [];
+  for (const { name, match } of slideFiles) {
+    const xml = await zip.file(name)!.async("string");
+    const texts = [...xml.matchAll(/<a:t[^>]*>([\s\S]*?)<\/a:t>/g)]
+      .map((m) => decodeXmlText(m[1]).trim())
+      .filter(Boolean);
+    if (texts.length) slides.push(`Slide ${match[1]}\n${texts.join("\n")}`);
+  }
+  return slides.join("\n\n");
+}
+
+async function extractDocumentText(file: File, arrayBuffer: ArrayBuffer): Promise<Pick<AttachedDocument, "extractedText" | "extractionError" | "truncated">> {
+  const ext = file.name.split(".").pop()?.toLowerCase() ?? "";
+  try {
+    let raw = "";
+    if (file.type.startsWith("text/") || ["csv", "tsv", "md", "txt", "json", "xml"].includes(ext)) {
+      raw = new TextDecoder("utf-8").decode(arrayBuffer);
+    } else if (ext === "pdf" || file.type === "application/pdf") {
+      raw = await extractPdfText(arrayBuffer);
+    } else if (ext === "docx") {
+      raw = await extractDocxText(arrayBuffer);
+    } else if (ext === "xlsx") {
+      raw = await extractXlsxText(arrayBuffer);
+    } else if (ext === "pptx") {
+      raw = await extractPptxText(arrayBuffer);
+    } else {
+      return { extractionError: "Text extraction is not supported for this file type" };
+    }
+    const { text, truncated } = truncateDocumentText(raw);
+    if (!text) return { extractionError: "No extractable text found" };
+    return { extractedText: text, truncated };
+  } catch (error) {
+    return { extractionError: error instanceof Error ? error.message : String(error) };
+  }
+}
+
+export const ChatInput = forwardRef<ChatInputHandle, Props>(function ChatInput({
+  onSend, onAbort, isStreaming, model, modelNames, modelList, onModelChange,
+  onCompact, onAbortCompaction, isCompacting, compactError, toolPreset, onToolPresetChange,
+  thinkingLevel, onThinkingLevelChange, availableThinkingLevels, thinkingLevelMap,
+  retryInfo,
+  soundEnabled, onSoundToggle,
+}: Props, ref) {
+  const [value, setValue] = useState("");
+  const [modelDropdownOpen, setModelDropdownOpen] = useState(false);
+  const [modelDropdownRect, setModelDropdownRect] = useState<{ top: number; left: number; width: number } | null>(null);
+  const [toolDropdownOpen, setToolDropdownOpen] = useState(false);
+  const [thinkingDropdownOpen, setThinkingDropdownOpen] = useState(false);
+  const [attachedImages, setAttachedImages] = useState<AttachedImage[]>([]);
+  const [attachedDocs, setAttachedDocs] = useState<AttachedDocument[]>([]);
+
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const modelDropdownPanelRef = useRef<HTMLDivElement>(null);
+  const toolDropdownRef = useRef<HTMLDivElement>(null);
+  const thinkingDropdownRef = useRef<HTMLDivElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const docInputRef = useRef<HTMLInputElement>(null);
+
+  useImperativeHandle(ref, () => ({
+    insertIfEmpty(text: string) {
+      const ta = textareaRef.current;
+      const current = ta ? ta.value : value;
+      if (current.trim()) return;
+      setValue(text);
+      requestAnimationFrame(() => {
+        if (!ta) return;
+        ta.focus();
+        ta.style.height = "auto";
+        ta.style.height = `${Math.min(ta.scrollHeight, 200)}px`;
+      });
+    },
+    insertText(text: string) {
+      const ta = textareaRef.current;
+      if (!ta) {
+        setValue((v) => v + (v ? " " : "") + text);
+        return;
+      }
+      const start = ta.selectionStart ?? ta.value.length;
+      const end = ta.selectionEnd ?? ta.value.length;
+      const before = ta.value.slice(0, start);
+      const after = ta.value.slice(end);
+      const sep = before.length > 0 && !before.endsWith(" ") ? " " : "";
+      const newVal = before + sep + text + after;
+      setValue(newVal);
+      requestAnimationFrame(() => {
+        if (!ta) return;
+        const pos = start + sep.length + text.length;
+        ta.setSelectionRange(pos, pos);
+        ta.focus();
+        ta.style.height = "auto";
+        ta.style.height = `${Math.min(ta.scrollHeight, 200)}px`;
+      });
+    },
+    addImages(files: File[]) {
+      processImageFiles(files);
+    },
+    addFiles(files: File[]) {
+      processFiles(files);
+    },
+  }));
+
+  const processImageFiles = useCallback(async (files: File[]) => {
+    const imageFiles = files.filter((f) => f.type.startsWith("image/"));
+    if (!imageFiles.length) return;
+    const newImages = await Promise.all(
+      imageFiles.map(
+        (file) =>
+          new Promise<AttachedImage>((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = () => {
+              const result = reader.result as string;
+              const base64 = result.split(",")[1];
+              resolve({ data: base64, mimeType: file.type, previewUrl: URL.createObjectURL(file) });
+            };
+            reader.onerror = reject;
+            reader.readAsDataURL(file);
+          })
+      )
+    );
+    setAttachedImages((prev) => [...prev, ...newImages]);
+  }, []);
+
+  const processFiles = useCallback(async (files: File[]) => {
+    const imageFiles = files.filter((f) => f.type.startsWith("image/"));
+    const docFiles = files.filter((f) => !f.type.startsWith("image/"));
+
+    // Process images
+    if (imageFiles.length) {
+      processImageFiles(imageFiles);
+    }
+
+    // Process documents
+    if (docFiles.length) {
+      const newDocs = await Promise.all(
+        docFiles.map(
+          (file) =>
+            new Promise<AttachedDocument>((resolve, reject) => {
+              const reader = new FileReader();
+              reader.onload = async () => {
+                const data = reader.result as ArrayBuffer;
+                const extraction = await extractDocumentText(file, data);
+                resolve({
+                  data,
+                  fileName: file.name,
+                  mimeType: file.type || "application/octet-stream",
+                  size: file.size,
+                  ...extraction,
+                });
+              };
+              reader.onerror = reject;
+              reader.readAsArrayBuffer(file);
+            })
+        )
+      );
+      setAttachedDocs((prev) => [...prev, ...newDocs]);
+    }
+  }, [processImageFiles]);
+
+  const removeImage = useCallback((index: number) => {
+    setAttachedImages((prev) => {
+      const next = [...prev];
+      URL.revokeObjectURL(next[index].previewUrl);
+      next.splice(index, 1);
+      return next;
+    });
+  }, []);
+
+  const removeDoc = useCallback((index: number) => {
+    setAttachedDocs((prev) => {
+      const next = [...prev];
+      next.splice(index, 1);
+      return next;
+    });
+  }, []);
+
+  const clearAttachments = useCallback(() => {
+    setAttachedImages((prev) => {
+      prev.forEach((img) => URL.revokeObjectURL(img.previewUrl));
+      return [];
+    });
+    setAttachedDocs([]);
+  }, []);
+
+  const handleSend = useCallback(() => {
+    const msg = value.trim();
+    if (!msg && !attachedImages.length && !attachedDocs.length) return;
+    if (isStreaming) return;
+    onSend(
+      msg,
+      attachedImages.length ? attachedImages : undefined,
+      attachedDocs.length ? attachedDocs : undefined
+    );
+    setValue("");
+    clearAttachments();
+    if (textareaRef.current) {
+      textareaRef.current.style.height = "auto";
+    }
+  }, [value, attachedImages, attachedDocs, isStreaming, onSend, clearAttachments]);
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLTextAreaElement>) => {
+      if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+        e.preventDefault();
+        handleSend();
+      }
+    },
+    [handleSend]
+  );
+
+  const handleInput = useCallback(() => {
+    const ta = textareaRef.current;
+    if (!ta) return;
+    ta.style.height = "auto";
+    ta.style.height = `${Math.min(ta.scrollHeight, 200)}px`;
+  }, []);
+
+  const handlePaste = useCallback((e: React.ClipboardEvent) => {
+    const items = Array.from(e.clipboardData?.items ?? []);
+    const fileItems = items.filter((item) => item.kind === "file" && (item.type.startsWith("image/") || item.type.includes("pdf") || item.type.includes("officedocument") || item.type.includes("msword") || item.type.includes("ms-")));
+    if (!fileItems.length) return;
+    e.preventDefault();
+    const files = fileItems.map((item) => item.getAsFile()).filter((f): f is File => f !== null);
+    processFiles(files);
+  }, [processFiles]);
+
+
+
+  // Build model options: prefer modelList (has provider info), fallback to modelNames
+  const modelOptions: ModelOption[] = (() => {
+    if (modelList && modelList.length > 0) {
+      return modelList.map((m) => ({ provider: m.provider, modelId: m.id, name: m.name }));
+    }
+    return Object.entries(modelNames ?? {}).map(([modelId, name]) => ({
+      provider: model?.provider ?? "unknown",
+      modelId,
+      name,
+    }));
+  })();
+
+  // Group options by provider, preserving insertion order
+  const modelsByProvider: { provider: string; options: ModelOption[] }[] = [];
+  for (const opt of modelOptions) {
+    const group = modelsByProvider.find((g) => g.provider === opt.provider);
+    if (group) group.options.push(opt);
+    else modelsByProvider.push({ provider: opt.provider, options: [opt] });
+  }
+
+  const currentName = model
+    ? (modelOptions.find((o) => o.modelId === model.modelId && o.provider === model.provider)?.name ?? model.modelId)
+    : "Select model";
+
+  // Close dropdowns on outside click
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (
+        dropdownRef.current && !dropdownRef.current.contains(e.target as Node) &&
+        modelDropdownPanelRef.current && !modelDropdownPanelRef.current.contains(e.target as Node)
+      ) {
+        setModelDropdownOpen(false);
+      }
+      if (toolDropdownRef.current && !toolDropdownRef.current.contains(e.target as Node)) {
+        setToolDropdownOpen(false);
+      }
+      if (thinkingDropdownRef.current && !thinkingDropdownRef.current.contains(e.target as Node)) {
+        setThinkingDropdownOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, []);
+
+
+
+  return (
+    <div
+      style={{
+        flexShrink: 0,
+        background: "transparent",
+        padding: "0 16px 8px",
+        paddingRight: 52, // 16px base + 36px for ChatMinimap alignment
+      }}
+    >
+      {/* Hidden file inputs */}
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept="image/*"
+        multiple
+        style={{ display: "none" }}
+        onChange={(e) => {
+          const files = Array.from(e.target.files ?? []);
+          processImageFiles(files);
+          e.target.value = "";
+        }}
+      />
+      <input
+        ref={docInputRef}
+        type="file"
+        accept=".pdf,.docx,.xlsx,.pptx,.doc,.xls,.ppt,application/pdf,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.openxmlformats-officedocument.presentationml.presentation"
+        multiple
+        style={{ display: "none" }}
+        onChange={(e) => {
+          const files = Array.from(e.target.files ?? []);
+          processFiles(files);
+          e.target.value = "";
+        }}
+      />
+      <div style={{ maxWidth: 820, margin: "0 auto" }}>
+        {/* Retry banner */}
+        {retryInfo && (
+          <div style={{
+            marginBottom: 8, padding: "5px 10px",
+            background: "rgba(234,179,8,0.08)", border: "1px solid rgba(234,179,8,0.25)",
+            borderRadius: 6, fontSize: 12, color: "rgba(180,130,0,0.9)",
+            display: "flex", alignItems: "center", gap: 6,
+          }}>
+            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
+              <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
+              <path d="M3 3v5h5" />
+            </svg>
+            Retrying ({retryInfo.attempt}/{retryInfo.maxAttempts})…{retryInfo.errorMessage && <span style={{ opacity: 0.7, marginLeft: 4 }}>— {retryInfo.errorMessage}</span>}
+          </div>
+        )}
+        {/* Attachments preview */}
+        {(attachedImages.length > 0 || attachedDocs.length > 0) && (
+          <div style={{ display: "flex", gap: 6, marginBottom: 6, flexWrap: "wrap", alignItems: "flex-end" }}>
+            {attachedImages.map((img, i) => (
+              <div key={`img-${i}`} style={{ position: "relative", flexShrink: 0 }}>
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img
+                  src={img.previewUrl}
+                  alt=""
+                  style={{ width: 56, height: 56, objectFit: "cover", borderRadius: 6, border: "1px solid var(--border)", display: "block" }}
+                />
+                <button
+                  onClick={() => removeImage(i)}
+                  style={{
+                    position: "absolute", top: -4, right: -4,
+                    width: 16, height: 16, borderRadius: "50%",
+                    background: "var(--bg-panel)", border: "1px solid var(--border)",
+                    display: "flex", alignItems: "center", justifyContent: "center",
+                    cursor: "pointer", padding: 0, color: "var(--text-muted)",
+                  }}
+                >
+                  <svg width="8" height="8" viewBox="0 0 8 8" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
+                    <line x1="1" y1="1" x2="7" y2="7" /><line x1="7" y1="1" x2="1" y2="7" />
+                  </svg>
+                </button>
+              </div>
+            ))}
+            {attachedDocs.map((doc, i) => (
+              <DocAttachmentPreview
+                key={`doc-${i}`}
+                doc={doc}
+                onRemove={() => removeDoc(i)}
+              />
+            ))}
+          </div>
+        )}
+
+        {/* Main input */}
+        <div
+          style={{
+            display: "flex",
+            gap: 8,
+            alignItems: "center",
+            background: "var(--bg)",
+            border: "1px solid color-mix(in srgb, var(--border) 70%, transparent)",
+            borderRadius: 14,
+            padding: "10px 10px 10px 14px",
+            boxShadow: "0 1px 2px rgba(15,23,42,0.04), 0 8px 24px -12px rgba(15,23,42,0.10)",
+            transition: "border-color 0.15s, background 0.15s, box-shadow 0.15s",
+          } as React.CSSProperties}
+        >
+          <textarea
+            ref={textareaRef}
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            onKeyDown={handleKeyDown}
+            onInput={handleInput}
+            onPaste={handlePaste}
+            placeholder={
+              isStreaming ? "Agent is running…"
+                : "Message…"
+            }
+            rows={1}
+            style={{
+              flex: 1,
+              background: "none",
+              border: "none",
+              outline: "none",
+              resize: "none",
+              color: "var(--text)",
+              fontSize: 14,
+              lineHeight: 1.6,
+              fontFamily: "inherit",
+              minHeight: 24,
+              maxHeight: 200,
+              overflow: "auto",
+            }}
+          />
+
+          {!isStreaming && (
+            <button
+              onClick={handleSend}
+              disabled={!value.trim() && !attachedImages.length && !attachedDocs.length}
+              style={{
+                flexShrink: 0,
+                alignSelf: "flex-end",
+                display: "flex", alignItems: "center", gap: 6,
+                padding: "7px 14px",
+                background: (value.trim() || attachedImages.length || attachedDocs.length) ? "var(--accent)" : "var(--bg-panel)",
+                border: "none",
+                borderRadius: 8,
+                color: (value.trim() || attachedImages.length || attachedDocs.length) ? "#fff" : "var(--text-dim)",
+                cursor: (value.trim() || attachedImages.length || attachedDocs.length) ? "pointer" : "not-allowed",
+                fontSize: 13,
+                fontWeight: 600,
+                letterSpacing: "-0.01em",
+                boxShadow: (value.trim() || attachedImages.length || attachedDocs.length) ? "0 1px 3px rgba(37,99,235,0.25)" : "none",
+                transition: "background 0.15s, box-shadow 0.15s",
+              }}
+            >
+              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <line x1="2" y1="7" x2="11" y2="7" />
+                <polyline points="7.5 3 12 7 7.5 11" />
+              </svg>
+              Send
+            </button>
+          )}
+        </div>
+
+        {/* Bottom bar: left | center (context) | right */}
+        <div className="chat-input-toolbar" style={{ marginTop: 8, display: "flex", alignItems: "center", gap: 6 }}>
+
+          {/* LEFT: attach + model selector */}
+          <div className="chat-input-toolbar-left" style={{ flex: "0 0 auto", display: "flex", alignItems: "center", gap: 2 }}>
+            <button
+              onClick={() => fileInputRef.current?.click()}
+              disabled={isStreaming}
+              title="Attach image (right-click for document)"
+              style={{
+                flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center",
+                width: 32, height: 32, padding: 0,
+                background: "none", border: "none",
+                borderRadius: 9,
+                color: attachedImages.length || attachedDocs.length ? "var(--accent)" : "var(--text-muted)",
+                cursor: isStreaming ? "not-allowed" : "pointer",
+                opacity: isStreaming ? 0.5 : 1,
+                transition: "background 0.12s, color 0.12s",
+              }}
+              onMouseEnter={(e) => {
+                if (isStreaming) return;
+                e.currentTarget.style.background = "var(--bg-hover)";
+                e.currentTarget.style.color = attachedImages.length || attachedDocs.length ? "var(--accent)" : "var(--text)";
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.background = "none";
+                e.currentTarget.style.color = attachedImages.length || attachedDocs.length ? "var(--accent)" : "var(--text-muted)";
+              }}
+              onContextMenu={(e) => {
+                e.preventDefault();
+                docInputRef.current?.click();
+              }}
+            >
+              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" 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>
+            {/* Model selector — visible always, disabled during streaming */}
+            {modelOptions.length > 0 && onModelChange && (
+                <div ref={dropdownRef} style={{ position: "relative" }}>
+                  <button
+                    onClick={(e) => {
+                      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+                      setModelDropdownRect({ top: rect.top, left: rect.left, width: rect.width });
+                      setModelDropdownOpen((v) => !v);
+                    }}
+                    disabled={isStreaming}
+                    style={{
+                      display: "flex", alignItems: "center", gap: 6,
+                      padding: "8px 12px",
+                      height: 32,
+                      maxWidth: 220, overflow: "hidden",
+                      background: modelDropdownOpen ? "var(--bg-hover)" : "none",
+                      border: "none",
+                      borderRadius: 9,
+                      color: "var(--text-muted)",
+                      cursor: isStreaming ? "not-allowed" : "pointer",
+                      fontSize: 12,
+                      opacity: isStreaming ? 0.5 : 1,
+                      transition: "background 0.12s, color 0.12s",
+                    }}
+                    onMouseEnter={(e) => {
+                      if (isStreaming) return;
+                      e.currentTarget.style.background = "var(--bg-hover)";
+                      e.currentTarget.style.color = "var(--text)";
+                    }}
+                    onMouseLeave={(e) => {
+                      e.currentTarget.style.background = modelDropdownOpen ? "var(--bg-hover)" : "none";
+                      e.currentTarget.style.color = "var(--text-muted)";
+                    }}
+                  >
+                    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                      <rect x="4" y="4" width="16" height="16" rx="2" />
+                      <rect x="9" y="9" width="6" height="6" />
+                      <line x1="9" y1="1" x2="9" y2="4" /><line x1="15" y1="1" x2="15" y2="4" />
+                      <line x1="9" y1="20" x2="9" y2="23" /><line x1="15" y1="20" x2="15" y2="23" />
+                      <line x1="20" y1="9" x2="23" y2="9" /><line x1="20" y1="14" x2="23" y2="14" />
+                      <line x1="1" y1="9" x2="4" y2="9" /><line x1="1" y1="14" x2="4" y2="14" />
+                    </svg>
+                    <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", minWidth: 0 }}>{currentName}</span>
+                  </button>
+                  {modelDropdownOpen && modelDropdownRect && (() => {
+                    const viewportHeight = window.visualViewport?.height ?? window.innerHeight;
+                    const bottom = viewportHeight - modelDropdownRect.top + 6;
+                    const maxH = Math.max(120, Math.min(modelDropdownRect.top - 8, viewportHeight * 0.6));
+                    return (
+                    <div ref={modelDropdownPanelRef} style={{
+                      position: "fixed",
+                      bottom, left: modelDropdownRect.left,
+                      zIndex: 500, background: "var(--bg)", border: "1px solid var(--border)",
+                      borderRadius: 8, boxShadow: "0 -4px 16px rgba(0,0,0,0.10)",
+                      overflow: "hidden", width: "max-content", minWidth: modelDropdownRect.width, maxHeight: maxH, overflowY: "auto",
+                    }}>
+                      {modelsByProvider.map((group, gi) => (
+                        <div key={group.provider}>
+                          {(modelsByProvider.length > 1) && (
+                            <div style={{
+                              padding: "6px 12px 4px",
+                              fontSize: 10, fontWeight: 600, color: "var(--text-dim)",
+                              textTransform: "uppercase", letterSpacing: "0.07em",
+                              borderTop: gi > 0 ? "1px solid var(--border)" : "none",
+                            }}>
+                              {group.provider}
+                            </div>
+                          )}
+                          {group.options.map((opt) => {
+                            const isActive = opt.modelId === model?.modelId && opt.provider === model?.provider;
+                            return (
+                              <button
+                                key={`${opt.provider}:${opt.modelId}`}
+                                onClick={() => { setModelDropdownOpen(false); if (!isActive) onModelChange(opt.provider, opt.modelId); }}
+                                style={{
+                                  display: "flex", alignItems: "center", gap: 8,
+                                  width: "100%", padding: "7px 12px",
+                                  background: isActive ? "var(--bg-selected)" : "none",
+                                  border: "none",
+                                  color: isActive ? "var(--text)" : "var(--text-muted)",
+                                  cursor: "pointer", fontSize: 12, textAlign: "left",
+                                  fontWeight: isActive ? 600 : 400,
+                                  whiteSpace: "nowrap",
+                                }}
+                                onMouseEnter={(e) => { if (!isActive) e.currentTarget.style.background = "var(--bg-hover)"; }}
+                                onMouseLeave={(e) => { if (!isActive) e.currentTarget.style.background = "none"; }}
+                              >
+                                {isActive
+                                  ? <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}><polyline points="1.5 5 4 7.5 8.5 2.5" /></svg>
+                                  : <span style={{ width: 10, flexShrink: 0 }} />}
+                                {opt.name}
+                              </button>
+                            );
+                          })}
+                        </div>
+                      ))}
+                    </div>
+                    );
+                  })()}
+                </div>
+            )}
+          </div>
+
+          {/* spacer */}
+          <div className="chat-input-toolbar-spacer" style={{ flex: 1 }} />
+
+          {/* RIGHT: thinking + tools preset + compact + sound (idle) | Stop + sound (streaming) */}
+          <div className="chat-input-toolbar-right" style={{ flex: "0 0 auto", display: "flex", alignItems: "center", gap: 2, marginLeft: "auto" }}>
+            {!isStreaming && onThinkingLevelChange && (
+              <div ref={thinkingDropdownRef} style={{ position: "relative" }}>
+                <button
+                  onClick={() => !isStreaming && setThinkingDropdownOpen((v) => !v)}
+                  disabled={isStreaming}
+                  title="切换推理强度"
+                  style={{
+                    display: "flex", alignItems: "center", gap: 5,
+                    padding: "8px 12px",
+                    height: 32,
+                    background: thinkingDropdownOpen ? "var(--bg-hover)" : "none",
+                    border: "none",
+                    borderRadius: 9,
+                    color: "var(--text-muted)",
+                    cursor: isStreaming ? "not-allowed" : "pointer",
+                    fontSize: 12,
+                    opacity: isStreaming ? 0.5 : 1,
+                    transition: "background 0.12s, color 0.12s",
+                  }}
+                  onMouseEnter={(e) => {
+                    if (isStreaming) return;
+                    e.currentTarget.style.background = "var(--bg-hover)";
+                    e.currentTarget.style.color = "var(--text)";
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.background = thinkingDropdownOpen ? "var(--bg-hover)" : "none";
+                    e.currentTarget.style.color = "var(--text-muted)";
+                  }}
+                >
+                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <path d="M9.5 2A5.5 5.5 0 0 0 4 7.5c0 1.7.78 3.21 2 4.21V14a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1v-2.29c1.22-1 2-2.51 2-4.21A5.5 5.5 0 0 0 9.5 2z" />
+                    <line x1="7" y1="18" x2="12" y2="18" />
+                    <line x1="8" y1="21" x2="11" y2="21" />
+                  </svg>
+                  <span>{(() => {
+                    const lvl = thinkingLevel ?? "auto";
+                    if (lvl === "auto" || !thinkingLevelMap) return lvl;
+                    const mapped = thinkingLevelMap[lvl];
+                    return mapped != null ? mapped : lvl;
+                  })()}</span>
+                </button>
+                {thinkingDropdownOpen && (
+                  <div style={{
+                    position: "absolute", bottom: "calc(100% + 6px)", right: 0,
+                    zIndex: 100, background: "var(--bg)", border: "1px solid var(--border)",
+                    borderRadius: 8, boxShadow: "0 -4px 16px rgba(0,0,0,0.10)",
+                    overflow: "hidden", minWidth: 180,
+                  }}>
+                    {THINKING_LEVELS.filter((lvl) => {
+                      if (!availableThinkingLevels) return true;
+                      if (lvl === "auto") return true;
+                      return availableThinkingLevels.includes(lvl);
+                    }).map((lvl) => {
+                      const isActive = (thinkingLevel ?? "auto") === lvl;
+                      const desc = THINKING_LEVEL_DESC[lvl];
+                      const mappedVal = (lvl !== "auto" && thinkingLevelMap) ? thinkingLevelMap[lvl] : undefined;
+                      const displayLabel = (mappedVal != null && mappedVal !== lvl) ? mappedVal : lvl;
+                      const showOriginal = mappedVal != null && mappedVal !== lvl;
+                      return (
+                        <button
+                          key={lvl}
+                          onClick={() => { setThinkingDropdownOpen(false); if (!isActive) onThinkingLevelChange(lvl); }}
+                          style={{
+                            display: "flex", alignItems: "center", gap: 8,
+                            width: "100%", padding: "7px 12px",
+                            background: isActive ? "var(--bg-selected)" : "none",
+                            border: "none",
+                            color: isActive ? "var(--text)" : "var(--text-muted)",
+                            cursor: "pointer", fontSize: 12, textAlign: "left",
+                            fontWeight: isActive ? 600 : 400,
+                            whiteSpace: "nowrap",
+                          }}
+                          onMouseEnter={(e) => { if (!isActive) e.currentTarget.style.background = "var(--bg-hover)"; }}
+                          onMouseLeave={(e) => { if (!isActive) e.currentTarget.style.background = "none"; }}
+                        >
+                          {isActive
+                            ? <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}><polyline points="1.5 5 4 7.5 8.5 2.5" /></svg>
+                            : <span style={{ width: 10, flexShrink: 0 }} />}
+                          <span style={{ flex: 1 }}>
+                            {displayLabel}
+                            {showOriginal && <span style={{ fontSize: 10, color: "var(--text-dim)", fontFamily: "var(--font-mono)", marginLeft: 5 }}>({lvl})</span>}
+                          </span>
+                          <span style={{ fontSize: 11, color: "var(--text-dim)", marginLeft: 8 }}>{desc}</span>
+                        </button>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
+            )}
+            {!isStreaming && onToolPresetChange && (
+              <div ref={toolDropdownRef} style={{ position: "relative" }}>
+                <button
+                  onClick={() => !isStreaming && setToolDropdownOpen((v) => !v)}
+                  disabled={isStreaming}
+                  title="切换工具预设"
+                  style={{
+                    display: "flex", alignItems: "center", gap: 5,
+                    padding: "8px 12px",
+                    height: 32,
+                    background: toolDropdownOpen ? "var(--bg-hover)" : "none",
+                    border: "none",
+                    borderRadius: 9,
+                    color: "var(--text-muted)",
+                    cursor: isStreaming ? "not-allowed" : "pointer",
+                    fontSize: 12,
+                    opacity: isStreaming ? 0.5 : 1,
+                    transition: "background 0.12s, color 0.12s",
+                  }}
+                  onMouseEnter={(e) => {
+                    if (isStreaming) return;
+                    e.currentTarget.style.background = "var(--bg-hover)";
+                    e.currentTarget.style.color = "var(--text)";
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.background = toolDropdownOpen ? "var(--bg-hover)" : "none";
+                    e.currentTarget.style.color = "var(--text-muted)";
+                  }}
+                >
+                  <svg width="11" height="11" 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>
+                  <span>{Object.entries(TOOL_PRESET_MAP).find(([, v]) => v === (toolPreset ?? "full"))?.[0] ?? "full"}</span>
+                </button>
+                {toolDropdownOpen && (
+                  <div style={{
+                    position: "absolute", bottom: "calc(100% + 6px)", right: 0,
+                    zIndex: 100, background: "var(--bg)", border: "1px solid var(--border)",
+                    borderRadius: 8, boxShadow: "0 -4px 16px rgba(0,0,0,0.10)",
+                    overflow: "hidden", minWidth: 120,
+                  }}>
+                    {TOOL_PRESETS.map((lvl) => {
+                      const preset = TOOL_PRESET_MAP[lvl];
+                      const isActive = (toolPreset ?? "full") === preset;
+                      const desc = lvl === "off" ? "无工具，纯聊天" : lvl === "default" ? "4 项内置工具" : "全部内置工具";
+                      return (
+                        <button
+                          key={lvl}
+                          onClick={() => { setToolDropdownOpen(false); if (!isActive) onToolPresetChange(preset); }}
+                          style={{
+                            display: "flex", alignItems: "center", gap: 8,
+                            width: "100%", padding: "7px 12px",
+                            background: isActive ? "var(--bg-selected)" : "none",
+                            border: "none",
+                            color: isActive ? "var(--text)" : "var(--text-muted)",
+                            cursor: "pointer", fontSize: 12, textAlign: "left",
+                            fontWeight: isActive ? 600 : 400,
+                            whiteSpace: "nowrap",
+                          }}
+                          onMouseEnter={(e) => { if (!isActive) e.currentTarget.style.background = "var(--bg-hover)"; }}
+                          onMouseLeave={(e) => { if (!isActive) e.currentTarget.style.background = "none"; }}
+                        >
+                          {isActive
+                            ? <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}><polyline points="1.5 5 4 7.5 8.5 2.5" /></svg>
+                            : <span style={{ width: 10, flexShrink: 0 }} />}
+                          <span style={{ flex: 1 }}>{lvl}</span>
+                          <span style={{ fontSize: 11, color: "var(--text-dim)", marginLeft: 8 }}>{desc}</span>
+                        </button>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
+            )}
+
+            {!isStreaming && onCompact && (
+              <div style={{ position: "relative" }}>
+                {compactError && (
+                  <div style={{
+                    position: "absolute", bottom: "calc(100% + 6px)", right: 0,
+                    background: "#1f2937", color: "#f87171",
+                    fontSize: 11, padding: "4px 8px", borderRadius: 5,
+                    whiteSpace: "nowrap", pointerEvents: "none",
+                    boxShadow: "0 2px 8px rgba(0,0,0,0.2)", zIndex: 50,
+                  }}>
+                    {compactError}
+                  </div>
+                )}
+                <button
+                  onClick={isCompacting ? onAbortCompaction : onCompact}
+                  disabled={isStreaming && !isCompacting}
+                  style={{
+                    display: "flex", alignItems: "center", gap: 5,
+                    padding: "8px 12px",
+                    height: 32,
+                    background: isCompacting ? "rgba(239,68,68,0.08)" : "none",
+                    border: "none",
+                    borderRadius: 9,
+                    color: isCompacting ? "#ef4444" : "var(--text-muted)",
+                    cursor: (isStreaming && !isCompacting) ? "not-allowed" : "pointer",
+                    fontSize: 12, opacity: (isStreaming && !isCompacting) ? 0.5 : 1,
+                    transition: "background 0.12s, color 0.12s",
+                  }}
+                  onMouseEnter={(e) => {
+                    if (isStreaming && !isCompacting) return;
+                    e.currentTarget.style.background = isCompacting ? "rgba(239,68,68,0.16)" : "var(--bg-hover)";
+                    e.currentTarget.style.color = isCompacting ? "#ef4444" : "var(--text)";
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.background = isCompacting ? "rgba(239,68,68,0.08)" : "none";
+                    e.currentTarget.style.color = isCompacting ? "#ef4444" : "var(--text-muted)";
+                  }}
+                  title={isCompacting ? "停止压缩" : "压缩上下文"}
+                >
+                  {isCompacting ? (
+                    <><svg width="10" height="10" viewBox="0 0 10 10" fill="none"><rect x="2" y="2" width="6" height="6" rx="1" fill="currentColor" /></svg>Compacting…</>
+                  ) : (
+                    <><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                      <polyline points="4 14 10 14 10 20" /><polyline points="20 10 14 10 14 4" />
+                      <line x1="10" y1="14" x2="3" y2="21" /><line x1="21" y1="3" x2="14" y2="10" />
+                    </svg>Compact</>
+                  )}
+                </button>
+              </div>
+            )}
+
+            {isStreaming && (
+              <button
+                onClick={onAbort}
+                title="停止 Agent"
+                style={{
+                  display: "flex", alignItems: "center", gap: 6,
+                  padding: "8px 14px",
+                  height: 32,
+                  background: "rgba(239,68,68,0.08)",
+                  border: "1px solid rgba(239,68,68,0.3)",
+                  borderRadius: 9,
+                  color: "#ef4444",
+                  cursor: "pointer",
+                  fontSize: 12, fontWeight: 600,
+                  whiteSpace: "nowrap", letterSpacing: "-0.01em",
+                  transition: "background 0.12s",
+                }}
+                onMouseEnter={(e) => { e.currentTarget.style.background = "rgba(239,68,68,0.16)"; }}
+                onMouseLeave={(e) => { e.currentTarget.style.background = "rgba(239,68,68,0.08)"; }}
+              >
+                <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
+                  <rect x="1.5" y="1.5" width="7" height="7" rx="1.5" fill="currentColor" />
+                </svg>
+                Stop
+              </button>
+            )}
+
+            {onSoundToggle !== undefined && (
+              <button
+                onClick={onSoundToggle}
+                title={soundEnabled ? "关闭完成提示音" : "开启完成提示音"}
+                style={{
+                  display: "flex", alignItems: "center", justifyContent: "center",
+                  width: 32, height: 32, padding: 0,
+                  background: "none",
+                  border: "none",
+                  borderRadius: 9,
+                  color: soundEnabled ? "var(--text-muted)" : "var(--text-dim)",
+                  cursor: "pointer",
+                  opacity: soundEnabled ? 1 : 0.55,
+                  transition: "background 0.12s, color 0.12s, opacity 0.12s",
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.background = "var(--bg-hover)";
+                  e.currentTarget.style.color = "var(--text)";
+                  e.currentTarget.style.opacity = "1";
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.background = "none";
+                  e.currentTarget.style.color = soundEnabled ? "var(--text-muted)" : "var(--text-dim)";
+                  e.currentTarget.style.opacity = soundEnabled ? "1" : "0.55";
+                }}
+              >
+                {soundEnabled ? (
+                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
+                    <path d="M15.54 8.46a5 5 0 0 1 0 7.07" />
+                    <path d="M19.07 4.93a10 10 0 0 1 0 14.14" />
+                  </svg>
+                ) : (
+                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
+                    <line x1="23" y1="9" x2="17" y2="15" />
+                    <line x1="17" y1="9" x2="23" y2="15" />
+                  </svg>
+                )}
+              </button>
+            )}
+          </div>
+
+        </div>
+      </div>
+    </div>
+  );
+});