feat(feedback): improve feedback UI with separator, category rename, and

brandonkachen · brandonkachen · commit b313cf731906 · 2025-11-17T12:17:20.000-08:00
custom placeholders

- Add bullet separator (•) between completion time/credits and feedback
icon - Rename feedback categories from good_code/bad_code to
good_result/bad_result - Add category-specific placeholder messages to
guide user input: - Good result: prompts for what they liked - Bad
result: prompts for what went wrong - Bug: prompts for bug description -
Other: general feedback prompt - Update feedback icon symbol logic to
use new category names
diff --git a/cli/src/chat.tsx b/cli/src/chat.tsx
@@ -462,6 +462,7 @@ export const Chat = ({
   const [showFeedbackConfirmation, setShowFeedbackConfirmation] = useState(false)
 
   const [messagesWithFeedback, setMessagesWithFeedback] = useState<Set<string>>(new Set())
+  const [messageFeedbackCategories, setMessageFeedbackCategories] = useState<Map<string, string>>(new Map())
 
   const resetFeedbackForm = useCallback(() => {
     setFeedbackText('')
@@ -526,6 +527,12 @@ export const Chat = ({
     // Mark this message as having feedback submitted
     if (feedbackMessageId) {
       setMessagesWithFeedback(prev => new Set(prev).add(feedbackMessageId))
+      // Remove the category since feedback is submitted
+      setMessageFeedbackCategories(prev => {
+        const next = new Map(prev)
+        next.delete(feedbackMessageId)
+        return next
+      })
     }
 
     // Exit feedback mode first
@@ -842,6 +849,7 @@ export const Chat = ({
               feedbackMode={feedbackMode}
               onCloseFeedback={handleFeedbackCancel}
               messagesWithFeedback={messagesWithFeedback}
+              messageFeedbackCategories={messageFeedbackCategories}
             />
           )
         })}
@@ -932,7 +940,13 @@ export const Chat = ({
               setFeedbackText(text)
               setFeedbackCursor(cursor)
             }}
-            onCategoryChange={setFeedbackCategory}
+            onCategoryChange={(category) => {
+              setFeedbackCategory(category)
+              // Store category selection for this message so button can show it
+              if (feedbackMessageId) {
+                setMessageFeedbackCategories(prev => new Map(prev).set(feedbackMessageId, category))
+              }
+            }}
           onSubmit={handleFeedbackSubmit}
           onCancel={handleFeedbackCancel}
           width={terminalWidth - 2}
diff --git a/cli/src/components/feedback-icon-button.tsx b/cli/src/components/feedback-icon-button.tsx
@@ -1,3 +1,4 @@
+import { TextAttributes } from '@opentui/core'
 import React, { useRef } from 'react'
 
 import { useHoverToggle } from './agent-mode-toggle'
@@ -12,9 +13,16 @@ interface FeedbackIconButtonProps {
   onClose?: () => void
   isOpen?: boolean
   messageId?: string
+  selectedCategory?: string
 }
 
-export const FeedbackIconButton: React.FC<FeedbackIconButtonProps> = ({ onClick, onClose, isOpen, messageId }) => {
+export const FeedbackIconButton: React.FC<FeedbackIconButtonProps> = ({
+  onClick,
+  onClose,
+  isOpen,
+  messageId,
+  selectedCategory,
+}) => {
   const theme = useTheme()
   const hover = useHoverToggle()
   const hoveredOnceRef = useRef(false)
@@ -36,8 +44,18 @@ export const FeedbackIconButton: React.FC<FeedbackIconButtonProps> = ({ onClick,
   }
   const handleMouseOut = () => hover.scheduleClose()
 
-  const textCollapsed = '[?]'
-  const textExpanded = '[share feedback]'
+  // Determine which symbol to show based on selected category
+  const getSymbol = () => {
+    if (selectedCategory === 'good_result') {
+      return '▲▽' // Good selected - filled up, outlined down
+    } else if (selectedCategory === 'bad_result') {
+      return '△▼' // Bad selected - outlined up, filled down
+    }
+    return '△▽' // Default - both outlined
+  }
+
+  const textCollapsed = `${getSymbol()}`
+  const textExpanded = '[how was this?]'
 
   return (
     <Button
@@ -51,8 +69,17 @@ export const FeedbackIconButton: React.FC<FeedbackIconButtonProps> = ({ onClick,
       onMouseOver={handleMouseOver}
       onMouseOut={handleMouseOut}
     >
-      <text style={{ wrapMode: 'none', fg: hover.isOpen || isOpen ? theme.foreground : theme.muted }}>
-        {hover.isOpen || isOpen ? textExpanded : textCollapsed}
+      <text
+        style={{
+          wrapMode: 'none',
+          fg: hover.isOpen || isOpen ? theme.foreground : theme.muted,
+        }}
+      >
+        {hover.isOpen || isOpen ? (
+          textExpanded
+        ) : (
+          <span attributes={TextAttributes.DIM}>{textCollapsed}</span>
+        )}
       </text>
     </Button>
   )
diff --git a/cli/src/components/feedback-input-mode.tsx b/cli/src/components/feedback-input-mode.tsx
@@ -63,10 +63,10 @@ export const FeedbackInputMode: React.FC<FeedbackInputModeProps> = ({
   )
 
   const categoryOptions = [
-    { id: 'good_code', label: 'Good result', highlight: theme.success },
-    { id: 'bad_code', label: 'Bad result', highlight: theme.error },
-    { id: 'bug', label: 'Bug', highlight: theme.warning },
-    { id: 'other', label: 'Other', highlight: theme.info },
+    { id: 'good_result', label: 'Good result', highlight: theme.success, placeholder: 'What did you like? (e.g., "Fast and accurate", "Great explanation")' },
+    { id: 'bad_result', label: 'Bad result', highlight: theme.error, placeholder: 'What went wrong? (e.g., "Incorrect changes", "Missed the requirement")' },
+    { id: 'app_bug', label: 'App bug', highlight: theme.warning, placeholder: 'Report a problem with Codebuff (crashes, errors, UI issues, etc.)' },
+    { id: 'other', label: 'Other', highlight: theme.info, placeholder: 'Tell us more (what happened, what you expected)...' },
   ] as const
 
   return (
@@ -157,7 +157,7 @@ export const FeedbackInputMode: React.FC<FeedbackInputModeProps> = ({
             onFeedbackTextChange(newText, feedbackCursor + 1)
             return true
           }}
-          placeholder={'Tell us more (what happened, what you expected)...'}
+          placeholder={categoryOptions.find(opt => opt.id === category)?.placeholder || 'Tell us more (what happened, what you expected)...'}
           focused={true}
           maxHeight={5}
           minHeight={3}
diff --git a/cli/src/components/message-block.tsx b/cli/src/components/message-block.tsx
@@ -84,6 +84,7 @@ export const MessageBlock = memo((props: MessageBlockProps): ReactNode => {
     feedbackMode,
     onCloseFeedback,
     messagesWithFeedback,
+    messageFeedbackCategories,
   } = props
   useWhyDidYouUpdateById('MessageBlock', messageId, props, {
     logLevel: 'debug',
@@ -182,12 +183,26 @@ export const MessageBlock = memo((props: MessageBlockProps): ReactNode => {
                 {typeof credits === 'number' && credits > 0 && ` • ${pluralize(credits, 'credit')}`}
               </text>
               {!messagesWithFeedback?.has(messageId) && (
-                <FeedbackIconButton
-                  onClick={() => onFeedback?.(messageId)}
-                  onClose={onCloseFeedback}
-                  isOpen={Boolean(feedbackMode && feedbackOpenMessageId === messageId)}
-                  messageId={messageId}
-                />
+                <>
+                  <text
+                    attributes={TextAttributes.DIM}
+                    style={{
+                      wrapMode: 'none',
+                      fg: theme.muted,
+                      marginTop: 0,
+                      marginBottom: 0,
+                    }}
+                  >
+                    •
+                  </text>
+                  <FeedbackIconButton
+                    onClick={() => onFeedback?.(messageId)}
+                    onClose={onCloseFeedback}
+                    isOpen={Boolean(feedbackMode && feedbackOpenMessageId === messageId)}
+                    messageId={messageId}
+                    selectedCategory={messageFeedbackCategories?.get(messageId)}
+                  />
+                </>
               )}
             </box>
           )}
@@ -270,6 +285,7 @@ interface MessageBlockProps {
   feedbackMode?: boolean
   onCloseFeedback?: () => void
   messagesWithFeedback?: Set<string>
+  messageFeedbackCategories?: Map<string, string>
 }
 
 interface AgentBodyProps {
diff --git a/cli/src/components/message-with-agents.tsx b/cli/src/components/message-with-agents.tsx
@@ -37,6 +37,11 @@ interface MessageWithAgentsProps {
   onBuildFast: () => void
   onBuildMax: () => void
   onFeedback: (messageId: string) => void
+  feedbackOpenMessageId?: string | null
+  feedbackMode?: boolean
+  onCloseFeedback?: () => void
+  messagesWithFeedback?: Set<string>
+  messageFeedbackCategories?: Map<string, string>
 }
 
 export const MessageWithAgents = memo(
@@ -66,7 +71,8 @@ export const MessageWithAgents = memo(
     feedbackMode,
     onCloseFeedback,
     messagesWithFeedback,
-  }: MessageWithAgentsProps & { feedbackOpenMessageId?: string | null; feedbackMode?: boolean; onCloseFeedback?: () => void; messagesWithFeedback?: Set<string> }): ReactNode => {
+    messageFeedbackCategories,
+  }: MessageWithAgentsProps): ReactNode => {
     const SIDE_GUTTER = 1
     const isAgent = message.variant === 'agent'
 
@@ -93,6 +99,11 @@ export const MessageWithAgents = memo(
           onBuildFast={onBuildFast}
           onBuildMax={onBuildMax}
           onFeedback={onFeedback}
+          feedbackOpenMessageId={feedbackOpenMessageId}
+          feedbackMode={feedbackMode}
+          onCloseFeedback={onCloseFeedback}
+          messagesWithFeedback={messagesWithFeedback}
+          messageFeedbackCategories={messageFeedbackCategories}
         />
       )
     }
@@ -216,11 +227,12 @@ export const MessageWithAgents = memo(
                   onBuildMax={onBuildMax}
                   setCollapsedAgents={setCollapsedAgents}
                   addAutoCollapsedAgent={addAutoCollapsedAgent}
-                  onFeedback={onFeedback}
-                  feedbackOpenMessageId={feedbackOpenMessageId}
-                  feedbackMode={feedbackMode}
-                  onCloseFeedback={onCloseFeedback}
-                  messagesWithFeedback={messagesWithFeedback}
+                onFeedback={onFeedback}
+                feedbackOpenMessageId={feedbackOpenMessageId}
+                feedbackMode={feedbackMode}
+                onCloseFeedback={onCloseFeedback}
+                messagesWithFeedback={messagesWithFeedback}
+                messageFeedbackCategories={messageFeedbackCategories}
                 />
               </box>
             </box>
@@ -264,11 +276,12 @@ export const MessageWithAgents = memo(
                 onBuildMax={onBuildMax}
                 setCollapsedAgents={setCollapsedAgents}
                 addAutoCollapsedAgent={addAutoCollapsedAgent}
-              onFeedback={onFeedback}
-              feedbackOpenMessageId={feedbackOpenMessageId}
-              feedbackMode={feedbackMode}
-              onCloseFeedback={onCloseFeedback}
-              messagesWithFeedback={messagesWithFeedback}
+        onFeedback={onFeedback}
+        feedbackOpenMessageId={feedbackOpenMessageId}
+        feedbackMode={feedbackMode}
+        onCloseFeedback={onCloseFeedback}
+        messagesWithFeedback={messagesWithFeedback}
+        messageFeedbackCategories={messageFeedbackCategories}
               />
             </box>
           )}
@@ -300,6 +313,11 @@ export const MessageWithAgents = memo(
                   onBuildFast={onBuildFast}
                   onBuildMax={onBuildMax}
                   onFeedback={onFeedback}
+                  feedbackOpenMessageId={feedbackOpenMessageId}
+                  feedbackMode={feedbackMode}
+                  onCloseFeedback={onCloseFeedback}
+                  messagesWithFeedback={messagesWithFeedback}
+                  messageFeedbackCategories={messageFeedbackCategories}
                 />
               </box>
             ))}
@@ -331,6 +349,11 @@ interface AgentMessageProps {
   onBuildFast: () => void
   onBuildMax: () => void
   onFeedback: (messageId: string) => void
+  feedbackOpenMessageId?: string | null
+  feedbackMode?: boolean
+  onCloseFeedback?: () => void
+  messagesWithFeedback?: Set<string>
+  messageFeedbackCategories?: Map<string, string>
 }
 
 const AgentMessage = memo(
@@ -355,6 +378,11 @@ const AgentMessage = memo(
     onBuildFast,
     onBuildMax,
     onFeedback,
+    feedbackOpenMessageId,
+    feedbackMode,
+    onCloseFeedback,
+    messagesWithFeedback,
+    messageFeedbackCategories,
   }: AgentMessageProps): ReactNode => {
     const agentInfo = message.agent!
     const isCollapsed = collapsedAgents.has(message.id)
@@ -553,6 +581,11 @@ const AgentMessage = memo(
                   onBuildFast={onBuildFast}
                   onBuildMax={onBuildMax}
                   onFeedback={onFeedback}
+                  feedbackOpenMessageId={feedbackOpenMessageId}
+                  feedbackMode={feedbackMode}
+                  onCloseFeedback={onCloseFeedback}
+                  messagesWithFeedback={messagesWithFeedback}
+                  messageFeedbackCategories={messageFeedbackCategories}
                 />
               </box>
             ))}
diff --git a/cli/src/components/multiline-input.tsx b/cli/src/components/multiline-input.tsx
