@clikvn/agent-widget-embedded 1.0.30-dev → 1.0.32-dev

package/.idea/clik-ai-chatbot-embedded.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/codeStyles/Project.xml

@@ -0,0 +1,59 @@
+<component name="ProjectCodeStyleConfiguration">
+  <code_scheme name="Project" version="173">
+    <HTMLCodeStyleSettings>
+      <option name="HTML_SPACE_INSIDE_EMPTY_TAG" value="true" />
+    </HTMLCodeStyleSettings>
+    <JSCodeStyleSettings version="0">
+      <option name="FORCE_SEMICOLON_STYLE" value="true" />
+      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
+      <option name="USE_DOUBLE_QUOTES" value="false" />
+      <option name="FORCE_QUOTE_STYlE" value="true" />
+      <option name="ENFORCE_TRAILING_COMMA" value="WhenMultiline" />
+      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
+      <option name="SPACES_WITHIN_IMPORTS" value="true" />
+    </JSCodeStyleSettings>
+    <TypeScriptCodeStyleSettings version="0">
+      <option name="FORCE_SEMICOLON_STYLE" value="true" />
+      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
+      <option name="USE_DOUBLE_QUOTES" value="false" />
+      <option name="FORCE_QUOTE_STYlE" value="true" />
+      <option name="ENFORCE_TRAILING_COMMA" value="WhenMultiline" />
+      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
+      <option name="SPACES_WITHIN_IMPORTS" value="true" />
+    </TypeScriptCodeStyleSettings>
+    <VueCodeStyleSettings>
+      <option name="INTERPOLATION_NEW_LINE_AFTER_START_DELIMITER" value="false" />
+      <option name="INTERPOLATION_NEW_LINE_BEFORE_END_DELIMITER" value="false" />
+    </VueCodeStyleSettings>
+    <codeStyleSettings language="HTML">
+      <option name="SOFT_MARGINS" value="80" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="JavaScript">
+      <option name="SOFT_MARGINS" value="80" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="TypeScript">
+      <option name="SOFT_MARGINS" value="80" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="Vue">
+      <option name="SOFT_MARGINS" value="80" />
+      <indentOptions>
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+  </code_scheme>
+</component>

package/.idea/codeStyles/codeStyleConfig.xml

@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="USE_PER_PROJECT_SETTINGS" value="true" />
+  </state>
+</component>

package/.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>

package/.idea/jsLinters/eslint.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="EslintConfiguration">
+    <custom-configuration-file used="true" path="$PROJECT_DIR$/.eslintrc" />
+  </component>
+</project>

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/clik-ai-chatbot-embedded.iml" filepath="$PROJECT_DIR$/.idea/clik-ai-chatbot-embedded.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/prettier.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="PrettierConfiguration">
+    <option name="myConfigurationMode" value="AUTOMATIC" />
+  </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="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

package/CLAUDE.md

@@ -0,0 +1,150 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+This is `@clikvn/agent-widget-embedded`, a React-based TypeScript library that creates an embeddable AI chatbot widget. The project builds a JavaScript library that can be imported and embedded into any website as a custom web component `<clik-agent-widget>`.
+
+## Development Commands
+
+- `yarn dev` - Start development build with file watching using Rollup
+- `yarn build` - Create production build
+- `yarn lint` - Run ESLint on src directory
+- `yarn lint:fix` - Run ESLint with auto-fix
+- `yarn prettier` - Format all files with Prettier
+- `yarn deploy` - Build and publish to npm with public access
+
+## Build System
+
+The project uses **Rollup** as the primary build tool (not Webpack or Vite). Key configuration:
+- Entry point: `src/web.ts` → outputs to `dist/web.js` as ESM module
+- Custom web component registration system using `customElements.define()`
+- Supports TypeScript, PostCSS with Tailwind, and React JSX
+- Uses Terser for minification and production optimizations
+
+## Architecture
+
+### Core Entry Points
+- `src/web.ts` - Main library entry point that exports the widget API
+- `src/window.ts` - Contains `initWidget()` function and window object injection
+- `src/register.tsx` - Web component registration and custom element definition
+- `src/features/AgentWidget/index.tsx` - Main React component with providers
+
+### Component Structure
+- **Custom Web Component**: `AgentWidgetComponent` class extends `HTMLElement`
+- **React Integration**: Uses ReactDOM.render to mount React app inside web component
+- **Provider Pattern**: Multiple context providers wrap the main Agent component:
+  - `ConfigurationProvider` - API host, agent ID, theme configuration
+  - `ChatDataProvider` - Chat state, suggested actions, event listeners
+  - `AudioMessagePlayerProvider` - Audio message playback functionality
+
+### Key Features
+- **Voice Integration**: Built-in audio recording and playback with LiveKit support
+- **Theming System**: Comprehensive theme configuration for messages, buttons, input placeholders
+- **Event System**: Custom event listeners using `EVENT_TYPE` enum
+- **Suggestion System**: Configurable suggested actions with grid/scroll layout modes
+
+## Code Conventions
+
+### TypeScript Configuration
+- Strict mode enabled with comprehensive type checking
+- Base configuration in `base.json`, extended by `tsconfig.json`
+- Target: ES2015, Module: ESNext with React JSX transform
+
+### Code Style (enforced by ESLint + Prettier)
+- Single quotes, semicolons required
+- 2-space indentation, 80 character line width
+- Trailing commas in ES5 contexts
+- React hooks dependency warnings enabled
+- Console usage limited to info/warn/error methods
+
+### File Organization
+- `src/components/` - Reusable UI components (Agent/, Chat/)
+- `src/hooks/` - Custom React hooks (useChat, useAudioRecording, etc.)
+- `src/services/` - API layer and external service integrations
+- `src/utils/` - Pure utility functions (audio, file handling, requests)
+- `src/types/` - TypeScript type definitions
+- `src/assets/` - Static assets and CSS
+
+## Styling
+
+Uses **TailwindCSS** with custom configuration:
+- Font family: "Be Vietnam Pro" for both sans and mono
+- Custom rem-to-px conversion function for precise sizing
+- Dark mode support via class strategy
+- Includes Tailwind Typography and Animate plugins
+
+## Testing
+
+This project does not appear to have a configured test framework. When adding tests, check the existing setup or ask the user for the preferred testing approach.
+
+## Package Management
+
+Uses **Yarn** as the package manager (yarn.lock present). Always use `yarn` instead of `npm` for consistency.
+
+## Browser Support
+
+Configured for modern browsers:
+- Production: >0.2% usage, not dead, not Opera Mini
+- Development: Latest Chrome, Firefox, Safari versions
+- Minimum Node.js version: 18.18.0
+
+## Development Guidelines
+
+### Component Development
+- Follow the existing provider pattern for state management
+- Use TypeScript interfaces for all props and component types
+- Implement proper error boundaries for chat components
+- Components should be responsive and work within the widget constraints
+
+### Tool Integration
+- **Command Tools**: Tools that trigger UI actions should be added to `isCommandTool()` in `src/components/Chat/Message.tsx`
+- **Display Tools**: Tools that render content should be added to the custom tool results logic
+- **Event System**: Use the `EVENT_TYPE` enum and listeners pattern for component communication
+
+### State Management Patterns
+- Use React Context providers for shared state (Configuration, ChatData, AudioPlayer)
+- Implement custom hooks for complex state logic (useChat, useAudioRecording)
+- Keep component state minimal and lift state up when needed
+
+### API Integration
+- All API calls should go through the services layer (`src/services/`)
+- Use proper error handling and loading states
+- Implement request utilities for consistent API interaction patterns
+
+### Styling Guidelines
+- Use TailwindCSS classes for all styling
+- Follow the existing color and spacing conventions
+- Implement responsive design using Tailwind's responsive prefixes
+- Use CSS-in-JS only when dynamic styling based on theme props is required
+
+### Audio/Voice Features
+- Audio recording utilities are in `src/utils/audioRecording.ts`
+- Use the AudioMessagePlayerProvider for playback functionality
+- Implement proper permissions handling for microphone access
+- Follow the existing patterns for LiveKit integration
+
+### Theme System
+- Theme configuration is handled through the ConfigurationProvider
+- Support both light and dark themes via CSS classes
+- Use theme props for customizable colors, fonts, and layouts
+- Maintain backward compatibility when adding new theme options
+
+### Testing Practices
+- Since no test framework is configured, prefer manual testing during development
+- Test widget integration in different environments (various websites)
+- Verify responsive behavior across different screen sizes
+- Test audio features with different browser permissions
+
+### Performance Considerations
+- The widget is embedded in external websites, so bundle size matters
+- Use dynamic imports for heavy features when possible
+- Implement proper loading states for async operations
+- Optimize images and assets for web delivery
+
+### Error Handling
+- Implement graceful degradation for failed API calls
+- Provide meaningful error messages to users
+- Log errors appropriately for debugging (console.error/warn allowed)
+- Handle network connectivity issues gracefully

package/dist/components/Chat/Message.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/Message.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAsB,MAAM,OAAO,CAAC;AAE/C,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EACL,eAAe,EAGhB,MAAM,0BAA0B,CAAC;AAalC,KAAK,SAAS,GAAG;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,eAAe,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,GAAG,EAAE,OAAO,GAAG,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAUF,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,SAAS,CA0QxC,CAAC;AAEF,eAAO,MAAM,eAAe,YAAa;IAAE,GAAG,EAAE,OAAO,GAAG,IAAI,CAAA;CAAE,4CAyC/D,CAAC"}
+{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/Message.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAsB,MAAM,OAAO,CAAC;AAE/C,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EACL,eAAe,EAGhB,MAAM,0BAA0B,CAAC;AAalC,KAAK,SAAS,GAAG;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,eAAe,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,GAAG,EAAE,OAAO,GAAG,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAUF,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,SAAS,CAwRxC,CAAC;AAEF,eAAO,MAAM,eAAe,YAAa;IAAE,GAAG,EAAE,OAAO,GAAG,IAAI,CAAA;CAAE,4CAyC/D,CAAC"}

package/dist/index.html

@@ -1,46 +1,40 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <!-- <meta charset="UTF-8" /> -->
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Clik Agent Widget - Dev</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: 'https://ci-api.clik.vn/chatbot',
-        agentId: 'fe4cf6a9-fa43-4986-bc6f-df67092568c6',
+<head>
+  <meta charset="UTF-8">
+  <title></title>
+  <style>
+    clik-agent-widget {
+      display: block;
+      height: 100vh;
+    }
+  </style>
+  <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: 'https://ci-api.clik.vn/chatbot',
+      agentId: '697a9f37-2ed6-4d90-b540-6682eabdc5eb',
+      overrideConfig: {
+        chatId: 'e13e4df8-4e30-41e0-9df3-b0337feec6ee',
         overrideConfig: {
-          chatId: 'f6a855d2-7edc-4fb8-9dd3-74204aa1e2a2',
-          skipSuggestion: true,
-          overrideConfig: {
-            vars: {
-              TOUR_CODE: 'TOUR_K9EK76KTX7K4',
-              LANGUAGE: 'VN',
-              CLIK_GRAPHQL_API: 'https://api.clik.vn/graphql',
-              CLIK_VIRTUALTOUR_API: 'https://api.clik.vn/vt360',
-            },
-          },
+          vars: {
+            SHOWROOM_CODE: 'SHOWROOM_5Z7G1H9X1X1X4',
+            TOUR_CODE: 'TOUR_K9EK76KTX7K4',
+            LANGUAGE: 'VN',
+            CLIK_GRAPHQL_API: 'https://ci-api.clik.vn/graphql',
+            CLIK_VIRTUALTOUR_API: 'https://ci-api.clik.vn/vt360',
+            BRAND_API: 'https://ci-api.clik.vn/showroom',
+          }
         },
-        listeners: {
-          ON_LINK_CLICK: console.log,
-        },
-        theme: {
-          // simplified: true,
-          autoCloseAudioPlayer: true,
-          hideAudioMetadata: true,
-          modeButtonChat: true,
-          gapInput: 30,
-        },
-        onLoaded: (tool) => {
-          window.tool = tool;
-        },
-      });
-    </script>
-  </head>
-  <body>
-    <div style="width: 100vw; height: 100vh">
-      <clik-agent-widget></clik-agent-widget>
-    </div>
-  </body>
-</html>
+      },
+      listeners: {
+            ON_LINK_CLICK: console.log
+        }
+    });
+  </script>
+
+</head>
+<body>
+<clik-agent-widget></clik-agent-widget>
+</body>
+</html>