# CLAUDE.md

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

## Project Overview

This is a JavaScript library for embedding Denser chatbots on websites. It's built using SolidJS and TypeScript, compiled with Rollup, and distributed via CDN. The library creates a web component that renders a chat bubble interface with an embedded iframe.

## Key Commands

### Development

- `pnpm dev` - Start development server with hot reload (localhost:5678)
- `pnpm build` - Build production bundle
- `pnpm lint` - Run ESLint on TypeScript files
- `pnpm lint-fix` - Run ESLint with automatic fixes
- `pnpm format` - Format code with Prettier
- `pnpm format:check` - Check code formatting

### Package Management

Uses `pnpm` for dependency management (not npm).

### Release Process

1. `npm version patch` - Update version
2. `git tag v1.x.x` - Create git tag
3. `git push origin v1.x.x` - Push tag
4. Create GitHub release (triggers automatic publish)

## Architecture

### Entry Points

- `src/web.ts` - Main entry point for CDN distribution
- `src/index.ts` - Type exports for library consumers

### Core Components

- `src/register.tsx` - Web component registration using solid-element
- `src/window.ts` - Window API injection and chatbot initialization
- `src/features/bubble/` - Main chat bubble component and UI logic

### Build System

- **Bundler**: Rollup with multiple plugins
- **CSS**: TailwindCSS with PostCSS processing
- **TypeScript**: Compiled with type declarations
- **Output**: Single ES module at `dist/web.js`

### Component Architecture

Built as a SolidJS web component (`<denser-chatbot>`) that:

- Renders a floating chat button
- Opens an iframe to the Denser chat interface
- Handles theming and positioning
- Manages welcome messages and state

### Key Files

- `src/features/bubble/components/Bubble.tsx` - Main bubble component with iframe
- `src/constants.ts` - Default configuration values
- `rollup.config.js` - Build configuration
- `tsconfig.json` - TypeScript configuration with path mapping (@/_ -> src/_)

### API Integration

- Fetches bot customization from `/api/customize/{chatbotId}`
- Embeds iframe pointing to `/u/embed/{chatbotId}?in-widget=true`
- Default API host: `https://denser.ai`

### Styling

- Uses TailwindCSS for component styling
- Supports dark/light theming
- CSS bundled inline with JavaScript
- Custom styling via theme props (button colors, sizes, positioning)