Merge branch 'develop' into feat-profile-settings-clean

Author: AndlerRL

.github/copilot-instructions.md

@@ -0,0 +1,164 @@
+# GitHub Copilot Instructions
+
+## Development Philosophy & Environment Awareness
+
+### Understanding Your Working Environment
+
+Before implementing solutions, always consider the environment and tools you're working with:
+
+**Browser/DOM Environment:**
+
+- DOM operations are asynchronous and may require timing considerations
+- Browser APIs like `scrollTo()` can be unreliable without proper fallbacks
+- Always verify that DOM manipulations actually occurred (don't assume success)
+- Use multiple approaches: try modern APIs first, then fallback to legacy methods
+- Consider render timing - operations may need delays or `requestAnimationFrame`
+
+**React/Component Environment:**
+
+- State updates are asynchronous and may cause re-renders that interfere with DOM operations
+- useEffect dependencies can cause infinite loops if not carefully managed
+- Refs provide stable references to DOM elements across renders
+- Consider component lifecycle when timing DOM operations
+
+**General Environment Principles:**
+
+- **Test assumptions**: Don't assume an API call worked - verify the result
+- **Provide fallbacks**: Always have backup approaches for critical functionality
+- **Add debugging**: Include logging to understand what's actually happening
+- **Consider timing**: Many issues are timing-related, especially with async operations
+- **Understand constraints**: Each environment has limitations (browser security, React lifecycle, etc.)
+
+### Problem-Solving Approach
+
+1. **Analyze the environment** - What tools, frameworks, and constraints are you working with?
+2. **Understand the flow** - How do data, events, and updates move through the system?
+3. **Identify failure points** - Where might things go wrong? What are the edge cases?
+4. **Design resilient solutions** - Include error handling, fallbacks, and verification
+5. **Add observability** - Include logging/debugging to understand actual behavior
+6. **Test incrementally** - Verify each step works before building on it
+
+### Implementation Guidelines
+
+**For DOM/Browser Work:**
+
+- Use feature detection before modern APIs
+- Implement progressive enhancement (basic functionality first, enhancements after)
+- Add timing delays or RAF when DOM needs to settle
+- Verify operations completed successfully
+
+**For React/State Management:**
+
+- Minimize useEffect dependencies to prevent loops
+- Use refs for values that shouldn't trigger re-renders
+- Consider component lifecycle timing for DOM operations
+- Separate concerns: state updates vs DOM manipulation
+
+**For Any Environment:**
+
+- Start with the simplest approach that could work
+- Add complexity only when simple approaches fail
+- Document why complex solutions are needed
+- Make code readable - future developers need to understand the constraints you solved for
+
+This approach applies whether working with databases, APIs, file systems, mobile environments, or any other development context. The key is understanding your tools and environment before implementing solutions.
+
+## Masterbots Monorepo Architecture
+
+### Understanding the System Architecture
+
+The masterbots platform follows modern web application patterns with clear separation of concerns:
+
+**Core Applications:**
+
+- `apps/web/` - Main Next.js chat interface
+- `apps/pro-web/` - Pro workspace editor (current focus)
+- `apps/hasura/` - GraphQL API and database layer
+
+**Shared Packages:**
+
+- `packages/mb-genql/` - Generated GraphQL client for type-safe API calls
+- `packages/mb-lib/` - Shared utilities and helpers
+- `packages/mb-types/` - Common TypeScript type definitions
+- `packages/mb-env/` - Environment configuration
+- `packages/mb-drizzle/` - Database schema and migrations
+
+### State Management Patterns
+
+When working with the masterbots codebase, follow established patterns:
+
+**Provider Architecture:**
+
+- Use hierarchical provider structure for global state
+- Custom hooks (`useMBChat`, `useThread`, `useSidebar`, `useModel`) manage domain-specific concerns
+- Keep providers focused and compose them hierarchically
+
+**Data Flow:**
+
+- Follow unidirectional data flow: User Input → Component State → Custom Hooks → Server Actions → Database
+- Use `hasura.service.ts` for all GraphQL operations
+- Leverage IndexedDB for local caching and immediate UI updates
+
+**Component Composition:**
+
+- Build complex components by composing smaller, focused components
+- Separate presentation from business logic
+- Use custom hooks to encapsulate complex state logic
+
+### AI Integration Environment
+
+The platform integrates multiple AI providers with specific patterns:
+
+**Model Management:**
+
+- Use `getModelClientType()` to determine appropriate AI client
+- Route through `ai-main-call.actions` for unified AI API handling
+- Support multiple providers (OpenAI, Anthropic, etc.) through consistent interfaces
+
+**Chat System:**
+
+- `useMBChat` orchestrates all chat functionality
+- Integrate with AI SDK's `useChat` hook for streaming responses
+- Handle file attachments through hybrid storage (IndexedDB + Cloud Storage)
+
+### GraphQL Integration
+
+All data operations follow consistent patterns:
+
+**Service Layer:**
+
+- Use `hasura.service.ts` as the single point of GraphQL interaction
+- Generated types from `mb-genql` ensure type safety
+- Abstract Hasura-specific details behind service methods
+
+**Error Handling:**
+
+- GraphQL operations can fail at network, parsing, or business logic levels
+- Always handle partial success scenarios
+- Provide meaningful fallbacks for degraded functionality
+
+### Development Guidelines
+
+**File Organization:**
+
+- Components: `components/routes/[feature]/` for page-specific components
+- Shared Components: `components/shared/` for reusable UI elements
+- Hooks: `lib/hooks/` for custom React hooks
+- Services: `services/` for external API integrations
+- Types: `types/` for TypeScript definitions
+
+**External Documentation:**
+
+- [DeepWiki Documentation](https://deepwiki.com/bitcashorg/masterbots) - Comprehensive system overview
+- [Hasura GraphQL](https://hasura.io/docs/) - GraphQL API patterns
+- [Next.js App Router](https://nextjs.org/docs/app) - Routing and server components
+- [AI SDK](https://sdk.vercel.ai/docs) - AI integration patterns
+
+**Working with Pro Workspace:**
+
+- Editor components follow controlled/uncontrolled patterns
+- Markdown processing uses dedicated utility functions
+- Section management requires careful state synchronization
+- Auto-scroll and DOM manipulation need timing considerations (as demonstrated in recent work)
+
+Remember: Each layer of the stack has its own constraints and capabilities. Always consider the full data flow from user interaction to database persistence when implementing features.

apps/pro-web/components/layout/header/crumb-header.tsx

@@ -184,7 +184,7 @@ export function DocumentCrumb({
 }: {
 	activeProject: string
 	activeDocument: string
-	userDocuments: WorkspaceDocumentMetadata[]
+	userDocuments: { name: string }[]
 	activeThread: Thread | null
 	documentOptions: string[]
 	threadDocsByName: Map<string, { type?: 'text' | 'image' | 'spreadsheet' }>
@@ -253,7 +253,7 @@ export function DocumentCrumb({
 									return <FileSpreadsheetIcon className="size-4" />
 								return null
 							})()
-						) : opt !== 'None' && threadDocsByName.size > 0 ? (
+						) : opt !== 'None' ? (
 							<span className="text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground">
 								Draft
 							</span>

apps/pro-web/components/layout/header/header.tsx

@@ -19,13 +19,13 @@ import { getUserIndexedDBKeys } from '@/lib/hooks/use-chat-attachments'
 import { type IndexedDBItem, useIndexedDB } from '@/lib/hooks/use-indexed-db'
 import { useSidebar } from '@/lib/hooks/use-sidebar'
 import { useThread } from '@/lib/hooks/use-thread'
-import { useThreadDocuments } from '@/lib/hooks/use-thread-documents'
 import { useWorkspace } from '@/lib/hooks/use-workspace'
+import { useWorkspaceDocuments } from '@/lib/hooks/use-workspace-documents'
 import { getCanonicalDomain } from '@/lib/url'
 import { cn, getRouteColor, getRouteType } from '@/lib/utils'
 
 import type { WorkspaceDocumentMetadata } from '@/types/thread.types'
-import { uniq } from 'lodash'
+import { pick, uniq } from 'lodash'
 import { nanoid } from 'nanoid'
 import { useSession } from 'next-auth/react'
 import { useTheme } from 'next-themes'
@@ -85,6 +85,7 @@ function HeaderLink({
 export function Header() {
 	const { activeCategory, activeChatbot, setActiveCategory, setActiveChatbot } =
 		useSidebar()
+	const workspaceContext = useWorkspace()
 	const {
 		activeOrganization,
 		activeDepartment,
@@ -111,7 +112,7 @@ export function Header() {
 		addDepartment,
 		addProject,
 		addDocument,
-	} = useWorkspace()
+	} = workspaceContext
 	const {
 		isOpenPopup,
 		activeThread,
@@ -128,13 +129,10 @@ export function Header() {
 		() => getUserIndexedDBKeys(session?.user?.id),
 		[session?.user?.id],
 	)
-	const { getItem, getAllItemsRaw } = useIndexedDB(dbKeys) as unknown as {
-		getItem: (id: IDBValidKey) => Promise<IndexedDBItem>
-		getAllItemsRaw: () => Promise<IndexedDBItem[]>
-	}
+	const { getItem } = useIndexedDB(dbKeys)
 
 	// Unified thread documents (from metadata + local IDB where applicable)
-	const { userDocuments } = useThreadDocuments()
+	const { userDocuments } = useWorkspaceDocuments(workspaceContext)
 
 	// Ensure thread documents metadata is hydrated even if popup is closed
 	const attemptedDocsRefreshRef = React.useRef<string | null>(null)
@@ -204,34 +202,23 @@ export function Header() {
 	const { documentOptions, threadDocsByName } = useMemo(() => {
 		// Helper to dedupe while preserving order
 		const dedupe = (arr: string[]) => Array.from(new Set(arr))
-		console.log('userDocuments', userDocuments)
-		// Prefer documents from unified hook; fall back to thread metadata when empty
-		const threadDocs = (
-			userDocuments?.length
-				? userDocuments
-				: (activeThread?.metadata
-						?.documents as Array<WorkspaceDocumentMetadata>) || []
-		) as Array<WorkspaceDocumentMetadata>
-
 		const byName = new Map<string, WorkspaceDocumentMetadata>()
 
-		if (threadDocs.length) {
+		if (userDocuments.length) {
 			// Filter by current type (unless 'all') and activeProject (if set)
-			const filtered = threadDocs.filter((d) => {
+			const filteredDocuments = userDocuments.filter((d) => {
 				const nameOk = Boolean(d?.name)
 				const typeOk =
-					activeDocumentType === 'all' ||
-					!d?.type ||
-					d?.type === activeDocumentType
+					activeDocumentType === 'all' || d?.type === activeDocumentType
 				return nameOk && typeOk
 			})
 
-			for (const d of filtered) {
-				const name = (d.name || '') as string
+			for (const document of filteredDocuments) {
+				const name = (document.name || '') as string
 				if (!name) continue
 				if (!byName.has(name)) {
 					byName.set(name, {
-						...d,
+						...document,
 						name,
 					})
 				}
@@ -296,7 +283,6 @@ export function Header() {
 		}
 	}, [
 		userDocuments,
-		activeThread?.metadata?.documents,
 		activeProject,
 		activeDocumentType,
 		textDocuments,
@@ -469,12 +455,8 @@ export function Header() {
 		...userDocuments,
 		...Object.values(documentList)
 			.flat()
-			.map((name) => ({ name }) as unknown as WorkspaceDocumentMetadata),
-	]).filter((document) =>
-		activeThread
-			? document.threadSlug === activeThread.slug || !document.versions
-			: true,
-	)
+			.map((name) => ({ name }) as { name: string }),
+	])
 
 	return (
 		<header className="sticky top-0 z-50 flex items-center justify-between w-full h-16 px-4 border-b shrink-0 bg-gradient-to-b from-background/10 via-background/50 to-background/80 backdrop-blur-xl">
@@ -618,21 +600,3 @@ export function Header() {
 		</header>
 	)
 }
-
-// Narrow unknown IndexedDB records that represent workspace documents
-function isWorkspaceDocItem(it: unknown): it is {
-	id?: string
-	project?: string
-	name?: string
-	type?: 'text' | 'image' | 'spreadsheet'
-	url?: string
-	content?: string
-} {
-	if (!it || typeof it !== 'object') return false
-	const o = it as Record<string, unknown>
-	return (
-		typeof o.project === 'string' &&
-		typeof o.name === 'string' &&
-		(o.type === 'text' || o.type === 'image' || o.type === 'spreadsheet')
-	)
-}

apps/pro-web/components/routes/chat/chat-layout-section.tsx

@@ -16,13 +16,11 @@ export function ChatLayoutSection({ children }: { children: React.ReactNode }) {
 	const { activeChatbot, isDashboardOpen, setIsDashboardOpen, allCategories } =
 		useSidebar()
 	const pathname = usePathname()
-	const isPublic = getRouteType(pathname) === 'public'
+	const isOrg = getRouteType(pathname) === 'org'
 	const chatClassNames = activeChatbot
 		? 'max-h-[97vh]'
 		: 'max-h-[calc(97vh-26px)]'
 
-	console.log('isOpenPopup', isOpenPopup)
-
 	return (
 		<>
 			{isDashboardOpen && (
@@ -34,11 +32,20 @@ export function ChatLayoutSection({ children }: { children: React.ReactNode }) {
 					/>
 				</div>
 			)}
-
-			<div className="flex flex-col gap-5 px-4 pt-5 mx-auto w-full max-w-screen-xl h-full md:px-10">
-				{children}
-			</div>
-			{isOpenPopup && <ThreadPopup />}
+			<section
+				ref={sectionRef as React.Ref<HTMLDivElement>}
+				className={cn(
+					isOrg ? 'max-h-full md:max-h-[calc(97vh-100px)]' : chatClassNames,
+					'flex h-full group w-full overflow-auto animate-in duration-300 ease-in-out relative',
+					'lg:w-[calc(100%-250px)] xl:w-[calc(100%-300px)] lg:ml-[250px] xl:ml-[300px]',
+					'scrollbar',
+				)}
+			>
+				<div className="flex flex-col gap-5 px-4 pt-5 mx-auto w-full max-w-screen-xl h-full md:px-10">
+					{children}
+				</div>
+				{isOpenPopup && <ThreadPopup />}
+			</section>
 		</>
 	)
 }

apps/pro-web/components/routes/chat/chat-message-actions.tsx

@@ -105,10 +105,7 @@ export function ChatMessageActions({
 			setDocumentContent(activeProject, docTitle, structuredContent)
 			setActiveDocument(docTitle)
 
-			// Enable workspace mode if not already active
-			if (!isWorkspaceActive) {
-				toggleWorkspace()
-			}
+			toggleWorkspace(true)
 
 			customSonner({
 				type: 'success',
@@ -131,7 +128,7 @@ export function ChatMessageActions({
 	return (
 		<div
 			className={cn(
-				'flex items-center justify-end transition-opacity group-hover:opacity-100 md:absolute md:-right-10 md:-top-2 md:opacity-0',
+				'flex gap-1.5 items-center justify-end transition-opacity group-hover:opacity-100 md:absolute md:-right-10 md:-top-2 md:opacity-0',
 				className,
 			)}
 			key={messageId}