@oichat/ui-react

Pre-built React chat UI components — drop-in room list, chat view, message bubbles, and more. Works with @oichat/sdk.

한국어 | English

Installation

npm install @oichat/ui-react @oichat/sdk
# or
yarn add @oichat/ui-react @oichat/sdk

Requirements: React 18+

Quick Start

import { OiChat } from "@oichat/sdk";
import { OiChatProvider, OiChatRoomList, OiChatView } from "@oichat/ui-react";
import "@oichat/ui-react/styles.css";

function App() {
  const [oichat] = useState(() => OiChat.init(config, { userId: "user-123" }));
  const [roomId, setRoomId] = useState<string | null>(null);

  return (
    <OiChatProvider client={oichat}>
      <OiChatRoomList onRoomSelect={(room) => setRoomId(room.room_id)} />
      {roomId && <OiChatView roomId={roomId} />}
    </OiChatProvider>
  );
}

Components

OiChatProvider

Wraps your app and provides SDK context to all child components.

<OiChatProvider client={oichat} theme={darkTheme} features={customFeatures}>
  {children}
</OiChatProvider>

OiChatRoomList

Paginated room list with unread badges and last message preview.

<OiChatRoomList onRoomSelect={(room) => setRoomId(room.room_id)} />

OiChatView

Full chat screen with real-time messaging, read receipts, and typing indicators.

<OiChatView roomId="room-abc" onBack={() => setRoomId(null)} />

OiMessageBubble

Individual message bubble supporting text, image, file, and system messages.

<OiMessageBubble message={message} isMine={true} />

OiMessageInput

Message input with file/image attachment support.

<OiMessageInput roomId="room-abc" />

Theming

import { lightTheme, darkTheme, mergeTheme } from "@oichat/ui-react";

// Built-in themes
<OiChatProvider theme={darkTheme}>

// Custom theme
const customTheme = mergeTheme(lightTheme, {
  colors: {
    primary: "#6366f1",
    bubbleMine: "#e0e7ff",
  },
});

Feature Toggles

import { defaultFeatures, mergeFeatures } from "@oichat/ui-react";

const features = mergeFeatures(defaultFeatures, {
  typing: true,
  readReceipt: true,
  fileUpload: true,
  imageUpload: true,
  messageEdit: true,
  messageDelete: true,
});

<OiChatProvider features={features}>

Modals & Overlays

import {
  OiActionSheet,
  OiConfirmModal,
  OiEditModal,
  OiRenameModal,
  OiParticipantsModal,
  OiImageViewer,
  OiAttachMenu,
} from "@oichat/ui-react";

Hooks

import {
  useOiChat,
  useConnection,
  useRooms,
  useMessages,
} from "@oichat/ui-react";

// Access SDK instance
const { client } = useOiChat();

// Connection state
const { state, isConnected } = useConnection();

// Room list with pagination
const { rooms, loadMore, hasMore } = useRooms();

// Messages for a room
const { messages, send, loadMore } = useMessages(roomId);

Links

• Documentation — Full guides and API reference
• Sample: React + Next.js — Complete working example
• Core SDK (@oichat/sdk) — Underlying chat SDK
• Server SDK (@oichat/server-sdk) — Backend token issuance & room management

한국어

즉시 사용 가능한 React 채팅 UI 컴포넌트 — 채팅방 목록, 채팅 화면, 메시지 버블 등. @oichat/sdk와 함께 사용합니다.

설치

npm install @oichat/ui-react @oichat/sdk
# 또는
yarn add @oichat/ui-react @oichat/sdk

요구사항: React 18+

빠른 시작

import { OiChat } from "@oichat/sdk";
import { OiChatProvider, OiChatRoomList, OiChatView } from "@oichat/ui-react";
import "@oichat/ui-react/styles.css";

function App() {
  const [oichat] = useState(() => OiChat.init(config, { userId: "user-123" }));
  const [roomId, setRoomId] = useState<string | null>(null);

  return (
    <OiChatProvider client={oichat}>
      <OiChatRoomList onRoomSelect={(room) => setRoomId(room.room_id)} />
      {roomId && <OiChatView roomId={roomId} />}
    </OiChatProvider>
  );
}

제공 컴포넌트

| 컴포넌트 | 설명 | | ----------------------- | ------------------------------------------ | | OiChatProvider | SDK 컨텍스트 제공, 테마/기능 설정 | | OiChatRoomList | 채팅방 목록 (페이지네이션, 안읽은 수 뱃지) | | OiChatView | 채팅 화면 (실시간 메시징, 읽음 확인) | | OiMessageBubble | 메시지 버블 (텍스트, 이미지, 파일, 시스템) | | OiMessageInput | 메시지 입력 (파일/이미지 첨부) | | OiTypingIndicator | 타이핑 표시기 | | OiConnectionIndicator | 연결 상태 표시 | | OiAvatar | 사용자 아바타 |

테마 지원

• lightTheme / darkTheme 기본 제공
• mergeTheme()으로 커스텀 테마 생성
• 11개 기능 토글 (typing, readReceipt, fileUpload 등)

관련 링크

• 공식 문서 — 가이드 및 API 레퍼런스
• 샘플: React + Next.js — 전체 동작 예제
• 코어 SDK (@oichat/sdk) — 기반 채팅 SDK
• 서버 SDK (@oichat/server-sdk) — 백엔드 토큰 발급 및 방 관리

License

MIT