feat(chat-messages): add citation summary

api-goldens/element-ng/chat-messages/index.api.md

@@ -12,8 +12,10 @@ import { FileUploadError } from '@siemens/element-ng/file-uploader';
 import * as i1 from '@siemens/element-ng/resize-observer';
 import { MenuItem } from '@siemens/element-ng/menu';
 import { OnDestroy } from '@angular/core';
+import { OnInit } from '@angular/core';
 import * as _siemens_element_translate_ng_translate from '@siemens/element-translate-ng/translate';
 import { SiModalService } from '@siemens/element-ng/modal';
+import { SiPopoverDirective } from '@siemens/element-ng/popover';
 import { TemplateRef } from '@angular/core';
 import { TranslatableString } from '@siemens/element-translate-ng/translate-types';
 import { TranslatableString as TranslatableString_2 } from '@siemens/element-translate-ng/translate';
@@ -57,11 +59,14 @@ export class SiAiMessageComponent {
     constructor();
     readonly actionParam: _angular_core.InputSignal<unknown>;
     readonly actions: _angular_core.InputSignal<MessageAction[]>;
+    readonly annotatedText: _angular_core.InputSignal<SiChatAnnotatedText | undefined>;
+    readonly citationClicked: _angular_core.OutputEmitterRef<SiChatCitation>;
     readonly content: _angular_core.InputSignal<string>;
     readonly contentFormatter: _angular_core.InputSignal<((text: string) => string | Node) | undefined>;
     readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly secondaryActions: _angular_core.InputSignal<MenuItem[]>;
     readonly secondaryActionsLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
+    readonly showSourceCitationButton: _angular_core.InputSignalWithTransform<boolean, unknown>;
 }
 
 // @public
@@ -81,6 +86,28 @@ export class SiAttachmentListComponent {
     readonly removeLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
 }
 
+// @public
+export interface SiChatAnnotatedText {
+    citations: SiChatCitation[];
+    segments: SiChatTextSegment[];
+}
+
+// @public
+export interface SiChatCitation {
+    description?: string;
+    id: string;
+    title: string;
+    url?: string;
+}
+
+// @public
+export interface SiChatCitationRun {
+    // (undocumented)
+    citationId: string;
+    // (undocumented)
+    type: 'citation';
+}
+
 // @public
 export class SiChatContainerComponent implements AfterContentInit, OnDestroy {
     constructor();
@@ -143,6 +170,32 @@ export class SiChatMessageComponent {
     readonly loading: _angular_core.InputSignal<boolean>;
 }
 
+// @public
+export interface SiChatTextRun {
+    // (undocumented)
+    content: string;
+    // (undocumented)
+    type: 'text';
+}
+
+// @public (undocumented)
+export type SiChatTextSegment = SiChatTextRun | SiChatCitationRun;
+
+// @public
+export class SiCitationButtonComponent implements OnInit {
+    readonly citationClicked: _angular_core.OutputEmitterRef<SiChatCitation>;
+    readonly citations: _angular_core.InputSignal<SiChatCitation[]>;
+    readonly label: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
+}
+
+// @public
+export class SiCitationPillComponent implements OnInit {
+    readonly citation: _angular_core.InputSignal<SiChatCitation>;
+    readonly clicked: _angular_core.OutputEmitterRef<SiChatCitation>;
+    readonly icon: _angular_core.InputSignal<string | undefined>;
+    readonly label: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
+}
+
 // @public
 export class SiUserMessageComponent {
     constructor();

playwright/e2e/element-examples/static.spec.ts

@@ -112,13 +112,14 @@ test('typography/display-styles', ({ si }) => si.static());
 test('typography/typography', ({ si }) => si.static());
 test('si-markdown-renderer/si-markdown-renderer', ({ si }) =>
   si.static({ disabledA11yRules: ['link-in-text-block'] }));
-test('si-chat-messages/si-ai-message', ({ si }) => si.static());
+test('si-chat-messages/si-ai-message', ({ si }) =>
+  si.static({ withPopover: 'si-citation-pill', withSourceCitationButton: 'input[type="checkbox"]' }));
 test('si-chat-messages/si-user-message', ({ si }) => si.static());
 test('si-chat-messages/si-chat-message', ({ si }) => si.static());
 test('si-chat-messages/si-attachment-list', ({ si }) => si.static());
 test('si-chat-messages/si-chat-input', ({ si }) => si.static());
-// FIXME: test is unstable
-// test('si-chat-messages/si-chat-container', ({ si }) => si.static());
+test('si-chat-messages/si-chat-container', ({ si }) =>
+  si.static({ withPopover: 'si-citation-pill', withSourceCitationButton: 'button:has-text("Use Summary Citation")' }));
 test('si-chat-messages/si-ai-welcome-screen', ({ si }) => si.static());
 test('ag-grid/ag-grid-empty-state', async ({ si }) => {
   await si.static({ disabledA11yRules: ['aria-required-children'] });

playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-message--popover.yaml

@@ -0,0 +1,36 @@
+- paragraph:
+  - text: Here's a
+  - strong: simple response
+  - text: with basic formatting.
+- paragraph:
+  - text: You can use
+  - code: inline code
+  - text: "and create lists:"
+- list:
+  - listitem: First item
+  - listitem: Second item
+- group:
+  - button "Good response"
+  - button "Bad response"
+  - button "Copy response"
+  - button "More actions"
+- text: Neural networks are composed of layers of interconnected nodes that process information in parallel, enabling the model to learn complex patterns from large datasets.
+- group:
+  - link "Deep Learning – Ian Goodfellow et al.":
+    - /url: https://examples.org/deeplearningbook
+    - text: ""
+- text: The training process adjusts the weights of these connections to minimize prediction error using backpropagation.
+- group:
+  - link "Backpropagation Algorithm – Stanford CS231n":
+    - /url: https://examples.org/cs231n
+    - text: ""
+- group:
+  - button "Good response"
+  - button "Bad response"
+  - button "Copy response"
+  - button "More actions"
+- dialog "Deep Learning – Ian Goodfellow et al.":
+  - text: ""
+  - paragraph: Neural networks are universal function approximators composed of alternating linear transformations and non-linear activations, trained end-to-end via gradient descent.
+  - link "View source":
+    - /url: https://examples.org/deeplearningbook

playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-message--source-citation-button--popover.yaml

@@ -0,0 +1,37 @@
+- checkbox "Toggle source citation." [checked]
+- text: Toggle source citation.
+- paragraph:
+  - text: Here's a
+  - strong: simple response
+  - text: with basic formatting.
+- paragraph:
+  - text: You can use
+  - code: inline code
+  - text: "and create lists:"
+- list:
+  - listitem: First item
+  - listitem: Second item
+- group:
+  - button "Good response"
+  - button "Bad response"
+  - button "Copy response"
+  - button "More actions"
+- text: Neural networks are composed of layers of interconnected nodes that process information in parallel, enabling the model to learn complex patterns from large datasets. The training process adjusts the weights of these connections to minimize prediction error using backpropagation.
+- group:
+  - button "Good response"
+  - button "Bad response"
+  - button "Copy response"
+  - button "More actions"
+  - button "Sources"
+- dialog:
+  - list:
+    - listitem:
+      - paragraph: Deep Learning – Ian Goodfellow et al.
+      - paragraph: Neural networks are universal function approximators composed of alternating linear transformations and non-linear activations, trained end-to-end via gradient descent.
+      - link "View source":
+        - /url: https://examples.org/deeplearningbook
+    - listitem:
+      - paragraph: Backpropagation Algorithm – Stanford CS231n
+      - paragraph: Backpropagation computes the gradient of the loss with respect to each weight by applying the chain rule recursively from the output layer to the input layer.
+      - link "View source":
+        - /url: https://examples.org/cs231n

playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-message--source-citation-button.yaml

@@ -0,0 +1,25 @@
+- checkbox "Toggle source citation." [checked]
+- text: Toggle source citation.
+- paragraph:
+  - text: Here's a
+  - strong: simple response
+  - text: with basic formatting.
+- paragraph:
+  - text: You can use
+  - code: inline code
+  - text: "and create lists:"
+- list:
+  - listitem: First item
+  - listitem: Second item
+- group:
+  - button "Good response"
+  - button "Bad response"
+  - button "Copy response"
+  - button "More actions"
+- text: Neural networks are composed of layers of interconnected nodes that process information in parallel, enabling the model to learn complex patterns from large datasets. The training process adjusts the weights of these connections to minimize prediction error using backpropagation.
+- group:
+  - button "Good response"
+  - button "Bad response"
+  - button "Copy response"
+  - button "More actions"
+  - button "Sources"

playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container--popover.yaml

@@ -0,0 +1,51 @@
+- group:
+  - button "data-analysis.py"
+- group:
+  - button "dataset.csv"
+- paragraph: Can you help me analyze these files?
+- paragraph: I'm having trouble understanding the data structure and need assistance with the implementation.
+- group:
+  - button "Export message"
+- text: I'd be happy to help! Data processing pipelines typically follow a structured approach.
+- group:
+  - link "Data Pipeline Design Patterns":
+    - /url: https://examples.org/articles/data-pipeline.html
+    - text: ""
+- text: Let me examine your files and provide detailed guidance.
+- group:
+  - button "Add to list"
+  - button "Export response"
+  - button "Retry response"
+  - button "More actions"
+- paragraph: Perfect! What should I focus on first
+- paragraph: I also want to make sure the performance is optimized for large datasets since this will be used in production with potentially millions of rows?
+- group:
+  - button "Export message"
+- text: Great question! When analyzing large datasets, it's crucial to focus on vectorized operations and avoid row-by-row iteration.
+- group:
+  - link "Pandas Performance Guide":
+    - /url: https://examples.org/docs/user_guide/enhancingperf.html
+- group:
+  - button "Add to list"
+  - button "Export response"
+  - button "Retry response"
+  - button "More actions"
+- alert: Info AI responses are for demonstration purposes.
+- group:
+  - text: requirements.pdf
+  - button "Remove attachment requirements.pdf"
+- group:
+  - text: mockup.png
+  - button "Remove attachment mockup.png"
+- textbox "Chat message input":
+  - /placeholder: Enter a command, question or topic...
+- group:
+  - button "More actions"
+  - button "Show Welcome Screen"
+- button "Send"
+- text: The content is AI generated. Always verify the information for accuracy.
+- dialog "Data Pipeline Design Patterns":
+  - text: ""
+  - paragraph: Pipelines can be structured as linear chains or branching graphs. Each stage transforms data independently, enabling testability and reuse.
+  - link "View source":
+    - /url: https://examples.org/articles/data-pipeline.html

playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container--source-citation-button--popover.yaml

@@ -0,0 +1,48 @@
+- group:
+  - button "data-analysis.py"
+- group:
+  - button "dataset.csv"
+- paragraph: Can you help me analyze these files?
+- paragraph: I'm having trouble understanding the data structure and need assistance with the implementation.
+- group:
+  - button "Export message"
+- text: I'd be happy to help! Data processing pipelines typically follow a structured approach. Let me examine your files and provide detailed guidance.
+- group:
+  - button "Add to list"
+  - button "Export response"
+  - button "Retry response"
+  - button "More actions"
+  - button "Sources"
+- paragraph: Perfect! What should I focus on first
+- paragraph: I also want to make sure the performance is optimized for large datasets since this will be used in production with potentially millions of rows?
+- group:
+  - button "Export message"
+- text: Great question! When analyzing large datasets, it's crucial to focus on vectorized operations and avoid row-by-row iteration. Additionally, memory-efficient chunking strategies allow you to process files that exceed available RAM.
+- group:
+  - button "Add to list"
+  - button "Export response"
+  - button "Retry response"
+  - button "More actions"
+  - button "Sources"
+- alert: Info AI responses are for demonstration purposes.
+- group:
+  - text: requirements.pdf
+  - button "Remove attachment requirements.pdf"
+- group:
+  - text: mockup.png
+  - button "Remove attachment mockup.png"
+- textbox "Chat message input":
+  - /placeholder: Enter a command, question or topic...
+- group:
+  - button "More actions"
+  - button "Show Welcome Screen"
+  - button "Use Inline Citations"
+- button "Send"
+- text: The content is AI generated. Always verify the information for accuracy.
+- dialog:
+  - list:
+    - listitem:
+      - paragraph: Data Pipeline Design Patterns
+      - paragraph: Pipelines can be structured as linear chains or branching graphs. Each stage transforms data independently, enabling testability and reuse.
+      - link "View source":
+        - /url: https://examples.org/articles/data-pipeline.html