Workspace route (#1360)

* initial work

* switcher works

* adjust middleware

* fix new chat

* fix azure models

* adjust workspace page

* fix setup route

Author: mckaywrigley

app/[locale]/chat/[chatid]/page.tsx renamed to app/[locale]/[workspaceid]/chat/[chatid]/page.tsx

@@ -0,0 +1,187 @@
+"use client"
+
+import { Dashboard } from "@/components/ui/dashboard"
+import { ChatbotUIContext } from "@/context/context"
+import { getAssistantWorkspacesByWorkspaceId } from "@/db/assistants"
+import { getChatsByWorkspaceId } from "@/db/chats"
+import { getCollectionWorkspacesByWorkspaceId } from "@/db/collections"
+import { getFileWorkspacesByWorkspaceId } from "@/db/files"
+import { getFoldersByWorkspaceId } from "@/db/folders"
+import { getModelWorkspacesByWorkspaceId } from "@/db/models"
+import { getPresetWorkspacesByWorkspaceId } from "@/db/presets"
+import { getPromptWorkspacesByWorkspaceId } from "@/db/prompts"
+import { getAssistantImageFromStorage } from "@/db/storage/assistant-images"
+import { getToolWorkspacesByWorkspaceId } from "@/db/tools"
+import { getWorkspaceById } from "@/db/workspaces"
+import { convertBlobToBase64 } from "@/lib/blob-to-b64"
+import { supabase } from "@/lib/supabase/browser-client"
+import { LLMID } from "@/types"
+import { useParams, useRouter } from "next/navigation"
+import { ReactNode, useContext, useEffect, useState } from "react"
+import Loading from "../loading"
+
+interface WorkspaceLayoutProps {
+  children: ReactNode
+}
+
+export default function WorkspaceLayout({ children }: WorkspaceLayoutProps) {
+  const router = useRouter()
+
+  const params = useParams()
+  const workspaceId = params.workspaceid as string
+
+  const {
+    setChatSettings,
+    setAssistants,
+    setAssistantImages,
+    setChats,
+    setCollections,
+    setFolders,
+    setFiles,
+    setPresets,
+    setPrompts,
+    setTools,
+    setModels,
+    selectedWorkspace,
+    setSelectedWorkspace,
+    setSelectedChat,
+    setChatMessages,
+    setUserInput,
+    setIsGenerating,
+    setFirstTokenReceived,
+    setChatFiles,
+    setChatImages,
+    setNewMessageFiles,
+    setNewMessageImages,
+    setShowFilesDisplay
+  } = useContext(ChatbotUIContext)
+
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    ;(async () => {
+      const session = (await supabase.auth.getSession()).data.session
+
+      if (!session) {
+        return router.push("/login")
+      } else {
+        await fetchWorkspaceData(workspaceId)
+      }
+    })()
+  }, [])
+
+  useEffect(() => {
+    const isInChat = window?.location?.pathname === "/chat"
+
+    if (!selectedWorkspace && !isInChat) {
+      setLoading(false)
+      return
+    }
+
+    ;(async () => await fetchWorkspaceData(workspaceId))()
+
+    setUserInput("")
+    setChatMessages([])
+    setSelectedChat(null)
+
+    setIsGenerating(false)
+    setFirstTokenReceived(false)
+
+    setChatFiles([])
+    setChatImages([])
+    setNewMessageFiles([])
+    setNewMessageImages([])
+    setShowFilesDisplay(false)
+  }, [workspaceId])
+
+  const fetchWorkspaceData = async (workspaceId: string) => {
+    setLoading(true)
+
+    const workspace = await getWorkspaceById(workspaceId)
+    setSelectedWorkspace(workspace)
+
+    const assistantData = await getAssistantWorkspacesByWorkspaceId(workspaceId)
+    setAssistants(assistantData.assistants)
+
+    for (const assistant of assistantData.assistants) {
+      let url = ""
+
+      if (assistant.image_path) {
+        url = (await getAssistantImageFromStorage(assistant.image_path)) || ""
+      }
+
+      if (url) {
+        const response = await fetch(url)
+        const blob = await response.blob()
+        const base64 = await convertBlobToBase64(blob)
+
+        setAssistantImages(prev => [
+          ...prev,
+          {
+            assistantId: assistant.id,
+            path: assistant.image_path,
+            base64,
+            url
+          }
+        ])
+      } else {
+        setAssistantImages(prev => [
+          ...prev,
+          {
+            assistantId: assistant.id,
+            path: assistant.image_path,
+            base64: "",
+            url
+          }
+        ])
+      }
+    }
+
+    const chats = await getChatsByWorkspaceId(workspaceId)
+    setChats(chats)
+
+    const collectionData =
+      await getCollectionWorkspacesByWorkspaceId(workspaceId)
+    setCollections(collectionData.collections)
+
+    const folders = await getFoldersByWorkspaceId(workspaceId)
+    setFolders(folders)
+
+    const fileData = await getFileWorkspacesByWorkspaceId(workspaceId)
+    setFiles(fileData.files)
+
+    const presetData = await getPresetWorkspacesByWorkspaceId(workspaceId)
+    setPresets(presetData.presets)
+
+    const promptData = await getPromptWorkspacesByWorkspaceId(workspaceId)
+    setPrompts(promptData.prompts)
+
+    const toolData = await getToolWorkspacesByWorkspaceId(workspaceId)
+    setTools(toolData.tools)
+
+    const modelData = await getModelWorkspacesByWorkspaceId(workspaceId)
+    setModels(modelData.models)
+
+    setChatSettings({
+      model: (workspace?.default_model || "gpt-4-1106-preview") as LLMID,
+      prompt:
+        workspace?.default_prompt ||
+        "You are a friendly, helpful AI assistant.",
+      temperature: workspace?.default_temperature || 0.5,
+      contextLength: workspace?.default_context_length || 4096,
+      includeProfileContext: workspace?.include_profile_context || true,
+      includeWorkspaceInstructions:
+        workspace?.include_workspace_instructions || true,
+      embeddingsProvider:
+        (workspace?.embeddings_provider as "openai" | "local") || "openai"
+    })
+
+    setLoading(false)
+  }
+
+  if (loading) {
+    return <Loading />
+  }
+
+  return <Dashboard>{children}</Dashboard>
+}

app/[locale]/chat/page.tsx renamed to app/[locale]/[workspaceid]/chat/page.tsx

@@ -0,0 +1,14 @@
+"use client"
+
+import { ChatbotUIContext } from "@/context/context"
+import { useContext } from "react"
+
+export default function WorkspacePage() {
+  const { selectedWorkspace } = useContext(ChatbotUIContext)
+
+  return (
+    <div className="flex h-screen w-full flex-col items-center justify-center">
+      <div className="text-4xl">{selectedWorkspace?.name}</div>
+    </div>
+  )
+}

app/[locale]/[workspaceid]/layout.tsx

@@ -5,10 +5,10 @@ import { Label } from "@/components/ui/label"
 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"
-import { get } from "@vercel/edge-config"
 
 export const metadata: Metadata = {
   title: "Login"
@@ -34,7 +34,18 @@ export default async function Login({
   const session = (await supabase.auth.getSession()).data.session
 
   if (session) {
-    return redirect("/chat")
+    const { data: homeWorkspace, error } = await supabase
+      .from("workspaces")
+      .select("*")
+      .eq("user_id", session.user.id)
+      .eq("is_home", true)
+      .single()
+
+    if (!homeWorkspace) {
+      throw new Error(error.message)
+    }
+
+    return redirect(`/${homeWorkspace.id}/chat`)
   }
 
   const signIn = async (formData: FormData) => {
@@ -54,7 +65,20 @@ export default async function Login({
       return redirect(`/login?message=${error.message}`)
     }
 
-    return redirect("/chat")
+    const { data: homeWorkspace, error: homeWorkspaceError } = await supabase
+      .from("workspaces")
+      .select("*")
+      .eq("user_id", data.user.id)
+      .eq("is_home", true)
+      .single()
+
+    if (!homeWorkspace) {
+      throw new Error(
+        homeWorkspaceError?.message || "An unexpected error occurred"
+      )
+    }
+
+    return redirect(`/${homeWorkspace.id}/chat`)
   }
 
   const signUp = async (formData: FormData) => {

app/[locale]/[workspaceid]/page.tsx

@@ -18,7 +18,7 @@ export default function HomePage() {
 
       <Link
         className="mt-4 flex w-[200px] items-center justify-center rounded-md bg-blue-500 p-2 font-semibold"
-        href="/chat"
+        href="/login"
       >
         Start Chatting
         <IconArrowRight className="ml-1" size={20} />

app/[locale]/chat/layout.tsx

@@ -2,7 +2,10 @@
 
 import { ChatbotUIContext } from "@/context/context"
 import { getProfileByUserId, updateProfile } from "@/db/profile"
-import { getWorkspacesByUserId } from "@/db/workspaces"
+import {
+  getHomeWorkspaceByUserId,
+  getWorkspacesByUserId
+} from "@/db/workspaces"
 import {
   fetchHostedModels,
   fetchOpenRouterModels
@@ -86,7 +89,10 @@ export default function SetupPage() {
             setAvailableOpenRouterModels(openRouterModels)
           }
 
-          return router.push("/chat")
+          const homeWorkspaceId = await getHomeWorkspaceByUserId(
+            session.user.id
+          )
+          return router.push(`/${homeWorkspaceId}/chat`)
         }
       }
     })()
@@ -144,7 +150,7 @@ export default function SetupPage() {
     setSelectedWorkspace(homeWorkspace!)
     setWorkspaces(workspaces)
 
-    router.refresh()
+    return router.push(`/${homeWorkspace?.id}/chat`)
   }
 
   const renderStep = (stepNum: number) => {

app/[locale]/login/page.tsx

@@ -73,7 +73,9 @@ export const useChatHandler = () => {
     }
   }, [isPromptPickerOpen, isAtPickerOpen, isToolPickerOpen])
 
-  const handleNewChat = () => {
+  const handleNewChat = async () => {
+    if (!selectedWorkspace) return
+
     setUserInput("")
     setChatMessages([])
     setSelectedChat(null)
@@ -138,7 +140,7 @@ export const useChatHandler = () => {
       })
     }
 
-    return router.push("/chat")
+    return router.push(`/${selectedWorkspace.id}/chat`)
   }
 
   const handleFocusChatInput = () => {

app/[locale]/page.tsx

@@ -60,7 +60,7 @@ export const SidebarItem: FC<SidebarItemProps> = ({
       setChats(prevState => [createdChat, ...prevState])
       setSelectedAssistant(assistant)
 
-      return router.push(`/chat/${createdChat.id}`)
+      return router.push(`/${selectedWorkspace.id}/chat/${createdChat.id}`)
     },
     tools: async (item: any) => {},
     models: async (item: any) => {}