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.

미리보기는 샘플 데이터로 동작합니다. 네트워크도 채널도 필요 없습니다.

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

설치

shadcn 프로젝트에서 실행하세요. 파일이 여러분의 코드로 복사됩니다.

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

사용법

tsx

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

const chat = useYuvaChat({ server, channel })

Props

`UseYuvaChatOptions`

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

`YuvaChatState`

Prop	유형
`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>`

의존성

이 항목을 설치하면 다음도 함께 추가됩니다.

npm 패키지

useyuva ↗

← 이전Yuva idea suggest form 다음 →Yuva discussions hooks