docs(ai-chat): change action buttons

Author: robertwilde

playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-message-element-examples-chromium-dark-linux.png

@@ -10,6 +10,6 @@
   - listitem: First item
   - listitem: Second item
 - button "Good response"
+- button "Bad response"
 - button "Copy response"
-- button "Retry response"
 - button "More actions"

playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-message-element-examples-chromium-light-linux.png

@@ -7,14 +7,18 @@
 - 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 "Add to list"
-- button "Export response"
-- button "Retry response"
+- 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"
 - 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"
 - alert: Info AI responses are for demonstration purposes.
 - group:
   - text: requirements.pdf

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

@@ -4,11 +4,13 @@
   - text: Can you help me with this
   - strong: code snippet
   - text: "? I'm getting an error when I run it."
-- button "Copy"
-- button "Edit"
-- button "More actions"
+- group:
+  - button "Copy"
+  - button "Edit"
+  - button "More actions"
 - text: JD Thanks for the help! That worked perfectly.
-- button "Copy"
-- button "Edit"
+- group:
+  - button "Copy"
+  - button "Edit"
 - group: error-log.txt
 - group: screenshot.png

playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container-element-examples-chromium-dark-linux.png

@@ -4,7 +4,16 @@
  */
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
+import {
+  elementBookmark,
+  elementCopy,
+  elementRefresh,
+  elementShare,
+  elementThumbsDown,
+  elementThumbsUp
+} from '@siemens/element-icons';
 import { MessageAction, SiAiMessageComponent } from '@siemens/element-ng/chat-messages';
+import { addIcons } from '@siemens/element-ng/icon';
 import { getMarkdownRenderer } from '@siemens/element-ng/markdown-renderer';
 import { MenuItemAction } from '@siemens/element-ng/menu';
 import { LOG_EVENT } from '@siemens/live-preview';
@@ -21,6 +30,15 @@ export class SampleComponent {
 
   protected markdownRenderer = getMarkdownRenderer(this.sanitizer);
 
+  protected readonly icons = addIcons({
+    elementThumbsUp,
+    elementThumbsDown,
+    elementCopy,
+    elementRefresh,
+    elementBookmark,
+    elementShare
+  });
+
   content = `Here's a **simple response** with basic formatting.
 
 You can use \`inline code\` and create lists:
@@ -31,32 +49,38 @@ You can use \`inline code\` and create lists:
   actions: MessageAction[] = [
     {
       label: 'Good response',
-      icon: 'element-plus',
+      icon: this.icons.elementThumbsUp,
       action: (messageId: string) => this.logEvent(`Thumbs up for message ${messageId}`)
     },
     {
-      label: 'Copy response',
-      icon: 'element-export',
-      action: (messageId: string) => this.logEvent(`Copy message ${messageId}`)
+      label: 'Bad response',
+      icon: this.icons.elementThumbsDown,
+      action: (messageId: string) => this.logEvent(`Thumbs down for message ${messageId}`)
     },
     {
-      label: 'Retry response',
-      icon: 'element-refresh',
-      action: (messageId: string) => this.logEvent(`Retry message ${messageId}`)
+      label: 'Copy response',
+      icon: this.icons.elementCopy,
+      action: (messageId: string) => this.logEvent(`Copy message ${messageId}`)
     }
   ];
 
   secondaryActions: MenuItemAction[] = [
+    {
+      type: 'action',
+      label: 'Retry response',
+      icon: this.icons.elementRefresh,
+      action: (messageId: string) => this.logEvent(`Retry message ${messageId}`)
+    },
     {
       type: 'action',
       label: 'Bookmark',
-      icon: 'element-bookmark',
+      icon: this.icons.elementBookmark,
       action: (messageId: string) => this.logEvent(`Bookmark message ${messageId}`)
     },
     {
       type: 'action',
       label: 'Share',
-      icon: 'element-share',
+      icon: this.icons.elementShare,
       action: (messageId: string) => this.logEvent(`Share message ${messageId}`)
     }
   ];