@foisit/vue-wrapper 0.0.1 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +96 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,7 +1,99 @@
|
|
|
1
|
-
# vue-wrapper
|
|
1
|
+
# @foisit/vue-wrapper
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Power your Vue apps with an AI-driven text assistant.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
> [!NOTE]
|
|
6
|
+
> 🎙️ **Coming Soon**: Voice recognition and responses are planned for a future release. Current support is focused on text-based interactions and AI intent matching.
|
|
6
7
|
|
|
7
|
-
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
## 🚀 Installation
|
|
11
|
+
|
|
12
|
+
```bash
|
|
13
|
+
npm install @foisit/vue-wrapper
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
---
|
|
17
|
+
|
|
18
|
+
## 🔧 Basic Setup
|
|
19
|
+
|
|
20
|
+
Wrap your application (or a specific layout) in the `AssistantProvider` to enable the assistant.
|
|
21
|
+
|
|
22
|
+
```vue
|
|
23
|
+
<script setup lang="ts">
|
|
24
|
+
import { AssistantProvider } from '@foisit/vue-wrapper';
|
|
25
|
+
|
|
26
|
+
const config = {
|
|
27
|
+
introMessage: 'Hi! How can I help?',
|
|
28
|
+
enableSmartIntent: true,
|
|
29
|
+
commands: [
|
|
30
|
+
{
|
|
31
|
+
command: 'home',
|
|
32
|
+
action: () => router.push('/'),
|
|
33
|
+
},
|
|
34
|
+
],
|
|
35
|
+
};
|
|
36
|
+
</script>
|
|
37
|
+
|
|
38
|
+
<template>
|
|
39
|
+
<AssistantProvider :config="config">
|
|
40
|
+
<RouterView />
|
|
41
|
+
</AssistantProvider>
|
|
42
|
+
</template>
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
---
|
|
46
|
+
|
|
47
|
+
## 🛡️ Critical Actions
|
|
48
|
+
|
|
49
|
+
Commands marked as `critical` will automatically trigger a confirmation flow in the UI.
|
|
50
|
+
|
|
51
|
+
```typescript
|
|
52
|
+
const config = {
|
|
53
|
+
commands: [
|
|
54
|
+
{
|
|
55
|
+
command: 'delete post',
|
|
56
|
+
critical: true,
|
|
57
|
+
description: 'permanently delete this post',
|
|
58
|
+
action: () => api.deletePost(),
|
|
59
|
+
},
|
|
60
|
+
],
|
|
61
|
+
};
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
---
|
|
65
|
+
|
|
66
|
+
## 🧠 AI Intent Matching
|
|
67
|
+
|
|
68
|
+
Enable `enableSmartIntent: true` to allow the assistant to understand natural language.
|
|
69
|
+
|
|
70
|
+
**User says:** _"Go to my profile"_
|
|
71
|
+
**Matched Command:** `{ command: 'profile', keywords: ['account', 'user settings'], ... }`
|
|
72
|
+
|
|
73
|
+
---
|
|
74
|
+
|
|
75
|
+
## 🛠️ Composable Usage: `useAssistant`
|
|
76
|
+
|
|
77
|
+
Interact with the assistant instance from any component within the provider.
|
|
78
|
+
|
|
79
|
+
```vue
|
|
80
|
+
<script setup lang="ts">
|
|
81
|
+
import { useAssistant } from '@foisit/vue-wrapper';
|
|
82
|
+
|
|
83
|
+
const assistant = useAssistant();
|
|
84
|
+
|
|
85
|
+
const addTempCommand = () => {
|
|
86
|
+
assistant.addCommand('clear', () => clearAll());
|
|
87
|
+
};
|
|
88
|
+
</script>
|
|
89
|
+
|
|
90
|
+
<template>
|
|
91
|
+
<button @click="addTempCommand">Add Command</button>
|
|
92
|
+
</template>
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
---
|
|
96
|
+
|
|
97
|
+
## 👋 Gesture Activation
|
|
98
|
+
|
|
99
|
+
Once integrated, a subtle **"Powered by Foisit"** watermark appears. **Double-click** it to open the chat overlay.
|