Yuva chat conversations

The visitor's conversations as rows with the last message, time and an unread dot, and an empty state.

No conversations yet

Start one and we will answer here.

Pratinjau berjalan dengan data contoh. Tidak butuh jaringan maupun kanal.

tsx

import { YuvaChatConversations } from "@/components/yuva-chat-conversations"
import { useYuvaChat } from "@/hooks/use-yuva-chat"

export function Conversations() {
  const chat = useYuvaChat({
    server={process.env.NEXT_PUBLIC_YUVA_SERVER}
    channel={process.env.NEXT_PUBLIC_YUVA_CHANNEL},
  })
  return <YuvaChatConversations chat={chat} />
}

Instalasi

Jalankan ini di proyek shadcn. File disalin ke kode Anda sendiri.

Shell

npx shadcn@latest add https://useyuva.com/r/yuva-chat-conversations.json

Shell

pnpm dlx shadcn@latest add https://useyuva.com/r/yuva-chat-conversations.json

Shell

yarn dlx shadcn@latest add https://useyuva.com/r/yuva-chat-conversations.json

Shell

bunx --bun shadcn@latest add https://useyuva.com/r/yuva-chat-conversations.json

Penggunaan

tsx

import { YuvaChatConversations } from "@/components/yuva-chat-conversations"

<YuvaChatConversations chat={chat} onOpen={(id) => setView("thread")} />

Props

`YuvaChatConversationsProps`

Prop	Tipe
`chat`	`YuvaChatState`
`labels?`	`Partial<YuvaChatLabels>`
`locale?`	`string`
`onOpen?`	`(id: string \| null) => void`
`className?`	`string`

Label

Label tercantum di Yuva chat.

Dependensi

Menginstal item ini juga menambahkan yang berikut.

Komponen dari shadcn/ui

Item Yuva lainnya

Yuva chat hook

Paket npm

lucide-react ↗

← SebelumnyaYuva chat composer Berikutnya →Yuva discussion list