MessageSuggestions: custom error handling #66

yen-tt · web-flow · commit 860159917532 · 2024-03-06T16:13:39.000-05:00
add an optional `handleError` prop, similar to the other components (ChatInput, ChatPanel, etc.) for custom error handling, which will override the default handling (console log + "sorry I can't help" message)

will publish a new version on merge

J=CLIP-1052
TEST=auto

see that jest tests passed
diff --git a/docs/chat-ui-react.messagesuggestionsprops.customcssclasses.md b/docs/chat-ui-react.messagesuggestionsprops.customcssclasses.md
@@ -4,6 +4,8 @@
 
 ## MessageSuggestionsProps.customCssClasses property
 
+CSS classes for customizing the component styling.
+
 **Signature:**
 
 ```typescript
diff --git a/docs/chat-ui-react.messagesuggestionsprops.handleerror.md b/docs/chat-ui-react.messagesuggestionsprops.handleerror.md
@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@yext/chat-ui-react](./chat-ui-react.md) &gt; [MessageSuggestionsProps](./chat-ui-react.messagesuggestionsprops.md) &gt; [handleError](./chat-ui-react.messagesuggestionsprops.handleerror.md)
+
+## MessageSuggestionsProps.handleError property
+
+A function which is called when an error occurs from Chat API while processing the user's message. By default, the error is logged to the console and an error message is added to state.
+
+**Signature:**
+
+```typescript
+handleError?: (e: unknown) => void;
+```
diff --git a/docs/chat-ui-react.messagesuggestionsprops.md b/docs/chat-ui-react.messagesuggestionsprops.md
@@ -16,6 +16,7 @@ export interface MessageSuggestionsProps
 
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
-|  [customCssClasses?](./chat-ui-react.messagesuggestionsprops.customcssclasses.md) |  | [MessageSuggestionCssClasses](./chat-ui-react.messagesuggestioncssclasses.md) | _(Optional)_ |
-|  [suggestions](./chat-ui-react.messagesuggestionsprops.suggestions.md) |  | string\[\] |  |
+|  [customCssClasses?](./chat-ui-react.messagesuggestionsprops.customcssclasses.md) |  | [MessageSuggestionCssClasses](./chat-ui-react.messagesuggestioncssclasses.md) | _(Optional)_ CSS classes for customizing the component styling. |
+|  [handleError?](./chat-ui-react.messagesuggestionsprops.handleerror.md) |  | (e: unknown) =&gt; void | _(Optional)_ A function which is called when an error occurs from Chat API while processing the user's message. By default, the error is logged to the console and an error message is added to state. |
+|  [suggestions](./chat-ui-react.messagesuggestionsprops.suggestions.md) |  | string\[\] | List of clickable message suggestions to render. |
 
diff --git a/docs/chat-ui-react.messagesuggestionsprops.suggestions.md b/docs/chat-ui-react.messagesuggestionsprops.suggestions.md
@@ -4,6 +4,8 @@
 
 ## MessageSuggestionsProps.suggestions property
 
+List of clickable message suggestions to render.
+
 **Signature:**
 
 ```typescript
diff --git a/etc/chat-ui-react.api.md b/etc/chat-ui-react.api.md
@@ -228,9 +228,8 @@ export interface MessageSuggestionCssClasses {
 
 // @public
 export interface MessageSuggestionsProps {
-    // (undocumented)
     customCssClasses?: MessageSuggestionCssClasses;
-    // (undocumented)
+    handleError?: (e: unknown) => void;
     suggestions: string[];
 }
 
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yext/chat-ui-react",
-  "version": "0.8.7",
+  "version": "0.8.8",
   "description": "A library of React Components for powering Yext Chat integrations.",
   "author": "clippy@yext.com",
   "main": "./lib/commonjs/src/index.js",
diff --git a/src/components/ChatInput.tsx b/src/components/ChatInput.tsx
@@ -94,9 +94,11 @@ export function ChatInput({
       ? chat.streamNextMessage(input)
       : chat.getNextMessage(input);
     setInput("");
-    res.then(() => {
-      onSend?.(input)
-    }).catch((e) => (handleError ? handleError(e) : defaultHandleApiError(e)));
+    res
+      .then(() => {
+        onSend?.(input);
+      })
+      .catch((e) => (handleError ? handleError(e) : defaultHandleApiError(e)));
   }, [chat, input, handleError, defaultHandleApiError, stream, onSend]);
 
   const handleKeyDown = useCallback(
diff --git a/src/components/ChatPanel.tsx b/src/components/ChatPanel.tsx
@@ -180,6 +180,7 @@ export function ChatPanel(props: ChatPanelProps) {
         <div className={cssClasses.inputContainer}>
           {suggestions && (
             <MessageSuggestions
+              handleError={handleError}
               suggestions={suggestions}
               customCssClasses={cssClasses.messageSuggestionClasses}
             />
diff --git a/src/components/Markdown.tsx b/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
diff --git a/src/components/MessageSuggestions.tsx b/src/components/MessageSuggestions.tsx
@@ -24,7 +24,11 @@ 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;
 }
 
@@ -44,6 +48,7 @@ const defaultClassnames: MessageSuggestionCssClasses = withStylelessCssClasses(
  * @internal
  */
 export const MessageSuggestions: React.FC<MessageSuggestionsProps> = ({
+  handleError,
   suggestions,
   customCssClasses,
 }) => {
@@ -58,9 +63,9 @@ export const MessageSuggestions: React.FC<MessageSuggestionsProps> = ({
       } satisfies MessageNotes;
       actions.setMessageNotes(newNotes);
       const res = actions.getNextMessage(msg);
-      res.catch(defaultHandleApiError);
+      res.catch(handleError ?? defaultHandleApiError);
     },
-    [actions, notes, defaultHandleApiError]
+    [actions, notes, handleError, defaultHandleApiError]
   );
 
   const classes = useComposedCssClasses(defaultClassnames, customCssClasses);
diff --git a/test-site/package-lock.json b/test-site/package-lock.json
diff --git a/tests/components/ChatInput.test.tsx b/tests/components/ChatInput.test.tsx
@@ -208,7 +208,7 @@ it("executes custom handleError if provided", async () => {
 
 it("executes onSend if provided", async () => {
   const onSendCb = jest.fn();
-  render(<ChatInput onSend={message => onSendCb(message)} />);
+  render(<ChatInput onSend={(message) => onSendCb(message)} />);
   await act(() => userEvent.type(screen.getByRole("textbox"), "test"));
   const sendButton = screen.getByRole("button");
   await act(() => userEvent.click(sendButton));
diff --git a/tests/components/ChatPanel.test.tsx b/tests/components/ChatPanel.test.tsx
@@ -129,16 +129,23 @@ it("executes onLinkClick if provided", async () => {
   const onLinkClickCb = jest.fn();
   mockChatState({
     conversation: {
-      messages: [{text: "Test [msg link](msglink)"}],
+      messages: [{ text: "Test [msg link](msglink)" }],
       isLoading: false,
       canSendMessage: true,
     },
   });
-  render(<ChatPanel 
-    footer="Test [footer link](footerlink)"
-    onLinkClick={href => onLinkClickCb(href)} />);
-  await act(() => userEvent.click(screen.getByRole("link", { name: "footer link"})));
+  render(
+    <ChatPanel
+      footer="Test [footer link](footerlink)"
+      onLinkClick={(href) => onLinkClickCb(href)}
+    />
+  );
+  await act(() =>
+    userEvent.click(screen.getByRole("link", { name: "footer link" }))
+  );
   expect(onLinkClickCb).toBeCalledWith("footerlink");
-  await act(() => userEvent.click(screen.getByRole("link", { name: "msg link" })));
+  await act(() =>
+    userEvent.click(screen.getByRole("link", { name: "msg link" }))
+  );
   expect(onLinkClickCb).toBeCalledWith("msglink");
 });
diff --git a/tests/components/MessageSuggestions.test.tsx b/tests/components/MessageSuggestions.test.tsx
@@ -3,7 +3,11 @@
 
 import { act, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { mockChatHooks, spyOnActions } from "../__utils__/mocks";
+import {
+  mockChatActions,
+  mockChatHooks,
+  spyOnActions,
+} from "../__utils__/mocks";
 import { MessageSuggestions } from "../../src/components/MessageSuggestions";
 
 beforeEach(() => {
@@ -42,3 +46,22 @@ it("clears note replies when pill is clicked", async () => {
     suggestedReplies: undefined,
   });
 });
+
+it("executes custom handleError if provided", async () => {
+  mockChatActions({
+    getNextMessage: jest.fn(() => Promise.reject("API Error")),
+    report: jest.fn(),
+    setMessageNotes: jest.fn(),
+  });
+  const customHandleError = jest.fn();
+  render(
+    <MessageSuggestions
+      handleError={customHandleError}
+      suggestions={["test msg"]}
+    />
+  );
+  const button = screen.getByRole("button");
+  expect(button).toHaveTextContent("test msg");
+  await act(() => userEvent.click(button));
+  expect(customHandleError).toBeCalledWith("API Error");
+});

Original file line number	Diff line number	Diff line change
`@@ -228,9 +228,8 @@ export interface MessageSuggestionCssClasses {`
`228`	`228`
`229`	`229`	`// @public`
`230`	`230`	`export interface MessageSuggestionsProps {`
`231`		`- // (undocumented)`
`232`	`231`	`customCssClasses?: MessageSuggestionCssClasses;`
`233`		`- // (undocumented)`
	`232`	`+ handleError?: (e: unknown) => void;`
`234`	`233`	`suggestions: string[];`
`235`	`234`	`}`
`236`	`235`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@yext/chat-ui-react",`
`3`		`- "version": "0.8.7",`
	`3`	`+ "version": "0.8.8",`
`4`	`4`	`"description": "A library of React Components for powering Yext Chat integrations.",`
`5`	`5`	`"author": "clippy@yext.com",`
`6`	`6`	`"main": "./lib/commonjs/src/index.js",`