shamitgautam/mindful-knowledge-chat

1. Overall shape

- This is a single-page React application built with Vite + TypeScript, with the UI rendered entirely on the client.

- There is no traditional app server in the repo; the backend boundary is handled through Supabase for auth, database, and edge functions.

2. Primary product domain

- The app is centered on a knowledge chat experience: authenticated users can chat, manage messages, and upload documents for processing.

- The presence of ChatArea, ChatInput, ChatSidebar, MessageBubble, and DocumentUploadModal shows the app is organized around a multi-pane chat workspace rather than a generic content site.

3. Entry points and routing

- src/main.tsx bootstraps the app, and src/pages/* contains the route-level screens.

- The main page flow is split into Auth.tsx, Index.tsx, and NotFound.tsx, indicating a small route surface with authentication gating and a primary app screen.

4. Frontend composition

- src/App.tsx is the top-level composition layer, likely wiring theme, routing, and app-wide layout.

- src/components/NavLink.tsx and the chat components suggest the main screen is assembled from reusable UI sections rather than page-specific monoliths.

5. Chat subsystem

- The chat feature is the main functional subsystem:

- ChatArea likely renders the conversation timeline.

- ChatInput handles user prompts and message submission.

- ChatSidebar likely contains conversation history, document list, or navigation.

- MessageBubble renders individual messages with user/assistant styling.

- DocumentUploadModal is the entry point for attaching knowledge sources.

- This subsystem is probably fed by a custom hook layer rather than direct service calls from components.

6. State and behavior hooks

- useChat, usePinnedMessages, useAuth, and useTheme encapsulate feature state and side effects.

- use-mobile suggests responsive behavior is abstracted at the hook level, likely to adapt layout between desktop and smaller screens.

- These hooks are the main boundary between UI components and application logic.

7. Supabase integration boundary

- src/integrations/supabase/client.ts and types.ts are the frontend’s typed access point to Supabase.

- Supabase is the external platform for:

- authentication,

- database-backed app data,

- and calling edge functions.

- The frontend likely talks to Supabase directly rather than through a custom API server.

8. Serverless backend functions

- supabase/functions/chat/index.ts and supabase/functions/process-document/index.ts define the backend processing layer.

- This suggests two major asynchronous flows:

- chat completion / answer generation via the chat function,

- document ingestion and processing via process-document.

- These functions form the computation boundary for anything too sensitive or heavy to run in the browser.

9. Data and persistence model

- src/types/chat.ts and src/data/mockData.ts indicate the chat domain has explicit typed models and local sample data for development or fallback UI states.

- The migrations in supabase/migrations/* show the app’s persistent schema is managed in versioned SQL, so database structure is part of the repo’s architecture.

- The .temp Supabase files indicate the project is linked to a real Supabase project and uses the Supabase CLI workflow.

10. UI system and design infrastructure

- The large src/components/ui/* set is a shadcn-style component library: dialogs, sheets, tabs, forms, tables, toasts, etc.

- components.json, tailwind.config.ts, postcss.config.js, and src/index.css show the design system is built on Tailwind CSS with reusable primitives rather than custom CSS per screen.

- src/lib/utils.ts likely provides small helpers for class composition and UI consistency.

11. Cross-cutting concerns

- src/hooks/use-toast.ts plus src/components/ui/toaster.tsx/toast.tsx indicate global notification handling.

- useTheme implies theme state is app-wide, not local to a page.

- src/components/ui/sidebar.tsx, sheet.tsx, drawer.tsx, and resizable.tsx suggest the UI is responsive and panel-based, which matters for the chat layout.

12. Operational and build boundary

- vite.config.ts, tsconfig*.json, eslint.config.js, and the lockfiles indicate a standard front-end build/test toolchain with TypeScript checks and linting.

- public/robots.txt and index.html show this is deployed as static frontend assets, with runtime behavior layered on top through Supabase and browser-side React.

- upload-test.pdf is likely a local test fixture for validating the document upload flow.

13. Architecture diagram guidance

- A good diagram would place the React SPA in the center, with internal modules for chat UI, auth/pages, hooks/state, and shared UI components.

- Draw Supabase as the external backend platform with two distinct paths: client SDK access from the browser and edge functions for chat/document processing.

- Show migrations as the schema-management path into Supabase Postgres, and treat document upload as a separate ingestion flow feeding the process-document function before results are reflected back in the chat experience.