Feat: quote assistant message for asking follow up questions

[buneeIsSlo]

Overview

This PR implements a text selection and quote feature that allows users to select text from assistant messages and insert it as a quote into the chat input. The feature includes a floating quote button that appears when text is selected, with proper positioning and dismissal handling.

Preview after changes:

quote-response.mp4

Changes made

• New hook that tracks text selection within assistant messages
• Selection validation: Only triggers for selections ≥3 characters within assistant messages
• Position tracking: Captures mouse position constrained to selection bounds
• Floating button: Positioned relative to mouse cursor within message container
• Click outside dismissal: Uses useClickOutside() hook for proper dismissal
• Responsive positioning: Calculates position relative to message container bounds
• Quote insertion: Automatically formats selected text as markdown quotes (> text)
• Focus management: Refocuses textarea after quote insertion
• Preservation: Maintains existing input content when adding quotes

Edge cases handeled

• Empty/invalid selections: Ignores selections <3 characters or whitespace-only
• Cross-message selection: Only works within single assistant message boundaries
• Button positioning: Constrains button position to prevent overflow outside viewport
• Existing content: Preserves and properly formats existing input when adding quotes
• Multiple quotes: Handles multiple quote insertions correctly
• Empty input: Works with empty input field
• Focus preservation: Maintains cursor position and focus after quote insertion
• Event listener cleanup: Properly removes event listeners on unmount

Manual testing

• Select text in assistant message (≥3 chars)
• Quote button appears at correct position
• Click quote button inserts formatted quote
• Textarea refocuses after quote insertion
• Click outside dismisses quote button
• Works with existing input content

Resources

• Selecting text in React with the Selection API

[vercel]

@buneeIsSlo is attempting to deploy a commit to the zola Team on Vercel.

A member of the Team first needs to authorize it.

[buneeIsSlo]

@ibelick, please review this and let me know if you'd like me to add or change anything. I will try and add some more recordings.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
zola-anfe	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 6, 2025 1:27pm

[ibelick]

hey @buneeIsSlo, thanks for the PR.
could you fix the build, please?

./app/components/multi-chat/multi-conversation.tsx:61:12
Type error: Property 'onQuote' is missing in type '{ children: string; id: string; variant: "assistant"; parts: (TextUIPart | ReasoningUIPart | ToolInvocationUIPart | SourceUIPart | FileUIPart | StepStartUIPart)[]; ... 7 more ...; className: string; }' but required in type 'MessageProps'.
  59 |
  60 |         {response.message ? (
> 61 |           <Message
     |            ^
  62 |             id={response.message.id}
  63 |             variant="assistant"
  64 |             parts={
Next.js build worker exited with code: 1 and signal: null
Error: Command "npm run build" exited with 1
Exiting build container

[buneeIsSlo]

@ibelick, it should be fine now. Please let me know if you'd like me to make any further changes.

[buneeIsSlo]

@ibelick, I was able to remove the useEffect from quote-button.tsx.

However, theuseEffect is needed in chat-input.tsx to modify the input value and focus the input.
Please let me know if you have a better approach in mind. I'm willing to rewrite the logic 👍

[ibelick]

LGTM