@yext/chat-ui-react 0.8.8 → 0.9.0

package/src/components/ChatInput.tsx

@@ -1,10 +1,11 @@
 import React, { useCallback, useState } from "react";
-import { useChatActions, useChatState } from "@yext/chat-headless-react";
+import { useChatState } from "@yext/chat-headless-react";
 import { ArrowIcon } from "../icons/Arrow";
 import { useComposedCssClasses } from "../hooks";
 import TextareaAutosize from "react-textarea-autosize";
 import { useDefaultHandleApiError } from "../hooks/useDefaultHandleApiError";
 import { withStylelessCssClasses } from "../utils/withStylelessCssClasses";
+import { useSendMessageWithRetries } from "../hooks/useSendMessageWithRetries";
 
 /**
  * The CSS class interface for the {@link ChatInput} component.
@@ -58,6 +59,11 @@ export interface ChatInputProps {
   customCssClasses?: ChatInputCssClasses;
   /** A callback which is called when user sends a message. */
   onSend?: (message: string) => void;
+  /**
+   * A function which is called when a retryable error occurs from
+   * Chat API while processing the user's message.
+   */
+  onRetry?: (e: unknown) => void
 }
 
 /**
@@ -79,27 +85,24 @@ export function ChatInput({
   sendButtonIcon = <ArrowIcon />,
   customCssClasses,
   onSend,
+  onRetry,
 }: ChatInputProps) {
-  const chat = useChatActions();
   const [input, setInput] = useState("");
   const canSendMessage = useChatState(
     (state) => state.conversation.canSendMessage
   );
   const defaultHandleApiError = useDefaultHandleApiError();
-
+  const sendMessageWithRetries =  useSendMessageWithRetries(stream, 1, onRetry)
   const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
 
   const sendMessage = useCallback(async () => {
-    const res = stream
-      ? chat.streamNextMessage(input)
-      : chat.getNextMessage(input);
     setInput("");
-    res
-      .then(() => {
-        onSend?.(input);
+    sendMessageWithRetries(input)
+      .catch(handleError ?? defaultHandleApiError)
+      .finally(() => {
+        onSend?.(input)
       })
-      .catch((e) => (handleError ? handleError(e) : defaultHandleApiError(e)));
-  }, [chat, input, handleError, defaultHandleApiError, stream, onSend]);
+  }, [sendMessageWithRetries, input, handleError, defaultHandleApiError, onSend]);
 
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLTextAreaElement>) => {

package/src/components/ChatPanel.tsx

@@ -4,6 +4,7 @@ import React, {
   useEffect,
   useMemo,
   useRef,
+  useState,
 } from "react";
 import { useChatState } from "@yext/chat-headless-react";
 import {
@@ -76,6 +77,11 @@ export interface ChatPanelProps
   messageSuggestions?: string[];
   /** A callback which is called when user clicks a link. */
   onLinkClick?: (href?: string) => void;
+  /**
+   * Text to display when retrying.
+   * Defaults to "Error occurred. Retrying".
+   */
+  retryText?: string;
 }
 
 /**
@@ -96,6 +102,9 @@ export function ChatPanel(props: ChatPanelProps) {
     handleError,
     messageSuggestions,
     onLinkClick,
+    onSend:onSendProp,
+    onRetry:onRetryProp,
+    retryText = "Error occurred. Retrying",
   } = props;
   const messages = useChatState((state) => state.conversation.messages);
   const loading = useChatState((state) => state.conversation.isLoading);
@@ -106,6 +115,17 @@ export function ChatPanel(props: ChatPanelProps) {
   const reportAnalyticsEvent = useReportAnalyticsEvent();
   useFetchInitialMessage(handleError, stream);
 
+  const [retry, setRetry] = useState(false);
+  const onSend = useCallback((message: string) => {
+    onSendProp?.(message);
+    setRetry(false)
+  }, [onSendProp])
+
+  const onRetry = useCallback((e: unknown) => {
+    onRetryProp?.(e);
+    setRetry(true)
+  }, [onRetryProp])
+
   useEffect(() => {
     reportAnalyticsEvent({
       action: "CHAT_IMPRESSION",
@@ -174,18 +194,29 @@ export function ChatPanel(props: ChatPanelProps) {
                 />
               </div>
             ))}
-            {loading && <LoadingDots />}
+            {loading && <div className="flex">
+              <LoadingDots />
+              {retry && <p className="text-slate-500 text-[13px] font-bold">{retryText}</p>}  
+            </div>}
           </div>
         </div>
         <div className={cssClasses.inputContainer}>
           {suggestions && (
             <MessageSuggestions
+              stream={stream}
+              onSend={onSend}
+              onRetry={onRetry}
               handleError={handleError}
               suggestions={suggestions}
               customCssClasses={cssClasses.messageSuggestionClasses}
             />
           )}
-          <ChatInput {...props} customCssClasses={cssClasses.inputCssClasses} />
+          <ChatInput
+            {...props}
+            onSend={onSend}
+            onRetry={onRetry}
+            customCssClasses={cssClasses.inputCssClasses}
+          />
         </div>
         {footer && (
           <Markdown

package/src/components/MessageSuggestions.tsx

@@ -7,6 +7,7 @@ import {
 import { useDefaultHandleApiError } from "../hooks/useDefaultHandleApiError";
 import { withStylelessCssClasses } from "../utils/withStylelessCssClasses";
 import { useComposedCssClasses } from "../hooks";
+import { useSendMessageWithRetries } from "../hooks/useSendMessageWithRetries";
 
 /**
  * The CSS class interface for the MessageSuggestion component.
@@ -30,6 +31,12 @@ export interface MessageSuggestionsProps {
   handleError?: (e: unknown) => void;
   /** CSS classes for customizing the component styling. */
   customCssClasses?: MessageSuggestionCssClasses;
+  /** {@inheritdoc ChatInputProps.stream} */
+  stream?: boolean;
+  /** {@inheritdoc ChatInputProps.onSend} */
+  onSend?: (message: string) => void;
+  /** {@inheritdoc ChatInputProps.onRetry} */
+  onRetry?: (e: unknown) => void
 }
 
 const defaultClassnames: MessageSuggestionCssClasses = withStylelessCssClasses(
@@ -51,10 +58,14 @@ export const MessageSuggestions: React.FC<MessageSuggestionsProps> = ({
   handleError,
   suggestions,
   customCssClasses,
+  stream = false,
+  onSend,
+  onRetry,
 }) => {
   const actions = useChatActions();
   const notes = useChatState((state) => state.conversation.notes);
   const defaultHandleApiError = useDefaultHandleApiError();
+  const sendMessageWithRetries =  useSendMessageWithRetries(stream, 1, onRetry)
   const sendMsg = useCallback(
     (msg: string) => {
       const newNotes = {
@@ -62,10 +73,13 @@ export const MessageSuggestions: React.FC<MessageSuggestionsProps> = ({
         suggestedReplies: undefined,
       } satisfies MessageNotes;
       actions.setMessageNotes(newNotes);
-      const res = actions.getNextMessage(msg);
-      res.catch(handleError ?? defaultHandleApiError);
+      sendMessageWithRetries(msg)
+        .catch(handleError ?? defaultHandleApiError)
+        .finally(() => {
+          onSend?.(msg)
+        })
     },
-    [actions, notes, handleError, defaultHandleApiError]
+    [notes, actions, sendMessageWithRetries, handleError, defaultHandleApiError, onSend]
   );
 
   const classes = useComposedCssClasses(defaultClassnames, customCssClasses);

package/src/hooks/useSendMessageWithRetries.ts

@@ -0,0 +1,49 @@
+import { ApiError, useChatActions } from "@yext/chat-headless-react";
+import { useCallback } from "react";
+
+/**
+ * Returns a function that sends a message to the chat API with retries
+ * if the API returns a 5xx status code.
+ * 
+ * @remarks
+ * The function will throw the error if the maximum number of retries is reached
+ * or if the error is not a 5xx status code.
+ * 
+ * @internal
+ * 
+ * @param stream - If true, use streaming API
+ * @param maxRetries - Maximum number of retries
+ * @param onRetry - Callback to handle error on each retry
+ * 
+ */
+export function useSendMessageWithRetries(
+  stream = false,
+  maxRetries = 0,
+  onRetry?: (e: unknown) => void
+): (input: string) => Promise<void> {
+  const chat = useChatActions()
+  return useCallback(async (input: string) => {
+    let err: unknown;
+    let text = input;
+    for (let numRetries = 0; numRetries <= maxRetries; numRetries++) {
+      if (numRetries > 0 && !!err) {
+        if (err instanceof ApiError && !!err.statusCode && err.statusCode >= 500) {
+          onRetry?.(err)
+          // avoid re-adding user message to conversation history on retry
+          text = "";
+        } else {
+          throw err;
+        }
+      }
+      try {
+        await (stream
+          ? chat.streamNextMessage(text)
+          : chat.getNextMessage(text));
+        return;
+      } catch (e) {
+        err = e;
+      }
+    }
+    throw err
+  }, [chat, maxRetries, onRetry, stream])
+}