Chat room¶

UI · v0.1.0

A chat log with history on join and a composer, for any server speaking the chat contract. Shows the room's roster through the presence UI kit.


Install	`copit add @chanx-kit-ui/chat`
Or with shadcn	`npx shadcn add https://huynguyengl99.github.io/chanx-kit/r/chat.json`
Contract	`chat@1`
Works with	`room-chat`
Requires UI kits	`presence`
Frameworks	`react` (the core is framework-free)
npm packages	`@chanx-js/client@^0.1.2`
Source	ui/chat

A chat log and composer for any server speaking chat@1, such as the room-chat server kit. History arrives on join; live messages append, each shown once. Installing it also installs the presence UI kit, whose roster ChatRoom can show.

copit add @chanx-kit-ui/chat

React¶

import { ChatRoom, useChat } from '@/chanx-kit/chat/react';
import { usePresence } from '@/chanx-kit/presence/react';
import '@/chanx-kit/chat/chat.css';
import '@/chanx-kit/presence/presence.css';
import { room } from '@/generated';

export function Room({ name, me }: { name: string; me: string }) {
  const options = { params: { room: name } };
  // Same channel and options, so both hooks share one socket.
  const { entries, status, send } = useChat(room, room.topics.chatTopic.with({ room: name }), options);
  const { members } = usePresence(room, room.topics.presenceTopic.with({ scope: name }), options);
  return <ChatRoom entries={entries} status={status} onSend={send} members={members} self={me} />;
}

A message shows once the server publishes it back, so what is on screen is what was saved. requestBacklog(limit) asks for history again.

Without a framework¶

import { connectChat } from '@/chanx-kit/chat';

const lobby = connectChat(client, room, room.topics.chatTopic.with({ room: 'lobby' }));
lobby.log.subscribe(() => render(lobby.log.getSnapshot().entries));
lobby.start();
lobby.send('hello');

Styling¶

chat.css is the default look, driven by the shared --chanx-* variables.