diff --git a/docs/chat-ui-react.chatinput.md b/docs/chat-ui-react.chatinput.md
index 627e0ef..868725d 100644
--- 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
index e4b0bdd..28ba19e 100644
--- 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) => 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) => 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
new file mode 100644
index 0000000..5244e7b
--- /dev/null
+++ b/docs/chat-ui-react.chatinputprops.onsend.md
@@ -0,0 +1,13 @@
+
+
+[Home](./index.md) > [@yext/chat-ui-react](./chat-ui-react.md) > [ChatInputProps](./chat-ui-react.chatinputprops.md) > [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
index 996c1d5..27fb329 100644
--- 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
index 0dd16b3..611471a 100644
--- 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
index 057c010..42cc973 100644
--- 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 = ,
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) => {
diff --git a/tests/components/ChatInput.test.tsx b/tests/components/ChatInput.test.tsx
index af92072..4b2443f 100644
--- 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( onSendCb(message)} />);
+ await act(() => userEvent.type(screen.getByRole("textbox"), "test"));
+ const sendButton = screen.getByRole("button");
+ await act(() => userEvent.click(sendButton));
+ expect(onSendCb).toBeCalledWith("test");
+});