Solutions Partner UI

A React + TypeScript chat interface built with Vite, Tailwind CSS v4, and Radix UI.

Prerequisites

• Node.js v18 or higher
• npm v9 or higher (comes with Node.js)

Local Setup

1. Clone the repository

git clone https://github.com/IsmaelNjama/solutions-partner-ui.git
cd solutions-partner-ui

2. Install dependencies

npm install

3. Configure environment variables

Copy the example env file and fill in your values:

cp .env.example .env

Open .env and set the API base URL to point at your local backend:

VITE_API_BASE_URL=http://localhost:8000

4. Start the development server

npm run dev

The app will be available at http://localhost:5173 by default.

Available Scripts

Command	Description
npm run dev	Start the Vite dev server with HMR
npm run build	Type-check and build for production
npm run preview	Serve the production build locally
npm run lint	Run Oxlint

Production Build

npm run build

Output is written to the dist/ directory. To preview it locally before deploying:

npm run preview

Project Structure

solutions-partner-ui/
├── public/                  # Static assets served as-is
│   ├── favicon.svg
│   └── icons.svg
├── src/
│   ├── assets/              # Images and other imported assets
│   ├── components/
│   │   ├── chat/            # Chat-specific components
│   │   │   ├── ChatLayout.tsx       # Root layout: header, message list, input
│   │   │   ├── ChatInput.tsx        # Message input box with send controls
│   │   │   ├── MessageList.tsx      # Scrollable list of chat messages
│   │   │   ├── AssistantMessage.tsx # Assistant message bubble
│   │   │   ├── UserMessage.tsx      # User message bubble
│   │   │   ├── MessageActions.tsx   # Copy/retry actions on messages
│   │   │   └── StreamingMarkdown.tsx # Markdown renderer with streaming support
│   │   └── ui/              # Generic reusable UI primitives
│   │       ├── button.tsx
│   │       ├── dropdown-menu.tsx
│   │       ├── scroll-area.tsx
│   │       ├── textarea.tsx
│   │       ├── tooltip.tsx
│   │       └── ThemeToggle.tsx      # Dark/light/system theme switcher
│   ├── contexts/
│   │   └── ThemeContext.tsx  # Theme state, persistence, and system detection
│   ├── hooks/
│   │   └── useAgentChat.ts   # Chat state and streaming API integration
│   ├── lib/
│   │   ├── api.ts            # API client for the backend
│   │   ├── user.ts           # User identity helpers
│   │   └── utils.ts          # Shared utilities (cn, etc.)
│   ├── App.tsx               # Root component
│   ├── main.tsx              # Entry point, mounts React with providers
│   └── index.css             # Global styles, Tailwind theme and plugin config
├── .env.example              # Environment variable template
├── index.html                # HTML entry point
├── vite.config.ts            # Vite configuration
├── postcss.config.js         # PostCSS configuration (Tailwind v4)
├── tsconfig.app.json         # TypeScript config for app source
└── package.json

Tech Stack

• React 19
• TypeScript 6
• Vite 8
• Tailwind CSS v4
• Radix UI — accessible primitives
• Lucide React — icons
• Oxlint — linter