@xhub-ui/chat-lite-widget

React UI widget for @xhub-ui/chat-lite. It ships a default 1-on-1 chat interface and lets consumers override each major UI region with render props.

Usage

import { ChatLiteWidget } from '@xhub-ui/chat-lite-widget';
import '@xhub-ui/chat-lite-widget/styles.css';

export function Chat() {
  return (
    <ChatLiteWidget
      options={{
        baseUrl: 'https://gw-messages.blocktrend.xyz',
        accessToken: 'token',
        realtime: {
          url: 'wss://centrifugo-sb-message.blocktrend.xyz/connection/websocket',
        },
      }}
    />
  );
}

Custom renderers

<ChatLiteWidget
  options={options}
  renderRoomList={(rooms, ctx) => (
    <>
      {rooms.map(room => (
        <button key={room.id} onClick={() => ctx.selectRoom(room)}>
          {room.name || room.id}
        </button>
      ))}
    </>
  )}
/>

If a renderer is omitted, the widget falls back to the built-in UI for that area.