Skip to content

CLAUDE.md

Latest commit

 

History

History
63 lines (41 loc) · 3.36 KB

CLAUDE.md

File metadata and controls

63 lines (41 loc) · 3.36 KB
Raw

CLAUDE.md

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

Project Overview

FlowiseChatEmbed is a JavaScript library that provides embeddable chatbot widgets for Flowise. It builds to a single bundled JS file that consumers load via <script> tag. The library registers two custom web components (<flowise-chatbot> for popup, <flowise-fullchatbot> for full-page) and exposes Chatbot.init() / Chatbot.initFull() / Chatbot.destroy() APIs.

Build & Dev Commands

yarn install          # Install dependencies
yarn dev              # Dev server with livereload at http://localhost:5678
yarn build            # Production build to dist/
yarn lint             # ESLint check
yarn lint-fix         # ESLint auto-fix
yarn format           # Prettier format
yarn format:check     # Prettier check
yarn start            # Start Express proxy server on port 3001

There are no tests in this project.

Architecture

Framework: SolidJS (NOT React)

This project uses SolidJS with solid-element for web component registration. JSX compiles via babel-preset-solid, not React. SolidJS uses fine-grained reactivity (createSignal, createEffect, createMemo) instead of virtual DOM diffing. Components use <Show>, <For>, <Switch>/<Match> control flow components.

Build Pipeline

Rollup bundles from src/web.ts into two outputs:

  • dist/web.js (ES module) — primary consumer format
  • dist/web.umd.js (UMD, global FlowiseEmbed)

CSS is processed via PostCSS with Tailwind CSS (rem-to-px converted in tailwind.config.cjs) and injected inline (not extracted).

Entry Point Flow

src/web.ts → registerWebComponents() (registers custom elements via solid-element) → parseChatbot() (creates init/initFull/destroy API) → injectChatbotInWindow() (sets window.Chatbot)

Key Source Structure

  • src/components/Bot.tsx — Core chatbot logic (~800 lines). Manages messages, streaming (SSE via @microsoft/fetch-event-source), file uploads, audio recording, lead capture, feedback, and chat history persistence via localStorage.
  • src/features/bubble/ — Popup bubble mode: floating button + tooltip + chat window
  • src/features/full/ — Full-page mode
  • src/features/popup/ — Disclaimer popup and modal overlays
  • src/queries/sendMessageQuery.ts — All Flowise API calls (prediction, streaming, feedback, TTS, file upload, lead capture)
  • src/utils/index.ts — HTTP request helper (sendRequest), localStorage helpers, cookie utils
  • src/features/bubble/types.ts — Theme/config type definitions (BubbleTheme, ChatWindowTheme, ButtonTheme, etc.)
  • src/constants.ts — Default props

Proxy Server

server.js is an Express server that proxies requests to a Flowise instance, hiding API keys and chatflow IDs from the client. Chatflow mappings are configured via environment variables (see .env.example). This is a separate runtime from the embedded widget.

Path Alias

TypeScript uses @/* → src/* (configured in tsconfig.json, resolved by rollup-plugin-typescript-paths).

Styling

Tailwind CSS with @tailwindcss/typography plugin. The Tailwind config converts all rem values to px (since the widget runs inside arbitrary host pages where root font-size varies). Styles are bundled inline, not extracted to a separate CSS file.