@yext/chat-ui-react 0.8.4 → 0.8.5

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

@@ -1,11 +1,11 @@
 import React, { useCallback } from 'react';
-import { useChatActions } from '@yext/chat-headless-react';
+import { useChatActions, useChatState } from '@yext/chat-headless-react';
 import { useDefaultHandleApiError } from '../hooks/useDefaultHandleApiError.mjs';
 import { withStylelessCssClasses } from '../utils/withStylelessCssClasses.mjs';
 import { useComposedCssClasses } from '../hooks/useComposedCssClasses.mjs';
 
 const defaultClassnames = withStylelessCssClasses("Suggestions", {
-    container: "flex gap-2 mt-4 w-full overflow-x-auto flex-wrap",
+    container: "flex gap-2 mb-4 w-full overflow-x-auto flex-wrap",
     suggestion: "hover:cursor-pointer px-2 py-1 bg-white hover:bg-slate-300 rounded-full text-sm text-blue-700 border border-blue-700 hover:underline",
 });
 /**
@@ -16,13 +16,21 @@ const defaultClassnames = withStylelessCssClasses("Suggestions", {
  */
 const MessageSuggestions = ({ suggestions, customCssClasses, }) => {
     const actions = useChatActions();
+    const notes = useChatState((state) => state.conversation.notes);
     const defaultHandleApiError = useDefaultHandleApiError();
     const sendMsg = useCallback((msg) => {
+        const newNotes = {
+            ...(notes || {}),
+            suggestedReplies: undefined,
+        };
+        actions.setMessageNotes(newNotes);
         const res = actions.getNextMessage(msg);
         res.catch(defaultHandleApiError);
-    }, [defaultHandleApiError, actions]);
+    }, [actions, notes, defaultHandleApiError]);
     const classes = useComposedCssClasses(defaultClassnames, customCssClasses);
-    return (React.createElement("div", { className: classes.container }, suggestions.map((suggestion, index) => (React.createElement("button", { key: index, className: classes.suggestion, onClick: () => sendMsg(suggestion) }, suggestion)))));
+    return (React.createElement("div", { className: classes.container }, suggestions.map((suggestion, index) => (React.createElement("button", { key: index, className: classes.suggestion, 
+        // eslint-disable-next-line react-perf/jsx-no-new-function-as-prop
+        onClick: () => sendMsg(suggestion) }, suggestion)))));
 };
 
 export { MessageSuggestions };

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

@@ -1 +1 @@
-{"version":3,"file":"MessageSuggestions.mjs","sources":["../../../../src/components/MessageSuggestions.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { useChatActions } from \"@yext/chat-headless-react\";\nimport { useDefaultHandleApiError } from \"../hooks/useDefaultHandleApiError\";\nimport { withStylelessCssClasses } from \"../utils/withStylelessCssClasses\";\nimport { useComposedCssClasses } from \"../hooks\";\n\n/**\n * The CSS class interface for the MessageSuggestion component.\n *\n * @public\n */\nexport interface MessageSuggestionCssClasses {\n  container?: string;\n  suggestion?: string;\n}\n\n/**\n * The props for the MessageSuggestions component.\n *\n * @public\n */\nexport interface MessageSuggestionsProps {\n  suggestions: string[];\n  customCssClasses?: MessageSuggestionCssClasses;\n}\n\nconst defaultClassnames: MessageSuggestionCssClasses = withStylelessCssClasses(\n  \"Suggestions\",\n  {\n    container: \"flex gap-2 mt-4 w-full overflow-x-auto flex-wrap\",\n    suggestion:\n      \"hover:cursor-pointer px-2 py-1 bg-white hover:bg-slate-300 rounded-full text-sm text-blue-700 border border-blue-700 hover:underline\",\n  }\n);\n\n/**\n * A component that displays a list of suggested messages\n * to the user, which they can click to send the message to the bot.\n *\n * @internal\n */\nexport const MessageSuggestions: React.FC<MessageSuggestionsProps> = ({\n  suggestions,\n  customCssClasses,\n}) => {\n  const actions = useChatActions();\n  const defaultHandleApiError = useDefaultHandleApiError();\n  const sendMsg = useCallback(\n    (msg: string) => {\n      const res = actions.getNextMessage(msg);\n      res.catch(defaultHandleApiError);\n    },\n    [defaultHandleApiError, actions]\n  );\n\n  const classes = useComposedCssClasses(defaultClassnames, customCssClasses);\n\n  return (\n    <div className={classes.container}>\n      {suggestions.map((suggestion, index) => (\n        <button\n          key={index}\n          className={classes.suggestion}\n          onClick={() => sendMsg(suggestion)}\n        >\n          {suggestion}\n        </button>\n      ))}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AA0BA,MAAM,iBAAiB,GAAgC,uBAAuB,CAC5E,aAAa,EACb;AACE,IAAA,SAAS,EAAE,kDAAkD;AAC7D,IAAA,UAAU,EACR,sIAAsI;AACzI,CAAA,CACF,CAAC;AAEF;;;;;AAKG;AACU,MAAA,kBAAkB,GAAsC,CAAC,EACpE,WAAW,EACX,gBAAgB,GACjB,KAAI;AACH,IAAA,MAAM,OAAO,GAAG,cAAc,EAAE,CAAC;AACjC,IAAA,MAAM,qBAAqB,GAAG,wBAAwB,EAAE,CAAC;AACzD,IAAA,MAAM,OAAO,GAAG,WAAW,CACzB,CAAC,GAAW,KAAI;QACd,MAAM,GAAG,GAAG,OAAO,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;AACxC,QAAA,GAAG,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC;AACnC,KAAC,EACD,CAAC,qBAAqB,EAAE,OAAO,CAAC,CACjC,CAAC;IAEF,MAAM,OAAO,GAAG,qBAAqB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;IAE3E,QACE,6BAAK,SAAS,EAAE,OAAO,CAAC,SAAS,IAC9B,WAAW,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,KAAK,MACjC,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,GAAG,EAAE,KAAK,EACV,SAAS,EAAE,OAAO,CAAC,UAAU,EAC7B,OAAO,EAAE,MAAM,OAAO,CAAC,UAAU,CAAC,EAEjC,EAAA,UAAU,CACJ,CACV,CAAC,CACE,EACN;AACJ;;;;"}
+{"version":3,"file":"MessageSuggestions.mjs","sources":["../../../../src/components/MessageSuggestions.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport {\n  MessageNotes,\n  useChatActions,\n  useChatState,\n} from \"@yext/chat-headless-react\";\nimport { useDefaultHandleApiError } from \"../hooks/useDefaultHandleApiError\";\nimport { withStylelessCssClasses } from \"../utils/withStylelessCssClasses\";\nimport { useComposedCssClasses } from \"../hooks\";\n\n/**\n * The CSS class interface for the MessageSuggestion component.\n *\n * @public\n */\nexport interface MessageSuggestionCssClasses {\n  container?: string;\n  suggestion?: string;\n}\n\n/**\n * The props for the MessageSuggestions component.\n *\n * @public\n */\nexport interface MessageSuggestionsProps {\n  suggestions: string[];\n  customCssClasses?: MessageSuggestionCssClasses;\n}\n\nconst defaultClassnames: MessageSuggestionCssClasses = withStylelessCssClasses(\n  \"Suggestions\",\n  {\n    container: \"flex gap-2 mb-4 w-full overflow-x-auto flex-wrap\",\n    suggestion:\n      \"hover:cursor-pointer px-2 py-1 bg-white hover:bg-slate-300 rounded-full text-sm text-blue-700 border border-blue-700 hover:underline\",\n  }\n);\n\n/**\n * A component that displays a list of suggested messages\n * to the user, which they can click to send the message to the bot.\n *\n * @internal\n */\nexport const MessageSuggestions: React.FC<MessageSuggestionsProps> = ({\n  suggestions,\n  customCssClasses,\n}) => {\n  const actions = useChatActions();\n  const notes = useChatState((state) => state.conversation.notes);\n  const defaultHandleApiError = useDefaultHandleApiError();\n  const sendMsg = useCallback(\n    (msg: string) => {\n      const newNotes = {\n        ...(notes || {}),\n        suggestedReplies: undefined,\n      } satisfies MessageNotes;\n      actions.setMessageNotes(newNotes);\n      const res = actions.getNextMessage(msg);\n      res.catch(defaultHandleApiError);\n    },\n    [actions, notes, defaultHandleApiError]\n  );\n\n  const classes = useComposedCssClasses(defaultClassnames, customCssClasses);\n\n  return (\n    <div className={classes.container}>\n      {suggestions.map((suggestion, index) => (\n        <button\n          key={index}\n          className={classes.suggestion}\n          // eslint-disable-next-line react-perf/jsx-no-new-function-as-prop\n          onClick={() => sendMsg(suggestion)}\n        >\n          {suggestion}\n        </button>\n      ))}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AA8BA,MAAM,iBAAiB,GAAgC,uBAAuB,CAC5E,aAAa,EACb;AACE,IAAA,SAAS,EAAE,kDAAkD;AAC7D,IAAA,UAAU,EACR,sIAAsI;AACzI,CAAA,CACF,CAAC;AAEF;;;;;AAKG;AACU,MAAA,kBAAkB,GAAsC,CAAC,EACpE,WAAW,EACX,gBAAgB,GACjB,KAAI;AACH,IAAA,MAAM,OAAO,GAAG,cAAc,EAAE,CAAC;AACjC,IAAA,MAAM,KAAK,GAAG,YAAY,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;AAChE,IAAA,MAAM,qBAAqB,GAAG,wBAAwB,EAAE,CAAC;AACzD,IAAA,MAAM,OAAO,GAAG,WAAW,CACzB,CAAC,GAAW,KAAI;AACd,QAAA,MAAM,QAAQ,GAAG;AACf,YAAA,IAAI,KAAK,IAAI,EAAE,CAAC;AAChB,YAAA,gBAAgB,EAAE,SAAS;SACL,CAAC;AACzB,QAAA,OAAO,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;QAClC,MAAM,GAAG,GAAG,OAAO,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;AACxC,QAAA,GAAG,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC;KAClC,EACD,CAAC,OAAO,EAAE,KAAK,EAAE,qBAAqB,CAAC,CACxC,CAAC;IAEF,MAAM,OAAO,GAAG,qBAAqB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;AAE3E,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,OAAO,CAAC,SAAS,EAAA,EAC9B,WAAW,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,KAAK,MACjC,KACE,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,GAAG,EAAE,KAAK,EACV,SAAS,EAAE,OAAO,CAAC,UAAU;;AAE7B,QAAA,OAAO,EAAE,MAAM,OAAO,CAAC,UAAU,CAAC,EAAA,EAEjC,UAAU,CACJ,CACV,CAAC,CACE,EACN;AACJ;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yext/chat-ui-react",
-  "version": "0.8.4",
+  "version": "0.8.5",
   "description": "A library of React Components for powering Yext Chat integrations.",
   "author": "clippy@yext.com",
   "main": "./lib/commonjs/src/index.js",
@@ -74,7 +74,7 @@
     "babel-jest": "^29.5.0",
     "eslint": "^8.39.0",
     "eslint-plugin-storybook": "^0.6.12",
-    "generate-license-file": "^2.0.0",
+    "generate-license-file": "^1.0.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "msw": "^1.2.1",

package/src/components/ChatPanel.tsx

@@ -85,6 +85,9 @@ export function ChatPanel(props: ChatPanelProps) {
     props;
   const messages = useChatState((state) => state.conversation.messages);
   const loading = useChatState((state) => state.conversation.isLoading);
+  const suggestedReplies = useChatState(
+    (state) => state.conversation.notes?.suggestedReplies
+  );
   const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
   const reportAnalyticsEvent = useReportAnalyticsEvent();
   useFetchInitialMessage(handleError, stream);
@@ -102,9 +105,8 @@ export function ChatPanel(props: ChatPanelProps) {
     ) {
       return messageSuggestions;
     }
-    // TODO: Chat API will send suggestions in the message notes eventually; add that here. [CLIP-852]
-    return null;
-  }, [messages, messageSuggestions]);
+    return suggestedReplies;
+  }, [messages, suggestedReplies, messageSuggestions]);
 
   const messagesRef = useRef<Array<HTMLDivElement | null>>([]);
   const messagesContainer = useRef<HTMLDivElement>(null);
@@ -150,15 +152,15 @@ export function ChatPanel(props: ChatPanelProps) {
               </div>
             ))}
             {loading && <LoadingDots />}
-            {suggestions && (
-              <MessageSuggestions
-                suggestions={suggestions}
-                customCssClasses={cssClasses.messageSuggestionClasses}
-              />
-            )}
           </div>
         </div>
         <div className={cssClasses.inputContainer}>
+          {suggestions && (
+            <MessageSuggestions
+              suggestions={suggestions}
+              customCssClasses={cssClasses.messageSuggestionClasses}
+            />
+          )}
           <ChatInput {...props} customCssClasses={cssClasses.inputCssClasses} />
         </div>
       </div>

package/src/components/ChatPopUp.tsx

@@ -254,7 +254,7 @@ export function ChatPopUp(props: ChatPopUpProps) {
             onClick={onClick}
             className={
               cssClasses.button +
-              (showHeartBeatAnimation ? " animate-heartbeat" : "")
+              (showHeartBeatAnimation && !!numUnreadMessages ? " animate-heartbeat" : "")
             }
           >
             {openPanelButtonIcon ?? (

package/src/components/MessageSuggestions.tsx

@@ -1,5 +1,9 @@
 import React, { useCallback } from "react";
-import { useChatActions } from "@yext/chat-headless-react";
+import {
+  MessageNotes,
+  useChatActions,
+  useChatState,
+} from "@yext/chat-headless-react";
 import { useDefaultHandleApiError } from "../hooks/useDefaultHandleApiError";
 import { withStylelessCssClasses } from "../utils/withStylelessCssClasses";
 import { useComposedCssClasses } from "../hooks";
@@ -27,7 +31,7 @@ export interface MessageSuggestionsProps {
 const defaultClassnames: MessageSuggestionCssClasses = withStylelessCssClasses(
   "Suggestions",
   {
-    container: "flex gap-2 mt-4 w-full overflow-x-auto flex-wrap",
+    container: "flex gap-2 mb-4 w-full overflow-x-auto flex-wrap",
     suggestion:
       "hover:cursor-pointer px-2 py-1 bg-white hover:bg-slate-300 rounded-full text-sm text-blue-700 border border-blue-700 hover:underline",
   }
@@ -44,13 +48,19 @@ export const MessageSuggestions: React.FC<MessageSuggestionsProps> = ({
   customCssClasses,
 }) => {
   const actions = useChatActions();
+  const notes = useChatState((state) => state.conversation.notes);
   const defaultHandleApiError = useDefaultHandleApiError();
   const sendMsg = useCallback(
     (msg: string) => {
+      const newNotes = {
+        ...(notes || {}),
+        suggestedReplies: undefined,
+      } satisfies MessageNotes;
+      actions.setMessageNotes(newNotes);
       const res = actions.getNextMessage(msg);
       res.catch(defaultHandleApiError);
     },
-    [defaultHandleApiError, actions]
+    [actions, notes, defaultHandleApiError]
   );
 
   const classes = useComposedCssClasses(defaultClassnames, customCssClasses);
@@ -61,6 +71,7 @@ export const MessageSuggestions: React.FC<MessageSuggestionsProps> = ({
         <button
           key={index}
           className={classes.suggestion}
+          // eslint-disable-next-line react-perf/jsx-no-new-function-as-prop
           onClick={() => sendMsg(suggestion)}
         >
           {suggestion}