@clikvn/agent-widget-embedded 1.0.33-dev → 1.0.34-dev

package/docs/brand-ui-command-actions-tools.md

@@ -11,13 +11,15 @@ This document defines the available command action tools that AI agents can use
 **Description:** Launches an interactive guided tour with hotspot interactions for the currently viewed product.
 
 **Parameters:**
+
 - `product_id` (string, required): The unique identifier of the product being viewed
 - `tour_type` (string, optional): Type of guided tour ("interactive", "auto", "manual"). Default: "interactive"
 - `start_hotspot` (string, optional): Starting hotspot identifier. Default: first available hotspot
 
 **Usage Context:** When user is viewing a specific product and wants detailed guided exploration with interactive hotspots.
 
-**Expected Behavior:** 
+**Expected Behavior:**
+
 - Initiates guided tour overlay on current product view
 - Highlights interactive hotspots with contextual information
 - Provides step-by-step navigation through product features
@@ -29,6 +31,7 @@ This document defines the available command action tools that AI agents can use
 **Description:** Displays the currently viewed product in Augmented Reality mode, allowing users to visualize the product in their real environment.
 
 **Parameters:**
+
 - `product_id` (string, required): The unique identifier of the product being viewed
 - `ar_mode` (string, optional): AR display mode ("placement", "viewer", "try_on"). Default: "placement"
 - `scale_factor` (number, optional): Initial scale factor for AR display. Range: 0.1-5.0. Default: 1.0
@@ -36,6 +39,7 @@ This document defines the available command action tools that AI agents can use
 **Usage Context:** When user wants to see how a product would look in their actual space using device camera.
 
 **Expected Behavior:**
+
 - Activates device camera for AR visualization
 - Overlays 3D product model in real environment
 - Provides controls for scaling, rotation, and positioning
@@ -47,6 +51,7 @@ This document defines the available command action tools that AI agents can use
 **Description:** Shows a 360-degree interactive view of the currently viewed product, allowing full rotation and detailed inspection.
 
 **Parameters:**
+
 - `product_id` (string, required): The unique identifier of the product being viewed
 - `initial_angle` (number, optional): Starting rotation angle in degrees. Range: 0-360. Default: 0
 - `auto_rotate` (boolean, optional): Whether to automatically rotate the product. Default: false
@@ -55,6 +60,7 @@ This document defines the available command action tools that AI agents can use
 **Usage Context:** When user needs comprehensive visual inspection of product from all angles.
 
 **Expected Behavior:**
+
 - Displays interactive 360° product viewer
 - Enables mouse/touch drag controls for manual rotation
 - Provides zoom capabilities for detailed inspection
@@ -66,6 +72,7 @@ This document defines the available command action tools that AI agents can use
 **Description:** Opens a comprehensive image gallery for the currently viewed product, displaying multiple views, details, and lifestyle images.
 
 **Parameters:**
+
 - `product_id` (string, required): The unique identifier of the product being viewed
 - `gallery_type` (string, optional): Gallery display mode ("grid", "carousel", "lightbox"). Default: "lightbox"
 - `start_image` (number, optional): Index of initial image to display. Default: 0
@@ -74,6 +81,7 @@ This document defines the available command action tools that AI agents can use
 **Usage Context:** When user wants to see all available images and details of the product in a dedicated gallery view.
 
 **Expected Behavior:**
+
 - Opens full-screen or modal gallery interface
 - Displays high-resolution product images with navigation
 - Includes zoom functionality and image metadata
@@ -85,6 +93,7 @@ This document defines the available command action tools that AI agents can use
 **Description:** Displays detailed product information including specifications, pricing, availability, and related details.
 
 **Parameters:**
+
 - `product_id` (string, required): The unique identifier of the product being viewed
 - `info_sections` (array, optional): Specific information sections to display. Options: ["specs", "pricing", "availability", "reviews", "related"]. Default: all sections
 - `display_mode` (string, optional): Information display format ("panel", "modal", "inline"). Default: "panel"
@@ -92,6 +101,7 @@ This document defines the available command action tools that AI agents can use
 **Usage Context:** When user needs comprehensive product details, specifications, or purchasing information.
 
 **Expected Behavior:**
+
 - Opens detailed product information panel or modal
 - Displays organized sections of product data
 - Includes interactive elements like reviews, related products
@@ -103,6 +113,7 @@ This document defines the available command action tools that AI agents can use
 **Description:** Modifies the visual style/theme of the current scene/room, allowing users to see different aesthetic presentations.
 
 **Parameters:**
+
 - `scene_id` (string, required): The unique identifier of the current scene
 - `style_theme` (string, required): The style theme to apply. Options: ["modern", "classic", "minimalist", "industrial", "scandinavian", "traditional"]
 - `apply_to_products` (boolean, optional): Whether to update product materials to match style. Default: true
@@ -111,6 +122,7 @@ This document defines the available command action tools that AI agents can use
 **Usage Context:** When user is in a scene and wants to explore different aesthetic styles or design themes.
 
 **Expected Behavior:**
+
 - Changes room colors, textures, and overall aesthetic
 - Updates lighting to match selected style
 - Optionally updates product finishes to complement new style
@@ -122,6 +134,7 @@ This document defines the available command action tools that AI agents can use
 **Description:** Changes materials, textures, or finishes of products within the current scene.
 
 **Parameters:**
+
 - `scene_id` (string, required): The unique identifier of the current scene
 - `product_id` (string, optional): Specific product to modify. If omitted, applies to all compatible products
 - `material_type` (string, required): Material to apply. Options: ["wood", "metal", "fabric", "leather", "glass", "stone", "ceramic"]
@@ -131,6 +144,7 @@ This document defines the available command action tools that AI agents can use
 **Usage Context:** When user wants to see how different materials or finishes would look on products in the scene.
 
 **Expected Behavior:**
+
 - Updates product materials/textures in real-time
 - Maintains proper lighting and reflection properties
 - Shows realistic material appearance in current lighting conditions
@@ -142,6 +156,7 @@ This document defines the available command action tools that AI agents can use
 **Description:** Toggles door states (open/closed) in the virtual environment to show different spatial configurations.
 
 **Parameters:**
+
 - `scene_id` (string, required): The unique identifier of the current scene
 - `door_id` (string, optional): Specific door to toggle. If omitted, cycles through available doors
 - `action` (string, required): Door action. Options: ["open", "close", "toggle"]
@@ -150,6 +165,7 @@ This document defines the available command action tools that AI agents can use
 **Usage Context:** When user is in a scene with doors/cabinets and wants to see different open/closed configurations.
 
 **Expected Behavior:**
+
 - Animates door opening/closing smoothly
 - Updates interior visibility and spatial perception
 - May reveal additional products or storage spaces
@@ -161,6 +177,7 @@ This document defines the available command action tools that AI agents can use
 **Description:** Adjusts lighting conditions in the current scene to show different ambiances and times of day.
 
 **Parameters:**
+
 - `scene_id` (string, required): The unique identifier of the current scene
 - `lighting_preset` (string, required): Lighting configuration. Options: ["natural_day", "natural_evening", "warm_ambient", "bright_task", "dim_mood", "spotlight"]
 - `intensity` (number, optional): Light intensity level. Range: 0.1-2.0. Default: 1.0
@@ -169,6 +186,7 @@ This document defines the available command action tools that AI agents can use
 **Usage Context:** When user wants to see how the scene and products look under different lighting conditions.
 
 **Expected Behavior:**
+
 - Smoothly transitions between lighting conditions
 - Updates shadows, reflections, and material appearance
 - Shows realistic lighting effects on all scene elements
@@ -180,6 +198,7 @@ This document defines the available command action tools that AI agents can use
 **Description:** Displays a comprehensive list of all products present in the current scene with quick access options.
 
 **Parameters:**
+
 - `scene_id` (string, required): The unique identifier of the current scene
 - `list_format` (string, optional): List display format. Options: ["grid", "list", "carousel"]. Default: "grid"
 - `sort_by` (string, optional): Sorting criteria. Options: ["name", "price", "category", "popularity"]. Default: "category"
@@ -189,6 +208,7 @@ This document defines the available command action tools that AI agents can use
 **Usage Context:** When user wants to see and access all products available in the current scene.
 
 **Expected Behavior:**
+
 - Opens organized product list interface
 - Provides search and filtering capabilities
 - Allows quick navigation to specific products in scene
@@ -200,6 +220,7 @@ This document defines the available command action tools that AI agents can use
 **Description:** Starts an automated guided tour of the current scene, highlighting products and features with contextual information.
 
 **Parameters:**
+
 - `scene_id` (string, required): The unique identifier of the current scene
 - `tour_duration` (number, optional): Approximate tour duration in seconds. Range: 30-300. Default: 120
 - `focus_areas` (array, optional): Specific areas to highlight. Options: ["products", "features", "layout", "materials"]. Default: all areas
@@ -210,6 +231,7 @@ This document defines the available command action tools that AI agents can use
 **Usage Context:** When user wants a comprehensive overview of the scene with guided exploration of key elements.
 
 **Expected Behavior:**
+
 - Initiates smooth camera movements around the scene
 - Highlights important products and features with overlays
 - Provides contextual information and interaction prompts
@@ -217,26 +239,31 @@ This document defines the available command action tools that AI agents can use
 ## Implementation Notes
 
 ### Parameter Validation
+
 - All required parameters must be validated before command execution
 - Optional parameters should use specified defaults when omitted
 - Invalid parameter values should return descriptive error messages
 
 ### State Management
+
 - Commands should respect current UI state and user context
 - Multiple commands may be chained for complex interactions
 - State changes should be reversible where applicable
 
 ### Performance Considerations
+
 - Commands involving 3D rendering (AR, 360°) should include loading states
 - Image-heavy operations should implement progressive loading
 - Animations should be optimized for smooth performance
 
 ### Accessibility
+
 - All commands should support keyboard navigation alternatives
 - Visual changes should include appropriate ARIA labels
 - Motion-sensitive users should have reduced animation options
 
 ### Error Handling
+
 - Commands should gracefully handle missing resources
 - Network-dependent features should have offline fallbacks
-- User feedback should be provided for long-running operations
+- User feedback should be provided for long-running operations

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@clikvn/agent-widget-embedded",
   "description": "This is agent widget",
-  "version": "1.0.33-dev",
+  "version": "1.0.34-dev",
   "author": "Clik JSC",
   "license": "ISC",
   "type": "module",

package/public/index.html

@@ -1,6 +1,6 @@
 <!doctype html>
 <html lang="vi">
-<head>
+  <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Clik Agent Widget - Dev</title>
@@ -30,25 +30,25 @@
               TOUR_CODE: 'TOUR_K9EK76KTX7K4',
               LANGUAGE: 'VN',
               CLIK_GRAPHQL_API: 'https://api.clik.vn/graphql',
-              CLIK_VIRTUALTOUR_API: 'https://api.clik.vn/vt360'
-            }
-          }
+              CLIK_VIRTUALTOUR_API: 'https://api.clik.vn/vt360',
+            },
+          },
         },
         listeners: {
-          ON_LINK_CLICK: console.log
+          ON_LINK_CLICK: console.log,
         },
         theme: {
           simplified: true,
           autoCloseAudioPlayer: true,
-          hideAudioMetadata: true
+          hideAudioMetadata: true,
         },
         onLoaded: (tool) => {
           window.tool = tool;
-        }
+        },
       });
     </script>
-</head>
-<body>
-<clik-agent-widget></clik-agent-widget>
-</body>
+  </head>
+  <body>
+    <clik-agent-widget></clik-agent-widget>
+  </body>
 </html>

package/tailwind.config.cjs

@@ -1,6 +1,6 @@
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const defaultTheme = require('tailwindcss/defaultTheme');
-const plugin = require('tailwindcss/plugin')
+const plugin = require('tailwindcss/plugin');
 
 function rem2px(input, fontSize = 16) {
   if (input == null) {
@@ -124,10 +124,10 @@ module.exports = {
     require('@tailwindcss/typography'),
     plugin(function ({ addVariant }) {
       addVariant('wrapped', ({ container }) => {
-        container.walkRules(rule => {
-          rule.selector = `.clik-chatbot-wrapper ${rule.selector}`
-        })
-      })
+        container.walkRules((rule) => {
+          rule.selector = `.clik-chatbot-wrapper ${rule.selector}`;
+        });
+      });
     }),
   ],
 };

package/dist/index-old.html

@@ -1,108 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <title></title>
-    <script type="module">
-      import Agent from 'http://localhost:3000/web.js'; // Change to from './web.js' to 'https://localhost:5678/web.js'
-      Agent.initWidget({
-        apiHost: 'http://localhost:8085/chatbot',
-        agentId: '6d02b23f-465f-44ec-8766-27a82890a9b8',
-        theme: {
-          input: {
-            placeholder: 'Tin nhắn...',
-          },
-          overview: {
-            title: 'Van Mieu, Quoc Tu Giam',
-            description:
-              'Your personal AI tutor by Khan Academy! Im Khanmigo Lite - here to help you with math, science, and humanities and questions.',
-          },
-          header: {
-            title: 'tung test',
-          },
-          language: {
-            code: 'global',
-            options: [
-              {
-                name: 'en',
-                code: 'global',
-              },
-              {
-                name: 'vi',
-                code: 'vi',
-              },
-              {
-                name: 'us',
-                code: 'en',
-              },
-              {
-                name: 'jp',
-                code: 'jp',
-              },
-              {
-                name: 'kr',
-                code: 'kr',
-              },
-              {
-                name: 'cn',
-                code: 'cn',
-              },
-              {
-                name: 'th',
-                code: 'th',
-              },
-              {
-                name: 'tw',
-                code: 'tw',
-              },
-              {
-                name: 'sg',
-                code: 'sg',
-              },
-              {
-                name: 'my',
-                code: 'my',
-              },
-              {
-                name: 'kh',
-                code: 'kh',
-              },
-              {
-                name: 'au',
-                code: 'au',
-              },
-            ],
-          },
-        },
-        overrideConfig: {
-          // chatId: '14342fe3-8991-4a67-afea-b1c4266da82b',
-          chatId: 'f547e5e3-363f-425c-adc1-7f618330d551',
-          overrideConfig: {
-            vars: {
-              POI_CODE: 'MLI_VKLVVAJEFHLH',
-              LANGUAGE: 'US',
-            },
-          },
-          // suggestedActions: [
-          //   {
-          //     title: 'How are you?',
-          //     label: 'are you?',
-          //     action: 'How are you?'
-          //   }
-          // ]
-        },
-      });
-    </script>
-    <style>
-      .chatbox {
-        width: 100%;
-        height: 100vh;
-      }
-    </style>
-  </head>
-  <body>
-    <div class="chatbox">
-      <clik-agent-widget></clik-agent-widget>
-    </div>
-  </body>
-</html>