Bugfix/workspace navigation v2 | Refactor metadata flow and simplify workspace logic

apps/pro-web/app/actions/thread.actions.ts

@@ -722,7 +722,7 @@ export async function getUserWorkspaceInitialState(
 	const activeDepartment = activeOrganization
 		? (() => {
 				const deptName = departmentsByOrgArray[activeOrganization]?.[0]
-				if (!deptName) return ['General', 1] as [string, number] // Default to General
+				if (!deptName) return null
 
 				// Get department ID from our chatbot-based mapping
 				const deptMap = departmentsByOrgFromChatbots[activeOrganization]

apps/pro-web/components/routes/pro/pro.tsx

@@ -113,15 +113,13 @@ export function Pro({
 
 	return (
 		<>
-			{!activeOrganization &&
-				(organizationList?.length || 0) > 0 &&
-				!isWorkspaceStructureLoading && (
-					<OnboardingWelcome
-						isOpen={showOnboarding || !activeOrganization}
-						onOpen={() => setShowOnboarding(true)}
-						onClose={() => setShowOnboarding(false)}
-					/>
-				)}
+			{!activeOrganization || organizationList?.length === 0 ? (
+				<OnboardingWelcome
+					isOpen={showOnboarding}
+					onOpen={() => setShowOnboarding(true)}
+					onClose={() => setShowOnboarding(false)}
+				/>
+			) : null}
 			<AnimatePresence>
 				{shouldShowChatPanel && (
 					<ChatPanelPro

apps/pro-web/components/routes/thread/user-thread-panel.tsx

@@ -48,6 +48,7 @@ import {
 	getThreads,
 } from '@/services/hasura'
 import type { GetBrowseThreadsParams } from '@/services/hasura/hasura.service.type'
+import type { ThreadOrganizationMetadata } from '@/types/thread.types'
 import { debounce, uniqBy } from 'lodash'
 import type { Thread, User } from 'mb-genql'
 import type { Session } from 'next-auth'
@@ -123,7 +124,7 @@ export default function UserThreadPanel({
 		totalThreads: number
 	}>({
 		threads: [],
-		count: 0,
+		count: initialCount,
 		totalThreads: 0,
 	})
 	const { totalThreads } = state
@@ -183,17 +184,36 @@ export default function UserThreadPanel({
 	}
 
 	const threads =
-		state.threads.length > initialThreads.length || isAdminMode || searchTerm
-			? state.threads
-			: initialThreads
-	const count =
-		state.count > initialCount || isAdminMode || searchTerm
-			? state.count
-			: initialCount
-	const hasWorkspaceContext =
-		Boolean(activeOrganization) &&
-		Boolean(activeWorkspaceDepartment?.[0]) &&
-		Boolean(activeProject)
+		useMemo(
+			() =>
+				(state.threads.length > initialThreads.length ||
+				isAdminMode ||
+				searchTerm
+					? state.threads
+					: initialThreads
+				).filter((thread) => {
+					const threadOrgData = thread.metadata
+						.organizationData as ThreadOrganizationMetadata
+					return (
+						threadOrgData.organization === activeOrganization &&
+						(threadOrgData.department === activeWorkspaceDepartment?.[0] ||
+							(activeProject && threadOrgData.project === activeProject))
+					)
+				}),
+			[
+				state.threads,
+				initialThreads,
+				isAdminMode,
+				searchTerm,
+				activeOrganization,
+				activeWorkspaceDepartment,
+				activeProject,
+			],
+		) ?? []
+	const count = state.count
+	// state.count !== 0 || state.count > initialCount || isAdminMode || searchTerm
+	// 	? state.count
+	// 	: initialCount
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
 	const loadMore = useCallback(async () => {
@@ -234,13 +254,11 @@ export default function UserThreadPanel({
 				departmentId: activeDepartment,
 				chatbotName,
 				keyword: searchTerm,
-				...(hasWorkspaceContext && {
-					organizationData: {
-						organization: activeOrganization as string,
-						department: activeWorkspaceDepartment?.[0] as string,
-						project: activeProject as string,
-					},
-				}),
+				organizationData: {
+					organization: activeOrganization || undefined,
+					department: activeWorkspaceDepartment?.[0],
+					project: activeProject || undefined,
+				},
 			})
 		}
 
@@ -374,19 +392,23 @@ export default function UserThreadPanel({
 			const currentFetchId = Date.now() // Generate a unique identifier for the current fetch
 			fetchIdRef.current = currentFetchId
 
-			const { threads: newThreads, count } = await getThreads({
+			const getThreadsParams = {
 				jwt: session?.user?.hasuraJwt as string,
 				userId: session?.user.id,
 				limit: PAGE_SIZE,
 				departmentId: categoryResponse?.categoryId || activeDepartment,
 				chatbotName: chatbotName || activeChatbot?.name,
-				...(hasWorkspaceContext && {
-					organizationData: {
-						organization: activeOrganization as string,
-						department: activeWorkspaceDepartment?.[0] as string,
-						project: activeProject as string,
-					},
-				}),
+				organizationData: {
+					organization: activeOrganization || undefined,
+					department: activeWorkspaceDepartment?.[0],
+					project: activeProject || undefined,
+				},
+			}
+			const { threads: newThreads, count } = await getThreads(getThreadsParams)
+
+			console.log('newThreads + getThreadsParams', {
+				newThreads,
+				getThreadsParams,
 			})
 
 			// Check if the fetchId matches the current fetchId stored in the ref
@@ -451,13 +473,11 @@ export default function UserThreadPanel({
 				departmentId: activeDepartment,
 				chatbotName,
 				keyword: term,
-				...(hasWorkspaceContext && {
-					organizationData: {
-						organization: activeOrganization as string,
-						department: activeWorkspaceDepartment?.[0] as string,
-						project: activeProject as string,
-					},
-				}),
+				organizationData: {
+					organization: activeOrganization || undefined,
+					department: activeWorkspaceDepartment?.[0],
+					project: activeProject || undefined,
+				},
 			})
 		}
 

apps/pro-web/components/routes/workspace/workspace-breadcrumb.tsx

@@ -17,10 +17,10 @@ import { useAddProject, useUserId } from '@/lib/queries'
 import { getCanonicalDomain } from '@/lib/url'
 import type { WorkspaceDocumentMetadata } from '@/types/thread.types'
 import { toSlug, useLocalStorage } from 'mb-lib'
-import { useMemo, useState } from 'react'
+import { startTransition, useMemo, useState } from 'react'
 
 export function WorkspaceBreadcrumb() {
-	const { navigateTo } = useSidebar()
+	const { navigateTo, setActiveDepartment } = useSidebar()
 	const {
 		activeThread,
 		isOpenPopup,
@@ -39,7 +39,6 @@ export function WorkspaceBreadcrumb() {
 		userDocuments,
 		organizationList,
 		setActiveOrganization,
-		setActiveDepartment,
 		setActiveProject,
 		setActiveDocument,
 	} = workspaceContext
@@ -86,7 +85,7 @@ export function WorkspaceBreadcrumb() {
 	}
 
 	const changeDepartment = async (dept: [string, number]) => {
-		setActiveDepartment(dept)
+		setActiveDepartment(dept[1])
 
 		// Get projects in new department
 		const newProjects =
@@ -289,14 +288,24 @@ export function WorkspaceBreadcrumb() {
 						label="Organization"
 						value={activeOrganization}
 						options={organizationList || []}
-						onSelect={(v) => {
-							if (v === activeOrganization) return
-							setActiveOrganization(v === 'None' ? null : v)
-							setActiveDepartment(null)
-							setActiveProject(null)
+						onSelect={(organization) => {
+							if (organization === activeOrganization) return
+
+							const projectsByOrg = activeDepartment?.[0]
+								? projectsByDept[organization]?.[activeDepartment?.[0]]
+								: []
+
+							setActiveOrganization(
+								organization === 'None' ? null : organization,
+							)
+							setActiveProject(projectsByOrg?.[0] || null)
 							setActiveDocument(null)
-							if (isOpenPopup) setIsOpenPopup(false)
-							setActiveThread(null)
+							setShouldRefreshThreads(true)
+
+							startTransition(() => {
+								setIsOpenPopup(false)
+								setActiveThread(null)
+							})
 						}}
 						addType="organization"
 						onNewItem={onNewItem}

apps/pro-web/lib/hooks/use-mb-chat.tsx

@@ -1043,7 +1043,7 @@ export function MBChatProvider({ children }: { children: React.ReactNode }) {
 					metadata: {
 						organizationData: {
 							organization: activeOrganization,
-							department: activeDepartment?.[0] || 'General',
+							department: activeDepartment?.[0],
 							project: activeProject,
 						},
 					},

apps/pro-web/lib/hooks/use-workspace.tsx

@@ -250,9 +250,15 @@ export function WorkspaceProvider({
 	// Derived projectList (flatten) recomputed on changes
 	// biome-ignore lint/correctness/useExhaustiveDependencies: We need to hear the organization/project changes and the projects by dept
 	const projectList = useMemo(() => {
+		if (
+			!activeOrganization ||
+			!projectsByDept ||
+			!projectsByDept[activeOrganization]
+		)
+			return []
 		return Array.from(
 			new Set(
-				Object.values(projectsByDept).flatMap((deptMap) =>
+				Object.values(projectsByDept[activeOrganization]).flatMap((deptMap) =>
 					Object.values(deptMap).flat(),
 				),
 			),
@@ -329,9 +335,7 @@ export function WorkspaceProvider({
 					workspaceStructure?.activeOrganization ||
 					workspaceStructure?.organizationList[0],
 				department:
-					activeDepartment?.[0] ||
-					workspaceStructure?.activeDepartment?.[0] ||
-					'General',
+					activeDepartment?.[0] || workspaceStructure?.activeDepartment?.[0],
 			})
 
 			// Initialize document with type-appropriate content

apps/pro-web/lib/queries/use-workspace-mutations.ts

@@ -102,7 +102,18 @@ export function useAddOrganization(userId: string | undefined) {
 			}
 
 			// Create new organization data
-			let newOrgData: OrganizationData = { name, chatbots }
+			const doesOrgExist = currentStructure.organizationData.some(
+				(org) => org.name === name,
+			)
+
+			if (doesOrgExist) {
+				throw new Error('Organization with this name already exists')
+			}
+
+			let newOrgData: OrganizationData = {
+				name,
+				chatbots,
+			}
 
 			// If user is authenticated, save to database first to get the ID
 			try {

apps/pro-web/lib/queries/use-workspace-structure.ts

@@ -249,7 +249,9 @@ export function useWorkspaceStructure(
 						}
 					}
 
-					finalStructure.organizationList.sort()
+					finalStructure.organizationList = Array.from(
+						new Set(finalStructure.organizationList),
+					).sort()
 
 					// Merge departments and projects for all orgs
 					for (const orgName of sourceToMerge.organizationList) {
@@ -332,7 +334,12 @@ export function useWorkspaceStructure(
 					}
 
 					// Second pass: ensure all projects exist in all departments for each org
-					for (const [org, projects] of projectsByOrg.entries()) {
+					for (const org of finalStructure.organizationList) {
+						const orgProjects = projectsByOrg.get(org)
+						const projects = orgProjects
+							? Array.from(orgProjects)
+							: ['Project 1']
+
 						const departments = finalStructure.departmentsByOrg[org] || []
 
 						// Initialize projectsByDept for this org if needed

apps/pro-web/services/hasura/hasura.service.ts

@@ -358,7 +358,7 @@ export async function getThreads({
 	keyword,
 	organizationData,
 }: GetThreadsParams & {
-	organizationData?: ThreadOrganizationMetadata
+	organizationData?: Partial<ThreadOrganizationMetadata>
 }) {
 	const client = getHasuraClient({ jwt })
 
@@ -415,7 +415,18 @@ export async function getThreads({
 					where: {
 						metadata: {
 							_contains: {
-								organizationData,
+								// We conditionally add only the fields that are defined. This way we filter correctly and with more accuracy.
+								organizationData: {
+									...(organizationData.organization
+										? { organization: organizationData.organization }
+										: {}),
+									...(organizationData.department
+										? { department: organizationData.department }
+										: {}),
+									...(organizationData.project
+										? { project: organizationData.project }
+										: {}),
+								},
 							},
 						},
 					},