@coveo/quantic 3.43.0 → 3.43.2

package/force-app/main/default/lwc/quanticGeneratedAnswer/templates/generatedAnswer.html

@@ -33,63 +33,24 @@
             data-testid="generated-answer__answer"
             class={generatedAnswerClass}
           >
-            <c-quantic-generated-answer-content
+            <c-quantic-generated-answer-body
               engine-id={engineId}
-              answer-id={answerId}
-              answer-content-format={answerContentFormat}
-              answer={answer}
-              is-streaming={isStreaming}
+              generated-answer={initialAnswer}
+              disable-citation-anchoring={disableCitationAnchoring}
+              onquantic__generatedanswerlike={handleLike}
+              onquantic__generatedanswerdislike={handleDislike}
+              onquantic__citationhover={handleCitationHover}
               onquantic__answercontentupdated={handleAnswerContentUpdated}
-            >
-            </c-quantic-generated-answer-content>
+            ></c-quantic-generated-answer-body>
           </div>
           <div class="slds-grid slds-grid_vertical">
-            <template lwc:if={shouldDisplayCitations}>
-              <div class="slds-size_1-of-1 slds-var-m-top_x-small">
-                <c-quantic-source-citations
-                  engine-id={engineId}
-                  data-testid="generated-answer__citations"
-                  citations={citations}
-                  citation-hover-handler={logCitationHover}
-                  disable-citation-anchoring={disableCitationAnchoring}
-                ></c-quantic-source-citations>
-              </div>
-            </template>
-            <template lwc:if={shouldDisplayActions}>
-              <div class="slds-size_1-of-1 slds-grid slds-grid_vertical-align-center slds-var-m-top_x-small slds-grid_align-start">
-                <div
-                  data-testid="generated-answer__actions"
-                  class="slds-grid slds-grid_vertical-align-center"
-                >
-                  <c-quantic-feedback
-                    state={feedbackState}
-                    onquantic__like={handleLike}
-                    onquantic__dislike={handleDislike}
-                    like-icon-name="utility:like"
-                    like-label={labels.thisAnswerWasHelpful}
-                    dislike-icon-name="utility:dislike"
-                    dislike-label={labels.thisAnswerWasNotHelpful}
-                    size="x-small"
-                    question=""
-                    hide-explain-why-button
-                    hide-labels
-                  ></c-quantic-feedback>
-                  <c-quantic-generated-answer-copy-to-clipboard
-                    data-testid="generated-answer__copy-to-clipboard"
-                    answer={answer}
-                    size="x-small"
-                    class="slds-var-m-horizontal_xx-small"
-                  ></c-quantic-generated-answer-copy-to-clipboard>
-                </div>
-              </div>
-            </template>
             <template lwc:if={isAnswerCollapsed}>
               <div class="slds-grid slds-size_1-of-1 slds-wrap slds-grid_vertical-align-center slds-var-m-top_x-small">
                 <div class="slds-grid slds-wrap slds-grid_vertical-align-center">
                   <template lwc:if={isStreaming}>
                     <div
                       data-testid="generated-answer__collapse-generating-message"
-                      class="generated-answer__collapse-generating-message slds-var-m-right_small"
+                      class="generated-answer__collapse-generating-message slds-var-m-right_small slds-var-m-bottom_medium"
                     >
                       {labels.generatingAnswer}...
                     </div>

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

@@ -5,6 +5,8 @@ import {createElement} from 'lwc';
 import {loadMarkdownDependencies} from 'c/quanticUtils';
 import * as mockHeadlessLoader from 'c/quanticHeadlessLoader';
 
+const mockAnswerHeight = 250;
+
 jest.mock('c/quanticHeadlessLoader');
 jest.mock('c/quanticUtils', () => ({
   loadMarkdownDependencies: jest.fn(
@@ -17,6 +19,7 @@ jest.mock('c/quanticUtils', () => ({
   LinkUtils: {
     bindAnalyticsToLink: jest.fn(() => jest.fn()),
   },
+  getAbsoluteHeight: jest.fn(() => mockAnswerHeight),
 }));
 
 const mockMarkedUse = jest.fn();
@@ -417,4 +420,28 @@ describe('c-quantic-generated-answer-content', () => {
       });
     });
   });
+
+  describe('the quantic__answercontentupdated event', () => {
+    beforeEach(() => {
+      mockSuccessfulHeadlessInitialization();
+      prepareHeadlessState();
+    });
+
+    it('should dispatch the event with the measured height when the markdown content is updated', async () => {
+      const element = createTestComponent({
+        ...defaultOptions,
+        answerContentFormat: 'text/markdown',
+        answer: 'Hello, world!',
+      });
+      const handler = jest.fn();
+      element.addEventListener('quantic__answercontentupdated', handler);
+      await flushPromises();
+
+      expect(handler).toHaveBeenCalledTimes(1);
+      const event = handler.mock.calls[0][0];
+      expect(event.detail).toEqual({height: mockAnswerHeight});
+      expect(event.bubbles).toBe(true);
+      expect(event.composed).toBe(true);
+    });
+  });
 });

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

@@ -7,6 +7,7 @@ import {
   transformMarkdownToHtml,
   loadMarkdownDependencies,
   LinkUtils,
+  getAbsoluteHeight,
 } from 'c/quanticUtils';
 import {LightningElement, api} from 'lwc';
 // @ts-ignore
@@ -171,7 +172,13 @@ export default class QuanticGeneratedAnswerContent extends LightningElement {
     else {
       answerContainer.textContent = this.answer;
     }
-    this.dispatchEvent(new CustomEvent('quantic__answercontentupdated'));
+    this.dispatchEvent(
+      new CustomEvent('quantic__answercontentupdated', {
+        bubbles: true,
+        composed: true,
+        detail: {height: getAbsoluteHeight(answerContainer)},
+      })
+    );
   }
 
   /**

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

@@ -1,6 +1,19 @@
-.generated-answer-thread__dot-column,
-.generated-answer-thread__line-column {
+.generated-answer-thread__grid {
+  display: grid;
+  grid-template-columns: 10px 1fr;
+  grid-template-rows: auto 1fr;
+  column-gap: var(--lwc-spacingXSmall, 8px);
+}
+
+.generated-answer-thread__timeline {
+  grid-row: 1 / -1;
+  align-self: stretch;
+}
+
+.generated-answer-thread__dot-column {
   width: 10px;
+  height: 1lh;
+  margin-block: var(--lwc-spacingXxSmall, 4px);
 }
 
 .generated-answer-thread__dot {
@@ -12,9 +25,8 @@
 
 .generated-answer-thread__connector {
   position: relative;
+  flex: 1;
   width: 1px;
-  height: 100%;
-  min-height: 12px;
   background-color: var(--lwc-colorBorder, #dddbda);
 }
 

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

@@ -11,16 +11,19 @@
     <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 class="generated-answer-thread__grid">
+            <div class="slds-grid slds-grid_vertical slds-grid_vertical-align-center generated-answer-thread__timeline">
+              <div
+                class="slds-grid slds-grid_align-center slds-grid_vertical-align-center generated-answer-thread__dot-column"
+              >
+                <span
+                  class="generated-answer-thread__dot"
+                  data-testid="show-previous-dot"
+                ></span>
+              </div>
+              <span class="generated-answer-thread__connector"></span>
             </div>
-            <div>
+            <div class="slds-has-flexi-truncate">
               <button
                 type="button"
                 class="slds-button_reset slds-p-horizontal_x-small slds-p-vertical_xx-small generated-answer-thread__show-previous-button"
@@ -31,13 +34,6 @@
               </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>
 

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

@@ -2,26 +2,28 @@
   list-style: none;
 }
 
-.thread-item__dot-column,
-.thread-item__line-column {
-  width: 10px;
+.thread-item__grid {
+  display: grid;
+  grid-template-columns: 10px 1fr;
+  grid-template-rows: auto 1fr;
+  column-gap: var(--lwc-spacingXSmall, 8px);
 }
 
-.thread-item__dot {
-  height: 8px;
-  width: 8px;
-  border-radius: 50%;
-  background-color: var(--lwc-colorBorder, #dddbda);
+.thread-item__timeline {
+  grid-row: 1 / -1;
+  align-self: stretch;
 }
 
-.thread-item__dot--expanded {
-  background-color: var(--lwc-colorTextDefault, #080707);
+.thread-item__dot-column {
+  width: 10px;
+  height: 1lh;
+  margin-block: var(--lwc-spacingXxSmall, 4px);
 }
 
 .thread-item__line {
   position: relative;
+  flex: 1;
   width: 1px;
-  height: 100%;
   background-color: var(--lwc-colorBorder, #dddbda);
 }
 
@@ -43,6 +45,22 @@
   bottom: -8px;
 }
 
+.thread-item__content {
+  grid-column: 2;
+  grid-row: 2;
+}
+
+.thread-item__dot {
+  height: 8px;
+  width: 8px;
+  border-radius: 50%;
+  background-color: var(--lwc-colorBorder, #dddbda);
+}
+
+.thread-item__dot--expanded {
+  background-color: var(--lwc-colorTextDefault, #080707);
+}
+
 .thread-item__clamped-text {
   display: -webkit-box;
   -webkit-line-clamp: 3;

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

@@ -1,10 +1,15 @@
 <template>
   <li class="thread-item">
-    <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 thread-item__dot-column"
-      >
-        <span class={dotClass} data-testid="thread-item-dot"></span>
+    <div class="thread-item__grid">
+      <div class="slds-grid slds-grid_vertical slds-grid_vertical-align-center thread-item__timeline">
+        <div
+          class="slds-grid slds-grid_align-center slds-grid_vertical-align-center thread-item__dot-column"
+        >
+          <span class={dotClass} data-testid="thread-item-dot"></span>
+        </div>
+        <template lwc:if={shouldDisplayLine}>
+          <span class="thread-item__line" data-testid="thread-item-line"></span>
+        </template>
       </div>
       <div class="slds-has-flexi-truncate">
         <template lwc:if={disableCollapse}>
@@ -25,18 +30,9 @@
           </button>
         </template>
       </div>
-    </div>
-    <div class="slds-grid">
-      <div
-        class="slds-grid slds-grid_align-center slds-shrink-none thread-item__line-column slds-m-right_x-small"
-      >
-        <template lwc:if={shouldDisplayLine}>
-          <span class="thread-item__line" data-testid="thread-item-line"></span>
-        </template>
-      </div>
       <div
         id="thread-item-content"
-        class="slds-col slds-p-left_x-small slds-p-vertical_xx-small"
+        class="slds-p-left_x-small slds-p-vertical_xx-small thread-item__content"
         data-testid="thread-item-content"
       >
         <div hidden={contentHidden}>