# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Project Overview

This is a chatbot widget library (flowise-chatbox) that can be embedded on websites. It connects to Flowise AI backends and supports multi-tenant deployments (VIB, Co-op Bank). Built with SolidJS and compiled as web components.

## Build & Development Commands

```bash
# Development with hot reload (serves at localhost:5678)
yarn dev

# Production build (outputs to dist/)
yarn build

# Type checking
yarn type-check

# Linting
yarn lint
yarn lint-fix

# Formatting
yarn format
yarn format:check

# Start proxy server (requires .env configuration)
yarn start
```

## Architecture

### Entry Points
- `src/web.ts` - Main entry for browser bundle, registers web components and exposes `window.Chatbot`
- `src/register.tsx` - Registers `<flowise-chatbot>` (bubble) and `<flowise-fullchatbot>` (full page) custom elements
- `src/window.ts` - Chatbot initialization API (`init`, `initFull`, `destroy`) and authentication setup

### Core Components
- `src/components/Bot.tsx` - Main chat interface with message handling, streaming, file uploads, and state management
- `src/features/bubble/components/Bubble.tsx` - Floating chat bubble wrapper with resize/scale controls
- `src/features/full/components/Full.tsx` - Full-page chat layout

### Key Patterns
- Uses SolidJS reactive primitives (`createSignal`, `createEffect`, `createMemo`)
- Web components via `solid-element` for framework-agnostic embedding
- Streaming responses via `@microsoft/fetch-event-source`
- Chat history persisted in localStorage under `{chatflowid}_EXTERNAL`

### Multi-Tenant Authentication
- VIB: Uses `dataLogin` in localStorage, fetches from `/api/user-info`
- Co-op Bank: Uses `tokenData` in localStorage with `id_token`, fetches from `/business-service/user`
- User info mapped to `cmcts:userInfo` in localStorage for both tenants

### Server Proxy (`server.js`)
- Express server that proxies requests to Flowise API
- Validates chatflow identifiers and domain origins
- Environment variables define chatflow mappings: `CHATFLOW_NAME=uuid,allowed-domain1,allowed-domain2`
- Required env vars: `API_HOST`, `FLOWISE_API_KEY`

## Path Aliases

TypeScript uses `@/*` to map to `src/*` (configured in tsconfig.json).

## Styling

Uses Tailwind CSS with PostCSS. Styles are injected inline (not extracted) via rollup-plugin-postcss.