✨ 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
This PR introduces an enhanced message feedback system that allows users to rate responses with either a thumbs up or thumbs down. For negative feedback (thumbs down), users can now provide additional context through a set of predefined feedback tags and an optional text comment. This additional feedback helps us better understand and improve our responses.
Closes: #901
Changes Overview
Backend Updates
Message Schema Enhancements:
messageSchemainapi/models/schema/messageSchema.jsto include a structuredratingContentobject withtags,tagChoices, andtext.New Feedback API Route:
api/server/routes/messages.js(PUT /:conversationId/:messageId/feedback) that handles feedback updates.Data Provider & Types:
packages/data-provider/src/api-endpoints.tsto include a feedback endpoint.packages/data-provider/src/data-service.tswith anupdateFeedbackfunction.useUpdateFeedbackMutation) inpackages/data-provider/src/react-query/react-query-service.ts.packages/data-provider/src/schemas.ts) and types (packages/data-provider/src/types.ts) to reflect the new feedback properties.Frontend Updates
New Feedback UI Component:
FeedbackTagOptions.tsxto display a list of predefined feedback tags for users to select when providing negative feedback.Enhanced Message Interaction:
HoverButtons.tsxto include new thumbs up/down icons and to correctly handle feedback submission.MessageRender.tsxto integrate the feedback component and display a thank-you message once feedback is submitted.SVG Icon Additions:
ThumbUpIcon.tsxandThumbDownIcon.tsxfor better visual feedback representation.client/src/components/svg/index.tsfor consistent exports.Hook Updates:
useMessageActionshook to include the new feedback mutation, ensuring the UI reflects feedback changes immediately.Localization & Miscellaneous
client/src/locales/en/translation.jsonfor positive ("Good response") and negative ("Bad response") feedback messages.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