@foisit/vue-wrapper 2.4.4 → 3.0.0

package/README.md

@@ -27,10 +27,13 @@ Transform your Vue app into an intelligent, voice-ready platform. Foisit provide
 
 ## Features
 
-- **Natural Language Understanding** - AI-powered intent matching using GPT-4o mini (proxied securely)
+- **Natural Language Understanding** - AI-powered intent matching (proxied securely)
 - **Smart Slot Filling** - Auto-generates forms for missing parameters
 - **Critical Action Protection** - Built-in confirmation dialogs for dangerous operations
-- **Premium UI** - Glassmorphic overlay with dark/light mode support
+- **Programmatic UI Triggers** - Direct command execution via `runCommand()`
+- **Rich Markdown Rendering** - Enhanced response formatting with headings, code, and links
+- **Advanced File Validations** - Comprehensive client-side file validation with size, type, and dimension checks
+- **Premium UI** - Glass or solid theme with dark/light mode support
 - **Zero Backend Required** - Secure proxy architecture keeps API keys server-side
 - **Vue Native** - Uses Composition API, `provide/inject`, and Vue 3 patterns
 - **Type-Safe** - Full TypeScript support with comprehensive types
@@ -196,9 +199,34 @@ Collect files via the built-in form UI and receive them in your command `action`
 }
 ```
 
-`FileParameter` supports validations like `maxFiles`, `maxSizeBytes`, `maxTotalBytes`, and media/image constraints like `maxDurationSec`, `maxWidth`, and `maxHeight`.
+`FileParameter` supports advanced validations:
 
-### 4. Critical Actions
+- `maxFiles`: Maximum number of files allowed (default: 1 for single, 10 for multiple)
+- `maxSizeBytes`: Maximum size per file in bytes
+- `maxTotalBytes`: Maximum total size for all files combined
+- `maxDurationSec`: Maximum duration for media files (audio/video) in seconds
+- `maxWidth` / `maxHeight`: Maximum dimensions for images in pixels
+- `accept`: Allowed MIME types or file extensions (e.g., `['image/*', '.pdf']`)
+- `multiple`: Allow selecting multiple files
+- `capture`: Hint for mobile devices (`'camera'` or `'microphone'`)
+- `delivery`: How files are delivered to your action (`'file'` or `'base64'`)
+
+Files are validated client-side before submission, with clear error messages for violations.
+
+### 4. Rich Markdown Rendering
+
+Assistant responses support rich markdown formatting for enhanced readability:
+
+- **Headings**: `# H1` through `###### H6`
+- **Text Formatting**: `**bold**`, `*italic*`, `~~strikethrough~~`
+- **Code**: Inline `code` and code blocks with syntax highlighting
+- **Links**: `[text](url)` with safe external linking
+- **Lists**: Ordered and unordered lists
+- **Line breaks** and paragraphs
+
+Markdown is automatically rendered in AI responses, while user messages remain plain text.
+
+### 5. Critical Actions
 
 Protect dangerous operations with automatic confirmation dialogs:
 
@@ -214,7 +242,7 @@ Protect dangerous operations with automatic confirmation dialogs:
 }
 ```
 
-### 5. Select Parameters (Static)
+### 6. Select Parameters (Static)
 
 Provide predefined options:
 
@@ -234,7 +262,7 @@ Provide predefined options:
 }
 ```
 
-### 6. Dynamic Select Parameters
+### 7. Dynamic Select Parameters
 
 Load options from APIs:
 
@@ -363,6 +391,36 @@ const commands = assistant.getCommands();
 console.log('Available commands:', commands);
 ```
 
+##### `runCommand(options)`
+
+Programmatically trigger a command execution with optional parameters. This allows you to invoke commands directly from your code without user input.
+
+```javascript
+// Basic usage - trigger a command by ID
+assistant.runCommand({ commandId: 'refresh-data' });
+
+// With parameters
+assistant.runCommand({
+  commandId: 'create-user',
+  params: { name: 'John', email: 'john@example.com' },
+});
+
+// Open overlay and show the command invocation
+assistant.runCommand({
+  commandId: 'export-report',
+  params: { format: 'pdf' },
+  openOverlay: true,
+  showInvocation: true,
+});
+```
+
+**Options:**
+
+- `commandId` (required): The ID of the command to run
+- `params` (optional): Parameters to pass to the command action
+- `openOverlay` (optional): Whether to open the assistant overlay (default: false)
+- `showInvocation` (optional): Whether to display the command invocation in the chat (default: false)
+
 ---
 
 ## Configuration Options
@@ -396,9 +454,57 @@ interface AssistantConfig {
     customHtml?: string;
     position?: { bottom: string; right: string };
   };
+
+  // Theme mode: 'glass' (default) or 'solid'
+  theme?: 'glass' | 'solid';
+
+  // Custom colors for solid theme (ignored in glass mode)
+  themeColors?: ThemeColors;
+}
+```
+
+### `ThemeColors`
+
+Custom colors for solid theme mode:
+
+```typescript
+interface ThemeColors {
+  background?: string; // Background color (e.g., '#1e1e2e')
+  text?: string; // Primary text color (e.g., '#ffffff')
+  accent?: string; // Accent color for highlights (e.g., '#89b4fa' or a gradient)
+  userBubbleBg?: string; // User message bubble background
+  systemBubbleBg?: string; // System message bubble background
+  border?: string; // Border color
 }
 ```
 
+### Theme Customization Example
+
+```vue
+<script setup>
+const config = {
+  commands: [...],
+  // Use solid theme with custom colors
+  theme: 'solid',
+  themeColors: {
+    background: '#1e1e2e',
+    text: '#cdd6f4',
+    accent: '#89b4fa',
+    userBubbleBg: 'rgba(137, 180, 250, 0.2)',
+    systemBubbleBg: 'rgba(255, 255, 255, 0.05)',
+  },
+};
+</script>
+
+<template>
+  <AssistantProvider :config="config">
+    <App />
+  </AssistantProvider>
+</template>
+```
+
+> **Note**: Glass theme (default) uses glassmorphism with blur effects and adapts to light/dark mode via `prefers-color-scheme`. Solid theme ignores system preferences and uses configured colors.
+
 ---
 
 ## Advanced Usage

package/index.d.ts

@@ -1,3 +1,4 @@
 export { default as AssistantProvider } from './lib/components/AssistantProvider.vue';
 export { useAssistant } from './lib/composables/useAssistant';
 export { AssistantService } from './lib/services/AssistantService';
+export type { ThemeColors } from '../../core/src/index.ts';