# 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.