@yext/chat-ui-react 0.10.0 → 0.10.2

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

@@ -1 +1 @@
-{"version":3,"file":"useFetchInitialMessage.mjs","sources":["../../../../src/hooks/useFetchInitialMessage.ts"],"sourcesContent":["import { useEffect } from \"react\";\nimport { useChatState, useChatActions } from \"@yext/chat-headless-react\";\nimport { useDefaultHandleApiError } from \"../hooks/useDefaultHandleApiError\";\n\n/**\n * Sends a request to Chat API to fetch the initial message when the\n * conversation first start or when the message history is reset.\n *\n * @internal\n *\n * @param handleError - A function which is called when an error occurs while fetching for initial message.\n *                      By default, the error is logged to the console and an error message is added to state.\n * @param stream      - Enable streaming behavior by making a request to Chat Streaming API. Defaults to false.\n * @param customCondition - additional condition for when to fetch initial message\n */\nexport function useFetchInitialMessage(\n  handleError?: (e: unknown) => void,\n  stream = false,\n  customCondition = true,\n) {\n  const chat = useChatActions();\n  const defaultHandleApiError = useDefaultHandleApiError();\n  const messages = useChatState((state) => state.conversation.messages);\n  const canSendMessage = useChatState(\n    (state) => state.conversation.canSendMessage\n  );\n  \n  useEffect(() => {\n    if (messages.length !== 0 || !canSendMessage || !customCondition) {\n      return;\n    }\n    const res = stream ? chat.streamNextMessage() : chat.getNextMessage();\n    res.catch((e) => (handleError ? handleError(e) : defaultHandleApiError(e)));\n  }, [chat, stream, handleError, defaultHandleApiError, canSendMessage, customCondition, messages.length]);\n}\n"],"names":[],"mappings":";;;;AAIA;;;;;;;;;;AAUG;AACG,SAAU,sBAAsB,CACpC,WAAkC,EAClC,MAAM,GAAG,KAAK,EACd,eAAe,GAAG,IAAI,EAAA;AAEtB,IAAA,MAAM,IAAI,GAAG,cAAc,EAAE,CAAC;AAC9B,IAAA,MAAM,qBAAqB,GAAG,wBAAwB,EAAE,CAAC;AACzD,IAAA,MAAM,QAAQ,GAAG,YAAY,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;AACtE,IAAA,MAAM,cAAc,GAAG,YAAY,CACjC,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,cAAc,CAC7C,CAAC;IAEF,SAAS,CAAC,MAAK;QACb,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,eAAe,EAAE;YAChE,OAAO;AACR,SAAA;AACD,QAAA,MAAM,GAAG,GAAG,MAAM,GAAG,IAAI,CAAC,iBAAiB,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QACtE,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAC9E,KAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,qBAAqB,EAAE,cAAc,EAAE,eAAe,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC;AAC3G;;;;"}
+{"version":3,"file":"useFetchInitialMessage.mjs","sources":["../../../../src/hooks/useFetchInitialMessage.ts"],"sourcesContent":["import { useEffect } from \"react\";\nimport { useChatState, useChatActions } from \"@yext/chat-headless-react\";\nimport { useDefaultHandleApiError } from \"../hooks/useDefaultHandleApiError\";\n\n/**\n * Sends a request to Chat API to fetch the initial message when the\n * conversation first start or when the message history is reset.\n *\n * @internal\n *\n * @param handleError - A function which is called when an error occurs while fetching for initial message.\n *                      By default, the error is logged to the console and an error message is added to state.\n * @param stream      - Enable streaming behavior by making a request to Chat Streaming API. Defaults to false.\n * @param customCondition - additional condition for when to fetch initial message\n */\nexport function useFetchInitialMessage(\n  handleError?: (e: unknown) => void,\n  stream = false,\n  customCondition = true\n) {\n  const chat = useChatActions();\n  const defaultHandleApiError = useDefaultHandleApiError();\n  const messages = useChatState((state) => state.conversation.messages);\n  const canSendMessage = useChatState(\n    (state) => state.conversation.canSendMessage\n  );\n\n  useEffect(() => {\n    if (messages.length !== 0 || !canSendMessage || !customCondition) {\n      return;\n    }\n    const res = stream ? chat.streamNextMessage() : chat.getNextMessage();\n    res.catch((e) => (handleError ? handleError(e) : defaultHandleApiError(e)));\n  }, [\n    chat,\n    stream,\n    handleError,\n    defaultHandleApiError,\n    canSendMessage,\n    customCondition,\n    messages.length,\n  ]);\n}\n"],"names":[],"mappings":";;;;AAIA;;;;;;;;;;AAUG;AACG,SAAU,sBAAsB,CACpC,WAAkC,EAClC,MAAM,GAAG,KAAK,EACd,eAAe,GAAG,IAAI,EAAA;AAEtB,IAAA,MAAM,IAAI,GAAG,cAAc,EAAE,CAAC;AAC9B,IAAA,MAAM,qBAAqB,GAAG,wBAAwB,EAAE,CAAC;AACzD,IAAA,MAAM,QAAQ,GAAG,YAAY,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;AACtE,IAAA,MAAM,cAAc,GAAG,YAAY,CACjC,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,cAAc,CAC7C,CAAC;IAEF,SAAS,CAAC,MAAK;QACb,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,eAAe,EAAE;YAChE,OAAO;AACR,SAAA;AACD,QAAA,MAAM,GAAG,GAAG,MAAM,GAAG,IAAI,CAAC,iBAAiB,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QACtE,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAC9E,KAAC,EAAE;QACD,IAAI;QACJ,MAAM;QACN,WAAW;QACX,qBAAqB;QACrB,cAAc;QACd,eAAe;AACf,QAAA,QAAQ,CAAC,MAAM;AAChB,KAAA,CAAC,CAAC;AACL;;;;"}

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

@@ -1 +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"}
+{"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,CAiClC"}

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

@@ -23,7 +23,9 @@ function useSendMessageWithRetries(stream = false, maxRetries = 0, onRetry) {
         let text = input;
         for (let numRetries = 0; numRetries <= maxRetries; numRetries++) {
             if (numRetries > 0 && !!err) {
-                if (err instanceof ApiError && !!err.statusCode && err.statusCode >= 500) {
+                if (err instanceof ApiError &&
+                    !!err.statusCode &&
+                    err.statusCode >= 500) {
                     onRetry?.(err);
                     // avoid re-adding user message to conversation history on retry
                     text = "";

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

@@ -1 +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;;;;"}
+{"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(\n    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 (\n            err instanceof ApiError &&\n            !!err.statusCode &&\n            err.statusCode >= 500\n          ) {\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    },\n    [chat, maxRetries, onRetry, stream]\n  );\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,CAAC;AAC9B,IAAA,OAAO,WAAW,CAChB,OAAO,KAAa,KAAI;AACtB,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;gBAC3B,IACE,GAAG,YAAY,QAAQ;oBACvB,CAAC,CAAC,GAAG,CAAC,UAAU;AAChB,oBAAA,GAAG,CAAC,UAAU,IAAI,GAAG,EACrB;AACA,oBAAA,OAAO,GAAG,GAAG,CAAC,CAAC;;oBAEf,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,CAAC;KACX,EACD,CAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,CAAC,CACpC,CAAC;AACJ;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yext/chat-ui-react",
-  "version": "0.10.0",
+  "version": "0.10.2",
   "description": "A library of React Components for powering Yext Chat integrations.",
   "author": "clippy@yext.com",
   "main": "./lib/commonjs/src/index.js",
@@ -91,7 +91,7 @@
     "typescript": "^5.0.4"
   },
   "peerDependencies": {
-    "@yext/chat-headless-react": "^0.7.0",
+    "@yext/chat-headless-react": "^0.8.0",
     "react": "^16.14 || ^17 || ^18",
     "react-dom": "^16.14 || ^17 || || ^18"
   },

package/src/components/ChatInput.tsx

@@ -63,7 +63,7 @@ export interface ChatInputProps {
    * A function which is called when a retryable error occurs from
    * Chat API while processing the user's message.
    */
-  onRetry?: (e: unknown) => void
+  onRetry?: (e: unknown) => void;
 }
 
 /**
@@ -92,7 +92,7 @@ export function ChatInput({
     (state) => state.conversation.canSendMessage
   );
   const defaultHandleApiError = useDefaultHandleApiError();
-  const sendMessageWithRetries =  useSendMessageWithRetries(stream, 1, onRetry)
+  const sendMessageWithRetries = useSendMessageWithRetries(stream, 1, onRetry);
   const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
 
   const sendMessage = useCallback(async () => {
@@ -100,18 +100,27 @@ export function ChatInput({
     sendMessageWithRetries(input)
       .catch(handleError ?? defaultHandleApiError)
       .finally(() => {
-        onSend?.(input)
-      })
-  }, [sendMessageWithRetries, input, handleError, defaultHandleApiError, onSend]);
+        onSend?.(input);
+      });
+  }, [
+    sendMessageWithRetries,
+    input,
+    handleError,
+    defaultHandleApiError,
+    onSend,
+  ]);
 
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-      if (!e.shiftKey && e.key === "Enter" && 
+      if (
+        !e.shiftKey &&
+        e.key === "Enter" &&
         // The Japanese Keyboard uses "Enter" key to convert from Hiragana to Kanji.
         // "isComposing" is a flag that indicates whether the event is part of an ongoing composition session.
         // Safari does not support `isComposing` with the Japanese IME event,
         // so we have to additionally check for the keyCode to handle that edge case.
-        !(e.nativeEvent.isComposing || e.keyCode === 229)) {
+        !(e.nativeEvent.isComposing || e.keyCode === 229)
+      ) {
         e.preventDefault();
         if (canSendMessage && input.trim().length !== 0) {
           sendMessage();

package/src/components/ChatPanel.tsx

@@ -75,6 +75,10 @@ export interface ChatPanelProps
    * can click on instead of typing their own.
    */
   messageSuggestions?: string[];
+  /** Link target open behavior on click.
+   *  Defaults to "_blank".
+   */
+  linkTarget?: string;
   /** A callback which is called when user clicks a link. */
   onLinkClick?: (href?: string) => void;
   /**
@@ -101,9 +105,10 @@ export function ChatPanel(props: ChatPanelProps) {
     stream,
     handleError,
     messageSuggestions,
+    linkTarget = "_blank",
     onLinkClick,
-    onSend:onSendProp,
-    onRetry:onRetryProp,
+    onSend: onSendProp,
+    onRetry: onRetryProp,
     retryText = "Error occurred. Retrying",
   } = props;
   const messages = useChatState((state) => state.conversation.messages);
@@ -116,15 +121,21 @@ export function ChatPanel(props: ChatPanelProps) {
   useFetchInitialMessage(handleError, stream);
 
   const [retry, setRetry] = useState(false);
-  const onSend = useCallback((message: string) => {
-    onSendProp?.(message);
-    setRetry(false)
-  }, [onSendProp])
+  const onSend = useCallback(
+    (message: string) => {
+      onSendProp?.(message);
+      setRetry(false);
+    },
+    [onSendProp]
+  );
 
-  const onRetry = useCallback((e: unknown) => {
-    onRetryProp?.(e);
-    setRetry(true)
-  }, [onRetryProp])
+  const onRetry = useCallback(
+    (e: unknown) => {
+      onRetryProp?.(e);
+      setRetry(true);
+    },
+    [onRetryProp]
+  );
 
   useEffect(() => {
     reportAnalyticsEvent({
@@ -190,14 +201,21 @@ export function ChatPanel(props: ChatPanelProps) {
                   {...props}
                   customCssClasses={cssClasses.messageBubbleCssClasses}
                   message={message}
+                  linkTarget={linkTarget}
                   onLinkClick={onLinkClick}
                 />
               </div>
             ))}
-            {loading && <div className="flex">
-              <LoadingDots />
-              {retry && <p className="text-slate-500 text-[13px] font-bold">{retryText}</p>}  
-            </div>}
+            {loading && (
+              <div className="flex">
+                <LoadingDots />
+                {retry && (
+                  <p className="text-slate-500 text-[13px] font-bold">
+                    {retryText}
+                  </p>
+                )}
+              </div>
+            )}
           </div>
         </div>
         <div className={cssClasses.inputContainer}>
@@ -222,6 +240,7 @@ export function ChatPanel(props: ChatPanelProps) {
           <Markdown
             content={footer}
             linkClickEvent="WEBSITE"
+            linkTarget={linkTarget}
             onLinkClick={onLinkClick}
             customCssClasses={footerCssClasses}
           />

package/src/components/ChatPopUp.tsx

@@ -162,12 +162,13 @@ export function ChatPopUp(props: ChatPopUpProps) {
   // to avoid message requests immediately on load while the popup is still "hidden"
   const [renderChat, setRenderChat] = useState(false);
 
-
   // only fetch initial message when ChatPanel is closed on load (otherwise, it will be fetched in ChatPanel)
   useFetchInitialMessage(
     showInitialMessagePopUp ? console.error : handleError,
     false,
-    (showUnreadNotification || showInitialMessagePopUp) && !renderChat && !openOnLoad,
+    (showUnreadNotification || showInitialMessagePopUp) &&
+      !renderChat &&
+      !openOnLoad
   );
 
   useEffect(() => {
@@ -180,7 +181,7 @@ export function ChatPopUp(props: ChatPopUpProps) {
   }, [messages.length, openOnLoad, renderChat]);
 
   const onClick = useCallback(() => {
-    setShowChat(prev => !prev);
+    setShowChat((prev) => !prev);
     setRenderChat(true);
     setshowInitialMessage(false);
   }, []);

package/src/components/Markdown.tsx

@@ -46,6 +46,8 @@ interface MarkdownProps {
    * Defaults to 'CHAT_LINK_CLICK'.
    */
   linkClickEvent?: "WEBSITE" | "CHAT_LINK_CLICK";
+  /** Link target open behavior on click. */
+  linkTarget?: string;
   /** A callback which is called when a link is clicked. */
   onLinkClick?: (href?: string) => void;
 }
@@ -64,6 +66,7 @@ export function Markdown({
   responseId,
   customCssClasses,
   linkClickEvent = "CHAT_LINK_CLICK",
+  linkTarget,
   onLinkClick,
 }: MarkdownProps) {
   const reportAnalyticsEvent = useReportAnalyticsEvent();
@@ -86,7 +89,7 @@ export function Markdown({
           <a
             {...props}
             onClick={createClickHandlerFn(props.href)}
-            target="_blank"
+            target={linkTarget}
             rel="noopener noreferrer"
             className={cssClasses.link}
           >
@@ -100,6 +103,7 @@ export function Markdown({
     linkClickEvent,
     responseId,
     cssClasses,
+    linkTarget,
     onLinkClick,
   ]);
 

package/src/components/MessageBubble.tsx

@@ -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]
+  );
 }