Added feedback thumbs to chat respones

aaronba · Mar 26, 2024 · a387ba3 · a387ba3
1 parent e77008a
commit a387ba3
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 12 deletions.
diff --git a/webapp/src/components/chat/chat-history/ChatHistoryItem.tsx b/webapp/src/components/chat/chat-history/ChatHistoryItem.tsx
@@ -156,9 +156,8 @@ export const ChatHistoryItem: React.FC<ChatHistoryItemProps> = ({ message, messa
     // Currently for demonstration purposes only, no feedback is actually sent to kernel / model
     const showShowRLHFMessage =
         features[FeatureKeys.RLHF].enabled &&
-        message.userFeedback === UserFeedback.Requested &&
         messageIndex === conversations[selectedId].messages.length - 1 &&
-        message.userId === 'Bot';
+        message.userId.toLowerCase() === 'bot';
 
     const messageCitations = message.citations ?? [];
     const showMessageCitation = messageCitations.length > 0;
@@ -220,9 +219,7 @@ export const ChatHistoryItem: React.FC<ChatHistoryItemProps> = ({ message, messa
                                 }`}
                             </ToggleButton>
                         )}
-                        {showShowRLHFMessage && (
-                            <div className={classes.rlhf}>{<UserFeedbackActions messageIndex={messageIndex} />}</div>
-                        )}
+                        {<div className={classes.rlhf}>{<UserFeedbackActions messageIndex={messageIndex} />}</div>}
                         {showCitationCards && <CitationCards message={message} />}
                     </div>
                 )}

diff --git a/webapp/src/components/chat/chat-history/UserFeedbackActions.tsx b/webapp/src/components/chat/chat-history/UserFeedbackActions.tsx
@@ -1,5 +1,5 @@
 import { Button, Text, Tooltip, makeStyles } from '@fluentui/react-components';
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import { UserFeedback } from '../../../libs/models/ChatMessage';
 import { useAppDispatch, useAppSelector } from '../../../redux/app/hooks';
 import { RootState } from '../../../redux/app/store';
@@ -19,13 +19,27 @@ interface IUserFeedbackProps {
 }
 
 export const UserFeedbackActions: React.FC<IUserFeedbackProps> = ({ messageIndex }) => {
+    const [thumbsUpAppearance, setThumbsUpAppearance] = useState<
+        'secondary' | 'primary' | 'outline' | 'subtle' | 'transparent'
+    >();
+    const [thumbsDownAppearance, setThumbsDownAppearance] = useState<
+        'secondary' | 'primary' | 'outline' | 'subtle' | 'transparent'
+    >();
     const classes = useClasses();
 
     const dispatch = useAppDispatch();
     const { selectedId } = useAppSelector((state: RootState) => state.conversations);
 
     const onUserFeedbackProvided = useCallback(
         (positive: boolean) => {
+            if (positive) {
+                setThumbsUpAppearance('primary');
+                setThumbsDownAppearance('transparent');
+            } else {
+                setThumbsUpAppearance('transparent');
+                setThumbsDownAppearance('primary');
+            }
+
             dispatch(
                 updateMessageProperty({
                     chatId: selectedId,
@@ -41,13 +55,14 @@ export const UserFeedbackActions: React.FC<IUserFeedbackProps> = ({ messageIndex
 
     return (
         <div className={classes.root}>
-            <Text color="gray" size={200}>
+            <Text color="gray" size={200} align="start">
                 AI-generated content may be incorrect
             </Text>
+            <p>&nbsp;&nbsp;&nbsp;</p>
             <Tooltip content={'Like bot message'} relationship="label">
                 <Button
                     icon={<ThumbLike16 />}
-                    appearance="transparent"
+                    appearance={thumbsUpAppearance}
                     aria-label="Edit"
                     onClick={() => {
                         onUserFeedbackProvided(true);
@@ -57,7 +72,7 @@ export const UserFeedbackActions: React.FC<IUserFeedbackProps> = ({ messageIndex
             <Tooltip content={'Dislike bot message'} relationship="label">
                 <Button
                     icon={<ThumbDislike16 />}
-                    appearance="transparent"
+                    appearance={thumbsDownAppearance}
                     aria-label="Edit"
                     onClick={() => {
                         onUserFeedbackProvided(false);

diff --git a/webapp/src/redux/features/app/AppState.ts b/webapp/src/redux/features/app/AppState.ts
@@ -113,7 +113,7 @@ export const Features = {
         description: 'Enable multi-user chat sessions. Not available when authorization is disabled.',
     },
     [FeatureKeys.RLHF]: {
-        enabled: false,
+        enabled: true,
         label: 'Reinforcement Learning from Human Feedback',
         inactive: false,
         description: 'Enable users to vote on model-generated responses. For demonstration purposes only.',

diff --git a/webapp/src/redux/features/conversations/conversationsSlice.ts b/webapp/src/redux/features/conversations/conversationsSlice.ts
@@ -212,10 +212,10 @@ const frontLoadChat = (state: ConversationsState, id: string) => {
 };
 
 const updateConversation = (state: ConversationsState, chatId: string, message: IChatMessage) => {
-    const requestUserFeedback = message.userId === 'bot' && message.type === ChatMessageType.Message;
+    const requestUserFeedback = message.userId.toLowerCase() === 'bot' && message.type === ChatMessageType.Message;
     state.conversations[chatId].messages.push({
         ...message,
-        userFeedback: requestUserFeedback ? UserFeedback.Requested : undefined,
+        userFeedback: requestUserFeedback ? UserFeedback.Requested : UserFeedback.Unknown,
     });
     frontLoadChat(state, chatId);
 };