Composer

import { IconPaperclip } from "@tabler/icons-react"
import { Button } from "@/components/ui/button"
import { Composer } from "@/components/ui/composer"

const sendMessage = (text: string) => { /* Thêm tin nhắn vào cuộc trò chuyện. */ }

<Composer label="Tin nhắn" placeholder="Viết tin nhắn" onSubmit={sendMessage} actions={<Button size="sm" variant="ghost" iconOnly aria-label="Đính kèm tệp">
  <IconPaperclip size={16} />
</Button>} className="max-w-md" />

import { IconPaperclip } from "@tabler/icons-react"
import { AttachmentPreview } from "@/components/ui/attachment-preview"
import { Button } from "@/components/ui/button"
import { Composer } from "@/components/ui/composer"

const sendMessage = (text: string) => { /* Thêm tin nhắn vào cuộc trò chuyện. */ }
const removeFile = () => { /* Gỡ tệp khỏi tin nhắn. */ }

<Composer canSubmit label="Tin nhắn" placeholder="Thêm lời nhắn" onSubmit={sendMessage} attachments={<AttachmentPreview name="brief.pdf" type="application/pdf" fileSize={482000} onRemove={removeFile} />} actions={<Button size="sm" variant="ghost" iconOnly aria-label="Đính kèm tệp">
  <IconPaperclip size={16} />
</Button>} className="max-w-md" />

import { Composer } from "@/components/ui/composer"

const sendMessage = (text: string) => { /* Thêm tin nhắn vào cuộc trò chuyện. */ }
const stopReply = () => { /* Hủy câu trả lời đang được gửi tới. */ }

<Composer pending label="Tin nhắn" placeholder="Hỏi bất cứ điều gì" onSubmit={sendMessage} onStop={stopReply} className="max-w-md" />

import { Composer } from "@/components/ui/composer"

const sendMessage = (text: string) => { /* Thêm tin nhắn vào cuộc trò chuyện. */ }
const cancelReply = () => { /* Xóa replyTo của Composer. */ }
const sampleReply = { author: "Linh Tran", text: "Bạn gửi bản brief trước buổi gọi được không?" }

<Composer label="Tin nhắn" placeholder="Viết câu trả lời" replyTo={sampleReply} onCancelReply={cancelReply} onSubmit={sendMessage} className="max-w-md" />

import { Composer } from "@/components/ui/composer"

const sendMessage = (text: string) => { /* Thêm tin nhắn vào cuộc trò chuyện. */ }
const sendTyping = (typing: boolean) => { /* Báo cho những người khác trong cuộc trò chuyện, như qua websocket. */ }

<Composer label="Tin nhắn" placeholder="Viết tin nhắn" onTypingChange={sendTyping} onSubmit={sendMessage} className="max-w-md" />