@botonic/react 0.56.0-alpha.0 → 0.57.0-rslib-esm.1

package/lib/webchat/input-panel/textarea.js

@@ -0,0 +1,82 @@
+import { jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import react_textarea_autosize from "react-textarea-autosize";
+import { WebchatContext } from "../context/index.js";
+import { useDeviceAdapter } from "../hooks/index.js";
+import { TextAreaContainer } from "./styles.js";
+import { TYPING_IDLE_MS, useTypingSession } from "./use-typing-session.js";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const Textarea = ({ host, textareaRef, sendChatEvent, sendTextAreaText })=>{
+    const { webchatState, setIsInputFocused } = useContext(WebchatContext);
+    // UI layer: decides when the user is typing. Network dedup lives in sendChatEvent.
+    const { stopTyping, onTextChange } = useTypingSession(sendChatEvent);
+    useDeviceAdapter(host, webchatState.isWebchatOpen);
+    const persistentMenuOptions = webchatState.theme.userInput?.persistentMenu;
+    const placeholder = webchatState.theme.userInput?.box?.placeholder;
+    const userInputBoxStyle = webchatState.theme.userInput?.box?.style;
+    const onKeyDown = async (event)=>{
+        if (event.key === 'Enter' && !event.shiftKey) {
+            event.preventDefault();
+            // Run in parallel: stop typing must not wait for sendTextAreaText to finish.
+            await Promise.all([
+                stopTyping(),
+                sendTextAreaText()
+            ]);
+        }
+    };
+    return /*#__PURE__*/ jsx(TextAreaContainer, {
+        children: /*#__PURE__*/ jsx(react_textarea_autosize, {
+            ref: (ref)=>{
+                textareaRef.current = ref;
+            },
+            onFocus: ()=>setIsInputFocused(true),
+            onBlur: async ()=>{
+                setIsInputFocused(false);
+                await stopTyping();
+            },
+            onChange: async (event)=>{
+                await onTextChange(event.target.value);
+            },
+            name: "text",
+            maxRows: 4,
+            wrap: "soft",
+            maxLength: 1000,
+            placeholder: placeholder,
+            autoFocus: false,
+            onKeyDown: onKeyDown,
+            style: {
+                display: 'flex',
+                fontSize: 16,
+                width: '100%',
+                border: 'none',
+                resize: 'none',
+                overflow: 'auto',
+                outline: 'none',
+                flex: '1 1 auto',
+                padding: 10,
+                paddingLeft: persistentMenuOptions ? 0 : 10,
+                fontFamily: 'inherit',
+                ...userInputBoxStyle
+            }
+        })
+    });
+};
+
+export { TYPING_IDLE_MS, Textarea };
+
+//# sourceMappingURL=textarea.js.map

package/lib/webchat/input-panel/textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webchat/input-panel/textarea.js","sources":["../../../src/webchat/input-panel/textarea.tsx"],"sourcesContent":["import type React from 'react'\nimport { useContext } from 'react'\nimport TextareaAutosize from 'react-textarea-autosize'\n\nimport { WebchatContext } from '../../webchat/context'\nimport { useDeviceAdapter } from '../hooks'\nimport { TextAreaContainer } from './styles'\nimport type { TypingChatEvent } from './typing-network-sender'\nimport { useTypingSession } from './use-typing-session'\n\ninterface TextareaProps {\n  host: HTMLElement\n  textareaRef: React.MutableRefObject<HTMLTextAreaElement | undefined>\n  sendChatEvent: (event: TypingChatEvent) => Promise<boolean>\n  sendTextAreaText: () => Promise<void>\n}\n\nexport { TYPING_IDLE_MS } from './use-typing-session'\n\nexport const Textarea = ({\n  host,\n  textareaRef,\n  sendChatEvent,\n  sendTextAreaText,\n}: TextareaProps) => {\n  const { webchatState, setIsInputFocused } = useContext(WebchatContext)\n  // UI layer: decides when the user is typing. Network dedup lives in sendChatEvent.\n  const { stopTyping, onTextChange } = useTypingSession(sendChatEvent)\n\n  useDeviceAdapter(host, webchatState.isWebchatOpen)\n\n  const persistentMenuOptions = webchatState.theme.userInput?.persistentMenu\n  const placeholder = webchatState.theme.userInput?.box?.placeholder\n  const userInputBoxStyle = webchatState.theme.userInput?.box?.style\n\n  const onKeyDown = async event => {\n    if (event.key === 'Enter' && !event.shiftKey) {\n      event.preventDefault()\n      // Run in parallel: stop typing must not wait for sendTextAreaText to finish.\n      await Promise.all([stopTyping(), sendTextAreaText()])\n    }\n  }\n\n  return (\n    <TextAreaContainer>\n      <TextareaAutosize\n        ref={(ref: HTMLTextAreaElement) => {\n          textareaRef.current = ref\n        }}\n        onFocus={() => setIsInputFocused(true)}\n        onBlur={async () => {\n          setIsInputFocused(false)\n          await stopTyping()\n        }}\n        onChange={async event => {\n          await onTextChange(event.target.value)\n        }}\n        name='text'\n        maxRows={4}\n        wrap='soft'\n        maxLength={1000}\n        placeholder={placeholder}\n        autoFocus={false}\n        onKeyDown={onKeyDown}\n        style={{\n          display: 'flex',\n          fontSize: 16,\n          width: '100%',\n          border: 'none',\n          resize: 'none',\n          overflow: 'auto',\n          outline: 'none',\n          flex: '1 1 auto',\n          padding: 10,\n          paddingLeft: persistentMenuOptions ? 0 : 10,\n          fontFamily: 'inherit',\n          ...userInputBoxStyle,\n        }}\n      />\n    </TextAreaContainer>\n  )\n}\n"],"names":["useContext","TextareaAutosize","WebchatContext","useDeviceAdapter","TextAreaContainer","useTypingSession","TYPING_IDLE_MS","Textarea","host","textareaRef","sendChatEvent","sendTextAreaText","webchatState","setIsInputFocused","stopTyping","onTextChange","persistentMenuOptions","placeholder","userInputBoxStyle","onKeyDown","event","Promise","ref"],"mappings":";;;;;;;;;;;;;;;;AACkC;AACoB;AAEA;AACX;AACC;AAEW;AASF;AAE9C,MAAMO,QAAQA,GAAG,CAAC,EACvBC,IAAI,EACJC,WAAW,EACXC,aAAa,EACbC,gBAAgB,EACF;IACd,MAAM,EAAEC,YAAY,EAAEC,iBAAiB,EAAE,GAAGb,UAAUA,CAACE,cAAcA;IACrE,mFAAmF;IACnF,MAAM,EAAEY,UAAU,EAAEC,YAAY,EAAE,GAAGV,gBAAgBA,CAACK;IAEtDP,gBAAgBA,CAACK,MAAMI,aAAa,aAAa;IAEjD,MAAMI,wBAAwBJ,aAAa,KAAK,CAAC,SAAS,EAAE;IAC5D,MAAMK,cAAcL,aAAa,KAAK,CAAC,SAAS,EAAE,KAAK;IACvD,MAAMM,oBAAoBN,aAAa,KAAK,CAAC,SAAS,EAAE,KAAK;IAE7D,MAAMO,YAAY,OAAMC;QACtB,IAAIA,MAAM,GAAG,KAAK,WAAW,CAACA,MAAM,QAAQ,EAAE;YAC5CA,MAAM,cAAc;YACpB,6EAA6E;YAC7E,MAAMC,QAAQ,GAAG,CAAC;gBAACP;gBAAcH;aAAmB;QACtD;IACF;IAEA,qBACE,IAACP,iBAAiBA;kBAChB,kBAACH,uBAAgBA;YACf,KAAK,CAACqB;gBACJb,YAAY,OAAO,GAAGa;YACxB;YACA,SAAS,IAAMT,kBAAkB;YACjC,QAAQ;gBACNA,kBAAkB;gBAClB,MAAMC;YACR;YACA,UAAU,OAAMM;gBACd,MAAML,aAAaK,MAAM,MAAM,CAAC,KAAK;YACvC;YACA,MAAK;YACL,SAAS;YACT,MAAK;YACL,WAAW;YACX,aAAaH;YACb,WAAW;YACX,WAAWE;YACX,OAAO;gBACL,SAAS;gBACT,UAAU;gBACV,OAAO;gBACP,QAAQ;gBACR,QAAQ;gBACR,UAAU;gBACV,SAAS;gBACT,MAAM;gBACN,SAAS;gBACT,aAAaH,wBAAwB,IAAI;gBACzC,YAAY;gBACZ,GAAGE,iBAAiB;YACtB;;;AAIR,EAAC"}

package/lib/webchat/input-panel/typing-network-sender.d.ts

@@ -0,0 +1,52 @@
+import type { Session as CoreSession } from '@botonic/core';
+import { INPUT } from '@botonic/core';
+import { Typing } from '../../index-types.js';
+/** Network debounce before `typing_off` is sent after a stop signal. */
+export declare const TYPING_OFF_DEBOUNCE_MS = 2000;
+export type TypingChatEvent = Typing.On | Typing.Off;
+/** `true` when `typing_on` was delivered to the server. */
+export type TypingOnSendResult = boolean;
+/** `true` when `typing_off` was scheduled; delivery happens after debounce. */
+export type TypingOffSendResult = boolean;
+export interface ChatEventContext {
+    session: Partial<CoreSession>;
+    lastRoutePath?: string;
+}
+export type SendToServer = (chatEvent: TypingChatEvent, context: ChatEventContext) => Promise<boolean>;
+export declare function buildChatEventPayload(chatEvent: TypingChatEvent, { session, lastRoutePath }: ChatEventContext): {
+    user: import("@botonic/core").SessionUser<any> | undefined;
+    input: {
+        id: string;
+        type: INPUT;
+        data: TypingChatEvent;
+    };
+    session: Partial<CoreSession<any>>;
+    lastRoutePath: string | undefined;
+};
+/**
+ * Network-layer sender for typing_on / typing_off.
+ *
+ * Guarantees at most one typing_on per session, debounced typing_off,
+ * and matching session context between on/off pairs.
+ */
+export declare class TypingNetworkSender {
+    private readonly getContext;
+    private readonly sendToServer;
+    private disposed;
+    private isTypingOnServer;
+    private activeContext;
+    private pendingOffTimer;
+    private pendingTypingOn;
+    constructor(getContext: () => ChatEventContext, sendToServer: SendToServer);
+    /**
+     * For `Typing.On`, returns whether the event was delivered.
+     * For `Typing.Off`, returns whether the stop was scheduled.
+     */
+    send(chatEvent: TypingChatEvent): Promise<TypingOnSendResult | TypingOffSendResult>;
+    private sendTypingOffBestEffort;
+    dispose(): void;
+    private userStartedTyping;
+    private userStoppedTyping;
+    private resetTypingState;
+    private cancelPendingOff;
+}

package/lib/webchat/input-panel/typing-network-sender.js

@@ -0,0 +1,141 @@
+import { INPUT } from "@botonic/core";
+import { v7 } from "uuid";
+import { Typing } from "../../index-types.js";
+
+
+
+
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else obj[key] = value;
+    return obj;
+}
+
+
+
+/** Network debounce before `typing_off` is sent after a stop signal. */ const TYPING_OFF_DEBOUNCE_MS = 2000;
+function buildChatEventPayload(chatEvent, { session, lastRoutePath }) {
+    return {
+        user: session.user,
+        input: {
+            id: v7(),
+            type: INPUT.CHAT_EVENT,
+            data: chatEvent
+        },
+        session,
+        lastRoutePath
+    };
+}
+/**
+ * Network-layer sender for typing_on / typing_off.
+ *
+ * Guarantees at most one typing_on per session, debounced typing_off,
+ * and matching session context between on/off pairs.
+ */ class TypingNetworkSender {
+    /**
+   * For `Typing.On`, returns whether the event was delivered.
+   * For `Typing.Off`, returns whether the stop was scheduled.
+   */ async send(chatEvent) {
+        if (chatEvent === Typing.On) {
+            return this.userStartedTyping();
+        }
+        return this.userStoppedTyping();
+    }
+    sendTypingOffBestEffort(context) {
+        return this.sendToServer(Typing.Off, context).catch(()=>{});
+    }
+    dispose() {
+        this.disposed = true;
+        this.cancelPendingOff();
+        if (!this.isTypingOnServer || !this.activeContext) {
+            return;
+        }
+        // Unmount should not leave the server thinking the user is still typing.
+        const context = this.activeContext;
+        this.resetTypingState();
+        this.sendTypingOffBestEffort(context);
+    }
+    async userStartedTyping() {
+        if (this.pendingTypingOn) {
+            return this.pendingTypingOn;
+        }
+        // User resumed typing before the debounced typing_off was sent.
+        this.cancelPendingOff();
+        if (this.isTypingOnServer) {
+            return true;
+        }
+        this.pendingTypingOn = (async ()=>{
+            const context = this.getContext();
+            try {
+                const delivered = await this.sendToServer(Typing.On, context);
+                if (this.disposed) {
+                    // typing_on resolved after unmount: immediately balance with typing_off.
+                    if (delivered) {
+                        this.sendTypingOffBestEffort(context);
+                    }
+                    return false;
+                }
+                if (delivered) {
+                    this.isTypingOnServer = true;
+                    this.activeContext = context;
+                }
+                return delivered;
+            } finally{
+                this.pendingTypingOn = null;
+            }
+        })();
+        return this.pendingTypingOn;
+    }
+    userStoppedTyping() {
+        if (!this.isTypingOnServer || !this.activeContext) {
+            return Promise.resolve(false);
+        }
+        this.cancelPendingOff();
+        const context = this.activeContext;
+        // Coalesce blur + clear + send into a single typing_off.
+        this.pendingOffTimer = setTimeout(()=>{
+            this.pendingOffTimer = null;
+            this.resetTypingState();
+            this.sendTypingOffBestEffort(context);
+        }, TYPING_OFF_DEBOUNCE_MS);
+        return Promise.resolve(true);
+    }
+    resetTypingState() {
+        this.isTypingOnServer = false;
+        this.activeContext = null;
+    }
+    cancelPendingOff() {
+        if (!this.pendingOffTimer) {
+            return;
+        }
+        clearTimeout(this.pendingOffTimer);
+        this.pendingOffTimer = null;
+    }
+    constructor(getContext, sendToServer){
+        _define_property(this, "getContext", void 0);
+        _define_property(this, "sendToServer", void 0);
+        _define_property(this, "disposed", void 0);
+        _define_property(this, "isTypingOnServer", void 0);
+        // Snapshot of session/route captured when typing_on was delivered.
+        _define_property(this, "activeContext", void 0);
+        _define_property(this, "pendingOffTimer", void 0);
+        _define_property(this, "pendingTypingOn", void 0);
+        this.getContext = getContext;
+        this.sendToServer = sendToServer;
+        this.disposed = false;
+        this.isTypingOnServer = false;
+        this.activeContext = null;
+        this.pendingOffTimer = null;
+        this.pendingTypingOn = null;
+    }
+}
+
+export { TYPING_OFF_DEBOUNCE_MS, TypingNetworkSender, buildChatEventPayload };
+
+//# sourceMappingURL=typing-network-sender.js.map

package/lib/webchat/input-panel/typing-network-sender.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webchat/input-panel/typing-network-sender.js","sources":["../../../src/webchat/input-panel/typing-network-sender.ts"],"sourcesContent":["import type { Session as CoreSession } from '@botonic/core'\nimport { INPUT } from '@botonic/core'\nimport { v7 as uuidv7 } from 'uuid'\n\nimport { Typing } from '../../index-types'\n\n/** Network debounce before `typing_off` is sent after a stop signal. */\nexport const TYPING_OFF_DEBOUNCE_MS = 2000\n\nexport type TypingChatEvent = Typing.On | Typing.Off\n\n/** `true` when `typing_on` was delivered to the server. */\nexport type TypingOnSendResult = boolean\n\n/** `true` when `typing_off` was scheduled; delivery happens after debounce. */\nexport type TypingOffSendResult = boolean\n\nexport interface ChatEventContext {\n  session: Partial<CoreSession>\n  lastRoutePath?: string\n}\n\nexport type SendToServer = (\n  chatEvent: TypingChatEvent,\n  context: ChatEventContext\n) => Promise<boolean>\n\nexport function buildChatEventPayload(\n  chatEvent: TypingChatEvent,\n  { session, lastRoutePath }: ChatEventContext\n) {\n  return {\n    user: session.user,\n    input: {\n      id: uuidv7(),\n      type: INPUT.CHAT_EVENT,\n      data: chatEvent,\n    },\n    session,\n    lastRoutePath,\n  }\n}\n\n/**\n * Network-layer sender for typing_on / typing_off.\n *\n * Guarantees at most one typing_on per session, debounced typing_off,\n * and matching session context between on/off pairs.\n */\nexport class TypingNetworkSender {\n  private disposed = false\n  private isTypingOnServer = false\n  // Snapshot of session/route captured when typing_on was delivered.\n  private activeContext: ChatEventContext | null = null\n  private pendingOffTimer: ReturnType<typeof setTimeout> | null = null\n  private pendingTypingOn: Promise<TypingOnSendResult> | null = null\n\n  constructor(\n    private readonly getContext: () => ChatEventContext,\n    private readonly sendToServer: SendToServer\n  ) {}\n\n  /**\n   * For `Typing.On`, returns whether the event was delivered.\n   * For `Typing.Off`, returns whether the stop was scheduled.\n   */\n  async send(\n    chatEvent: TypingChatEvent\n  ): Promise<TypingOnSendResult | TypingOffSendResult> {\n    if (chatEvent === Typing.On) {\n      return this.userStartedTyping()\n    }\n\n    return this.userStoppedTyping()\n  }\n\n  private sendTypingOffBestEffort(context: ChatEventContext) {\n    return this.sendToServer(Typing.Off, context).catch(() => {})\n  }\n\n  dispose() {\n    this.disposed = true\n    this.cancelPendingOff()\n\n    if (!this.isTypingOnServer || !this.activeContext) {\n      return\n    }\n\n    // Unmount should not leave the server thinking the user is still typing.\n    const context = this.activeContext\n    this.resetTypingState()\n    this.sendTypingOffBestEffort(context)\n  }\n\n  private async userStartedTyping(): Promise<TypingOnSendResult> {\n    if (this.pendingTypingOn) {\n      return this.pendingTypingOn\n    }\n\n    // User resumed typing before the debounced typing_off was sent.\n    this.cancelPendingOff()\n\n    if (this.isTypingOnServer) {\n      return true\n    }\n\n    this.pendingTypingOn = (async () => {\n      const context = this.getContext()\n\n      try {\n        const delivered = await this.sendToServer(Typing.On, context)\n\n        if (this.disposed) {\n          // typing_on resolved after unmount: immediately balance with typing_off.\n          if (delivered) {\n            this.sendTypingOffBestEffort(context)\n          }\n\n          return false\n        }\n\n        if (delivered) {\n          this.isTypingOnServer = true\n          this.activeContext = context\n        }\n\n        return delivered\n      } finally {\n        this.pendingTypingOn = null\n      }\n    })()\n\n    return this.pendingTypingOn\n  }\n\n  private userStoppedTyping(): Promise<TypingOffSendResult> {\n    if (!this.isTypingOnServer || !this.activeContext) {\n      return Promise.resolve(false)\n    }\n\n    this.cancelPendingOff()\n\n    const context = this.activeContext\n\n    // Coalesce blur + clear + send into a single typing_off.\n    this.pendingOffTimer = setTimeout(() => {\n      this.pendingOffTimer = null\n      this.resetTypingState()\n      this.sendTypingOffBestEffort(context)\n    }, TYPING_OFF_DEBOUNCE_MS)\n\n    return Promise.resolve(true)\n  }\n\n  private resetTypingState() {\n    this.isTypingOnServer = false\n    this.activeContext = null\n  }\n\n  private cancelPendingOff() {\n    if (!this.pendingOffTimer) {\n      return\n    }\n\n    clearTimeout(this.pendingOffTimer)\n    this.pendingOffTimer = null\n  }\n}\n"],"names":["INPUT","v7","uuidv7","Typing","TYPING_OFF_DEBOUNCE_MS","buildChatEventPayload","chatEvent","session","lastRoutePath","TypingNetworkSender","context","delivered","Promise","setTimeout","clearTimeout","getContext","sendToServer"],"mappings":"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"}

package/lib/webchat/input-panel/use-typing-chat-event-sender.d.ts

@@ -0,0 +1,16 @@
+import type { Session as CoreSession } from '@botonic/core';
+import { buildChatEventPayload, type TypingChatEvent } from './typing-network-sender.js';
+export type TypingChatEventPayload = ReturnType<typeof buildChatEventPayload>;
+interface UseTypingChatEventSenderArgs {
+    onUserInput?: (args: TypingChatEventPayload) => Promise<void>;
+    session: Partial<CoreSession>;
+    lastRoutePath?: string;
+}
+/**
+ * React bridge from Textarea to TypingNetworkSender.
+ *
+ * Keeps one sender instance per input panel and forwards typing events
+ * to onUserInput with the current session context.
+ */
+export declare function useTypingChatEventSender({ onUserInput, session, lastRoutePath, }: UseTypingChatEventSenderArgs): (chatEvent: TypingChatEvent) => Promise<boolean>;
+export {};

package/lib/webchat/input-panel/use-typing-chat-event-sender.js

@@ -0,0 +1,56 @@
+import { useCallback, useEffect, useRef } from "react";
+import { TypingNetworkSender, buildChatEventPayload } from "./typing-network-sender.js";
+
+
+
+
+
+/**
+ * React bridge from Textarea to TypingNetworkSender.
+ *
+ * Keeps one sender instance per input panel and forwards typing events
+ * to onUserInput with the current session context.
+ */ function useTypingChatEventSender({ onUserInput, session, lastRoutePath }) {
+    // Always read the latest handler/session without recreating the sender.
+    const contextRef = useRef({
+        onUserInput,
+        session,
+        lastRoutePath
+    });
+    const typingSenderRef = useRef(null);
+    contextRef.current = {
+        onUserInput,
+        session,
+        lastRoutePath
+    };
+    if (!typingSenderRef.current) {
+        typingSenderRef.current = new TypingNetworkSender(()=>({
+                session: contextRef.current.session,
+                lastRoutePath: contextRef.current.lastRoutePath
+            }), async (chatEvent, context)=>{
+            const handler = contextRef.current.onUserInput;
+            if (!handler) {
+                return false;
+            }
+            try {
+                await handler(buildChatEventPayload(chatEvent, context));
+                return true;
+            } catch  {
+                // Let the UI retry on the next keystroke.
+                return false;
+            }
+        });
+    }
+    useEffect(()=>{
+        return ()=>{
+            typingSenderRef.current?.dispose();
+        };
+    }, []);
+    return useCallback(async (chatEvent)=>{
+        return await typingSenderRef.current?.send(chatEvent) ?? false;
+    }, []);
+}
+
+export { useTypingChatEventSender };
+
+//# sourceMappingURL=use-typing-chat-event-sender.js.map

package/lib/webchat/input-panel/use-typing-chat-event-sender.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webchat/input-panel/use-typing-chat-event-sender.js","sources":["../../../src/webchat/input-panel/use-typing-chat-event-sender.ts"],"sourcesContent":["import type { Session as CoreSession } from '@botonic/core'\nimport { useCallback, useEffect, useRef } from 'react'\nimport {\n  buildChatEventPayload,\n  type TypingChatEvent,\n  TypingNetworkSender,\n} from './typing-network-sender'\n\nexport type TypingChatEventPayload = ReturnType<typeof buildChatEventPayload>\n\ninterface UseTypingChatEventSenderArgs {\n  onUserInput?: (args: TypingChatEventPayload) => Promise<void>\n  session: Partial<CoreSession>\n  lastRoutePath?: string\n}\n\n/**\n * React bridge from Textarea to TypingNetworkSender.\n *\n * Keeps one sender instance per input panel and forwards typing events\n * to onUserInput with the current session context.\n */\nexport function useTypingChatEventSender({\n  onUserInput,\n  session,\n  lastRoutePath,\n}: UseTypingChatEventSenderArgs) {\n  // Always read the latest handler/session without recreating the sender.\n  const contextRef = useRef({ onUserInput, session, lastRoutePath })\n  const typingSenderRef = useRef<TypingNetworkSender | null>(null)\n\n  contextRef.current = { onUserInput, session, lastRoutePath }\n\n  if (!typingSenderRef.current) {\n    typingSenderRef.current = new TypingNetworkSender(\n      () => ({\n        session: contextRef.current.session,\n        lastRoutePath: contextRef.current.lastRoutePath,\n      }),\n      async (chatEvent, context) => {\n        const handler = contextRef.current.onUserInput\n\n        if (!handler) {\n          return false\n        }\n\n        try {\n          await handler(buildChatEventPayload(chatEvent, context))\n          return true\n        } catch {\n          // Let the UI retry on the next keystroke.\n          return false\n        }\n      }\n    )\n  }\n\n  useEffect(() => {\n    return () => {\n      typingSenderRef.current?.dispose()\n    }\n  }, [])\n\n  return useCallback(async (chatEvent: TypingChatEvent): Promise<boolean> => {\n    return (await typingSenderRef.current?.send(chatEvent)) ?? false\n  }, [])\n}\n"],"names":["useCallback","useEffect","useRef","buildChatEventPayload","TypingNetworkSender","useTypingChatEventSender","onUserInput","session","lastRoutePath","contextRef","typingSenderRef","chatEvent","context","handler"],"mappings":";;;;;AACsD;AAKtB;AAUhC;;;;;CAKC,GACM,SAASK,wBAAwBA,CAAC,EACvCC,WAAW,EACXC,OAAO,EACPC,aAAa,EACgB;IAC7B,wEAAwE;IACxE,MAAMC,aAAaP,MAAMA,CAAC;QAAEI;QAAaC;QAASC;IAAc;IAChE,MAAME,kBAAkBR,MAAMA,CAA6B;IAE3DO,WAAW,OAAO,GAAG;QAAEH;QAAaC;QAASC;IAAc;IAE3D,IAAI,CAACE,gBAAgB,OAAO,EAAE;QAC5BA,gBAAgB,OAAO,GAAG,IAAIN,mBAAmBA,CAC/C,IAAO;gBACL,SAASK,WAAW,OAAO,CAAC,OAAO;gBACnC,eAAeA,WAAW,OAAO,CAAC,aAAa;YACjD,IACA,OAAOE,WAAWC;YAChB,MAAMC,UAAUJ,WAAW,OAAO,CAAC,WAAW;YAE9C,IAAI,CAACI,SAAS;gBACZ,OAAO;YACT;YAEA,IAAI;gBACF,MAAMA,QAAQV,qBAAqBA,CAACQ,WAAWC;gBAC/C,OAAO;YACT,EAAE,OAAM;gBACN,0CAA0C;gBAC1C,OAAO;YACT;QACF;IAEJ;IAEAX,SAASA,CAAC;QACR,OAAO;YACLS,gBAAgB,OAAO,EAAE;QAC3B;IACF,GAAG,EAAE;IAEL,OAAOV,WAAWA,CAAC,OAAOW;QACxB,OAAQ,MAAMD,gBAAgB,OAAO,EAAE,KAAKC,cAAe;IAC7D,GAAG,EAAE;AACP"}

package/lib/webchat/input-panel/use-typing-session.d.ts

@@ -0,0 +1,15 @@
+import type { TypingChatEvent } from './typing-network-sender.js';
+/** Local UI inactivity before the textarea stops emitting typing events. */
+export declare const TYPING_IDLE_MS: number;
+type SendTypingEvent = (event: TypingChatEvent) => Promise<boolean>;
+/**
+ * UI-layer typing session for the textarea.
+ *
+ * Decides *when* the user is typing and requests typing_on / typing_off.
+ * Deduplication and network debouncing live in TypingNetworkSender instead.
+ */
+export declare function useTypingSession(sendChatEvent: SendTypingEvent): {
+    stopTyping: () => Promise<void>;
+    onTextChange: (value: string) => Promise<void>;
+};
+export {};

package/lib/webchat/input-panel/use-typing-session.js

@@ -0,0 +1,109 @@
+import { useCallback, useEffect, useRef } from "react";
+import { Typing } from "../../index-types.js";
+
+
+
+
+
+/** Local UI inactivity before the textarea stops emitting typing events. */ const TYPING_IDLE_MS = 10 * 1000;
+/**
+ * UI-layer typing session for the textarea.
+ *
+ * Decides *when* the user is typing and requests typing_on / typing_off.
+ * Deduplication and network debouncing live in TypingNetworkSender instead.
+ */ function useTypingSession(sendChatEvent) {
+    const isTyping = useRef(false);
+    // Bumps on each start/stop so stale async stopTyping() calls can be ignored.
+    const startOrStopTypingCount = useRef(0);
+    const idleTimer = useRef(null);
+    // Shares one in-flight typing_on while delivery is still pending.
+    const pendingTypingOn = useRef(null);
+    const stopTyping = useCallback(async ()=>{
+        const countWhenStopWasRequested = ++startOrStopTypingCount.current;
+        if (idleTimer.current) {
+            clearTimeout(idleTimer.current);
+            idleTimer.current = null;
+        }
+        // Wait for typing_on to settle before deciding whether to send typing_off.
+        if (pendingTypingOn.current) {
+            await pendingTypingOn.current;
+        }
+        // Let same-turn input events (e.g. Enter then type next message) bump the counter first.
+        await Promise.resolve();
+        if (countWhenStopWasRequested !== startOrStopTypingCount.current) {
+            return;
+        }
+        if (!isTyping.current) {
+            return;
+        }
+        isTyping.current = false;
+        await sendChatEvent(Typing.Off);
+    }, [
+        sendChatEvent
+    ]);
+    const startTyping = useCallback(async ()=>{
+        if (isTyping.current) {
+            return true;
+        }
+        if (pendingTypingOn.current) {
+            return pendingTypingOn.current;
+        }
+        pendingTypingOn.current = (async ()=>{
+            try {
+                const accepted = await sendChatEvent(Typing.On);
+                // Only mark active after the network layer confirms delivery.
+                if (accepted) {
+                    isTyping.current = true;
+                }
+                return accepted;
+            } finally{
+                pendingTypingOn.current = null;
+            }
+        })();
+        return pendingTypingOn.current;
+    }, [
+        sendChatEvent
+    ]);
+    const onTextChange = useCallback(async (value)=>{
+        if (value === '') {
+            await stopTyping();
+            return;
+        }
+        const countWhenUserTyped = ++startOrStopTypingCount.current;
+        await startTyping();
+        if (countWhenUserTyped !== startOrStopTypingCount.current) {
+            return;
+        }
+        if (!isTyping.current) {
+            return;
+        }
+        // Reset the idle timer on every keystroke.
+        if (idleTimer.current) {
+            clearTimeout(idleTimer.current);
+        }
+        idleTimer.current = setTimeout(()=>{
+            stopTyping().catch(()=>{});
+        }, TYPING_IDLE_MS);
+    }, [
+        startTyping,
+        stopTyping
+    ]);
+    const stopTypingRef = useRef(stopTyping);
+    stopTypingRef.current = stopTyping;
+    useEffect(()=>{
+        return ()=>{
+            if (idleTimer.current) {
+                clearTimeout(idleTimer.current);
+            }
+            stopTypingRef.current().catch(()=>{});
+        };
+    }, []);
+    return {
+        stopTyping,
+        onTextChange
+    };
+}
+
+export { TYPING_IDLE_MS, useTypingSession };
+
+//# sourceMappingURL=use-typing-session.js.map

package/lib/webchat/input-panel/use-typing-session.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webchat/input-panel/use-typing-session.js","sources":["../../../src/webchat/input-panel/use-typing-session.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react'\n\nimport { Typing } from '../../index-types'\nimport type { TypingChatEvent } from './typing-network-sender'\n\n/** Local UI inactivity before the textarea stops emitting typing events. */\nexport const TYPING_IDLE_MS = 10 * 1000\n\ntype SendTypingEvent = (event: TypingChatEvent) => Promise<boolean>\n\n/**\n * UI-layer typing session for the textarea.\n *\n * Decides *when* the user is typing and requests typing_on / typing_off.\n * Deduplication and network debouncing live in TypingNetworkSender instead.\n */\nexport function useTypingSession(sendChatEvent: SendTypingEvent) {\n  const isTyping = useRef(false)\n  // Bumps on each start/stop so stale async stopTyping() calls can be ignored.\n  const startOrStopTypingCount = useRef(0)\n  const idleTimer = useRef<ReturnType<typeof setTimeout> | null>(null)\n  // Shares one in-flight typing_on while delivery is still pending.\n  const pendingTypingOn = useRef<Promise<boolean> | null>(null)\n\n  const stopTyping = useCallback(async () => {\n    const countWhenStopWasRequested = ++startOrStopTypingCount.current\n\n    if (idleTimer.current) {\n      clearTimeout(idleTimer.current)\n      idleTimer.current = null\n    }\n\n    // Wait for typing_on to settle before deciding whether to send typing_off.\n    if (pendingTypingOn.current) {\n      await pendingTypingOn.current\n    }\n\n    // Let same-turn input events (e.g. Enter then type next message) bump the counter first.\n    await Promise.resolve()\n\n    if (countWhenStopWasRequested !== startOrStopTypingCount.current) {\n      return\n    }\n\n    if (!isTyping.current) {\n      return\n    }\n\n    isTyping.current = false\n    await sendChatEvent(Typing.Off)\n  }, [sendChatEvent])\n\n  const startTyping = useCallback(async () => {\n    if (isTyping.current) {\n      return true\n    }\n\n    if (pendingTypingOn.current) {\n      return pendingTypingOn.current\n    }\n\n    pendingTypingOn.current = (async () => {\n      try {\n        const accepted = await sendChatEvent(Typing.On)\n\n        // Only mark active after the network layer confirms delivery.\n        if (accepted) {\n          isTyping.current = true\n        }\n\n        return accepted\n      } finally {\n        pendingTypingOn.current = null\n      }\n    })()\n\n    return pendingTypingOn.current\n  }, [sendChatEvent])\n\n  const onTextChange = useCallback(\n    async (value: string) => {\n      if (value === '') {\n        await stopTyping()\n        return\n      }\n\n      const countWhenUserTyped = ++startOrStopTypingCount.current\n      await startTyping()\n\n      if (countWhenUserTyped !== startOrStopTypingCount.current) {\n        return\n      }\n\n      if (!isTyping.current) {\n        return\n      }\n\n      // Reset the idle timer on every keystroke.\n      if (idleTimer.current) {\n        clearTimeout(idleTimer.current)\n      }\n\n      idleTimer.current = setTimeout(() => {\n        stopTyping().catch(() => {})\n      }, TYPING_IDLE_MS)\n    },\n    [startTyping, stopTyping]\n  )\n\n  const stopTypingRef = useRef(stopTyping)\n  stopTypingRef.current = stopTyping\n\n  useEffect(() => {\n    return () => {\n      if (idleTimer.current) {\n        clearTimeout(idleTimer.current)\n      }\n\n      stopTypingRef.current().catch(() => {})\n    }\n  }, [])\n\n  return { stopTyping, onTextChange }\n}\n"],"names":["useCallback","useEffect","useRef","Typing","TYPING_IDLE_MS","useTypingSession","sendChatEvent","isTyping","startOrStopTypingCount","idleTimer","pendingTypingOn","stopTyping","countWhenStopWasRequested","clearTimeout","Promise","startTyping","accepted","onTextChange","value","countWhenUserTyped","setTimeout","stopTypingRef"],"mappings":";;;;;AAAsD;AAEZ;AAG1C,0EAA0E,GACnE,MAAMI,cAAcA,GAAG,KAAK,KAAI;AAIvC;;;;;CAKC,GACM,SAASC,gBAAgBA,CAACC,aAA8B;IAC7D,MAAMC,WAAWL,MAAMA,CAAC;IACxB,6EAA6E;IAC7E,MAAMM,yBAAyBN,MAAMA,CAAC;IACtC,MAAMO,YAAYP,MAAMA,CAAuC;IAC/D,kEAAkE;IAClE,MAAMQ,kBAAkBR,MAAMA,CAA0B;IAExD,MAAMS,aAAaX,WAAWA,CAAC;QAC7B,MAAMY,4BAA4B,EAAEJ,uBAAuB,OAAO;QAElE,IAAIC,UAAU,OAAO,EAAE;YACrBI,aAAaJ,UAAU,OAAO;YAC9BA,UAAU,OAAO,GAAG;QACtB;QAEA,2EAA2E;QAC3E,IAAIC,gBAAgB,OAAO,EAAE;YAC3B,MAAMA,gBAAgB,OAAO;QAC/B;QAEA,yFAAyF;QACzF,MAAMI,QAAQ,OAAO;QAErB,IAAIF,8BAA8BJ,uBAAuB,OAAO,EAAE;YAChE;QACF;QAEA,IAAI,CAACD,SAAS,OAAO,EAAE;YACrB;QACF;QAEAA,SAAS,OAAO,GAAG;QACnB,MAAMD,cAAcH,UAAU;IAChC,GAAG;QAACG;KAAc;IAElB,MAAMS,cAAcf,WAAWA,CAAC;QAC9B,IAAIO,SAAS,OAAO,EAAE;YACpB,OAAO;QACT;QAEA,IAAIG,gBAAgB,OAAO,EAAE;YAC3B,OAAOA,gBAAgB,OAAO;QAChC;QAEAA,gBAAgB,OAAO,GAAI;YACzB,IAAI;gBACF,MAAMM,WAAW,MAAMV,cAAcH,SAAS;gBAE9C,8DAA8D;gBAC9D,IAAIa,UAAU;oBACZT,SAAS,OAAO,GAAG;gBACrB;gBAEA,OAAOS;YACT,SAAU;gBACRN,gBAAgB,OAAO,GAAG;YAC5B;QACF;QAEA,OAAOA,gBAAgB,OAAO;IAChC,GAAG;QAACJ;KAAc;IAElB,MAAMW,eAAejB,WAAWA,CAC9B,OAAOkB;QACL,IAAIA,UAAU,IAAI;YAChB,MAAMP;YACN;QACF;QAEA,MAAMQ,qBAAqB,EAAEX,uBAAuB,OAAO;QAC3D,MAAMO;QAEN,IAAII,uBAAuBX,uBAAuB,OAAO,EAAE;YACzD;QACF;QAEA,IAAI,CAACD,SAAS,OAAO,EAAE;YACrB;QACF;QAEA,2CAA2C;QAC3C,IAAIE,UAAU,OAAO,EAAE;YACrBI,aAAaJ,UAAU,OAAO;QAChC;QAEAA,UAAU,OAAO,GAAGW,WAAW;YAC7BT,aAAa,KAAK,CAAC,KAAO;QAC5B,GAAGP,cAAcA;IACnB,GACA;QAACW;QAAaJ;KAAW;IAG3B,MAAMU,gBAAgBnB,MAAMA,CAACS;IAC7BU,cAAc,OAAO,GAAGV;IAExBV,SAASA,CAAC;QACR,OAAO;YACL,IAAIQ,UAAU,OAAO,EAAE;gBACrBI,aAAaJ,UAAU,OAAO;YAChC;YAEAY,cAAc,OAAO,GAAG,KAAK,CAAC,KAAO;QACvC;IACF,GAAG,EAAE;IAEL,OAAO;QAAEV;QAAYM;IAAa;AACpC"}

package/lib/webchat/message-list/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const WebchatMessageList: () => React.JSX.Element;