@yext/chat-ui-react 0.9.2 → 0.9.3

package/lib/commonjs/package.json.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var version = "0.9.2";
+var version = "0.9.3";
 
 exports.version = version;
 //# sourceMappingURL=package.json.js.map

package/lib/commonjs/src/components/ChatInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ChatInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AASrD;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAaD;;;;GAIG;AACH,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8DAA8D;IAC9D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,uCAAuC;IACvC,cAAc,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC7B,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,mBAAmB,CAAC;IACvC,4DAA4D;IAC5D,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;CAC/B;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,EACxB,WAAiC,EACjC,MAAc,EACd,cAAsB,EACtB,WAAW,EACX,cAA8B,EAC9B,gBAAgB,EAChB,MAAM,EACN,OAAO,GACR,EAAE,cAAc,qBAyDhB"}
+{"version":3,"file":"ChatInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ChatInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AASrD;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAaD;;;;GAIG;AACH,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8DAA8D;IAC9D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,uCAAuC;IACvC,cAAc,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC7B,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,mBAAmB,CAAC;IACvC,4DAA4D;IAC5D,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;CAC/B;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,EACxB,WAAiC,EACjC,MAAc,EACd,cAAsB,EACtB,WAAW,EACX,cAA8B,EAC9B,gBAAgB,EAChB,MAAM,EACN,OAAO,GACR,EAAE,cAAc,qBA8DhB"}

package/lib/commonjs/src/components/ChatInput.js

@@ -45,7 +45,12 @@ function ChatInput({ placeholder = "Type a message...", stream = false, inputAut
         });
     }, [sendMessageWithRetries, input, handleError, defaultHandleApiError, onSend]);
     const handleKeyDown = React.useCallback((e) => {
-        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.preventDefault();
             if (canSendMessage && input.trim().length !== 0) {
                 sendMessage();

package/lib/commonjs/src/components/ChatInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatInput.js","sources":["../../../../src/components/ChatInput.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport { useChatState } from \"@yext/chat-headless-react\";\nimport { ArrowIcon } from \"../icons/Arrow\";\nimport { useComposedCssClasses } from \"../hooks\";\nimport TextareaAutosize from \"react-textarea-autosize\";\nimport { useDefaultHandleApiError } from \"../hooks/useDefaultHandleApiError\";\nimport { withStylelessCssClasses } from \"../utils/withStylelessCssClasses\";\nimport { useSendMessageWithRetries } from \"../hooks/useSendMessageWithRetries\";\n\n/**\n * The CSS class interface for the {@link ChatInput} component.\n *\n * @public\n */\nexport interface ChatInputCssClasses {\n  container?: string;\n  textArea?: string;\n  sendButton?: string;\n}\n\nconst builtInCssClasses: ChatInputCssClasses = withStylelessCssClasses(\n  \"Input\",\n  {\n    container: \"w-full h-fit flex flex-row relative @container\",\n    textArea:\n      \"w-full p-4 pr-12 border border-slate-300 rounded-3xl resize-none text-[13px] @[480px]:text-base placeholder:text-[13px] placeholder:@[480px]:text-base text-slate-900\",\n    sendButton:\n      \"rounded-full p-1.5 w-8 h-8 stroke-2 text-white bg-blue-600 disabled:bg-slate-200 hover:bg-blue-800 active:scale-90 transition-all absolute right-4 bottom-2.5 @[480px]:bottom-3.5\",\n  }\n);\n\n/**\n * The props for the {@link ChatInput} component.\n *\n * @public\n */\nexport interface ChatInputProps {\n  /**\n   * The input's placeholder text when no text has been entered by the user.\n   * Defaults to \"Type a message...\".\n   */\n  placeholder?: string;\n  /**\n   * Enable streaming behavior by making a request to Chat Streaming API.\n   * This feature is experimental, and is subject to change.\n   * Defaults to false.\n   */\n  stream?: boolean;\n  /** Enable auto focus for the input box. Defaults to false. */\n  inputAutoFocus?: boolean;\n  /**\n   * A function which is called when an error occurs from Chat API while processing the user's message.\n   * By default, the error is logged to the console and an error message is added to state.\n   */\n  handleError?: (e: unknown) => void;\n  /** Custom icon for the send button. */\n  sendButtonIcon?: JSX.Element;\n  /** CSS classes for customizing the component styling. */\n  customCssClasses?: ChatInputCssClasses;\n  /** A callback which is called when user sends a message. */\n  onSend?: (message: string) => void;\n  /**\n   * A function which is called when a retryable error occurs from\n   * Chat API while processing the user's message.\n   */\n  onRetry?: (e: unknown) => void\n}\n\n/**\n * A component that allows user to input message and send to Chat API.\n *\n * @remarks\n * Pressing \"Enter\" key will send the current message.\n * To add a newline, press \"Shift\" and \"Enter\".\n *\n * @public\n *\n * @param props - {@link ChatInputProps}\n */\nexport function ChatInput({\n  placeholder = \"Type a message...\",\n  stream = false,\n  inputAutoFocus = false,\n  handleError,\n  sendButtonIcon = <ArrowIcon />,\n  customCssClasses,\n  onSend,\n  onRetry,\n}: ChatInputProps) {\n  const [input, setInput] = useState(\"\");\n  const canSendMessage = useChatState(\n    (state) => state.conversation.canSendMessage\n  );\n  const defaultHandleApiError = useDefaultHandleApiError();\n  const sendMessageWithRetries =  useSendMessageWithRetries(stream, 1, onRetry)\n  const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);\n\n  const sendMessage = useCallback(async () => {\n    setInput(\"\");\n    sendMessageWithRetries(input)\n      .catch(handleError ?? defaultHandleApiError)\n      .finally(() => {\n        onSend?.(input)\n      })\n  }, [sendMessageWithRetries, input, handleError, defaultHandleApiError, onSend]);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n      if (!e.shiftKey && e.key === \"Enter\") {\n        e.preventDefault();\n        if (canSendMessage && input.trim().length !== 0) {\n          sendMessage();\n        }\n      }\n    },\n    [sendMessage, canSendMessage, input]\n  );\n\n  const onInputChange = useCallback(\n    (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n      setInput(e.target.value);\n    },\n    []\n  );\n\n  return (\n    <div className={cssClasses.container}>\n      <TextareaAutosize\n        autoFocus={inputAutoFocus}\n        onKeyDown={handleKeyDown}\n        value={input}\n        onChange={onInputChange}\n        className={cssClasses.textArea}\n        placeholder={placeholder}\n      />\n      <button\n        aria-label=\"Send Message\"\n        disabled={!canSendMessage || input.trim().length === 0}\n        onClick={sendMessage}\n        className={cssClasses.sendButton}\n      >\n        {sendButtonIcon}\n      </button>\n    </div>\n  );\n}\n"],"names":["withStylelessCssClasses","React","ArrowIcon","useState","useChatState","useDefaultHandleApiError","useSendMessageWithRetries","useComposedCssClasses","useCallback","TextareaAutosize"],"mappings":";;;;;;;;;;;;;;;;AAoBA,MAAM,iBAAiB,GAAwBA,+CAAuB,CACpE,OAAO,EACP;AACE,IAAA,SAAS,EAAE,gDAAgD;AAC3D,IAAA,QAAQ,EACN,uKAAuK;AACzK,IAAA,UAAU,EACR,mLAAmL;AACtL,CAAA,CACF,CAAC;AAuCF;;;;;;;;;;AAUG;AACa,SAAA,SAAS,CAAC,EACxB,WAAW,GAAG,mBAAmB,EACjC,MAAM,GAAG,KAAK,EACd,cAAc,GAAG,KAAK,EACtB,WAAW,EACX,cAAc,GAAGC,sBAAC,CAAA,aAAA,CAAAC,eAAS,EAAG,IAAA,CAAA,EAC9B,gBAAgB,EAChB,MAAM,EACN,OAAO,GACQ,EAAA;IACf,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAGC,cAAQ,CAAC,EAAE,CAAC,CAAC;AACvC,IAAA,MAAM,cAAc,GAAGC,8BAAY,CACjC,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,cAAc,CAC7C,CAAC;AACF,IAAA,MAAM,qBAAqB,GAAGC,iDAAwB,EAAE,CAAC;IACzD,MAAM,sBAAsB,GAAIC,mDAAyB,CAAC,MAAM,EAAE,CAAC,EAAE,OAAO,CAAC,CAAA;IAC7E,MAAM,UAAU,GAAGC,2CAAqB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;AAE9E,IAAA,MAAM,WAAW,GAAGC,iBAAW,CAAC,YAAW;QACzC,QAAQ,CAAC,EAAE,CAAC,CAAC;QACb,sBAAsB,CAAC,KAAK,CAAC;AAC1B,aAAA,KAAK,CAAC,WAAW,IAAI,qBAAqB,CAAC;aAC3C,OAAO,CAAC,MAAK;AACZ,YAAA,MAAM,GAAG,KAAK,CAAC,CAAA;AACjB,SAAC,CAAC,CAAA;AACN,KAAC,EAAE,CAAC,sBAAsB,EAAE,KAAK,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,CAAC,CAAC,CAAC;AAEhF,IAAA,MAAM,aAAa,GAAGA,iBAAW,CAC/B,CAAC,CAA2C,KAAI;QAC9C,IAAI,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;YACpC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,cAAc,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,KAAK,CAAC,EAAE;AAC/C,gBAAA,WAAW,EAAE,CAAC;AACf,aAAA;AACF,SAAA;KACF,EACD,CAAC,WAAW,EAAE,cAAc,EAAE,KAAK,CAAC,CACrC,CAAC;AAEF,IAAA,MAAM,aAAa,GAAGA,iBAAW,CAC/B,CAAC,CAAyC,KAAI;AAC5C,QAAA,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;KAC1B,EACD,EAAE,CACH,CAAC;AAEF,IAAA,QACEP,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,SAAS,EAAA;QAClCA,sBAAC,CAAA,aAAA,CAAAQ,iCAAgB,EACf,EAAA,SAAS,EAAE,cAAc,EACzB,SAAS,EAAE,aAAa,EACxB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,aAAa,EACvB,SAAS,EAAE,UAAU,CAAC,QAAQ,EAC9B,WAAW,EAAE,WAAW,EACxB,CAAA;AACF,QAAAR,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,YAAA,EACa,cAAc,EACzB,QAAQ,EAAE,CAAC,cAAc,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,KAAK,CAAC,EACtD,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,UAAU,CAAC,UAAU,EAE/B,EAAA,cAAc,CACR,CACL,EACN;AACJ;;;;"}
+{"version":3,"file":"ChatInput.js","sources":["../../../../src/components/ChatInput.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport { useChatState } from \"@yext/chat-headless-react\";\nimport { ArrowIcon } from \"../icons/Arrow\";\nimport { useComposedCssClasses } from \"../hooks\";\nimport TextareaAutosize from \"react-textarea-autosize\";\nimport { useDefaultHandleApiError } from \"../hooks/useDefaultHandleApiError\";\nimport { withStylelessCssClasses } from \"../utils/withStylelessCssClasses\";\nimport { useSendMessageWithRetries } from \"../hooks/useSendMessageWithRetries\";\n\n/**\n * The CSS class interface for the {@link ChatInput} component.\n *\n * @public\n */\nexport interface ChatInputCssClasses {\n  container?: string;\n  textArea?: string;\n  sendButton?: string;\n}\n\nconst builtInCssClasses: ChatInputCssClasses = withStylelessCssClasses(\n  \"Input\",\n  {\n    container: \"w-full h-fit flex flex-row relative @container\",\n    textArea:\n      \"w-full p-4 pr-12 border border-slate-300 rounded-3xl resize-none text-[13px] @[480px]:text-base placeholder:text-[13px] placeholder:@[480px]:text-base text-slate-900\",\n    sendButton:\n      \"rounded-full p-1.5 w-8 h-8 stroke-2 text-white bg-blue-600 disabled:bg-slate-200 hover:bg-blue-800 active:scale-90 transition-all absolute right-4 bottom-2.5 @[480px]:bottom-3.5\",\n  }\n);\n\n/**\n * The props for the {@link ChatInput} component.\n *\n * @public\n */\nexport interface ChatInputProps {\n  /**\n   * The input's placeholder text when no text has been entered by the user.\n   * Defaults to \"Type a message...\".\n   */\n  placeholder?: string;\n  /**\n   * Enable streaming behavior by making a request to Chat Streaming API.\n   * This feature is experimental, and is subject to change.\n   * Defaults to false.\n   */\n  stream?: boolean;\n  /** Enable auto focus for the input box. Defaults to false. */\n  inputAutoFocus?: boolean;\n  /**\n   * A function which is called when an error occurs from Chat API while processing the user's message.\n   * By default, the error is logged to the console and an error message is added to state.\n   */\n  handleError?: (e: unknown) => void;\n  /** Custom icon for the send button. */\n  sendButtonIcon?: JSX.Element;\n  /** CSS classes for customizing the component styling. */\n  customCssClasses?: ChatInputCssClasses;\n  /** A callback which is called when user sends a message. */\n  onSend?: (message: string) => void;\n  /**\n   * A function which is called when a retryable error occurs from\n   * Chat API while processing the user's message.\n   */\n  onRetry?: (e: unknown) => void\n}\n\n/**\n * A component that allows user to input message and send to Chat API.\n *\n * @remarks\n * Pressing \"Enter\" key will send the current message.\n * To add a newline, press \"Shift\" and \"Enter\".\n *\n * @public\n *\n * @param props - {@link ChatInputProps}\n */\nexport function ChatInput({\n  placeholder = \"Type a message...\",\n  stream = false,\n  inputAutoFocus = false,\n  handleError,\n  sendButtonIcon = <ArrowIcon />,\n  customCssClasses,\n  onSend,\n  onRetry,\n}: ChatInputProps) {\n  const [input, setInput] = useState(\"\");\n  const canSendMessage = useChatState(\n    (state) => state.conversation.canSendMessage\n  );\n  const defaultHandleApiError = useDefaultHandleApiError();\n  const sendMessageWithRetries =  useSendMessageWithRetries(stream, 1, onRetry)\n  const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);\n\n  const sendMessage = useCallback(async () => {\n    setInput(\"\");\n    sendMessageWithRetries(input)\n      .catch(handleError ?? defaultHandleApiError)\n      .finally(() => {\n        onSend?.(input)\n      })\n  }, [sendMessageWithRetries, input, handleError, defaultHandleApiError, onSend]);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n      if (!e.shiftKey && e.key === \"Enter\" && \n        // The Japanese Keyboard uses \"Enter\" key to convert from Hiragana to Kanji.\n        // \"isComposing\" is a flag that indicates whether the event is part of an ongoing composition session.\n        // Safari does not support `isComposing` with the Japanese IME event,\n        // so we have to additionally check for the keyCode to handle that edge case.\n        !(e.nativeEvent.isComposing || e.keyCode === 229)) {\n        e.preventDefault();\n        if (canSendMessage && input.trim().length !== 0) {\n          sendMessage();\n        }\n      }\n    },\n    [sendMessage, canSendMessage, input]\n  );\n\n  const onInputChange = useCallback(\n    (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n      setInput(e.target.value);\n    },\n    []\n  );\n\n  return (\n    <div className={cssClasses.container}>\n      <TextareaAutosize\n        autoFocus={inputAutoFocus}\n        onKeyDown={handleKeyDown}\n        value={input}\n        onChange={onInputChange}\n        className={cssClasses.textArea}\n        placeholder={placeholder}\n      />\n      <button\n        aria-label=\"Send Message\"\n        disabled={!canSendMessage || input.trim().length === 0}\n        onClick={sendMessage}\n        className={cssClasses.sendButton}\n      >\n        {sendButtonIcon}\n      </button>\n    </div>\n  );\n}\n"],"names":["withStylelessCssClasses","React","ArrowIcon","useState","useChatState","useDefaultHandleApiError","useSendMessageWithRetries","useComposedCssClasses","useCallback","TextareaAutosize"],"mappings":";;;;;;;;;;;;;;;;AAoBA,MAAM,iBAAiB,GAAwBA,+CAAuB,CACpE,OAAO,EACP;AACE,IAAA,SAAS,EAAE,gDAAgD;AAC3D,IAAA,QAAQ,EACN,uKAAuK;AACzK,IAAA,UAAU,EACR,mLAAmL;AACtL,CAAA,CACF,CAAC;AAuCF;;;;;;;;;;AAUG;AACa,SAAA,SAAS,CAAC,EACxB,WAAW,GAAG,mBAAmB,EACjC,MAAM,GAAG,KAAK,EACd,cAAc,GAAG,KAAK,EACtB,WAAW,EACX,cAAc,GAAGC,sBAAC,CAAA,aAAA,CAAAC,eAAS,EAAG,IAAA,CAAA,EAC9B,gBAAgB,EAChB,MAAM,EACN,OAAO,GACQ,EAAA;IACf,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAGC,cAAQ,CAAC,EAAE,CAAC,CAAC;AACvC,IAAA,MAAM,cAAc,GAAGC,8BAAY,CACjC,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,cAAc,CAC7C,CAAC;AACF,IAAA,MAAM,qBAAqB,GAAGC,iDAAwB,EAAE,CAAC;IACzD,MAAM,sBAAsB,GAAIC,mDAAyB,CAAC,MAAM,EAAE,CAAC,EAAE,OAAO,CAAC,CAAA;IAC7E,MAAM,UAAU,GAAGC,2CAAqB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;AAE9E,IAAA,MAAM,WAAW,GAAGC,iBAAW,CAAC,YAAW;QACzC,QAAQ,CAAC,EAAE,CAAC,CAAC;QACb,sBAAsB,CAAC,KAAK,CAAC;AAC1B,aAAA,KAAK,CAAC,WAAW,IAAI,qBAAqB,CAAC;aAC3C,OAAO,CAAC,MAAK;AACZ,YAAA,MAAM,GAAG,KAAK,CAAC,CAAA;AACjB,SAAC,CAAC,CAAA;AACN,KAAC,EAAE,CAAC,sBAAsB,EAAE,KAAK,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,CAAC,CAAC,CAAC;AAEhF,IAAA,MAAM,aAAa,GAAGA,iBAAW,CAC/B,CAAC,CAA2C,KAAI;QAC9C,IAAI,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO;;;;;AAKlC,YAAA,EAAE,CAAC,CAAC,WAAW,CAAC,WAAW,IAAI,CAAC,CAAC,OAAO,KAAK,GAAG,CAAC,EAAE;YACnD,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,cAAc,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,KAAK,CAAC,EAAE;AAC/C,gBAAA,WAAW,EAAE,CAAC;AACf,aAAA;AACF,SAAA;KACF,EACD,CAAC,WAAW,EAAE,cAAc,EAAE,KAAK,CAAC,CACrC,CAAC;AAEF,IAAA,MAAM,aAAa,GAAGA,iBAAW,CAC/B,CAAC,CAAyC,KAAI;AAC5C,QAAA,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;KAC1B,EACD,EAAE,CACH,CAAC;AAEF,IAAA,QACEP,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,SAAS,EAAA;QAClCA,sBAAC,CAAA,aAAA,CAAAQ,iCAAgB,EACf,EAAA,SAAS,EAAE,cAAc,EACzB,SAAS,EAAE,aAAa,EACxB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,aAAa,EACvB,SAAS,EAAE,UAAU,CAAC,QAAQ,EAC9B,WAAW,EAAE,WAAW,EACxB,CAAA;AACF,QAAAR,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,YAAA,EACa,cAAc,EACzB,QAAQ,EAAE,CAAC,cAAc,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,KAAK,CAAC,EACtD,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,UAAU,CAAC,UAAU,EAE/B,EAAA,cAAc,CACR,CACL,EACN;AACJ;;;;"}

package/lib/esm/package.json.mjs

@@ -1,4 +1,4 @@
-var version = "0.9.2";
+var version = "0.9.3";
 
 export { version };
 //# sourceMappingURL=package.json.mjs.map

package/lib/esm/src/components/ChatInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ChatInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AASrD;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAaD;;;;GAIG;AACH,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8DAA8D;IAC9D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,uCAAuC;IACvC,cAAc,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC7B,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,mBAAmB,CAAC;IACvC,4DAA4D;IAC5D,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;CAC/B;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,EACxB,WAAiC,EACjC,MAAc,EACd,cAAsB,EACtB,WAAW,EACX,cAA8B,EAC9B,gBAAgB,EAChB,MAAM,EACN,OAAO,GACR,EAAE,cAAc,qBAyDhB"}
+{"version":3,"file":"ChatInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ChatInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AASrD;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAaD;;;;GAIG;AACH,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8DAA8D;IAC9D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,uCAAuC;IACvC,cAAc,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC7B,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,mBAAmB,CAAC;IACvC,4DAA4D;IAC5D,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;CAC/B;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,EACxB,WAAiC,EACjC,MAAc,EACd,cAAsB,EACtB,WAAW,EACX,cAA8B,EAC9B,gBAAgB,EAChB,MAAM,EACN,OAAO,GACR,EAAE,cAAc,qBA8DhB"}

package/lib/esm/src/components/ChatInput.mjs

@@ -38,7 +38,12 @@ function ChatInput({ placeholder = "Type a message...", stream = false, inputAut
         });
     }, [sendMessageWithRetries, input, handleError, defaultHandleApiError, onSend]);
     const handleKeyDown = useCallback((e) => {
-        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.preventDefault();
             if (canSendMessage && input.trim().length !== 0) {
                 sendMessage();

package/lib/esm/src/components/ChatInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChatInput.mjs","sources":["../../../../src/components/ChatInput.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport { useChatState } from \"@yext/chat-headless-react\";\nimport { ArrowIcon } from \"../icons/Arrow\";\nimport { useComposedCssClasses } from \"../hooks\";\nimport TextareaAutosize from \"react-textarea-autosize\";\nimport { useDefaultHandleApiError } from \"../hooks/useDefaultHandleApiError\";\nimport { withStylelessCssClasses } from \"../utils/withStylelessCssClasses\";\nimport { useSendMessageWithRetries } from \"../hooks/useSendMessageWithRetries\";\n\n/**\n * The CSS class interface for the {@link ChatInput} component.\n *\n * @public\n */\nexport interface ChatInputCssClasses {\n  container?: string;\n  textArea?: string;\n  sendButton?: string;\n}\n\nconst builtInCssClasses: ChatInputCssClasses = withStylelessCssClasses(\n  \"Input\",\n  {\n    container: \"w-full h-fit flex flex-row relative @container\",\n    textArea:\n      \"w-full p-4 pr-12 border border-slate-300 rounded-3xl resize-none text-[13px] @[480px]:text-base placeholder:text-[13px] placeholder:@[480px]:text-base text-slate-900\",\n    sendButton:\n      \"rounded-full p-1.5 w-8 h-8 stroke-2 text-white bg-blue-600 disabled:bg-slate-200 hover:bg-blue-800 active:scale-90 transition-all absolute right-4 bottom-2.5 @[480px]:bottom-3.5\",\n  }\n);\n\n/**\n * The props for the {@link ChatInput} component.\n *\n * @public\n */\nexport interface ChatInputProps {\n  /**\n   * The input's placeholder text when no text has been entered by the user.\n   * Defaults to \"Type a message...\".\n   */\n  placeholder?: string;\n  /**\n   * Enable streaming behavior by making a request to Chat Streaming API.\n   * This feature is experimental, and is subject to change.\n   * Defaults to false.\n   */\n  stream?: boolean;\n  /** Enable auto focus for the input box. Defaults to false. */\n  inputAutoFocus?: boolean;\n  /**\n   * A function which is called when an error occurs from Chat API while processing the user's message.\n   * By default, the error is logged to the console and an error message is added to state.\n   */\n  handleError?: (e: unknown) => void;\n  /** Custom icon for the send button. */\n  sendButtonIcon?: JSX.Element;\n  /** CSS classes for customizing the component styling. */\n  customCssClasses?: ChatInputCssClasses;\n  /** A callback which is called when user sends a message. */\n  onSend?: (message: string) => void;\n  /**\n   * A function which is called when a retryable error occurs from\n   * Chat API while processing the user's message.\n   */\n  onRetry?: (e: unknown) => void\n}\n\n/**\n * A component that allows user to input message and send to Chat API.\n *\n * @remarks\n * Pressing \"Enter\" key will send the current message.\n * To add a newline, press \"Shift\" and \"Enter\".\n *\n * @public\n *\n * @param props - {@link ChatInputProps}\n */\nexport function ChatInput({\n  placeholder = \"Type a message...\",\n  stream = false,\n  inputAutoFocus = false,\n  handleError,\n  sendButtonIcon = <ArrowIcon />,\n  customCssClasses,\n  onSend,\n  onRetry,\n}: ChatInputProps) {\n  const [input, setInput] = useState(\"\");\n  const canSendMessage = useChatState(\n    (state) => state.conversation.canSendMessage\n  );\n  const defaultHandleApiError = useDefaultHandleApiError();\n  const sendMessageWithRetries =  useSendMessageWithRetries(stream, 1, onRetry)\n  const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);\n\n  const sendMessage = useCallback(async () => {\n    setInput(\"\");\n    sendMessageWithRetries(input)\n      .catch(handleError ?? defaultHandleApiError)\n      .finally(() => {\n        onSend?.(input)\n      })\n  }, [sendMessageWithRetries, input, handleError, defaultHandleApiError, onSend]);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n      if (!e.shiftKey && e.key === \"Enter\") {\n        e.preventDefault();\n        if (canSendMessage && input.trim().length !== 0) {\n          sendMessage();\n        }\n      }\n    },\n    [sendMessage, canSendMessage, input]\n  );\n\n  const onInputChange = useCallback(\n    (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n      setInput(e.target.value);\n    },\n    []\n  );\n\n  return (\n    <div className={cssClasses.container}>\n      <TextareaAutosize\n        autoFocus={inputAutoFocus}\n        onKeyDown={handleKeyDown}\n        value={input}\n        onChange={onInputChange}\n        className={cssClasses.textArea}\n        placeholder={placeholder}\n      />\n      <button\n        aria-label=\"Send Message\"\n        disabled={!canSendMessage || input.trim().length === 0}\n        onClick={sendMessage}\n        className={cssClasses.sendButton}\n      >\n        {sendButtonIcon}\n      </button>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AAoBA,MAAM,iBAAiB,GAAwB,uBAAuB,CACpE,OAAO,EACP;AACE,IAAA,SAAS,EAAE,gDAAgD;AAC3D,IAAA,QAAQ,EACN,uKAAuK;AACzK,IAAA,UAAU,EACR,mLAAmL;AACtL,CAAA,CACF,CAAC;AAuCF;;;;;;;;;;AAUG;AACa,SAAA,SAAS,CAAC,EACxB,WAAW,GAAG,mBAAmB,EACjC,MAAM,GAAG,KAAK,EACd,cAAc,GAAG,KAAK,EACtB,WAAW,EACX,cAAc,GAAG,KAAC,CAAA,aAAA,CAAA,SAAS,EAAG,IAAA,CAAA,EAC9B,gBAAgB,EAChB,MAAM,EACN,OAAO,GACQ,EAAA;IACf,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;AACvC,IAAA,MAAM,cAAc,GAAG,YAAY,CACjC,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,cAAc,CAC7C,CAAC;AACF,IAAA,MAAM,qBAAqB,GAAG,wBAAwB,EAAE,CAAC;IACzD,MAAM,sBAAsB,GAAI,yBAAyB,CAAC,MAAM,EAAE,CAAC,EAAE,OAAO,CAAC,CAAA;IAC7E,MAAM,UAAU,GAAG,qBAAqB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;AAE9E,IAAA,MAAM,WAAW,GAAG,WAAW,CAAC,YAAW;QACzC,QAAQ,CAAC,EAAE,CAAC,CAAC;QACb,sBAAsB,CAAC,KAAK,CAAC;AAC1B,aAAA,KAAK,CAAC,WAAW,IAAI,qBAAqB,CAAC;aAC3C,OAAO,CAAC,MAAK;AACZ,YAAA,MAAM,GAAG,KAAK,CAAC,CAAA;AACjB,SAAC,CAAC,CAAA;AACN,KAAC,EAAE,CAAC,sBAAsB,EAAE,KAAK,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,CAAC,CAAC,CAAC;AAEhF,IAAA,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,CAA2C,KAAI;QAC9C,IAAI,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;YACpC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,cAAc,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,KAAK,CAAC,EAAE;AAC/C,gBAAA,WAAW,EAAE,CAAC;AACf,aAAA;AACF,SAAA;KACF,EACD,CAAC,WAAW,EAAE,cAAc,EAAE,KAAK,CAAC,CACrC,CAAC;AAEF,IAAA,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,CAAyC,KAAI;AAC5C,QAAA,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;KAC1B,EACD,EAAE,CACH,CAAC;AAEF,IAAA,QACE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,SAAS,EAAA;QAClC,KAAC,CAAA,aAAA,CAAA,gBAAgB,EACf,EAAA,SAAS,EAAE,cAAc,EACzB,SAAS,EAAE,aAAa,EACxB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,aAAa,EACvB,SAAS,EAAE,UAAU,CAAC,QAAQ,EAC9B,WAAW,EAAE,WAAW,EACxB,CAAA;AACF,QAAA,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,YAAA,EACa,cAAc,EACzB,QAAQ,EAAE,CAAC,cAAc,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,KAAK,CAAC,EACtD,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,UAAU,CAAC,UAAU,EAE/B,EAAA,cAAc,CACR,CACL,EACN;AACJ;;;;"}
+{"version":3,"file":"ChatInput.mjs","sources":["../../../../src/components/ChatInput.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport { useChatState } from \"@yext/chat-headless-react\";\nimport { ArrowIcon } from \"../icons/Arrow\";\nimport { useComposedCssClasses } from \"../hooks\";\nimport TextareaAutosize from \"react-textarea-autosize\";\nimport { useDefaultHandleApiError } from \"../hooks/useDefaultHandleApiError\";\nimport { withStylelessCssClasses } from \"../utils/withStylelessCssClasses\";\nimport { useSendMessageWithRetries } from \"../hooks/useSendMessageWithRetries\";\n\n/**\n * The CSS class interface for the {@link ChatInput} component.\n *\n * @public\n */\nexport interface ChatInputCssClasses {\n  container?: string;\n  textArea?: string;\n  sendButton?: string;\n}\n\nconst builtInCssClasses: ChatInputCssClasses = withStylelessCssClasses(\n  \"Input\",\n  {\n    container: \"w-full h-fit flex flex-row relative @container\",\n    textArea:\n      \"w-full p-4 pr-12 border border-slate-300 rounded-3xl resize-none text-[13px] @[480px]:text-base placeholder:text-[13px] placeholder:@[480px]:text-base text-slate-900\",\n    sendButton:\n      \"rounded-full p-1.5 w-8 h-8 stroke-2 text-white bg-blue-600 disabled:bg-slate-200 hover:bg-blue-800 active:scale-90 transition-all absolute right-4 bottom-2.5 @[480px]:bottom-3.5\",\n  }\n);\n\n/**\n * The props for the {@link ChatInput} component.\n *\n * @public\n */\nexport interface ChatInputProps {\n  /**\n   * The input's placeholder text when no text has been entered by the user.\n   * Defaults to \"Type a message...\".\n   */\n  placeholder?: string;\n  /**\n   * Enable streaming behavior by making a request to Chat Streaming API.\n   * This feature is experimental, and is subject to change.\n   * Defaults to false.\n   */\n  stream?: boolean;\n  /** Enable auto focus for the input box. Defaults to false. */\n  inputAutoFocus?: boolean;\n  /**\n   * A function which is called when an error occurs from Chat API while processing the user's message.\n   * By default, the error is logged to the console and an error message is added to state.\n   */\n  handleError?: (e: unknown) => void;\n  /** Custom icon for the send button. */\n  sendButtonIcon?: JSX.Element;\n  /** CSS classes for customizing the component styling. */\n  customCssClasses?: ChatInputCssClasses;\n  /** A callback which is called when user sends a message. */\n  onSend?: (message: string) => void;\n  /**\n   * A function which is called when a retryable error occurs from\n   * Chat API while processing the user's message.\n   */\n  onRetry?: (e: unknown) => void\n}\n\n/**\n * A component that allows user to input message and send to Chat API.\n *\n * @remarks\n * Pressing \"Enter\" key will send the current message.\n * To add a newline, press \"Shift\" and \"Enter\".\n *\n * @public\n *\n * @param props - {@link ChatInputProps}\n */\nexport function ChatInput({\n  placeholder = \"Type a message...\",\n  stream = false,\n  inputAutoFocus = false,\n  handleError,\n  sendButtonIcon = <ArrowIcon />,\n  customCssClasses,\n  onSend,\n  onRetry,\n}: ChatInputProps) {\n  const [input, setInput] = useState(\"\");\n  const canSendMessage = useChatState(\n    (state) => state.conversation.canSendMessage\n  );\n  const defaultHandleApiError = useDefaultHandleApiError();\n  const sendMessageWithRetries =  useSendMessageWithRetries(stream, 1, onRetry)\n  const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);\n\n  const sendMessage = useCallback(async () => {\n    setInput(\"\");\n    sendMessageWithRetries(input)\n      .catch(handleError ?? defaultHandleApiError)\n      .finally(() => {\n        onSend?.(input)\n      })\n  }, [sendMessageWithRetries, input, handleError, defaultHandleApiError, onSend]);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n      if (!e.shiftKey && e.key === \"Enter\" && \n        // The Japanese Keyboard uses \"Enter\" key to convert from Hiragana to Kanji.\n        // \"isComposing\" is a flag that indicates whether the event is part of an ongoing composition session.\n        // Safari does not support `isComposing` with the Japanese IME event,\n        // so we have to additionally check for the keyCode to handle that edge case.\n        !(e.nativeEvent.isComposing || e.keyCode === 229)) {\n        e.preventDefault();\n        if (canSendMessage && input.trim().length !== 0) {\n          sendMessage();\n        }\n      }\n    },\n    [sendMessage, canSendMessage, input]\n  );\n\n  const onInputChange = useCallback(\n    (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n      setInput(e.target.value);\n    },\n    []\n  );\n\n  return (\n    <div className={cssClasses.container}>\n      <TextareaAutosize\n        autoFocus={inputAutoFocus}\n        onKeyDown={handleKeyDown}\n        value={input}\n        onChange={onInputChange}\n        className={cssClasses.textArea}\n        placeholder={placeholder}\n      />\n      <button\n        aria-label=\"Send Message\"\n        disabled={!canSendMessage || input.trim().length === 0}\n        onClick={sendMessage}\n        className={cssClasses.sendButton}\n      >\n        {sendButtonIcon}\n      </button>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yext/chat-ui-react",
-  "version": "0.9.2",
+  "version": "0.9.3",
   "description": "A library of React Components for powering Yext Chat integrations.",
   "author": "clippy@yext.com",
   "main": "./lib/commonjs/src/index.js",

package/src/components/ChatInput.tsx

@@ -106,7 +106,12 @@ export function ChatInput({
 
   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.preventDefault();
         if (canSendMessage && input.trim().length !== 0) {
           sendMessage();