@coveo/quantic 3.40.0 → 3.41.0

package/force-app/main/default/lwc/quanticGeneratedAnswerThread/__tests__/quanticGeneratedAnswerThread.test.js

@@ -0,0 +1,285 @@
+// @ts-ignore
+import QuanticGeneratedAnswerThread from '../quanticGeneratedAnswerThread';
+import {buildCreateTestComponent, cleanup, flushPromises} from 'c/testUtils';
+
+jest.mock('c/quanticUtils', () => ({
+  I18nUtils: {
+    format: jest.fn((label, count) => `Show ${count} previous questions`),
+  },
+}));
+jest.mock('c/quanticHeadlessLoader');
+
+jest.mock(
+  '@salesforce/label/c.quantic_ShowPreviousQuestions_plural',
+  () => ({default: 'Show {{0}} previous questions'}),
+  {virtual: true}
+);
+
+const selectors = {
+  generatedAnswerBody: 'c-quantic-generated-answer-body',
+  threadItem: 'c-quantic-thread-item',
+  showPreviousButton: '[data-testid="show-previous-button"]',
+  showPreviousDot: '[data-testid="show-previous-dot"]',
+};
+
+function buildGeneratedAnswer(overrides = {}) {
+  return {
+    answerId: `answer-${Math.random()}`,
+    question: 'What is Coveo?',
+    answer: 'Coveo is a search platform.',
+    citations: [],
+    isStreaming: false,
+    liked: false,
+    disliked: false,
+    ...overrides,
+  };
+}
+
+const createTestComponent = buildCreateTestComponent(
+  QuanticGeneratedAnswerThread,
+  'c-quantic-generated-answer-thread',
+  {
+    engineId: 'test-engine',
+    generatedAnswers: [],
+  }
+);
+
+describe('c-quantic-generated-answer-thread', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  describe('with a single answer', () => {
+    it('renders a single generated answer body without thread items', async () => {
+      const answers = [buildGeneratedAnswer()];
+      const element = createTestComponent({generatedAnswers: answers});
+      await flushPromises();
+
+      const body = element.shadowRoot.querySelectorAll(
+        selectors.generatedAnswerBody
+      );
+      expect(body).toHaveLength(1);
+
+      const threadItems = element.shadowRoot.querySelectorAll(
+        selectors.threadItem
+      );
+      expect(threadItems).toHaveLength(0);
+    });
+
+    it('does not render the show previous button', async () => {
+      const answers = [buildGeneratedAnswer()];
+      const element = createTestComponent({generatedAnswers: answers});
+      await flushPromises();
+
+      const button = element.shadowRoot.querySelector(
+        selectors.showPreviousButton
+      );
+      expect(button).toBeNull();
+    });
+  });
+
+  describe('with two answers', () => {
+    it('renders both answers in thread items', async () => {
+      const answers = [
+        buildGeneratedAnswer({answerId: 'a1', question: 'Q1'}),
+        buildGeneratedAnswer({answerId: 'a2', question: 'Q2'}),
+      ];
+      const element = createTestComponent({generatedAnswers: answers});
+      await flushPromises();
+
+      const threadItems = element.shadowRoot.querySelectorAll(
+        selectors.threadItem
+      );
+      expect(threadItems).toHaveLength(2);
+    });
+
+    it('does not render the show previous button', async () => {
+      const answers = [
+        buildGeneratedAnswer({answerId: 'a1'}),
+        buildGeneratedAnswer({answerId: 'a2'}),
+      ];
+      const element = createTestComponent({generatedAnswers: answers});
+      await flushPromises();
+
+      const button = element.shadowRoot.querySelector(
+        selectors.showPreviousButton
+      );
+      expect(button).toBeNull();
+    });
+
+    it('sets the last thread item as non-collapsible', async () => {
+      const answers = [
+        buildGeneratedAnswer({answerId: 'a1'}),
+        buildGeneratedAnswer({answerId: 'a2'}),
+      ];
+      const element = createTestComponent({generatedAnswers: answers});
+      await flushPromises();
+
+      const threadItems = element.shadowRoot.querySelectorAll(
+        selectors.threadItem
+      );
+      const lastItem = threadItems[threadItems.length - 1];
+      expect(lastItem.disableCollapse).toBe(true);
+      expect(lastItem.hideLine).toBe(true);
+    });
+
+    it('sets the first thread item as collapsible and collapsed', async () => {
+      const answers = [
+        buildGeneratedAnswer({answerId: 'a1'}),
+        buildGeneratedAnswer({answerId: 'a2'}),
+      ];
+      const element = createTestComponent({generatedAnswers: answers});
+      await flushPromises();
+
+      const threadItems = element.shadowRoot.querySelectorAll(
+        selectors.threadItem
+      );
+      const firstItem = threadItems[0];
+      expect(firstItem.disableCollapse).toBe(false);
+      expect(firstItem.isExpanded).toBe(false);
+      expect(firstItem.hideLine).toBe(false);
+    });
+  });
+
+  describe('with three or more answers', () => {
+    it('initially shows only the show previous button and the last answer', async () => {
+      const answers = [
+        buildGeneratedAnswer({answerId: 'a1', question: 'Q1'}),
+        buildGeneratedAnswer({answerId: 'a2', question: 'Q2'}),
+        buildGeneratedAnswer({answerId: 'a3', question: 'Q3'}),
+      ];
+      const element = createTestComponent({generatedAnswers: answers});
+      await flushPromises();
+
+      const button = element.shadowRoot.querySelector(
+        selectors.showPreviousButton
+      );
+      const dot = element.shadowRoot.querySelector(selectors.showPreviousDot);
+      expect(button).not.toBeNull();
+      expect(dot).not.toBeNull();
+
+      const threadItems = element.shadowRoot.querySelectorAll(
+        selectors.threadItem
+      );
+      expect(threadItems).toHaveLength(1);
+    });
+
+    it('reveals all previous answers when the show previous button is clicked', async () => {
+      const answers = [
+        buildGeneratedAnswer({answerId: 'a1', question: 'Q1'}),
+        buildGeneratedAnswer({answerId: 'a2', question: 'Q2'}),
+        buildGeneratedAnswer({answerId: 'a3', question: 'Q3'}),
+      ];
+      const element = createTestComponent({generatedAnswers: answers});
+      await flushPromises();
+
+      const button = element.shadowRoot.querySelector(
+        selectors.showPreviousButton
+      );
+      button.click();
+      await flushPromises();
+
+      const threadItems = element.shadowRoot.querySelectorAll(
+        selectors.threadItem
+      );
+      expect(threadItems).toHaveLength(3);
+
+      const showButton = element.shadowRoot.querySelector(
+        selectors.showPreviousButton
+      );
+      expect(showButton).toBeNull();
+    });
+
+    it('sets previous answers as collapsible and collapsed after expansion', async () => {
+      const answers = [
+        buildGeneratedAnswer({answerId: 'a1', question: 'Q1'}),
+        buildGeneratedAnswer({answerId: 'a2', question: 'Q2'}),
+        buildGeneratedAnswer({answerId: 'a3', question: 'Q3'}),
+      ];
+      const element = createTestComponent({generatedAnswers: answers});
+      await flushPromises();
+
+      element.shadowRoot.querySelector(selectors.showPreviousButton).click();
+      await flushPromises();
+
+      const threadItems = element.shadowRoot.querySelectorAll(
+        selectors.threadItem
+      );
+      const firstItem = threadItems[0];
+      const secondItem = threadItems[1];
+
+      expect(firstItem.disableCollapse).toBe(false);
+      expect(firstItem.isExpanded).toBe(false);
+      expect(secondItem.disableCollapse).toBe(false);
+      expect(secondItem.isExpanded).toBe(false);
+    });
+
+    it('keeps the last answer expanded and non-collapsible after expansion', async () => {
+      const answers = [
+        buildGeneratedAnswer({answerId: 'a1', question: 'Q1'}),
+        buildGeneratedAnswer({answerId: 'a2', question: 'Q2'}),
+        buildGeneratedAnswer({answerId: 'a3', question: 'Q3'}),
+      ];
+      const element = createTestComponent({generatedAnswers: answers});
+      await flushPromises();
+
+      element.shadowRoot.querySelector(selectors.showPreviousButton).click();
+      await flushPromises();
+
+      const threadItems = element.shadowRoot.querySelectorAll(
+        selectors.threadItem
+      );
+      const lastItem = threadItems[threadItems.length - 1];
+      expect(lastItem.disableCollapse).toBe(true);
+      expect(lastItem.hideLine).toBe(true);
+    });
+
+    it('re-collapses when a new follow-up answer is added', async () => {
+      const answers = [
+        buildGeneratedAnswer({answerId: 'a1', question: 'Q1'}),
+        buildGeneratedAnswer({answerId: 'a2', question: 'Q2'}),
+        buildGeneratedAnswer({answerId: 'a3', question: 'Q3'}),
+      ];
+      const element = createTestComponent({generatedAnswers: answers});
+      await flushPromises();
+
+      element.shadowRoot.querySelector(selectors.showPreviousButton).click();
+      await flushPromises();
+
+      expect(
+        element.shadowRoot.querySelector(selectors.showPreviousButton)
+      ).toBeNull();
+
+      element.generatedAnswers = [
+        ...answers,
+        buildGeneratedAnswer({answerId: 'a4', question: 'Q4'}),
+      ];
+      await flushPromises();
+
+      expect(
+        element.shadowRoot.querySelector(selectors.showPreviousButton)
+      ).not.toBeNull();
+      expect(
+        element.shadowRoot.querySelectorAll(selectors.threadItem)
+      ).toHaveLength(1);
+    });
+  });
+
+  describe('engine-id and citation anchoring passthrough', () => {
+    it('passes engineId and disableCitationAnchoring to generated answer body', async () => {
+      const answers = [buildGeneratedAnswer()];
+      const element = createTestComponent({
+        generatedAnswers: answers,
+        engineId: 'custom-engine',
+        disableCitationAnchoring: true,
+      });
+      await flushPromises();
+
+      const body = element.shadowRoot.querySelector(
+        selectors.generatedAnswerBody
+      );
+      expect(body.engineId).toBe('custom-engine');
+      expect(body.disableCitationAnchoring).toBe(true);
+    });
+  });
+});

package/force-app/main/default/lwc/quanticGeneratedAnswerThread/quanticGeneratedAnswerThread.css

@@ -0,0 +1,47 @@
+.generated-answer-thread__dot-column,
+.generated-answer-thread__line-column {
+  width: 10px;
+}
+
+.generated-answer-thread__dot {
+  height: 8px;
+  width: 8px;
+  border-radius: 50%;
+  background-color: var(--lwc-colorBorder, #dddbda);
+}
+
+.generated-answer-thread__connector {
+  position: relative;
+  width: 1px;
+  height: 100%;
+  min-height: 12px;
+  background-color: var(--lwc-colorBorder, #dddbda);
+}
+
+.generated-answer-thread__connector::before,
+.generated-answer-thread__connector::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  width: 1px;
+  height: 8px;
+  background-color: var(--lwc-colorBorder, #dddbda);
+}
+
+.generated-answer-thread__connector::before {
+  top: -8px;
+}
+
+.generated-answer-thread__connector::after {
+  bottom: -8px;
+}
+
+.generated-answer-thread__show-previous-button {
+  width: fit-content;
+  border-radius: var(--slds-g-radius-border-2, 4px);
+  cursor: pointer;
+}
+
+.generated-answer-thread__show-previous-button:hover {
+  background-color: var(--lwc-colorBackgroundRowHover, #f3f2f2);
+}

package/force-app/main/default/lwc/quanticGeneratedAnswerThread/quanticGeneratedAnswerThread.html

@@ -0,0 +1,67 @@
+<template>
+  <template lwc:if={isSingleAnswer}>
+    <c-quantic-generated-answer-body
+      engine-id={engineId}
+      generated-answer={headAnswer}
+      disable-citation-anchoring={disableCitationAnchoring}
+    ></c-quantic-generated-answer-body>
+  </template>
+
+  <template lwc:else>
+    <ul class="generated-answer-thread">
+      <template lwc:if={shouldCollapseOlderAnswers}>
+        <li class="generated-answer-thread__show-previous">
+          <div class="slds-grid slds-grid_vertical-align-center">
+            <div
+              class="slds-grid slds-grid_align-center slds-grid_vertical-align-center slds-shrink-none slds-m-right_x-small generated-answer-thread__dot-column"
+            >
+              <span
+                class="generated-answer-thread__dot"
+                data-testid="show-previous-dot"
+              ></span>
+            </div>
+            <div>
+              <button
+                type="button"
+                class="slds-button_reset slds-p-horizontal_x-small slds-p-vertical_xx-small generated-answer-thread__show-previous-button"
+                data-testid="show-previous-button"
+                onclick={handleShowAllClick}
+              >
+                {showPreviousQuestionsLabel}
+              </button>
+            </div>
+          </div>
+          <div class="slds-grid">
+            <div
+              class="slds-grid slds-grid_align-center slds-shrink-none generated-answer-thread__line-column slds-m-right_x-small"
+            >
+              <span class="generated-answer-thread__connector"></span>
+            </div>
+          </div>
+        </li>
+      </template>
+
+      <template for:each={previousAnswers} for:item="answer">
+        <c-quantic-thread-item key={answer.answerId} title={answer.question}>
+          <c-quantic-generated-answer-body
+            engine-id={engineId}
+            generated-answer={answer}
+            disable-citation-anchoring={disableCitationAnchoring}
+          ></c-quantic-generated-answer-body>
+        </c-quantic-thread-item>
+      </template>
+
+      <c-quantic-thread-item
+        title={lastAnswer.question}
+        hide-line
+        disable-collapse
+      >
+        <c-quantic-generated-answer-body
+          engine-id={engineId}
+          generated-answer={lastAnswer}
+          disable-citation-anchoring={disableCitationAnchoring}
+        ></c-quantic-generated-answer-body>
+      </c-quantic-thread-item>
+    </ul>
+  </template>
+</template>

package/force-app/main/default/lwc/quanticGeneratedAnswerThread/quanticGeneratedAnswerThread.js

@@ -0,0 +1,93 @@
+import {LightningElement, api} from 'lwc';
+import showPreviousQuestions_plural from '@salesforce/label/c.quantic_ShowPreviousQuestions_plural';
+import {I18nUtils} from 'c/quanticUtils';
+
+/** @typedef {import("coveo").GeneratedAnswerBase} GeneratedAnswer */
+
+const MIN_ANSWERS_TO_COLLAPSE = 2;
+
+/**
+ * The `QuanticGeneratedAnswerThread` component renders a thread of generated answers, including the initial answer and follow-up answers.
+ * @category Internal
+ * @example
+ * <c-quantic-generated-answer-thread engine-id={engineId} generated-answers={generatedAnswers}></c-quantic-generated-answer-thread>
+ */
+export default class QuanticGeneratedAnswerThread extends LightningElement {
+  /**
+   * The ID of the engine instance the component registers to.
+   * @api
+   * @type {string}
+   */
+  @api engineId;
+
+  /**
+   * The list of generated answers to render in the thread.
+   * @api
+   * @type {GeneratedAnswer[]}
+   */
+  @api
+  get generatedAnswers() {
+    return this._generatedAnswers;
+  }
+  set generatedAnswers(value) {
+    const previous = this._generatedAnswers;
+    this._generatedAnswers = value ?? [];
+    if (previous?.length !== this._generatedAnswers.length) {
+      this._allAnswersDisplayed = false;
+    }
+  }
+
+  /**
+   * Whether to disable citation anchoring.
+   * @api
+   * @type {boolean}
+   * @defaultValue `false`
+   */
+  @api disableCitationAnchoring = false;
+
+  /** @type {boolean} */
+  _allAnswersDisplayed = false;
+  /** @type {GeneratedAnswer[]} */
+  _generatedAnswers = [];
+
+  labels = {
+    showPreviousQuestions_plural,
+  };
+
+  get isSingleAnswer() {
+    return this.generatedAnswers.length === 1;
+  }
+
+  get shouldCollapseOlderAnswers() {
+    return (
+      this.generatedAnswers.length > MIN_ANSWERS_TO_COLLAPSE &&
+      !this._allAnswersDisplayed
+    );
+  }
+
+  get showPreviousQuestionsLabel() {
+    return I18nUtils.format(
+      this.labels.showPreviousQuestions_plural,
+      this.generatedAnswers.length - 1
+    );
+  }
+
+  get previousAnswers() {
+    if (this.shouldCollapseOlderAnswers) {
+      return [];
+    }
+    return this.generatedAnswers.slice(0, -1);
+  }
+
+  get headAnswer() {
+    return this.generatedAnswers[0];
+  }
+
+  get lastAnswer() {
+    return this.generatedAnswers[this.generatedAnswers.length - 1];
+  }
+
+  handleShowAllClick() {
+    this._allAnswersDisplayed = true;
+  }
+}

package/force-app/main/default/lwc/quanticGeneratedAnswerThread/quanticGeneratedAnswerThread.js-meta.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>66.0</apiVersion>
+    <isExposed>false</isExposed>
+</LightningComponentBundle>

package/force-app/main/default/lwc/quanticThreadItem/quanticThreadItem.css

@@ -7,10 +7,6 @@
   width: 10px;
 }
 
-.thread-item__line-column {
-  align-items: stretch;
-}
-
 .thread-item__dot {
   height: 8px;
   width: 8px;

package/force-app/main/default/lwc/quanticThreadItem/quanticThreadItem.html

@@ -6,7 +6,7 @@
       >
         <span class={dotClass} data-testid="thread-item-dot"></span>
       </div>
-      <div class="slds-col slds-has-flexi-truncate">
+      <div class="slds-has-flexi-truncate">
         <template lwc:if={disableCollapse}>
           <span class={titleClass} data-testid="thread-item-title-static"
             >{title}</span