ChatInput: add a handler for when user send a message (#63)

ChatInput: add a handler for when user send a message J=CLIP-573 TEST=auto,manual verified that if provided, onSend is executed after the user sends a message
yext · Jan 10, 2024 · b7e2c85 · b7e2c85
1 parent 51f9a9f
commit b7e2c85
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 6 deletions.
diff --git a/docs/chat-ui-react.chatinput.md b/docs/chat-ui-react.chatinput.md
@@ -9,14 +9,14 @@ A component that allows user to input message and send to Chat API.
 **Signature:**
 
 ```typescript
-export declare function ChatInput({ placeholder, stream, inputAutoFocus, handleError, sendButtonIcon, customCssClasses, }: ChatInputProps): React.JSX.Element;
+export declare function ChatInput({ placeholder, stream, inputAutoFocus, handleError, sendButtonIcon, customCssClasses, onSend, }: ChatInputProps): React.JSX.Element;
 ```
 
 ## Parameters
 
 |  Parameter | Type | Description |
 |  --- | --- | --- |
-|  { placeholder, stream, inputAutoFocus, handleError, sendButtonIcon, customCssClasses, } | [ChatInputProps](./chat-ui-react.chatinputprops.md) |  |
+|  { placeholder, stream, inputAutoFocus, handleError, sendButtonIcon, customCssClasses, onSend, } | [ChatInputProps](./chat-ui-react.chatinputprops.md) |  |
 
 **Returns:**
 

diff --git a/docs/chat-ui-react.chatinputprops.md b/docs/chat-ui-react.chatinputprops.md
@@ -19,6 +19,7 @@ export interface ChatInputProps
 |  [customCssClasses?](./chat-ui-react.chatinputprops.customcssclasses.md) |  | [ChatInputCssClasses](./chat-ui-react.chatinputcssclasses.md) | _(Optional)_ CSS classes for customizing the component styling. |
 |  [handleError?](./chat-ui-react.chatinputprops.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. |
 |  [inputAutoFocus?](./chat-ui-react.chatinputprops.inputautofocus.md) |  | boolean | _(Optional)_ Enable auto focus for the input box. Defaults to false. |
+|  [onSend?](./chat-ui-react.chatinputprops.onsend.md) |  | (message: string) =&gt; void | _(Optional)_ A callback which is called when user sends a message. |
 |  [placeholder?](./chat-ui-react.chatinputprops.placeholder.md) |  | string | _(Optional)_ The input's placeholder text when no text has been entered by the user. Defaults to "Type a message...". |
 |  [sendButtonIcon?](./chat-ui-react.chatinputprops.sendbuttonicon.md) |  | JSX.Element | _(Optional)_ Custom icon for the send button. |
 |  [stream?](./chat-ui-react.chatinputprops.stream.md) |  | boolean | _(Optional)_ Enable streaming behavior by making a request to Chat Streaming API. This feature is experimental, and is subject to change. Defaults to false. |

diff --git a/docs/chat-ui-react.chatinputprops.onsend.md b/docs/chat-ui-react.chatinputprops.onsend.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; [ChatInputProps](./chat-ui-react.chatinputprops.md) &gt; [onSend](./chat-ui-react.chatinputprops.onsend.md)
+
+## ChatInputProps.onSend property
+
+A callback which is called when user sends a message.
+
+**Signature:**
+
+```typescript
+onSend?: (message: string) => void;
+```
diff --git a/docs/chat-ui-react.md b/docs/chat-ui-react.md
@@ -9,7 +9,7 @@
 |  Function | Description |
 |  --- | --- |
 |  [ChatHeader({ title, showRestartButton, restartButtonIcon, showCloseButton, closeButtonIcon, onClose, customCssClasses, })](./chat-ui-react.chatheader.md) | A component that renders the header of a chat bot panel, including the title and a button to reset the conversation. |
-|  [ChatInput({ placeholder, stream, inputAutoFocus, handleError, sendButtonIcon, customCssClasses, })](./chat-ui-react.chatinput.md) | A component that allows user to input message and send to Chat API. |
+|  [ChatInput({ placeholder, stream, inputAutoFocus, handleError, sendButtonIcon, customCssClasses, onSend, })](./chat-ui-react.chatinput.md) | A component that allows user to input message and send to Chat API. |
 |  [ChatPanel(props)](./chat-ui-react.chatpanel.md) | A component that renders a full panel for chat bot interactions. This includes the message bubbles for the conversation, input box with send button, and header (if provided). |
 |  [ChatPopUp(props)](./chat-ui-react.chatpopup.md) | A component that renders a popup button that displays and hides a panel for chat bot interactions. |
 |  [MessageBubble({ message, showFeedbackButtons, showTimestamp, customCssClasses, formatTimestamp, })](./chat-ui-react.messagebubble.md) | A component that displays the provided message. |

diff --git a/etc/chat-ui-react.api.md b/etc/chat-ui-react.api.md
@@ -40,7 +40,7 @@ export interface ChatHeaderProps {
 }
 
 // @public
-export function ChatInput({ placeholder, stream, inputAutoFocus, handleError, sendButtonIcon, customCssClasses, }: ChatInputProps): React_2.JSX.Element;
+export function ChatInput({ placeholder, stream, inputAutoFocus, handleError, sendButtonIcon, customCssClasses, onSend, }: ChatInputProps): React_2.JSX.Element;
 
 // @public
 export interface ChatInputCssClasses {
@@ -57,6 +57,7 @@ export interface ChatInputProps {
     customCssClasses?: ChatInputCssClasses;
     handleError?: (e: unknown) => void;
     inputAutoFocus?: boolean;
+    onSend?: (message: string) => void;
     placeholder?: string;
     sendButtonIcon?: JSX.Element;
     stream?: boolean;

diff --git a/src/components/ChatInput.tsx b/src/components/ChatInput.tsx
@@ -56,6 +56,8 @@ export interface ChatInputProps {
   sendButtonIcon?: JSX.Element;
   /** CSS classes for customizing the component styling. */
   customCssClasses?: ChatInputCssClasses;
+  /** A callback which is called when user sends a message. */
+  onSend?: (message: string) => void;
 }
 
 /**
@@ -76,6 +78,7 @@ export function ChatInput({
   handleError,
   sendButtonIcon = <ArrowIcon />,
   customCssClasses,
+  onSend,
 }: ChatInputProps) {
   const chat = useChatActions();
   const [input, setInput] = useState("");
@@ -91,8 +94,10 @@ export function ChatInput({
       ? chat.streamNextMessage(input)
       : chat.getNextMessage(input);
     setInput("");
-    res.catch((e) => (handleError ? handleError(e) : defaultHandleApiError(e)));
-  }, [chat, input, handleError, defaultHandleApiError, stream]);
+    res.then(() => {
+      onSend?.(input)
+    }).catch((e) => (handleError ? handleError(e) : defaultHandleApiError(e)));
+  }, [chat, input, handleError, defaultHandleApiError, stream, onSend]);
 
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLTextAreaElement>) => {

diff --git a/tests/components/ChatInput.test.tsx b/tests/components/ChatInput.test.tsx
@@ -205,3 +205,12 @@ it("executes custom handleError if provided", async () => {
   expect(customHandleError).toBeCalledTimes(1);
   expect(customHandleError).toBeCalledWith("API Error");
 });
+
+it("executes onSend if provided", async () => {
+  const onSendCb = jest.fn();
+  render(<ChatInput onSend={message => onSendCb(message)} />);
+  await act(() => userEvent.type(screen.getByRole("textbox"), "test"));
+  const sendButton = screen.getByRole("button");
+  await act(() => userEvent.click(sendButton));
+  expect(onSendCb).toBeCalledWith("test");
+});