@copilotz/chat-ui 0.9.20 → 0.9.22

package/dist/index.js

@@ -4328,6 +4328,9 @@ import {
   UploadCloud
 } from "lucide-react";
 import { Fragment as Fragment6, jsx as jsx25, jsxs as jsxs15 } from "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);
@@ -4613,6 +4616,7 @@ var ChatInput = memo4(function ChatInput2({
   const [activeMention, setActiveMention] = useState7(null);
   const [activeMentionIndex, setActiveMentionIndex] = useState7(0);
   const [isDraggingFiles, setIsDraggingFiles] = useState7(false);
+  const [stagedSends, setStagedSends] = useState7([]);
   const textareaRef = useRef5(null);
   const fileInputRef = useRef5(null);
   const dragDepthRef = useRef5(0);
@@ -4705,18 +4709,48 @@ var ChatInput = memo4(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 = useCallback3(() => {
     updateDraftValue("");
     onAttachmentsChange([]);
     setActiveMention(null);
     setActiveMentionIndex(0);
+  }, [onAttachmentsChange, updateDraftValue]);
+  const submitResolvedMessage = useCallback3((content, messageAttachments) => {
+    const mentionedAgent = resolveTargetFromMentions(content, mentionAgents);
+    if (mentionedAgent) {
+      onTargetAgentChange?.(mentionedAgent.id);
+    }
+    onSubmit(content.trim(), messageAttachments);
+  }, [mentionAgents, onSubmit, onTargetAgentChange]);
+  const stageCurrentDraft = useCallback3(() => {
+    const content = draftValue.trim();
+    if (!content && attachments.length === 0) return;
+    setStagedSends((prev) => [
+      ...prev,
+      {
+        id: createStagedSendId(),
+        content,
+        attachments: [...attachments]
+      }
+    ]);
+    clearComposer();
+  }, [attachments, clearComposer, draftValue]);
+  const sendStagedMessage = useCallback3((staged) => {
+    setStagedSends((prev) => prev.filter((item) => item.id !== staged.id));
+    submitResolvedMessage(staged.content, staged.attachments);
+  }, [submitResolvedMessage]);
+  const removeStagedMessage = useCallback3((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) {
@@ -5240,6 +5274,50 @@ var ChatInput = memo4(function ChatInput2({
               { remaining: Math.max(0, maxAttachments - attachments.length) }
             ) })
           ] }) }),
+          stagedSends.length > 0 && /* @__PURE__ */ jsx25("div", { className: "flex flex-col gap-1.5", children: stagedSends.map((staged) => /* @__PURE__ */ jsxs15(
+            "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__ */ jsxs15("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsx25("div", { className: "truncate text-sm text-foreground", children: staged.content || staged.attachments[0]?.fileName || config?.labels?.attachmentsCount || "Attachment" }),
+                  staged.attachments.length > 0 && /* @__PURE__ */ jsx25("div", { className: "text-xs text-muted-foreground", children: formatLabel(
+                    config?.labels?.attachmentsCount,
+                    "{{count}}/{{max}} attachments",
+                    { count: staged.attachments.length, max: maxAttachments }
+                  ) })
+                ] }),
+                /* @__PURE__ */ jsxs15(Tooltip, { children: [
+                  /* @__PURE__ */ jsx25(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx25(
+                    Button,
+                    {
+                      type: "button",
+                      size: "icon",
+                      className: "h-8 w-8 rounded-full",
+                      onClick: () => sendStagedMessage(staged),
+                      children: /* @__PURE__ */ jsx25(Send2, { className: "h-4 w-4" })
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx25(TooltipContent, { children: config?.labels?.sendMessageTooltip })
+                ] }),
+                /* @__PURE__ */ jsxs15(Tooltip, { children: [
+                  /* @__PURE__ */ jsx25(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx25(
+                    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__ */ jsx25(X5, { className: "h-4 w-4" })
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx25(TooltipContent, { children: config?.labels?.voiceCancel })
+                ] })
+              ]
+            },
+            staged.id
+          )) }),
           /* @__PURE__ */ jsxs15("div", { className: "relative min-w-0", children: [
             /* @__PURE__ */ jsx25(
               Textarea,
@@ -5347,19 +5425,34 @@ var ChatInput = memo4(function ChatInput2({
                 ) }),
                 /* @__PURE__ */ jsx25(TooltipContent, { children: config?.labels?.voiceEnter })
               ] }),
-              isGenerating ? /* @__PURE__ */ jsxs15(Tooltip, { children: [
-                /* @__PURE__ */ jsx25(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx25(
-                  Button,
-                  {
-                    type: "button",
-                    variant: "secondary",
-                    size: "icon",
-                    className: "h-9 w-9 rounded-full",
-                    onClick: onStopGeneration,
-                    children: /* @__PURE__ */ jsx25(Square2, { className: "h-4 w-4" })
-                  }
-                ) }),
-                /* @__PURE__ */ jsx25(TooltipContent, { children: config?.labels?.stopGenerationTooltip })
+              isGenerating ? /* @__PURE__ */ jsxs15(Fragment6, { children: [
+                (draftValue.trim() || attachments.length > 0) && /* @__PURE__ */ jsxs15(Tooltip, { children: [
+                  /* @__PURE__ */ jsx25(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx25(
+                    Button,
+                    {
+                      type: "submit",
+                      size: "icon",
+                      className: "h-9 w-9 rounded-full",
+                      disabled,
+                      children: /* @__PURE__ */ jsx25(Send2, { className: "h-4 w-4" })
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx25(TooltipContent, { children: config?.labels?.sendMessageTooltip })
+                ] }),
+                /* @__PURE__ */ jsxs15(Tooltip, { children: [
+                  /* @__PURE__ */ jsx25(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx25(
+                    Button,
+                    {
+                      type: "button",
+                      variant: "secondary",
+                      size: "icon",
+                      className: "h-9 w-9 rounded-full",
+                      onClick: onStopGeneration,
+                      children: /* @__PURE__ */ jsx25(Square2, { className: "h-4 w-4" })
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx25(TooltipContent, { children: config?.labels?.stopGenerationTooltip })
+                ] })
               ] }) : /* @__PURE__ */ jsxs15(Tooltip, { children: [
                 /* @__PURE__ */ jsx25(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx25(
                   Button,