ChatThread

npx shadcn@latest add https://docs.nasaqui.com/r/chat.json

import { ChatComposer, ChatMessage, ChatThread } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

import { ChatComposer, ChatMessage, ChatThread } from "@fadymondy/nasaq/web";
import { useState } from "react";

export function Chat() {
  const [messages, setMessages] = useState([{ id: 1, side: "assistant" as const, text: "Hi! How can I help?" }]);
  return (
    <div className="flex h-96 flex-col rounded-surface border border-border">
      <ChatThread className="flex-1">
        {messages.map((m) => (
          <ChatMessage key={m.id} side={m.side} name={m.side === "user" ? "You" : "Assistant"} time={Date.now()}>
            {m.text}
          </ChatMessage>
        ))}
      </ChatThread>
      <div className="p-3 pt-0">
        <ChatComposer onSend={(text) => setMessages((m) => [...m, { id: m.length + 1, side: "user", text }])} />
      </div>
    </div>
  );
}

ChatThread        data-slot="chat-thread"        wrapper
├─ scroller       role="log" aria-live="polite"  the scrolling region
│  └─ ChatMessage data-slot="chat-message"       data-side, data-status, data-streaming
│     ├─ Avatar   data-slot="avatar"
│     ├─ byline   name + DateTime (data-slot="date-time")
│     ├─ bubble   data-slot="chat-bubble"        Markdown or text; TypingIndicator while streaming
│     └─ status   data-slot="chat-status"        spinner / check / error + retry
└─ jump button    data-slot="chat-jump"          only when scrolled away from the bottom
ChatComposer      data-slot="chat-composer"
├─ attachments    data-slot="chat-attachments"   your slot
└─ Textarea (data-slot="textarea"), actions slot, send or stop Button

import { ChatComposer, ChatMessage, ChatThread } from "@fadymondy/nasaq/web";

export function Streaming({ text, busy, onStop }: { text: string; busy: boolean; onStop: () => void }) {
  return (
    <div className="flex h-96 flex-col">
      <ChatThread className="flex-1">
        <ChatMessage name="Assistant" streaming={busy} format="markdown">
          {text}
        </ChatMessage>
      </ChatThread>
      <ChatComposer streaming={busy} onStop={onStop} onSend={() => {}} />
    </div>
  );
}

import { ChatMessage } from "@fadymondy/nasaq/web";

export function Failed({ retry }: { retry: () => void }) {
  return (
    <ChatMessage side="user" name="فادي" status="error" onRetry={retry}>
      مرحبًا، هل الخدمة متاحة؟
    </ChatMessage>
  );
}