feat: added quick-refine action buttons to AI response messages #282
Conversation
📝 WalkthroughWalkthroughA new QuickRefineToolbar component was added and integrated into MessageItem to surface preset refinement actions for AI messages. MessagesList now uses the chat hook and passes its sendMessage as onSendMessage to MessageItem; InputProps type was added and CSS keyframes were reformatted. Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant MessageItem
participant QuickRefineToolbar
participant MessagesList
participant useChat as useChat Hook
User->>MessageItem: Hover over AI message
MessageItem->>QuickRefineToolbar: Reveal toolbar (group-hover)
User->>QuickRefineToolbar: Click a refinement button (prompt)
QuickRefineToolbar->>MessageItem: onRefine(prompt)
MessageItem->>MessagesList: onSendMessage(prompt)
MessagesList->>useChat: sendMessage(refinement prompt)
useChat->>MessagesList: request processed / sent to backend
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧹 Recent nitpick comments
📜 Recent review detailsConfiguration used: defaults Review profile: CHILL Plan: Pro 📒 Files selected for processing (4)
🚧 Files skipped from review as they are similar to previous changes (1)
🧰 Additional context used🧬 Code graph analysis (2)Frontend/src/components/chat/messages-list.tsx (2)
Frontend/src/components/chat/message-item.tsx (1)
🔇 Additional comments (7)
✏️ Tip: You can disable this entire section by setting Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
Frontend/src/index.css (1)
113-120: Critical: Missing closing brace for@layer baseblock.The
@layer baseblock opened at line 113 is never closed. Line 120 shows only whitespace, but the closing}is missing. This will cause CSS parsing errors and break all styling.Proposed fix
`@layer` base { * { `@apply` border-border outline-ring/50; } body { `@apply` bg-background text-foreground; } - +}
🤖 Fix all issues with AI agents
In `@Frontend/src/components/ui/input.tsx`:
- Around line 9-12: The Input component lost its default base styling because
the cn(...) call in Input (input.tsx) now only passes through the incoming
className, leaving many usages unstyled; restore the original base classes
(e.g., border, rounded, px/py, text-sm, bg/placeholder styles) by adding them
back as the first argument to the cn(...) invocation inside the Input component,
or alternatively update every call site of the Input component to pass an
explicit className with equivalent styling (search for usages like
BasicDetails.tsx and message/search inputs) so no instance renders as an
unstyled native input.
🧹 Nitpick comments (4)
Frontend/src/components/chat/QuickRefineToolbar.tsx (2)
9-34: Consider moving staticactionsarray outside the component.The
actionsarray is recreated on every render but never changes. Moving it outside the component avoids unnecessary object allocations.Proposed refactor
+const REFINE_ACTIONS = [ + { + id: "shorten", + label: "Shorten", + icon: <Scissors className="h-3 w-3" />, + prompt: "Summarize the previous response to be much shorter." + }, + { + id: "pro", + label: "Professional", + icon: <Briefcase className="h-3 w-3" />, + prompt: "Rewrite the previous response in a professional, formal tone." + }, + { + id: "list", + label: "Listify", + icon: <List className="h-3 w-3" />, + prompt: "Convert the previous response into a bulleted list." + }, + { + id: "retry", + label: "Retry", + icon: <RotateCcw className="h-3 w-3" />, + prompt: "Regenerate the previous response." + }, +]; + const QuickRefineToolbar: React.FC<QuickRefineToolbarProps> = ({ onRefine }) => { - const actions = [ - // ... all action definitions - ]; - return ( <div className="flex flex-wrap gap-2 mt-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out justify-start"> - {actions.map((action) => ( + {REFINE_ACTIONS.map((action) => (
42-42: Buttons use hardcoded light-mode colors only.The styling (
bg-white,text-gray-600,hover:bg-purple-50) assumes light mode. If the app supports dark mode (as suggested byindex.csshaving.darktheme variables), these buttons will appear jarring in dark mode.Suggested dark mode support
- className="flex items-center gap-1 px-2 py-1 text-[10px] font-medium bg-white hover:bg-purple-50 border border-gray-200 rounded-md transition-all shadow-sm text-gray-600 hover:text-purple-700 hover:border-purple-200" + className="flex items-center gap-1 px-2 py-1 text-[10px] font-medium bg-white dark:bg-gray-700 hover:bg-purple-50 dark:hover:bg-purple-900 border border-gray-200 dark:border-gray-600 rounded-md transition-all shadow-sm text-gray-600 dark:text-gray-300 hover:text-purple-700 dark:hover:text-purple-300 hover:border-purple-200 dark:hover:border-purple-700"Frontend/src/components/chat/message-item.tsx (1)
37-55: AI message styling also lacks dark mode support.The AI message bubble uses hardcoded light-mode colors (
bg-gray-100,text-gray-800,border-gray-200) similar to the toolbar. For consistency, consider adding dark mode variants here as well.Suggested dark mode classes
- <div className="bg-gray-100 rounded-lg p-3 shadow-sm border border-gray-200"> - <p className="text-sm text-gray-800">{message.message}</p> + <div className="bg-gray-100 dark:bg-gray-700 rounded-lg p-3 shadow-sm border border-gray-200 dark:border-gray-600"> + <p className="text-sm text-gray-800 dark:text-gray-200">{message.message}</p>Frontend/src/components/chat/messages-list.tsx (1)
67-70:setHours()mutates the original Date objects.
messageDate.setHours(0,0,0,0)mutatesmessageDatein place (and similarly fornextDate). While this happens to work becausemessageDateis recreated each reduce iteration, it's a fragile pattern. Usedate-fnscomparison functions instead.Cleaner date comparison using date-fns
+import { format, isEqual, parseISO, startOfDay } from "date-fns"; // ... - if (!isEqual( - new Date(messageDate.setHours(0,0,0,0)), - new Date(nextDate.setHours(0,0,0,0)) - )) { + if (!isEqual(startOfDay(messageDate), startOfDay(nextDate))) {
startOfDay()returns a new Date without mutating the original.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
Frontend/src/components/chat/QuickRefineToolbar.tsxFrontend/src/components/chat/message-item.tsxFrontend/src/components/chat/messages-list.tsxFrontend/src/components/ui/input.tsxFrontend/src/index.css
🧰 Additional context used
🧬 Code graph analysis (2)
Frontend/src/components/chat/message-item.tsx (1)
Frontend/src/redux/chatSlice.ts (1)
Message(5-12)
Frontend/src/components/chat/messages-list.tsx (2)
Frontend/src/lib/useChat.tsx (1)
useChat(223-229)Frontend/src/components/chat/message-item.tsx (1)
MessageItem(11-61)
🔇 Additional comments (7)
Frontend/src/index.css (1)
123-137: LGTM!The keyframe reformatting from multi-line to single-line is purely cosmetic and maintains identical animation behavior.
Frontend/src/components/chat/QuickRefineToolbar.tsx (1)
36-49: LGTM on the core implementation!The toolbar structure is clean with proper key usage, accessible button elements, and smooth hover transitions via
group-hover. The refinement prompts are well-crafted for the intended use cases.Frontend/src/components/chat/message-item.tsx (2)
6-9: LGTM!Clean interface definition with optional
onSendMessageprop maintains backward compatibility while enabling the new toolbar feature.
52-55: LGTM on toolbar integration!The conditional rendering ensures the toolbar only appears when
onSendMessageis provided, and thegroupclass on the parent container correctly enables the hover-based visibility.Frontend/src/components/chat/messages-list.tsx (3)
17-17: LGTM!Correctly destructures
sendMessagefrom theuseChathook to enable the refinement feature.
56-62: LGTM!The
sendMessagecallback is correctly passed toMessageItem, enabling the quick-refine feature for AI responses.
36-36:sendMessageis not used in this effect and should not be added to dependencies.
sendMessageis passed toMessageItemduring render (line 60), not called within the effect at lines 23–36. The current dependencies[messages, lastMarkedAsSeen, markMessageAsSeen]are correct becausemarkMessageAsSeenis invoked in the effect (line 32). However, neithersendMessagenormarkMessageAsSeenare memoized withuseCallbackin theuseChathook, so both functions are recreated on every render. SincesendMessageis passed down as a prop, ensure child components handle its changing reference appropriately to avoid cascading re-renders.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
Kalpana-chavhan
force-pushed
the
feat/quick-refine-toolbar
branch
from
32907ff to
624caa4
Compare
1 participant
Closes #278
Description
This pull request implements a Quick-Refine Action Toolbar for AI-generated responses. Previously, users had to manually type follow-up prompts to modify AI outputs (e.g., asking to shorten a response).
This feature introduces a set of "one-click" buttons that appear upon hovering over an AI message, allowing users to instantly refine, reformat, or regenerate responses.
This enhancement reduces user friction, improves interaction speed, and guides users toward more effective LLM usage.
Changes Made
Visual Changes
The toolbar appears at the bottom-left of AI messages with a smooth transition (opacity-0 to opacity-100) on hover.
Checklist
Summary by CodeRabbit
New Features
Improvements
Style
✏️ Tip: You can customize this high-level summary in your review settings.