[Chatbot] Add feature flags for traces and feedback (#379)

* Add flag for trace view Signed-off-by: Sihan He <[email protected]> * update change log Signed-off-by: Sihan He <[email protected]> * Add feedback flag Signed-off-by: Sihan He <[email protected]> * Update change log Signed-off-by: Sihan He <[email protected]> --------- Signed-off-by: Sihan He <[email protected]> (cherry picked from commit 4671d7c) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> # Conflicts: # CHANGELOG.md
opensearch-project · Dec 27, 2024 · 225c648 · 225c648
1 parent cfc975c
commit 225c648
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 2 deletions.
diff --git a/common/types/config.ts b/common/types/config.ts
@@ -9,6 +9,8 @@ export const configSchema = schema.object({
   enabled: schema.boolean({ defaultValue: true }),
   chat: schema.object({
     enabled: schema.boolean({ defaultValue: false }),
+    trace: schema.boolean({ defaultValue: true }),
+    feedback: schema.boolean({ defaultValue: true }),
   }),
   incontextInsight: schema.object({
     enabled: schema.boolean({ defaultValue: true }),

diff --git a/public/components/incontext_insight/generate_popover_body.tsx b/public/components/incontext_insight/generate_popover_body.tsx
@@ -321,6 +321,7 @@ export const GeneratePopoverBody: React.FC<{
   };
 
   const renderInnerFooter = () => {
+    const traceTip = 'Insight With RAG';
     return (
       <EuiPopoverFooter className="incontextInsightGeneratePopoverFooter" paddingSize="none">
         {
@@ -332,6 +333,7 @@ export const GeneratePopoverBody: React.FC<{
               onViewTrace={() => {
                 setShowInsight(true);
               }}
+              traceTip={traceTip}
               usageCollection={usageCollection}
               isOnTrace={showInsight}
               metricAppName={metricAppName}
@@ -345,6 +347,7 @@ export const GeneratePopoverBody: React.FC<{
               showFeedback
               showTraceIcon={insightAvailable}
               onViewTrace={() => {}}
+              traceTip={traceTip}
               usageCollection={usageCollection}
               isOnTrace={showInsight}
               metricAppName={metricAppName}

diff --git a/public/tabs/chat/messages/message_action.tsx b/public/tabs/chat/messages/message_action.tsx
@@ -22,6 +22,7 @@ interface MessageActionsProps {
   showTraceIcon?: boolean;
   isOnTrace?: boolean;
   traceInteractionId?: string;
+  traceTip?: string;
   onViewTrace?: () => void;
   shouldActionBarVisibleOnHover?: boolean;
   isFullWidth?: boolean;
@@ -44,6 +45,7 @@ export const MessageActions: React.FC<MessageActionsProps> = ({
   showTraceIcon = false,
   isOnTrace = false,
   traceInteractionId = null,
+  traceTip = 'info',
   onViewTrace,
   shouldActionBarVisibleOnHover = false,
   isFullWidth = false,
@@ -146,7 +148,7 @@ export const MessageActions: React.FC<MessageActionsProps> = ({
     trace: {
       show: showTraceIcon && onViewTrace,
       component: renderButtonWithTooltip(
-        'Insight with RAG',
+        traceTip,
         <EuiSmallButtonIcon
           aria-label="How was this generated?"
           {...(traceInteractionId && {

diff --git a/public/tabs/chat/messages/message_bubble.test.tsx b/public/tabs/chat/messages/message_bubble.test.tsx
@@ -8,6 +8,7 @@ import { render, screen, fireEvent } from '@testing-library/react';
 
 import { MessageBubble } from './message_bubble';
 import { IOutput } from '../../../../common/types/chat_saved_object_attributes';
+import * as services from '../../../services';
 import * as useFeedbackHookExports from '../../../hooks/use_feed_back';
 import * as useChatActionsExports from '../../../hooks/use_chat_actions';
 import * as coreHookExports from '../../../contexts/core_context';
@@ -18,6 +19,9 @@ describe('<MessageBubble />', () => {
   const reportUiStatsMock = jest.fn();
 
   beforeEach(() => {
+    jest
+      .spyOn(services, 'getConfigSchema')
+      .mockReturnValue({ chat: { trace: true, feedback: true } });
     jest
       .spyOn(useFeedbackHookExports, 'useFeedback')
       .mockReturnValue({ feedbackResult: undefined, sendFeedback: sendFeedbackMock });
@@ -289,4 +293,78 @@ describe('<MessageBubble />', () => {
     );
     expect(screen.queryByTestId('trace-icon-bar')).toBeNull();
   });
+
+  it('should control view trace through config flag', () => {
+    render(
+      <MessageBubble
+        showActionBar={true}
+        showRegenerate={true}
+        message={{
+          type: 'output',
+          contentType: 'markdown',
+          content: 'here are the indices in your cluster: .alert',
+          interactionId: 'bar1',
+        }}
+        interaction={{
+          input: 'foo',
+          response: 'bar1',
+          conversation_id: 'foo',
+          interaction_id: 'bar1',
+          create_time: new Date().toLocaleString(),
+        }}
+      />
+    );
+    expect(screen.queryByTestId('trace-icon-bar1')).toBeVisible();
+
+    jest.spyOn(services, 'getConfigSchema').mockReturnValue({ chat: { trace: false } });
+    render(
+      <MessageBubble
+        showActionBar={true}
+        showRegenerate={true}
+        message={{
+          type: 'output',
+          contentType: 'markdown',
+          content: 'here are the indices in your cluster: .alert',
+          interactionId: 'bar2',
+        }}
+        interaction={{
+          input: 'foo',
+          response: 'bar2',
+          conversation_id: 'foo',
+          interaction_id: 'bar2',
+          create_time: new Date().toLocaleString(),
+        }}
+      />
+    );
+    expect(screen.queryByTestId('trace-icon-bar2')).toBeNull();
+  });
+
+  it('should control feedback buttons through config flag', () => {
+    const { rerender } = render(
+      <MessageBubble
+        showActionBar={true}
+        message={{
+          type: 'output',
+          contentType: 'markdown',
+          content: 'here are the indices in your cluster: .alert',
+        }}
+      />
+    );
+    expect(screen.queryByLabelText('feedback thumbs down')).toBeVisible();
+    expect(screen.queryByLabelText('feedback thumbs up')).toBeVisible();
+
+    jest.spyOn(services, 'getConfigSchema').mockReturnValue({ chat: { feedback: false } });
+    rerender(
+      <MessageBubble
+        showActionBar={true}
+        message={{
+          type: 'output',
+          contentType: 'markdown',
+          content: 'here are the indices in your cluster: .alert',
+        }}
+      />
+    );
+    expect(screen.queryByLabelText('feedback thumbs down')).toBeNull();
+    expect(screen.queryByLabelText('feedback thumbs up')).toBeNull();
+  });
 });
diff --git a/public/tabs/chat/messages/message_bubble.tsx b/public/tabs/chat/messages/message_bubble.tsx
@@ -17,6 +17,7 @@ import React from 'react';
 import { IconType } from '@elastic/eui/src/components/icon/icon';
 import { MessageActions } from './message_action';
 import { useCore } from '../../../contexts';
+import { getConfigSchema } from '../../../services';
 
 // TODO: Replace with getChrome().logos.Chat.url
 import { useChatActions } from '../../../hooks';
@@ -46,8 +47,11 @@ type MessageBubbleProps = {
 export const MessageBubble: React.FC<MessageBubbleProps> = React.memo((props) => {
   const { executeAction } = useChatActions();
   const core = useCore();
+  const configSchema = getConfigSchema();
+
   // According to the design of the feedback, only markdown type output is supported.
   const showFeedback =
+    configSchema.chat.feedback &&
     'message' in props &&
     props.message.type === 'output' &&
     props.message.contentType === 'markdown';
@@ -159,7 +163,8 @@ export const MessageBubble: React.FC<MessageBubbleProps> = React.memo((props) =>
                   interaction={props.interaction}
                   message={props.message as IOutput}
                   showFeedback={showFeedback}
-                  showTraceIcon={!!props.message.interactionId}
+                  showTraceIcon={configSchema.chat.trace && !!props.message.interactionId}
+                  traceTip="How was this generated?"
                   traceInteractionId={props.message.interactionId || ''}
                   onViewTrace={() => {
                     const message = props.message as IOutput;