# Chat UI

> Komponen React AgentChat dan AgentProvider, sidebar yang menempel, dan sumber jawaban.

Source: https://sideagent.dev/id/docs/chat-ui

Embed chat dengan paket React `sideagent` (React 18 atau yang lebih baru). Cukup publishable key agent Anda; lihat [sideagent Cloud](https://sideagent.dev/id/docs/cloud.md).

```tsx
import { AgentChat } from "sideagent";

<AgentChat
  publishableKey="pk_live_…"
  mode="floating"   // "floating" | "sidebar"; the user can switch
  hooks={{ onTurnEnd: () => track("agent_turn") }}
/>
```

## 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.

```tsx
import { AgentProvider } from "sideagent";

<AgentProvider publishableKey="pk_live_…" mode="sidebar" defaultOpen>
  <App />
</AgentProvider>
```

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

## Sumber

Sebuah jawaban menampilkan kartu "Sources": judul source asal jawaban, dengan tautan hanya untuk URL yang Anda konfigurasi. Argumen mentah tetap tersedia di bawah "Details". Semuanya teks biasa, tidak pernah HTML.