chore(atomic): migrate atomic-insight-generated-answer to Lit

packages/atomic/src/components.d.ts

@@ -53,32 +53,6 @@ export namespace Components {
          */
         "setRenderFunction": (resultRenderingFunction: ItemRenderingFunction) => Promise<void>;
     }
-    interface AtomicInsightGeneratedAnswer {
-        "answerConfigurationId"?: string;
-        /**
-          * Whether to allow the answer to be collapsed when the text is taller than 250px.
-          * @default false
-         */
-        "collapsible"?: boolean;
-        /**
-          * Option to disable citation anchoring.
-          * @default false
-         */
-        "disableCitationAnchoring"?: boolean;
-        /**
-          * A list of fields to include with the citations used to generate the answer.
-         */
-        "fieldsToIncludeInCitations"?: string;
-        /**
-          * The maximum height (in rem units) of the answer when collapsed.
-         */
-        "maxCollapsedHeight": number;
-        /**
-          * Whether to render a toggle button that lets the user hide or show the answer.
-          * @default false
-         */
-        "withToggle"?: boolean;
-    }
     interface AtomicInsightResultAction {
         /**
           * The type of action to perform when the result action is clicked. This will be sent along the event fired when the button is clicked.
@@ -460,12 +434,6 @@ declare global {
         prototype: HTMLAtomicInsightFoldedResultListElement;
         new (): HTMLAtomicInsightFoldedResultListElement;
     };
-    interface HTMLAtomicInsightGeneratedAnswerElement extends Components.AtomicInsightGeneratedAnswer, HTMLStencilElement {
-    }
-    var HTMLAtomicInsightGeneratedAnswerElement: {
-        prototype: HTMLAtomicInsightGeneratedAnswerElement;
-        new (): HTMLAtomicInsightGeneratedAnswerElement;
-    };
     interface HTMLAtomicInsightResultActionElementEventMap {
         "atomicInsightResultActionClicked": InsightResultActionClickedEvent;
     }
@@ -670,7 +638,6 @@ declare global {
     };
     interface HTMLElementTagNameMap {
         "atomic-insight-folded-result-list": HTMLAtomicInsightFoldedResultListElement;
-        "atomic-insight-generated-answer": HTMLAtomicInsightGeneratedAnswerElement;
         "atomic-insight-result-action": HTMLAtomicInsightResultActionElement;
         "atomic-insight-result-action-bar": HTMLAtomicInsightResultActionBarElement;
         "atomic-insight-result-attach-to-case-action": HTMLAtomicInsightResultAttachToCaseActionElement;
@@ -720,32 +687,6 @@ declare namespace LocalJSX {
          */
         "parentField"?: string;
     }
-    interface AtomicInsightGeneratedAnswer {
-        "answerConfigurationId"?: string;
-        /**
-          * Whether to allow the answer to be collapsed when the text is taller than 250px.
-          * @default false
-         */
-        "collapsible"?: boolean;
-        /**
-          * Option to disable citation anchoring.
-          * @default false
-         */
-        "disableCitationAnchoring"?: boolean;
-        /**
-          * A list of fields to include with the citations used to generate the answer.
-         */
-        "fieldsToIncludeInCitations"?: string;
-        /**
-          * The maximum height (in rem units) of the answer when collapsed.
-         */
-        "maxCollapsedHeight"?: number;
-        /**
-          * Whether to render a toggle button that lets the user hide or show the answer.
-          * @default false
-         */
-        "withToggle"?: boolean;
-    }
     interface AtomicInsightResultAction {
         /**
           * The type of action to perform when the result action is clicked. This will be sent along the event fired when the button is clicked.
@@ -1091,7 +1032,6 @@ declare namespace LocalJSX {
     }
     interface IntrinsicElements {
         "atomic-insight-folded-result-list": AtomicInsightFoldedResultList;
-        "atomic-insight-generated-answer": AtomicInsightGeneratedAnswer;
         "atomic-insight-result-action": AtomicInsightResultAction;
         "atomic-insight-result-action-bar": AtomicInsightResultActionBar;
         "atomic-insight-result-attach-to-case-action": AtomicInsightResultAttachToCaseAction;
@@ -1120,7 +1060,6 @@ declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
             "atomic-insight-folded-result-list": LocalJSX.AtomicInsightFoldedResultList & JSXBase.HTMLAttributes<HTMLAtomicInsightFoldedResultListElement>;
-            "atomic-insight-generated-answer": LocalJSX.AtomicInsightGeneratedAnswer & JSXBase.HTMLAttributes<HTMLAtomicInsightGeneratedAnswerElement>;
             "atomic-insight-result-action": LocalJSX.AtomicInsightResultAction & JSXBase.HTMLAttributes<HTMLAtomicInsightResultActionElement>;
             "atomic-insight-result-action-bar": LocalJSX.AtomicInsightResultActionBar & JSXBase.HTMLAttributes<HTMLAtomicInsightResultActionBarElement>;
             "atomic-insight-result-attach-to-case-action": LocalJSX.AtomicInsightResultAttachToCaseAction & JSXBase.HTMLAttributes<HTMLAtomicInsightResultAttachToCaseActionElement>;

packages/atomic/src/components/insight/atomic-insight-generated-answer/atomic-insight-generated-answer.mdx

@@ -0,0 +1,123 @@
+import {Meta} from '@storybook/addon-docs/blocks';
+import * as AtomicInsightGeneratedAnswerStories from './atomic-insight-generated-answer.new.stories';
+import {AtomicDocTemplate} from '../../../../storybook-utils/documentation/atomic-doc-template';
+
+<Meta of={AtomicInsightGeneratedAnswerStories} />
+
+<AtomicDocTemplate
+  stories={AtomicInsightGeneratedAnswerStories}
+  githubPath="insight/atomic-insight-generated-answer/atomic-insight-generated-answer.ts"
+  tagName="atomic-insight-generated-answer"
+  className="AtomicInsightGeneratedAnswer"
+>
+
+The `atomic-insight-generated-answer` component uses Coveo Machine Learning (Coveo ML) models to automatically generate an answer to a query executed by the user within an Insight Panel context. For more information, see [About Relevance Generative Answering (RGA)](https://docs.coveo.com/en/n9de0370/).
+
+```html
+<atomic-insight-interface>
+  ...
+  <atomic-insight-layout>
+
+    <atomic-insight-generated-answer></atomic-insight-generated-answer>
+
+  </atomic-insight-layout>
+</atomic-insight-interface>
+```
+
+## Key Features
+
+- **AI-Generated Answers**: Automatically generates answers to user queries using Coveo ML
+- **Source Citations**: Displays citations to the sources used to generate the answer
+- **Feedback Collection**: Built-in like/dislike buttons to collect user feedback
+- **Copy to Clipboard**: Users can easily copy the generated answer
+- **Collapsible Mode**: Allows long answers to be collapsed for better UI management
+
+## Configuration
+
+### Basic Configuration
+
+```html
+<atomic-insight-generated-answer></atomic-insight-generated-answer>
+```
+
+### With Toggle Button
+
+Display a toggle button that lets users hide or show the answer:
+
+```html
+<atomic-insight-generated-answer with-toggle></atomic-insight-generated-answer>
+```
+
+### Collapsible Mode
+
+Allow the answer to be collapsed when it's taller than a specified height:
+
+```html
+<atomic-insight-generated-answer
+  collapsible
+  max-collapsed-height="20">
+</atomic-insight-generated-answer>
+```
+
+- **`collapsible`**: Enables collapsible mode
+- **`max-collapsed-height`**: Maximum height in rem units when collapsed (default: 16, range: 9-32)
+
+### Answer Configuration
+
+Specify a particular answer configuration to use:
+
+```html
+<atomic-insight-generated-answer
+  answer-configuration-id="my-config-id">
+</atomic-insight-generated-answer>
+```
+
+### Citation Configuration
+
+Include additional fields with citations and control citation anchoring:
+
+```html
+<atomic-insight-generated-answer
+  fields-to-include-in-citations="author,date,category"
+  disable-citation-anchoring>
+</atomic-insight-generated-answer>
+```
+
+### Custom No-Answer Message
+
+Provide a custom message when no answer can be generated:
+
+```html
+<atomic-insight-generated-answer>
+  <div slot="no-answer-message">
+    Sorry, we couldn't generate an answer for your query.
+    Please try rephrasing your question.
+  </div>
+</atomic-insight-generated-answer>
+```
+
+## Accessibility
+
+The component is built with accessibility in mind:
+- ARIA live regions announce answer generation status
+- Keyboard-accessible feedback buttons and toggle
+- Proper focus management
+- Screen reader support for all interactive elements
+
+## Styling
+
+The component supports various CSS parts for customization:
+- `container` - Main container
+- `header-label` - Answer header
+- `toggle` - Visibility toggle switch
+- `feedback-button` - Like/dislike buttons
+- `copy-button` - Copy answer button
+- `generated-text` - Answer text content
+- `citations-label` - Citations section header
+- `citation` - Individual citation links
+- `citation-popover` - Citation preview popups
+
+Custom CSS properties:
+- `--atomic-crga-collapsed-height` - Height of collapsed answer container
+
+</AtomicDocTemplate>

packages/atomic/src/components/insight/atomic-insight-generated-answer/atomic-insight-generated-answer.new.stories.tsx

@@ -0,0 +1,94 @@
+import type {
+  Decorator,
+  Meta,
+  StoryObj as Story,
+} from '@storybook/web-components-vite';
+import {getStorybookHelpers} from '@wc-toolkit/storybook-helpers';
+import {html} from 'lit/static-html.js';
+import {MockAnswerApi} from '@/storybook-utils/api/answer/mock';
+import {MockInsightApi} from '@/storybook-utils/api/insight/mock';
+import {parameters} from '@/storybook-utils/common/common-meta-parameters';
+import {wrapInInsightInterface} from '@/storybook-utils/insight/insight-interface-wrapper';
+
+const mockedAnswerApi = new MockAnswerApi();
+const mockedInsightApi = new MockInsightApi();
+mockedInsightApi.searchEndpoint.mock((response) => ({
+  ...response,
+  extendedResults: {
+    generativeQuestionAnsweringId: 'fbc64016-5f04-4a47-aad1-0bccaa2c0616',
+  },
+}));
+
+const {args, argTypes, template} = getStorybookHelpers(
+  'atomic-insight-generated-answer',
+  {excludeCategories: ['methods']}
+);
+
+const layoutDecorator: Decorator = (story) => html`
+  <atomic-insight-layout>
+    <atomic-layout-section section="search">
+      <atomic-insight-search-box></atomic-insight-search-box>
+    </atomic-layout-section>
+    <atomic-layout-section section="results">
+      ${story()}
+    </atomic-layout-section>
+  </atomic-insight-layout>
+`;
+
+const {decorator, play} = wrapInInsightInterface();
+
+const meta: Meta = {
+  component: 'atomic-insight-generated-answer',
+  title: 'Insight/Generated Answer',
+  id: 'atomic-insight-generated-answer',
+  render: (args) => template(args),
+  decorators: [layoutDecorator, decorator],
+  parameters: {
+    ...parameters,
+    msw: {
+      handlers: [...mockedInsightApi.handlers, ...mockedAnswerApi.handlers],
+    },
+  },
+  args: {
+    ...args,
+    'answer-configuration-id': 'fc581be0-6e61-4039-ab26-a3f2f52f308f',
+  },
+  argTypes,
+  play: async (storyContext) => {
+    await play(storyContext);
+    const searchBox =
+      await storyContext.canvas.findAllByShadowPlaceholderText('Search');
+    const query = 'how to resolve netflix connection with tivo';
+    const input = searchBox[0] as HTMLTextAreaElement;
+    input.scrollIntoView({block: 'center'});
+    input.focus();
+    input.value = query;
+    input.dispatchEvent(
+      new InputEvent('input', {
+        bubbles: true,
+        composed: true,
+        data: query,
+        inputType: 'insertText',
+      })
+    );
+    input.dispatchEvent(
+      new KeyboardEvent('keydown', {
+        bubbles: true,
+        composed: true,
+        key: 'Enter',
+        code: 'Enter',
+      })
+    );
+  },
+};
+
+export default meta;
+
+export const Default: Story = {};
+
+export const DisableCitationAnchoring: Story = {
+  name: 'Citation anchoring disabled',
+  args: {
+    'disable-citation-anchoring': true,
+  },
+};