feat(chat-messages): update components to latest design specs

robertwilde · kfenner · commit 364fe8e79d90 · 2026-05-27T15:16:53.000Z
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-message-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-message-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3eddd30072ca2b4523bb66c7a6d8879ccb75121d3d078afb44c3ffd86220e59d
-size 14070
+oid sha256:ef537fcdb4bdf2010c69e492639696ffb7a5c6b90268cedf3eb1a03a8b091650
+size 14065
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-message-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-message-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b845bb84788a7768907ba98ecc3320f6006b2a921a038010de384917e281e68d
-size 13750
+oid sha256:2d658adc4170aab7747ccfc062501489d14a49da294f3589744555a18f28168a
+size 13747
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-message.yaml b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-message.yaml
@@ -9,7 +9,8 @@
 - list:
   - listitem: First item
   - listitem: Second item
-- button "Good response"
-- button "Bad response"
-- button "Copy response"
-- button "More actions"
+- group:
+  - button "Good response"
+  - button "Bad response"
+  - button "Copy response"
+  - button "More actions"
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-welcome-screen-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-welcome-screen-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:cd97f4f374bd5dd61d79ae6d2d464afae647328798c009c7d4fa409d5c49a7b1
-size 47972
+oid sha256:f6dd91d62a2e2e09679dc165cf87a26cbb16dcb513c2e36eabceb4fb4c85c629
+size 47503
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-welcome-screen-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-welcome-screen-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:fc6efce2e4b56bcde7aaa6191893167340849d114347f7ab4ff03049d0812cf4
-size 45527
+oid sha256:51940bc489605d25c15d26fd7cf3fe49339bf406558739ab568aa8fc53278d80
+size 45745
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-attachment-list-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-attachment-list-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8d7da212e9e92db15c9facbbd76182887f618772ce7c17f95b1bd5f979f53ba4
-size 15265
+oid sha256:0ed5da4fbed6c2e773b5c2cd491d2a333cd7d9ac457e89ad1d235b173d90c1ef
+size 15134
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-attachment-list-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-attachment-list-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:dc95bf5ca7aea3133bff198080adb1b37bab9789458fa05c1cb8df3e3c881c5a
-size 14723
+oid sha256:f5b5ac4ff4203dc9a13b807dc11ca0f1167cf3d482871525b0760298491976f0
+size 14836
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0e28f1563da1dfd76f429e35a9c80376c738702eb712f62c86c48743f32d89ea
-size 45925
+oid sha256:6f50563410762eac81d2279c1f1ae92118c3bd0a4b6e15e32a7b375663a25328
+size 42912
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b3bd37f2a408563a6f659f176e331bbb56564096e9ee34c35198e2007979915d
-size 44604
+oid sha256:b87afbbe37f14403b5064a6fd10fb1232b2f7e1ced059cd47e6a90db36cae705
+size 42086
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container.yaml b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container.yaml
@@ -4,21 +4,25 @@
   - 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.
-- button "Export message"
+- group:
+  - button "Export message"
 - paragraph: I'd be happy to help you analyze your files! I can see you've shared a Python script and a CSV dataset.
 - paragraph: Let me examine the structure and provide guidance.
-- button "Good response"
-- button "Bad response"
-- button "Copy response"
-- button "More actions"
+- group:
+  - button "Good response"
+  - button "Bad response"
+  - button "Copy 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?
-- button "Export message"
+- group:
+  - button "Export message"
 - paragraph: Great question! When analyzing large datasets, it's crucial to focus on...
-- button "Good response"
-- button "Bad response"
-- button "Copy response"
-- button "More actions"
+- group:
+  - button "Good response"
+  - button "Bad response"
+  - button "Copy response"
+  - button "More actions"
 - alert: Info AI responses are for demonstration purposes.
 - group:
   - text: requirements.pdf
@@ -28,8 +32,8 @@
   - button "Remove attachment mockup.png"
 - textbox "Chat message input":
   - /placeholder: Enter a command, question or topic...
-- button "Attach file"
-- button "Clear messages"
-- button "Show Welcome Screen"
+- group:
+  - button "More actions"
+  - button "Show Welcome Screen"
 - button "Send"
 - text: The content is AI generated. Always verify the information for accuracy.
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-input-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-input-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a6e4ea3b7b4885b996072d1a134f6dc252b56bf9d4816dfacaf7bd87e76bb9da
-size 15992
+oid sha256:e170c4f2c555f2de093bb010f938192dc2a62623fef1f7a8bd412e3266053ed7
+size 14069
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-input-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-input-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ecdb5c7bf46f0504041eefbb3ea91025948935d272e740de58028de0832db516
-size 15752
+oid sha256:4aa88573f94d6027755237e99fcea80f8c5dea1f3eec4d42eab80fe7a691be37
+size 13939
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-input.yaml b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-input.yaml
@@ -6,10 +6,8 @@
   - button "Remove attachment mockup.png"
 - textbox "Chat message input":
   - /placeholder: Enter a command, question or topic...
-- button "Attach files"
-- button "Take photo"
-- button "Text formatting"
-- button "More actions"
-- button "Insert emoji"
+- group:
+  - button "More actions"
+  - button "Insert emoji"
 - button "Send Message"
 - text: The content is AI generated. Always verify the information for accuracy.
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-message-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-message-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8cbb8915a28605509e6c7f1e78434b175eb22c876c91cc2ab7d09af265e8b7b0
-size 21146
+oid sha256:d80792ff3ad692dea50ed74e365c10d81be1afc43784dec00c4abf3b5cd92a1f
+size 21835
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-message-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-message-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:df210750b11b15771a4e60a3036fca30070970b1cbdc360accf22339cf0991a0
-size 20068
+oid sha256:2dddac51f77c6abab740749d0a11c603e481d1b6fddbfbe459519c4a7eb09b3f
+size 20746
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-user-message-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-user-message-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:df0053753dd2184103eec236e4c6fc739e042220f0d609a50206542cdf1a8465
-size 15077
+oid sha256:0f35a2a7dd7483fb7baff2137b550b8c59f877c56f7ced2d58cb6b70f0781b6a
+size 15359
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-user-message-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-user-message-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a0ee28a21284d866342998a330e044107a61fe58eb9628eb243740c30f13c7fe
-size 14654
+oid sha256:e074fcc1d95efe6772b45b105a1e108c24b8915da2ffe7ce622d90cd731b4c80
+size 14984
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-user-message.yaml b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-user-message.yaml
@@ -7,6 +7,7 @@
 - paragraph:
   - code: console.log('Hello World')
 - paragraph: I'm getting an error when I run it.
-- button "Edit message"
-- button "Copy message"
-- button "Delete message"
+- group:
+  - button "Edit message"
+  - button "Copy message"
+  - button "Delete message"
diff --git a/projects/element-ng/chat-messages/si-ai-message.component.html b/projects/element-ng/chat-messages/si-ai-message.component.html
@@ -9,7 +9,7 @@
   }
 
   @if (actions().length > 0 || secondaryActions().length > 0) {
-    <div class="d-flex gap-4 ai-message-actions" siChatMessageAction>
+    <div class="btn-group ai-message-actions" role="group" siChatMessageAction>
       @for (action of actions(); track $index) {
         <button
           type="button"
diff --git a/projects/element-ng/chat-messages/si-ai-welcome-screen.component.scss b/projects/element-ng/chat-messages/si-ai-welcome-screen.component.scss
@@ -51,5 +51,7 @@
 }
 
 ::ng-deep button[si-action-card] {
-  background-color: variables.$element-base-input-experimental;
+  background-color: transparent;
+  border-radius: variables.$element-radius-2;
+  border: 1px solid variables.$element-ui-4;
 }
diff --git a/projects/element-ng/chat-messages/si-attachment-list.component.html b/projects/element-ng/chat-messages/si-attachment-list.component.html
@@ -12,7 +12,7 @@
           (keydown.space)="openPreview($event, attachment)"
         >
           <si-icon
-            class="attachment-icon icon flex-shrink-0 mx-1"
+            class="attachment-icon icon flex-shrink-0 m-2"
             [icon]="getFileIcon(attachment.name)"
           />
           <div class="attachment-info flex-grow-1 min-width-0">
@@ -27,7 +27,7 @@
       } @else {
         <div class="attachment-main--static d-flex align-items-center flex-grow-1 min-width-0">
           <si-icon
-            class="attachment-icon icon flex-shrink-0 mx-1"
+            class="attachment-icon icon flex-shrink-0 m-2"
             [icon]="getFileIcon(attachment.name)"
           />
           <div class="attachment-info flex-grow-1 min-width-0">
@@ -44,11 +44,11 @@
       @if (removable()) {
         <button
           type="button"
-          class="btn btn-tertiary-ghost btn-icon expand-button flex-shrink-0 ms-auto align-self-center focus-inside"
+          class="btn btn-tertiary-ghost btn-sm btn-icon expand-button flex-shrink-0 ms-auto align-self-center focus-inside m-2"
           [attr.aria-label]="(removeLabel() | translate) + ' ' + attachment.name"
           (click)="remove.emit(attachment); $event.stopPropagation()"
         >
-          <si-icon class="icon" [icon]="icons.elementDelete" />
+          <si-icon class="icon" [icon]="icons.elementStateClose" />
         </button>
       }
     </div>
diff --git a/projects/element-ng/chat-messages/si-attachment-list.component.scss b/projects/element-ng/chat-messages/si-attachment-list.component.scss
@@ -2,15 +2,16 @@
 @use '@siemens/element-theme/src/styles/variables';
 
 :host {
-  --attachment-list-bg: #{variables.$element-base-1-hover};
-  --attachment-name-color: #{variables.$element-text-primary};
+  --attachment-list-bg: transparent;
+  --attachment-name-color: #{variables.$element-text-secondary};
 }
 
 .attachment-item {
   border-radius: variables.$element-radius-2;
   overflow: hidden;
   background-color: var(--attachment-list-bg);
   color: var(--attachment-name-color);
+  border: 1px solid variables.$element-ui-4;
 }
 
 .attachment-main {
@@ -29,6 +30,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  color: variables.$element-text-primary;
 }
 
 .attachment-info {
@@ -47,5 +49,5 @@
 }
 
 .expand-button {
-  border-radius: 0;
+  border-radius: variables.$element-radius-2;
 }
diff --git a/projects/element-ng/chat-messages/si-attachment-list.component.ts b/projects/element-ng/chat-messages/si-attachment-list.component.ts
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 import { booleanAttribute, Component, inject, input, output, TemplateRef } from '@angular/core';
-import { elementDelete, elementDocument } from '@siemens/element-icons';
+import { elementStateClose, elementDocument } from '@siemens/element-icons';
 import { addIcons, SiIconComponent } from '@siemens/element-ng/icon';
 import { SiModalService } from '@siemens/element-ng/modal';
 import { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';
@@ -54,7 +54,7 @@ export interface Attachment {
 })
 export class SiAttachmentListComponent {
   protected modalService = inject(SiModalService);
-  protected readonly icons = addIcons({ elementDelete, elementDocument });
+  protected readonly icons = addIcons({ elementStateClose, elementDocument });
 
   /**
    * List of attachments to display
diff --git a/projects/element-ng/chat-messages/si-chat-container.component.scss b/projects/element-ng/chat-messages/si-chat-container.component.scss
@@ -44,6 +44,7 @@
 .messages-container {
   overflow-y: auto;
   overflow-x: visible;
+  padding-inline: map.get(variables.$spacers, 4);
   // Ensure the messages can still be seen on very short screens
   min-block-size: 5rem;
   gap: map.get(variables.$spacers, 9) + map.get(variables.$spacers, 4);
diff --git a/projects/element-ng/chat-messages/si-chat-input.component.html b/projects/element-ng/chat-messages/si-chat-input.component.html
diff --git a/projects/element-ng/chat-messages/si-chat-input.component.scss b/projects/element-ng/chat-messages/si-chat-input.component.scss
diff --git a/projects/element-ng/chat-messages/si-chat-input.component.spec.ts b/projects/element-ng/chat-messages/si-chat-input.component.spec.ts
diff --git a/projects/element-ng/chat-messages/si-chat-input.component.ts b/projects/element-ng/chat-messages/si-chat-input.component.ts
diff --git a/projects/element-ng/chat-messages/si-user-message.component.html b/projects/element-ng/chat-messages/si-user-message.component.html
diff --git a/projects/element-ng/chat-messages/si-user-message.component.scss b/projects/element-ng/chat-messages/si-user-message.component.scss
