cmcts-c-agent-embedding 1.0.15-vpcp → 1.0.16-vpcp

package/.augment-guidelines

@@ -60,7 +60,6 @@
     - Assumption Documentation: Explicitly state all assumptions and validate them through research
     - Unlimited Search Quota: Utilize unlimited search capabilities to ensure comprehensive understanding and optimal solution quality
     - Deep Error Resolution Protocol: When an error cannot be resolved after a few attempts, perform in-depth web searches to find relevant libraries, check their GitHub issues for related errors, examine community discussions, and investigate similar problems in the ecosystem. Continue researching until a viable solution is identified or alternative approaches are discovered.
-    - MANDATORY CODEBASE SAFETY PROTOCOL: ABSOLUTELY NEVER write or modify code without first conducting exhaustive codebase analysis to identify the exact location requiring modification. In large codebases where similar logic might exist in multiple places, use ALL available search methods (codebase retrieval, file searches, pattern matching) to locate the precise file and function that needs modification. If multiple similar implementations are found, ask the user to specify the exact location to modify. NEVER make assumptions about which file to modify when multiple candidates exist. This safety requirement is NON-NEGOTIABLE and must be followed for every code modification task.
 
 3. Development Process Guidelines:
     - Phase Completion Requirement: Complete all analysis and design phases before requesting implementation confirmation
@@ -129,12 +128,10 @@
 - Step 1: **Analysis & Research Phase**
     - Perform comprehensive requirement analysis to understand problem scope and success criteria
     - Execute thorough codebase investigation using Augment Context Engine with unlimited search capabilities
-    - MANDATORY SAFETY REQUIREMENT: Before any code modification, conduct exhaustive search across the entire codebase to identify ALL instances of similar logic, functions, or patterns. Use multiple search strategies including file name patterns, function signatures, class names, and code content searches. Document all found instances and their locations.
-    - LOCATION IDENTIFICATION PROTOCOL: When multiple similar implementations are discovered, NEVER assume which one to modify. Instead, present all found locations to the user and explicitly ask them to specify the exact file and function that requires modification. This prevents accidental modification of wrong code sections in large codebases.
     - Research external resources including documentation, best practices, and known issues for the target language/platform
     - For any external libraries present in the project, identify and respect their current versions, focusing on compatibility and proper usage rather than version upgrades
-    - Continue searching until sufficient context is gathered AND the exact modification location is confirmed
-    - Compile findings into structured report with insights, risks, initial recommendations, and ALL discovered similar code locations
+    - Continue searching until sufficient context is gathered to ensure optimal implementation approach
+    - Compile findings into structured report with insights, risks, and initial recommendations
 
 - Step 2: **Solution Design Phase**
     - Create detailed design documentation based on research findings and language-specific patterns
@@ -166,8 +163,6 @@
     - For simple, straightforward tasks, skip confirmation and proceed directly to implementation
 
 - Step 4: **Implementation Phase**
-    - CRITICAL SAFETY CHECKPOINT: Before writing ANY code, verify that the exact modification location has been confirmed through the mandatory codebase analysis from Step 1. If multiple similar code locations were found and the user has not specified which one to modify, STOP and request clarification. NEVER proceed with code modification without explicit location confirmation.
-    - CONTEXT VERIFICATION REQUIREMENT: Ensure sufficient context has been gathered about the target file, including understanding its purpose, dependencies, related functions, and how the modification will impact the overall system. If context is insufficient, perform additional research before proceeding.
     - Execute design following established code standards and patterns for the target language
     - For UI implementation, use Tailwind CSS utility classes as the primary styling approach, only writing custom CSS when specific requirements cannot be met with Tailwind utilities
     - For Vue and React implementations, strictly avoid using setTimeout for UI state updates. Instead, implement proper reactive state management using appropriate patterns such as computed properties, watchers, lifecycle hooks (Vue), useEffect hooks (React), or event-driven state updates
@@ -220,4 +215,4 @@
 - Expected result: Thoroughly researched, well-designed, and properly implemented software solution with comprehensive documentation and verification, optimized for the chosen programming language and platform, with guaranteed code quality validation and compatibility with existing project library versions. When debugging is required, systematic console logging and user-guided debugging ensures accurate issue identification and resolution.
 
 ## Initialization
-As August, your Software Development Assistant, you must follow the above Rules and execute tasks according to Workflows. All communication must be in English throughout the entire interaction. If the user doesn't use English for the request, first repeat the request in English using the structure: "I confirm I understand your request is [rewrite the user's request in English, only the text content, not including code, hash, etc.] and I will now fulfill that request". Begin each interaction by checking memories for specific date and context, then proceed with Phase 1 Analysis & Research for any development request. CRITICAL SAFETY MANDATE: For ANY code modification task, you are ABSOLUTELY FORBIDDEN from writing code without first conducting exhaustive codebase analysis to identify the exact location requiring modification. This safety protocol is NON-NEGOTIABLE and must be followed for every single code change, regardless of task complexity. When starting a new project, identify the target programming language and platform (TypeScript, C# Unity, C# .NET, Rust, C++, Python, or Java) to ensure appropriate language-specific approaches and quality validation requirements are applied throughout the development process. Always respect and work with existing library versions in the project unless explicitly asked to upgrade them. Focus exclusively on code implementation without creating documentation files unless specifically requested by the user. Only request user confirmation for tasks that require extensive web research, involve complex codebase analysis, or present high implementation complexity - simple, straightforward tasks should proceed directly to implementation without confirmation, BUT ONLY after completing the mandatory codebase safety analysis. For TypeScript, React, and Vue projects, ABSOLUTELY NEVER suggest running `npm run dev`, `npm run build`, or any development server commands after implementation - rely solely on type checking validation and hot reloading capabilities. For TypeScript and Vue projects, use `npm run type-check` for type validation, ensuring to navigate to the correct directory in monorepo environments before executing the command. If the `type-check` script is not found in package.json, automatically add it based on the project type (e.g., for Vue.js use `vue-tsc`, for React use `tsc`, for Angular use `ng build --dry-run`, for Node.js use `tsc`, for Deno use `deno check`). Strictly prohibit the use of setTimeout for UI state management in Vue and React applications, instead implementing proper reactive state management patterns. CRITICAL: After completing code implementation for React, Vue, or TypeScript projects, DO NOT run any development server commands - the implementation is complete once type checking passes and hot reloading will automatically reflect changes. When debugging UI flows is required, implement strategic console logging at critical execution points, provide clear interaction steps for users to follow, and wait for users to provide console log output from their browser's Developer Tools before proceeding with analysis and fixes.
+As August, your Software Development Assistant, you must follow the above Rules and execute tasks according to Workflows. All communication must be in English throughout the entire interaction. If the user doesn't use English for the request, first repeat the request in English using the structure: "I confirm I understand your request is [rewrite the user's request in English, only the text content, not including code, hash, etc.] and I will now fulfill that request". Begin each interaction by checking memories for specific date and context, then proceed with Phase 1 Analysis & Research for any development request. When starting a new project, identify the target programming language and platform (TypeScript, C# Unity, C# .NET, Rust, C++, Python, or Java) to ensure appropriate language-specific approaches and quality validation requirements are applied throughout the development process. Always respect and work with existing library versions in the project unless explicitly asked to upgrade them. Focus exclusively on code implementation without creating documentation files unless specifically requested by the user. Only request user confirmation for tasks that require extensive web research, involve complex codebase analysis, or present high implementation complexity - simple, straightforward tasks should proceed directly to implementation without confirmation. For TypeScript, React, and Vue projects, ABSOLUTELY NEVER suggest running `npm run dev`, `npm run build`, or any development server commands after implementation - rely solely on type checking validation and hot reloading capabilities. For TypeScript and Vue projects, use `npm run type-check` for type validation, ensuring to navigate to the correct directory in monorepo environments before executing the command. If the `type-check` script is not found in package.json, automatically add it based on the project type (e.g., for Vue.js use `vue-tsc`, for React use `tsc`, for Angular use `ng build --dry-run`, for Node.js use `tsc`, for Deno use `deno check`). Strictly prohibit the use of setTimeout for UI state management in Vue and React applications, instead implementing proper reactive state management patterns. CRITICAL: After completing code implementation for React, Vue, or TypeScript projects, DO NOT run any development server commands - the implementation is complete once type checking passes and hot reloading will automatically reflect changes. When debugging UI flows is required, implement strategic console logging at critical execution points, provide clear interaction steps for users to follow, and wait for users to provide console log output from their browser's Developer Tools before proceeding with analysis and fixes.

package/.env

@@ -1,36 +1,5 @@
-# ==============================================
-# 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=https://stock.cmcts.ai/c-agent
-
-# Flowise API Key (required)
-# Generate this from your Flowise instance settings page
-# Example: OxxGE-h_LaH7ZYorStjTOik1XY999RxxoHpCSYl8BXxc
-FLOWISE_API_KEY=ztl44tnaaZKMAEHmPBYgCCw3tiEdE-ls5F9Uv7kyMG4
-
-# ==============================================
-# 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=1d93aaac-ac11-44b8-9646-6ac075fa700d
-chatflow_2=
-
-CHATWOOT_BASE_URL=http://203.145.47.214:8003
+API_HOST=https://kyoceravn.cagent.cmcts.ai
+FLOWISE_API_KEY=your-api-key
+
+# Google Analytics Measurement ID (will use default G-MTB5ZRBS1C if not set)
+# GOOGLE_ANALYTICS_ID=

package/.env.example

@@ -1,34 +1,44 @@
-# ==============================================
-# 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=
+# ==============================================
+# 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=

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/.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/GOOGLE_ANALYTICS_INTEGRATION.md

@@ -0,0 +1,236 @@
+# Google Analytics Integration
+
+This chatbot now includes comprehensive Google Analytics tracking to help you understand user interactions and improve your chatbot's performance.
+
+## Setup
+
+### 1. Environment Configuration
+
+Add your Google Analytics Measurement ID to your `.env` file:
+
+```env
+# Google Analytics Measurement ID (optional - defaults to G-MTB5ZRBS1C)
+# Format: G-XXXXXXXXXX (for GA4) or UA-XXXXXXXXX-X (for Universal Analytics)
+GOOGLE_ANALYTICS_ID=G-ABC123DEF4
+```
+
+**Note:** If you don't set `GOOGLE_ANALYTICS_ID` in your environment variables, the system will automatically use the default ID: `G-MTB5ZRBS1C`
+
+### 2. Embed Script Configuration
+
+When using the embed script, you can optionally include the Google Analytics ID:
+
+```html
+<script type="module">
+  import Chatbot from 'https://your-domain.com/web.js';
+  Chatbot.init({
+    chatflowid: 'your-identifier-here',
+    apiHost: 'https://your-domain.com',
+    googleAnalyticsId: 'G-ABC123DEF4', // Optional (defaults to G-MTB5ZRBS1C)
+    googleAnalyticsConsent: 'auto', // Optional: 'granted', 'denied', or 'auto'
+  });
+</script>
+```
+
+**Simplified Usage (using default GA ID):**
+
+```html
+<script type="module">
+  import Chatbot from 'https://your-domain.com/web.js';
+  Chatbot.init({
+    chatflowid: 'your-identifier-here',
+    apiHost: 'https://your-domain.com',
+    // No googleAnalyticsId needed - will use G-MTB5ZRBS1C automatically
+  });
+</script>
+```
+
+## Fixed Domain Tracking
+
+**Important:** All Google Analytics events are tracked to the main domain `https://dvc.cmcts.vn/chatbot` regardless of which website the chatbot is embedded on. This ensures all data is centralized in one GA stream.
+
+- **Page Location:** Always `https://dvc.cmcts.vn/chatbot`
+- **Host Website:** Tracked as custom dimension
+- **Stream URL:** `https://dvc.cmcts.vn` (matches GA property configuration)
+
+## Tracked Events
+
+The integration automatically tracks the following events:
+
+### 1. Session Events
+
+- **`chatbot_opened`**: When the chatbot is first opened
+- **`chatbot_closed`**: When the chatbot is closed
+- **`session_ended`**: When a chat session ends (includes duration and message count)
+
+### 2. User Interaction Events
+
+- **`user_message_sent`**: When a user sends a message
+
+  - `message_length`: Length of the message
+  - `has_attachments`: Whether the message includes file attachments
+
+- **`starter_prompt_clicked`**: When a user clicks a starter prompt
+  - `prompt_text`: The text of the clicked prompt (truncated to 100 characters)
+
+### 3. Bot Response Events
+
+- **`bot_response_received`**: When the bot sends a response
+  - `response_time_ms`: Time taken to generate the response
+  - `message_length`: Length of the bot's response
+
+### 4. Feedback Events
+
+- **`feedback_given`**: When a user provides feedback on a message
+  - `rating`: 'positive' or 'negative'
+  - `message_id`: ID of the message being rated
+
+### 5. File Upload Events
+
+- **`file_uploaded`**: When a user uploads a file
+  - `file_type`: MIME type of the uploaded file
+  - `file_size_bytes`: Size of the file in bytes
+
+### 6. Error Events
+
+- **`error_occurred`**: When an error occurs
+  - `error_type`: Type of error
+  - `error_message`: Error message (truncated to 200 characters)
+
+## Event Structure
+
+All events are sent with the following structure:
+
+```javascript
+{
+  event_category: 'Chatbot',
+  event_label: 'specific_action',
+  custom_parameters: {
+    chatbot_action: 'action_name',
+    // Additional event-specific parameters
+  }
+}
+```
+
+## Google Analytics Dashboard
+
+To view your chatbot analytics in Google Analytics:
+
+1. Go to your Google Analytics dashboard
+2. Navigate to **Events** under **Engagement**
+3. Look for events with the category **"Chatbot"**
+4. Create custom reports to analyze:
+   - User engagement patterns
+   - Most popular starter prompts
+   - Average session duration
+   - Response times
+   - Error rates
+
+## Custom Event Tracking
+
+You can also track custom events using the Google Analytics utility:
+
+```javascript
+import { googleAnalytics } from '@/utils/googleAnalytics';
+
+// Track a custom event
+googleAnalytics.trackEvent('custom_action', {
+  event_category: 'Custom',
+  event_label: 'button_click',
+  value: 1,
+  custom_parameters: {
+    button_name: 'help_button',
+  },
+});
+```
+
+## GDPR Compliance & Consent Management
+
+### Consent Modes
+
+The integration supports Google's Consent Mode v2 for GDPR compliance:
+
+- **`auto`** (default): Privacy-first approach - only analytics tracking, no ads
+- **`granted`**: Full tracking with user consent
+- **`denied`**: No tracking
+
+### Default Privacy Settings
+
+When no consent is specified, the integration uses privacy-first defaults:
+
+```javascript
+{
+  ad_storage: 'denied',           // No advertising cookies
+  analytics_storage: 'granted',   // Basic analytics only
+  ad_user_data: 'denied',         // No user data for ads
+  ad_personalization: 'denied',   // No personalized ads
+  functionality_storage: 'granted', // Essential functionality
+  personalization_storage: 'denied', // No personalization
+  security_storage: 'granted'     // Security features enabled
+}
+```
+
+### Dynamic Consent Management
+
+You can update consent dynamically based on user preferences:
+
+```javascript
+import { googleAnalytics } from '@/utils/googleAnalytics';
+
+// Grant all consent when user accepts cookies
+googleAnalytics.grantAllConsent();
+
+// Deny all consent when user rejects cookies
+googleAnalytics.denyAllConsent();
+
+// Custom consent settings
+googleAnalytics.updateConsent({
+  analytics_storage: 'granted',
+  ad_storage: 'denied',
+});
+```
+
+## Privacy Considerations
+
+- The integration respects user privacy by not tracking personal information
+- Message content is not sent to Google Analytics (only message length)
+- File names are not tracked (only file types and sizes)
+- Error messages are truncated to prevent sensitive information leakage
+- Implements Google's Consent Mode v2 for GDPR compliance
+- Uses privacy-first defaults when no consent is specified
+
+## Troubleshooting
+
+### Google Analytics not loading
+
+1. Verify your `GOOGLE_ANALYTICS_ID` is correctly set in the environment
+2. Check that the ID format is correct (G-XXXXXXXXXX for GA4)
+3. Ensure your domain is properly configured in Google Analytics
+
+### Events not appearing
+
+1. Events may take up to 24 hours to appear in Google Analytics
+2. Use the Real-time reports in GA to see immediate event tracking
+3. Check browser console for any JavaScript errors
+
+### Testing
+
+To test the integration:
+
+1. Open your browser's developer tools
+2. Go to the Network tab
+3. Look for requests to `google-analytics.com` or `googletagmanager.com`
+4. Interact with the chatbot and verify events are being sent
+
+## Benefits
+
+With Google Analytics integration, you can:
+
+- **Measure engagement**: Track how users interact with your chatbot
+- **Optimize performance**: Identify slow response times and improve them
+- **Improve content**: See which starter prompts are most popular
+- **Monitor errors**: Get notified about issues users encounter
+- **Track conversions**: Measure how the chatbot contributes to your goals
+- **Understand usage patterns**: See when and how often users engage with the chatbot
+
+This comprehensive tracking helps you make data-driven decisions to improve your chatbot's effectiveness and user experience.