@opengeni/react 2.5.0-canary.0 → 2.5.0-canary.2

package/dist/components/composer.d.ts

@@ -219,7 +219,7 @@ export declare function useChatComposerController({ delivery, draft, control, ef
     handlePaste: (event: ClipboardEvent<HTMLTextAreaElement>) => void;
     handleFileChange: (event: ChangeEvent<HTMLInputElement>) => void;
     focusInput: () => void | undefined;
-    setValue: (value: string) => void;
+    setValue: (next: string) => void;
     value: string;
 };
 export type ChatComposerController = ReturnType<typeof useChatComposerController>;

package/dist/composer.js

@@ -37,7 +37,7 @@ import {
   useChatComposer,
   useChatComposerController,
   useVoiceInput
-} from "./chunk-NVREJA6V.js";
+} from "./chunk-ZUT5QSQB.js";
 import "./chunk-T7VAYG2I.js";
 import {
   BillingClassMark,

package/dist/index.js

@@ -109,7 +109,7 @@ import {
   useSlashCommands,
   useTranscription,
   useVoiceInput
-} from "./chunk-NVREJA6V.js";
+} from "./chunk-ZUT5QSQB.js";
 import {
   FILE_ONLY_MESSAGE_TEXT,
   composeSendInput,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeni/react",
-  "version": "2.5.0-canary.0",
+  "version": "2.5.0-canary.2",
   "description": "React hooks and styled components for OpenGeni: live session streaming, chat composer, message timeline, session status, and fleet views — token-themed (CSS variables), dark-first, built on Tailwind v4 + Radix + Motion.",
   "license": "Apache-2.0",
   "repository": {
@@ -116,7 +116,7 @@
     "@dnd-kit/utilities": "3.2.2",
     "@fontsource-variable/noto-sans-arabic": "5.2.10",
     "@fontsource-variable/noto-sans-jp": "5.2.10",
-    "@opengeni/sdk": "^2.5.0-canary.0",
+    "@opengeni/sdk": "^2.5.0-canary.2",
     "clsx": "^2.1.1",
     "lucide-react": "^1.8.0",
     "motion": "^12.0.0",

package/src/components/composer.tsx

@@ -20,6 +20,7 @@ import {
   useContext,
   useEffect,
   useId,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -367,6 +368,29 @@ export function useChatComposerController({
   const submittingRef = useRef(false);
   const controlOperationRef = useRef(false);
   const mountedRef = useRef(true);
+  const deliveredValueRef = useRef(delivery.value);
+  const liveValueRef = useRef(delivery.value);
+  const [renderedValue, setRenderedValue] = useState(delivery.value);
+  const deliveryChanged = delivery.value !== deliveredValueRef.current;
+  if (deliveryChanged) {
+    deliveredValueRef.current = delivery.value;
+    liveValueRef.current = delivery.value;
+  }
+  const setComposerValue = useCallback(
+    (next: string) => {
+      liveValueRef.current = next;
+      setRenderedValue(next);
+      delivery.setValue(next);
+    },
+    [delivery.setValue],
+  );
+  const visibleValue = deliveryChanged ? delivery.value : renderedValue;
+
+  useLayoutEffect(() => {
+    if (renderedValue !== liveValueRef.current) {
+      setRenderedValue(liveValueRef.current);
+    }
+  }, [delivery.value, renderedValue]);
 
   useEffect(() => {
     mountedRef.current = true;
@@ -468,7 +492,7 @@ export function useChatComposerController({
       applyComposerTextareaHeight(textarea, 220);
     });
   }, []);
-  useEffect(() => resizeInput(), [delivery.value, resizeInput]);
+  useEffect(() => resizeInput(), [resizeInput, visibleValue]);
   useEffect(
     () => () => {
       if (resizeInputRafRef.current !== null) {
@@ -505,8 +529,8 @@ export function useChatComposerController({
     commands,
     context: commandContext,
     handlers,
-    value: delivery.value,
-    setValue: delivery.setValue,
+    value: visibleValue,
+    setValue: setComposerValue,
   });
   const paletteEnabled = commandContext !== undefined;
   const commandDraftBlocked = paletteEnabled && palette.isCommandDraft;
@@ -696,8 +720,8 @@ export function useChatComposerController({
     handlePaste,
     handleFileChange,
     focusInput: () => textareaRef.current?.focus(),
-    setValue: delivery.setValue,
-    value: delivery.value,
+    setValue: setComposerValue,
+    value: visibleValue,
   };
 }