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.

プレビューはサンプルデータで動作します。ネットワークもチャネルも不要です。

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} />
}

インストール

shadcn プロジェクトで実行してください。ファイルはあなた自身のコードにコピーされます。

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

使い方

tsx

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

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

Props

`YuvaChatConversationsProps`

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

ラベル

ラベルの一覧は Yuva chat にあります。

依存関係

この項目をインストールすると、次のものも追加されます。

shadcn/ui のコンポーネント

その他の Yuva 項目

Yuva chat hook

npm パッケージ

lucide-react ↗

← 前へYuva chat composer 次へ →Yuva discussion list