@copilotz/chat-ui 0.9.16 → 0.9.18

package/dist/index.js

@@ -4566,7 +4566,7 @@ var resolveVoiceErrorMessage = (error, config) => {
 var clearVoiceTranscript = () => ({});
 var resolveVoiceSegmentDuration = (segment) => segment.attachment.durationMs ?? 0;
 var ChatInput = memo4(function ChatInput2({
-  value,
+  value: externalValue,
   onChange,
   onSubmit,
   attachments,
@@ -4597,6 +4597,7 @@ var ChatInput = memo4(function ChatInput2({
   const voiceTranscriptMode = config?.voiceCompose?.transcriptMode ?? "final-only";
   const voiceMaxRecordingMs = config?.voiceCompose?.maxRecordingMs;
   const { setContext } = useChatUserContext();
+  const [draftValue, setDraftValue] = useState7(externalValue);
   const [uploadProgress, setUploadProgress] = useState7(/* @__PURE__ */ new Map());
   const [isVoiceComposerOpen, setIsVoiceComposerOpen] = useState7(
     () => enableAudioRecording && voiceDefaultMode === "voice"
@@ -4619,6 +4620,7 @@ var ChatInput = memo4(function ChatInput2({
   const voiceDraftRef = useRef5(null);
   const voiceAppendBaseRef = useRef5(null);
   const voiceAppendBaseDurationRef = useRef5(0);
+  const previousExternalValueRef = useRef5(externalValue);
   const filteredMentionAgents = React13.useMemo(() => {
     if (!activeMention || mentionAgents.length === 0) return [];
     const query = activeMention.query.trim().toLowerCase();
@@ -4648,7 +4650,16 @@ var ChatInput = memo4(function ChatInput2({
   }, []);
   useEffect9(() => {
     resizeTextarea();
-  }, [resizeTextarea, value]);
+  }, [resizeTextarea, draftValue]);
+  useEffect9(() => {
+    if (externalValue === previousExternalValueRef.current) return;
+    previousExternalValueRef.current = externalValue;
+    setDraftValue(externalValue);
+  }, [externalValue]);
+  const updateDraftValue = useCallback3((nextValue) => {
+    setDraftValue(nextValue);
+    onChange(nextValue);
+  }, [onChange]);
   const syncMentionState = useCallback3((nextValue, nextCaret) => {
     const caret = typeof nextCaret === "number" ? nextCaret : textareaRef.current?.selectionStart ?? nextValue.length;
     const nextMatch = getActiveMentionMatch(nextValue, caret);
@@ -4683,9 +4694,9 @@ var ChatInput = memo4(function ChatInput2({
   const selectMentionAgent = useCallback3((agent) => {
     if (!activeMention) return;
     const replacement = `@${agent.name} `;
-    const nextValue = value.slice(0, activeMention.start) + replacement + value.slice(activeMention.end);
+    const nextValue = draftValue.slice(0, activeMention.start) + replacement + draftValue.slice(activeMention.end);
     const nextCaret = activeMention.start + replacement.length;
-    onChange(nextValue);
+    updateDraftValue(nextValue);
     onTargetAgentChange?.(agent.id);
     setActiveMention(null);
     setActiveMentionIndex(0);
@@ -4693,16 +4704,16 @@ var ChatInput = memo4(function ChatInput2({
       textareaRef.current?.focus();
       textareaRef.current?.setSelectionRange(nextCaret, nextCaret);
     });
-  }, [activeMention, onChange, onTargetAgentChange, value]);
+  }, [activeMention, draftValue, onTargetAgentChange, updateDraftValue]);
   const handleSubmit = (e) => {
     e.preventDefault();
-    if (!value.trim() && attachments.length === 0 || disabled || isGenerating) return;
-    const mentionedAgent = resolveTargetFromMentions(value, mentionAgents);
+    if (!draftValue.trim() && attachments.length === 0 || disabled || isGenerating) return;
+    const mentionedAgent = resolveTargetFromMentions(draftValue, mentionAgents);
     if (mentionedAgent) {
       onTargetAgentChange?.(mentionedAgent.id);
     }
-    onSubmit(value.trim(), attachments);
-    onChange("");
+    onSubmit(draftValue.trim(), attachments);
+    updateDraftValue("");
     onAttachmentsChange([]);
     setActiveMention(null);
     setActiveMentionIndex(0);
@@ -5214,7 +5225,7 @@ var ChatInput = memo4(function ChatInput2({
     ) }) : /* @__PURE__ */ jsx25("form", { onSubmit: handleSubmit, className: "mb-1", children: /* @__PURE__ */ jsxs15(
       "div",
       {
-        className: `group/composer relative flex w-full flex-col gap-2 overflow-hidden rounded-3xl border border-border/80 bg-card/95 p-2.5 shadow-sm transition-[border-color,box-shadow,background-color] focus-within:border-ring/60 focus-within:bg-card focus-within:shadow-md focus-within:ring-2 focus-within:ring-ring/15 ${isDraggingFiles ? "border-primary/60 bg-primary/5 shadow-md ring-2 ring-primary/15" : ""}`,
+        className: `group/composer relative flex w-full flex-col gap-2 overflow-visible rounded-3xl border border-border/80 bg-card/95 p-2.5 shadow-sm transition-[border-color,box-shadow,background-color] focus-within:border-ring/60 focus-within:bg-card focus-within:shadow-md focus-within:ring-2 focus-within:ring-ring/15 ${isDraggingFiles ? "border-primary/60 bg-primary/5 shadow-md ring-2 ring-primary/15" : ""}`,
         onDrop: handleDrop,
         onDragEnter: handleDragEnter,
         onDragOver: handleDragOver,
@@ -5234,9 +5245,9 @@ var ChatInput = memo4(function ChatInput2({
               Textarea,
               {
                 ref: textareaRef,
-                value,
+                value: draftValue,
                 onChange: (e) => {
-                  onChange(e.target.value);
+                  updateDraftValue(e.target.value);
                   syncMentionState(e.target.value, e.target.selectionStart ?? e.target.value.length);
                   requestAnimationFrame(resizeTextarea);
                 },
@@ -5255,7 +5266,7 @@ var ChatInput = memo4(function ChatInput2({
                 rows: 1
               }
             ),
-            isMentionMenuOpen && /* @__PURE__ */ jsx25("div", { className: "absolute bottom-full left-0 right-0 mb-2 overflow-hidden rounded-md border bg-popover shadow-md", children: /* @__PURE__ */ jsx25("div", { className: "p-1", children: filteredMentionAgents.map((agent, index) => /* @__PURE__ */ jsxs15(
+            isMentionMenuOpen && /* @__PURE__ */ jsx25("div", { className: "absolute bottom-full left-0 right-0 z-30 mb-2 overflow-hidden rounded-md border bg-popover shadow-md", children: /* @__PURE__ */ jsx25("div", { className: "p-1", children: filteredMentionAgents.map((agent, index) => /* @__PURE__ */ jsxs15(
               "button",
               {
                 type: "button",
@@ -5319,7 +5330,7 @@ var ChatInput = memo4(function ChatInput2({
               )
             ] }),
             /* @__PURE__ */ jsxs15("div", { className: "flex shrink-0 items-center gap-1", children: [
-              enableAudioRecording && canAddMoreAttachments && !value.trim() && /* @__PURE__ */ jsxs15(Tooltip, { children: [
+              enableAudioRecording && canAddMoreAttachments && !draftValue.trim() && /* @__PURE__ */ jsxs15(Tooltip, { children: [
                 /* @__PURE__ */ jsx25(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx25(
                   Button,
                   {
@@ -5356,7 +5367,7 @@ var ChatInput = memo4(function ChatInput2({
                     type: "submit",
                     size: "icon",
                     className: "h-9 w-9 rounded-full",
-                    disabled: disabled || !value.trim() && attachments.length === 0,
+                    disabled: disabled || !draftValue.trim() && attachments.length === 0,
                     children: disabled ? /* @__PURE__ */ jsx25(Loader22, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx25(Send2, { className: "h-4 w-4" })
                   }
                 ) }),
@@ -6618,7 +6629,7 @@ var ChatUI = ({
                 {
                   value: inputValue,
                   onChange: (value) => {
-                    setInputValue(value);
+                    inputValueRef.current = value;
                     if (initialInputApplied.current && !initialInputConsumedRef.current) {
                       initialInputConsumedRef.current = true;
                       onInitialInputConsumed?.();