@copilotz/chat-ui 0.9.20 → 0.9.23

package/dist/index.d.cts

@@ -163,6 +163,10 @@ interface ChatConfig {
         inputPlaceholder?: string;
         sendButton?: string;
         sendMessageTooltip?: string;
+        stageMessageTooltip?: string;
+        sendNowTooltip?: string;
+        stagedMessageLabel?: string;
+        discardStagedMessageTooltip?: string;
         newThread?: string;
         deleteThread?: string;
         copyMessage?: string;
@@ -357,6 +361,10 @@ interface ChatCallbacks {
     onThemeChange?: (theme: "light" | "dark" | "system") => void;
     onLogout?: () => void;
 }
+interface ChatActivityNotice {
+    tone: "info" | "error";
+    message: string;
+}
 interface ChatV2Props {
     messages?: ChatMessage[];
     threads?: ChatThread[];
@@ -370,6 +378,7 @@ interface ChatV2Props {
     isMessagesLoading?: boolean;
     isLoadingOlderMessages?: boolean;
     hasMoreMessagesBefore?: boolean;
+    activityNotice?: ChatActivityNotice | null;
     callbacks?: ChatCallbacks;
     onLoadOlderMessages?: () => void;
     user?: {
@@ -519,4 +528,4 @@ declare function mergeConfig(_baseConfig: ChatConfig, userConfig?: Partial<ChatC
 declare const getAttachmentKindFromMimeType: (mimeType?: string | null) => MediaAttachmentKind;
 declare const getMimeTypeFromDataUrl: (dataUrl: string) => string | null;
 
-export { type AgentOption, AssistantActivity, type AssistantActivityBlock, type AssistantActivityItem, type AssistantActivityKind, type AssistantActivityStatus, type AudioAttachment, type ChatCallbacks, type ChatConfig, type ChatHeaderMenuItem, type ChatMarkdownConfig, type ChatMessage, type ChatSender, type ChatState, type ChatThread, type ChatThreadTag, ChatUI, type ChatUserContext, ChatUserContextProvider, type ChatUserMenuItem, type ChatUserMenuSection, type ChatV2Props, type CreateVoiceProvider, type FileUploadProgress, type MediaAttachment, type MediaAttachmentKind, type MemoryItem, type MessageAction, type MessageActionEvent, MessageSenderAvatar, type StateCallback, type StreamingUpdate, type ToolCall, type UserCustomField, type VoiceComposerState, type VoiceProvider, type VoiceProviderHandlers, type VoiceProviderOptions, type VoiceReviewMode, type VoiceSegment, type VoiceTranscript, type VoiceTranscriptMode, defaultChatConfig, getAttachmentKindFromMimeType, getMimeTypeFromDataUrl, mergeConfig, resolveMessageSenderDisplay, useChatUserContext };
+export { type AgentOption, AssistantActivity, type AssistantActivityBlock, type AssistantActivityItem, type AssistantActivityKind, type AssistantActivityStatus, type AudioAttachment, type ChatActivityNotice, type ChatCallbacks, type ChatConfig, type ChatHeaderMenuItem, type ChatMarkdownConfig, type ChatMessage, type ChatSender, type ChatState, type ChatThread, type ChatThreadTag, ChatUI, type ChatUserContext, ChatUserContextProvider, type ChatUserMenuItem, type ChatUserMenuSection, type ChatV2Props, type CreateVoiceProvider, type FileUploadProgress, type MediaAttachment, type MediaAttachmentKind, type MemoryItem, type MessageAction, type MessageActionEvent, MessageSenderAvatar, type StateCallback, type StreamingUpdate, type ToolCall, type UserCustomField, type VoiceComposerState, type VoiceProvider, type VoiceProviderHandlers, type VoiceProviderOptions, type VoiceReviewMode, type VoiceSegment, type VoiceTranscript, type VoiceTranscriptMode, defaultChatConfig, getAttachmentKindFromMimeType, getMimeTypeFromDataUrl, mergeConfig, resolveMessageSenderDisplay, useChatUserContext };

package/dist/index.d.ts

@@ -163,6 +163,10 @@ interface ChatConfig {
         inputPlaceholder?: string;
         sendButton?: string;
         sendMessageTooltip?: string;
+        stageMessageTooltip?: string;
+        sendNowTooltip?: string;
+        stagedMessageLabel?: string;
+        discardStagedMessageTooltip?: string;
         newThread?: string;
         deleteThread?: string;
         copyMessage?: string;
@@ -357,6 +361,10 @@ interface ChatCallbacks {
     onThemeChange?: (theme: "light" | "dark" | "system") => void;
     onLogout?: () => void;
 }
+interface ChatActivityNotice {
+    tone: "info" | "error";
+    message: string;
+}
 interface ChatV2Props {
     messages?: ChatMessage[];
     threads?: ChatThread[];
@@ -370,6 +378,7 @@ interface ChatV2Props {
     isMessagesLoading?: boolean;
     isLoadingOlderMessages?: boolean;
     hasMoreMessagesBefore?: boolean;
+    activityNotice?: ChatActivityNotice | null;
     callbacks?: ChatCallbacks;
     onLoadOlderMessages?: () => void;
     user?: {
@@ -519,4 +528,4 @@ declare function mergeConfig(_baseConfig: ChatConfig, userConfig?: Partial<ChatC
 declare const getAttachmentKindFromMimeType: (mimeType?: string | null) => MediaAttachmentKind;
 declare const getMimeTypeFromDataUrl: (dataUrl: string) => string | null;
 
-export { type AgentOption, AssistantActivity, type AssistantActivityBlock, type AssistantActivityItem, type AssistantActivityKind, type AssistantActivityStatus, type AudioAttachment, type ChatCallbacks, type ChatConfig, type ChatHeaderMenuItem, type ChatMarkdownConfig, type ChatMessage, type ChatSender, type ChatState, type ChatThread, type ChatThreadTag, ChatUI, type ChatUserContext, ChatUserContextProvider, type ChatUserMenuItem, type ChatUserMenuSection, type ChatV2Props, type CreateVoiceProvider, type FileUploadProgress, type MediaAttachment, type MediaAttachmentKind, type MemoryItem, type MessageAction, type MessageActionEvent, MessageSenderAvatar, type StateCallback, type StreamingUpdate, type ToolCall, type UserCustomField, type VoiceComposerState, type VoiceProvider, type VoiceProviderHandlers, type VoiceProviderOptions, type VoiceReviewMode, type VoiceSegment, type VoiceTranscript, type VoiceTranscriptMode, defaultChatConfig, getAttachmentKindFromMimeType, getMimeTypeFromDataUrl, mergeConfig, resolveMessageSenderDisplay, useChatUserContext };
+export { type AgentOption, AssistantActivity, type AssistantActivityBlock, type AssistantActivityItem, type AssistantActivityKind, type AssistantActivityStatus, type AudioAttachment, type ChatActivityNotice, type ChatCallbacks, type ChatConfig, type ChatHeaderMenuItem, type ChatMarkdownConfig, type ChatMessage, type ChatSender, type ChatState, type ChatThread, type ChatThreadTag, ChatUI, type ChatUserContext, ChatUserContextProvider, type ChatUserMenuItem, type ChatUserMenuSection, type ChatV2Props, type CreateVoiceProvider, type FileUploadProgress, type MediaAttachment, type MediaAttachmentKind, type MemoryItem, type MessageAction, type MessageActionEvent, MessageSenderAvatar, type StateCallback, type StreamingUpdate, type ToolCall, type UserCustomField, type VoiceComposerState, type VoiceProvider, type VoiceProviderHandlers, type VoiceProviderOptions, type VoiceReviewMode, type VoiceSegment, type VoiceTranscript, type VoiceTranscriptMode, defaultChatConfig, getAttachmentKindFromMimeType, getMimeTypeFromDataUrl, mergeConfig, resolveMessageSenderDisplay, useChatUserContext };

package/dist/index.js

@@ -25,6 +25,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",
@@ -4328,6 +4332,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 +4620,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 +4713,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 +5278,51 @@ 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__ */ jsx25("div", { className: "text-xs text-muted-foreground", children: config?.labels?.stagedMessageLabel || "Not sent yet" })
+                ] }),
+                /* @__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?.sendNowTooltip || 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?.discardStagedMessageTooltip || config?.labels?.voiceCancel })
+                ] })
+              ]
+            },
+            staged.id
+          )) }),
           /* @__PURE__ */ jsxs15("div", { className: "relative min-w-0", children: [
             /* @__PURE__ */ jsx25(
               Textarea,
@@ -5347,19 +5430,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?.stageMessageTooltip || 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,
@@ -5976,6 +6074,7 @@ var ChatUI = ({
   isMessagesLoading = false,
   isLoadingOlderMessages = false,
   hasMoreMessagesBefore = false,
+  activityNotice = null,
   callbacks = {},
   onLoadOlderMessages,
   user,
@@ -6624,41 +6723,50 @@ var ChatUI = ({
                   ] })
                 }
               ),
-              /* @__PURE__ */ jsx28("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__ */ jsx28(
-                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__ */ jsxs18("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__ */ jsx28("div", { className: "mx-auto mb-2 w-full max-w-3xl px-3 md:px-2", children: /* @__PURE__ */ jsx28(
+                  "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__ */ jsx28(
+                  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__ */ jsx28(
               "div",