@yext/chat-ui-react 0.8.7 → 0.9.0

package/lib/esm/src/hooks/useSendMessageWithRetries.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 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 declare function useSendMessageWithRetries(stream?: boolean, maxRetries?: number, onRetry?: (e: unknown) => void): (input: string) => Promise<void>;
+//# sourceMappingURL=useSendMessageWithRetries.d.ts.map

package/lib/esm/src/hooks/useSendMessageWithRetries.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSendMessageWithRetries.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useSendMessageWithRetries.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,yBAAyB,CACvC,MAAM,UAAQ,EACd,UAAU,SAAI,EACd,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,GAC7B,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CA0BlC"}

package/lib/esm/src/hooks/useSendMessageWithRetries.mjs

@@ -0,0 +1,50 @@
+import { useChatActions, ApiError } 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
+ *
+ */
+function useSendMessageWithRetries(stream = false, maxRetries = 0, onRetry) {
+    const chat = useChatActions();
+    return useCallback(async (input) => {
+        let err;
+        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]);
+}
+
+export { useSendMessageWithRetries };
+//# sourceMappingURL=useSendMessageWithRetries.mjs.map

package/lib/esm/src/hooks/useSendMessageWithRetries.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSendMessageWithRetries.mjs","sources":["../../../../src/hooks/useSendMessageWithRetries.ts"],"sourcesContent":["import { ApiError, useChatActions } from \"@yext/chat-headless-react\";\nimport { useCallback } from \"react\";\n\n/**\n * Returns a function that sends a message to the chat API with retries\n * if the API returns a 5xx status code.\n * \n * @remarks\n * The function will throw the error if the maximum number of retries is reached\n * or if the error is not a 5xx status code.\n * \n * @internal\n * \n * @param stream - If true, use streaming API\n * @param maxRetries - Maximum number of retries\n * @param onRetry - Callback to handle error on each retry\n * \n */\nexport function useSendMessageWithRetries(\n  stream = false,\n  maxRetries = 0,\n  onRetry?: (e: unknown) => void\n): (input: string) => Promise<void> {\n  const chat = useChatActions()\n  return useCallback(async (input: string) => {\n    let err: unknown;\n    let text = input;\n    for (let numRetries = 0; numRetries <= maxRetries; numRetries++) {\n      if (numRetries > 0 && !!err) {\n        if (err instanceof ApiError && !!err.statusCode && err.statusCode >= 500) {\n          onRetry?.(err)\n          // avoid re-adding user message to conversation history on retry\n          text = \"\";\n        } else {\n          throw err;\n        }\n      }\n      try {\n        await (stream\n          ? chat.streamNextMessage(text)\n          : chat.getNextMessage(text));\n        return;\n      } catch (e) {\n        err = e;\n      }\n    }\n    throw err\n  }, [chat, maxRetries, onRetry, stream])\n}\n"],"names":[],"mappings":";;;AAGA;;;;;;;;;;;;;;AAcG;AACG,SAAU,yBAAyB,CACvC,MAAM,GAAG,KAAK,EACd,UAAU,GAAG,CAAC,EACd,OAA8B,EAAA;AAE9B,IAAA,MAAM,IAAI,GAAG,cAAc,EAAE,CAAA;AAC7B,IAAA,OAAO,WAAW,CAAC,OAAO,KAAa,KAAI;AACzC,QAAA,IAAI,GAAY,CAAC;QACjB,IAAI,IAAI,GAAG,KAAK,CAAC;QACjB,KAAK,IAAI,UAAU,GAAG,CAAC,EAAE,UAAU,IAAI,UAAU,EAAE,UAAU,EAAE,EAAE;AAC/D,YAAA,IAAI,UAAU,GAAG,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE;AAC3B,gBAAA,IAAI,GAAG,YAAY,QAAQ,IAAI,CAAC,CAAC,GAAG,CAAC,UAAU,IAAI,GAAG,CAAC,UAAU,IAAI,GAAG,EAAE;AACxE,oBAAA,OAAO,GAAG,GAAG,CAAC,CAAA;;oBAEd,IAAI,GAAG,EAAE,CAAC;AACX,iBAAA;AAAM,qBAAA;AACL,oBAAA,MAAM,GAAG,CAAC;AACX,iBAAA;AACF,aAAA;YACD,IAAI;AACF,gBAAA,OAAO,MAAM;AACX,sBAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;sBAC5B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC;gBAC/B,OAAO;AACR,aAAA;AAAC,YAAA,OAAO,CAAC,EAAE;gBACV,GAAG,GAAG,CAAC,CAAC;AACT,aAAA;AACF,SAAA;AACD,QAAA,MAAM,GAAG,CAAA;KACV,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAA;AACzC;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yext/chat-ui-react",
-  "version": "0.8.7",
+  "version": "0.9.0",
   "description": "A library of React Components for powering Yext Chat integrations.",
   "author": "clippy@yext.com",
   "main": "./lib/commonjs/src/index.js",
@@ -69,7 +69,7 @@
     "@testing-library/user-event": "^14.4.3",
     "@types/jest": "^29.5.1",
     "@types/react": "^18.2.7",
-    "@yext/chat-headless-react": "^0.6.1",
+    "@yext/chat-headless-react": "^0.7.0",
     "@yext/eslint-config": "^1.0.0",
     "babel-jest": "^29.5.0",
     "eslint": "^8.39.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,25 +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)
-    }).catch((e) => (handleError ? handleError(e) : defaultHandleApiError(e)));
-  }, [chat, input, handleError, defaultHandleApiError, stream, onSend]);
+    sendMessageWithRetries(input)
+      .catch(handleError ?? defaultHandleApiError)
+      .finally(() => {
+        onSend?.(input)
+      })
+  }, [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,17 +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/Markdown.tsx

@@ -78,7 +78,7 @@ export function Markdown({
           responseId,
         },
       });
-      onLinkClick?.(href)
+      onLinkClick?.(href);
     };
     return {
       a: ({ node: _, children, ...props }) => {
@@ -95,7 +95,13 @@ export function Markdown({
         );
       },
     };
-  }, [reportAnalyticsEvent, linkClickEvent, responseId, cssClasses, onLinkClick]);
+  }, [
+    reportAnalyticsEvent,
+    linkClickEvent,
+    responseId,
+    cssClasses,
+    onLinkClick,
+  ]);
 
   return (
     <ReactMarkdown

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.
@@ -24,8 +25,18 @@ export interface MessageSuggestionCssClasses {
  * @public
  */
 export interface MessageSuggestionsProps {
+  /** List of clickable message suggestions to render. */
   suggestions: string[];
+  /** {@inheritdoc ChatInputProps.handleError} */
+  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(
@@ -44,12 +55,17 @@ const defaultClassnames: MessageSuggestionCssClasses = withStylelessCssClasses(
  * @internal
  */
 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 = {
@@ -57,10 +73,13 @@ export const MessageSuggestions: React.FC<MessageSuggestionsProps> = ({
         suggestedReplies: undefined,
       } satisfies MessageNotes;
       actions.setMessageNotes(newNotes);
-      const res = actions.getNextMessage(msg);
-      res.catch(defaultHandleApiError);
+      sendMessageWithRetries(msg)
+        .catch(handleError ?? defaultHandleApiError)
+        .finally(() => {
+          onSend?.(msg)
+        })
     },
-    [actions, notes, 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])
+}