feat(atomic) creation of agent generation steps component

packages/atomic/src/components/common/generated-answer/atomic-answer-content/atomic-answer-content.spec.ts

@@ -3,6 +3,7 @@ import {beforeAll, beforeEach, describe, expect, it, vi} from 'vitest';
 import {renderInAtomicSearchInterface} from '@/vitest-utils/testing-helpers/fixtures/atomic/search/atomic-search-interface-fixture';
 import {createTestI18n} from '@/vitest-utils/testing-helpers/i18n-utils';
 import {renderGeneratedContentContainer} from '../generated-content-container';
+import {renderAgentGenerationSteps} from '../render-agent-generation-steps';
 import {renderFeedbackAndCopyButtons} from '../render-feedback-and-copy-buttons';
 import {renderSourceCitations} from '../source-citations';
 import type {
@@ -19,6 +20,9 @@ vi.mock('../generated-content-container', () => ({
     () => (slot?: unknown) => html`${slot ?? ''}`
   ),
 }));
+vi.mock('../render-agent-generation-steps', () => ({
+  renderAgentGenerationSteps: vi.fn(() => html``),
+}));
 vi.mock('../source-citations', () => ({
   renderSourceCitations: vi.fn(() => (slot?: unknown) => html`${slot ?? ''}`),
 }));
@@ -33,6 +37,7 @@ describe('atomic-answer-content', () => {
     answerId: 'answer-id',
     answerContentFormat: 'text/markdown',
     citations: [],
+    generationSteps: [],
     isStreaming: false,
     liked: false,
     disliked: false,
@@ -98,17 +103,99 @@ describe('atomic-answer-content', () => {
     });
   });
 
-  it('should render nothing when the answer is missing', async () => {
+  it('should render nothing when the answer id is missing', async () => {
     await renderComponent({
       generatedAnswer: {
         answer: undefined,
+        answerId: undefined,
       },
     });
 
+    expect(renderAgentGenerationSteps).not.toHaveBeenCalled();
     expect(renderGeneratedContentContainer).not.toHaveBeenCalled();
     expect(renderFeedbackAndCopyButtons).not.toHaveBeenCalled();
   });
 
+  it('should call renderAgentGenerationSteps with an empty list when generation steps are missing', async () => {
+    await renderComponent({
+      generatedAnswer: {
+        generationSteps: undefined,
+      },
+    });
+
+    expect(renderAgentGenerationSteps).toHaveBeenCalledWith({
+      props: expect.objectContaining({
+        i18n,
+        agentSteps: [],
+        isStreaming: false,
+      }),
+    });
+  });
+
+  it('should call renderAgentGenerationSteps with isStreaming false when not streaming', async () => {
+    const generationSteps = [
+      {
+        name: 'searching' as const,
+        status: 'active' as const,
+        startedAt: 1,
+      },
+    ];
+
+    await renderComponent({
+      generatedAnswer: {
+        isStreaming: false,
+        generationSteps,
+      },
+    });
+
+    expect(renderAgentGenerationSteps).toHaveBeenCalledWith({
+      props: expect.objectContaining({
+        i18n,
+        agentSteps: generationSteps,
+        isStreaming: false,
+      }),
+    });
+  });
+
+  it('should render generation-step state when streaming without answer content', async () => {
+    await renderComponent({
+      generatedAnswer: {
+        answer: undefined,
+        answerId: 'answer-id',
+        isStreaming: true,
+        generationSteps: [
+          {
+            name: 'thinking',
+            status: 'active',
+            startedAt: 1,
+          },
+        ],
+      },
+    });
+
+    expect(renderAgentGenerationSteps).toHaveBeenCalledWith({
+      props: expect.objectContaining({
+        i18n,
+        isStreaming: true,
+        agentSteps: [
+          {
+            name: 'thinking',
+            status: 'active',
+            startedAt: 1,
+          },
+        ],
+      }),
+    });
+    expect(renderGeneratedContentContainer).toHaveBeenCalledWith({
+      props: expect.objectContaining({
+        answer: undefined,
+        answerContentFormat: 'text/markdown',
+        isStreaming: true,
+      }),
+    });
+    expect(renderFeedbackAndCopyButtons).not.toHaveBeenCalled();
+  });
+
   it('should render the error template when the generated answer has an error', async () => {
     const {element} = await renderComponent({
       generatedAnswer: {

packages/atomic/src/components/common/generated-answer/atomic-answer-content/atomic-answer-content.ts

@@ -5,9 +5,11 @@ import type {
 import type {i18n} from 'i18next';
 import {html, LitElement, type TemplateResult} from 'lit';
 import {customElement, property, state} from 'lit/decorators.js';
+import {when} from 'lit/directives/when.js';
 import atomicGeneratedAnswerStyles from '@/src/components/search/atomic-generated-answer/atomic-generated-answer.tw.css.js';
 import {withTailwindStyles} from '@/src/decorators/with-tailwind-styles';
 import {renderGeneratedContentContainer} from '../generated-content-container';
+import {renderAgentGenerationSteps} from '../render-agent-generation-steps';
 import {renderFeedbackAndCopyButtons} from '../render-feedback-and-copy-buttons';
 import {renderSourceCitations} from '../source-citations';
 
@@ -86,6 +88,7 @@ export class AtomicAnswerContent extends LitElement {
       answer,
       answerContentFormat,
       isStreaming,
+      generationSteps,
       citations = [],
       answerId,
       error,
@@ -95,51 +98,65 @@ export class AtomicAnswerContent extends LitElement {
       return this.renderError();
     }
 
-    if (!answer || !answerId) {
+    if (!answerId) {
       return html``;
     }
 
+    const shouldRenderFeedbackAndCopyButtons = Boolean(answer) && !isStreaming;
+
     return html`
       <div>
+        ${renderAgentGenerationSteps({
+          props: {
+            i18n: this.i18n,
+            agentSteps: generationSteps ?? [],
+            isStreaming: Boolean(isStreaming),
+          },
+        })}
         <div>
           ${renderGeneratedContentContainer({
             props: {
               answer,
               answerContentFormat,
               isStreaming: Boolean(isStreaming),
             },
-          })(
-            html`
-              ${renderSourceCitations({
-                props: {
-                  label: this.i18n.t('citations'),
-                  isVisible: citations.length > 0,
-                },
-              })(html`${this.renderCitations(citations)}`)}
-            `
-          )}
+          })(html`
+            ${renderSourceCitations({
+              props: {
+                label: this.i18n.t('citations'),
+                isVisible: citations.length > 0,
+              },
+            })(html`${this.renderCitations(citations)}`)}
+          `)}
         </div>
+        ${when(shouldRenderFeedbackAndCopyButtons, () =>
+          this.renderFeedbackAndCopyButtons(answerId)
+        )}
+      </div>
+    `;
+  }
 
-        <div class="mt-4" part="feedback-and-copy-buttons">
-          ${renderFeedbackAndCopyButtons({
-            props: {
-              i18n: this.i18n,
-              generatedAnswerActionsState: {
-                liked: this.generatedAnswer.liked,
-                disliked: this.generatedAnswer.disliked,
-                isStreaming: this.generatedAnswer.isStreaming,
-                isLoading: this.generatedAnswer.isLoading,
-                answer: this.generatedAnswer.answer,
-              },
-              copied: this.copyState === 'success',
-              copyError: this.copyState === 'error',
-              getCopyToClipboardTooltip: () => this.getCopyToClipboardTooltip(),
-              onClickLike: () => this.onClickLike(answerId),
-              onClickDislike: () => this.onClickDislike(answerId),
-              onCopyToClipboard: () => this.copyToClipboard(),
+  private renderFeedbackAndCopyButtons(answerId: string) {
+    return html`
+      <div class="mt-4" part="feedback-and-copy-buttons">
+        ${renderFeedbackAndCopyButtons({
+          props: {
+            i18n: this.i18n,
+            generatedAnswerActionsState: {
+              liked: this.generatedAnswer.liked,
+              disliked: this.generatedAnswer.disliked,
+              isStreaming: this.generatedAnswer.isStreaming,
+              isLoading: this.generatedAnswer.isLoading,
+              answer: this.generatedAnswer.answer,
             },
-          })}
-        </div>
+            copied: this.copyState === 'success',
+            copyError: this.copyState === 'error',
+            getCopyToClipboardTooltip: () => this.getCopyToClipboardTooltip(),
+            onClickLike: () => this.onClickLike(answerId),
+            onClickDislike: () => this.onClickDislike(answerId),
+            onCopyToClipboard: () => this.copyToClipboard(),
+          },
+        })}
       </div>
     `;
   }