@copilotz/chat-ui 0.9.20 → 0.9.22

package/dist/index.cjs

@@ -4309,6 +4309,9 @@ var VoiceComposer = ({
 // src/components/chat/ChatInput.tsx
 var import_lucide_react12 = require("lucide-react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
+function createStagedSendId() {
+  return typeof crypto !== "undefined" && typeof crypto.randomUUID === "function" ? crypto.randomUUID() : `${Date.now()}_${Math.random().toString(36).slice(2)}`;
+}
 function getActiveMentionMatch(value, caret) {
   const prefix = value.slice(0, caret);
   const match = /(^|\s)@([\w.-]*)$/.exec(prefix);
@@ -4594,6 +4597,7 @@ var ChatInput = (0, import_react8.memo)(function ChatInput2({
   const [activeMention, setActiveMention] = (0, import_react8.useState)(null);
   const [activeMentionIndex, setActiveMentionIndex] = (0, import_react8.useState)(0);
   const [isDraggingFiles, setIsDraggingFiles] = (0, import_react8.useState)(false);
+  const [stagedSends, setStagedSends] = (0, import_react8.useState)([]);
   const textareaRef = (0, import_react8.useRef)(null);
   const fileInputRef = (0, import_react8.useRef)(null);
   const dragDepthRef = (0, import_react8.useRef)(0);
@@ -4686,18 +4690,48 @@ var ChatInput = (0, import_react8.memo)(function ChatInput2({
       textareaRef.current?.setSelectionRange(nextCaret, nextCaret);
     });
   }, [activeMention, draftValue, onTargetAgentChange, updateDraftValue]);
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    if (!draftValue.trim() && attachments.length === 0 || disabled || isGenerating) return;
-    const mentionedAgent = resolveTargetFromMentions(draftValue, mentionAgents);
-    if (mentionedAgent) {
-      onTargetAgentChange?.(mentionedAgent.id);
-    }
-    onSubmit(draftValue.trim(), attachments);
+  const clearComposer = (0, import_react8.useCallback)(() => {
     updateDraftValue("");
     onAttachmentsChange([]);
     setActiveMention(null);
     setActiveMentionIndex(0);
+  }, [onAttachmentsChange, updateDraftValue]);
+  const submitResolvedMessage = (0, import_react8.useCallback)((content, messageAttachments) => {
+    const mentionedAgent = resolveTargetFromMentions(content, mentionAgents);
+    if (mentionedAgent) {
+      onTargetAgentChange?.(mentionedAgent.id);
+    }
+    onSubmit(content.trim(), messageAttachments);
+  }, [mentionAgents, onSubmit, onTargetAgentChange]);
+  const stageCurrentDraft = (0, import_react8.useCallback)(() => {
+    const content = draftValue.trim();
+    if (!content && attachments.length === 0) return;
+    setStagedSends((prev) => [
+      ...prev,
+      {
+        id: createStagedSendId(),
+        content,
+        attachments: [...attachments]
+      }
+    ]);
+    clearComposer();
+  }, [attachments, clearComposer, draftValue]);
+  const sendStagedMessage = (0, import_react8.useCallback)((staged) => {
+    setStagedSends((prev) => prev.filter((item) => item.id !== staged.id));
+    submitResolvedMessage(staged.content, staged.attachments);
+  }, [submitResolvedMessage]);
+  const removeStagedMessage = (0, import_react8.useCallback)((id) => {
+    setStagedSends((prev) => prev.filter((item) => item.id !== id));
+  }, []);
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!draftValue.trim() && attachments.length === 0 || disabled) return;
+    if (isGenerating) {
+      stageCurrentDraft();
+      return;
+    }
+    submitResolvedMessage(draftValue.trim(), attachments);
+    clearComposer();
   };
   const handleKeyDown = (e) => {
     if (isMentionMenuOpen) {
@@ -5221,6 +5255,50 @@ var ChatInput = (0, import_react8.memo)(function ChatInput2({
               { remaining: Math.max(0, maxAttachments - attachments.length) }
             ) })
           ] }) }),
+          stagedSends.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex flex-col gap-1.5", children: stagedSends.map((staged) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+            "div",
+            {
+              className: "flex min-h-10 items-center gap-2 rounded-2xl border border-border/80 bg-muted/45 px-2.5 py-1.5",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "truncate text-sm text-foreground", children: staged.content || staged.attachments[0]?.fileName || config?.labels?.attachmentsCount || "Attachment" }),
+                  staged.attachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "text-xs text-muted-foreground", children: formatLabel(
+                    config?.labels?.attachmentsCount,
+                    "{{count}}/{{max}} attachments",
+                    { count: staged.attachments.length, max: maxAttachments }
+                  ) })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Tooltip, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                    Button,
+                    {
+                      type: "button",
+                      size: "icon",
+                      className: "h-8 w-8 rounded-full",
+                      onClick: () => sendStagedMessage(staged),
+                      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.Send, { className: "h-4 w-4" })
+                    }
+                  ) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipContent, { children: config?.labels?.sendMessageTooltip })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Tooltip, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                    Button,
+                    {
+                      type: "button",
+                      variant: "ghost",
+                      size: "icon",
+                      className: "h-8 w-8 rounded-full text-muted-foreground hover:text-foreground",
+                      onClick: () => removeStagedMessage(staged.id),
+                      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.X, { className: "h-4 w-4" })
+                    }
+                  ) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipContent, { children: config?.labels?.voiceCancel })
+                ] })
+              ]
+            },
+            staged.id
+          )) }),
           /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "relative min-w-0", children: [
             /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
               Textarea,
@@ -5328,19 +5406,34 @@ var ChatInput = (0, import_react8.memo)(function ChatInput2({
                 ) }),
                 /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipContent, { children: config?.labels?.voiceEnter })
               ] }),
-              isGenerating ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Tooltip, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-                  Button,
-                  {
-                    type: "button",
-                    variant: "secondary",
-                    size: "icon",
-                    className: "h-9 w-9 rounded-full",
-                    onClick: onStopGeneration,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.Square, { className: "h-4 w-4" })
-                  }
-                ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipContent, { children: config?.labels?.stopGenerationTooltip })
+              isGenerating ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+                (draftValue.trim() || attachments.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Tooltip, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                    Button,
+                    {
+                      type: "submit",
+                      size: "icon",
+                      className: "h-9 w-9 rounded-full",
+                      disabled,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.Send, { className: "h-4 w-4" })
+                    }
+                  ) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipContent, { children: config?.labels?.sendMessageTooltip })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Tooltip, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                    Button,
+                    {
+                      type: "button",
+                      variant: "secondary",
+                      size: "icon",
+                      className: "h-9 w-9 rounded-full",
+                      onClick: onStopGeneration,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.Square, { className: "h-4 w-4" })
+                    }
+                  ) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipContent, { children: config?.labels?.stopGenerationTooltip })
+                ] })
               ] }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Tooltip, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                   Button,