CortexAI — Frontend

React single-page application for CortexAI, the personal AI chatbot. It provides login/signup, a chat dashboard with a sidebar of sessions, and streaming message UI.

---

What this app does

• Authentication: Sign up and log in (JWT stored in localStorage); protected routes redirect to /login when not authenticated.
• Dashboard: Main chat view with:
  • Sidebar: List of chat sessions; create new chat, select one, or delete with the trash (basket) icon.
  • Chat area: Messages (user + CortexAI), markdown rendering, code blocks.
  • Input: Text area at the bottom; send with button or Shift+Enter for new line; supports streaming responses.
• Routing: / → Dashboard, /login → Login, /signup → Signup; unauthenticated users are redirected to login.

All API calls go through apiClient.js to the backend (base URL from env).

---

Folder structure

frountend/
├── README.md           ← This file
├── package.json        ← Scripts and dependencies
├── vite.config.js      ← Vite config (React plugin)
├── index.html          ← Single HTML entry; root div + script to main.jsx
├── public/             ← Served as-is
│   └── favicon.svg     ← Favicon (fallback; primary can be from CDN in index.html)
│
└── src/
    ├── main.jsx        ← Entry: React root, StrictMode, App
    ├── App.jsx         ← Router and routes (/, /login, /signup)
    ├── App.css         ← Layout and chat/sidebar/input styles
    ├── index.css       ← Global/reset styles
    ├── apiClient.js    ← API base URL, get/set access token, apiRequest(path, options)
    │
    ├── pages/
    │   ├── DashboardPage.jsx   ← Main chat: sidebar, chat list, messages, input, send
    │   ├── LoginPage.jsx       ← Login form → token → redirect to /
    │   └── SignupPage.jsx      ← Signup form → then login → redirect to /
    │
    └── assets/         ← Static assets (e.g. react.svg if used)

• apiClient.js uses VITE_API_BASE_URL (default http://localhost:8000) and sends Authorization: Bearer <token> when a token exists.
• App.jsx defines all routes; dashboard is the default home.
• DashboardPage.jsx holds the main UI: sidebar with chat list and delete (basket) button, message list, and streaming input/send.

---

Scripts

Command	Description
npm run dev	Start Vite dev server (default: http://localhost:5173)
npm run build	Production build (output in dist/)
npm run preview	Serve the production build locally
npm run lint	Run ESLint

---

Environment

Variable	Description
VITE_API_BASE_URL	Backend API base URL. Default: http://localhost:8000. Set in .env or .env.local for local overrides.

Example .env.local:

VITE_API_BASE_URL=http://localhost:8000

For production builds, set the same variable in your build/deploy environment so the frontend points to your deployed API.

---

Dependencies (overview)

• React 19 + react-dom — UI.
• react-router-dom — Routing.
• react-markdown + remark-gfm — Markdown and GFM (tables, etc.) in messages.
• Vite 7 + @vitejs/plugin-react — Build and dev server.
• ESLint — Linting.

---

Running locally

1. Install and start the backend (see root and backend README); ensure it is reachable at the URL you will set for VITE_API_BASE_URL.
2. In frountend/:

   npm install
   npm run dev

3. Open http://localhost:5173 (or the URL Vite prints).
4. Sign up or log in, then use the chat and sidebar (create/delete chats).

---

Building for production

npm run build

Serves from dist/. Point your server or static host at dist and ensure VITE_API_BASE_URL was set at build time so the app talks to the correct API.