@botonic/react 0.54.0 → 0.55.0

package/src/index-types.ts

@@ -87,12 +87,17 @@ export interface MinimalHubtypeMessage {
   type: string
   action: string
   text: string
+  event_data?: Record<string, unknown> | null
 }
 
 export interface WebchatLocaleContents {
   inputPlaceholder: string
 }
 
+export interface GetMessageByIdOptions {
+  includeDebugEvents?: boolean
+}
+
 export interface PreviewUtils {
   getChunkIdsGroupedBySource: (
     chunkIds: string[]
@@ -101,7 +106,10 @@ export interface PreviewUtils {
     chunkIdsGroupedBySource: ChunkIdsGroupedBySourceData[]
   ) => void
   onClickOpenToolResults: (toolExecution: ToolExecution) => void
-  getMessageById: (messageId: string) => Promise<MinimalHubtypeMessage>
+  getMessageById: (
+    messageId: string,
+    options?: GetMessageByIdOptions
+  ) => Promise<MinimalHubtypeMessage>
   trackPreviewEventOpened: (eventProperties: Record<string, unknown>) => void
 }
 

package/src/webchat/input-panel/index.tsx

@@ -1,7 +1,5 @@
-import { INPUT } from '@botonic/core'
 import type React from 'react'
 import { useContext } from 'react'
-import { v7 as uuidv7 } from 'uuid'
 
 import { WEBCHAT } from '../../constants'
 import { getFullMimeWhitelist } from '../../message-utils'
@@ -14,6 +12,7 @@ import { PersistentMenu } from './persistent-menu'
 import { SendButton } from './send-button'
 import { UserInputContainer } from './styles'
 import { Textarea } from './textarea'
+import { useTypingChatEventSender } from './use-typing-chat-event-sender'
 
 interface InputPanelProps {
   handleAttachment: (event: any) => void
@@ -63,21 +62,12 @@ export const InputPanel = ({
     textareaRef.current.value = ''
   }
 
-  const sendChatEvent = async chatEvent => {
-    const chatEventInput = {
-      id: uuidv7(),
-      type: INPUT.CHAT_EVENT,
-      data: chatEvent,
-    }
-    if (onUserInput) {
-      onUserInput({
-        user: webchatState.session.user,
-        input: chatEventInput,
-        session: webchatState.session,
-        lastRoutePath: webchatState.lastRoutePath,
-      })
-    }
-  }
+  // Network layer: deduplicates typing_on/off before they reach onUserInput.
+  const sendChatEvent = useTypingChatEventSender({
+    onUserInput,
+    session: webchatState.session,
+    lastRoutePath: webchatState.lastRoutePath,
+  })
 
   return (
     <UserInputContainer

package/src/webchat/input-panel/textarea.tsx

@@ -1,20 +1,22 @@
-/* eslint-disable @typescript-eslint/no-use-before-define */
 import type React from 'react'
 import { useContext } from 'react'
 import TextareaAutosize from 'react-textarea-autosize'
 
-import { Typing } from '../../index-types'
 import { WebchatContext } from '../../webchat/context'
 import { useDeviceAdapter } from '../hooks'
 import { TextAreaContainer } from './styles'
+import type { TypingChatEvent } from './typing-network-sender'
+import { useTypingSession } from './use-typing-session'
 
 interface TextareaProps {
   host: HTMLElement
   textareaRef: React.MutableRefObject<HTMLTextAreaElement | undefined>
-  sendChatEvent: (event: string) => Promise<void>
+  sendChatEvent: (event: TypingChatEvent) => Promise<boolean>
   sendTextAreaText: () => Promise<void>
 }
 
+export { TYPING_IDLE_MS } from './use-typing-session'
+
 export const Textarea = ({
   host,
   textareaRef,
@@ -22,86 +24,44 @@ export const Textarea = ({
   sendTextAreaText,
 }: TextareaProps) => {
   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)
 
-  let isTyping = false
-  let typingTimeout: NodeJS.Timeout | null = null
-
   const persistentMenuOptions = webchatState.theme.userInput?.persistentMenu
-
   const placeholder = webchatState.theme.userInput?.box?.placeholder
-
   const userInputBoxStyle = webchatState.theme.userInput?.box?.style
 
-  const onKeyDown = event => {
-    if (event.keyCode === 13 && event.shiftKey === false) {
+  const onKeyDown = async event => {
+    if (event.key === 'Enter' && !event.shiftKey) {
       event.preventDefault()
-      sendTextAreaText()
-      stopTyping()
-    }
-  }
-
-  const onKeyUp = () => {
-    if (!textareaRef.current) {
-      return
-    }
-
-    if (textareaRef.current.value === '') {
-      stopTyping()
-      return
-    }
-    if (!isTyping) {
-      startTyping()
-    }
-    clearTimeoutWithReset(true)
-  }
-
-  const clearTimeoutWithReset = (reset: boolean) => {
-    const waitTime = 20 * 1000
-    if (typingTimeout) {
-      clearTimeout(typingTimeout)
-    }
-    if (reset) {
-      typingTimeout = setTimeout(stopTyping, waitTime)
+      // Run in parallel: stop typing must not wait for sendTextAreaText to finish.
+      await Promise.all([stopTyping(), sendTextAreaText()])
     }
   }
 
-  const startTyping = () => {
-    isTyping = true
-    sendChatEvent(Typing.On)
-  }
-
-  const stopTyping = () => {
-    clearTimeoutWithReset(false)
-    isTyping = false
-    sendChatEvent(Typing.Off)
-  }
-
-  const handleFocus = () => {
-    setIsInputFocused(true)
-  }
-
-  const handleBlur = () => {
-    setIsInputFocused(false)
-  }
-
   return (
     <TextAreaContainer>
       <TextareaAutosize
         ref={(ref: HTMLTextAreaElement) => {
           textareaRef.current = ref
         }}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
+        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={e => onKeyDown(e)}
-        onKeyUp={onKeyUp}
+        onKeyDown={onKeyDown}
         style={{
           display: 'flex',
           fontSize: 16,

package/src/webchat/input-panel/typing-network-sender.ts

@@ -0,0 +1,168 @@
+import type { Session as CoreSession } from '@botonic/core'
+import { INPUT } from '@botonic/core'
+import { v7 as uuidv7 } from 'uuid'
+
+import { Typing } from '../../index-types'
+
+/** Network debounce before `typing_off` is sent after a stop signal. */
+export 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 function buildChatEventPayload(
+  chatEvent: TypingChatEvent,
+  { session, lastRoutePath }: ChatEventContext
+) {
+  return {
+    user: session.user,
+    input: {
+      id: uuidv7(),
+      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.
+ */
+export class TypingNetworkSender {
+  private disposed = false
+  private isTypingOnServer = false
+  // Snapshot of session/route captured when typing_on was delivered.
+  private activeContext: ChatEventContext | null = null
+  private pendingOffTimer: ReturnType<typeof setTimeout> | null = null
+  private pendingTypingOn: Promise<TypingOnSendResult> | null = null
+
+  constructor(
+    private readonly getContext: () => ChatEventContext,
+    private readonly sendToServer: SendToServer
+  ) {}
+
+  /**
+   * For `Typing.On`, returns whether the event was delivered.
+   * For `Typing.Off`, returns whether the stop was scheduled.
+   */
+  async send(
+    chatEvent: TypingChatEvent
+  ): Promise<TypingOnSendResult | TypingOffSendResult> {
+    if (chatEvent === Typing.On) {
+      return this.userStartedTyping()
+    }
+
+    return this.userStoppedTyping()
+  }
+
+  private sendTypingOffBestEffort(context: ChatEventContext) {
+    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)
+  }
+
+  private async userStartedTyping(): Promise<TypingOnSendResult> {
+    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
+  }
+
+  private userStoppedTyping(): Promise<TypingOffSendResult> {
+    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)
+  }
+
+  private resetTypingState() {
+    this.isTypingOnServer = false
+    this.activeContext = null
+  }
+
+  private cancelPendingOff() {
+    if (!this.pendingOffTimer) {
+      return
+    }
+
+    clearTimeout(this.pendingOffTimer)
+    this.pendingOffTimer = null
+  }
+}

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

@@ -0,0 +1,67 @@
+import type { Session as CoreSession } from '@botonic/core'
+import { useCallback, useEffect, useRef } from 'react'
+import {
+  buildChatEventPayload,
+  type TypingChatEvent,
+  TypingNetworkSender,
+} from './typing-network-sender'
+
+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 function useTypingChatEventSender({
+  onUserInput,
+  session,
+  lastRoutePath,
+}: UseTypingChatEventSenderArgs) {
+  // Always read the latest handler/session without recreating the sender.
+  const contextRef = useRef({ onUserInput, session, lastRoutePath })
+  const typingSenderRef = useRef<TypingNetworkSender | null>(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: TypingChatEvent): Promise<boolean> => {
+    return (await typingSenderRef.current?.send(chatEvent)) ?? false
+  }, [])
+}

package/src/webchat/input-panel/use-typing-session.ts

@@ -0,0 +1,124 @@
+import { useCallback, useEffect, useRef } from 'react'
+
+import { Typing } from '../../index-types'
+import type { TypingChatEvent } from './typing-network-sender'
+
+/** Local UI inactivity before the textarea stops emitting typing events. */
+export const TYPING_IDLE_MS = 10 * 1000
+
+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 function useTypingSession(sendChatEvent: SendTypingEvent) {
+  const isTyping = useRef(false)
+  // Bumps on each start/stop so stale async stopTyping() calls can be ignored.
+  const startOrStopTypingCount = useRef(0)
+  const idleTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
+  // Shares one in-flight typing_on while delivery is still pending.
+  const pendingTypingOn = useRef<Promise<boolean> | null>(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: string) => {
+      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 }
+}

package/src/webchat/tracking.ts

@@ -1,36 +1,10 @@
-import type {
-  EventCustom,
-  EventFeedback,
-  EventFeedbackKnowledgebase,
-} from '@botonic/core'
+import type { EventCustom, EventFeedback } from '@botonic/core'
 import { useContext } from 'react'
-import { v7 as uuidv7 } from 'uuid'
 
 import type { ActionRequest } from '../index-types'
 import { WebchatContext } from './context'
 
-export enum EventAction {
-  FeedbackKnowledgebase = 'feedback_knowledgebase',
-}
-interface TrackKnowledgebaseFeedbackArgs {
-  messageId: string
-  isUseful: boolean
-  botInteractionId?: string
-  inferenceId?: string
-}
-
-enum FeedbackOption {
-  ThumbsUp = 'thumbsUp',
-  ThumbsDown = 'thumbsDown',
-}
-
 interface UseTracking {
-  trackKnowledgebaseFeedback: ({
-    messageId,
-    isUseful,
-    botInteractionId,
-    inferenceId,
-  }: TrackKnowledgebaseFeedbackArgs) => Promise<void>
   trackCustomEvent: (event: EventCustom) => Promise<void>
   trackFeedbackEvent: (event: EventFeedback) => Promise<void>
 }
@@ -53,34 +27,6 @@ export function useTracking(): UseTracking {
     return request
   }
 
-  const trackKnowledgebaseFeedback = async ({
-    messageId,
-    isUseful,
-    botInteractionId,
-    inferenceId,
-  }: TrackKnowledgebaseFeedbackArgs) => {
-    if (!trackEvent) {
-      return
-    }
-    const request = getRequest()
-
-    // inferenceId and botInteractionId are strings, but in local development they are undefined
-    const event: EventFeedbackKnowledgebase = {
-      action: EventAction.FeedbackKnowledgebase,
-      knowledgebaseInferenceId: inferenceId as string,
-      feedbackBotInteractionId: botInteractionId as string,
-      feedbackTargetId: messageId,
-      feedbackGroupId: uuidv7(),
-      possibleOptions: [FeedbackOption.ThumbsDown, FeedbackOption.ThumbsUp],
-      possibleValues: [0, 1],
-      option: isUseful ? FeedbackOption.ThumbsUp : FeedbackOption.ThumbsDown,
-      value: isUseful ? 1 : 0,
-    }
-    const { action, ...eventArgs } = event
-
-    await trackEvent(request, action, eventArgs)
-  }
-
   const trackCustomEvent = async (event: EventCustom) => {
     if (!trackEvent) {
       return
@@ -101,5 +47,5 @@ export function useTracking(): UseTracking {
     await trackEvent(request, action, eventArgs)
   }
 
-  return { trackKnowledgebaseFeedback, trackCustomEvent, trackFeedbackEvent }
+  return { trackCustomEvent, trackFeedbackEvent }
 }

package/lib/cjs/components/message/message-feedback.d.ts

@@ -1,7 +0,0 @@
-interface RatingProps {
-    botInteractionId?: string;
-    inferenceId?: string;
-    messageId: string;
-}
-export declare const MessageFeedback: ({ botInteractionId, inferenceId, messageId, }: RatingProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/lib/cjs/components/message/message-feedback.js

@@ -1,55 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MessageFeedback = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const thumbs_down_svg_1 = tslib_1.__importDefault(require("../../assets/thumbs-down.svg"));
-const thumbs_up_svg_1 = tslib_1.__importDefault(require("../../assets/thumbs-up.svg"));
-const util_1 = require("../../util");
-const context_1 = require("../../webchat/context");
-const tracking_1 = require("../../webchat/tracking");
-const styles_1 = require("./styles");
-const MessageFeedback = ({ botInteractionId, inferenceId, messageId, }) => {
-    const { webchatState, updateMessage } = (0, react_1.useContext)(context_1.WebchatContext);
-    const { trackKnowledgebaseFeedback } = (0, tracking_1.useTracking)();
-    const [className, setClassName] = (0, react_1.useState)('');
-    const [disabled, setDisabled] = (0, react_1.useState)({
-        positive: false,
-        negative: false,
-    });
-    const updateMsgWithFeedback = (feedbackEnabled) => {
-        const message = webchatState.messagesJSON.find(message => message.id === messageId);
-        const updatedMsg = {
-            ...message,
-            feedbackEnabled,
-        };
-        updateMessage(updatedMsg);
-    };
-    (0, react_1.useEffect)(() => {
-        updateMsgWithFeedback(true);
-    }, []);
-    (0, react_1.useEffect)(() => {
-        if (disabled.positive || disabled.negative) {
-            setClassName('clicked');
-            updateMsgWithFeedback(false);
-        }
-    }, [disabled]);
-    const handleClick = async (isUseful) => {
-        if (isUseful) {
-            setDisabled({ positive: false, negative: true });
-        }
-        else {
-            setDisabled({ positive: true, negative: false });
-        }
-        await trackKnowledgebaseFeedback({
-            messageId,
-            isUseful,
-            botInteractionId,
-            inferenceId,
-        });
-    };
-    return ((0, jsx_runtime_1.jsxs)(styles_1.FeedbackMessageContainer, { children: [(0, jsx_runtime_1.jsx)(styles_1.FeedbackButton, { className: className, disabled: disabled.positive, onClick: () => handleClick(true), children: (0, jsx_runtime_1.jsx)("img", { src: (0, util_1.resolveImage)(thumbs_up_svg_1.default) }) }), (0, jsx_runtime_1.jsx)(styles_1.FeedbackButton, { className: className, disabled: disabled.negative, onClick: () => handleClick(false), children: (0, jsx_runtime_1.jsx)("img", { src: (0, util_1.resolveImage)(thumbs_down_svg_1.default) }) })] }));
-};
-exports.MessageFeedback = MessageFeedback;
-//# sourceMappingURL=message-feedback.js.map