Messaging

import { useState } from 'react';
import { AvatarRow, Avatar, AiTextarea, MessageBubble } from '@cleen/cleen-components';
import { useConversation } from '@/hooks/useConversation';

export function ChatThread({ conversationId }) {
  const { conversation, messages, send, typing } = useConversation(conversationId);
  const [draft, setDraft] = useState('');

  if (!conversation) return null;

  return (
    <div className="chat-thread">
      <header>
        <h2>{conversation.title}</h2>
        <AvatarRow users={conversation.participants} maxVisible={5} />
      </header>
      <ul className="chat-messages">
        {messages.map((m) => (
          <MessageBubble key={m.id} message={m} avatar={<Avatar user={m.author} />} />
        ))}
        {typing && <li className="chat-typing">{typing.name} is typing…</li>}
      </ul>
      <AiTextarea
        value={draft}
        onChange={setDraft}
        onSubmit={() => { send(draft); setDraft(''); }}
      />
    </div>
  );
}