npm package: @oichat/ui-react
Description: OiChat React UI Components — Pre-built chat widgets for instant integration
Latest version: 0.1.1

<p align="center">
  <img src="https://oichatapi.com/og-image.png" alt="OiChat" width="100%" />
</p>

<p align="center">
  <a href="https://www.npmjs.com/package/@oichat/ui-react"><img src="https://img.shields.io/npm/v/@oichat/ui-react?color=blue" alt="npm version" /></a>
  <a href="https://www.npmjs.com/package/@oichat/ui-react"><img src="https://img.shields.io/npm/dm/@oichat/ui-react" alt="npm downloads" /></a>
  <a href="https://github.com/oichatapi/oichat-samples/tree/main/react-client"><img src="https://img.shields.io/badge/sample-React-61dafb?logo=react" alt="Sample" /></a>
  <a href="https://oichatapi.com"><img src="https://img.shields.io/badge/docs-oichatapi.com-blue" alt="Docs" /></a>
  <a href="LICENSE"><img src="https://img.shields.io/npm/l/@oichat/ui-react" alt="License" /></a>
</p>

# @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)

## Installation

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

**Requirements**: React 18+

## Quick Start

```tsx
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.

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

### OiChatRoomList

Paginated room list with unread badges and last message preview.

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

### OiChatView

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

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

### OiMessageBubble

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

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

### OiMessageInput

Message input with file/image attachment support.

```tsx
<OiMessageInput roomId="room-abc" />
```

## Theming

```tsx
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

```tsx
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

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

## Hooks

```tsx
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](https://oichatapi.com) — Full guides and API reference
- [Sample: React + Next.js](https://github.com/oichatapi/oichat-samples/tree/main/react-client) — Complete working example
- [Core SDK (@oichat/sdk)](https://www.npmjs.com/package/@oichat/sdk) — Underlying chat SDK
- [Server SDK (@oichat/server-sdk)](https://www.npmjs.com/package/@oichat/server-sdk) — Backend token issuance & room management

---

## 한국어

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

### 설치

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

**요구사항**: React 18+

### 빠른 시작

```tsx
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` 등)

### 관련 링크

- [공식 문서](https://oichatapi.com) — 가이드 및 API 레퍼런스
- [샘플: React + Next.js](https://github.com/oichatapi/oichat-samples/tree/main/react-client) — 전체 동작 예제
- [코어 SDK (@oichat/sdk)](https://www.npmjs.com/package/@oichat/sdk) — 기반 채팅 SDK
- [서버 SDK (@oichat/server-sdk)](https://www.npmjs.com/package/@oichat/server-sdk) — 백엔드 토큰 발급 및 방 관리

## License

MIT