fix(chat-messages): improve chat container layout and examples

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

@@ -4,16 +4,16 @@
   - 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 "Copy message"
+- 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 "Copy response"
+- 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?
-- button "Copy message"
+- button "Export message"
 - paragraph: Great question! When analyzing large datasets, it's crucial to focus on...
 - alert: Info AI responses are for demonstration purposes.
 - group:

projects/element-ng/chat-messages/si-chat-container.component.scss

@@ -36,13 +36,16 @@
 
   // Ensure the container can grow to fill available space
   min-block-size: 0;
-  overflow-y: hidden;
+  // Allow scroll on very small screens, but otherwise let the messages container handle it
+  overflow-y: auto;
   overflow-x: visible;
 }
 
 .messages-container {
   overflow-y: auto;
   overflow-x: visible;
+  // 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);
 
   // Padding is included here, cancel out the gap on the messages container

projects/element-ng/chat-messages/si-chat-message.component.scss

@@ -35,6 +35,7 @@
   margin-block-end: auto;
   background-color: var(--chat-message-bubble-bg);
   min-inline-size: 0;
+  max-inline-size: 100%;
   overflow-wrap: break-word;
   word-break: break-word;
 
@@ -48,10 +49,6 @@
   }
 }
 
-.message-wrapper {
-  min-inline-size: 0;
-}
-
 .attachment-slot {
   &:empty {
     display: none;
@@ -90,6 +87,7 @@
 
 .message-wrapper {
   min-inline-size: 0;
+  max-inline-size: 100%;
   inline-size: auto;
 
   &.start {

src/app/examples/si-chat-messages/si-chat-container.html

@@ -1,5 +1,5 @@
 <div class="si-layout-fixed-height w-100 h-100">
-  <si-chat-container colorVariant="base-0">
+  <si-chat-container #chatContainer colorVariant="base-0">
     @for (message of messages(); track message) {
       @if (message.type === 'user') {
         <si-user-message

src/app/examples/si-chat-messages/si-chat-container.ts

@@ -106,10 +106,10 @@ export class SampleComponent {
       ],
       actions: [
         {
-          label: 'Copy message',
+          label: 'Export message',
           icon: 'element-export',
           action: (message: ChatMessage) =>
-            this.logEvent(`Copy user message ${message.content.slice(0, 20)}...`)
+            this.logEvent(`Export user message ${message.content.slice(0, 20)}...`)
         }
       ]
     },
@@ -120,14 +120,14 @@ export class SampleComponent {
   Let me examine the structure and provide guidance.`,
       actions: [
         {
-          label: 'Good response',
+          label: 'Add to list',
           icon: 'element-plus',
-          action: (_message: ChatMessage) => this.logEvent('Thumbs up for AI message')
+          action: (_message: ChatMessage) => this.logEvent('Add AI message to list')
         },
         {
-          label: 'Copy response',
+          label: 'Export response',
           icon: 'element-export',
-          action: (_message: ChatMessage) => this.logEvent('Copy AI message')
+          action: (_message: ChatMessage) => this.logEvent('Export AI message')
         },
         {
           label: 'Retry response',
@@ -147,10 +147,10 @@ export class SampleComponent {
         'Perfect! What should I focus on first\n\nI also want to make sure the performance is optimized for large datasets since this will be used in production with potentially millions of rows?',
       actions: [
         {
-          label: 'Copy message',
+          label: 'Export message',
           icon: 'element-export',
           action: (_message: ChatMessage) =>
-            this.logEvent(`Copy user message ${_message.content.slice(0, 20)}...`)
+            this.logEvent(`Export user message ${_message.content.slice(0, 20)}...`)
         }
       ]
     },
@@ -178,10 +178,10 @@ export class SampleComponent {
 
   userActions: MessageAction[] = [
     {
-      label: 'Copy message',
+      label: 'Export message',
       icon: 'element-export',
       action: (_message: ChatMessage) =>
-        this.logEvent(`Copy user message ${_message.content.slice(0, 20)}...`)
+        this.logEvent(`Export user message ${_message.content.slice(0, 20)}...`)
     },
     {
       label: 'Delete message',
@@ -193,14 +193,14 @@ export class SampleComponent {
 
   aiActions: MessageAction[] = [
     {
-      label: 'Good response',
+      label: 'Add to list',
       icon: 'element-plus',
-      action: (_message: ChatMessage) => this.logEvent('Thumbs up for AI message')
+      action: (_message: ChatMessage) => this.logEvent('Add AI message to list')
     },
     {
-      label: 'Copy response',
+      label: 'Export response',
       icon: 'element-export',
-      action: (_message: ChatMessage) => this.logEvent('Copy AI message')
+      action: (_message: ChatMessage) => this.logEvent('Export AI message')
     }
   ];
 
@@ -272,9 +272,9 @@ export class SampleComponent {
         content: event.content,
         actions: [
           {
-            label: 'Copy message',
+            label: 'Export message',
             icon: 'element-export',
-            action: () => this.logEvent('Copy user message')
+            action: () => this.logEvent('Export user message')
           }
         ],
         attachments: event.attachments.map(att => ({
@@ -284,6 +284,7 @@ export class SampleComponent {
       }
     ]);
     this.simulateAiResponse(event.content);
+    this.chatContainer()?.scrollToBottom();
   }
 
   onInterrupt(): void {
@@ -314,14 +315,14 @@ export class SampleComponent {
             content: response,
             actions: [
               {
-                label: 'Good response',
+                label: 'Add to list',
                 icon: 'element-plus',
-                action: () => this.logEvent('Thumbs up for AI message')
+                action: () => this.logEvent('Add AI message to list')
               },
               {
-                label: 'Copy response',
+                label: 'Export response',
                 icon: 'element-export',
-                action: () => this.logEvent('Copy AI message')
+                action: () => this.logEvent('Export AI message')
               }
             ]
           }