diff --git a/packages/react-ui/src/components/AgentInterface/ConversationStarter.tsx b/packages/react-ui/src/components/AgentInterface/ConversationStarter.tsx index 0c3782b5d..d5576d813 100644 --- a/packages/react-ui/src/components/AgentInterface/ConversationStarter.tsx +++ b/packages/react-ui/src/components/AgentInterface/ConversationStarter.tsx @@ -89,7 +89,7 @@ export interface ConversationStarterContainerProps { /** * Optional click override. When provided, replaces the default * send-to-thread behavior (still guarded by `isRunning`). The prefill-chips - * welcome uses it to append contextual-starter prompts into the draft. + * welcome uses it to submit contextual starters with the prefilled draft. */ onSelect?: (starter: ConversationStarterProps) => void; } diff --git a/packages/react-ui/src/components/AgentInterface/WelcomeScreen.tsx b/packages/react-ui/src/components/AgentInterface/WelcomeScreen.tsx index 40f79ccd9..af413678d 100644 --- a/packages/react-ui/src/components/AgentInterface/WelcomeScreen.tsx +++ b/packages/react-ui/src/components/AgentInterface/WelcomeScreen.tsx @@ -5,7 +5,7 @@ import { ConversationStarterProps } from "../../types/ConversationStarter"; import { PromptTemplate } from "../../types/PromptTemplate"; import { useStartersFromContext } from "./_shared/startersContext"; import { isChatEmpty } from "./_shared/utils"; -import { appendStarterPrompt } from "./_shared/utils/welcomePrefill"; +import { submitStarterPrompt } from "./_shared/utils/welcomePrefill"; import { DesktopWelcomeComposer, WelcomePrefillChips } from "./components"; import { ConversationStarter, ConversationStarterVariant } from "./ConversationStarter"; import { WelcomeGlow, WelcomeGlowProvider } from "./WelcomeGlow"; @@ -48,8 +48,8 @@ interface WelcomeScreenWithContentProps extends WelcomeScreenBaseProps { /** * Fill-in-the-blank prompt templates, rendered as chips between the composer * and the starters. Clicking one drops its prompt stem into the composer - * (instead of sending) and shows the template's completions, which append to - * the draft. + * (instead of sending) and shows the template's completions. Selecting a + * completion sends the completed prompt immediately. */ promptTemplates?: PromptTemplate[]; /** @@ -95,6 +95,7 @@ export const WelcomeScreen = (props: WelcomeScreenProps) => { const messages = useThread((s) => s.messages); const isLoadingMessages = useThread((s) => s.isLoadingMessages); const isRunning = useThread((s) => s.isRunning); + const processMessage = useThread((s) => s.processMessage); // Prefill-chips draft state — owned here (not in the composer) so chips can // write into the draft. Hooks stay unconditional; unused without chips. @@ -167,13 +168,7 @@ export const WelcomeScreen = (props: WelcomeScreenProps) => { }; const handleContextualSelect = (starter: ConversationStarterProps) => { - const next = appendStarterPrompt(draft, starter.prompt); - setDraft(next); - setSelectedChip(null); - requestAnimationFrame(() => { - inputRef.current?.focus(); - inputRef.current?.setSelectionRange(next.length, next.length); - }); + submitStarterPrompt(processMessage, draft, starter.prompt); }; return ( diff --git a/packages/react-ui/src/components/AgentInterface/_shared/utils/welcomePrefill.ts b/packages/react-ui/src/components/AgentInterface/_shared/utils/welcomePrefill.ts index 1468a1fd4..568e39376 100644 --- a/packages/react-ui/src/components/AgentInterface/_shared/utils/welcomePrefill.ts +++ b/packages/react-ui/src/components/AgentInterface/_shared/utils/welcomePrefill.ts @@ -7,3 +7,16 @@ export const appendStarterPrompt = (draft: string, prompt: string): string => { const separator = draft.length > 0 && !draft.endsWith(" ") ? " " : ""; return `${draft}${separator}${prompt}`; }; + +type ProcessStarterMessage = (message: { role: "user"; content: string }) => void; + +/** Composes a contextual starter with the current draft and submits it. */ +export const submitStarterPrompt = ( + processMessage: ProcessStarterMessage, + draft: string, + prompt: string, +): void => + processMessage({ + role: "user", + content: appendStarterPrompt(draft, prompt), + }); diff --git a/packages/react-ui/src/components/AgentInterface/components/WelcomePrefillChips.tsx b/packages/react-ui/src/components/AgentInterface/components/WelcomePrefillChips.tsx index 5ac2f4e91..c00d82a18 100644 --- a/packages/react-ui/src/components/AgentInterface/components/WelcomePrefillChips.tsx +++ b/packages/react-ui/src/components/AgentInterface/components/WelcomePrefillChips.tsx @@ -34,7 +34,7 @@ export interface WelcomePrefillChipsProps { * Chip row + grid-stacked starters layers for the prefill-chips welcome. * Layer 1 (chips + default starters) hides via `visibility` while drafting so * the layout doesn't jump; layer 2 shows the selected chip's contextual - * starters, which append to the draft (see WelcomeScreen). + * starters, which submit the completed prompt (see WelcomeScreen). */ export const WelcomePrefillChips = ({ chips, diff --git a/packages/react-ui/src/components/AgentInterface/stories/AgentInterface.stories.tsx b/packages/react-ui/src/components/AgentInterface/stories/AgentInterface.stories.tsx index d9a27edff..3da4556b5 100644 --- a/packages/react-ui/src/components/AgentInterface/stories/AgentInterface.stories.tsx +++ b/packages/react-ui/src/components/AgentInterface/stories/AgentInterface.stories.tsx @@ -253,7 +253,7 @@ export const WithWelcome = { ), }; -/** Welcome with prefill chips — chip click prefills the composer; contextual starters append. */ +/** Welcome with prompt templates — a chip prefills the composer; a completion submits it. */ export const WelcomeWithPrefillChips = { render: () => (