[AI Assistance] Fix regressed action row

Bug: none
Change-Id: Ic9c95eac041eff1b0aa216241c0e0f3406b0255d
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7573132
Auto-Submit: Alex Rudenko <alexrudenko@chromium.org>
Reviewed-by: Nikolay Vitkov <nvitkov@chromium.org>
Commit-Queue: Nikolay Vitkov <nvitkov@chromium.org>

Author: OrKoN

front_end/panels/ai_assistance/components/ChatMessage.test.ts

@@ -11,17 +11,11 @@ import {createViewFunctionStub, type ViewFunctionStub} from '../../../testing/Vi
 import * as AiAssistance from '../ai_assistance.js';
 
 describeWithEnvironment('ChatMessage', () => {
-  function createComponent(props: AiAssistance.ChatMessage.MessageInput):
+  function createComponent(props: Partial<AiAssistance.ChatMessage.MessageInput> = {}):
       [ViewFunctionStub<typeof AiAssistance.ChatMessage.ChatMessage>, AiAssistance.ChatMessage.ChatMessage] {
     const view = createViewFunctionStub(AiAssistance.ChatMessage.ChatMessage);
     const component = new AiAssistance.ChatMessage.ChatMessage(undefined, view);
-    Object.assign(component, props);
-    component.wasShown();
-    return [view, component];
-  }
-
-  it('should show the feedback form when canShowFeedbackForm is true', async () => {
-    const [view] = createComponent({
+    Object.assign(component, {
       message: {
         entity: AiAssistance.ChatMessage.ChatMessageEntity.MODEL,
         parts: [],
@@ -36,6 +30,15 @@ describeWithEnvironment('ChatMessage', () => {
       onSuggestionClick: sinon.stub(),
       onCopyResponseClick: sinon.stub(),
       onFeedbackSubmit: sinon.stub(),
+      ...props,
+    });
+    component.wasShown();
+    return [view, component];
+  }
+
+  it('should show the feedback form when canShowFeedbackForm is true', async () => {
+    const [view] = createComponent({
+      canShowFeedbackForm: true,
     });
 
     sinon.assert.callCount(view, 1);
@@ -54,20 +57,7 @@ describeWithEnvironment('ChatMessage', () => {
 
   it('should not show the feedback form when canShowFeedbackForm is false', async () => {
     const [view] = createComponent({
-      message: {
-        entity: AiAssistance.ChatMessage.ChatMessageEntity.MODEL,
-        parts: [],
-        rpcId: 99,
-      },
-      isLoading: false,
-      isReadOnly: false,
-      isLastMessage: true,
-      userInfo: {},
-      markdownRenderer: new AiAssistance.MarkdownRendererWithCodeBlock(),
       canShowFeedbackForm: false,
-      onSuggestionClick: sinon.stub(),
-      onCopyResponseClick: sinon.stub(),
-      onFeedbackSubmit: sinon.stub(),
     });
 
     sinon.assert.callCount(view, 1);
@@ -85,20 +75,7 @@ describeWithEnvironment('ChatMessage', () => {
 
   it('should disable the submit button when the input is empty', async () => {
     const [view] = createComponent({
-      message: {
-        entity: AiAssistance.ChatMessage.ChatMessageEntity.MODEL,
-        parts: [],
-        rpcId: 99,
-      },
-      isLoading: false,
-      isReadOnly: false,
       isLastMessage: false,
-      userInfo: {},
-      markdownRenderer: new AiAssistance.MarkdownRendererWithCodeBlock(),
-      canShowFeedbackForm: true,
-      onSuggestionClick: sinon.stub(),
-      onCopyResponseClick: sinon.stub(),
-      onFeedbackSubmit: sinon.stub(),
     });
 
     sinon.assert.callCount(view, 1);
@@ -131,21 +108,72 @@ describeWithEnvironment('ChatMessage', () => {
         entity: AiAssistance.ChatMessage.ChatMessageEntity.MODEL,
         parts: [],
       },
-      isLoading: false,
-      isReadOnly: false,
-      isLastMessage: true,
-      userInfo: {},
-      markdownRenderer: new AiAssistance.MarkdownRendererWithCodeBlock(),
-      canShowFeedbackForm: true,
-      onSuggestionClick: sinon.stub(),
-      onCopyResponseClick: sinon.stub(),
-      onFeedbackSubmit: sinon.stub(),
     });
 
     sinon.assert.callCount(view, 1);
     expect(view.input.showRateButtons).equals(false);
   });
 
+  it('should show actions when it is not the last message and it is loading', async () => {
+    const [view] = createComponent({
+      isLoading: true,
+      isLastMessage: false,
+    });
+
+    sinon.assert.callCount(view, 1);
+    expect(view.input.showActions).equals(true);
+  });
+
+  it('should not show actions when it is the last message and it is loading', async () => {
+    const [view] = createComponent({
+      isLoading: true,
+      isLastMessage: true,
+    });
+
+    sinon.assert.callCount(view, 1);
+    expect(view.input.showActions).equals(false);
+  });
+
+  it('should not show suggestions when it is not the last message', async () => {
+    const [view] = createComponent({
+      message: {
+        entity: AiAssistance.ChatMessage.ChatMessageEntity.MODEL,
+        parts: [
+          {
+            type: 'answer',
+            text: 'test',
+            suggestions: ['suggestion'],
+          },
+        ],
+        rpcId: 99,
+      },
+      isLastMessage: false,
+    });
+
+    sinon.assert.callCount(view, 1);
+    expect(view.input.suggestions).equals(undefined);
+  });
+
+  it('should show suggestions when it is the last message', async () => {
+    const [view] = createComponent({
+      message: {
+        entity: AiAssistance.ChatMessage.ChatMessageEntity.MODEL,
+        parts: [
+          {
+            type: 'answer',
+            text: 'test',
+            suggestions: ['suggestion'],
+          },
+        ],
+        rpcId: 99,
+      },
+      isLastMessage: true,
+    });
+
+    sinon.assert.callCount(view, 1);
+    expect(view.input.suggestions).deep.equals(['suggestion']);
+  });
+
   describe('view', () => {
     it('renders a minimal model message', async () => {
       const target = document.createElement('div');
@@ -166,6 +194,7 @@ describeWithEnvironment('ChatMessage', () => {
             isSubmitButtonDisabled: false,
             isShowingFeedbackForm: true,
             isLastMessage: true,
+            showActions: true,
             message: {
               entity: AiAssistance.ChatMessage.ChatMessageEntity.MODEL,
               parts: [],
@@ -201,6 +230,7 @@ describeWithEnvironment('ChatMessage', () => {
             isSubmitButtonDisabled: false,
             isShowingFeedbackForm: true,
             isLastMessage: true,
+            showActions: true,
             message: {
               entity: AiAssistance.ChatMessage.ChatMessageEntity.MODEL,
               rpcId: 99,
@@ -253,6 +283,7 @@ describeWithEnvironment('ChatMessage', () => {
             isSubmitButtonDisabled: false,
             isShowingFeedbackForm: false,
             isLastMessage: true,
+            showActions: false,
             message: {
               entity: AiAssistance.ChatMessage.ChatMessageEntity.USER,
               text: 'Can you help me fix specific CSS rules?',

front_end/panels/ai_assistance/components/ChatMessage.ts

@@ -221,6 +221,7 @@ export interface RatingViewInput {
 export interface ActionViewInput {
   onReportClick: () => void;
   onCopyResponseClick: () => void;
+  showActions: boolean;
 }
 
 export interface SuggestionViewInput {
@@ -330,7 +331,7 @@ export const DEFAULT_VIEW = (input: ChatMessageViewInput, output: ViewOutput, ta
         },
       )}
       ${renderError(message)}
-      ${input.isLastMessage && !input.isLoading ? renderActions(input, output) : Lit.nothing}
+      ${input.showActions ? renderActions(input, output) : Lit.nothing}
     </section>
   `, target);
   // clang-format on
@@ -812,8 +813,9 @@ export class ChatMessage extends UI.Widget.Widget {
           onInputChange: this.#handleInputChange.bind(this),
           isSubmitButtonDisabled: this.#isSubmitButtonDisabled,
           // Props for actions logic
+          showActions: !(this.isLastMessage && this.isLoading),
           showRateButtons: this.message.entity === ChatMessageEntity.MODEL && !!this.message.rpcId,
-          suggestions: (this.message.entity === ChatMessageEntity.MODEL && !this.isReadOnly &&
+          suggestions: (this.isLastMessage && this.message.entity === ChatMessageEntity.MODEL && !this.isReadOnly &&
                         this.message.parts.at(-1)?.type === 'answer') ?
               (this.message.parts.at(-1) as AnswerPart).suggestions :
               undefined,