diff --git a/.changeset/healthy-files-scream.md b/.changeset/healthy-files-scream.md new file mode 100644 index 0000000000..fcda43fdbd --- /dev/null +++ b/.changeset/healthy-files-scream.md @@ -0,0 +1,5 @@ +--- +'ai': patch +--- + +Add append() helper to useAssistant. diff --git a/docs/pages/docs/api-reference/use-assistant.mdx b/docs/pages/docs/api-reference/use-assistant.mdx index b10b20eb08..0f6fd7adad 100644 --- a/docs/pages/docs/api-reference/use-assistant.mdx +++ b/docs/pages/docs/api-reference/use-assistant.mdx @@ -137,6 +137,11 @@ The `useAssistant` hook returns an object with several helper methods and variab 'React.Dispatch>', 'Function to update the `input` value.', ], + [ + 'append', + '(message: Message) => void', + ` Append a user message to the chat list. This triggers the API call to fetch the assistant's response.`, + ], [ 'handleInputChange', '(e: any) => void', diff --git a/packages/core/react/use-assistant.ts b/packages/core/react/use-assistant.ts index 59f9f96efa..55c40193aa 100644 --- a/packages/core/react/use-assistant.ts +++ b/packages/core/react/use-assistant.ts @@ -4,7 +4,7 @@ import { useState } from 'react'; import { generateId } from '../shared/generate-id'; import { readDataStream } from '../shared/read-data-stream'; -import { Message } from '../shared/types'; +import { CreateMessage, Message } from '../shared/types'; export type AssistantStatus = 'in_progress' | 'awaiting_message'; @@ -29,6 +29,19 @@ export type UseAssistantHelpers = { */ input: string; + /** + * Append a user message to the chat list. This triggers the API call to fetch + * the assistant's response. + * @param message The message to append + * @param requestOptions Additional options to pass to the API call + */ + append: ( + message: Message | CreateMessage, + requestOptions?: { + data?: Record; + }, + ) => Promise; + /** * setState-powered method to update the input value. */ @@ -122,23 +135,18 @@ export function useAssistant({ setInput(event.target.value); }; - const submitMessage = async ( - event?: React.FormEvent, + const append = async ( + message: Message | CreateMessage, requestOptions?: { data?: Record; }, ) => { - event?.preventDefault?.(); - - if (input === '') { - return; - } - - setStatus('in_progress'); - setMessages(messages => [ ...messages, - { id: '', role: 'user', content: input }, + { + ...message, + id: message.id ?? generateId(), + }, ]); setInput(''); @@ -240,7 +248,23 @@ export function useAssistant({ setStatus('awaiting_message'); }; + const submitMessage = async ( + event?: React.FormEvent, + requestOptions?: { + data?: Record; + }, + ) => { + event?.preventDefault?.(); + + if (input === '') { + return; + } + + append({ role: 'user', content: input }, requestOptions); + }; + return { + append, messages, setMessages, threadId,