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.

Chat with us

Die Vorschau läuft mit Beispieldaten. Sie braucht weder Netzwerk noch Kanal.

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

Die Vorschau läuft mit Beispieldaten. Sie braucht weder Netzwerk noch Kanal.

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

Installation

Führen Sie das in einem shadcn-Projekt aus. Die Dateien werden in Ihren eigenen Code kopiert.

Shell

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

Shell

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

Shell

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

Shell

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

Verwendung

tsx

import { YuvaChat } from "@/components/yuva-chat"

<YuvaChat server={server} channel={channel} />

Props

`YuvaChatProps`

Prop	Typ
`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	Typ
`chat`	`YuvaChatState`
`labels?`	`Partial<YuvaChatLabels>`
`className?`	`string`

Beschriftungen

Jede Beschriftung hat einen englischen Standard. Übergeben Sie ein teilweises labels-Objekt, um sie zu ändern oder zu übersetzen.

Beschriftung	Standard
`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}"`

Chat with us

YuvaChatEmail

Installation

Verwendung

Props

`YuvaChatProps`

`YuvaChatEmailProps`

Beschriftungen

Abhängigkeiten

Komponenten von shadcn/ui

Weitere Yuva-Elemente

npm-Pakete