Installation

pnpm dlx kliping@latest add ai-thread-list

Usage

Letakkan di samping AiThread, di dalam AuiProvider yang sama:

<script setup lang="ts">
import { AISDKChat } from '@assistant-ui/ai-sdk'
import { AuiConfig, AuiProvider } from '@assistant-ui/vue'
import { AiThread } from '@/components/ui/ai-chat'
import { AiThreadList } from '@/components/ui/ai-thread-list'

const config = AuiConfig({ threads: AISDKChat() })
</script>

<template>
  <AuiProvider :config="config">
    <div class="flex h-dvh">
      <AiThreadList class="w-64 border-r p-2" />
      <AiThread class="flex-1" />
    </div>
  </AuiProvider>
</template>

Pencarian dan menu arsip/hapus muncul bila runtime-nya mendukung banyak percakapan.

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias @ — disiapkan kliping init
npm packages	@assistant-ui/vue@^0.0.4, @lucide/vue@^1.31.0, reka-ui@^2.10.3
Files	components/ui/ai-thread-list/ai-thread-list.vue components/ui/ai-thread-list/index.ts

API Reference

Data attribute	Value
[data-slot]	"aui_thread-list-root"
[data-active]	set at runtime

CSS Variables

Token tema yang dibaca komponen ini — ubah nilainya di CSS global (:root dan .dark, lihat Theming) untuk mengubah tampilannya tanpa menyentuh komponennya: --accent, --accent-foreground, --background, --border, --destructive, --input, --muted, --muted-foreground, --popover, --popover-foreground, --radius, --ring.

Credits

Berasal dari assistant-ui (MIT, Copyright (c) 2026 AgentbaseAI Inc.). Rantai lengkapnya di Credits.