@copilotz/chat-ui 0.9.22 → 0.9.24

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",
@@ -5266,7 +5270,8 @@ var ChatInput = (0, import_react8.memo)(function ChatInput2({
                     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)(
@@ -5279,7 +5284,7 @@ var ChatInput = (0, import_react8.memo)(function ChatInput2({
                       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.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)(
@@ -5293,7 +5298,7 @@ var ChatInput = (0, import_react8.memo)(function ChatInput2({
                       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 })
+                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipContent, { children: config?.labels?.discardStagedMessageTooltip || config?.labels?.voiceCancel })
                 ] })
               ]
             },
@@ -5418,7 +5423,7 @@ var ChatInput = (0, import_react8.memo)(function ChatInput2({
                       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.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)(
@@ -6017,6 +6022,8 @@ var ChatUI = ({
   isMessagesLoading = false,
   isLoadingOlderMessages = false,
   hasMoreMessagesBefore = false,
+  activityNotice = null,
+  isBackgroundRefreshingMessages = false,
   callbacks = {},
   onLoadOlderMessages,
   user,
@@ -6152,7 +6159,9 @@ var ChatUI = ({
       prevMessageCountRef.current = groupedMessages.length;
       return;
     }
-    const wasEmpty = prevMessageCountRef.current === 0;
+    const previousMessageCount = prevMessageCountRef.current;
+    const wasEmpty = previousMessageCount === 0;
+    const didAppendMessages = groupedMessages.length > previousMessageCount;
     prevMessageCountRef.current = groupedMessages.length;
     if (wasEmpty) {
       requestAnimationFrame(() => {
@@ -6164,6 +6173,9 @@ var ChatUI = ({
       });
       return;
     }
+    if (isBackgroundRefreshingMessages && !didAppendMessages) {
+      return;
+    }
     if (!state.isAtBottom) return;
     requestAnimationFrame(() => {
       const viewport = scrollAreaRef.current;
@@ -6174,7 +6186,7 @@ var ChatUI = ({
         viewport.scrollTop = viewport.scrollHeight;
       }
     });
-  }, [groupedMessages, state.isAtBottom, virtualizer]);
+  }, [groupedMessages, isBackgroundRefreshingMessages, state.isAtBottom, virtualizer]);
   (0, import_react10.useEffect)(() => {
     const viewport = scrollAreaRef.current;
     if (!viewport) return;
@@ -6665,41 +6677,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",