guideai-app 0.3.5 → 0.4.2-1

package/dist/visualContext/types.d.ts

@@ -0,0 +1,45 @@
+export type ScreenshotResponse = {
+    ok?: boolean;
+    dataUrl?: string;
+    width?: number;
+    height?: number;
+    hash?: string;
+    isDuplicate?: boolean;
+    timestamp?: number;
+    error?: any;
+    metadata?: {
+        width?: number;
+        height?: number;
+        quality?: number;
+        [key: string]: any;
+    };
+};
+export type ScreenshotFrame = {
+    dataUrl: string;
+    width?: number;
+    height?: number;
+    hash?: string;
+    reason: 'preview' | 'final' | 'change';
+    timestamp?: number;
+    sentToLLM?: boolean;
+    llmReceivedAt?: number;
+};
+export type ScreenshotOptions = {
+    targetElement?: HTMLElement;
+    targetWidth?: number;
+    quality?: number;
+    minQuality?: number;
+    maxBytes?: number;
+};
+export type ScreenshotProvider = (options: ScreenshotOptions) => Promise<ScreenshotResponse>;
+export type VisualContextConfig = {
+    enabled: boolean;
+    screenshotProvider?: ScreenshotProvider;
+    shadowRoot?: ShadowRoot;
+    debug?: boolean;
+    maxFrames?: number;
+    targetWidth?: number;
+    quality?: number;
+    minQuality?: number;
+    maxBytes?: number;
+};

package/index.d.ts

@@ -1,3 +1,7 @@
 import GuideAI from './GuideAI';
+import TranscriptBox from './components/TranscriptBox';
 export default GuideAI;
-export type { GuideAIProps } from './GuideAI';
+export { TranscriptBox };
+export type { GuideAIProps } from './types/GuideAI.types';
+export * from './visualContext';
+export * from './visualContext/types';

package/jest.config.js

@@ -0,0 +1,26 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  roots: ['<rootDir>/src'],
+  testMatch: ['**/__tests__/**/*.ts?(x)', '**/?(*.)+(spec|test).ts?(x)'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+  collectCoverageFrom: [
+    'src/**/*.{ts,tsx}',
+    '!src/**/*.d.ts',
+    '!src/**/*.types.ts'
+  ],
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  transform: {
+    '^.+\\.tsx?$': ['ts-jest', {
+      tsconfig: {
+        jsx: 'react',
+        esModuleInterop: true,
+        allowSyntheticDefaultImports: true
+      }
+    }]
+  },
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1'
+  }
+};
+

package/jest.setup.js

@@ -0,0 +1,21 @@
+// Jest setup file
+require('jest-localstorage-mock');
+require('@testing-library/jest-dom');
+
+// Mock console methods to reduce noise in tests
+global.console = {
+  ...console,
+  log: jest.fn(),
+  warn: jest.fn(),
+  error: jest.fn(),
+};
+
+// Setup localStorage and sessionStorage mocks
+Object.defineProperty(window, 'localStorage', {
+  value: global.localStorage,
+});
+
+Object.defineProperty(window, 'sessionStorage', {
+  value: global.sessionStorage,
+});
+

package/metadata-tracking-example.md

@@ -2,7 +2,7 @@
 
 ## Overview
 
-The GuideAI package now includes comprehensive user metadata tracking capabilities designed for integration with Overproof. This system tracks the following metadata:
+The GuideAI package now includes comprehensive user metadata tracking capabilities designed for integration with client. This system tracks the following metadata:
 
 - **User's First Visit** - Timestamp of the first time the user interacted with GuideAI
 - **User's Last Visit** - Timestamp of the most recent user interaction
@@ -181,7 +181,7 @@ interface UserMetadata {
     platform?: string;
   };
   
-  // Custom fields for Overproof-specific needs
+  // Custom fields for client-specific needs
   customFields?: Record<string, string | number | boolean>;
 }
 ```
@@ -255,14 +255,14 @@ guideAIRef.current?.trackCustomEvent('document_viewed', {
 });
 ```
 
-## Overproof Integration Example
+## client Integration Example
 
 ```typescript
-function OverproofApp() {
+function clientApp() {
   const guideAIRef = useRef();
 
-  // Track when user logs into Overproof
-  const handleOverproofLogin = (user) => {
+  // Track when user logs into client
+  const handleclientLogin = (user) => {
     guideAIRef.current?.trackLogin({
       userId: user.id,
       userType: user.role, // 'agent', 'admin', etc.
@@ -291,18 +291,18 @@ function OverproofApp() {
   return (
     <GuideAI 
       ref={guideAIRef}
-      organizationKey="overproof-org-key"
+      organizationKey="demo-org-key"
       metadata={{
         config: {
           trackVisits: true,
           trackLogins: true,
-          syncInterval: 15000, // More frequent syncing for Overproof
+          syncInterval: 15000, // More frequent syncing for client
           customFields: ['agencyId', 'territory', 'permissions'],
           collectBrowserInfo: true
         },
         onMetadataUpdate: (metadata) => {
-          // Send to Overproof analytics
-          window.OverproofAnalytics?.track('guideai_metadata_update', metadata);
+          // Send to client analytics
+          window.clientAnalytics?.track('guideai_metadata_update', metadata);
         }
       }}
     />
@@ -321,4 +321,4 @@ Metadata is automatically:
 - Synced to backend at configured intervals
 - Restored when user returns (if using persistent storage)
 
-This implementation provides a robust foundation for tracking user metadata in the Overproof environment while maintaining flexibility for other use cases.
+This implementation provides a robust foundation for tracking user metadata in the client environment while maintaining flexibility for other use cases.

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "guideai-app",
-  "version": "0.3.5",
+  "version": "0.4.2-1",
   "description": "AI-powered guide component for React applications",
   "main": "dist/GuideAI.js",
-  "types": "dist/GuideAI.d.ts",
+  "types": "dist/index.d.ts",
   "scripts": {
     "build": "webpack && tsc --emitDeclarationOnly && javascript-obfuscator dist/GuideAI.js --config obfuscator.json --output dist/GuideAI.js",
     "prepare": "npm run build",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage"
   },
   "keywords": [
     "react",
@@ -19,6 +21,8 @@
   "license": "ISC",
   "dependencies": {
     "@google/generative-ai": "^0.2.1",
+    "guideai-app": "^0.3.4",
+    "html2canvas": "^1.4.1",
     "openai": "^4.28.0"
   },
   "peerDependencies": {
@@ -26,10 +30,18 @@
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@types/jest": "^30.0.0",
     "@types/react": "^18.2.0",
     "javascript-obfuscator": "^4.1.0",
+    "jest": "^30.2.0",
+    "jest-circus": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
+    "jest-localstorage-mock": "^2.4.26",
     "process": "^0.11.10",
     "stream-browserify": "^3.0.0",
+    "ts-jest": "^29.4.5",
     "ts-loader": "^9.5.2",
     "typescript": "^5.0.0",
     "util": "^0.12.5",

package/structure.md

@@ -99,7 +99,7 @@ Functions for interacting with external APIs.
 Utilities for interacting with the DOM.
 
 **Functions:**
-- `highlightElement(selector, logMessageFn)`: Highlights an element on the page
+- `selectElementAndClick(selector, logMessageFn)`: Highlights an element on the page with animated cursor and clicks it
 - DOM traversal and interaction functions
 
 #### `utils/react-hooks.ts`

package/webpack.config.js

@@ -31,21 +31,10 @@ module.exports = {
     ]
   },
   externals: {
-    // Mark React and ReactDOM as external dependencies
-    // This means they won't be bundled with the package
-    // The consuming application is expected to provide them
-    'react': {
-      commonjs: 'react',
-      commonjs2: 'react',
-      amd: 'React',
-      root: 'React'
-    },
-    'react-dom': {
-      commonjs: 'react-dom',
-      commonjs2: 'react-dom',
-      amd: 'ReactDOM',
-      root: 'ReactDOM'
-    }
+    // Externalize React and ReactDOM to expect them from the host environment
+    'react': 'React',
+    'react-dom': 'ReactDOM',
+    'react-dom/client': 'ReactDOM'
   },
   performance: {
     hints: false

package/workflow-trigger-usage.md

@@ -0,0 +1,398 @@
+# Workflow Trigger Feature - Usage Guide
+
+## Overview
+
+The GuideAI package now supports workflow triggers based on trigger words detected in user messages. This feature allows you to create dynamic workflows that are activated when specific keywords or phrases are mentioned by users. Workflows are configured entirely through the `initialize-session` API endpoint.
+
+## Features
+
+✅ **Trigger Word Detection**: Automatically detect trigger words in user messages  
+✅ **Workflow Integration**: Seamlessly integrate with your backend workflow system  
+✅ **Dynamic Prompts**: Workflow-specific prompts from the initialize-session API  
+✅ **Tool-based Triggers**: AI can call workflow triggers through function calls  
+✅ **Configurable**: Support for multiple workflows with different trigger patterns  
+✅ **No Additional API**: All workflow configuration handled through initialize-session  
+
+## Setup
+
+### 1. Backend API Endpoint
+
+You only need to implement the `initialize-session` endpoint:
+
+#### POST `/initialize-session`
+Returns workflow-specific prompts, session data, and available workflows:
+
+```json
+{
+  "organizationKey": "your-org-key",
+  "workflowKey": "customer-support",
+  "userId": "anonymous",
+  "date": "2024-01-15",
+  "time": "14:30:00",
+  "messages": []
+}
+```
+
+Response:
+```json
+{
+  "id": "conversation-uuid",
+  "ephemeralToken": "openai-realtime-token",
+  "prompt": "You are Guide AI. Your role is to help users...",
+  "workflows": [
+    {
+      "id": "workflow-uuid",
+      "name": "Customer Support Workflow",
+      "triggers": ["help", "support", "customer service"],
+      "organizationKey": "org-key-123",
+      "prompt": "You are a helpful customer support agent...",
+      "archived": false,
+      "createdAt": "2024-01-01T00:00:00.000Z",
+      "updatedAt": "2024-01-01T00:00:00.000Z"
+    }
+  ]
+}
+```
+
+### 2. Frontend Configuration
+
+#### Basic Usage
+
+```typescript
+import GuideAI from 'guideai-app';
+
+function App() {
+  return (
+    <GuideAI 
+      organizationKey="your-organization-key"
+      workflowKey="customer-support"
+      position={{ bottom: '2rem', right: '2rem' }}
+      onError={(error) => console.error(error)}
+    />
+  );
+}
+```
+
+#### Advanced Configuration
+
+```typescript
+<GuideAI
+  organizationKey="your-org-key"
+  workflowKey="customer-support"
+  position={{ bottom: '2rem', right: '2rem' }}
+  onError={(error) => console.error(error)}
+  transcript={{
+    enabled: true,
+    showToggleButton: true,
+    position: 'right'
+  }}
+  input={{
+    enableTextInput: true,
+    showInputToggle: true,
+    defaultMode: 'voice',
+    placeholder: "How can I help you today?"
+  }}
+/>
+```
+
+## How It Works
+
+### 1. Session Initialization
+When a conversation starts, the system:
+- Calls `/initialize-session` with the `workflowKey`
+- Receives a workflow-specific prompt and available workflows
+- Configures the AI with trigger word detection capabilities for each workflow
+
+### 2. Workflow Configuration
+The system automatically:
+- Creates individual tools for each active workflow
+- Configures trigger words for each workflow
+- Sets up function call handlers for workflow activation
+
+### 3. Trigger Word Detection
+The AI automatically:
+- Analyzes user messages for trigger words from all workflows
+- Detects patterns like "help", "support", "issue", "problem", etc.
+- Calls the appropriate `trigger_workflow_[id]` function when triggers are found
+
+### 4. Workflow Execution
+When triggers are detected:
+- The AI calls the specific workflow trigger function
+- The workflow's prompt is sent as a system message to guide the AI
+- The AI continues the conversation using the workflow-specific instructions
+
+## Workflow Data Schema
+
+```typescript
+interface Workflow {
+  id: string;                    // Unique workflow identifier
+  name: string;                  // Human-readable workflow name
+  triggers: string[];            // Array of trigger words/phrases
+  organizationKey: string;       // Organization this workflow belongs to
+  prompt: string;                // Workflow-specific prompt for the AI
+  archived: boolean;             // Whether the workflow is archived
+  createdAt: string;             // ISO timestamp of creation
+  updatedAt: string;             // ISO timestamp of last update
+}
+```
+
+## Example Workflows
+
+### Customer Support Workflow
+
+```json
+{
+  "id": "support-workflow-123",
+  "name": "Customer Support Workflow",
+  "triggers": ["help", "support", "issue", "problem", "broken"],
+  "organizationKey": "acme-corp",
+  "prompt": "You are a helpful customer support agent. When users have issues, be empathetic and provide clear solutions. Always ask for specific details about their problem and offer to escalate if needed.",
+  "archived": false,
+  "createdAt": "2024-01-01T00:00:00.000Z",
+  "updatedAt": "2024-01-01T00:00:00.000Z"
+}
+```
+
+### Sales Workflow
+
+```json
+{
+  "id": "sales-workflow-456",
+  "name": "Sales Inquiry Workflow",
+  "triggers": ["pricing", "cost", "buy", "purchase", "quote"],
+  "organizationKey": "acme-corp",
+  "prompt": "You are a sales representative. When users ask about pricing or purchasing, provide detailed information about our products and services. Always ask about their specific needs and budget to provide the best recommendations.",
+  "archived": false,
+  "createdAt": "2024-01-01T00:00:00.000Z",
+  "updatedAt": "2024-01-01T00:00:00.000Z"
+}
+```
+
+### Technical Support Workflow
+
+```json
+{
+  "id": "tech-support-789",
+  "name": "Technical Support Workflow",
+  "triggers": ["error", "bug", "crash", "not working", "technical"],
+  "organizationKey": "acme-corp",
+  "prompt": "You are a technical support specialist. When users report technical issues, ask for specific error messages, steps to reproduce, and their system information. Provide troubleshooting steps and escalate complex issues.",
+  "archived": false,
+  "createdAt": "2024-01-01T00:00:00.000Z",
+  "updatedAt": "2024-01-01T00:00:00.000Z"
+}
+```
+
+## Configuration Options
+
+### Workflow Keys
+Different workflow keys can be used for different scenarios:
+
+- `customer-support`: General customer service
+- `sales-inquiry`: Sales and pricing questions
+- `technical-support`: Technical issues and bugs
+- `onboarding`: New user guidance
+- `billing`: Payment and billing issues
+
+### Trigger Word Patterns
+The system supports various trigger patterns:
+
+- **Exact matches**: "help", "support"
+- **Phrases**: "how to", "what is", "can you"
+- **Contextual**: "broken", "not working", "issue"
+
+## Best Practices
+
+### 1. Define Clear Trigger Words
+- Use specific, actionable trigger words
+- Avoid overly broad terms that might cause false positives
+- Consider synonyms and variations
+
+### 2. Write Effective Workflow Prompts
+- Be specific about the AI's role and behavior
+- Include guidelines for handling different scenarios
+- Provide examples of good responses
+
+### 3. Monitor and Optimize
+- Track which triggers are most effective
+- Adjust trigger words based on user behavior
+- Optimize workflow prompts based on feedback
+
+### 4. Handle Edge Cases
+- Provide fallback responses for unclear triggers
+- Handle multiple trigger words in the same message
+- Consider user context and conversation history
+
+## Error Handling
+
+The system includes robust error handling:
+
+- **Network errors**: Graceful fallback to default behavior
+- **Invalid workflows**: Logging and user-friendly error messages
+- **Missing workflow data**: Fallback to default prompt
+- **Archived workflows**: Automatically excluded from triggers
+
+## Integration Examples
+
+### React Application
+```typescript
+import GuideAI from 'guideai-app';
+
+function CustomerSupportPage() {
+  return (
+    <div>
+      <h1>Customer Support</h1>
+      <GuideAI
+        organizationKey="acme-corp"
+        workflowKey="customer-support"
+        position={{ bottom: '2rem', right: '2rem' }}
+        onError={(error) => {
+          console.error('GuideAI Error:', error);
+          // Handle error appropriately
+        }}
+      />
+    </div>
+  );
+}
+```
+
+### Next.js Application
+```typescript
+// app/support/page.tsx
+'use client';
+
+import GuideAI from 'guideai-app';
+
+export default function SupportPage() {
+  return (
+    <div>
+      <GuideAI
+        organizationKey={process.env.NEXT_PUBLIC_ORG_KEY}
+        workflowKey="customer-support"
+        position={{ bottom: '2rem', right: '2rem' }}
+        transcript={{ enabled: true, position: 'right' }}
+        input={{ enableTextInput: true, defaultMode: 'text' }}
+      />
+    </div>
+  );
+}
+```
+
+## Logging and Monitoring
+
+The system provides comprehensive logging for workflow events:
+
+### Console Logs
+All workflow events are logged to the browser console with clear formatting:
+
+```
+🔧 [2:30:15 PM] Workflows initialized: 3 active workflow(s)
+🎯 [2:30:45 PM] Trigger words detected: Customer Support Workflow
+🚀 [2:30:46 PM] Workflow activated: Customer Support Workflow
+```
+
+### Transcript Logs
+Workflow events are also logged in the conversation transcript:
+
+- **Workflow Initialization**: Shows all available workflows and their trigger words
+- **Trigger Detection**: Indicates when trigger words are detected in user messages
+- **Workflow Activation**: Confirms when a workflow is activated and provides context
+
+### Log Event Types
+
+1. **Workflow Initialization** (`workflow_init`)
+   - Logged when workflows are loaded from the API
+   - Shows total workflows and active workflows
+   - Lists all trigger words for each workflow
+
+2. **Trigger Detection** (`trigger_detected`)
+   - Logged when trigger words are found in user messages
+   - Shows which workflows were triggered
+   - Includes the user message that triggered them
+
+3. **Workflow Activation** (`workflow_activated`)
+   - Logged when a workflow is actually activated
+   - Shows the workflow name and trigger words used
+   - Includes the user message that caused activation
+
+### Debug Mode
+Enable detailed logging by checking the browser console:
+
+```typescript
+<GuideAI
+  organizationKey="your-org-key"
+  workflowKey="customer-support"
+  onError={(error, context) => {
+    console.log('GuideAI Error:', { error, context });
+  }}
+/>
+```
+
+## Troubleshooting
+
+### Common Issues
+
+1. **Workflows not triggering**
+   - Check that workflows are returned in the `/initialize-session` response
+   - Verify trigger words are correctly defined
+   - Ensure workflows are not archived
+   - Check console logs for workflow initialization messages
+
+2. **No workflow prompt received**
+   - Verify `/initialize-session` endpoint returns a `workflows` array
+   - Check that `workflowKey` is being sent in the request
+   - Ensure backend is properly configured for the workflow
+   - Look for workflow initialization logs in console
+
+3. **Function calls not working**
+   - Check browser console for errors
+   - Verify WebRTC connection is established
+   - Ensure session configuration includes the workflow trigger tools
+   - Check for trigger detection logs in console
+
+### Debug Mode
+Enable debug logging to troubleshoot issues:
+
+```typescript
+<GuideAI
+  organizationKey="your-org-key"
+  workflowKey="customer-support"
+  onError={(error, context) => {
+    console.log('GuideAI Error:', { error, context });
+  }}
+/>
+```
+
+## API Reference
+
+### GuideAI Props
+```typescript
+interface GuideAIProps {
+  organizationKey: string;        // Required: Your organization key
+  workflowKey?: string;          // Optional: Workflow key for filtering
+  position?: PositionConfig;     // Optional: Component positioning
+  onError?: ErrorHandler;        // Optional: Error handling
+  // ... other props
+}
+```
+
+### Workflow API Endpoints
+- `POST /initialize-session`: Initialize conversation with workflows
+- `POST /conversations/{id}/messages`: Log conversation messages
+
+### Workflow Utilities
+```typescript
+// Detect which workflows should be triggered
+detectWorkflowTriggers(message: string, workflows: Workflow[]): Workflow[]
+
+// Get trigger words for a specific workflow
+getWorkflowTriggerWords(message: string, workflow: Workflow): string[]
+
+// Check if any workflows should be triggered
+hasWorkflowTriggers(message: string, workflows: Workflow[]): boolean
+
+// Get the most relevant workflow
+getMostRelevantWorkflow(message: string, workflows: Workflow[]): Workflow | null
+```
+
+This workflow trigger system provides a powerful way to create dynamic, context-aware AI interactions that can seamlessly integrate with your existing business processes and workflows, all configured through a single API endpoint.