Chat UI

Komponen React AgentChat dan AgentProvider, sidebar yang menempel, dan tampilan hasil.

Paket sideagent mengekspor komponen React. React 18 atau yang lebih baru adalah peer dependency opsional.

import { AgentChat } from "sideagent";

<AgentChat
  endpoint="/agent"
  mode="floating"   // "floating" | "sidebar"; the user can switch
  hooks={{ onInvalidate: (tag) => tag === "invoices" && refetchInvoices() }}
/>

Sidebar yang menempel

Bungkus aplikasi Anda dengan AgentProvider agar chat menempel di sisi kanan, di samping aplikasi, bukan menutupinya. Komponen ini menerima prop yang sama dengan AgentChat. Pengguna menyeret tepi kiri panel, atau menggunakan tombol panah padanya, untuk mengubah ukuran; lebarnya diingat.

import { AgentProvider } from "sideagent";

<AgentProvider endpoint="/agent" mode="sidebar" defaultOpen>
  <App />
</AgentProvider>

Komponen apa pun di bawah AgentProvider dapat memanggil useAgent() untuk mendapatkan { open, setOpen }, misalnya untuk tombol "Tanya asisten" di toolbar.

Hasil

Hasil tool ditampilkan sebagai tampilan yang mudah dibaca. Array objek menjadi tabel (hingga 50 baris dan 8 kolom), objek menjadi field berlabel, dan error mendapat tampilan tersendiri. JSON mentah tetap tersedia di bawah "Details". Semuanya teks biasa, tidak pernah HTML. Ganti tampilan per operation:

<AgentChat resultRenderers={{ listInvoices: ({ result }) => <MyInvoiceTable rows={result as any[]} /> }} />