@namphuongtechnologi/np-chat-react

React bindings — ChatProvider, hooks, adapter axios.

Nhúng chat có UI sẵn?

Dùng @namphuongtechnologi/np-chat-ui — README đó là hướng dẫn nhúng vào dự án khác.

Package này dành cho: tự build UI hoặc dùng hooks ngoài ChatApp.

Cài đặt

pnpm add @namphuongtechnologi/np-chat-react @namphuongtechnologi/np-chat-core
pnpm add react react-dom axios @tanstack/react-query

(Nếu dùng UI sẵn, cài thêm np-chat-ui — xem README UI.)

Setup tối thiểu (custom UI)

import { ChatQueryProvider, ChatProvider } from '@namphuongtechnologi/np-chat-react';

// apiClient = axios của app host (đã có auth) — library không axios.create()
export function App() {
  return (
    <ChatQueryProvider>
      <ChatProvider
        config={{
          axios: apiClient,
          currentUser: {
            id: user.id,
            name: user.displayName,
            acsId: user.acsCommunicationId,
          },
          onError: (err) => console.error(err),
        }}
      >
        {/* UI của bạn — hoặc <ChatApp /> từ np-chat-ui */}
      </ChatProvider>
    </ChatQueryProvider>
  );
}

Nguyên tắc

1. Axios từ host — auth do interceptors app
2. Bọc ChatQueryProvider — TanStack React Query
3. URL phòng — library sync ?roomId=; host không bridge router

Hooks thường dùng

import { useRooms, useJoinRoom, useMessages, useSendMessage, useRealtimeMessages } from '@namphuongtechnologi/np-chat-react';

const { data: rooms } = useRooms({ keyword: '' });
const join = useJoinRoom();
const { data: messages } = useMessages({ roomId });
const send = useSendMessage();
useRealtimeMessages({ roomId });

Mount GlobalAcsRuntime (hoặc dùng ChatApp — đã mount sẵn) để ACS toàn app.

ChatConfig

| Field | Bắt buộc | Mô tả | |-------|----------|--------| | axios | Có | Axios instance host | | currentUser.id / name | Có | User backend | | currentUser.acsId | Khuyến nghị | Realtime | | locale | Không | 'vi' | 'en' | | onError / onRoomChange | Không | Callback |

Peer dependencies

| Package | Phiên bản | |---------|-----------| | react / react-dom | >= 18 | | axios | >= 1 | | @tanstack/react-query | >= 5 |

Core trực tiếp?

Chỉ khi cần domain types / metadata / REST thuần TS — xem np-chat-core.