@yext/chat-ui-react 0.10.1 → 0.11.0

package/src/components/MessageBubble.tsx

@@ -43,7 +43,7 @@ const builtInCssClasses: MessageBubbleCssClasses =
     text__bot: "text-slate-900",
     text__user: "text-white break-words",
     timestamp:
-      "w-fit my-0.5 ml-4 @lg:ml-0 text-slate-400 text-[10px] @[480px]:text-[13px] opacity-0 peer-hover:opacity-100 duration-200 whitespace-pre-wrap",
+      "w-fit ml-4 @lg:ml-0 text-slate-400 text-[10px] @[480px]:text-[13px] opacity-0 peer-hover:opacity-100 duration-200 whitespace-pre-wrap",
     timestamp__bot: "",
     timestamp__user: "ml-auto",
     feedbackButtonsCssClasses: {},
@@ -75,6 +75,8 @@ export interface MessageBubbleProps {
   formatTimestamp?: (timestamp: string) => string;
   /** CSS classes for customizing the component styling. */
   customCssClasses?: MessageBubbleCssClasses;
+  /** Link target open behavior on click. */
+  linkTarget?: string;
   /** A callback which is called when user clicks a link. */
   onLinkClick?: (href?: string) => void;
 }
@@ -92,6 +94,7 @@ export function MessageBubble({
   showTimestamp = true,
   customCssClasses,
   formatTimestamp = defaultFormatTimestamp,
+  linkTarget,
   onLinkClick,
 }: MessageBubbleProps) {
   const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
@@ -141,6 +144,7 @@ export function MessageBubble({
             content={message.text}
             responseId={message.responseId}
             customCssClasses={markdownCssClasses}
+            linkTarget={linkTarget}
             onLinkClick={onLinkClick}
           />
         </div>

package/src/components/MessageSuggestions.tsx

@@ -36,7 +36,7 @@ export interface MessageSuggestionsProps {
   /** {@inheritdoc ChatInputProps.onSend} */
   onSend?: (message: string) => void;
   /** {@inheritdoc ChatInputProps.onRetry} */
-  onRetry?: (e: unknown) => void
+  onRetry?: (e: unknown) => void;
 }
 
 const defaultClassnames: MessageSuggestionCssClasses = withStylelessCssClasses(
@@ -65,7 +65,7 @@ export const MessageSuggestions: React.FC<MessageSuggestionsProps> = ({
   const actions = useChatActions();
   const notes = useChatState((state) => state.conversation.notes);
   const defaultHandleApiError = useDefaultHandleApiError();
-  const sendMessageWithRetries =  useSendMessageWithRetries(stream, 1, onRetry)
+  const sendMessageWithRetries = useSendMessageWithRetries(stream, 1, onRetry);
   const sendMsg = useCallback(
     (msg: string) => {
       const newNotes = {
@@ -76,10 +76,17 @@ export const MessageSuggestions: React.FC<MessageSuggestionsProps> = ({
       sendMessageWithRetries(msg)
         .catch(handleError ?? defaultHandleApiError)
         .finally(() => {
-          onSend?.(msg)
-        })
+          onSend?.(msg);
+        });
     },
-    [notes, actions, sendMessageWithRetries, handleError, defaultHandleApiError, onSend]
+    [
+      notes,
+      actions,
+      sendMessageWithRetries,
+      handleError,
+      defaultHandleApiError,
+      onSend,
+    ]
   );
 
   const classes = useComposedCssClasses(defaultClassnames, customCssClasses);

package/src/hooks/useFetchInitialMessage.ts

@@ -16,7 +16,7 @@ import { useDefaultHandleApiError } from "../hooks/useDefaultHandleApiError";
 export function useFetchInitialMessage(
   handleError?: (e: unknown) => void,
   stream = false,
-  customCondition = true,
+  customCondition = true
 ) {
   const chat = useChatActions();
   const defaultHandleApiError = useDefaultHandleApiError();
@@ -24,12 +24,20 @@ export function useFetchInitialMessage(
   const canSendMessage = useChatState(
     (state) => state.conversation.canSendMessage
   );
-  
+
   useEffect(() => {
     if (messages.length !== 0 || !canSendMessage || !customCondition) {
       return;
     }
     const res = stream ? chat.streamNextMessage() : chat.getNextMessage();
     res.catch((e) => (handleError ? handleError(e) : defaultHandleApiError(e)));
-  }, [chat, stream, handleError, defaultHandleApiError, canSendMessage, customCondition, messages.length]);
+  }, [
+    chat,
+    stream,
+    handleError,
+    defaultHandleApiError,
+    canSendMessage,
+    customCondition,
+    messages.length,
+  ]);
 }

package/src/hooks/useSendMessageWithRetries.ts

@@ -4,46 +4,53 @@ 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;
+  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;
         }
       }
-      try {
-        await (stream
-          ? chat.streamNextMessage(text)
-          : chat.getNextMessage(text));
-        return;
-      } catch (e) {
-        err = e;
-      }
-    }
-    throw err
-  }, [chat, maxRetries, onRetry, stream])
+      throw err;
+    },
+    [chat, maxRetries, onRetry, stream]
+  );
 }