laif-ds/dist/agent-docs/components/MessageList.md

Design System di Laif con componenti React basati su principi di Atomic Design

 # MessageList
 
 ## Overview
 
 Vertical list of chat messages with optional typing indicator. Renders each message via `ChatMessage` and supports per-message actions.
 
 ---
 
 ## Props
 
 | Prop              | Type                                                                 | Default     | Description |
 | ----------------- | -------------------------------------------------------------------- | ----------- | ----------- |
 | `messages`        | `Message[]`                                                          | `[]`        | Array of messages to render. |
 | `showTimeStamps`  | `boolean`                                                            | `true`      | Show timestamps on each message. |
 | `isTyping`        | `boolean`                                                            | `false`     | Shows a typing indicator at the end of the list. |
 | `messageOptions`  | `AdditionalMessageOptions \| (message: Message) => AdditionalMessageOptions` | `undefined` | Additional props/actions per message (static or function of message). |
 | `onEdit`          | `(id: string, newContent: string) => void`                           | `undefined` | Called when a message enters edit mode and changes. |
 | `onMessageSave`   | `(id: string, content: string) => void`                              | `undefined` | Called when a message edit is saved. |
 
 `AdditionalMessageOptions` mirrors `ChatMessageProps` except base `Message` fields.
 
 ---
 
 ## Behavior
 
 - **Per-message customization**: Pass `messageOptions` as a function to supply contextual actions.
 - **Typing indicator**: `isTyping` renders `TypingIndicator` as the last item.
 - **Composition**: Each message is passed to `ChatMessage` with merged props.
 
 ---
 
 ## Examples
 
 ### Default
 
 ```tsx
 import { MessageList } from "laif-ds";
 
 export function Chat() {
   const messages = [
     { id: "1", role: "user", content: "Ciao!", createdAt: new Date() },
     { id: "2", role: "assistant", content: "Come posso aiutarti?", createdAt: new Date() },
   ];
   return (
     <div className="border-d-border w-full max-w-2xl rounded-lg border p-4">
       <MessageList messages={messages} showTimeStamps />
     </div>
   );
 }
 ```
 
 ### With Actions
 
 ```tsx
 import { Button, Icon } from "laif-ds";
 import { MessageList } from "laif-ds";
 
 export function ChatWithActions() {
   const messages = [
     { id: "1", role: "user", content: "Spiegami il virtual DOM", createdAt: new Date() },
     { id: "2", role: "assistant", content: "Il Virtual DOM è...", createdAt: new Date() },
   ];
 
   return (
     <div className="border-d-border w-full max-w-2xl rounded-lg border p-4">
       <MessageList
         messages={messages}
         messageOptions={(m) =>
           m.role === "assistant"
             ? {
                 actions: (
                   <>
                     <Button variant="ghost" size="icon" className="h-6 w-6">
                       <Icon name="ThumbsUp" className="size-4" />
                     </Button>
                     <Button variant="ghost" size="icon" className="h-6 w-6">
                       <Icon name="ThumbsDown" className="size-4" />
                     </Button>
                   </>
                 ),
               }
             : {}
         }
       />
     </div>
   );
 }
 ```
 
 ---
 
 ## Notes
 
 - **Data model**: See `ChatMessage` for the `Message` shape and advanced features (tool invocations, reasoning parts, edits).
 - **A11y**: Provide readable timestamps and roles; actions should include accessible labels.