{"id":44974201,"url":"https://github.com/fleek-platform/chatbox-widget","last_synced_at":"2026-02-18T16:30:35.146Z","repository":{"id":286114239,"uuid":"953967923","full_name":"fleek-platform/chatbox-widget","owner":"fleek-platform","description":"a lightweight and embeddable chatbox widget","archived":false,"fork":false,"pushed_at":"2025-04-22T09:29:34.000Z","size":591,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"develop","last_synced_at":"2025-06-28T23:14:01.168Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fleek-platform.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-03-24T11:09:53.000Z","updated_at":"2025-04-22T09:29:38.000Z","dependencies_parsed_at":"2025-04-04T12:41:34.520Z","dependency_job_id":null,"html_url":"https://github.com/fleek-platform/chatbox-widget","commit_stats":null,"previous_names":["fleek-platform/chatbox-widget"],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/fleek-platform/chatbox-widget","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fleek-platform%2Fchatbox-widget","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fleek-platform%2Fchatbox-widget/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fleek-platform%2Fchatbox-widget/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fleek-platform%2Fchatbox-widget/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fleek-platform","download_url":"https://codeload.github.com/fleek-platform/chatbox-widget/tar.gz/refs/heads/develop","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fleek-platform%2Fchatbox-widget/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29585531,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-18T13:56:48.962Z","status":"ssl_error","status_checked_at":"2026-02-18T13:54:34.145Z","response_time":162,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-02-18T16:30:33.078Z","updated_at":"2026-02-18T16:30:35.137Z","avatar_url":"https://github.com/fleek-platform.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ⚡️Fleek Platform Agents Chatbox Widget\n\n[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-blue.svg)](https://conventionalcommits.org)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\nA standalone widget that allows users to embed a chatbox on any website to interact with a Fleek agent. This lightweight, customizable widget can be easily integrated into any website with a simple script tag or imported as a React component.\n\n## What is this project about?\n\nThe Fleek Chatbox Widget is a drop-in solution for adding AI chat capabilities to your website. It provides:\n\n- A floating chat button that expands into a full chat interface\n- Real-time messaging with Fleek AI agents\n- Customizable appearance through CSS variables\n- Responsive design that works on both desktop and mobile devices\n- Lightweight implementation using Preact\n- Available as both a standalone script and a React component\n\n![Chatbox Widget Demo](https://via.placeholder.com/600x400?text=Fleek+Chatbox+Widget)\n\n## Installation\n\n### For Development\n\nTo set up the project for development:\n\n```bash\ngit clone https://github.com/fleek-platform/chatbox-widget.git\ncd chatbox-widget\n\nnpm install\n```\n\n### For Usage in a React Project\n\n```bash\nnpm install @fleek-platform/agents-chatbox-widget\n```\n\n## Development\n\nTo start the development server:\n\n```bash\nnpm run dev\n```\n\nThis will:\n\n1. Build the project using Rollup with watch mode\n2. Start a live server that opens test/index.html\n3. Automatically reload when changes are detected\n\n### Project Structure\n\n```\nfleek-chatbox-widget/\n├── dist/               # Built files (generated)\n├── src/                # Source code\n│   ├── components/     # UI components\n│   │   ├── icons/      # SVG icons as React components\n│   │   └── *.tsx       # Component files\n│   ├── core/           # Core functionality\n│   │   ├── api.ts      # API client\n│   │   ├── types.ts    # TypeScript type definitions\n│   │   └── utils.ts    # Utility functions\n│   ├── npm/            # React/NPM package entry point\n│   │   └── index.ts    # NPM package entry\n│   ├── standalone/     # Standalone script\n│   │   └── chatbox.ts  # Standalone entry point\n│   └── global.css      # Global styles and CSS variables\n├── examples/           # Example usage\n│   ├── react-app/      # React example\n├── test/               # Test files\n│   └── index.html      # Test page for development\n├── package.json        # Project dependencies and scripts\n└── rollup.config.js    # Rollup build configuration\n```\n\n## How to Build\n\nTo build the project for production:\n\n```bash\nnpm run build\n\nnpm run build:standalone\n\nnpm run build:npm\n```\n\nThis creates the following files in the `dist/` directory:\n\n- `dist/chatbox.min.js` - The standalone script to be included on websites\n- `dist/index.esm.js` - ES module for npm package\n- `dist/index.cjs.js` - CommonJS module for npm package\n- `dist/index.d.ts` - TypeScript declarations\n\n## Versioning and Releases\n\nThis project uses [Changesets](https://github.com/changesets/changesets) for versioning and automated releases.\n\n### How to Create a Release\n\n1. Make your changes to the codebase\n2. Add a changeset to describe your changes:\n   ```bash\n   npx changeset\n   ```\n3. Follow the prompts to select the type of change (major, minor, patch) and provide a description\n4. Commit the generated changeset file along with your code changes\n5. Create a pull request\n6. When the PR is merged to main, a GitHub Action will:\n   - Create a version PR if there are changesets\n   - When the version PR is merged:\n     - Update the version in package.json\n     - Update the CHANGELOG.md\n     - Publish to npm\n     - Deploy the standalone script to GitHub Pages\n\n### Accessing Versioned Builds\n\nFor production use, we recommend using a specific version of the standalone script:\n\n```html\n\u003cscript\n  src=\"https://unpkg.com/@fleek-platform/agents-chatbox-widget@\u003cVERSION\u003e/dist/chatbox.min.js?agentId=\u003cYOUR_AGENT_ID\u003e\u0026token=\u003cYOUR_API_KEY\u003e\"\n  async\n\u003e\u003c/script\u003e\n```\n\n\u003e [!NOTE]\n\u003e Replace `\u003cVERSION\u003e`, `\u003cYOUR_AGENT_ID\u003e` and `\u003cYOUR_API_KEY\u003e` with your own details.\n\n## Usage Options\n\n### Option 1: Standalone Script\n\nTo add the Fleek Chatbox Widget to your website using the standalone script, include the script tag in your HTML:\n\n```html\n\u003cscript\n  src=\"https://unpkg.com/@fleek-platform/agents-chatbox-widget@\u003cVERSION\u003e/dist/chatbox.min.js?agentId=\u003cYOUR_AGENT_ID\u003e\u0026token=\u003cYOUR_API_KEY\u003e\u0026containerId=\u003cYOUR_HTML_ELEMENT_ID\u003e\"\n  async\n\u003e\u003c/script\u003e\n```\n\n\u003e [!NOTE]\n\u003e Replace `\u003cVERSION\u003e`, `\u003cYOUR_AGENT_ID\u003e`, `\u003cYOUR_API_KEY\u003e` and `\u003cYOUR_HTML_ELEMENT_ID\u003e` with your own details.\n\n#### Parameters\n\n- `agentId` (required): Your Fleek agent ID\n- `token` (required): Your TOKEN for authentication\n- `restApiHost` (optional): Custom API host URL (defaults to production URL if not provided)\n- `containerId` (optional): ID of an existing element to render the widget into\n\nExample:\n\n```html\n\u003cscript\n  src=\"https://unpkg.com/@fleek-platform/agents-chatbox-widget@1.0.0/dist/chatbox.min.js?agentId=abcdef\u0026token=abcdef\u0026containerId=chat-container\"\n  async\n\u003e\u003c/script\u003e\n```\n\n\u003e [!WARNING]\n\u003e You must replace the values in the script `src` with your own details.\n\nWhen using the `containerId` parameter, you need to have an element with that ID in your HTML:\n\n```html\n\u003cdiv id=\"chat-container\"\u003e\u003c/div\u003e\n```\n\n### Option 2: React Component\n\nTo use the Fleek Chatbox Widget in a React application:\n\n```jsx\nimport React from 'react';\nimport FleekChatbox from '@fleek-platform/agents-chatbox-widget';\n\nfunction App() {\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cFleekChatbox\n        agentId=\"YOUR_AGENT_ID\"\n        token=\"YOUR_TOKEN\"\n        restApiHost=\"https://api.custom-domain.com\"\n        colors={{\n          'color-primary': '#FF69B4',\n        }}\n        isWidgetOpen={false}\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\n#### Props\n\n- `agentId` (required): Your Fleek agent ID\n- `token` (required): Your token for authentication\n- `colors` (optional): An object with color overrides\n- `restApiHost` (optional): Custom API host URL (defaults to production URL if not provided)\n- `isWidgetOpen` (optional): Boolean to control if the widget is initially open (default: false)\n\nExample:\n\n```jsx\n\u003cFleekChatbox\n  agentId=\"123\"\n  token=\"abc123\"\n  restApiHost=\"https://api.custom-domain.com\"\n  colors={{\n    'accent-9': '#ff0000',\n    'neutral-3': '#f5f5f5',\n  }}\n  isWidgetOpen={true}\n/\u003e\n```\n\n## API Host Configuration\n\nYou can specify a custom API host for the widget to connect to by using the `restApiHost` parameter:\n\n```html\n\u003cscript\n  src=\"https://unpkg.com/@fleek-platform/agents-chatbox-widget@\u003cVERSION\u003e/dist/chatbox.min.js?agentId=\u003cYOUR_AGENT_ID\u003e\u0026token=\u003cYOUR_TOKEN\u003e\u0026restApiHost=https://\u003cREST_API\u003e\"\n  async\n\u003e\u003c/script\u003e\n```\n\nIf no `restApiHost` is specified, the widget will connect to the production API at `https://api.fleek.xyz`.\n\nThis is useful when you need to connect to a custom API endpoint or a self-hosted version of the Fleek API.\n\n## How to Override Colors\n\n### In Standalone Script\n\nYou can customize the appearance of the widget by overriding the default colors. This is done by passing a JSON object in the `colors` parameter:\n\n```html\n\u003cscript\n  src=\"https://unpkg.com/@fleek-platform/agents-chatbox-widget@\u003cVERSION\u003e/dist/chatbox.min.js?agentId=\u003cYOUR_AGENT_ID\u003e\u0026token=\u003cYOUR_API_TOKEN\u003e\u0026colors=%7B%22accent-9%22%3A%22%23ff0000%22%2C%22neutral-3%22%3A%22%23f5f5f5%22%7D\"\n  async\n\u003e\u003c/script\u003e\n```\n\n\u003e [!NOTE]\n\u003e Replace `\u003cVERSION\u003e`, `\u003cYOUR_AGENT_ID\u003e` and `\u003cYOUR_API_KEY\u003e`with your own details.\n\nThe `colors` parameter is a URL-encoded JSON object where:\n\n- Keys are CSS variable names without the `--` prefix\n- Values are valid CSS color values\n\nExample (before URL encoding):\n\n```json\n{\n  \"accent-9\": \"#ff0000\",\n  \"neutral-3\": \"#f5f5f5\"\n}\n```\n\n### In React Component\n\nWhen using the React component, you can pass the colors directly as an object:\n\n```jsx\n\u003cFleekChatbox\n  agentId=\"123\"\n  token=\"abc123\"\n  colors={{\n    'accent-9': '#ff0000',\n    'neutral-3': '#f5f5f5',\n  }}\n/\u003e\n```\n\n### Available Color Variables\n\n- **Neutral colors**: `--neutral-1` through `--neutral-12`\n- **Accent colors**: `--accent-1` through `--accent-12`\n- **Warning colors**: `--warning-1` through `--warning-12`\n\nThese color variables can be used to customize the appearance of the widget to match your website's design.\n\n## Troubleshooting\n\n### Common Issues\n\n#### Widget doesn't appear on the page\n\n- Check that the script URL is correct\n- Verify that your `agentId` and `token` are valid\n- Check the browser console for any JavaScript errors\n- Ensure there are no Content Security Policy (CSP) restrictions blocking the script\n\n#### Custom colors not applying\n\n- Make sure your JSON is properly URL-encoded (for standalone script)\n- Check the browser console for any parsing errors\n- Verify the color variable names match those in the documentation\n\n#### Widget appears but agent doesn't respond\n\n- Verify your API key has the correct permissions\n- Check that the agent ID is correct and the agent is active\n- Look for network errors in the browser's developer tools\n\n### Browser Console Logs\n\nThe widget outputs information to the browser console that can help with troubleshooting. Check your browser's developer tools console for messages related to the widget's initialization and operation.\n\n### Development Guidelines\n\n- Follow the existing code style\n- Write clear, descriptive commit messages\n- Always include a changeset for changes that affect functionality\n- Add tests for new features\n- Update documentation as needed\n\n### Code Style\n\nThis project uses Biome for formatting and linting:\n\n```bash\nnpm run format\n\nnpm run format:check\n\nnpm run lint\n\nnpm run lint:check\n```\n\n## 🙏 Contributing\n\nThis section guides you through the process of contributing to our open-source project. From creating a feature branch to submitting a pull request, get started by:\n\n1. Fork the project [here](https://github.com/fleekxyz/cli)\n2. Create your feature branch using our [branching strategy](#branching-strategy), e.g. `git checkout -b feat/my-new-feature`\n3. Run the tests: `pnpm test`\n4. Commit your changes by following our [commit conventions](#conventional-commits), e.g. `git commit -m 'chore: 🤖 my contribution description'`\n5. Push to the branch, e.g. `git push origin feat/my-new-feature`\n6. Create new Pull Request following the corresponding template guidelines\n\n### Branching strategy\n\nThe develop branch serves as the main integration branch for features, enhancements, and fixes. It is always in a deployable state and represents the latest development version of the application.\n\nFeature branches are created from the develop branch and are used to develop new features or enhancements. They should be named according to the type of work being done and the scope of the feature and in accordance with conventional commits [here](#conventional-commits).\n\n### Conventional commits\n\nWe prefer to commit our work following [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0) conventions. Conventional Commits are a simple way to write commit messages that both people and computers can understand. It help us keep track fo changes in a consistent manner, making it easier to see what was added, changed, or fixed in each commit or update.\n\nThe commit messages are formatted as **[type]/[scope]**\nThe **type** is a short descriptor indicating the nature of the work (e.g., feat, fix, docs, style, refactor, test, chore). This follows the conventional commit types.\n\nThe **scope** is a more detailed description of the feature or fix. This could be the component or part of the codebase affected by the change.\n\nHere's an example of different conventional commits messages that you should follow:\n\n```txt\ntest: 💍 Adding missing tests\nfeat: 🎸 A new feature\nfix: 🐛 A bug fix\nchore: 🤖 Build process or auxiliary tool changes\ndocs: 📝 Documentation only changes\nrefactor: 💡 A code change that neither fixes a bug or adds a feature\nstyle: 💄 Markup, white-space, formatting, missing semi-colons...\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffleek-platform%2Fchatbox-widget","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffleek-platform%2Fchatbox-widget","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffleek-platform%2Fchatbox-widget/lists"}