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.
src/components/local-chatbot.tsx
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/ask", 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) console.log("Current Chat ID:", 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 () => { 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 () => { await db.chats.clear()
const newChatId = crypto.randomUUID() await db.chats.add({ id: newChatId, messages: [] }) await settings.set("currentChatId", newChatId) setCurrentChatId(newChatId) } return ( <Chatbot endpoint={endpoint} strings={strings} icon={icon} messages={messages} setMessages={setMessages} newChat={newChat} /> )}src/lib/local-chatbot.ts
import type { Message } from "@/registry/new-york/chatbot/components/chatbot/chatbot"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 "@chatbot-tools/chatbot"