@thanhhuynhk17/custom-agent-chat-ui

v1.0.1

Published

23 days ago

Reusable AgentChatUI component with LangGraph + Dexie support

Downloads

241

0High
0Medium
0Low

thanhhuynhk17

Custom Agent Chat UI

Thư viện React Chat UI cao cấp theo phong cách "Ethereal Workspace", tích hợp sẵn hỗ trợ cho LangGraph và Dexie.js.

🚀 Cài đặt

npm install @thanhhuynhk17/custom-agent-chat-ui

🛠 Thiết lập bắt buộc

Để giao diện hiển thị đúng và đầy đủ hiệu ứng, bạn bắt buộc phải thực hiện các bước sau:

1. Import CSS

Trong file entry point của ứng dụng (ví dụ main.tsx hoặc App.tsx):

import "@thanhhuynhk17/custom-agent-chat-ui/style.css";

2. Nạp Fonts & Icons

Thêm các liên kết sau vào thẻ <head> trong file index.html của bạn:

<!-- Inter Font -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"/>

<!-- Material Symbols Icons -->
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,[email protected],0..1&display=swap" rel="stylesheet"/>

💻 Cách sử dụng

Sử dụng cơ bản

Dưới đây là cách nhúng component Chat vào ứng dụng của bạn:

import { AgentChatUI } from "@thanhhuynhk17/custom-agent-chat-ui";

function App() {
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <AgentChatUI
        apiUrl="https://your-langgraph-api.com"
        assistantId="your-agent-id"
      />
    </div>
  );
}

Sử dụng với Dexie Worker (Xử lý dữ liệu local)

Nếu Agent của bạn có khả năng truy vấn dữ liệu IndexedDB local qua Dexie:

import { AgentChatUI } from "@thanhhuynhk17/custom-agent-chat-ui";

function App() {
  const myDexieWorker = {
    execute: async (query) => { /* logic */ },
    executeWithPresignedUrl: async (query, url, name) => { /* logic */ }
  };

  return (
    <div style={{ height: '100vh' }}>
      <AgentChatUI
        apiUrl="http://localhost:2024"
        assistantId="agent"
        dexieWorker={myDexieWorker}
      />
    </div>
  );
}

🎨 Tùy chỉnh giao diện (Theming)

Thư viện đã bao gồm sẵn (bundled) toàn bộ Tailwind CSS cần thiết, do đó dự án của bạn không cần cài đặt Tailwind CSS. Bạn chỉ cần import file CSS như hướng dẫn ở trên là giao diện sẽ hoạt động hoàn hảo.

Nếu bạn muốn tùy chỉnh màu sắc, bạn có thể ghi đè các biến CSS sau trong file CSS của dự án bạn:

:root {
  /* Thay đổi màu chủ đạo */
  --lca-primary: #2d54ce;
  --lca-primary-container: #5e80fc;
  
  /* Thay đổi nền */
  --lca-surface: #f8f9ff;
  --lca-surface-container-low: #eff4ff;
}

📋 Yêu cầu hệ thống

React >= 18
Tailwind CSS (Khuyến nghị dùng v4 để đồng bộ tốt nhất)

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme