@openturn/plugin-chat

​

Install

bun add @openturn/plugin-chat @openturn/plugins

​

Compose into your game

import { withPlugins } from "@openturn/plugins";
import { chatPlugin } from "@openturn/plugin-chat";

export const game = withPlugins(
  {
    maxPlayers: 2,
    setup: () => ({ board: emptyBoard() }),
    moves: ({ move }) => ({ /* ... */ }),
    views: { public: ({ G }) => ({ board: G.board }) },
  },
  [chatPlugin],
);

• A G.plugins.chat: ChatSlice slice initialized to { messages: [] }.
• A namespaced chat__send move dispatchable by every seated player.
• Auto-merge of the chat slice into both views.public and views.player (when declared) so clients receive history without extra wiring.

​

Server-side surface

​

chatPlugin

​

chat__send move

match.dispatch.chat__send({ text: "hi", displayName: "Alice" });

• Empty / whitespace-only text rejects with reason: "empty_message".
• text is trimmed and capped to MAX_MESSAGE_LENGTH (500 chars).
• displayName is trimmed and capped to MAX_DISPLAY_NAME_LENGTH (40 chars). Empty falls back to Player {playerID}.
• History is capped to MAX_HISTORY (200 messages); older entries fall off the front.

{ authorPlayerID: string; authorDisplayName: string; text: string }

​

Constants

​

Types

• ChatMessage — { authorPlayerID, authorDisplayName, text }.
• ChatSlice — { messages: readonly ChatMessage[] }.
• ChatSendArgs — { text: string; displayName: string }.
• ChatPluginEvent — "chat__send".

​

React widget — ./react

import { ChatBubble } from "@openturn/plugin-chat/react";
import { useRoom } from "./bindings"; // your createOpenturnBindings() output

export function App() {
  const room = useRoom();
  return (
    <main>
      {/* ...your game UI... */}
      <ChatBubble room={room} />
    </main>
  );
}

​

Props

interface ChatBubbleProps {
  room: ChatHostRoom;                  // pass `useRoom()` from @openturn/react
  displayName?: string | null;         // override the local user's display name
  portalContainer?: HTMLElement | null; // defaults to document.body
}

​

Display name resolution

1. Explicit displayName prop.
2. room.userName.
3. Player {userID slice} from room.userID.
4. Player {playerID} (or Spectator when no seat).

​

Behavior

• Sending: Enter to submit (Shift+Enter is reserved for IME composition; the input is intentionally not a <form> to survive sandboxed iframes that omit allow-forms).
• Spectators (playerID === null) can read but not send.
• Unread badge: messages received while the panel is closed bump a counter; opening the panel marks them seen.
• Auto-scroll on new messages; auto-focus the input on open.
• Server rejections surface as inline error text under the composer (humanizeChatError maps empty_message, inactive_player, not_connected to user-friendly copy).

​

Styling

​

Example

​

See also

• @openturn/plugins — the composition surface (withPlugins, definePlugin).
• Reference: @openturn/react — createOpenturnBindings and useRoom.