React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default tseslint.config({
  extends: [
    // Remove ...tseslint.configs.recommended and replace with this
    ...tseslint.configs.recommendedTypeChecked,
    // Alternatively, use this for stricter rules
    ...tseslint.configs.strictTypeChecked,
    // Optionally, add this for stylistic rules
    ...tseslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config({
  plugins: {
    // Add the react-x and react-dom plugins
    'react-x': reactX,
    'react-dom': reactDom,
  },
  rules: {
    // other rules...
    // Enable its recommended typescript rules
    ...reactX.configs['recommended-typescript'].rules,
    ...reactDom.configs.recommended.rules,
  },
})

OpenSesame-Cell

OpenSesame-Cell

OpenSesame Cell

A powerful AI chatbot widget that can be easily embedded into any website.

Features

• 🤖 AI-Powered Chat: Powered by advanced language models
• 🎨 Customizable Design: Fully customizable colors, branding, and styling
• 📱 Responsive: Works perfectly on desktop and mobile devices
• 🔧 Easy Integration: Simple embed code for any website
• 🚀 Dynamic Config Loading: Fetch configuration from API with just a cellId
• 💬 Multi-thread Support: Multiple conversation threads
• 🎯 Suggested Questions: Pre-configured suggested questions
• 🔒 Secure: Built with security best practices

Quick Start

Option 1: Minimal Configuration (Recommended)

With the new dynamic config loading feature, you can embed the widget with just a cellId:

<link rel="stylesheet" href="https://open-sesame-cell.vercel.app/opensesame-cell.css" />
<script>
  window.OpenSesameCellConfig = {
    cellId: "your-cell-id-here"
  };
</script>
<script>
  (function () {
    const s = document.createElement("script");
    s.src = "https://open-sesame-cell.vercel.app/widget.js";
    s.async = true;
    document.head.appendChild(s);
  })();
</script>

The widget will automatically fetch the complete configuration from the API, including colors, logo, suggested questions, and more!

Option 2: Full Configuration

For complete control, you can provide the full configuration:

<link rel="stylesheet" href="https://open-sesame-cell.vercel.app/opensesame-cell.css" />
<script>
  window.OpenSesameCellConfig = {
    config: {
      cellId: "your-cell-id",
      primaryColor: "#5E17EB",
      secondaryColor: "#F3EEFD",
      placeholderText: "How can I help you?",
      suggestedQuestions: [
        "What services do you offer?",
        "How do I get started?",
        "What are your pricing plans?"
      ],
      logo: "https://your-logo.com/logo.png",
      userId: "user-123"
    }
  };
</script>
<script>
  (function () {
    const s = document.createElement("script");
    s.src = "https://open-sesame-cell.vercel.app/widget.js";
    s.async = true;
    document.head.appendChild(s);
  })();
</script>

Configuration Options

| Option | Type | Description | Default | |--------|------|-------------|---------| | cellId | string | Unique identifier for the cell | Required | | primaryColor | string | Primary brand color (hex) | #5E17EB | | secondaryColor | string | Secondary brand color (hex) | #F3EEFD | | accentColor | string | Accent color for highlights | #F3EEFD | | textColor | string | Text color | Auto-detected | | glowColor | string | Glow effect color | primaryColor | | logo | string | URL to your logo | OpenSesame logo | | placeholderText | string | Input placeholder text | "What can I do for you?" | | suggestedQuestions | string[] | Array of suggested questions | [] | | borderRadius | number | Widget border radius (0-32) | 24 | | userId | string | User identifier | Auto-generated | | open | boolean | Start with widget expanded | false | | readOnly | boolean | Disable user input | false |

Dynamic Config Loading

The widget now supports dynamic configuration loading from the API. This provides several benefits:

Benefits

1. Simplified Deployment: Users only need to provide a cellId
2. Centralized Management: Config changes are managed server-side
3. Automatic Updates: Widget always uses the latest configuration
4. Fallback Support: Gracefully handles API failures

Usage Patterns

Minimal Config (API Fetch)

window.OpenSesameCellConfig = {
  cellId: "your-cell-id"
};

Partial Config (API Merge)

window.OpenSesameCellConfig = {
  cellId: "your-cell-id",
  config: {
    userId: "custom-user-123",
    open: true
  }
};

Full Config (No API Call)

window.OpenSesameCellConfig = {
  config: {
    cellId: "your-cell-id",
    primaryColor: "#5E17EB",
    // ... other options
  }
};

API Reference

Cell Config API

The widget can fetch configuration from the /api/cell-config endpoint:

GET /api/cell-config?cellId=your-cell-id

Response:

{
  "cellId": "your-cell-id",
  "name": "Cell Name",
  "config": {
    "primaryColor": "#5E17EB",
    "secondaryColor": "#F3EEFD",
    "placeholderText": "How can I help?",
    "suggestedQuestions": ["Question 1", "Question 2"],
    // ... other config options
  }
}

Examples

• Minimal Embed Example - Shows the new dynamic config loading feature
• Dynamic Config Test - Interactive testing of different configuration scenarios
• Production Test - Production deployment example

Development

Prerequisites

• Node.js 18+
• npm or yarn

Setup

1. Clone the repository:

git clone https://github.com/your-org/opensesame-cell.git
cd opensesame-cell

2. Install dependencies:

npm install

3. Set up environment variables:

cp .env.example .env.local
# Edit .env.local with your configuration

4. Start the development server:

npm run dev

Building

Build the widget for production:

npm run build

This will create the production files in the dist/ directory.

Testing

Run the test suite:

npm test

Test the API endpoints:

npm run test:endpoints

Test the cell config API:

npm run test:cell-config

Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Commit your changes: git commit -m 'Add amazing feature'
4. Push to the branch: git push origin feature/amazing-feature
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

For support, email [email protected] or create an issue in this repository.