RECURSOS DE CHAT PARA REACT
Recursos do React Chat SDK
De ações de mensagens a conteúdo personalizado, escolha os recursos necessários para sua aplicação.
- Conversas individuais e em grupo
- Prévias de mensagens recentes
- Número de conversas não lidas
- Texto, imagens, áudio e vídeo
- Compartilhamento de arquivos nas conversas
- Payloads personalizados de produtos ou pedidos
- Copiar, citar e encaminhar
- Ações de revogação e exclusão
- Agrupamento e alinhamento por remetente
- Seletores de imagens, vídeos e arquivos
- Ações de entrada configuráveis
- Seu próprio placeholder e sua barra de ferramentas
- Temas claro e escuro
- Pré-visualizações personalizadas de conversas
- Inglês, chinês, japonês, coreano
- Confirmações de leitura: ative e configure
- Cloud Search: plugin pago
- Voz e vídeo: adicione o TUICallKit
Explorar React Chat Components
Explore a interface, da lista de conversas ao editor de mensagens.
Escolha como as mensagens funcionam
Controle o alinhamento das mensagens, agrupe mensagens consecutivas e selecione as ações disponíveis em cada mensagem.
const actions = useMessageActions([
'copy', 'quote', 'forward',
]);
<MessageList
alignment="two-sided"
messageAggregationTime={300}
messageActionList={actions}
/>Crie o editor de mensagens de que precisa
Escolha os seletores de imagem, ficheiro e vídeo. Defina o placeholder e decida se o botão de envio ficará visível.
<MessageInput
placeholder="Message your community"
autoFocus={false}
hideSendButton={false}
actions={[
'ImagePicker', 'FilePicker', 'VideoPicker',
]}
/>Mantenha ações úteis ao alcance
Adicione um controle de configurações ao lado do título da conversa. Conecte-o ao seu próprio painel ou sistema de navegação.
const [showSettings, setShowSettings] = useState(false);
<ChatHeader
ChatHeaderRight={
<button onClick={() => setShowSettings(true)}>
Settings
</button>
}
/>Reserve espaço para as configurações da conversa
Coloque o componente de configurações em uma barra lateral ou gaveta. Seu aplicativo controla quando o painel é aberto e fechado.
{showSettings && (
<aside className="chat-settings">
<ChatSetting
onClose={() => setShowSettings(false)}
/>
</aside>
)}PERSONALIZAÇÃO
Personalize sua UI de chat para React
Personalize o estilo do UI Kit para combinar com sua integração do React Chat SDK e seu próprio conteúdo.
COMECE AGORA
Integre o React Chat SDK
- 01
- 02
- 03
npm install @tencentcloud/chat-uikit-react<UIKitProvider theme="light">
<ConversationList />
<Chat>
<ChatHeader />
<MessageList />
<MessageInput />
</Chat>
</UIKitProvider>Perguntas frequentes sobre o React Chat SDK
Qual é a diferença entre o React Chat SDK e o React UI Kit?
Posso personalizar os componentes e o layout das mensagens?
Qual UI Kit devo usar para React web, web móvel ou React Native?
Como integrar o React Chat SDK ao Next.js ou SSR?
Planeje a interface de chat interativa para o navegador. No Next.js App Router, isole o código dependente do navegador em um Client Component; o Next.js permite carregamento dinâmico somente no cliente com ssr: false. Gere o UserSig no seu servidor. Verifique a versão e as dependências do UI Kit instalado e teste a compilação de produção, o login e a navegação antes do lançamento.
Qual é a relação entre o React UI Kit de código aberto e o serviço hospedado do Chat?
O código-fonte do React UI Kit está disponível no GitHub. Os respetivos componentes de mensagens ligados utilizam o Tencent RTC Chat e exigem uma aplicação do Chat e utilizadores autenticados. A disponibilidade do código-fonte dos componentes não inclui mensagens alojadas ilimitadas: a utilização do serviço e o acesso às funcionalidades dependem do seu plano do Chat. É possível executar uma pré-visualização local da interface sem uma ligação ativa.
Posso começar a usar o React Chat SDK gratuitamente?
O React UI Kit inclui chamadas de voz e vídeo?
O Cloud Search está incluído no plano gratuito?
Como integro Chat SDK React com React?
Inicialize o provider documentado e componha os componentes ligados. Alinhe as subscrições e a limpeza com o ciclo de vida do React e teste a navegação e montagens repetidas na aplicação real.
Como testo Chat SDK React antes de lançar a minha aplicação?
Confira login, prontidão do SDK, eventos de envio e recebimento e estado das mensagens após reconectar.
Como personalizo a interface de Chat SDK React?
Envolva os componentes de chat em UIKitProvider e defina theme="light" ou theme="dark". Um componente filho pode usar useUIKit().setTheme para alternar a aparência; o hook precisa ser executado dentro do contexto do provider. Para cards de produtos, forneça um renderizador de mensagens personalizado por MessageList.messageRenderers. Mantenha uma alternativa para payloads não reconhecidos e deixe sua aplicação cuidar da consulta de produtos e do checkout, sem tratá-los como recursos do Chat.