FUNCIONES DE CHAT PARA REACT
Funciones de React Chat SDK
Desde acciones sobre mensajes hasta contenido personalizado, elija las funciones que necesita su aplicación.
- Conversaciones individuales y grupales
- Vistas previas de mensajes recientes
- Número de conversaciones no leídas
- Texto, imágenes, audio y video
- Uso compartido de archivos en las conversaciones
- Payloads personalizados de productos o pedidos
- Copiar, citar y reenviar
- Acciones para retirar y eliminar mensajes
- Agrupación y alineación por remitente
- Selectores de imágenes, vídeos y archivos
- Acciones de entrada configurables
- Tu propio placeholder y barra de herramientas
- Temas claro y oscuro
- Vistas previas de conversación personalizadas
- Inglés, chino, japonés, coreano
- Confirmaciones de lectura: activar y configurar
- Cloud Search: complemento de pago
- Voz y vídeo: añade TUICallKit
Explorar React Chat Components
Explora la interfaz, desde la lista de conversaciones hasta el editor de mensajes.
Elige cómo funcionan los mensajes
Controle la alineación de los mensajes, agrupe los mensajes consecutivos y seleccione las acciones disponibles en cada mensaje.
const actions = useMessageActions([
'copy', 'quote', 'forward',
]);
<MessageList
alignment="two-sided"
messageAggregationTime={300}
messageActionList={actions}
/>Cree el editor de mensajes que necesita
Elija los selectores de imágenes, archivos y vídeos. Defina el marcador de posición y decida si se muestra el botón de envío.
<MessageInput
placeholder="Message your community"
autoFocus={false}
hideSendButton={false}
actions={[
'ImagePicker', 'FilePicker', 'VideoPicker',
]}
/>Pon las acciones útiles al alcance
Añade un control de configuración junto al título de la conversación. Conéctalo a tu propio panel o sistema de navegación.
const [showSettings, setShowSettings] = useState(false);
<ChatHeader
ChatHeaderRight={
<button onClick={() => setShowSettings(true)}>
Settings
</button>
}
/>Conecte a las personas con las conversaciones
Combina las listas de contactos y los detalles de perfil. Vuelve a la vista de conversación cuando un usuario empiece a enviar un mensaje.
<ContactList />
<ContactInfo
onSendMessage={() => setActiveTab('conversations')}
onEnterGroup={() => setActiveTab('conversations')}
/>Reserva espacio para la configuración de la conversación
Coloque el componente de configuración en una barra lateral o un panel deslizante. Su aplicación controla cuándo se abre y se cierra el panel.
{showSettings && (
<aside className="chat-settings">
<ChatSetting
onClose={() => setShowSettings(false)}
/>
</aside>
)}PERSONALIZACIÓN
Personaliza tu UI de chat para React
Adapta el estilo del UI Kit a tu integración de React Chat SDK y a tu propio contenido.
COMENZAR
Integra el React Chat SDK
- 01
- 02
- 03
npm install @tencentcloud/chat-uikit-react<UIKitProvider theme="light">
<ConversationList />
<Chat>
<ChatHeader />
<MessageList />
<MessageInput />
</Chat>
</UIKitProvider>Preguntas frecuentes sobre React Chat SDK
¿En qué se diferencia el React Chat SDK del React UI Kit?
¿Puedo personalizar los componentes y el diseño de los mensajes?
¿Qué UI Kit debo usar para React web, web móvil o React Native?
Usa React UI Kit para aplicaciones de navegador. La guía para web móvil (H5) utiliza componentes del paquete React como ConversationListH5 y MessageListH5. Para aplicaciones nativas de iOS y Android desarrolladas con React Native, utiliza el React Native UI Kit independiente y su guía de configuración nativa.
¿Cómo integro React Chat SDK con Next.js o SSR?
Planifica la interfaz de chat interactiva para el navegador. En Next.js App Router, aísla el código que depende del navegador en un Client Component; Next.js admite la carga dinámica solo en el cliente con ssr: false. Genera el UserSig en tu servidor. Comprueba la versión y las dependencias del UI Kit instalado, y prueba la compilación de producción, el inicio de sesión y la navegación antes del lanzamiento.
¿Qué relación existe entre el React UI Kit de código abierto y el servicio alojado de Chat?
El código fuente del React UI Kit está disponible en GitHub. Sus componentes de mensajería conectados usan Tencent RTC Chat y requieren una aplicación de Chat y usuarios autenticados. La disponibilidad del código fuente de los componentes no incluye mensajería alojada ilimitada: el uso del servicio y el acceso a funciones dependen de tu plan de Chat. Puedes ejecutar una vista previa local de la interfaz sin una conexión activa.
¿Puedo empezar a usar React Chat SDK gratis?
¿React UI Kit incluye llamadas de voz y vídeo?
¿Cloud Search está incluido en el plan gratuito?
¿Cómo integro Chat SDK React con React?
Inicializa el provider documentado y compón los componentes conectados. Ajusta las suscripciones y la limpieza al ciclo de vida de React y prueba la navegación y los montajes repetidos en tu aplicación real.
¿Cómo pruebo Chat SDK React antes de publicar mi aplicación?
Comprueba inicio de sesión, disponibilidad del SDK, eventos de envío y recepción y estado de mensajes tras reconectar.
¿Cómo personalizo la interfaz de Chat SDK React?
Envuelve los componentes de chat en UIKitProvider y establece theme="light" o theme="dark". Un componente hijo puede usar useUIKit().setTheme para cambiar la apariencia; el hook debe ejecutarse dentro del contexto del provider. Para las tarjetas de producto, proporciona un renderizador de mensajes personalizado mediante MessageList.messageRenderers. Mantén una alternativa para los payloads no reconocidos y deja que tu aplicación gestione la consulta de productos y el proceso de compra, sin tratarlos como funciones de Chat.