gigaclaw 1.4.0

package/lib/chat/components/chat-header.js

@@ -0,0 +1,192 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback, useRef } from "react";
+import { SidebarTrigger } from "./ui/sidebar.js";
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent } from "./ui/dropdown-menu.js";
+import { ConfirmDialog } from "./ui/confirm-dialog.js";
+import { RenameDialog } from "./ui/rename-dialog.jsx";
+import { ChevronDownIcon, StarIcon, StarFilledIcon, PencilIcon, TrashIcon, ExportIcon } from "./icons.js";
+import { getChatMeta, getChatMetaByWorkspace, renameChat, deleteChat, starChat, exportChat } from "../actions.js";
+import { useChatNav } from "./chat-nav-context.js";
+function ChatHeader({ chatId: chatIdProp, workspaceId }) {
+  const [title, setTitle] = useState(null);
+  const [starred, setStarred] = useState(0);
+  const [resolvedChatId, setResolvedChatId] = useState(chatIdProp || null);
+  const [isEditing, setIsEditing] = useState(false);
+  const [editValue, setEditValue] = useState("");
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [showRenameDialog, setShowRenameDialog] = useState(false);
+  const [isExporting, setIsExporting] = useState(false);
+  const inputRef = useRef(null);
+  const nav = useChatNav();
+  const chatId = resolvedChatId;
+  const showControls = chatId && title && title !== "New Chat";
+  const fetchMeta = useCallback(() => {
+    if (workspaceId) {
+      getChatMetaByWorkspace(workspaceId).then((meta) => {
+        if (meta?.title && meta.title !== "New Chat") {
+          setTitle(meta.title);
+          setStarred(meta.starred || 0);
+          setResolvedChatId(meta.chatId);
+        }
+      }).catch(() => {
+      });
+      return;
+    }
+    if (!chatIdProp) return;
+    getChatMeta(chatIdProp).then((meta) => {
+      if (meta?.title && meta.title !== "New Chat") {
+        setTitle(meta.title);
+        setStarred(meta.starred || 0);
+      }
+    }).catch(() => {
+    });
+  }, [chatIdProp, workspaceId]);
+  useEffect(() => {
+    fetchMeta();
+    const handler = () => fetchMeta();
+    window.addEventListener("chatsupdated", handler);
+    return () => window.removeEventListener("chatsupdated", handler);
+  }, [fetchMeta]);
+  useEffect(() => {
+    if (isEditing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [isEditing]);
+  const enterEditMode = () => {
+    setEditValue(title || "");
+    setIsEditing(true);
+  };
+  const saveEdit = async () => {
+    setIsEditing(false);
+    const trimmed = editValue.trim();
+    if (!trimmed || trimmed === title) return;
+    setTitle(trimmed);
+    await renameChat(chatId, trimmed);
+    window.dispatchEvent(new Event("chatsupdated"));
+  };
+  const cancelEdit = () => {
+    setIsEditing(false);
+  };
+  const handleRenameFromDialog = async (newTitle) => {
+    setTitle(newTitle);
+    await renameChat(chatId, newTitle);
+    window.dispatchEvent(new Event("chatsupdated"));
+  };
+  const handleStar = async () => {
+    const newStarred = starred ? 0 : 1;
+    setStarred(newStarred);
+    await starChat(chatId);
+    window.dispatchEvent(new Event("chatsupdated"));
+  };
+  const handleExport = async (format) => {
+    if (!chatId || isExporting) return;
+    setIsExporting(true);
+    try {
+      const { filename, content, mimeType } = await exportChat(chatId, format);
+      const blob = new Blob([content], { type: mimeType });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    } catch (err) {
+      console.error("Export failed:", err);
+    } finally {
+      setIsExporting(false);
+    }
+  };
+  const handleDelete = async () => {
+    setShowDeleteConfirm(false);
+    await deleteChat(chatId);
+    window.dispatchEvent(new Event("chatsupdated"));
+    nav?.navigateToChat?.(null);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("header", { className: "sticky top-0 flex items-center gap-2 bg-background px-2 py-1.5 md:px-2 z-10", children: [
+      /* @__PURE__ */ jsx("div", { className: "md:hidden", children: /* @__PURE__ */ jsx(SidebarTrigger, {}) }),
+      isEditing ? /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "text",
+          value: editValue,
+          onChange: (e) => setEditValue(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Enter") saveEdit();
+            if (e.key === "Escape") cancelEdit();
+          },
+          onBlur: saveEdit,
+          className: "text-base font-medium text-foreground bg-background rounded-md border border-ring px-2 py-0.5 outline-none ring-2 ring-ring/30"
+        }
+      ) : showControls ? /* @__PURE__ */ jsxs("div", { className: "group/title flex items-center gap-0.5 rounded-md px-1.5 py-0.5 hover:bg-muted transition-colors", children: [
+        /* @__PURE__ */ jsx(
+          "h1",
+          {
+            className: "text-base font-medium text-muted-foreground truncate cursor-pointer",
+            onClick: enterEditMode,
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { className: "flex items-center justify-center h-6 w-6 rounded text-muted-foreground shrink-0", "aria-label": "Chat options", children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: 14 }) }) }),
+          /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", children: [
+            /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: handleStar, children: [
+              starred ? /* @__PURE__ */ jsx(StarFilledIcon, { size: 14 }) : /* @__PURE__ */ jsx(StarIcon, { size: 14 }),
+              /* @__PURE__ */ jsx("span", { children: starred ? "Unstar" : "Star" })
+            ] }),
+            /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => setShowRenameDialog(true), children: [
+              /* @__PURE__ */ jsx(PencilIcon, { size: 14 }),
+              /* @__PURE__ */ jsx("span", { children: "Rename" })
+            ] }),
+            /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+            /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [
+              /* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { children: [
+                /* @__PURE__ */ jsx(ExportIcon, { size: 14 }),
+                /* @__PURE__ */ jsx("span", { children: isExporting ? "Exporting\u2026" : "Export" })
+              ] }),
+              /* @__PURE__ */ jsxs(DropdownMenuSubContent, { children: [
+                /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: () => handleExport("md"), children: /* @__PURE__ */ jsx("span", { children: "Markdown (.md)" }) }),
+                /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: () => handleExport("txt"), children: /* @__PURE__ */ jsx("span", { children: "Plain Text (.txt)" }) }),
+                /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: () => handleExport("json"), children: /* @__PURE__ */ jsx("span", { children: "JSON (.json)" }) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+            /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => setShowDeleteConfirm(true), children: [
+              /* @__PURE__ */ jsx(TrashIcon, { size: 14 }),
+              /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "Delete" })
+            ] })
+          ] })
+        ] })
+      ] }) : /* @__PURE__ */ jsx("h1", { className: "text-base font-medium text-muted-foreground truncate", children: title || "\xA0" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      RenameDialog,
+      {
+        open: showRenameDialog,
+        onSave: handleRenameFromDialog,
+        onCancel: () => setShowRenameDialog(false),
+        title: "Rename chat",
+        currentValue: title || ""
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ConfirmDialog,
+      {
+        open: showDeleteConfirm,
+        onConfirm: handleDelete,
+        onCancel: () => setShowDeleteConfirm(false),
+        title: "Delete chat?",
+        description: "This will permanently delete this chat and all its messages.",
+        confirmLabel: "Delete"
+      }
+    )
+  ] });
+}
+export {
+  ChatHeader
+};

package/lib/chat/components/chat-header.jsx

@@ -0,0 +1,223 @@
+'use client';
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { SidebarTrigger } from './ui/sidebar.js';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent } from './ui/dropdown-menu.js';
+import { ConfirmDialog } from './ui/confirm-dialog.js';
+import { RenameDialog } from './ui/rename-dialog.jsx';
+import { ChevronDownIcon, StarIcon, StarFilledIcon, PencilIcon, TrashIcon, ExportIcon } from './icons.js';
+import { getChatMeta, getChatMetaByWorkspace, renameChat, deleteChat, starChat, exportChat } from '../actions.js';
+import { useChatNav } from './chat-nav-context.js';
+
+export function ChatHeader({ chatId: chatIdProp, workspaceId }) {
+  const [title, setTitle] = useState(null);
+  const [starred, setStarred] = useState(0);
+  const [resolvedChatId, setResolvedChatId] = useState(chatIdProp || null);
+  const [isEditing, setIsEditing] = useState(false);
+  const [editValue, setEditValue] = useState('');
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [showRenameDialog, setShowRenameDialog] = useState(false);
+  const [isExporting, setIsExporting] = useState(false);
+  const inputRef = useRef(null);
+  const nav = useChatNav();
+
+  // The actual chatId to use for actions (either passed directly or resolved from workspace)
+  const chatId = resolvedChatId;
+
+  // Whether to show the dropdown and inline-edit features
+  const showControls = chatId && title && title !== 'New Chat';
+
+  const fetchMeta = useCallback(() => {
+    if (workspaceId) {
+      getChatMetaByWorkspace(workspaceId)
+        .then((meta) => {
+          if (meta?.title && meta.title !== 'New Chat') {
+            setTitle(meta.title);
+            setStarred(meta.starred || 0);
+            setResolvedChatId(meta.chatId);
+          }
+        })
+        .catch(() => {});
+      return;
+    }
+    if (!chatIdProp) return;
+    getChatMeta(chatIdProp)
+      .then((meta) => {
+        if (meta?.title && meta.title !== 'New Chat') {
+          setTitle(meta.title);
+          setStarred(meta.starred || 0);
+        }
+      })
+      .catch(() => {});
+  }, [chatIdProp, workspaceId]);
+
+  useEffect(() => {
+    fetchMeta();
+    const handler = () => fetchMeta();
+    window.addEventListener('chatsupdated', handler);
+    return () => window.removeEventListener('chatsupdated', handler);
+  }, [fetchMeta]);
+
+  // Auto-focus and select all when entering inline edit mode
+  useEffect(() => {
+    if (isEditing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [isEditing]);
+
+  const enterEditMode = () => {
+    setEditValue(title || '');
+    setIsEditing(true);
+  };
+
+  const saveEdit = async () => {
+    setIsEditing(false);
+    const trimmed = editValue.trim();
+    if (!trimmed || trimmed === title) return;
+    setTitle(trimmed);
+    await renameChat(chatId, trimmed);
+    window.dispatchEvent(new Event('chatsupdated'));
+  };
+
+  const cancelEdit = () => {
+    setIsEditing(false);
+  };
+
+  const handleRenameFromDialog = async (newTitle) => {
+    setTitle(newTitle);
+    await renameChat(chatId, newTitle);
+    window.dispatchEvent(new Event('chatsupdated'));
+  };
+
+  const handleStar = async () => {
+    const newStarred = starred ? 0 : 1;
+    setStarred(newStarred);
+    await starChat(chatId);
+    window.dispatchEvent(new Event('chatsupdated'));
+  };
+
+  const handleExport = async (format) => {
+    if (!chatId || isExporting) return;
+    setIsExporting(true);
+    try {
+      const { filename, content, mimeType } = await exportChat(chatId, format);
+      const blob = new Blob([content], { type: mimeType });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    } catch (err) {
+      console.error('Export failed:', err);
+    } finally {
+      setIsExporting(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    setShowDeleteConfirm(false);
+    await deleteChat(chatId);
+    window.dispatchEvent(new Event('chatsupdated'));
+    nav?.navigateToChat?.(null);
+  };
+
+  return (
+    <>
+      <header className="sticky top-0 flex items-center gap-2 bg-background px-2 py-1.5 md:px-2 z-10">
+        {/* Mobile-only: open sidebar sheet */}
+        <div className="md:hidden">
+          <SidebarTrigger />
+        </div>
+
+        {isEditing ? (
+          <input
+            ref={inputRef}
+            type="text"
+            value={editValue}
+            onChange={(e) => setEditValue(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') saveEdit();
+              if (e.key === 'Escape') cancelEdit();
+            }}
+            onBlur={saveEdit}
+            className="text-base font-medium text-foreground bg-background rounded-md border border-ring px-2 py-0.5 outline-none ring-2 ring-ring/30"
+          />
+        ) : showControls ? (
+          <div className="group/title flex items-center gap-0.5 rounded-md px-1.5 py-0.5 hover:bg-muted transition-colors">
+            <h1
+              className="text-base font-medium text-muted-foreground truncate cursor-pointer"
+              onClick={enterEditMode}
+            >
+              {title}
+            </h1>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <button className="flex items-center justify-center h-6 w-6 rounded text-muted-foreground shrink-0" aria-label="Chat options">
+                  <ChevronDownIcon size={14} />
+                </button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start">
+                <DropdownMenuItem onClick={handleStar}>
+                  {starred ? <StarFilledIcon size={14} /> : <StarIcon size={14} />}
+                  <span>{starred ? 'Unstar' : 'Star'}</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => setShowRenameDialog(true)}>
+                  <PencilIcon size={14} />
+                  <span>Rename</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuSub>
+                  <DropdownMenuSubTrigger>
+                    <ExportIcon size={14} />
+                    <span>{isExporting ? 'Exporting…' : 'Export'}</span>
+                  </DropdownMenuSubTrigger>
+                  <DropdownMenuSubContent>
+                    <DropdownMenuItem onClick={() => handleExport('md')}>
+                      <span>Markdown (.md)</span>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem onClick={() => handleExport('txt')}>
+                      <span>Plain Text (.txt)</span>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem onClick={() => handleExport('json')}>
+                      <span>JSON (.json)</span>
+                    </DropdownMenuItem>
+                  </DropdownMenuSubContent>
+                </DropdownMenuSub>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem onClick={() => setShowDeleteConfirm(true)}>
+                  <TrashIcon size={14} />
+                  <span className="text-destructive">Delete</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        ) : (
+          <h1 className="text-base font-medium text-muted-foreground truncate">
+            {title || '\u00A0'}
+          </h1>
+        )}
+      </header>
+
+      <RenameDialog
+        open={showRenameDialog}
+        onSave={handleRenameFromDialog}
+        onCancel={() => setShowRenameDialog(false)}
+        title="Rename chat"
+        currentValue={title || ''}
+      />
+
+      <ConfirmDialog
+        open={showDeleteConfirm}
+        onConfirm={handleDelete}
+        onCancel={() => setShowDeleteConfirm(false)}
+        title="Delete chat?"
+        description="This will permanently delete this chat and all its messages."
+        confirmLabel="Delete"
+      />
+    </>
+  );
+}

package/lib/chat/components/chat-input.js

@@ -0,0 +1,236 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useEffect, useCallback, useState } from "react";
+import { SendIcon, StopIcon, PaperclipIcon, XIcon, FileTextIcon } from "./icons.js";
+import { cn } from "../utils.js";
+const ACCEPTED_TYPES = [
+  "image/jpeg",
+  "image/png",
+  "image/gif",
+  "image/webp",
+  "application/pdf",
+  "text/plain",
+  "text/markdown",
+  "text/csv",
+  "text/html",
+  "text/css",
+  "text/javascript",
+  "text/x-python",
+  "text/x-typescript",
+  "application/json"
+];
+const MAX_FILES = 5;
+function isAcceptedType(file) {
+  if (ACCEPTED_TYPES.includes(file.type)) return true;
+  const ext = file.name?.split(".").pop()?.toLowerCase();
+  const textExts = ["txt", "md", "csv", "json", "js", "ts", "jsx", "tsx", "py", "html", "css", "yml", "yaml", "xml", "sh", "bash", "rb", "go", "rs", "java", "c", "cpp", "h", "hpp"];
+  return textExts.includes(ext);
+}
+function getEffectiveType(file) {
+  if (ACCEPTED_TYPES.includes(file.type) && file.type !== "") return file.type;
+  const ext = file.name?.split(".").pop()?.toLowerCase();
+  const extMap = {
+    txt: "text/plain",
+    md: "text/markdown",
+    csv: "text/csv",
+    json: "application/json",
+    js: "text/javascript",
+    ts: "text/x-typescript",
+    jsx: "text/javascript",
+    tsx: "text/x-typescript",
+    py: "text/x-python",
+    html: "text/html",
+    css: "text/css",
+    yml: "text/plain",
+    yaml: "text/plain",
+    xml: "text/plain",
+    sh: "text/plain",
+    bash: "text/plain",
+    rb: "text/plain",
+    go: "text/plain",
+    rs: "text/plain",
+    java: "text/plain",
+    c: "text/plain",
+    cpp: "text/plain",
+    h: "text/plain",
+    hpp: "text/plain"
+  };
+  return extMap[ext] || file.type || "text/plain";
+}
+function ChatInput({ input, setInput, onSubmit, status, stop, files, setFiles, disabled = false, placeholder = "Send a message...", canSendOverride }) {
+  const textareaRef = useRef(null);
+  const fileInputRef = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const isStreaming = status === "streaming" || status === "submitted";
+  const adjustHeight = useCallback(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    textarea.style.height = "auto";
+    textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
+  }, []);
+  useEffect(() => {
+    adjustHeight();
+  }, [input, adjustHeight]);
+  useEffect(() => {
+    textareaRef.current?.focus();
+  }, []);
+  const handleFiles = useCallback((fileList) => {
+    const newFiles = Array.from(fileList).filter(isAcceptedType);
+    if (newFiles.length === 0) return;
+    newFiles.forEach((file) => {
+      const reader = new FileReader();
+      reader.onload = () => {
+        setFiles((current) => {
+          if (current.length >= MAX_FILES) return current;
+          return [...current, { file, previewUrl: reader.result }];
+        });
+      };
+      reader.readAsDataURL(file);
+    });
+  }, [setFiles]);
+  const removeFile = (index) => {
+    setFiles((prev) => prev.filter((_, i) => i !== index));
+  };
+  const handleSubmit = (e) => {
+    if (e) e.preventDefault();
+    if (disabled || !input.trim() && files.length === 0 || isStreaming) return;
+    if (canSendOverride !== void 0 && !canSendOverride) return;
+    onSubmit();
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    setIsDragging(true);
+  };
+  const handleDragLeave = (e) => {
+    e.preventDefault();
+    setIsDragging(false);
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    setIsDragging(false);
+    if (e.dataTransfer?.files?.length) {
+      handleFiles(e.dataTransfer.files);
+    }
+  };
+  const canSend = canSendOverride !== void 0 ? canSendOverride && (input.trim() || files.length > 0) : input.trim() || files.length > 0;
+  if (disabled && !isStreaming) {
+    return /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-4xl px-4 pb-4 md:px-6", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col rounded-xl border border-border bg-muted p-2", children: /* @__PURE__ */ jsx("div", { className: "flex items-center px-2 py-1.5", children: /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: placeholder }) }) }) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-4xl px-4 pb-4 md:px-6", children: /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, className: "relative", children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col rounded-xl border bg-muted p-2 transition-colors",
+        isDragging ? "border-primary bg-primary/5" : "border-border"
+      ),
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
+      children: [
+        files.length > 0 && /* @__PURE__ */ jsx("div", { className: "mb-2 flex gap-2 overflow-x-auto px-1 py-1", children: files.map((f, i) => {
+          const isImage = f.file.type.startsWith("image/");
+          return /* @__PURE__ */ jsxs("div", { className: "group relative flex-shrink-0", children: [
+            isImage ? /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: f.previewUrl,
+                alt: f.file.name,
+                className: "h-16 w-16 rounded-lg object-cover"
+              }
+            ) : /* @__PURE__ */ jsxs("div", { className: "flex h-16 items-center gap-1.5 rounded-lg bg-foreground/10 px-3", children: [
+              /* @__PURE__ */ jsx(FileTextIcon, { size: 14 }),
+              /* @__PURE__ */ jsx("span", { className: "max-w-[100px] truncate text-xs", children: f.file.name })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => removeFile(i),
+                className: "absolute -right-1.5 -top-1.5 hidden rounded-full bg-foreground p-0.5 text-background group-hover:flex items-center justify-center",
+                "aria-label": `Remove ${f.file.name}`,
+                children: /* @__PURE__ */ jsx(XIcon, { size: 10 })
+              }
+            )
+          ] }, i);
+        }) }),
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            ref: textareaRef,
+            value: input,
+            onChange: (e) => setInput(e.target.value),
+            onKeyDown: handleKeyDown,
+            placeholder,
+            rows: 1,
+            className: cn(
+              "w-full resize-none bg-transparent px-2 py-1.5 text-sm text-foreground",
+              "placeholder:text-muted-foreground focus:outline-none",
+              "max-h-[200px]"
+            ),
+            disabled: isStreaming
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => fileInputRef.current?.click(),
+                className: "inline-flex items-center justify-center rounded-lg p-2 text-muted-foreground hover:text-foreground",
+                "aria-label": "Attach files",
+                disabled: isStreaming,
+                children: /* @__PURE__ */ jsx(PaperclipIcon, { size: 16 })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: fileInputRef,
+                type: "file",
+                multiple: true,
+                accept: "image/*,application/pdf,text/*,application/json,.md,.csv,.json,.js,.ts,.jsx,.tsx,.py,.html,.css,.yml,.yaml,.xml,.sh,.rb,.go,.rs,.java,.c,.cpp,.h",
+                className: "hidden",
+                onChange: (e) => {
+                  if (e.target.files?.length) handleFiles(e.target.files);
+                  e.target.value = "";
+                }
+              }
+            )
+          ] }),
+          isStreaming ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: stop,
+              className: "inline-flex items-center justify-center rounded-lg bg-foreground p-2 text-background hover:opacity-80",
+              "aria-label": "Stop generating",
+              children: /* @__PURE__ */ jsx(StopIcon, { size: 16 })
+            }
+          ) : /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "submit",
+              disabled: !canSend,
+              className: cn(
+                "inline-flex items-center justify-center rounded-lg p-2",
+                canSend ? "bg-foreground text-background hover:opacity-80" : "bg-muted-foreground/20 text-muted-foreground cursor-not-allowed"
+              ),
+              "aria-label": "Send message",
+              children: /* @__PURE__ */ jsx(SendIcon, { size: 16 })
+            }
+          )
+        ] })
+      ]
+    }
+  ) }) });
+}
+export {
+  ChatInput
+};