@ai4i/vic Widget

React chatbot widget powered by AI. Embeddable in any web application.

📦 Installation

npm install @ai4i/vic

🧪 Testing

This package includes comprehensive tests for all core functionality.

Running Tests

# From widget directory
pnpm test              # Run in watch mode
pnpm test:run          # Run once (CI)
pnpm test:ui           # Visual test interface
pnpm test:coverage     # Generate coverage report

Test Structure

packages/widget/
├── vitest.config.mts           # Vitest configuration
├── vitest.setup.ts             # Test setup (jsdom, cleanup)
└── src/
    ├── lib/
    │   └── utils.test.ts       # Utility function tests
    ├── configs/
    │   └── componentSchemas.test.ts  # Zod schema validation tests
    └── useVicInterface.test.ts # React hook tests

What's Tested

• ✅ Utility Functions (utils.ts)

  • className merging with Tailwind
  • Conditional class handling
  • Edge cases (null, undefined, arrays, objects)

• ✅ Component Schemas (componentSchemas.ts)

  • Zod schema validation
  • Type coercion
  • Min/max constraints
  • Required/optional fields

• ✅ VIC Interface Hook (useVicInterface.ts)

  • window.vic API initialization
  • Scenario triggering with/without payloads
  • Event tracking
  • Conversation reset
  • Cleanup on unmount
  • Edge cases and error handling

🏗️ Development

# Development mode
pnpm dev

# Build for production
pnpm build

# Watch mode for development
pnpm build:watch

# Type checking
pnpm type-check

📚 API

window.vic Global API

The widget exposes a global API on window.vic:

window.vic.triggerScenario('WELCOME_MESSAGE', { embedContextId: 'dashboard' })
window.vic.trackEvent('button_click', { buttonId: 'submit' })
window.vic.reset()
window.vic.isReady() // Returns true when initialized

🏷️ TypeScript

This package includes full TypeScript support with exported types:

import type { ScenarioId, VicChatbotApi } from '@ai4i/vic'

🔧 Configuration

Embed Contexts

The widget supports different embed contexts (defined in backend):

• upload-arborapportage - Document upload flow
• employee-dashboard - Employee dashboard view
• default - General fallback

Each context has its own enabled scenarios and components.

🎨 Styling

Import the CSS file in your app:

import '@ai4i/vic/dist/vic.css'

📄 License

ISC