cmcts-c-agent-embedding 1.0.16-vpcp → 1.0.17-kyocera

package/.env.example

@@ -1,44 +1,34 @@
-# ==============================================
-# REQUIRED CONFIGURATION
-# ==============================================
-
-# API Host URL (required)
-# This should be the URL where your Flowise instance is running
-# Example: https://your-flowise-instance.com
-API_HOST=
-
-# Flowise API Key (required)
-# Generate this from your Flowise instance settings page
-# Example: OxxGE-h_LaH7ZYorStjTOik1XY999RxxoHpCSYl8BXxc
-FLOWISE_API_KEY=
-
-# ==============================================
-# CHATFLOWS CONFIGURATION (required)
-# ==============================================
-
-# Format: [identifier]=[chatflowId],[allowedDomain1],[allowedDomain2],...
-#
-# Each entry consists of:
-# - identifier: Any name you choose (e.g., agent1, support, salesbot)
-# - chatflowId: The UUID of your Flowise chatflow
-# - allowedDomains: Comma-separated list of domains where this chat can be embedded
-#                   Note: Wildcard domains (*) are not supported for security reasons
-#
-# Examples:
-# agent1=20db97c6-64c9-4411-bab4-7d6202171600,https://example1.com
-# support=1c28f529-a70f-5001-9bc5-4f4c5d03d8c0,https://example2.com,https://another-example2.com
-# salesbot=3db97c6-64c9-4411-bab4-7d620217160a,https://sales.example.com
-
-# Add your chatflows below:
-chatflow_1=
-chatflow_2=
-
-# ==============================================
-# OPTIONAL CONFIGURATION
-# ==============================================
-
-# Google Analytics Measurement ID (optional - defaults to G-MTB5ZRBS1C)
-# Format: G-XXXXXXXXXX (for GA4) or UA-XXXXXXXXX-X (for Universal Analytics)
-# Example: G-ABC123DEF4
-# If not set, will use default: G-MTB5ZRBS1C
-GOOGLE_ANALYTICS_ID=
+# ==============================================
+# REQUIRED CONFIGURATION
+# ==============================================
+
+# API Host URL (required)
+# This should be the URL where your Flowise instance is running
+# Example: https://your-flowise-instance.com
+API_HOST=
+
+# Flowise API Key (required)
+# Generate this from your Flowise instance settings page
+# Example: OxxGE-h_LaH7ZYorStjTOik1XY999RxxoHpCSYl8BXxc
+FLOWISE_API_KEY=
+
+# ==============================================
+# CHATFLOWS CONFIGURATION (required)
+# ==============================================
+
+# Format: [identifier]=[chatflowId],[allowedDomain1],[allowedDomain2],...
+#
+# Each entry consists of:
+# - identifier: Any name you choose (e.g., agent1, support, salesbot)
+# - chatflowId: The UUID of your Flowise chatflow
+# - allowedDomains: Comma-separated list of domains where this chat can be embedded
+#                   Note: Wildcard domains (*) are not supported for security reasons
+#
+# Examples:
+# agent1=20db97c6-64c9-4411-bab4-7d6202171600,https://example1.com
+# support=1c28f529-a70f-5001-9bc5-4f4c5d03d8c0,https://example2.com,https://another-example2.com
+# salesbot=3db97c6-64c9-4411-bab4-7d620217160a,https://sales.example.com
+
+# Add your chatflows below:
+chatflow_1=
+chatflow_2=

package/.eslintrc.cjs

@@ -1,14 +1,14 @@
-module.exports = {
-    root: true,
-    extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier', 'plugin:solid/typescript'],
-    plugins: ['@typescript-eslint', 'solid'],
-    parser: '@typescript-eslint/parser',
-    ignorePatterns: ['**/*.md'],
-    rules: {
-        '@next/next/no-img-element': 'off',
-        '@next/next/no-html-link-for-pages': 'off',
-        'solid/no-innerhtml': 'off',
-        '@typescript-eslint/no-namespace': 'off',
-        '@typescript-eslint/no-explicit-any': 'off'
-    }
-}
+module.exports = {
+    root: true,
+    extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier', 'plugin:solid/typescript'],
+    plugins: ['@typescript-eslint', 'solid'],
+    parser: '@typescript-eslint/parser',
+    ignorePatterns: ['**/*.md'],
+    rules: {
+        '@next/next/no-img-element': 'off',
+        '@next/next/no-html-link-for-pages': 'off',
+        'solid/no-innerhtml': 'off',
+        '@typescript-eslint/no-namespace': 'off',
+        '@typescript-eslint/no-explicit-any': 'off'
+    }
+}

package/.idea/flowise-chatbox.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/flowise-chatbox.iml" filepath="$PROJECT_DIR$/.idea/flowise-chatbox.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

package/.prettierignore

@@ -1,3 +1,3 @@
-node_modules
-build
-dist
+node_modules
+build
+dist

package/.prettierrc

@@ -1,8 +1,8 @@
-{
-  "semi": true,
-  "singleQuote": true,
-  "tabWidth": 2,
-  "trailingComma": "all",
-  "printWidth": 150,
-  "endOfLine": "lf"
-}
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "printWidth": 150,
+  "endOfLine": "lf"
+}

package/CLAUDE.md

@@ -0,0 +1,115 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+Flowise Chat Embed is a JavaScript library (npm: `cmcts-c-agent-embedding`) that displays Flowise AI chatbots on websites. It provides two modes: popup (bubble chat) and full-page chat. The library is built with SolidJS and compiled as web components using Rollup.
+
+## Common Commands
+
+```bash
+# Install dependencies
+yarn install --frozen-lockfile
+
+# Development (starts dev server at http://localhost:5678)
+yarn dev
+
+# Build for production
+yarn build
+
+# Type checking
+yarn type-check
+
+# Lint
+yarn lint
+yarn lint-fix
+
+# Format
+yarn format
+yarn format:check
+
+# Start proxy server (port 3001)
+yarn start
+
+# Build and publish to npm
+yarn build-and-publish
+```
+
+## Architecture
+
+### Entry Points
+- `src/web.ts` - Main browser entry point. Registers web components and exports `Chatbot` API with `init()`, `initFull()`, `destroy()` methods
+- `src/window.ts` - Manages chatbot lifecycle, element creation/destruction, and window injection
+- `src/register.tsx` - Registers `<flowise-chatbot>` and `<flowise-fullchatbot>` custom elements using `solid-element`
+
+### Component Hierarchy
+```
+web.ts → register.tsx → Bubble/Full → Bot.tsx (main chat logic)
+```
+
+- **Bubble** (`src/features/bubble/`) - Popup chat widget with draggable button, tooltip, resize, and scale controls
+- **Full** (`src/features/full/`) - Full-page chat using IntersectionObserver for lazy loading
+- **Bot.tsx** (`src/components/Bot.tsx`) - Core chat component (~2400 lines) handling messages, streaming, file uploads, lead capture, feedback, and human advisor connection
+
+### Proxy Server
+`server.js` provides a secure proxy server that:
+- Hides Flowise API host and chatflow IDs from client-side
+- Uses domain-based whitelisting (no wildcards allowed)
+- Parses chatflow configs from environment variables: `IDENTIFIER=chatflowId,domain1,domain2`
+- Required env vars: `API_HOST`, `FLOWISE_API_KEY`
+- Validates requests using browser headers and Authorization Bearer tokens
+
+### Key Files
+- `src/queries/sendMessageQuery.ts` - API layer for predictions, feedback, file uploads, FAQ search
+- `src/utils/index.ts` - Request helpers, localStorage management, authentication utilities
+- `src/utils/ultimateJsonParser.ts` - Robust JSON parser for malformed/partial JSON from AI responses
+- `src/features/bubble/types.ts` - Theme configuration types for all customization options
+
+## Special Patterns and Workarounds
+
+### Streaming Bug Fix (Critical)
+In `Bot.tsx` around line 1074-1082, there's a workaround for a streaming bug when sending images:
+```typescript
+// TODO: Đoạn JSON.stringify(faqId) để fix Lỗi streaming khi chọn ảnh xong gửi luôn
+if (
+  isChatFlowAvailableToStream() &&
+  (!faqId ||
+    JSON.stringify(faqId) === JSON.stringify({ isTrusted: true }))
+)
+```
+When an image is selected and sent immediately, `faqId` may incorrectly contain `{ isTrusted: true }` from the event. This check prevents incorrect fallback to non-streaming mode.
+
+### Popup Mode Default Behavior
+In `src/window.ts`, popup mode (`init()`) sets `isUseFAQ: true` by default, while full page mode does not. This affects FAQ functionality.
+
+### Authentication Flow
+- `dataLogin` localStorage stores user auth data (parsed for `accessToken`)
+- `cmcts:userInfo` localStorage stores mapped user profile
+- `validateAndMapUserInfo()` maps `dataLogin.user` to `cmcts:userInfo`
+- 401 responses automatically clear auth data via `clearAuthenticationData()`
+- VIB-specific auth: `checkAndInitializeAuth()` only runs on `.vib` domains
+
+### Chat State Persistence
+- Chat history stored in `{chatflowId}_EXTERNAL` localStorage key
+- Lead data preserved across chat clears
+- Human advisor connection state in `{chatflowId}_HUMAN_ADVISOR_CONNECTED`
+- Scale/width preferences: `cmcts:chatScale`, `cmcts:chatWindowWidth`
+
+### File Upload Constraints
+- Images: 3MB max
+- Other files: 10MB max
+- RAG file uploads handled via `upsertVectorStoreWithFormData()`
+- Attachments via `createAttachmentWithFormData()`
+
+## TypeScript Configuration
+
+Uses `@/*` path alias for `src/*`. JSX uses SolidJS with `preserve` mode.
+
+## Development Notes
+
+- Dev server serves from `dist` and `public` directories
+- `public/index.html` is optional demo page, not required for production
+- Rollup outputs single `dist/web.js` bundle (ES module format)
+- Custom CSS injection supported via `theme.customCSS`
+