@foisit/vue-wrapper 2.4.5 → 3.1.0

package/README.md

@@ -33,7 +33,7 @@ Transform your Vue app into an intelligent, voice-ready platform. Foisit provide
 - **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** - Glassmorphic overlay with dark/light mode support
+- **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
@@ -131,9 +131,9 @@ Define parameters and Foisit will automatically generate forms to collect them:
   command: 'create user',
   description: 'Create a new user account',
   parameters: [
-    { name: 'username', type: 'string', required: true },
-    { name: 'email', type: 'string', required: true },
-    { name: 'age', type: 'number', required: false }
+    { name: 'username', label: 'Username', type: 'string', required: true },
+    { name: 'email', label: 'Email address', type: 'string', required: true },
+    { name: 'age', label: 'Age', type: 'number', required: false }
   ],
   action: (params) => userService.create(params)
 }
@@ -167,10 +167,18 @@ Example:
 - `number` - Numeric input
 - `date` - Date picker
 - `select` - Dropdown (static or async options)
+  - **new:** set `multiple: true` on a `select` parameter to allow picking several values; the result is sent as an array.
 - `file` - File upload input
 
+**Field label text**
+
+- By default, the form label uses `description` (or falls back to `name`).
+- Set `label` on a parameter when you want explicit, user-friendly label text.
+
 ### 3. File Parameters
 
+> **Tip:** to present users with multiple pill‑style options and let them pick more than one, use the `select` parameter with `multiple: true` or call `overlayManager.addOptions(..., { allowMultiple: true })` in custom integrations. The overlay now supports multi‑choice behaviour via either method.
+
 Collect files via the built-in form UI and receive them in your command `action`.
 
 ```javascript
@@ -454,9 +462,60 @@ 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
+  checkboxAccent?: string; // Checkbox accent color
+  checkboxBorder?: string; // Checkbox border color
+  checkboxCheck?: string; // Checkbox checkmark 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';