@copilotz/chat-ui 0.9.20 → 0.9.23

package/dist/index.cjs

@@ -64,6 +64,10 @@ var defaultChatConfig = {
     inputPlaceholder: "Type your message...",
     sendButton: "Send",
     sendMessageTooltip: "Send message",
+    stageMessageTooltip: "Stage message",
+    sendNowTooltip: "Send now",
+    stagedMessageLabel: "Not sent yet",
+    discardStagedMessageTooltip: "Discard",
     newThread: "New Conversation",
     deleteThread: "Delete Conversation",
     copyMessage: "Copy",
@@ -4309,6 +4313,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 +4601,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 +4694,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 +5259,51 @@ 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.jsx)("div", { className: "text-xs text-muted-foreground", children: config?.labels?.stagedMessageLabel || "Not sent yet" })
+                ] }),
+                /* @__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?.sendNowTooltip || 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?.discardStagedMessageTooltip || 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 +5411,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?.stageMessageTooltip || 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,
@@ -5924,6 +6022,7 @@ var ChatUI = ({
   isMessagesLoading = false,
   isLoadingOlderMessages = false,
   hasMoreMessagesBefore = false,
+  activityNotice = null,
   callbacks = {},
   onLoadOlderMessages,
   user,
@@ -6572,41 +6671,50 @@ var ChatUI = ({
                   ] })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "-mt-8 bg-gradient-to-t from-background via-background/95 to-transparent px-0 pb-[env(safe-area-inset-bottom)] pt-10", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                ChatInput,
-                {
-                  value: inputValue,
-                  onChange: (value) => {
-                    inputValueRef.current = value;
-                    if (initialInputApplied.current && !initialInputConsumedRef.current) {
-                      initialInputConsumedRef.current = true;
-                      onInitialInputConsumed?.();
-                    }
-                  },
-                  onSubmit: handleSendMessage,
-                  attachments,
-                  onAttachmentsChange: setAttachments,
-                  placeholder: config.labels.inputPlaceholder,
-                  disabled: false,
-                  isGenerating,
-                  onStopGeneration: callbacks.onStopGeneration,
-                  enableFileUpload: config.features.enableFileUpload,
-                  enableAudioRecording: config.features.enableAudioRecording,
-                  maxAttachments: config.features.maxAttachments,
-                  maxFileSize: config.features.maxFileSize,
-                  acceptedFileTypes: config.features.acceptedFileTypes,
-                  config,
-                  mentionAgents: participantIds && participantIds.length > 0 ? agentOptions.filter(
-                    (a) => participantIds.includes(a.id)
-                  ) : agentOptions,
-                  targetAgentId,
-                  showTargetAgentSelector: Boolean(
-                    isMultiAgentMode && shouldShowAgentSelector && onTargetAgentChange
-                  ),
-                  targetAgentSelectorPlaceholder: config.agentSelector?.label || "Select agent",
-                  onTargetAgentChange
-                }
-              ) })
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "-mt-8 bg-gradient-to-t from-background via-background/95 to-transparent px-0 pb-[env(safe-area-inset-bottom)] pt-10", children: [
+                activityNotice && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "mx-auto mb-2 w-full max-w-3xl px-3 md:px-2", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                  "div",
+                  {
+                    className: activityNotice.tone === "error" ? "rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive" : "rounded-md border border-border bg-muted/70 px-3 py-2 text-sm text-muted-foreground",
+                    children: activityNotice.message
+                  }
+                ) }),
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                  ChatInput,
+                  {
+                    value: inputValue,
+                    onChange: (value) => {
+                      inputValueRef.current = value;
+                      if (initialInputApplied.current && !initialInputConsumedRef.current) {
+                        initialInputConsumedRef.current = true;
+                        onInitialInputConsumed?.();
+                      }
+                    },
+                    onSubmit: handleSendMessage,
+                    attachments,
+                    onAttachmentsChange: setAttachments,
+                    placeholder: config.labels.inputPlaceholder,
+                    disabled: false,
+                    isGenerating,
+                    onStopGeneration: callbacks.onStopGeneration,
+                    enableFileUpload: config.features.enableFileUpload,
+                    enableAudioRecording: config.features.enableAudioRecording,
+                    maxAttachments: config.features.maxAttachments,
+                    maxFileSize: config.features.maxFileSize,
+                    acceptedFileTypes: config.features.acceptedFileTypes,
+                    config,
+                    mentionAgents: participantIds && participantIds.length > 0 ? agentOptions.filter(
+                      (a) => participantIds.includes(a.id)
+                    ) : agentOptions,
+                    targetAgentId,
+                    showTargetAgentSelector: Boolean(
+                      isMultiAgentMode && shouldShowAgentSelector && onTargetAgentChange
+                    ),
+                    targetAgentSelectorPlaceholder: config.agentSelector?.label || "Select agent",
+                    onTargetAgentChange
+                  }
+                )
+              ] })
             ] }),
             config?.customComponent?.component && !isMobile && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
               "div",