דלג לתוכן
Yuvashadcn
Yuva chatתפריט

Yuva chat

Live chat for a page or an app: header with the agent's avatar and reply time, conversation list, thread, composer and the e-mail confirmation card, in a plain card or a lined variant.

CW

Chat with us

התצוגה המקדימה פועלת על נתוני דוגמה. היא לא צריכה רשת ולא ערוץ.

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
confirmed

Replies will also reach ada@example.com

התצוגה המקדימה פועלת על נתוני דוגמה. היא לא צריכה רשת ולא ערוץ.

התקנה

הריצו את זה בפרויקט shadcn. הקבצים מועתקים אל הקוד שלכם.

Shell
npx 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סוג
chatYuvaChatState
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}"

תלויות

התקנת הפריט הזה מוסיפה גם את הבאים.

רכיבים מ-shadcn/ui

פריטי Yuva אחרים

חבילות npm

← הקודםמבואהבא →Yuva discussions