@copilotz/chat-ui 0.9.17 → 0.9.18

package/dist/index.cjs

@@ -4547,7 +4547,7 @@ var resolveVoiceErrorMessage = (error, config) => {
 var clearVoiceTranscript = () => ({});
 var resolveVoiceSegmentDuration = (segment) => segment.attachment.durationMs ?? 0;
 var ChatInput = (0, import_react8.memo)(function ChatInput2({
-  value,
+  value: externalValue,
   onChange,
   onSubmit,
   attachments,
@@ -4578,6 +4578,7 @@ var ChatInput = (0, import_react8.memo)(function ChatInput2({
   const voiceTranscriptMode = config?.voiceCompose?.transcriptMode ?? "final-only";
   const voiceMaxRecordingMs = config?.voiceCompose?.maxRecordingMs;
   const { setContext } = useChatUserContext();
+  const [draftValue, setDraftValue] = (0, import_react8.useState)(externalValue);
   const [uploadProgress, setUploadProgress] = (0, import_react8.useState)(/* @__PURE__ */ new Map());
   const [isVoiceComposerOpen, setIsVoiceComposerOpen] = (0, import_react8.useState)(
     () => enableAudioRecording && voiceDefaultMode === "voice"
@@ -4600,6 +4601,7 @@ var ChatInput = (0, import_react8.memo)(function ChatInput2({
   const voiceDraftRef = (0, import_react8.useRef)(null);
   const voiceAppendBaseRef = (0, import_react8.useRef)(null);
   const voiceAppendBaseDurationRef = (0, import_react8.useRef)(0);
+  const previousExternalValueRef = (0, import_react8.useRef)(externalValue);
   const filteredMentionAgents = import_react8.default.useMemo(() => {
     if (!activeMention || mentionAgents.length === 0) return [];
     const query = activeMention.query.trim().toLowerCase();
@@ -4629,7 +4631,16 @@ var ChatInput = (0, import_react8.memo)(function ChatInput2({
   }, []);
   (0, import_react8.useEffect)(() => {
     resizeTextarea();
-  }, [resizeTextarea, value]);
+  }, [resizeTextarea, draftValue]);
+  (0, import_react8.useEffect)(() => {
+    if (externalValue === previousExternalValueRef.current) return;
+    previousExternalValueRef.current = externalValue;
+    setDraftValue(externalValue);
+  }, [externalValue]);
+  const updateDraftValue = (0, import_react8.useCallback)((nextValue) => {
+    setDraftValue(nextValue);
+    onChange(nextValue);
+  }, [onChange]);
   const syncMentionState = (0, import_react8.useCallback)((nextValue, nextCaret) => {
     const caret = typeof nextCaret === "number" ? nextCaret : textareaRef.current?.selectionStart ?? nextValue.length;
     const nextMatch = getActiveMentionMatch(nextValue, caret);
@@ -4664,9 +4675,9 @@ var ChatInput = (0, import_react8.memo)(function ChatInput2({
   const selectMentionAgent = (0, import_react8.useCallback)((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);
@@ -4674,16 +4685,16 @@ var ChatInput = (0, import_react8.memo)(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);
@@ -5215,9 +5226,9 @@ var ChatInput = (0, import_react8.memo)(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);
                 },
@@ -5300,7 +5311,7 @@ var ChatInput = (0, import_react8.memo)(function ChatInput2({
               )
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex shrink-0 items-center gap-1", children: [
-              enableAudioRecording && canAddMoreAttachments && !value.trim() && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Tooltip, { children: [
+              enableAudioRecording && canAddMoreAttachments && !draftValue.trim() && /* @__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,
                   {
@@ -5337,7 +5348,7 @@ var ChatInput = (0, import_react8.memo)(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__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.Loader2, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.Send, { className: "h-4 w-4" })
                   }
                 ) }),
@@ -6566,7 +6577,7 @@ var ChatUI = ({
                 {
                   value: inputValue,
                   onChange: (value) => {
-                    setInputValue(value);
+                    inputValueRef.current = value;
                     if (initialInputApplied.current && !initialInputConsumedRef.current) {
                       initialInputConsumedRef.current = true;
                       onInitialInputConsumed?.();