Thumb up/down feedback implement (#15)

* feat: implment thumb up/down feedback Signed-off-by: tygao <tygao@amazon.com> * use traceId to replace index Signed-off-by: tygao <tygao@amazon.com> * use primary color and remove disabled Signed-off-by: tygao <tygao@amazon.com> * use index and only enable feedback in markdown type Signed-off-by: tygao <tygao@amazon.com> * chore: nit Signed-off-by: tygao <tygao@amazon.com> * use findLast to get last input Signed-off-by: tygao <tygao@amazon.com> * nit Signed-off-by: tygao <tygao@amazon.com> * use meesage as params Signed-off-by: tygao <tygao@amazon.com> * update comment Signed-off-by: tygao <tygao@amazon.com> * remove extra statement Signed-off-by: tygao <tygao@amazon.com> * rename and simply Signed-off-by: tygao <tygao@amazon.com> --------- Signed-off-by: tygao <tygao@amazon.com>
opensearch-project · Nov 20, 2023 · 9c6cb29 · 9c6cb29
1 parent a2abfd2
commit 9c6cb29
Show file tree

Hide file tree

Showing 3 changed files with 117 additions and 9 deletions.
diff --git a/common/types/chat_saved_object_attributes.ts b/common/types/chat_saved_object_attributes.ts
@@ -27,7 +27,7 @@ export interface IInput {
     appId?: string;
   };
 }
-interface IOutput {
+export interface IOutput {
   type: 'output';
   traceId?: string; // used for tracing agent calls
   toolsUsed?: string[];

diff --git a/public/hooks/use_feed_back.tsx b/public/hooks/use_feed_back.tsx
@@ -0,0 +1,72 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { useState } from 'react';
+import { ASSISTANT_API } from '../../common/constants/llm';
+import { IOutput } from '../../common/types/chat_saved_object_attributes';
+import { useChatContext } from '../contexts/chat_context';
+import { useCore } from '../contexts/core_context';
+import { useChatState } from './use_chat_state';
+
+interface SendFeedbackBody {
+  metadata: {
+    type: 'event_analytics' | 'chat' | 'ppl_submit';
+    sessionId?: string;
+    traceId?: string;
+    error?: boolean;
+  };
+  input: string;
+  output: string;
+  correct: boolean | undefined;
+  // Currently unused but required.
+  expectedOutput: string;
+  comment: string;
+}
+
+export const useFeedback = () => {
+  const chatContext = useChatContext();
+  const core = useCore();
+  const { chatState } = useChatState();
+  const [feedbackResult, setFeedbackResult] = useState<undefined | boolean>(undefined);
+
+  const sendFeedback = async (message: IOutput, correct: boolean) => {
+    const outputMessage = message;
+    // Markdown type output all has traceId.
+    const outputMessageIndex = chatState.messages.findIndex((item) => {
+      return item.type === 'output' && item.traceId === message.traceId;
+    });
+    const inputMessage = chatState.messages
+      .slice(0, outputMessageIndex)
+      .findLast((item) => item.type === 'input');
+    if (!inputMessage) {
+      return;
+    }
+
+    const body: SendFeedbackBody = {
+      metadata: {
+        type: 'chat', // currently type is only chat in feedback
+        sessionId: chatContext.sessionId,
+        traceId: outputMessage.traceId,
+        error: false,
+      },
+      input: inputMessage.content,
+      output: outputMessage.content,
+      correct,
+      expectedOutput: '',
+      comment: '',
+    };
+
+    try {
+      const response = await core.services.http.post(ASSISTANT_API.FEEDBACK, {
+        body: JSON.stringify(body),
+      });
+      setFeedbackResult(correct);
+    } catch (error) {
+      console.error('send feedback error');
+    }
+  };
+
+  return { sendFeedback, feedbackResult };
+};
diff --git a/public/tabs/chat/messages/message_bubble.tsx b/public/tabs/chat/messages/message_bubble.tsx
@@ -14,11 +14,12 @@ import {
   EuiPanel,
   EuiSpacer,
 } from '@elastic/eui';
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 import cx from 'classnames';
-import { IMessage } from '../../../../common/types/chat_saved_object_attributes';
+import { IMessage, IOutput } from '../../../../common/types/chat_saved_object_attributes';
 import { useUiSetting } from '../../../../../../src/plugins/opensearch_dashboards_react/public';
 import chatIcon from '../../../assets/chat.svg';
+import { useFeedback } from '../../../hooks/use_feed_back';
 
 type MessageBubbleProps = {
   showActionBar: boolean;
@@ -36,6 +37,24 @@ type MessageBubbleProps = {
 
 export const MessageBubble: React.FC<MessageBubbleProps> = React.memo((props) => {
   const darkMode = useUiSetting<boolean>('theme:darkMode');
+  const { feedbackResult, sendFeedback } = useFeedback();
+
+  // According to the design of the feedback, only markdown type output is supported.
+  const showFeedback =
+    'message' in props &&
+    props.message.type === 'output' &&
+    props.message.contentType === 'markdown';
+
+  const feedbackOutput = useCallback(
+    (correct: boolean, result: boolean | undefined) => {
+      // No repeated feedback.
+      if (result !== undefined || !('message' in props)) {
+        return;
+      }
+      sendFeedback(props.message as IOutput, correct);
+    },
+    [props, sendFeedback]
+  );
   if ('loading' in props && props.loading) {
     return (
       <EuiFlexGroup gutterSize="m" justifyContent="flexStart" alignItems="flexStart">
@@ -167,12 +186,29 @@ export const MessageBubble: React.FC<MessageBubbleProps> = React.memo((props) =>
                     />
                   </EuiFlexItem>
                 )}
-                <EuiFlexItem grow={false}>
-                  <EuiButtonIcon aria-label="thumbsUp" color="text" iconType="thumbsUp" />
-                </EuiFlexItem>
-                <EuiFlexItem grow={false}>
-                  <EuiButtonIcon aria-label="thumbsDown" color="text" iconType="thumbsDown" />
-                </EuiFlexItem>
+                {showFeedback && (
+                  // After feedback, only corresponding thumb icon will be kept and disabled.
+                  <>
+                    {feedbackResult !== false ? (
+                      <EuiFlexItem grow={false}>
+                        <EuiButtonIcon
+                          color={feedbackResult === true ? 'primary' : 'text'}
+                          iconType="thumbsUp"
+                          onClick={() => feedbackOutput(true, feedbackResult)}
+                        />
+                      </EuiFlexItem>
+                    ) : null}
+                    {feedbackResult !== true ? (
+                      <EuiFlexItem grow={false}>
+                        <EuiButtonIcon
+                          color={feedbackResult === false ? 'primary' : 'text'}
+                          iconType="thumbsDown"
+                          onClick={() => feedbackOutput(false, feedbackResult)}
+                        />
+                      </EuiFlexItem>
+                    ) : null}
+                  </>
+                )}
               </EuiFlexGroup>
             </>
           )}