Yuva chat hook

A React hook over the useyuva headless client for live chat: the session, conversation list, one thread with realtime messages, typing, read state, sending text and files, rating and attachment download. Labels with English defaults.

Previzualizarea rulează pe date de exemplu. Nu are nevoie de rețea și nici de canal.

tsx

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

export function Inbox() {
  const chat = useYuvaChat({
    server={process.env.NEXT_PUBLIC_YUVA_SERVER}
    channel={process.env.NEXT_PUBLIC_YUVA_CHANNEL},
  })

  return (
    <ul>
      {chat.conversations.map((conversation) => (
        <li key={conversation.id}>
          <button onClick={() => void chat.open(conversation.id)}>{conversation.subject}</button>
        </li>
      ))}
    </ul>
  )
}

Instalare

Rulează asta într-un proiect shadcn. Fișierele sunt copiate în codul tău.

Shell

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

Shell

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

Shell

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

Shell

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

Utilizare

tsx

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

const chat = useYuvaChat({ server, channel })

Props

`UseYuvaChatOptions`

Prop	Tip
`server?`	`string`
`channel?`	`string`
`client?`	`YuvaClient`
`identityToken?`	`IdentityTokenSource \| null`
`helpArticleId?`	`string`

`YuvaChatState`

Prop	Tip
`loading`	`boolean`
`error`	`unknown`
`inbox`	`ClientInbox \| null`
`contact`	`ClientContact \| null`
`connection`	`ConnectionState["state"]`
`conversations`	`ClientConversation[]`
`hasMoreConversations`	`boolean`
`loadMoreConversations`	`() => Promise<void>`
`activeId`	`string \| null`
`conversation`	`ClientConversation \| null`
`open`	`(id: string \| null) => Promise<void>`
`removed`	`boolean`
`threadLoading`	`boolean`
`messages`	`YuvaChatMessage[]`
`hasEarlier`	`boolean`
`loadEarlier`	`() => Promise<void>`
`typing`	`ClientMessage["author"] \| null`
`memberReadAt`	`string \| null`
`send`	`(input: YuvaChatSendInput) => Promise<void>`
`retry`	`(id: string) => Promise<void>`
`discard`	`(id: string) => void`
`setTyping`	`(on: boolean) => void`
`markRead`	`() => Promise<void>`
`rate`	`(rating: Rating, comment?: string) => Promise<void>`
`openAttachment`	`(attachment: ClientAttachment) => Promise<void>`
`saveEmail`	`(email: string) => Promise<void>`

Dependențe

Instalarea acestui element adaugă și următoarele.

Pachete npm

useyuva ↗

← AnteriorYuva idea suggest form Următorul →Yuva discussions hooks