+
+## 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/
+
+ ) : (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/chatbot-ui-main/app/[locale]/globals.css b/chatbot-ui-main/app/[locale]/globals.css
new file mode 100644
index 0000000000..c0d1efcb5a
--- /dev/null
+++ b/chatbot-ui-main/app/[locale]/globals.css
@@ -0,0 +1,104 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+::-webkit-scrollbar-track {
+ background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+ background-color: #ccc;
+ border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background-color: #aaa;
+}
+
+::-webkit-scrollbar-track:hover {
+ background-color: #f2f2f2;
+}
+
+::-webkit-scrollbar-corner {
+ background-color: transparent;
+}
+
+::-webkit-scrollbar {
+ width: 6px;
+ height: 6px;
+}
+
+@layer base {
+ :root {
+ --background: 0 0% 100%;
+ --foreground: 0 0% 3.9%;
+
+ --muted: 0 0% 96.1%;
+ --muted-foreground: 0 0% 45.1%;
+
+ --popover: 0 0% 100%;
+ --popover-foreground: 0 0% 3.9%;
+
+ --card: 0 0% 100%;
+ --card-foreground: 0 0% 3.9%;
+
+ --border: 0 0% 89.8%;
+ --input: 0 0% 89.8%;
+
+ --primary: 0 0% 9%;
+ --primary-foreground: 0 0% 98%;
+
+ --secondary: 0 0% 96.1%;
+ --secondary-foreground: 0 0% 9%;
+
+ --accent: 0 0% 96.1%;
+ --accent-foreground: 0 0% 9%;
+
+ --destructive: 0 84.2% 60.2%;
+ --destructive-foreground: 0 0% 98%;
+
+ --ring: 0 0% 63.9%;
+
+ --radius: 0.5rem;
+ }
+
+ .dark {
+ --background: 0 0% 3.9%;
+ --foreground: 0 0% 98%;
+
+ --muted: 0 0% 14.9%;
+ --muted-foreground: 0 0% 63.9%;
+
+ --popover: 0 0% 3.9%;
+ --popover-foreground: 0 0% 98%;
+
+ --card: 0 0% 3.9%;
+ --card-foreground: 0 0% 98%;
+
+ --border: 0 0% 14.9%;
+ --input: 0 0% 14.9%;
+
+ --primary: 0 0% 98%;
+ --primary-foreground: 0 0% 9%;
+
+ --secondary: 0 0% 14.9%;
+ --secondary-foreground: 0 0% 98%;
+
+ --accent: 0 0% 14.9%;
+ --accent-foreground: 0 0% 98%;
+
+ --destructive: 0 62.8% 30.6%;
+ --destructive-foreground: 0 85.7% 97.3%;
+
+ --ring: 0 0% 14.9%;
+ }
+}
+
+@layer base {
+ * {
+ @apply border-border;
+ }
+ body {
+ @apply bg-background text-foreground;
+ }
+}
diff --git a/chatbot-ui-main/app/[locale]/help/page.tsx b/chatbot-ui-main/app/[locale]/help/page.tsx
new file mode 100644
index 0000000000..c1753f460b
--- /dev/null
+++ b/chatbot-ui-main/app/[locale]/help/page.tsx
@@ -0,0 +1,7 @@
+export default function HelpPage() {
+ return (
+ {selectedWorkspace?.name}
+
+
+ )
+}
diff --git a/chatbot-ui-main/app/[locale]/layout.tsx b/chatbot-ui-main/app/[locale]/layout.tsx
new file mode 100644
index 0000000000..474058a910
--- /dev/null
+++ b/chatbot-ui-main/app/[locale]/layout.tsx
@@ -0,0 +1,107 @@
+import { Toaster } from "@/components/ui/sonner"
+import { GlobalState } from "@/components/utility/global-state"
+import { Providers } from "@/components/utility/providers"
+import TranslationsProvider from "@/components/utility/translations-provider"
+import initTranslations from "@/lib/i18n"
+import { Database } from "@/supabase/types"
+import { createServerClient } from "@supabase/ssr"
+import { Metadata, Viewport } from "next"
+import { Inter } from "next/font/google"
+import { cookies } from "next/headers"
+import { ReactNode } from "react"
+import "./globals.css"
+
+const inter = Inter({ subsets: ["latin"] })
+const APP_NAME = "Chatbot UI"
+const APP_DEFAULT_TITLE = "Chatbot UI"
+const APP_TITLE_TEMPLATE = "%s - Chatbot UI"
+const APP_DESCRIPTION = "Chabot UI PWA!"
+
+interface RootLayoutProps {
+ children: ReactNode
+ params: {
+ locale: string
+ }
+}
+
+export const metadata: Metadata = {
+ applicationName: APP_NAME,
+ title: {
+ default: APP_DEFAULT_TITLE,
+ template: APP_TITLE_TEMPLATE
+ },
+ description: APP_DESCRIPTION,
+ manifest: "/manifest.json",
+ appleWebApp: {
+ capable: true,
+ statusBarStyle: "black",
+ title: APP_DEFAULT_TITLE
+ // startUpImage: [],
+ },
+ formatDetection: {
+ telephone: false
+ },
+ openGraph: {
+ type: "website",
+ siteName: APP_NAME,
+ title: {
+ default: APP_DEFAULT_TITLE,
+ template: APP_TITLE_TEMPLATE
+ },
+ description: APP_DESCRIPTION
+ },
+ twitter: {
+ card: "summary",
+ title: {
+ default: APP_DEFAULT_TITLE,
+ template: APP_TITLE_TEMPLATE
+ },
+ description: APP_DESCRIPTION
+ }
+}
+
+export const viewport: Viewport = {
+ themeColor: "#000000"
+}
+
+const i18nNamespaces = ["translation"]
+
+export default async function RootLayout({
+ children,
+ params: { locale }
+}: RootLayoutProps) {
+ const cookieStore = cookies()
+ const supabase = createServerClientHelp under construction.
+
+ {session ? {children} : children}
+
+
+
+ )
+}
diff --git a/chatbot-ui-main/app/[locale]/login/page.tsx b/chatbot-ui-main/app/[locale]/login/page.tsx
new file mode 100644
index 0000000000..527422f65a
--- /dev/null
+++ b/chatbot-ui-main/app/[locale]/login/page.tsx
@@ -0,0 +1,221 @@
+import { Brand } from "@/components/ui/brand"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { SubmitButton } from "@/components/ui/submit-button"
+import { createClient } from "@/lib/supabase/server"
+import { Database } from "@/supabase/types"
+import { createServerClient } from "@supabase/ssr"
+import { get } from "@vercel/edge-config"
+import { Metadata } from "next"
+import { cookies, headers } from "next/headers"
+import { redirect } from "next/navigation"
+
+export const metadata: Metadata = {
+ title: "Login"
+}
+
+export default async function Login({
+ searchParams
+}: {
+ searchParams: { message: string }
+}) {
+ const cookieStore = cookies()
+ const supabase = createServerClient
+
+
+ )
+}
diff --git a/chatbot-ui-main/app/[locale]/login/password/page.tsx b/chatbot-ui-main/app/[locale]/login/password/page.tsx
new file mode 100644
index 0000000000..e00cca3f65
--- /dev/null
+++ b/chatbot-ui-main/app/[locale]/login/password/page.tsx
@@ -0,0 +1,30 @@
+"use client"
+
+import { ChangePassword } from "@/components/utility/change-password"
+import { supabase } from "@/lib/supabase/browser-client"
+import { useRouter } from "next/navigation"
+import { useEffect, useState } from "react"
+
+export default function ChangePasswordPage() {
+ const [loading, setLoading] = useState(true)
+
+ const router = useRouter()
+
+ useEffect(() => {
+ ;(async () => {
+ const session = (await supabase.auth.getSession()).data.session
+
+ if (!session) {
+ router.push("/login")
+ } else {
+ setLoading(false)
+ }
+ })()
+ }, [])
+
+ if (loading) {
+ return null
+ }
+
+ return
+
+ )
+}
diff --git a/chatbot-ui-main/app/[locale]/setup/page.tsx b/chatbot-ui-main/app/[locale]/setup/page.tsx
new file mode 100644
index 0000000000..700e8e94f1
--- /dev/null
+++ b/chatbot-ui-main/app/[locale]/setup/page.tsx
@@ -0,0 +1,256 @@
+"use client"
+
+import { ChatbotUIContext } from "@/context/context"
+import { getProfileByUserId, updateProfile } from "@/db/profile"
+import {
+ getHomeWorkspaceByUserId,
+ getWorkspacesByUserId
+} from "@/db/workspaces"
+import {
+ fetchHostedModels,
+ fetchOpenRouterModels
+} from "@/lib/models/fetch-models"
+import { supabase } from "@/lib/supabase/browser-client"
+import { TablesUpdate } from "@/supabase/types"
+import { useRouter } from "next/navigation"
+import { useContext, useEffect, useState } from "react"
+import { APIStep } from "../../../components/setup/api-step"
+import { FinishStep } from "../../../components/setup/finish-step"
+import { ProfileStep } from "../../../components/setup/profile-step"
+import {
+ SETUP_STEP_COUNT,
+ StepContainer
+} from "../../../components/setup/step-container"
+
+export default function SetupPage() {
+ const {
+ profile,
+ setProfile,
+ setWorkspaces,
+ setSelectedWorkspace,
+ setEnvKeyMap,
+ setAvailableHostedModels,
+ setAvailableOpenRouterModels
+ } = useContext(ChatbotUIContext)
+
+ const router = useRouter()
+
+ const [loading, setLoading] = useState(true)
+
+ const [currentStep, setCurrentStep] = useState(1)
+
+ // Profile Step
+ const [displayName, setDisplayName] = useState("")
+ const [username, setUsername] = useState(profile?.username || "")
+ const [usernameAvailable, setUsernameAvailable] = useState(true)
+
+ // API Step
+ const [useAzureOpenai, setUseAzureOpenai] = useState(false)
+ const [openaiAPIKey, setOpenaiAPIKey] = useState("")
+ const [openaiOrgID, setOpenaiOrgID] = useState("")
+ const [azureOpenaiAPIKey, setAzureOpenaiAPIKey] = useState("")
+ const [azureOpenaiEndpoint, setAzureOpenaiEndpoint] = useState("")
+ const [azureOpenai35TurboID, setAzureOpenai35TurboID] = useState("")
+ const [azureOpenai45TurboID, setAzureOpenai45TurboID] = useState("")
+ const [azureOpenai45VisionID, setAzureOpenai45VisionID] = useState("")
+ const [azureOpenaiEmbeddingsID, setAzureOpenaiEmbeddingsID] = useState("")
+ const [anthropicAPIKey, setAnthropicAPIKey] = useState("")
+ const [googleGeminiAPIKey, setGoogleGeminiAPIKey] = useState("")
+ const [mistralAPIKey, setMistralAPIKey] = useState("")
+ const [groqAPIKey, setGroqAPIKey] = useState("")
+ const [perplexityAPIKey, setPerplexityAPIKey] = useState("")
+ const [openrouterAPIKey, setOpenrouterAPIKey] = useState("")
+
+ useEffect(() => {
+ ;(async () => {
+ const session = (await supabase.auth.getSession()).data.session
+
+ if (!session) {
+ return router.push("/login")
+ } else {
+ const user = session.user
+
+ const profile = await getProfileByUserId(user.id)
+ setProfile(profile)
+ setUsername(profile.username)
+
+ if (!profile.has_onboarded) {
+ setLoading(false)
+ } else {
+ const data = await fetchHostedModels(profile)
+
+ if (!data) return
+
+ setEnvKeyMap(data.envKeyMap)
+ setAvailableHostedModels(data.hostedModels)
+
+ if (profile["openrouter_api_key"] || data.envKeyMap["openrouter"]) {
+ const openRouterModels = await fetchOpenRouterModels()
+ if (!openRouterModels) return
+ setAvailableOpenRouterModels(openRouterModels)
+ }
+
+ const homeWorkspaceId = await getHomeWorkspaceByUserId(
+ session.user.id
+ )
+ return router.push(`/${homeWorkspaceId}/chat`)
+ }
+ }
+ })()
+ }, [])
+
+ const handleShouldProceed = (proceed: boolean) => {
+ if (proceed) {
+ if (currentStep === SETUP_STEP_COUNT) {
+ handleSaveSetupSetting()
+ } else {
+ setCurrentStep(currentStep + 1)
+ }
+ } else {
+ setCurrentStep(currentStep - 1)
+ }
+ }
+
+ const handleSaveSetupSetting = async () => {
+ const session = (await supabase.auth.getSession()).data.session
+ if (!session) {
+ return router.push("/login")
+ }
+
+ const user = session.user
+ const profile = await getProfileByUserId(user.id)
+
+ const updateProfilePayload: TablesUpdate<"profiles"> = {
+ ...profile,
+ has_onboarded: true,
+ display_name: displayName,
+ username,
+ openai_api_key: openaiAPIKey,
+ openai_organization_id: openaiOrgID,
+ anthropic_api_key: anthropicAPIKey,
+ google_gemini_api_key: googleGeminiAPIKey,
+ mistral_api_key: mistralAPIKey,
+ groq_api_key: groqAPIKey,
+ perplexity_api_key: perplexityAPIKey,
+ openrouter_api_key: openrouterAPIKey,
+ use_azure_openai: useAzureOpenai,
+ azure_openai_api_key: azureOpenaiAPIKey,
+ azure_openai_endpoint: azureOpenaiEndpoint,
+ azure_openai_35_turbo_id: azureOpenai35TurboID,
+ azure_openai_45_turbo_id: azureOpenai45TurboID,
+ azure_openai_45_vision_id: azureOpenai45VisionID,
+ azure_openai_embeddings_id: azureOpenaiEmbeddingsID
+ }
+
+ const updatedProfile = await updateProfile(profile.id, updateProfilePayload)
+ setProfile(updatedProfile)
+
+ const workspaces = await getWorkspacesByUserId(profile.user_id)
+ const homeWorkspace = workspaces.find(w => w.is_home)
+
+ // There will always be a home workspace
+ setSelectedWorkspace(homeWorkspace!)
+ setWorkspaces(workspaces)
+
+ return router.push(`/${homeWorkspace?.id}/chat`)
+ }
+
+ const renderStep = (stepNum: number) => {
+ switch (stepNum) {
+ // Profile Step
+ case 1:
+ return (
+
+
+
+ Chatbot UI
+
+
+ Start Chatting
+
+ {renderStep(currentStep)}
+
+ )
+}
diff --git a/chatbot-ui-main/app/api/assistants/openai/route.ts b/chatbot-ui-main/app/api/assistants/openai/route.ts
new file mode 100644
index 0000000000..7e16e52b5e
--- /dev/null
+++ b/chatbot-ui-main/app/api/assistants/openai/route.ts
@@ -0,0 +1,32 @@
+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
+ })
+ }
+}
diff --git a/chatbot-ui-main/app/api/chat/anthropic/route.ts b/chatbot-ui-main/app/api/chat/anthropic/route.ts
new file mode 100644
index 0000000000..4f6242f0b1
--- /dev/null
+++ b/chatbot-ui-main/app/api/chat/anthropic/route.ts
@@ -0,0 +1,111 @@
+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
+ })
+ }
+}
diff --git a/chatbot-ui-main/app/api/chat/azure/route.ts b/chatbot-ui-main/app/api/chat/azure/route.ts
new file mode 100644
index 0000000000..642eb771fe
--- /dev/null
+++ b/chatbot-ui-main/app/api/chat/azure/route.ts
@@ -0,0 +1,72 @@
+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
+ })
+ }
+}
diff --git a/chatbot-ui-main/app/api/chat/custom/route.ts b/chatbot-ui-main/app/api/chat/custom/route.ts
new file mode 100644
index 0000000000..2c8e7c850b
--- /dev/null
+++ b/chatbot-ui-main/app/api/chat/custom/route.ts
@@ -0,0 +1,66 @@
+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 ? (
+
+ )}
+
+ )
+}
diff --git a/chatbot-ui-main/components/chat/chat-command-input.tsx b/chatbot-ui-main/components/chat/chat-command-input.tsx
new file mode 100644
index 0000000000..49afb0b4af
--- /dev/null
+++ b/chatbot-ui-main/components/chat/chat-command-input.tsx
@@ -0,0 +1,48 @@
+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."}
+
+
+
+
+ ) : (
+ combinedMessageFiles.length > 0 && (
+
+
+
+
+
+
+
+ {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}
+
+
+
+ )
+ )
+}
+
+const RetrievalToggle = ({}) => {
+ const { useRetrieval, setUseRetrieval } = useContext(ChatbotUIContext)
+
+ return (
+
+
+ {useRetrieval
+ ? "File retrieval is enabled on the selected files for this message. Click the indicator to disable."
+ : "Click the indicator to enable file retrieval for this message."}
+
+ }
+ trigger={
+
+
+
+
+
+
+ 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}
+
+
+ fileInputRef.current?.click()}
+ />
+
+ {/* Hidden input to select files from device */}
+ {
+ if (!e.target.files) return
+ handleSelectDeviceFile(e.target.files[0])
+ }}
+ accept={filesToAccept}
+ />
+
+
+ setIsTyping(true)}
+ onCompositionEnd={() => setIsTyping(false)}
+ />
+
+
+
+ )
+}
diff --git a/chatbot-ui-main/components/chat/chat-messages.tsx b/chatbot-ui-main/components/chat/chat-messages.tsx
new file mode 100644
index 0000000000..af13a88cac
--- /dev/null
+++ b/chatbot-ui-main/components/chat/chat-messages.tsx
@@ -0,0 +1,38 @@
+import { useChatHandler } from "@/components/chat/chat-hooks/use-chat-handler"
+import { ChatbotUIContext } from "@/context/context"
+import { Tables } from "@/supabase/types"
+import { FC, useContext, useState } from "react"
+import { Message } from "../messages/message"
+
+interface ChatMessagesProps {}
+
+export const ChatMessages: FC
+
+
+ <>
+
+ {isGenerating ? (
+ {
+ if (!userInput) return
+
+ handleSendMessage(userInput, chatMessages, false)
+ }}
+ size={30}
+ />
+ )}
+
+ Chat Info
+
+
+
+
+ }
+ trigger={
+ 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}
+
+
+
+ }
+ />
+
+
+
+ }
+ />
+
+ )}
+
+ )
+}
diff --git a/chatbot-ui-main/components/chat/chat-settings.tsx b/chatbot-ui-main/components/chat/chat-settings.tsx
new file mode 100644
index 0000000000..8230d5f4d4
--- /dev/null
+++ b/chatbot-ui-main/components/chat/chat-settings.tsx
@@ -0,0 +1,94 @@
+import { ChatbotUIContext } from "@/context/context"
+import { CHAT_SETTING_LIMITS } from "@/lib/chat-setting-limits"
+import useHotkey from "@/lib/hooks/use-hotkey"
+import { LLMID, ModelProvider } from "@/types"
+import { IconAdjustmentsHorizontal } from "@tabler/icons-react"
+import { FC, useContext, useEffect, useRef } from "react"
+import { Button } from "../ui/button"
+import { ChatSettingsForm } from "../ui/chat-settings-form"
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover"
+
+interface ChatSettingsProps {}
+
+export const ChatSettings: FC
+
+ )
+}
diff --git a/chatbot-ui-main/components/chat/file-picker.tsx b/chatbot-ui-main/components/chat/file-picker.tsx
new file mode 100644
index 0000000000..00c4a7372d
--- /dev/null
+++ b/chatbot-ui-main/components/chat/file-picker.tsx
@@ -0,0 +1,158 @@
+import { ChatbotUIContext } from "@/context/context"
+import { Tables } from "@/supabase/types"
+import { IconBooks } from "@tabler/icons-react"
+import { FC, useContext, useEffect, useRef } from "react"
+import { FileIcon } from "../ui/file-icon"
+
+interface FilePickerProps {
+ isOpen: boolean
+ searchQuery: string
+ onOpenChange: (isOpen: boolean) => void
+ selectedFileIds: string[]
+ selectedCollectionIds: string[]
+ onSelectFile: (file: Tables<"files">) => void
+ onSelectCollection: (collection: Tables<"collections">) => void
+ isFocused: boolean
+}
+
+export const FilePicker: FC
+
+
+
+
+
+
+
+
+
+ {selectedChat?.name || "Chat"}
+
+
+
+
+
+
+
+
+
+
+
+
+ {filteredFiles.length === 0 && filteredCollections.length === 0 ? (
+
+ )}
+
+ )
+}
diff --git a/chatbot-ui-main/components/chat/prompt-picker.tsx b/chatbot-ui-main/components/chat/prompt-picker.tsx
new file mode 100644
index 0000000000..55592e37a9
--- /dev/null
+++ b/chatbot-ui-main/components/chat/prompt-picker.tsx
@@ -0,0 +1,215 @@
+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 ? (
+
+ )}
+
+ )
+}
diff --git a/chatbot-ui-main/components/chat/quick-setting-option.tsx b/chatbot-ui-main/components/chat/quick-setting-option.tsx
new file mode 100644
index 0000000000..6ddd48b3bd
--- /dev/null
+++ b/chatbot-ui-main/components/chat/quick-setting-option.tsx
@@ -0,0 +1,71 @@
+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 ? (
+
+ )}
+
+ )
+}
diff --git a/chatbot-ui-main/components/icons/anthropic-svg.tsx b/chatbot-ui-main/components/icons/anthropic-svg.tsx
new file mode 100644
index 0000000000..27b2cd18f4
--- /dev/null
+++ b/chatbot-ui-main/components/icons/anthropic-svg.tsx
@@ -0,0 +1,44 @@
+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={
+
+
+ {value}
+
+
+ )
+ }
+)
+
+MessageCodeBlock.displayName = "MessageCodeBlock"
diff --git a/chatbot-ui-main/components/messages/message-markdown-memoized.tsx b/chatbot-ui-main/components/messages/message-markdown-memoized.tsx
new file mode 100644
index 0000000000..2fc2106500
--- /dev/null
+++ b/chatbot-ui-main/components/messages/message-markdown-memoized.tsx
@@ -0,0 +1,9 @@
+import { FC, memo } from "react"
+import ReactMarkdown, { Options } from "react-markdown"
+
+export const MessageMarkdownMemoized: FC
+ {language}
+
+
+
+
+
+
+
+ {childArray}
+
+ )
+ }
+
+ return (
+ setIsOpen(true)}
+ >
+
+ }
+ />
+
+ {1}
+
+ setIsHovering(true)}
+ onMouseLeave={() => setIsHovering(false)}
+ onKeyDown={handleKeyDown}
+ >
+
+
+ {showImagePreview && selectedImage && (
+
+
+
+ {fileItems.length > 0 && (
+
+
+
+ {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}
+
+
+
+ )
+ default:
+ return (
+ Searching files...
+
+
+ )
+ }
+ })()}
+
+ ) : isEditing ? (
+ 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) => (
+
+
+ )}
+
+
+ ))}
+
+
+
+ {fileItems
+ .filter(fileItem => {
+ const parentFile = files.find(
+ parentFile => parentFile.id === fileItem.file_id
+ )
+ return parentFile?.id === file.id
+ })
+ .map((fileItem, 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 && (
+
+
+
+
+
+ )}
+
+
+ )}
+
+ }
+ side="bottom"
+ trigger={
+
+ 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}
+
+ )}
+
+
+ }
+ />
+ )
+}
diff --git a/chatbot-ui-main/components/models/model-select.tsx b/chatbot-ui-main/components/models/model-select.tsx
new file mode 100644
index 0000000000..d25d6de507
--- /dev/null
+++ b/chatbot-ui-main/components/models/model-select.tsx
@@ -0,0 +1,203 @@
+import { ChatbotUIContext } from "@/context/context"
+import { LLM, LLMID, ModelProvider } from "@/types"
+import { IconCheck, IconChevronDown } from "@tabler/icons-react"
+import { FC, useContext, useEffect, useRef, useState } from "react"
+import { Button } from "../ui/button"
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuTrigger
+} from "../ui/dropdown-menu"
+import { Input } from "../ui/input"
+import { Tabs, TabsList, TabsTrigger } from "../ui/tabs"
+import { ModelIcon } from "./model-icon"
+import { ModelOption } from "./model-option"
+
+interface ModelSelectProps {
+ selectedModelId: string
+ onSelectModel: (modelId: LLMID) => void
+}
+
+export const ModelSelect: FC
+
+ {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)}
+ />
+
+
+ )
+}
diff --git a/chatbot-ui-main/components/setup/finish-step.tsx b/chatbot-ui-main/components/setup/finish-step.tsx
new file mode 100644
index 0000000000..d0747d32e4
--- /dev/null
+++ b/chatbot-ui-main/components/setup/finish-step.tsx
@@ -0,0 +1,18 @@
+import { FC } from "react"
+
+interface FinishStepProps {
+ displayName: string
+}
+
+export const FinishStep: FC
+
+ )
+}
diff --git a/chatbot-ui-main/components/setup/profile-step.tsx b/chatbot-ui-main/components/setup/profile-step.tsx
new file mode 100644
index 0000000000..eaf8faf813
--- /dev/null
+++ b/chatbot-ui-main/components/setup/profile-step.tsx
@@ -0,0 +1,149 @@
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import {
+ PROFILE_DISPLAY_NAME_MAX,
+ PROFILE_USERNAME_MAX,
+ PROFILE_USERNAME_MIN
+} from "@/db/limits"
+import {
+ IconCircleCheckFilled,
+ IconCircleXFilled,
+ IconLoader2
+} from "@tabler/icons-react"
+import { FC, useCallback, useState } from "react"
+import { LimitDisplay } from "../ui/limit-display"
+import { toast } from "sonner"
+
+interface ProfileStepProps {
+ username: string
+ usernameAvailable: boolean
+ displayName: string
+ onUsernameAvailableChange: (isAvailable: boolean) => void
+ onUsernameChange: (username: string) => void
+ onDisplayNameChange: (name: string) => void
+}
+
+export const ProfileStep: 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}
+ />
+
+
+
+ )
+}
diff --git a/chatbot-ui-main/components/setup/step-container.tsx b/chatbot-ui-main/components/setup/step-container.tsx
new file mode 100644
index 0000000000..2a9ed6972a
--- /dev/null
+++ b/chatbot-ui-main/components/setup/step-container.tsx
@@ -0,0 +1,89 @@
+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 && (
+
+ )}
+
+
+
+
+ Create{" "}
+ {contentType.charAt(0).toUpperCase() + contentType.slice(1, -1)}
+
+
+
+
+
+ {renderInputs()}
+
+
+
+
+
+ setIsHovering(true)}
+ onMouseLeave={() => setIsHovering(false)}
+ >
+ {icon}
+
+ Start chat with {contentType.slice(0, -1)}
}
+ trigger={
+
+ {item.name}
+
+
+ {/* TODO */}
+ {/* {isHovering && (
+
+
+
+ Edit {contentType.slice(0, -1)}
+
+
+
+
+
+
+ {workspaces.length > 1 && (
+
+
+
+
+
+ )}
+
+ {renderInputs(renderState[contentType])}
+
+
+
+
+
+
+
+
+ setName(e.target.value)}
+ maxLength={ASSISTANT_NAME_MAX}
+ />
+
+
+
+
+
+ setDescription(e.target.value)}
+ maxLength={ASSISTANT_DESCRIPTION_MAX}
+ />
+
+
+
+
+
+
+
+
+
+
+
+ ![
+ ...renderState.selectedAssistantFiles,
+ ...renderState.selectedAssistantCollections
+ ].some(
+ selectedFile => selectedFile.id === startingFile.id
+ )
+ ),
+ ...renderState.selectedAssistantFiles.filter(
+ selectedFile =>
+ !renderState.startingAssistantFiles.some(
+ startingFile => startingFile.id === selectedFile.id
+ )
+ ),
+ ...renderState.startingAssistantCollections.filter(
+ startingCollection =>
+ ![
+ ...renderState.selectedAssistantFiles,
+ ...renderState.selectedAssistantCollections
+ ].some(
+ selectedCollection =>
+ selectedCollection.id === startingCollection.id
+ )
+ ),
+ ...renderState.selectedAssistantCollections.filter(
+ selectedCollection =>
+ !renderState.startingAssistantCollections.some(
+ startingCollection =>
+ startingCollection.id === selectedCollection.id
+ )
+ )
+ ]
+ }
+ onAssistantRetrievalItemsSelect={item =>
+ "type" in item
+ ? handleFileSelect(
+ item,
+ renderState.setSelectedAssistantFiles
+ )
+ : handleCollectionSelect(
+ item,
+ renderState.setSelectedAssistantCollections
+ )
+ }
+ />
+
+
+
+
+
+
+ !renderState.selectedAssistantTools.some(
+ selectedTool => selectedTool.id === startingTool.id
+ )
+ ),
+ ...renderState.selectedAssistantTools.filter(
+ selectedTool =>
+ !renderState.startingAssistantTools.some(
+ startingTool => startingTool.id === selectedTool.id
+ )
+ )
+ ]
+ }
+ onAssistantToolsSelect={tool =>
+ handleToolSelect(tool, renderState.setSelectedAssistantTools)
+ }
+ />
+
+
+ )}
+ />
+ )
+}
diff --git a/chatbot-ui-main/components/sidebar/items/assistants/assistant-retrieval-select.tsx b/chatbot-ui-main/components/sidebar/items/assistants/assistant-retrieval-select.tsx
new file mode 100644
index 0000000000..fc69de7b26
--- /dev/null
+++ b/chatbot-ui-main/components/sidebar/items/assistants/assistant-retrieval-select.tsx
@@ -0,0 +1,197 @@
+import { Button } from "@/components/ui/button"
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuTrigger
+} from "@/components/ui/dropdown-menu"
+import { Input } from "@/components/ui/input"
+import { ChatbotUIContext } from "@/context/context"
+import { Tables } from "@/supabase/types"
+import {
+ IconBooks,
+ IconChevronDown,
+ IconCircleCheckFilled
+} from "@tabler/icons-react"
+import { FileIcon } from "lucide-react"
+import { FC, useContext, useEffect, useRef, useState } from "react"
+
+interface AssistantRetrievalSelectProps {
+ selectedAssistantRetrievalItems: Tables<"files">[] | Tables<"collections">[]
+ onAssistantRetrievalItemsSelect: (
+ item: Tables<"files"> | Tables<"collections">
+ ) => void
+}
+
+export const AssistantRetrievalSelect: FC
+
+ )
+}
diff --git a/chatbot-ui-main/components/sidebar/items/assistants/assistant-tool-select.tsx b/chatbot-ui-main/components/sidebar/items/assistants/assistant-tool-select.tsx
new file mode 100644
index 0000000000..2efba48cc5
--- /dev/null
+++ b/chatbot-ui-main/components/sidebar/items/assistants/assistant-tool-select.tsx
@@ -0,0 +1,161 @@
+import { Button } from "@/components/ui/button"
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuTrigger
+} from "@/components/ui/dropdown-menu"
+import { Input } from "@/components/ui/input"
+import { ChatbotUIContext } from "@/context/context"
+import { Tables } from "@/supabase/types"
+import {
+ IconBolt,
+ IconChevronDown,
+ IconCircleCheckFilled
+} from "@tabler/icons-react"
+import { FC, useContext, useEffect, useRef, useState } from "react"
+
+interface AssistantToolSelectProps {
+ selectedAssistantTools: Tables<"tools">[]
+ onAssistantToolsSelect: (tool: Tables<"tools">) => void
+}
+
+export const AssistantToolSelect: FC
+ {contentType === "files" ? (
+
+
+ {selected && (
+
+ ).type} size={24} />
+
+ ) : (
+
+
+ )}
+
+ {item.name}
+
+
+ )
+}
diff --git a/chatbot-ui-main/components/sidebar/items/assistants/create-assistant.tsx b/chatbot-ui-main/components/sidebar/items/assistants/create-assistant.tsx
new file mode 100644
index 0000000000..754736661a
--- /dev/null
+++ b/chatbot-ui-main/components/sidebar/items/assistants/create-assistant.tsx
@@ -0,0 +1,211 @@
+import { SidebarCreateItem } from "@/components/sidebar/items/all/sidebar-create-item"
+import { ChatSettingsForm } from "@/components/ui/chat-settings-form"
+import ImagePicker from "@/components/ui/image-picker"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { ChatbotUIContext } from "@/context/context"
+import { ASSISTANT_DESCRIPTION_MAX, ASSISTANT_NAME_MAX } from "@/db/limits"
+import { Tables, TablesInsert } from "@/supabase/types"
+import { FC, useContext, useEffect, useState } from "react"
+import { AssistantRetrievalSelect } from "./assistant-retrieval-select"
+import { AssistantToolSelect } from "./assistant-tool-select"
+
+interface CreateAssistantProps {
+ isOpen: boolean
+ onOpenChange: (isOpen: boolean) => void
+}
+
+export const CreateAssistant: FC
+
+
+ {selected && (
+
+
+
+ {tool.name}
+
+
+
+ setName(e.target.value)}
+ maxLength={ASSISTANT_NAME_MAX}
+ />
+
+
+
+
+
+ setDescription(e.target.value)}
+ maxLength={ASSISTANT_DESCRIPTION_MAX}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+ {checkIfModelIsToolCompatible() ? (
+
+
+
+
+ ) : (
+
+ Model is not compatible with tools.
+
+ )}
+
+ )}
+ onOpenChange={onOpenChange}
+ />
+ )
+}
diff --git a/chatbot-ui-main/components/sidebar/items/chat/chat-item.tsx b/chatbot-ui-main/components/sidebar/items/chat/chat-item.tsx
new file mode 100644
index 0000000000..62c2d98c54
--- /dev/null
+++ b/chatbot-ui-main/components/sidebar/items/chat/chat-item.tsx
@@ -0,0 +1,110 @@
+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"}`}
+ >
+
+
+ )
+}
diff --git a/chatbot-ui-main/components/sidebar/items/chat/delete-chat.tsx b/chatbot-ui-main/components/sidebar/items/chat/delete-chat.tsx
new file mode 100644
index 0000000000..868e38a34d
--- /dev/null
+++ b/chatbot-ui-main/components/sidebar/items/chat/delete-chat.tsx
@@ -0,0 +1,80 @@
+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
+
+ )
+}
diff --git a/chatbot-ui-main/components/sidebar/items/collections/collection-item.tsx b/chatbot-ui-main/components/sidebar/items/collections/collection-item.tsx
new file mode 100644
index 0000000000..e6b1faa4a1
--- /dev/null
+++ b/chatbot-ui-main/components/sidebar/items/collections/collection-item.tsx
@@ -0,0 +1,117 @@
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { COLLECTION_DESCRIPTION_MAX, COLLECTION_NAME_MAX } from "@/db/limits"
+import { Tables } from "@/supabase/types"
+import { CollectionFile } from "@/types"
+import { IconBooks } from "@tabler/icons-react"
+import { FC, useState } from "react"
+import { SidebarItem } from "../all/sidebar-display-item"
+import { CollectionFileSelect } from "./collection-file-select"
+
+interface CollectionItemProps {
+ collection: Tables<"collections">
+}
+
+export const CollectionItem: FC
+
+
+ {selected && (
+
+
+
+ {file.name}
+
+
+
+
+ !renderState.selectedCollectionFiles.some(
+ selectedFile =>
+ selectedFile.id === startingFile.id
+ )
+ ),
+ ...renderState.selectedCollectionFiles.filter(
+ selectedFile =>
+ !renderState.startingCollectionFiles.some(
+ startingFile =>
+ startingFile.id === selectedFile.id
+ )
+ )
+ ]
+ }
+ onCollectionFileSelect={file =>
+ handleFileSelect(file, renderState.setSelectedCollectionFiles)
+ }
+ />
+
+
+
+
+
+ setName(e.target.value)}
+ maxLength={COLLECTION_NAME_MAX}
+ />
+
+
+
+
+
+ setDescription(e.target.value)}
+ maxLength={COLLECTION_DESCRIPTION_MAX}
+ />
+
+
+ )
+ }}
+ />
+ )
+}
diff --git a/chatbot-ui-main/components/sidebar/items/collections/create-collection.tsx b/chatbot-ui-main/components/sidebar/items/collections/create-collection.tsx
new file mode 100644
index 0000000000..d2c24370ee
--- /dev/null
+++ b/chatbot-ui-main/components/sidebar/items/collections/create-collection.tsx
@@ -0,0 +1,100 @@
+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}
+ />
+
+
+ )}
+ />
+ )
+}
diff --git a/chatbot-ui-main/components/sidebar/items/files/create-file.tsx b/chatbot-ui-main/components/sidebar/items/files/create-file.tsx
new file mode 100644
index 0000000000..20220d3bce
--- /dev/null
+++ b/chatbot-ui-main/components/sidebar/items/files/create-file.tsx
@@ -0,0 +1,93 @@
+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}
+ />
+
+
+ )}
+ />
+ )
+}
diff --git a/chatbot-ui-main/components/sidebar/items/files/file-item.tsx b/chatbot-ui-main/components/sidebar/items/files/file-item.tsx
new file mode 100644
index 0000000000..7941e2e7b3
--- /dev/null
+++ b/chatbot-ui-main/components/sidebar/items/files/file-item.tsx
@@ -0,0 +1,95 @@
+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}`
+}
diff --git a/chatbot-ui-main/components/sidebar/items/folders/delete-folder.tsx b/chatbot-ui-main/components/sidebar/items/folders/delete-folder.tsx
new file mode 100644
index 0000000000..8a6fb0fae3
--- /dev/null
+++ b/chatbot-ui-main/components/sidebar/items/folders/delete-folder.tsx
@@ -0,0 +1,141 @@
+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)}
+ >
+
+ )
+}
diff --git a/chatbot-ui-main/components/sidebar/items/folders/update-folder.tsx b/chatbot-ui-main/components/sidebar/items/folders/update-folder.tsx
new file mode 100644
index 0000000000..d98833e2f7
--- /dev/null
+++ b/chatbot-ui-main/components/sidebar/items/folders/update-folder.tsx
@@ -0,0 +1,76 @@
+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 && (
+
+
+
+ {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))}
+ />
+
+
+ )}
+ />
+ )
+}
diff --git a/chatbot-ui-main/components/sidebar/items/models/model-item.tsx b/chatbot-ui-main/components/sidebar/items/models/model-item.tsx
new file mode 100644
index 0000000000..b6f6f74d1b
--- /dev/null
+++ b/chatbot-ui-main/components/sidebar/items/models/model-item.tsx
@@ -0,0 +1,102 @@
+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))}
+ />
+
+
+ )}
+ />
+ )
+}
diff --git a/chatbot-ui-main/components/sidebar/items/presets/create-preset.tsx b/chatbot-ui-main/components/sidebar/items/presets/create-preset.tsx
new file mode 100644
index 0000000000..aa3b6c8b6b
--- /dev/null
+++ b/chatbot-ui-main/components/sidebar/items/presets/create-preset.tsx
@@ -0,0 +1,81 @@
+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)}
+ />
+
+
+
+
+
+ setIsTyping(true)}
+ onCompositionEnd={() => setIsTyping(false)}
+ />
+
+
+ )}
+ />
+ )
+}
diff --git a/chatbot-ui-main/components/sidebar/items/prompts/prompt-item.tsx b/chatbot-ui-main/components/sidebar/items/prompts/prompt-item.tsx
new file mode 100644
index 0000000000..921e3157f8
--- /dev/null
+++ b/chatbot-ui-main/components/sidebar/items/prompts/prompt-item.tsx
@@ -0,0 +1,57 @@
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { TextareaAutosize } from "@/components/ui/textarea-autosize"
+import { PROMPT_NAME_MAX } from "@/db/limits"
+import { Tables } from "@/supabase/types"
+import { IconPencil } from "@tabler/icons-react"
+import { FC, useState } from "react"
+import { SidebarItem } from "../all/sidebar-display-item"
+
+interface PromptItemProps {
+ prompt: Tables<"prompts">
+}
+
+export const PromptItem: FC
+
+
+ setName(e.target.value)}
+ maxLength={PROMPT_NAME_MAX}
+ onCompositionStart={() => setIsTyping(true)}
+ onCompositionEnd={() => setIsTyping(false)}
+ />
+
+
+
+
+
+ setIsTyping(true)}
+ onCompositionEnd={() => setIsTyping(false)}
+ />
+
+
+ )}
+ />
+ )
+}
diff --git a/chatbot-ui-main/components/sidebar/items/tools/create-tool.tsx b/chatbot-ui-main/components/sidebar/items/tools/create-tool.tsx
new file mode 100644
index 0000000000..b134246a1a
--- /dev/null
+++ b/chatbot-ui-main/components/sidebar/items/tools/create-tool.tsx
@@ -0,0 +1,172 @@
+import { SidebarCreateItem } from "@/components/sidebar/items/all/sidebar-create-item"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { TextareaAutosize } from "@/components/ui/textarea-autosize"
+import { ChatbotUIContext } from "@/context/context"
+import { TOOL_DESCRIPTION_MAX, TOOL_NAME_MAX } from "@/db/limits"
+import { validateOpenAPI } from "@/lib/openapi-conversion"
+import { TablesInsert } from "@/supabase/types"
+import { FC, useContext, useState } from "react"
+
+interface CreateToolProps {
+ isOpen: boolean
+ onOpenChange: (isOpen: boolean) => void
+}
+
+export const CreateTool: FC
+
+
+ setName(e.target.value)}
+ maxLength={TOOL_NAME_MAX}
+ />
+
+
+
+
+
+ setDescription(e.target.value)}
+ maxLength={TOOL_DESCRIPTION_MAX}
+ />
+
+
+ {/*
+
+
+ setUrl(e.target.value)}
+ />
+
*/}
+
+ {/*
+
*/}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ setSchema(value)
+
+ try {
+ const parsedSchema = JSON.parse(value)
+ validateOpenAPI(parsedSchema)
+ .then(() => setSchemaError("")) // Clear error if validation is successful
+ .catch(error => setSchemaError(error.message)) // Set specific validation error message
+ } catch (error) {
+ setSchemaError("Invalid JSON format") // Set error for invalid JSON format
+ }
+ }}
+ minRows={15}
+ />
+
+
+
+ )}
+ onOpenChange={onOpenChange}
+ />
+ )
+}
diff --git a/chatbot-ui-main/components/sidebar/items/tools/tool-item.tsx b/chatbot-ui-main/components/sidebar/items/tools/tool-item.tsx
new file mode 100644
index 0000000000..fb8d54a442
--- /dev/null
+++ b/chatbot-ui-main/components/sidebar/items/tools/tool-item.tsx
@@ -0,0 +1,166 @@
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { TextareaAutosize } from "@/components/ui/textarea-autosize"
+import { TOOL_DESCRIPTION_MAX, TOOL_NAME_MAX } from "@/db/limits"
+import { validateOpenAPI } from "@/lib/openapi-conversion"
+import { Tables } from "@/supabase/types"
+import { IconBolt } from "@tabler/icons-react"
+import { FC, useState } from "react"
+import { SidebarItem } from "../all/sidebar-display-item"
+
+interface ToolItemProps {
+ tool: Tables<"tools">
+}
+
+export const ToolItem: FC{schemaError}
+
+
+
+ setName(e.target.value)}
+ maxLength={TOOL_NAME_MAX}
+ />
+
+
+
+
+
+ setDescription(e.target.value)}
+ maxLength={TOOL_DESCRIPTION_MAX}
+ />
+
+
+ {/*
+
+
+ setUrl(e.target.value)}
+ />
+
*/}
+
+ {/*
+
*/}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ setSchema(value)
+
+ try {
+ const parsedSchema = JSON.parse(value)
+ validateOpenAPI(parsedSchema)
+ .then(() => setSchemaError("")) // Clear error if validation is successful
+ .catch(error => setSchemaError(error.message)) // Set specific validation error message
+ } catch (error) {
+ setSchemaError("Invalid JSON format") // Set error for invalid JSON format
+ }
+ }}
+ minRows={15}
+ />
+
+
+
+ )}
+ />
+ )
+}
diff --git a/chatbot-ui-main/components/sidebar/sidebar-content.tsx b/chatbot-ui-main/components/sidebar/sidebar-content.tsx
new file mode 100644
index 0000000000..1c5bd0860c
--- /dev/null
+++ b/chatbot-ui-main/components/sidebar/sidebar-content.tsx
@@ -0,0 +1,50 @@
+import { Tables } from "@/supabase/types"
+import { ContentType, DataListType } from "@/types"
+import { FC, useState } from "react"
+import { SidebarCreateButtons } from "./sidebar-create-buttons"
+import { SidebarDataList } from "./sidebar-data-list"
+import { SidebarSearch } from "./sidebar-search"
+
+interface SidebarContentProps {
+ contentType: ContentType
+ data: DataListType
+ folders: Tables<"folders">[]
+}
+
+export const SidebarContent: FC{schemaError}
+
+
+ )
+}
diff --git a/chatbot-ui-main/components/sidebar/sidebar-create-buttons.tsx b/chatbot-ui-main/components/sidebar/sidebar-create-buttons.tsx
new file mode 100644
index 0000000000..934365471f
--- /dev/null
+++ b/chatbot-ui-main/components/sidebar/sidebar-create-buttons.tsx
@@ -0,0 +1,157 @@
+import { useChatHandler } from "@/components/chat/chat-hooks/use-chat-handler"
+import { ChatbotUIContext } from "@/context/context"
+import { createFolder } from "@/db/folders"
+import { ContentType } from "@/types"
+import { IconFolderPlus, IconPlus } from "@tabler/icons-react"
+import { FC, useContext, useState } from "react"
+import { Button } from "../ui/button"
+import { CreateAssistant } from "./items/assistants/create-assistant"
+import { CreateCollection } from "./items/collections/create-collection"
+import { CreateFile } from "./items/files/create-file"
+import { CreateModel } from "./items/models/create-model"
+import { CreatePreset } from "./items/presets/create-preset"
+import { CreatePrompt } from "./items/prompts/create-prompt"
+import { CreateTool } from "./items/tools/create-tool"
+
+interface SidebarCreateButtonsProps {
+ contentType: ContentType
+ hasData: boolean
+}
+
+export const SidebarCreateButtons: FC
+ 0}
+ />
+
+
+
+
+
+
+
+
+ {hasData && (
+
+ )}
+
+ {isCreatingPrompt && (
+
+ )
+}
diff --git a/chatbot-ui-main/components/sidebar/sidebar-data-list.tsx b/chatbot-ui-main/components/sidebar/sidebar-data-list.tsx
new file mode 100644
index 0000000000..ee9ba44e0f
--- /dev/null
+++ b/chatbot-ui-main/components/sidebar/sidebar-data-list.tsx
@@ -0,0 +1,344 @@
+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 && (
+
+
+
+
+ )
+}
diff --git a/chatbot-ui-main/components/sidebar/sidebar-search.tsx b/chatbot-ui-main/components/sidebar/sidebar-search.tsx
new file mode 100644
index 0000000000..b451bc8442
--- /dev/null
+++ b/chatbot-ui-main/components/sidebar/sidebar-search.tsx
@@ -0,0 +1,23 @@
+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
+
+ )}
+
+ {(dataWithFolders.length > 0 || dataWithoutFolders.length > 0) && (
+
+ 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)}
+
+ )
+ })}
+
+
+
+
+ Profile Settings
}
+ trigger={
+ {/* TODO */}
+ {/* Import
} trigger={
+
+
+
+
+ {(() => {
+ switch (contentType) {
+ case "chats":
+ return renderSidebarContent("chats", chats, chatFolders)
+
+ case "presets":
+ return renderSidebarContent("presets", presets, presetFolders)
+
+ case "prompts":
+ return renderSidebarContent("prompts", prompts, promptFolders)
+
+ case "files":
+ return renderSidebarContent("files", files, filesFolders)
+
+ case "collections":
+ return renderSidebarContent(
+ "collections",
+ collections,
+ collectionFolders
+ )
+
+ case "assistants":
+ return renderSidebarContent(
+ "assistants",
+ assistants,
+ assistantFolders
+ )
+
+ case "tools":
+ return renderSidebarContent("tools", tools, toolFolders)
+
+ case "models":
+ return renderSidebarContent("models", models, modelFolders)
+
+ default:
+ return null
+ }
+ })()}
+ {children}
+
+
+ Advanced Settings
+ {isOpen ? (
+