@coveo/quantic 3.43.3 → 3.43.4

package/force-app/main/default/lwc/quanticFacetManager/e2e/fixture.ts

@@ -1,12 +1,13 @@
 import {FacetManagerObject} from './pageObject';
-import {quanticBase} from '../../../../../../playwright/fixtures/baseFixture';
+import {facetBase} from '../../../../../../playwright/fixtures/baseFacetFixture';
 import {
   searchRequestRegex,
   insightSearchRequestRegex,
 } from '../../../../../../playwright/utils/requests';
 import {InsightSetupObject} from '../../../../../../playwright/page-object/insightSetupObject';
 import {useCaseEnum} from '../../../../../../playwright/utils/useCase';
-import {SearchObject} from '../../../../../../playwright/page-object/searchObject';
+import {BaseFacetObject} from '../../../../../../playwright/page-object/baseFacetObject';
+import facetManagerData from './data';
 
 const pageUrl = 's/quantic-facet-manager';
 
@@ -14,7 +15,6 @@ interface FacetManagerOptions {}
 
 type QuanticFacetManagerE2ESearchFixtures = {
   facetManager: FacetManagerObject;
-  search: SearchObject;
   options: Partial<FacetManagerOptions>;
 };
 
@@ -24,41 +24,52 @@ type QuanticFacetManagerE2EInsightFixtures =
   };
 
 export const testSearch =
-  quanticBase.extend<QuanticFacetManagerE2ESearchFixtures>({
+  facetBase.extend<QuanticFacetManagerE2ESearchFixtures>({
     options: {},
-    search: async ({page}, use) => {
-      await use(new SearchObject(page, searchRequestRegex));
+    facetResponses: {responses: [facetManagerData]},
+    baseFacet: async ({page}, use) => {
+      await use(new BaseFacetObject(page, searchRequestRegex));
     },
-    facetManager: async ({page, options, configuration, search}, use) => {
+    facetManager: async (
+      {page, options, configuration, baseFacet, facetResponses},
+      use
+    ) => {
+      await baseFacet.mockSearchWithFacetResponseSequence(
+        facetResponses?.responses
+      );
       await page.goto(pageUrl);
       configuration.configure(options);
-      await search.waitForSearchResponse();
+      await baseFacet.waitForSearchResponse();
 
       await use(new FacetManagerObject(page));
     },
   });
 
 export const testInsight =
-  quanticBase.extend<QuanticFacetManagerE2EInsightFixtures>({
+  facetBase.extend<QuanticFacetManagerE2EInsightFixtures>({
     options: {},
-    search: async ({page}, use) => {
-      await use(new SearchObject(page, insightSearchRequestRegex));
+    facetResponses: {responses: [facetManagerData]},
+    baseFacet: async ({page}, use) => {
+      await use(new BaseFacetObject(page, insightSearchRequestRegex));
     },
     insightSetup: async ({page}, use) => {
       await use(new InsightSetupObject(page));
     },
     facetManager: async (
-      {page, options, search, configuration, insightSetup},
+      {page, options, baseFacet, configuration, insightSetup, facetResponses},
       use
     ) => {
+      await baseFacet.mockSearchWithFacetResponseSequence(
+        facetResponses?.responses
+      );
       await page.goto(pageUrl);
       configuration.configure({...options, useCase: useCaseEnum.insight});
       await insightSetup.waitForInsightInterfaceInitialization();
-      const searchResponsePromise = search.waitForSearchResponse();
-      await search.performSearch();
+      const searchResponsePromise = baseFacet.waitForSearchResponse();
+      await baseFacet.performSearch();
       await searchResponsePromise;
       await use(new FacetManagerObject(page));
     },
   });
 
-export {expect} from '@playwright/test';
+export {expect} from '@playwright/test';

package/force-app/main/default/lwc/quanticFacetManager/e2e/quanticFacetManager.e2e.ts

@@ -23,10 +23,10 @@ useCaseTestCases.forEach((useCase) => {
   test.describe(`quantic facet manager ${useCase.label}`, () => {
     test('should load facets in the same order as in the initial search response', async ({
       facetManager,
-      search,
+      baseFacet,
     }) => {
-      const searchResponsePromise = search.waitForSearchResponse();
-      await search.performSearch();
+      const searchResponsePromise = baseFacet.waitForSearchResponse();
+      await baseFacet.performSearch();
 
       const searchResponse = await searchResponsePromise;
       const {facets} = await searchResponse.json();
@@ -45,11 +45,11 @@ useCaseTestCases.forEach((useCase) => {
     test.describe('when the facets are reordered', () => {
       test('should load facets in the reordered order', async ({
         facetManager,
-        search,
+        baseFacet,
       }) => {
-        await search.mockSearchFacetOrder(exampleFacetsOrder);
-        const searchResponsePromise = search.waitForSearchResponse();
-        await search.performSearch();
+        await baseFacet.mockSearchFacetOrder(exampleFacetsOrder);
+        const searchResponsePromise = baseFacet.waitForSearchResponse();
+        await baseFacet.performSearch();
 
         const searchResponse = await searchResponsePromise;
         const {facets} = await searchResponse.json();

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

@@ -1,8 +1,8 @@
 .facet__search-results_no-match {
-  color: var(--lwc-colorTextLabel, #696969);
+  color: var(--slds-g-color-on-surface-1, var(--lwc-colorTextLabel, #696969));
   background-color: var(--slds-g-color-surface-2, #F6F7F9);
   font-size: var(--slds-g-font-scale-neg-1, 12px);
-  border-radius: 4px;
+  border-radius: var(--slds-g-radius-border-2, 4px);
 }
 
 fieldset {
@@ -11,16 +11,16 @@ fieldset {
 
 .facet__show-less {
   font-size: var(--slds-g-font-scale-neg-1, 12px);
-  background-color: white;
-  color: var(--lwc-colorTextPlaceholder, var(--lwc-colorTextIconDefault, #747474));
+  background-color: var(--slds-g-color-surface-1, white);
+  color: var(--slds-g-color-on-surface-1, var(--lwc-colorTextPlaceholder, var(--lwc-colorTextIconDefault, #747474)));
   border: none;
   margin-bottom: 5px;
 }
 
 .facet__show-more {
   font-size: var(--slds-g-font-scale-neg-1, 12px);
-  background-color: white;
-  color: var(--lwc-brandTextLink, dodgerblue);
+  background-color: var(--slds-g-color-surface-1, white);
+  color: var(--slds-s-link-color, var(--lwc-brandTextLink, dodgerblue));
   border: none;
 }
 
@@ -39,12 +39,12 @@ fieldset {
   display: flex;
   flex-direction: row;
   cursor: pointer;
-  border-radius: .25rem;
+  border-radius: var(--slds-g-radius-border-2, .25rem);
 }
 
 .facet__value-option:hover {
-  color: var(--lwc-brandTextLink, dodgerblue);
-  background-color: #f6f7f9;
+  color: var(--slds-s-link-color, var(--lwc-brandTextLink, dodgerblue));
+  background-color: var(--slds-g-color-surface-2, #f6f7f9);
 }
 
 .facet__clear-filter {
@@ -52,5 +52,5 @@ fieldset {
 }
 
 .facet__number-of-results {
-  color: var(--lwc-colorTextPlaceholder, var(--lwc-colorTextIconDefault, #747474));
+  color: var(--slds-g-color-on-surface-1, var(--lwc-colorTextPlaceholder, var(--lwc-colorTextIconDefault, #747474)));
 }

package/force-app/main/default/lwc/quanticFeedbackModalQna/templates/quanticFeedbackModalQna.css

@@ -15,6 +15,6 @@
         flex-direction: column;
     }
     .feedback-modal-qna__radio-group {
-        margin-top: 0.5rem;
+        margin-top: var(--slds-g-spacing-2, 0.5rem);
     }
 }

package/force-app/main/default/lwc/quanticFoldedResultList/e2e/fixture.ts

@@ -36,6 +36,7 @@ export const testSearch =
       await use(new SearchObject(page, searchRequestRegex));
     },
     resultList: async ({page, options, configuration, search}, use) => {
+      await search.mockSearchWithBaseResponse();
       await page.goto(pageUrl);
       configuration.configure(options);
       await search.waitForSearchResponse();
@@ -57,11 +58,14 @@ export const testInsight =
       {page, options, search, configuration, insightSetup},
       use
     ) => {
+      await search.mockSearchWithBaseResponse();
       await page.goto(pageUrl);
       configuration.configure({...options, useCase: useCaseEnum.insight});
       await insightSetup.waitForInsightInterfaceInitialization();
-      await search.performSearch();
-      await search.waitForSearchResponse();
+      await Promise.all([
+        search.waitForSearchResponse(),
+        search.performSearch(),
+      ]);
       await search.waitForSearchResultsVisible();
       await use(new FoldedResultListObject(page));
     },

package/force-app/main/default/lwc/quanticGeneratedAnswer/e2e/agentData.ts

@@ -66,6 +66,13 @@ type AgentCitationType = {
   };
 };
 
+type AgentRunErrorType = {
+  type: 'RUN_ERROR';
+  timestamp: number;
+  message: string;
+  code: string;
+};
+
 const STREAM_ID = 'conv_1';
 const ANSWER_ID_1 = 'conv_1_0001';
 const ANSWER_ID_2 = 'conv_1_0002';
@@ -168,6 +175,16 @@ const runFinishedStream = (answerId: string): AgentRunType => ({
   },
 });
 
+const runErrorStream = (
+  message: string,
+  code: string
+): AgentRunErrorType => ({
+  type: 'RUN_ERROR',
+  timestamp: new Date().valueOf(),
+  message,
+  code,
+});
+
 export type AgentMessage =
   | AgentRunType
   | AgentCustomType
@@ -175,7 +192,21 @@ export type AgentMessage =
   | AgentToolCallType
   | AgentToolCallArgsType
   | AgentTextMessageType
-  | AgentCitationType;
+  | AgentCitationType
+  | AgentRunErrorType;
+
+export const turnLimitErrorStream: Array<AgentMessage> = [
+  runStartStream(ANSWER_ID_2),
+  runErrorStream(
+    'The conversation turn limit has been reached.',
+    'KNOWLEDGE:SSE_TURN_LIMIT_REACHED'
+  ),
+];
+
+export const genericErrorStream: Array<AgentMessage> = [
+  runStartStream(ANSWER_ID_2),
+  runErrorStream('An unexpected error occurred.', 'KNOWLEDGE:SSE_INTERNAL_ERROR'),
+];
 
 export type AgentData = {
   answerStreams: Array<AgentMessage>;

package/force-app/main/default/lwc/quanticGeneratedAnswer/e2e/pageObject.ts

@@ -549,6 +549,12 @@ export class GeneratedAnswerObject {
     });
   }
 
+  async mockAgentFollowUpNetworkError() {
+    await this.page.route('**/agents/*/follow-up', (route) => {
+      route.abort('connectionrefused');
+    });
+  }
+
   get followUpInput(): Locator {
     return this.page.locator(
       'c-quantic-generated-answer-follow-up-input textarea'

package/force-app/main/default/lwc/quanticGeneratedAnswer/e2e/quanticGeneratedAnswerAgent.e2e.ts

@@ -1,5 +1,5 @@
 import {testAgent, expect} from './fixture-agent';
-import agentData from './agentData';
+import agentData, {turnLimitErrorStream, genericErrorStream} from './agentData';
 import {
   analyticsModeTest,
   AnalyticsModeEnum,
@@ -231,3 +231,68 @@ analyticsModeTest.forEach((analytics) => {
     );
   });
 });
+
+testAgent.describe('quantic generated answer - agent follow-up error handling', () => {
+  testAgent.use({
+    options: {agentId: exampleAgentId},
+  });
+
+  testAgent(
+    'should display a generic error message when the follow-up request fails due to a network error',
+    async ({generatedAnswer}) => {
+      await generatedAnswer.streamEndAnalyticRequestPromise;
+      await generatedAnswer.mockAgentFollowUpNetworkError();
+
+      await generatedAnswer.typeFollowUpQuestion('follow-up question');
+      await generatedAnswer.submitFollowUp();
+
+      await expect(generatedAnswer.threadItems).toHaveCount(2);
+
+      const errorMessage = generatedAnswer.threadItems
+        .last()
+        .getByTestId('generated-answer-body__error');
+      await expect(errorMessage).toBeVisible();
+      await expect(errorMessage).toContainText('Something went wrong.');
+    }
+  );
+
+  testAgent(
+    'should display a distinct turn-limit message when the follow-up SSE stream reports a turn-limit error',
+    async ({generatedAnswer}) => {
+      await generatedAnswer.streamEndAnalyticRequestPromise;
+      await generatedAnswer.mockAgentFollowUpResponse([turnLimitErrorStream]);
+
+      await generatedAnswer.typeFollowUpQuestion('follow-up question');
+      await generatedAnswer.submitFollowUp();
+
+      await expect(generatedAnswer.threadItems).toHaveCount(2);
+
+      const errorMessage = generatedAnswer.threadItems
+        .last()
+        .getByTestId('generated-answer-body__error');
+      await expect(errorMessage).toBeVisible();
+      await expect(errorMessage).toContainText(
+        'Conversation turn limit reached. Please start a new conversation.'
+      );
+    }
+  );
+
+  testAgent(
+    'should display a generic error message when the follow-up SSE stream reports a generic error',
+    async ({generatedAnswer}) => {
+      await generatedAnswer.streamEndAnalyticRequestPromise;
+      await generatedAnswer.mockAgentFollowUpResponse([genericErrorStream]);
+
+      await generatedAnswer.typeFollowUpQuestion('follow-up question');
+      await generatedAnswer.submitFollowUp();
+
+      await expect(generatedAnswer.threadItems).toHaveCount(2);
+
+      const errorMessage = generatedAnswer.threadItems
+        .last()
+        .getByTestId('generated-answer-body__error');
+      await expect(errorMessage).toBeVisible();
+      await expect(errorMessage).toContainText('Something went wrong.');
+    }
+  );
+});

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

@@ -1,3 +1,3 @@
 .generated-answer__header-title {
-  color: var(--lwc-brandPrimary, #1b96ff);
+  color: var(--slds-g-color-accent-1, var(--lwc-brandPrimary, #1b96ff));
 }

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

@@ -10,7 +10,7 @@
 }
 
 .generated-answer__footer {
-  gap: 1rem;
+  gap: var(--slds-g-spacing-4, 1rem);
 }
 
 .generated-answer__answer--collapsed {
@@ -19,12 +19,12 @@
 
 .generated-answer__answer--expanded {
   max-height: 100%;
-  margin-bottom: 1rem;
+  margin-bottom: var(--slds-g-spacing-4, 1rem);
   overflow: visible;
 }
 
 .generated-answer__collapse-generating-message {
-  color: var(--lwc-brandPrimary, #1b96ff);
+  color: var(--slds-g-color-accent-1, var(--lwc-brandPrimary, #1b96ff));
 }
 
 .generated-answer__answer::after {

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

@@ -269,6 +269,45 @@ describe('c-quantic-generated-answer-body', () => {
       expect(error).not.toBeNull();
       expect(content).toBeNull();
     });
+
+    it('should render the generic error message when the error has no code (e.g., a network/transport failure)', async () => {
+      const element = createTestComponent({
+        ...defaultOptions,
+        generatedAnswer: {
+          ...defaultOptions.generatedAnswer,
+          answer: '',
+          // @ts-ignore
+          error: {
+            message:
+              'An error occurred while starting the follow-up answer generation.',
+          },
+        },
+      });
+      await flushPromises();
+
+      const error = element.shadowRoot.querySelector(selectors.error);
+
+      expect(error).not.toBeNull();
+      expect(error.textContent).toContain(
+        'Something went wrong while generating the answer. Please try again later.'
+      );
+    });
+
+    it('should not render the error message when the error object is present but empty', async () => {
+      const element = createTestComponent({
+        ...defaultOptions,
+        generatedAnswer: {
+          ...defaultOptions.generatedAnswer,
+          // @ts-ignore
+          error: {},
+        },
+      });
+      await flushPromises();
+
+      const error = element.shadowRoot.querySelector(selectors.error);
+
+      expect(error).toBeNull();
+    });
   });
 
   describe('rendering of actions', () => {

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

@@ -78,7 +78,10 @@ export default class QuanticGeneratedAnswerBody extends LightningElement {
   }
 
   get hasError() {
-    return !!this.generatedAnswer?.error?.code;
+    return (
+      !!this.generatedAnswer?.error?.code ||
+      !!this.generatedAnswer?.error?.message
+    );
   }
 
   get cannotAnswer() {

package/force-app/main/default/lwc/quanticGeneratedAnswerContent/templates/generatedMarkdownContent.css

@@ -13,10 +13,10 @@
 
 .generated-answer-content__answer--streaming::after {
   content: '';
-  width: 0.5rem;
+  width: var(--slds-g-sizing-3, 0.5rem);
   height: 0.9rem;
   margin-left: 0.1rem;
-  background: var(--lwc-brandAccessible, #0176d3);
+  background: var(--slds-g-color-accent-container-1, var(--lwc-brandAccessible, #0176d3));
   display: inline-block;
   animation: cursor-blink 1.5s steps(2, start) infinite;
   vertical-align: baseline;
@@ -42,8 +42,8 @@ div[data-level='answer-heading-3'] {
 }
 
 div[data-level] {
-  margin-top: var(--lwc-spacingMedium, 1rem);
-  margin-bottom: var(--lwc-spacingXSmall, 0.5rem);
+  margin-top: var(--slds-g-spacing-4, var(--lwc-spacingMedium, 1rem));
+  margin-bottom: var(--slds-g-spacing-2, var(--lwc-spacingXSmall, 0.5rem));
   font-weight: var(--slds-g-font-weight-7, bold);
 }
 
@@ -57,19 +57,19 @@ td {
 
 ol {
   list-style-type: decimal;
-  padding-inline-start: var(--lwc-spacingXLarge, 2rem);
-  margin-bottom: var(--lwc-spacingXSmall, 0.5rem);
+  padding-inline-start: var(--slds-g-spacing-6, var(--lwc-spacingXLarge, 2rem));
+  margin-bottom: var(--slds-g-spacing-2, var(--lwc-spacingXSmall, 0.5rem));
 }
 
 ul {
   list-style-type: disc;
-  padding-inline-start: var(--lwc-spacingXLarge, 2rem);
-  margin-bottom: var(--lwc-spacingXSmall, 0.5rem);
+  padding-inline-start: var(--slds-g-spacing-6, var(--lwc-spacingXLarge, 2rem));
+  margin-bottom: var(--slds-g-spacing-2, var(--lwc-spacingXSmall, 0.5rem));
 }
 
 code {
   padding: var(--lwc-spacingXxxSmall, 0.125rem) var(--lwc-spacingXxSmall, 0.25rem);
-  border: 1px solid;
+  border: var(--slds-g-sizing-border-1, 1px) solid;
   color: var(--quantic-genqa-inline-code);
   font-size: var(--quantic-genqa-text-small);
   background-color: var(--quantic-genqa-bg-neutral-light);
@@ -79,10 +79,10 @@ code {
 }
 
 pre {
-  padding: var(--lwc-spacingXSmall, 0.5rem);
+  padding: var(--slds-g-spacing-2, var(--lwc-spacingXSmall, 0.5rem));
   overflow: auto;
   max-height: 24rem;
-  border: 1px solid;
+  border: var(--slds-g-sizing-border-1, 1px) solid;
   background-color: var(--quantic-genqa-bg-neutral-light);
   border-color: var(--quantic-genqa-border-neutral);
   border-radius: var(--quantic-genqa-border-radius);
@@ -97,16 +97,16 @@ pre > code {
 }
 
 blockquote {
-  margin-left: var(--lwc-spacingXxLarge, 4rem);
-  margin-right: var(--lwc-spacingXxLarge, 4rem);;
+  margin-left: var(--slds-g-spacing-8, var(--lwc-spacingXxLarge, 4rem));
+  margin-right: var(--slds-g-spacing-8, var(--lwc-spacingXxLarge, 4rem));;
   font-size: italic;
 }
 
 .scrollable-table {
-  margin-top: var(--lwc-spacingLarge, 1.5rem);
-  margin-bottom: var(--lwc-spacingLarge, 1.5rem);
+  margin-top: var(--slds-g-spacing-5, var(--lwc-spacingLarge, 1.5rem));
+  margin-bottom: var(--slds-g-spacing-5, var(--lwc-spacingLarge, 1.5rem));
   display: inline-block;
-  border: 1px solid;
+  border: var(--slds-g-sizing-border-1, 1px) solid;
   overflow: auto;
   max-height: 24rem;
   border-color: var(--quantic-genqa-border-neutral-dim);
@@ -124,11 +124,11 @@ table {
 }
 
 table thead th {
-  padding: var(--lwc-spacingMedium, 1rem);
+  padding: var(--slds-g-spacing-4, var(--lwc-spacingMedium, 1rem));
   text-align: left;
   background-color: var(--quantic-genqa-bg-table-header);
-  border-bottom: solid 2px var(--quantic-genqa-border-neutral-dim);
-  border-left: solid 1px var(--quantic-genqa-border-neutral-dim);
+  border-bottom: solid var(--slds-g-sizing-border-2, 2px) var(--quantic-genqa-border-neutral-dim);
+  border-left: solid var(--slds-g-sizing-border-1, 1px) var(--quantic-genqa-border-neutral-dim);
 }
 
 table thead th:first-of-type {
@@ -141,8 +141,8 @@ tbody tr:nth-child(even) {
 
 tbody tr td {
   padding: var(--lwc-spacingMedium, 1rem);
-  border-left: solid 1px var(--quantic-genqa-border-neutral-dim);
-  border-bottom: solid 1px var(--quantic-genqa-border-neutral-dim);
+  border-left: solid var(--slds-g-sizing-border-1, 1px) var(--quantic-genqa-border-neutral-dim);
+  border-bottom: solid var(--slds-g-sizing-border-1, 1px) var(--quantic-genqa-border-neutral-dim);
 }
 
 tbody tr td:first-of-type {

package/force-app/main/default/lwc/quanticGeneratedAnswerContent/templates/generatedTextContent.css

@@ -4,10 +4,10 @@
 
 .generated-answer-content__answer--streaming::after {
   content: '';
-  width: 0.5rem;
+  width: var(--slds-g-sizing-3, 0.5rem);
   height: 0.9rem;
   margin-left: 0.1rem;
-  background: var(--lwc-brandAccessible, #0176d3);
+  background: var(--slds-g-color-accent-container-1, var(--lwc-brandAccessible, #0176d3));
   display: inline-block;
   animation: cursor-blink 1.5s steps(2, start) infinite;
   vertical-align: baseline;

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

@@ -3,13 +3,13 @@
 }
 
 .follow-up-input__container--error {
-  border-color: var(--lwc-colorBorderError, #ea001e);
+  border-color: var(--slds-g-color-error-base-50, var(--lwc-colorBorderError, #ea001e));
 }
 
 .follow-up-input__expander {
   display: grid;
   overflow: hidden;
-  margin-right: 2.5rem;
+  margin-right: var(--slds-g-spacing-7, 2.5rem);
 }
 
 .follow-up-input__expander::after {
@@ -26,7 +26,7 @@
   border: none;
   outline: none;
   background: transparent;
-  padding: 0.5rem 0.75rem;
+  padding: var(--slds-g-spacing-2, 0.5rem) var(--slds-g-spacing-3, 0.75rem);
   font: inherit;
   min-height: 2.5rem;
 }
@@ -39,9 +39,9 @@
   z-index: 10;
   overflow: visible;
   margin-right: 0;
-  background-color: var(--lwc-colorBackground, #fff);
-  border: 1px solid var(--lwc-brandAccessible, #0176d3);
-  border-radius: 0.25rem;
+  background-color: var(--slds-g-color-surface-1, var(--lwc-colorBackground, #fff));
+  border: var(--slds-g-sizing-border-1, 1px) solid var(--slds-g-color-accent-container-1, var(--lwc-brandAccessible, #0176d3));
+  border-radius: var(--slds-g-radius-border-2, 0.25rem);
 }
 
 .follow-up-input__expander--expanded::after,
@@ -49,7 +49,7 @@
   white-space: pre-wrap;
   overflow-y: auto;
   max-height: 8rem;
-  padding-right: 2.5rem;
+  padding-right: var(--slds-g-spacing-7, 2.5rem);
   scrollbar-width: none;
 }
 
@@ -59,7 +59,7 @@
 
 .follow-up-input__submit-button {
   position: absolute;
-  right: 0.25rem;
-  bottom: 0.25rem;
+  right: var(--slds-g-spacing-1, 0.25rem);
+  bottom: var(--slds-g-spacing-1, 0.25rem);
   z-index: 15;
 }

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

@@ -6,8 +6,8 @@
 
 .stream-of-thought__collapsed-summary:focus-visible,
 .stream-of-thought__collapse-button:focus-visible {
-  border-radius: var(--slds-g-sizing-border-4, 0.25rem);
-  outline: 2px solid var(--lwc-brandPrimary, #1b96ff);
+  border-radius: var(--slds-g-radius-border-2, 0.25rem);
+  outline: var(--slds-g-sizing-border-2, 2px) solid var(--slds-g-color-accent-1, var(--lwc-brandPrimary, #1b96ff));
   outline-offset: 2px;
 }