✨ feat: Add Message Feedback with Tag Options #5878
Conversation
TODO: - needs some refactoring. - needs some UI animations.
rubentalstra
changed the title
positive and 'negative'positive and negative
rubentalstra
changed the title
positive and negativepositive and negative
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
| /> | ||
| ) : showThankYou ? ( | ||
| <div className="inline-flex rounded-lg border border-token-border-light p-4"> | ||
| <div className="text-sm">Thanks for your feedback!</div> |
Check failure
Code scanning / ESLint
disallow literal string Error
rubentalstra
changed the title
positive and negative
|
rubentalstra
changed the title
| <div className="min-h-[96px] w-full"> | ||
| <div className="relative mt-2 flex w-full flex-col gap-3 rounded-lg border border-token-border-light p-4"> | ||
| <div className="flex justify-between items-center"> | ||
| <div className="text-sm text-token-text-secondary">Tell us more:</div> |
Check failure
Code scanning / ESLint
disallow literal string Error
| <OGDialogTitle className="text-lg font-semibold leading-6 text-token-text-primary"> | ||
| Provide additional feedback | ||
| </OGDialogTitle> |
Check failure
Code scanning / ESLint
disallow literal string Error
| <span className="absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-blue-500 text-white text-xs"> | ||
| ✓ | ||
| </span> |
Check failure
Code scanning / ESLint
disallow literal string Error
| > | ||
| Submit | ||
| </button> |
Check failure
Code scanning / ESLint
disallow literal string Error
|
Nice work. Is the feedback I send stored somewhere? |
|
@walbercardoso yes this is stored on the message object. |
Summary
Closes: #901
This pull request introduces a new feature for providing feedback on messages, along with various enhancements to the user interface and backend. The most important changes include adding a feedback route to the server, creating a new component for feedback tag options, and updating the UI to handle feedback submission.
Backend changes:
api/server/routes/messages.js: Added a new PUT route for updating message feedback, including handling thumbs down feedback with default tag choices.Frontend changes:
client/src/components/Chat/Messages/FeedbackTagOptions.tsx: Created a newFeedbackTagOptionscomponent to allow users to select feedback tags and provide additional comments.client/src/components/Chat/Messages/HoverButtons.tsx: Updated theHoverButtonscomponent to include thumbs up and thumbs down buttons for message feedback, and handle feedback submission state. [1] [2] [3] [4] [5]client/src/components/Chat/Messages/ui/MessageRender.tsx: Integrated theFeedbackTagOptionscomponent into theMessageRendercomponent to display feedback options when a message is rated thumbs down. [1] [2] [3] [4]New icons:
client/src/components/svg/ThumbDownIcon.tsx: Added a newThumbDownIconcomponent for the thumbs down feedback button.client/src/components/svg/ThumbUpIcon.tsx: Added a newThumbUpIconcomponent for the thumbs up feedback button.client/src/components/svg/index.ts: Exported the newThumbUpIconandThumbDownIconcomponents.Hook updates:
client/src/hooks/Messages/useMessageActions.tsx: Updated theuseMessageActionshook to handle feedback submission and state management for message ratings. [1] [2] [3]Change Type
Testing
Test Configuration:
Backend:
/feedbackAPI endpoint using Postman to ensure proper handling of feedback submissions, including defaulting tag choices for thumbs-down ratings.Frontend:
FeedbackTagOptionscomponent renders with predefined tags.General:
Checklist