Hide "stop generation" and regenerate button based on feature flag (#394

) (#414) * Add feature hide stop generation and regenerate button based on feature flag fixing issues Signed-off-by: hutiechuan <[email protected]> Signed-off-by: hutiechuan <[email protected]> fixing issues# Signed-off-by: hutiechuan <[email protected]> Add feature to hide "stop generation" and regenerate button based on feature flag * Signed-off-by: hutiechuan <[email protected]> fixing issues# * Signed-off-by: hutiechuan <[email protected]> fixing issues, getting rid of redundancy of props passings fixing lint-staged# * Signed-off-by: hutiechuan <[email protected]> add record in changelog to pass the changelog's CI# * feat: restore yarn.lock Signed-off-by: SuZhou-Joe <[email protected]> * feat: restore Signed-off-by: SuZhou-Joe <[email protected]> * feat: add unit test Signed-off-by: SuZhou-Joe <[email protected]> --------- Signed-off-by: SuZhou-Joe <[email protected]> Co-authored-by: hutiechuan <[email protected]> Co-authored-by: SuZhou-Joe <[email protected]> (cherry picked from commit f1e3de3) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> # Conflicts: # CHANGELOG.md Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
opensearch-project · Jan 24, 2025 · cf622b0 · cf622b0
1 parent 2a7d46e
commit cf622b0
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 17 deletions.
diff --git a/common/types/config.ts b/common/types/config.ts
@@ -13,6 +13,7 @@ export const configSchema = schema.object({
     feedback: schema.boolean({ defaultValue: true }),
     allowRenameConversation: schema.boolean({ defaultValue: true }),
     deleteConversation: schema.boolean({ defaultValue: true }),
+    regenerateMessage: schema.boolean({ defaultValue: true }),
   }),
   incontextInsight: schema.object({
     enabled: schema.boolean({ defaultValue: true }),

diff --git a/public/tabs/chat/chat_page_content.test.tsx b/public/tabs/chat/chat_page_content.test.tsx
@@ -11,13 +11,22 @@ import * as chatStateHookExports from '../../hooks/use_chat_state';
 import * as chatActionHookExports from '../../hooks/use_chat_actions';
 import { IMessage } from '../../../common/types/chat_saved_object_attributes';
 import { getIncontextInsightRegistry } from '../../services';
+import { setupConfigSchemaMock } from '../../../test/config_schema_mock';
 
 jest.mock('../../services');
 
 jest.mock('./messages/message_bubble', () => {
   return {
-    MessageBubble: ({ children }: { children?: React.ReactNode }) => (
-      <div aria-label="chat message bubble">{children}</div>
+    MessageBubble: ({
+      children,
+      showRegenerate,
+    }: {
+      children?: React.ReactNode;
+      showRegenerate?: boolean;
+    }) => (
+      <div aria-label="chat message bubble" data-test-subj={`showRegenerate-${showRegenerate}`}>
+        {children}
+      </div>
     ),
   };
 });
@@ -37,6 +46,10 @@ describe('<ChatPageContent />', () => {
   const abortActionMock = jest.fn();
   const executeActionMock = jest.fn();
 
+  beforeAll(() => {
+    setupConfigSchemaMock();
+  });
+
   beforeEach(() => {
     jest.spyOn(chatContextExports, 'useChatContext').mockReturnValue({
       conversationId: 'test_conversation_id',
@@ -226,4 +239,38 @@ describe('<ChatPageContent />', () => {
     fireEvent.click(screen.getByText('What are the indices in my cluster?'));
     expect(executeActionMock).toHaveBeenCalled();
   });
+
+  it('should not show regenerate button when feature flag is false', () => {
+    setupConfigSchemaMock({
+      chat: {
+        regenerateMessage: false,
+      },
+    });
+
+    jest.spyOn(chatStateHookExports, 'useChatState').mockReturnValue({
+      chatState: {
+        messages: [
+          {
+            type: 'input',
+            content: 'what indices are in my cluster?',
+            contentType: 'text',
+          },
+          {
+            type: 'output',
+            content: 'here are the indices in your cluster: .kibana',
+            contentType: 'markdown',
+            suggestedActions: [{ actionType: 'send_as_input', message: 'suggested action mock' }],
+          },
+        ],
+        llmResponding: true,
+        interactions: [],
+      },
+      chatStateDispatch: jest.fn(),
+    });
+
+    const { queryAllByTestId } = render(
+      <ChatPageContent messagesLoading={false} onRefresh={jest.fn()} />
+    );
+    expect(queryAllByTestId(`showRegenerate-false`).length).toEqual(2);
+  });
 });
diff --git a/public/tabs/chat/chat_page_content.tsx b/public/tabs/chat/chat_page_content.tsx
@@ -24,6 +24,8 @@ import { MessageContent } from './messages/message_content';
 import { SuggestionBubble } from './suggestions/suggestion_bubble';
 import { getIncontextInsightRegistry } from '../../services';
 
+import { getConfigSchema } from '../../services';
+
 interface ChatPageContentProps {
   messagesLoading: boolean;
   messagesLoadingError?: Error;
@@ -37,6 +39,7 @@ export const ChatPageContent: React.FC<ChatPageContentProps> = React.memo((props
   const loading = props.messagesLoading || chatState.llmResponding;
   const chatActions = useChatActions();
   const registry = getIncontextInsightRegistry();
+  const configSchema = getConfigSchema();
 
   useLayoutEffect(() => {
     pageEndRef.current?.scrollIntoView();
@@ -126,7 +129,7 @@ export const ChatPageContent: React.FC<ChatPageContentProps> = React.memo((props
             <MessageBubble
               message={message}
               showActionBar={isChatOutput}
-              showRegenerate={isLatestOutput}
+              showRegenerate={isLatestOutput && configSchema.chat.regenerateMessage}
               shouldActionBarVisibleOnHover={!isLatestOutput}
               onRegenerate={chatActions.regenerate}
               interaction={interaction}
@@ -144,20 +147,23 @@ export const ChatPageContent: React.FC<ChatPageContentProps> = React.memo((props
           <MessageBubble loading showActionBar={false} />
         </>
       )}
-      {chatState.llmResponding && chatContext.conversationId && (
-        <div style={{ marginLeft: '55px', marginTop: 10 }}>
-          <EuiFlexGroup alignItems="flexStart" direction="column" gutterSize="s">
-            <EuiFlexItem>
-              <SuggestionBubble
-                content="Stop generating response"
-                color="default"
-                iconType="crossInACircleFilled"
-                onClick={() => chatActions.abortAction(chatContext.conversationId)}
-              />
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </div>
-      )}
+
+      {configSchema.chat.regenerateMessage &&
+        chatState.llmResponding &&
+        chatContext.conversationId && (
+          <div style={{ marginLeft: '55px', marginTop: 10 }}>
+            <EuiFlexGroup alignItems="flexStart" direction="column" gutterSize="s">
+              <EuiFlexItem>
+                <SuggestionBubble
+                  content="Stop generating response"
+                  color="default"
+                  iconType="crossInACircleFilled"
+                  onClick={() => chatActions.abortAction(chatContext.conversationId)}
+                />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </div>
+        )}
       {chatState.llmError && (
         <EuiEmptyPrompt
           iconType="alert"

diff --git a/test/config_schema_mock.ts b/test/config_schema_mock.ts
@@ -16,6 +16,7 @@ export const getMockConfigSchema = (
     feedback: true,
     allowRenameConversation: true,
     deleteConversation: true,
+    regenerateMessage: true,
     ...(overrides.chat || {}),
   },
   incontextInsight: { enabled: true },