## Demo
View the latest demo [here](https://x.com/mckaywrigley/status/1738273242283151777?s=20).
## Updates
Hey everyone! I've heard your feedback and am working hard on a big update.
Things like simpler deployment, better backend compatibility, and improved mobile layouts are on their way.
Be back soon.
-- Mckay
## Official Hosted Version
Use Chatbot UI without having to host it yourself!
Find the official hosted version of Chatbot UI [here](https://chatbotui.com).
## Sponsor
If you find Chatbot UI useful, please consider [sponsoring](https://github.com/sponsors/mckaywrigley) me to support my open-source work :)
## Issues
We restrict "Issues" to actual issues related to the codebase.
We're getting excessive amounts of issues that amount to things like feature requests, cloud provider issues, etc.
If you are having issues with things like setup, please refer to the "Help" section in the "Discussions" tab above.
Issues unrelated to the codebase will likely be closed immediately.
## Discussions
We highly encourage you to participate in the "Discussions" tab above!
Discussions are a great place to ask questions, share ideas, and get help.
Odds are if you have a question, someone else has the same question.
## Legacy Code
Chatbot UI was recently updated to its 2.0 version.
The code for 1.0 can be found on the `legacy` branch.
## Updating
In your terminal at the root of your local Chatbot UI repository, run:
```bash
npm run update
```
If you run a hosted instance you'll also need to run:
```bash
npm run db-push
```
to apply the latest migrations to your live database.
## Local Quickstart
Follow these steps to get your own Chatbot UI instance running locally.
You can watch the full video tutorial [here](https://www.youtube.com/watch?v=9Qq3-7-HNgw).
### 1. Clone the Repo
```bash
git clone https://github.com/mckaywrigley/chatbot-ui.git
```
### 2. Install Dependencies
Open a terminal in the root directory of your local Chatbot UI repository and run:
```bash
npm install
```
### 3. Install Supabase & Run Locally
#### Why Supabase?
Previously, we used local browser storage to store data. However, this was not a good solution for a few reasons:
- Security issues
- Limited storage
- Limits multi-modal use cases
We now use Supabase because it's easy to use, it's open-source, it's Postgres, and it has a free tier for hosted instances.
We will support other providers in the future to give you more options.
#### 1. Install Docker
You will need to install Docker to run Supabase locally. You can download it [here](https://docs.docker.com/get-docker) for free.
#### 2. Install Supabase CLI
**MacOS/Linux**
```bash
brew install supabase/tap/supabase
```
**Windows**
```bash
scoop bucket add supabase https://github.com/supabase/scoop-bucket.git
scoop install supabase
```
#### 3. Start Supabase
In your terminal at the root of your local Chatbot UI repository, run:
```bash
supabase start
```
### 4. Fill in Secrets
#### 1. Environment Variables
In your terminal at the root of your local Chatbot UI repository, run:
```bash
cp .env.local.example .env.local
```
Get the required values by running:
```bash
supabase status
```
Note: Use `API URL` from `supabase status` for `NEXT_PUBLIC_SUPABASE_URL`
Now go to your `.env.local` file and fill in the values.
If the environment variable is set, it will disable the input in the user settings.
#### 2. SQL Setup
In the 1st migration file `supabase/migrations/20240108234540_setup.sql` you will need to replace 2 values with the values you got above:
- `project_url` (line 53): `http://supabase_kong_chatbotui:8000` (default) can remain unchanged if you don't change your `project_id` in the `config.toml` file
- `service_role_key` (line 54): You got this value from running `supabase status`
This prevents issues with storage files not being deleted properly.
### 5. Install Ollama (optional for local models)
Follow the instructions [here](https://github.com/jmorganca/ollama#macos).
### 6. Run app locally
In your terminal at the root of your local Chatbot UI repository, run:
```bash
npm run chat
```
Your local instance of Chatbot UI should now be running at [http://localhost:3000](http://localhost:3000). Be sure to use a compatible node version (i.e. v18).
You can view your backend GUI at [http://localhost:54323/project/default/editor](http://localhost:54323/project/default/editor).
## Hosted Quickstart
Follow these steps to get your own Chatbot UI instance running in the cloud.
Video tutorial coming soon.
### 1. Follow Local Quickstart
Repeat steps 1-4 in "Local Quickstart" above.
You will want separate repositories for your local and hosted instances.
Create a new repository for your hosted instance of Chatbot UI on GitHub and push your code to it.
### 2. Setup Backend with Supabase
#### 1. Create a new project
Go to [Supabase](https://supabase.com/) and create a new project.
#### 2. Get Project Values
Once you are in the project dashboard, click on the "Project Settings" icon tab on the far bottom left.
Here you will get the values for the following environment variables:
- `Project Ref`: Found in "General settings" as "Reference ID"
- `Project ID`: Found in the URL of your project dashboard (Ex: https://supabase.com/dashboard/project/{selectedWorkspace?.name}
Help under construction.
{session ? {children} : children}
Chatbot UI
Start Chatting
{renderStep(currentStep)}
)
}
================================================
FILE: app/api/assistants/openai/route.ts
================================================
import { checkApiKey, getServerProfile } from "@/lib/server/server-chat-helpers"
import { ServerRuntime } from "next"
import OpenAI from "openai"
export const runtime: ServerRuntime = "edge"
export async function GET() {
try {
const profile = await getServerProfile()
checkApiKey(profile.openai_api_key, "OpenAI")
const openai = new OpenAI({
apiKey: profile.openai_api_key || "",
organization: profile.openai_organization_id
})
const myAssistants = await openai.beta.assistants.list({
limit: 100
})
return new Response(JSON.stringify({ assistants: myAssistants.data }), {
status: 200
})
} catch (error: any) {
const errorMessage = error.error?.message || "An unexpected error occurred"
const errorCode = error.status || 500
return new Response(JSON.stringify({ message: errorMessage }), {
status: errorCode
})
}
}
================================================
FILE: app/api/chat/anthropic/route.ts
================================================
import { CHAT_SETTING_LIMITS } from "@/lib/chat-setting-limits"
import { checkApiKey, getServerProfile } from "@/lib/server/server-chat-helpers"
import { getBase64FromDataURL, getMediaTypeFromDataURL } from "@/lib/utils"
import { ChatSettings } from "@/types"
import Anthropic from "@anthropic-ai/sdk"
import { AnthropicStream, StreamingTextResponse } from "ai"
import { NextRequest, NextResponse } from "next/server"
export const runtime = "edge"
export async function POST(request: NextRequest) {
const json = await request.json()
const { chatSettings, messages } = json as {
chatSettings: ChatSettings
messages: any[]
}
try {
const profile = await getServerProfile()
checkApiKey(profile.anthropic_api_key, "Anthropic")
let ANTHROPIC_FORMATTED_MESSAGES: any = messages.slice(1)
ANTHROPIC_FORMATTED_MESSAGES = ANTHROPIC_FORMATTED_MESSAGES?.map(
(message: any) => {
const messageContent =
typeof message?.content === "string"
? [message.content]
: message?.content
return {
...message,
content: messageContent.map((content: any) => {
if (typeof content === "string") {
// Handle the case where content is a string
return { type: "text", text: content }
} else if (
content?.type === "image_url" &&
content?.image_url?.url?.length
) {
return {
type: "image",
source: {
type: "base64",
media_type: getMediaTypeFromDataURL(content.image_url.url),
data: getBase64FromDataURL(content.image_url.url)
}
}
} else {
return content
}
})
}
}
)
const anthropic = new Anthropic({
apiKey: profile.anthropic_api_key || ""
})
try {
const response = await anthropic.messages.create({
model: chatSettings.model,
messages: ANTHROPIC_FORMATTED_MESSAGES,
temperature: chatSettings.temperature,
system: messages[0].content,
max_tokens:
CHAT_SETTING_LIMITS[chatSettings.model].MAX_TOKEN_OUTPUT_LENGTH,
stream: true
})
try {
const stream = AnthropicStream(response)
return new StreamingTextResponse(stream)
} catch (error: any) {
console.error("Error parsing Anthropic API response:", error)
return new NextResponse(
JSON.stringify({
message:
"An error occurred while parsing the Anthropic API response"
}),
{ status: 500 }
)
}
} catch (error: any) {
console.error("Error calling Anthropic API:", error)
return new NextResponse(
JSON.stringify({
message: "An error occurred while calling the Anthropic API"
}),
{ status: 500 }
)
}
} catch (error: any) {
let errorMessage = error.message || "An unexpected error occurred"
const errorCode = error.status || 500
if (errorMessage.toLowerCase().includes("api key not found")) {
errorMessage =
"Anthropic API Key not found. Please set it in your profile settings."
} else if (errorCode === 401) {
errorMessage =
"Anthropic API Key is incorrect. Please fix it in your profile settings."
}
return new NextResponse(JSON.stringify({ message: errorMessage }), {
status: errorCode
})
}
}
================================================
FILE: app/api/chat/azure/route.ts
================================================
import { checkApiKey, getServerProfile } from "@/lib/server/server-chat-helpers"
import { ChatAPIPayload } from "@/types"
import { OpenAIStream, StreamingTextResponse } from "ai"
import OpenAI from "openai"
import { ChatCompletionCreateParamsBase } from "openai/resources/chat/completions.mjs"
export const runtime = "edge"
export async function POST(request: Request) {
const json = await request.json()
const { chatSettings, messages } = json as ChatAPIPayload
try {
const profile = await getServerProfile()
checkApiKey(profile.azure_openai_api_key, "Azure OpenAI")
const ENDPOINT = profile.azure_openai_endpoint
const KEY = profile.azure_openai_api_key
let DEPLOYMENT_ID = ""
switch (chatSettings.model) {
case "gpt-3.5-turbo":
DEPLOYMENT_ID = profile.azure_openai_35_turbo_id || ""
break
case "gpt-4-turbo-preview":
DEPLOYMENT_ID = profile.azure_openai_45_turbo_id || ""
break
case "gpt-4-vision-preview":
DEPLOYMENT_ID = profile.azure_openai_45_vision_id || ""
break
default:
return new Response(JSON.stringify({ message: "Model not found" }), {
status: 400
})
}
if (!ENDPOINT || !KEY || !DEPLOYMENT_ID) {
return new Response(
JSON.stringify({ message: "Azure resources not found" }),
{
status: 400
}
)
}
const azureOpenai = new OpenAI({
apiKey: KEY,
baseURL: `${ENDPOINT}/openai/deployments/${DEPLOYMENT_ID}`,
defaultQuery: { "api-version": "2023-12-01-preview" },
defaultHeaders: { "api-key": KEY }
})
const response = await azureOpenai.chat.completions.create({
model: DEPLOYMENT_ID as ChatCompletionCreateParamsBase["model"],
messages: messages as ChatCompletionCreateParamsBase["messages"],
temperature: chatSettings.temperature,
max_tokens: chatSettings.model === "gpt-4-vision-preview" ? 4096 : null, // TODO: Fix
stream: true
})
const stream = OpenAIStream(response)
return new StreamingTextResponse(stream)
} catch (error: any) {
const errorMessage = error.error?.message || "An unexpected error occurred"
const errorCode = error.status || 500
return new Response(JSON.stringify({ message: errorMessage }), {
status: errorCode
})
}
}
================================================
FILE: app/api/chat/custom/route.ts
================================================
import { Database } from "@/supabase/types"
import { ChatSettings } from "@/types"
import { createClient } from "@supabase/supabase-js"
import { OpenAIStream, StreamingTextResponse } from "ai"
import { ServerRuntime } from "next"
import OpenAI from "openai"
import { ChatCompletionCreateParamsBase } from "openai/resources/chat/completions.mjs"
export const runtime: ServerRuntime = "edge"
export async function POST(request: Request) {
const json = await request.json()
const { chatSettings, messages, customModelId } = json as {
chatSettings: ChatSettings
messages: any[]
customModelId: string
}
try {
const supabaseAdmin = createClient
{filteredAssistants.length === 0 ? (
)}
)
}
================================================
FILE: components/chat/chat-command-input.tsx
================================================
import { ChatbotUIContext } from "@/context/context"
import { FC, useContext } from "react"
import { AssistantPicker } from "./assistant-picker"
import { usePromptAndCommand } from "./chat-hooks/use-prompt-and-command"
import { FilePicker } from "./file-picker"
import { PromptPicker } from "./prompt-picker"
import { ToolPicker } from "./tool-picker"
interface ChatCommandInputProps {}
export const ChatCommandInput: FC
No matching assistants.
) : (
<>
{filteredAssistants.map((item, index) => (
{
itemsRef.current[index] = ref
}}
tabIndex={0}
className="hover:bg-accent focus:bg-accent flex cursor-pointer items-center rounded p-2 focus:outline-none"
onClick={() =>
callSelectAssistant(item as Tables<"assistants">)
}
onKeyDown={getKeyDownHandler(index)}
>
{item.image_path ? (
image.path === item.image_path
)?.url || ""
}
alt={item.name}
width={32}
height={32}
className="rounded"
/>
) : (
))}
)}
{item.name}
{item.description || "No description."}
{messageImages.map((image, index) => (
{
setSelectedImage(image)
setShowPreview(true)
}}
/>
{
e.stopPropagation()
setNewMessageImages(
newMessageImages.filter(
f => f.messageId !== image.messageId
)
)
setChatImages(
chatImages.filter(f => f.messageId !== image.messageId)
)
}}
/>
))}
{combinedChatFiles.map((file, index) =>
file.id === "loading" ? (
{file.name}
{file.type}
getLinkAndView(file)}
>
{
e.stopPropagation()
setNewMessageFiles(
newMessageFiles.filter(f => f.id !== file.id)
)
setChatFiles(chatFiles.filter(f => f.id !== file.id))
}}
/>
)
)}
{(() => {
let fileExtension = file.type.includes("/")
? file.type.split("/")[1]
: file.type
switch (fileExtension) {
case "pdf":
return
{file.name}
Show Help
⌘
Shift
/
Show Workspaces
⌘
Shift
;
New Chat
⌘
Shift
O
Focus Chat
⌘
Shift
L
Toggle Files
⌘
Shift
F
Toggle Retrieval
⌘
Shift
E
Open Settings
⌘
Shift
I
Open Quick Settings
⌘
Shift
P
Toggle Sidebar
⌘
Shift
S
setSelectedTools(
selectedTools.filter(
selectedTool => selectedTool.id !== tool.id
)
)
}
>
))}
{selectedAssistant && (
{tool.name}
{selectedAssistant.image_path && (
img.path === selectedAssistant.image_path
)?.base64
}
width={28}
height={28}
alt={selectedAssistant.name}
/>
)}
)}
Talking to {selectedAssistant.name}
{isGenerating ? (
{
if (!userInput) return
handleSendMessage(userInput, chatMessages, false)
}}
size={30}
/>
)}
Chat Info
Model: {selectedChat.model}
Prompt: {selectedChat.prompt}
Temperature: {selectedChat.temperature}
Context Length: {selectedChat.context_length}
Profile Context:{" "}
{selectedChat.include_profile_context
? "Enabled"
: "Disabled"}
{" "}
Workspace Instructions:{" "}
{selectedChat.include_workspace_instructions
? "Enabled"
: "Disabled"}
Embeddings Provider: {selectedChat.embeddings_provider}
{selectedChat?.name || "Chat"}
{filteredFiles.length === 0 && filteredCollections.length === 0 ? (
)}
)
}
================================================
FILE: components/chat/prompt-picker.tsx
================================================
import { ChatbotUIContext } from "@/context/context"
import { Tables } from "@/supabase/types"
import { FC, useContext, useEffect, useRef, useState } from "react"
import { Button } from "../ui/button"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog"
import { Label } from "../ui/label"
import { TextareaAutosize } from "../ui/textarea-autosize"
import { usePromptAndCommand } from "./chat-hooks/use-prompt-and-command"
interface PromptPickerProps {}
export const PromptPicker: FC
No matching files.
) : (
<>
{[...filteredFiles, ...filteredCollections].map((item, index) => (
{
itemsRef.current[index] = ref
}}
tabIndex={0}
className="hover:bg-accent focus:bg-accent flex cursor-pointer items-center rounded p-2 focus:outline-none"
onClick={() => {
if ("type" in item) {
handleSelectFile(item as Tables<"files">)
} else {
handleSelectCollection(item)
}
}}
onKeyDown={e =>
getKeyDownHandler(
index,
"type" in item ? "file" : "collection",
item
)(e)
}
>
{"type" in item ? (
).type} size={32} />
) : (
))}
)}
{item.name}
{item.description || "No description."}
{showPromptVariables ? (
) : filteredPrompts.length === 0 ? (
)}
)
}
================================================
FILE: components/chat/quick-setting-option.tsx
================================================
import { LLM_LIST } from "@/lib/models/llm/llm-list"
import { Tables } from "@/supabase/types"
import { IconCircleCheckFilled, IconRobotFace } from "@tabler/icons-react"
import Image from "next/image"
import { FC } from "react"
import { ModelIcon } from "../models/model-icon"
import { DropdownMenuItem } from "../ui/dropdown-menu"
interface QuickSettingOptionProps {
contentType: "presets" | "assistants"
isSelected: boolean
item: Tables<"presets"> | Tables<"assistants">
onSelect: () => void
image: string
}
export const QuickSettingOption: FC
No matching prompts.
) : (
filteredPrompts.map((prompt, index) => (
{
itemsRef.current[index] = ref
}}
tabIndex={0}
className="hover:bg-accent focus:bg-accent flex cursor-pointer flex-col rounded p-2 focus:outline-none"
onClick={() => callSelectPrompt(prompt)}
onKeyDown={getKeyDownHandler(index)}
>
))
)}
{prompt.name}
{prompt.content}
{contentType === "presets" ? (
{item.name}
{item.description && (
{item.description}
)}
{isSelected ? (
No items found.
) : (
<>
setSearch(e.target.value)}
onKeyDown={e => e.stopPropagation()}
/>
{!!(selectedPreset || selectedAssistant) && (
{filteredTools.length === 0 ? (
)}
)
}
================================================
FILE: components/icons/anthropic-svg.tsx
================================================
import { FC } from "react"
interface AnthropicSVGProps {
height?: number
width?: number
className?: string
}
export const AnthropicSVG: FC
No matching tools.
) : (
<>
{filteredTools.map((item, index) => (
{
itemsRef.current[index] = ref
}}
tabIndex={0}
className="hover:bg-accent focus:bg-accent flex cursor-pointer items-center rounded p-2 focus:outline-none"
onClick={() => callSelectTool(item as Tables<"tools">)}
onKeyDown={getKeyDownHandler(index)}
>
))}
)}
{item.name}
{item.description || "No description."}
{/* {((isAssistant && isHovering) || isLast) && (
Fork Chat
}
trigger={
{language}
{childArray}
)
}
return (
setIsOpen(true)}
>
}
/>
{1}
setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)}
onKeyDown={handleKeyDown}
>
{showImagePreview && selectedImage && (
{message.role === "system" ? (
)}
{!firstTokenReceived &&
isGenerating &&
isLast &&
message.role === "assistant" ? (
<>
{(() => {
switch (toolInUse) {
case "none":
return (
Prompt
{message.role === "assistant" ? (
messageAssistantImage ? (
{MODEL_DATA?.modelName}
}
trigger={
{message.role === "assistant"
? message.assistant_id
? assistants.find(
assistant => assistant.id === message.assistant_id
)?.name
: selectedAssistant
? selectedAssistant?.name
: MODEL_DATA?.modelName
: profile?.display_name ?? profile?.username}
Searching files...
Using {toolInUse}...
{!viewSources ? (
)}
setViewSources(true)}
>
{fileItems.length}
{fileItems.length > 1 ? " Sources " : " Source "}
from {Object.keys(fileSummary).length}{" "}
{Object.keys(fileSummary).length > 1 ? "Files" : "File"}{" "}
) : (
<>
setViewSources(false)}
>
{fileItems.length}
{fileItems.length > 1 ? " Sources " : " Source "}
from {Object.keys(fileSummary).length}{" "}
{Object.keys(fileSummary).length > 1 ? "Files" : "File"}{" "}
{Object.values(fileSummary).map((file, index) => (
)}
{file.name}
{
setSelectedFileItem(fileItem)
setShowFileItemPreview(true)
}}
>
))}
-{" "}
{fileItem.content.substring(0, 200)}...
{message.image_paths.map((path, index) => {
const item = chatImages.find(image => image.path === path)
return (
{
setSelectedImage({
messageId: message.id,
path,
base64: path.startsWith("data") ? path : item?.base64 || "",
url: path.startsWith("data") ? "" : item?.url || "",
file: null
})
setShowImagePreview(true)
}}
loading="lazy"
/>
)
})}
{isEditing && (
Input Cost:{" "}
{model.pricing.inputCost} {model.pricing.currency} per{" "}
{model.pricing.unit}
{model.pricing.outputCost && (
Output Cost:{" "}
{model.pricing.outputCost} {model.pricing.currency} per{" "}
{model.pricing.unit}
)}
{model.modelName}
Unlock models by entering API keys in your profile settings.
) : (
)}
{Object.entries(groupedModels).map(([provider, models]) => {
const filteredModels = models
.filter(model => {
if (tab === "hosted") return model.provider !== "ollama"
if (tab === "local") return model.provider === "ollama"
if (tab === "openrouter") return model.provider === "openrouter"
})
.filter(model =>
model.modelName.toLowerCase().includes(search.toLowerCase())
)
.sort((a, b) => a.provider.localeCompare(b.provider))
if (filteredModels.length === 0) return null
return (
)
})}
{provider === "openai" && profile.use_azure_openai
? "AZURE OPENAI"
: provider.toLocaleUpperCase()}
{filteredModels.map(model => {
return (
{selectedModelId === model.modelId && (
handleSelectModel(model.modelId)}
/>
)
})}
useAzureOpenai
? onAzureOpenaiAPIKeyChange(e.target.value)
: onOpenaiAPIKeyChange(e.target.value)
}
/>
{useAzureOpenai ? (
<>
onAzureOpenaiEndpointChange(e.target.value)}
/>
onAzureOpenai35TurboIDChange(e.target.value)}
/>
onAzureOpenai45TurboIDChange(e.target.value)}
/>
onAzureOpenai45VisionIDChange(e.target.value)}
/>
onAzureOpenaiEmbeddingsIDChange(e.target.value)}
/>
) : (
<>
onOpenaiOrgIDChange(e.target.value)}
/>
)}
onAnthropicAPIKeyChange(e.target.value)}
/>
onGoogleGeminiAPIKeyChange(e.target.value)}
/>
onMistralAPIKeyChange(e.target.value)}
/>
onGroqAPIKeyChange(e.target.value)}
/>
onPerplexityAPIKeyChange(e.target.value)}
/>
onOpenrouterAPIKeyChange(e.target.value)}
/>
)
}
================================================
FILE: components/setup/finish-step.tsx
================================================
import { FC } from "react"
interface FinishStepProps {
displayName: string
}
export const FinishStep: FC
Welcome to Chatbot UI
{displayName.length > 0 ? `, ${displayName.split(" ")[0]}` : null}!
Click next to start chatting.
{usernameAvailable ? (
AVAILABLE
) : (
UNAVAILABLE
)}
{
onUsernameChange(e.target.value)
checkUsernameAvailability(e.target.value)
}}
minLength={PROFILE_USERNAME_MIN}
maxLength={PROFILE_USERNAME_MAX}
/>
{loading ? (
onDisplayNameChange(e.target.value)}
maxLength={PROFILE_DISPLAY_NAME_MAX}
/>
)
}
================================================
FILE: components/setup/step-container.tsx
================================================
import { Button } from "@/components/ui/button"
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle
} from "@/components/ui/card"
import { FC, useRef } from "react"
export const SETUP_STEP_COUNT = 3
interface StepContainerProps {
stepDescription: string
stepNum: number
stepTitle: string
onShouldProceed: (shouldProceed: boolean) => void
children?: React.ReactNode
showBackButton?: boolean
showNextButton?: boolean
}
export const StepContainer: FC{stepTitle}
{stepNum} / {SETUP_STEP_COUNT}
{showBackButton && (
)}
{showNextButton && (
)}
{renderInputs()}
setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)}
>
{icon}
Start chat with {contentType.slice(0, -1)}
}
trigger={
{item.name}
{/* TODO */}
{/* {isHovering && (
{workspaces.length > 1 && (
setName(e.target.value)}
maxLength={ASSISTANT_NAME_MAX}
/>
setDescription(e.target.value)}
maxLength={ASSISTANT_DESCRIPTION_MAX}
/>
{contentType === "files" ? (
).type} size={24} />
) : (
{selected && (
{item.name}
{tool.name}
setName(e.target.value)}
maxLength={ASSISTANT_NAME_MAX}
/>
setDescription(e.target.value)}
maxLength={ASSISTANT_DESCRIPTION_MAX}
/>
Model is not compatible with tools.
)}
)}
onOpenChange={onOpenChange}
/>
)
}
================================================
FILE: components/sidebar/items/chat/chat-item.tsx
================================================
import { ModelIcon } from "@/components/models/model-icon"
import { WithTooltip } from "@/components/ui/with-tooltip"
import { ChatbotUIContext } from "@/context/context"
import { LLM_LIST } from "@/lib/models/llm/llm-list"
import { cn } from "@/lib/utils"
import { Tables } from "@/supabase/types"
import { LLM } from "@/types"
import { IconRobotFace } from "@tabler/icons-react"
import Image from "next/image"
import { useParams, useRouter } from "next/navigation"
import { FC, useContext, useRef } from "react"
import { DeleteChat } from "./delete-chat"
import { UpdateChat } from "./update-chat"
interface ChatItemProps {
chat: Tables<"chats">
}
export const ChatItem: FC
{chat.assistant_id ? (
assistantImage ? (
{MODEL_DATA?.modelName}
}
trigger={
{chat.name}
{
e.stopPropagation()
e.preventDefault()
}}
className={`ml-2 flex space-x-2 ${!isActive && "w-11 opacity-0 group-hover:opacity-100"}`}
>
)
}
================================================
FILE: components/sidebar/items/chat/delete-chat.tsx
================================================
import { useChatHandler } from "@/components/chat/chat-hooks/use-chat-handler"
import { Button } from "@/components/ui/button"
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger
} from "@/components/ui/dialog"
import { ChatbotUIContext } from "@/context/context"
import { deleteChat } from "@/db/chats"
import useHotkey from "@/lib/hooks/use-hotkey"
import { Tables } from "@/supabase/types"
import { IconTrash } from "@tabler/icons-react"
import { FC, useContext, useRef, useState } from "react"
interface DeleteChatProps {
chat: Tables<"chats">
}
export const DeleteChat: FC{file.name}
setName(e.target.value)}
maxLength={COLLECTION_NAME_MAX}
/>
setDescription(e.target.value)}
maxLength={COLLECTION_DESCRIPTION_MAX}
/>
)
}}
/>
)
}
================================================
FILE: components/sidebar/items/collections/create-collection.tsx
================================================
import { SidebarCreateItem } from "@/components/sidebar/items/all/sidebar-create-item"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { ChatbotUIContext } from "@/context/context"
import { COLLECTION_DESCRIPTION_MAX, COLLECTION_NAME_MAX } from "@/db/limits"
import { TablesInsert } from "@/supabase/types"
import { CollectionFile } from "@/types"
import { FC, useContext, useState } from "react"
import { CollectionFileSelect } from "./collection-file-select"
interface CreateCollectionProps {
isOpen: boolean
onOpenChange: (isOpen: boolean) => void
}
export const CreateCollection: FC
setName(e.target.value)}
maxLength={COLLECTION_NAME_MAX}
/>
setDescription(e.target.value)}
maxLength={COLLECTION_DESCRIPTION_MAX}
/>
)}
/>
)
}
================================================
FILE: components/sidebar/items/files/create-file.tsx
================================================
import { ACCEPTED_FILE_TYPES } from "@/components/chat/chat-hooks/use-select-file-handler"
import { SidebarCreateItem } from "@/components/sidebar/items/all/sidebar-create-item"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { ChatbotUIContext } from "@/context/context"
import { FILE_DESCRIPTION_MAX, FILE_NAME_MAX } from "@/db/limits"
import { TablesInsert } from "@/supabase/types"
import { FC, useContext, useState } from "react"
interface CreateFileProps {
isOpen: boolean
onOpenChange: (isOpen: boolean) => void
}
export const CreateFile: FC
setName(e.target.value)}
maxLength={FILE_NAME_MAX}
/>
setDescription(e.target.value)}
maxLength={FILE_DESCRIPTION_MAX}
/>
)}
/>
)
}
================================================
FILE: components/sidebar/items/files/file-item.tsx
================================================
import { FileIcon } from "@/components/ui/file-icon"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { FILE_DESCRIPTION_MAX, FILE_NAME_MAX } from "@/db/limits"
import { getFileFromStorage } from "@/db/storage/files"
import { Tables } from "@/supabase/types"
import { FC, useState } from "react"
import { SidebarItem } from "../all/sidebar-display-item"
interface FileItemProps {
file: Tables<"files">
}
export const FileItem: FC
View {file.name}
{file.type}
{formatFileSize(file.size)}
{file.tokens.toLocaleString()} tokens
setName(e.target.value)}
maxLength={FILE_NAME_MAX}
/>
setDescription(e.target.value)}
maxLength={FILE_DESCRIPTION_MAX}
/>
)}
/>
)
}
export const formatFileSize = (sizeInBytes: number): string => {
let size = sizeInBytes
let unit = "bytes"
if (size >= 1024) {
size /= 1024
unit = "KB"
}
if (size >= 1024) {
size /= 1024
unit = "MB"
}
if (size >= 1024) {
size /= 1024
unit = "GB"
}
return `${size.toFixed(2)} ${unit}`
}
================================================
FILE: components/sidebar/items/folders/delete-folder.tsx
================================================
import { Button } from "@/components/ui/button"
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger
} from "@/components/ui/dialog"
import { ChatbotUIContext } from "@/context/context"
import { deleteFolder } from "@/db/folders"
import { supabase } from "@/lib/supabase/browser-client"
import { Tables } from "@/supabase/types"
import { ContentType } from "@/types"
import { IconTrash } from "@tabler/icons-react"
import { FC, useContext, useRef, useState } from "react"
import { toast } from "sonner"
interface DeleteFolderProps {
folder: Tables<"folders">
contentType: ContentType
}
export const DeleteFolder: FC setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)}
>
{isExpanded && (
)
}
================================================
FILE: components/sidebar/items/folders/update-folder.tsx
================================================
import { Button } from "@/components/ui/button"
import {
Dialog,
DialogContent,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { ChatbotUIContext } from "@/context/context"
import { updateFolder } from "@/db/folders"
import { Tables } from "@/supabase/types"
import { IconEdit } from "@tabler/icons-react"
import { FC, useContext, useRef, useState } from "react"
interface UpdateFolderProps {
folder: Tables<"folders">
}
export const UpdateFolder: FC
{isExpanded ? (
{isHovering && (
{folder.name}
{
e.stopPropagation()
e.preventDefault()
}}
className="ml-2 flex space-x-2"
>
)}
{children}
)}
Create a custom model.
Your API *must* be compatible
with the OpenAI SDK.
setName(e.target.value)}
maxLength={MODEL_NAME_MAX}
/>
setModelId(e.target.value)}
/>
setBaseUrl(e.target.value)}
/>
Your API must be compatible with the OpenAI SDK.
setApiKey(e.target.value)}
/>
setContextLength(parseInt(e.target.value))}
/>
)}
/>
)
}
================================================
FILE: components/sidebar/items/models/model-item.tsx
================================================
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { MODEL_NAME_MAX } from "@/db/limits"
import { Tables, TablesUpdate } from "@/supabase/types"
import { IconSparkles } from "@tabler/icons-react"
import { FC, useState } from "react"
import { SidebarItem } from "../all/sidebar-display-item"
interface ModelItemProps {
model: Tables<"models">
}
export const ModelItem: FC
setName(e.target.value)}
maxLength={MODEL_NAME_MAX}
/>
setModelId(e.target.value)}
/>
setBaseUrl(e.target.value)}
/>
Your API must be compatible with the OpenAI SDK.
setApiKey(e.target.value)}
/>
setContextLength(parseInt(e.target.value))}
/>
)}
/>
)
}
================================================
FILE: components/sidebar/items/presets/create-preset.tsx
================================================
import { SidebarCreateItem } from "@/components/sidebar/items/all/sidebar-create-item"
import { ChatSettingsForm } from "@/components/ui/chat-settings-form"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { ChatbotUIContext } from "@/context/context"
import { PRESET_NAME_MAX } from "@/db/limits"
import { TablesInsert } from "@/supabase/types"
import { FC, useContext, useState } from "react"
interface CreatePresetProps {
isOpen: boolean
onOpenChange: (isOpen: boolean) => void
}
export const CreatePreset: FC
setName(e.target.value)}
maxLength={PRESET_NAME_MAX}
/>
setName(e.target.value)}
maxLength={PRESET_NAME_MAX}
/>
setName(e.target.value)}
maxLength={PROMPT_NAME_MAX}
onCompositionStart={() => setIsTyping(true)}
onCompositionEnd={() => setIsTyping(false)}
/>
setName(e.target.value)}
maxLength={PROMPT_NAME_MAX}
onCompositionStart={() => setIsTyping(true)}
onCompositionEnd={() => setIsTyping(false)}
/>
setName(e.target.value)}
maxLength={TOOL_NAME_MAX}
/>
setDescription(e.target.value)}
maxLength={TOOL_DESCRIPTION_MAX}
/>
{/*
setUrl(e.target.value)}
/>
*/}
{/* {schemaError}
setName(e.target.value)}
maxLength={TOOL_NAME_MAX}
/>
setDescription(e.target.value)}
maxLength={TOOL_DESCRIPTION_MAX}
/>
{/*
setUrl(e.target.value)}
/>
*/}
{/* {schemaError}
{hasData && (
)}
{isCreatingPrompt && (
)
}
================================================
FILE: components/sidebar/sidebar-data-list.tsx
================================================
import { ChatbotUIContext } from "@/context/context"
import { updateAssistant } from "@/db/assistants"
import { updateChat } from "@/db/chats"
import { updateCollection } from "@/db/collections"
import { updateFile } from "@/db/files"
import { updateModel } from "@/db/models"
import { updatePreset } from "@/db/presets"
import { updatePrompt } from "@/db/prompts"
import { updateTool } from "@/db/tools"
import { cn } from "@/lib/utils"
import { Tables } from "@/supabase/types"
import { ContentType, DataItemType, DataListType } from "@/types"
import { FC, useContext, useEffect, useRef, useState } from "react"
import { Separator } from "../ui/separator"
import { AssistantItem } from "./items/assistants/assistant-item"
import { ChatItem } from "./items/chat/chat-item"
import { CollectionItem } from "./items/collections/collection-item"
import { FileItem } from "./items/files/file-item"
import { Folder } from "./items/folders/folder-item"
import { ModelItem } from "./items/models/model-item"
import { PresetItem } from "./items/presets/preset-item"
import { PromptItem } from "./items/prompts/prompt-item"
import { ToolItem } from "./items/tools/tool-item"
interface SidebarDataListProps {
contentType: ContentType
data: DataListType
folders: Tables<"folders">[]
}
export const SidebarDataList: FC
{data.length === 0 && (
)}
{(dataWithFolders.length > 0 || dataWithoutFolders.length > 0) && (
)
}
================================================
FILE: components/sidebar/sidebar-search.tsx
================================================
import { ContentType } from "@/types"
import { FC } from "react"
import { Input } from "../ui/input"
interface SidebarSearchProps {
contentType: ContentType
searchTerm: string
setSearchTerm: Function
}
export const SidebarSearch: FC
No {contentType}.
{folders.map(folder => (
{dataWithFolders
.filter(item => item.folder_id === folder.id)
.map(item => (
))}
{folders.length > 0 &&
)}
handleDragStart(e, item.id)}
>
{getDataListComponent(contentType, item)}
))}
{dateCategory}
{sortedData.map((item: any) => (
handleDragStart(e, item.id)}
>
{getDataListComponent(contentType, item)}
))}
{dataWithoutFolders.map(item => {
return (
)}
handleDragStart(e, item.id)}
>
{getDataListComponent(contentType, item)}
)
})}
{/* TODO */}
{/* Import
} trigger={{children}
Advanced Settings
{isOpen ? (