LocalChatbot
Open the chatbot by clicking the button at the bottom right corner.
import LocalChatbot from "@/registry/new-york/chatbot/components/chatbot/local-chatbot"
const title = "Chatbot Assistant"const promptSuggestions = [ "What's the weather like today?", "Tell me a joke.", "How do I bake a chocolate cake?", "Explain quantum computing in simple terms.",]
export default function Default() { return <LocalChatbot strings={{ title, promptSuggestions }} />}Installation
Section titled “Installation”This component relies on other items which must be installed first.
Install the following dependencies.
Copy and paste the following code into your project.
import { useEffect, useState } from "react"
import type { ChatbotProps, Message,} from "@/registry/new-york/chatbot/components/chatbot/chatbot"import Chatbot from "@/registry/new-york/chatbot/components/chatbot/chatbot"import { db, settings } from "@/registry/new-york/chatbot/lib/chatbot/db"import { useLiveQuery } from "dexie-react-hooks"
type Props = Omit<ChatbotProps, "messages" | "setMessages" | "newChat">
export default function LocalChatbot({ endpoint = "http://localhost:8000", strings, icon,}: Props) { const [currentChatId, setCurrentChatId] = useState<string | null>(null)
useEffect(() => { ;(async () => { let storedChatId = await settings.get("currentChatId")
if (!storedChatId) { storedChatId = crypto.randomUUID() await db.chats.add({ id: storedChatId, messages: [] }) await settings.set("currentChatId", storedChatId) }
setCurrentChatId(storedChatId) })() }, [])
const messages = useLiveQuery(async () => { if (!currentChatId) return [] const chat = await db.chats.get(currentChatId) return chat?.messages ?? [] }, [currentChatId]) ?? []
const setMessages: React.Dispatch< React.SetStateAction<Message[]> > = value => { if (!currentChatId) return ;(async () => { await db.transaction("rw", db.chats, async () => { const chat = await db.chats.get(currentChatId) const prev = chat?.messages ?? []
const next = typeof value === "function" ? value(prev) : value
await db.chats.update(currentChatId, { messages: next }) }) })() }
const newChat = async () => { const newChatId = crypto.randomUUID() await db.chats.add({ id: newChatId, messages: [] }) await settings.set("currentChatId", newChatId) setCurrentChatId(newChatId) } return ( // Keyed by the local chat id so switching chats remounts the widget: // `currentChatId` only identifies which transcript is stored in // IndexedDB — the server-side chat id lives inside `Chatbot`'s own // hook state (learned from the stream's `message_start` event) and has // no relation to it, so a fresh mount is what starts a fresh server // chat for the newly-selected local one. <Chatbot key={currentChatId} endpoint={endpoint} strings={strings} icon={icon} messages={messages} setMessages={setMessages} newChat={newChat} /> )}import type { Message } from "@/registry/new-york/chatbot/lib/chatbot/types"import { Dexie, type EntityTable } from "dexie"
interface Chat { id: string messages: Message[]}
interface Setting { key: string value: string | null}
interface ChatSettings { currentChatId: string | null}
export const db = new Dexie("ChatsDatabase") as Dexie & { chats: EntityTable<Chat, "id"> settings: EntityTable<Setting, "key">}
db.version(1).stores({ chats: "&id", settings: "&key",})
export const settings = { async get<K extends keyof ChatSettings>( key: K, ): Promise<ChatSettings[K] | null> { const row = await db.settings.get(key) return row?.value ?? null },
async set<K extends keyof ChatSettings>( key: K, value: ChatSettings[K], ): Promise<void> { await db.settings.put({ key, value }) },}Update the import paths to match your project setup.
import { LocalChatbot } from "@fastrag-ui/chatbot"LocalChatbot still talks to a real FastRAG backend for generation — endpoint
is the same backend base URL Chatbot takes, and
every generation is a real streamed answer. What’s local is only the
transcript: each conversation’s messages are persisted in the browser’s
IndexedDB (via dexie) rather than kept in React state, so a reload doesn’t
lose the chat. Switching to a different stored chat remounts the underlying
Chatbot (keyed by the local chat id), which starts a fresh server-side chat
for it — the local chat id is a client-side journal key only and has no
relation to the server’s own chat id.