CW
Chat with us
プレビューはサンプルデータで動作します。ネットワークもチャネルも不要です。
tsx
import { YuvaChat } from "@/components/yuva-chat"
export function Support() {
return (
<YuvaChat
server={process.env.NEXT_PUBLIC_YUVA_SERVER}
channel={process.env.NEXT_PUBLIC_YUVA_CHANNEL}
className="h-[34rem]"
/>
)
}YuvaChatEmail
ask
Where can we reach you?
Leave your e-mail so replies reach you when you are away.sent
Check your inboxWe sent a link to ada@example.com. Open it so replies reach you by e-mail.
undeliverable
We couldn't reach ada@example.com
That address doesn't accept mail. Check it for a typo.confirmed
Replies will also reach ada@example.com
プレビューはサンプルデータで動作します。ネットワークもチャネルも不要です。
tsx
import { YuvaChatEmail } from "@/components/yuva-chat-email"
import { useYuvaChat } from "@/hooks/use-yuva-chat"
export function EmailCard() {
const chat = useYuvaChat({
server={process.env.NEXT_PUBLIC_YUVA_SERVER}
channel={process.env.NEXT_PUBLIC_YUVA_CHANNEL},
})
return <YuvaChatEmail chat={chat} />
}インストール
shadcn プロジェクトで実行してください。ファイルはあなた自身のコードにコピーされます。
Shell
npx shadcn@latest add https://useyuva.com/r/yuva-chat.jsonShell
pnpm dlx shadcn@latest add https://useyuva.com/r/yuva-chat.jsonShell
yarn dlx shadcn@latest add https://useyuva.com/r/yuva-chat.jsonShell
bunx --bun shadcn@latest add https://useyuva.com/r/yuva-chat.json使い方
tsx
import { YuvaChat } from "@/components/yuva-chat"
<YuvaChat server={server} channel={channel} />Props
YuvaChatProps
| Prop | 型 |
|---|---|
server? | string |
channel? | string |
client? | YuvaClient |
identityToken? | IdentityTokenSource | null |
helpArticleId? | string |
labels? | Partial<YuvaChatLabels> |
locale? | string |
confirmation? | React.ReactNode |
variant? | "default" | "lined" |
onCapture? | () => File | null | undefined | Promise<File | null | undefined> |
className? | string |
YuvaChatEmailProps
| Prop | 型 |
|---|---|
chat | YuvaChatState |
labels? | Partial<YuvaChatLabels> |
className? | string |
ラベル
各ラベルには英語のデフォルトがあります。変更や翻訳には、labels オブジェクトの一部を渡してください。
| ラベル | デフォルト |
|---|---|
title | "Chat with us" |
online | "Online" |
away | "Away" |
repliesWithin | (minutes) => `Usually replies in ${minutes} min` |
onlineReplies | "Online · replies in minutes" |
repliesHours | "Usually replies in a few hours" |
repliesDays | "Usually replies in a day or two" |
reconnecting | "Reconnecting…" |
loading | "Loading" |
loadError | "Could not load the chat." |
retry | "Try again" |
back | "Back" |
conversations | "Conversations" |
newConversation | "New conversation" |
noConversations | "No conversations yet" |
conversationRemoved | "This conversation is no longer available." |
noConversationsHint | "Start one and we will answer here." |
loadMore | "Show more" |
conversationFallback | "Conversation" |
unread | "Unread" |
emptyTitle | "Say hello" |
emptyDescription | "Ask us anything. We reply here." |
loadEarlier | "Show earlier messages" |
messages | "Messages" |
today | "Today" |
yesterday | "Yesterday" |
team | "Support" |
bot | "Assistant" |
seen | "Seen" |
sending | "Sending…" |
sendFailed | "Not sent" |
remove | "Remove" |
download | "Download" |
removed | "This message was removed" |
typing | (name) => `${name} is typing` |
typingSomeone | "Typing" |
jumpToLatest | (unread) => (unread > 0 ? `${unread} new, jump to latest` : "Jump to latest") |
newCount | (unread) => `${unread} new` |
closed | "Conversation closed" |
rateQuestion | "How was this conversation?" |
rateGood | "Good" |
rateBad | "Bad" |
rated | "Thanks for your feedback." |
placeholder | "Write a message" |
attach | "Attach a file" |
screenshot | "Take a screenshot" |
fileTooLarge | (name, limit) => `${name} is too large. The limit is ${limit}.` |
fileTypeNotAccepted | (name) => `${name} is not an accepted file type.` |
send | "Send" |
enterKey | "Enter" |
toSend | "to send" |
generic | "Something went wrong. Try again." |
offline | "You seem to be offline." |
rateLimited | "Too many messages. Wait a moment." |
emailLabel | "E-mail address" |
emailPlaceholder | "you@example.com" |
emailSave | "Save" |
emailAskTitle | "Where can we reach you?" |
emailAskHint | "Leave your e-mail so replies reach you when you are away." |
emailSentTitle | "Check your inbox" |
emailSent | "We sent a link to {address}. Open it so replies reach you by e-mail." |
emailChange | "Change address" |
emailResend | "Send again" |
emailResent | "Sent again." |
emailLimited | "We couldn't send the confirmation now. Try again later." |
emailUndeliverableTitle | "We couldn't reach {address}" |
emailUndeliverableHint | "That address doesn't accept mail. Check it for a typo." |
emailConfirmed | "Replies will also reach {address}" |
依存関係
この項目をインストールすると、次のものも追加されます。