@foisit/vue-wrapper 1.2.0 β 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 +46 -124
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,177 +1,99 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @foisit/vue-wrapper
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Power your Vue apps with an AI-driven text assistant.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
- 𧩠**Dynamic Commands**: Add or remove commands on the fly.
|
|
8
|
-
- π¨ **Visual Feedback**: Show visual cues when the assistant is active.
|
|
9
|
-
- π **Effortless Integration**: Integrate the assistant with just a few lines of code.
|
|
10
|
-
- π£οΈ **Voice Feedback**: The assistant can respond with voice feedback.
|
|
11
|
-
- π **Double Activation**: Activate or put the assistant to sleep with a double-click.
|
|
12
|
-
|
|
13
|
-
### π **Live Demo**
|
|
14
|
-
|
|
15
|
-
π [Test the Vue Assistant here!](https://foisit-vue-demo.netlify.app/)
|
|
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.
|
|
16
7
|
|
|
17
8
|
---
|
|
18
9
|
|
|
19
10
|
## π Installation
|
|
20
11
|
|
|
21
|
-
Get started by installing the library:
|
|
22
|
-
|
|
23
12
|
```bash
|
|
24
13
|
npm install @foisit/vue-wrapper
|
|
25
14
|
```
|
|
26
15
|
|
|
27
|
-
or
|
|
28
|
-
|
|
29
|
-
```bash
|
|
30
|
-
yarn add @foisit/vue-wrapper
|
|
31
|
-
```
|
|
32
|
-
|
|
33
16
|
---
|
|
34
17
|
|
|
35
|
-
## π§ Setup
|
|
36
|
-
|
|
37
|
-
Hereβs how you can integrate the Foisit Assistant into your Vue app.
|
|
38
|
-
|
|
39
|
-
### Step 1: Wrap Your App in the `AssistantProvider`
|
|
18
|
+
## π§ Basic Setup
|
|
40
19
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
#### `App.vue`
|
|
20
|
+
Wrap your application (or a specific layout) in the `AssistantProvider` to enable the assistant.
|
|
44
21
|
|
|
45
22
|
```vue
|
|
46
23
|
<script setup lang="ts">
|
|
47
24
|
import { AssistantProvider } from '@foisit/vue-wrapper';
|
|
48
25
|
|
|
49
26
|
const config = {
|
|
50
|
-
|
|
51
|
-
|
|
27
|
+
introMessage: 'Hi! How can I help?',
|
|
28
|
+
enableSmartIntent: true,
|
|
52
29
|
commands: [
|
|
53
|
-
{
|
|
54
|
-
|
|
30
|
+
{
|
|
31
|
+
command: 'home',
|
|
32
|
+
action: () => router.push('/'),
|
|
33
|
+
},
|
|
55
34
|
],
|
|
56
35
|
};
|
|
57
36
|
</script>
|
|
58
37
|
|
|
59
38
|
<template>
|
|
60
39
|
<AssistantProvider :config="config">
|
|
61
|
-
<
|
|
40
|
+
<RouterView />
|
|
62
41
|
</AssistantProvider>
|
|
63
42
|
</template>
|
|
64
43
|
```
|
|
65
44
|
|
|
66
45
|
---
|
|
67
46
|
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
Use the `useAssistant` composable **inside** components wrapped by the `AssistantProvider`. Define and use commands dynamically.
|
|
71
|
-
|
|
72
|
-
#### `Content.vue`
|
|
47
|
+
## π‘οΈ Critical Actions
|
|
73
48
|
|
|
74
|
-
|
|
75
|
-
<script setup lang="ts">
|
|
76
|
-
import { ref } from 'vue';
|
|
77
|
-
import { useAssistant } from '@foisit/vue-wrapper';
|
|
78
|
-
|
|
79
|
-
const assistant = useAssistant(); // This will now work because it's inside the provider
|
|
80
|
-
const color = ref('transparent');
|
|
81
|
-
|
|
82
|
-
// Add commands dynamically
|
|
83
|
-
assistant.addCommand('background red', () => {
|
|
84
|
-
color.value = 'red';
|
|
85
|
-
});
|
|
86
|
-
|
|
87
|
-
assistant.addCommand('remove background', () => {
|
|
88
|
-
color.value = 'transparent';
|
|
89
|
-
});
|
|
90
|
-
|
|
91
|
-
assistant.addCommand('sleep', () => {
|
|
92
|
-
assistant.stopListening();
|
|
93
|
-
});
|
|
94
|
-
|
|
95
|
-
// Start listening immediately
|
|
96
|
-
assistant.startListening();
|
|
97
|
-
</script>
|
|
98
|
-
|
|
99
|
-
<template>
|
|
100
|
-
<div :style="{ backgroundColor: color, padding: '20px' }" class="content-container">
|
|
101
|
-
<h1>π§ββοΈ Vue Assistant Demo</h1>
|
|
102
|
-
<p>Say the magic words to see the assistant in action:</p>
|
|
103
|
-
<ul>
|
|
104
|
-
<li>π₯ Say <strong>"background red"</strong> to make the background red.</li>
|
|
105
|
-
<li>π Say <strong>"remove background"</strong> to reset the background.</li>
|
|
106
|
-
<li>π΄ Say <strong>"sleep"</strong> to put the assistant to rest.</li>
|
|
107
|
-
</ul>
|
|
108
|
-
<p>
|
|
109
|
-
π¨ Current Background: <strong>{{ color }}</strong>
|
|
110
|
-
</p>
|
|
111
|
-
</div>
|
|
112
|
-
</template>
|
|
49
|
+
Commands marked as `critical` will automatically trigger a confirmation flow in the UI.
|
|
113
50
|
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
}
|
|
123
|
-
|
|
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
|
+
};
|
|
124
62
|
```
|
|
125
63
|
|
|
126
64
|
---
|
|
127
65
|
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
Start your Vue app and watch the magic happen! β¨
|
|
131
|
-
|
|
132
|
-
```bash
|
|
133
|
-
npm run dev
|
|
134
|
-
```
|
|
66
|
+
## π§ AI Intent Matching
|
|
135
67
|
|
|
136
|
-
|
|
68
|
+
Enable `enableSmartIntent: true` to allow the assistant to understand natural language.
|
|
137
69
|
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
```
|
|
70
|
+
**User says:** _"Go to my profile"_
|
|
71
|
+
**Matched Command:** `{ command: 'profile', keywords: ['account', 'user settings'], ... }`
|
|
141
72
|
|
|
142
73
|
---
|
|
143
74
|
|
|
144
|
-
## π οΈ
|
|
145
|
-
|
|
146
|
-
### `AssistantConfig`
|
|
147
|
-
|
|
148
|
-
Configure your assistant's behavior with this object.
|
|
75
|
+
## π οΈ Composable Usage: `useAssistant`
|
|
149
76
|
|
|
150
|
-
|
|
151
|
-
| ------------------- | -------- | ------------------------------------------------- |
|
|
152
|
-
| `activationCommand` | `string` | The keyword to wake the assistant. |
|
|
153
|
-
| `fallbackResponse` | `string` | The message when a command isnβt recognized. |
|
|
154
|
-
| `commands` | `Array` | A list of `{ command: string, action: Function }` |
|
|
77
|
+
Interact with the assistant instance from any component within the provider.
|
|
155
78
|
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
| Method | Description |
|
|
161
|
-
| ---------------- | --------------------------------------- |
|
|
162
|
-
| `addCommand` | Dynamically add a new command. |
|
|
163
|
-
| `removeCommand` | Remove an existing command dynamically. |
|
|
164
|
-
| `startListening` | Start listening for voice commands. |
|
|
165
|
-
| `stopListening` | Stop listening for voice commands. |
|
|
79
|
+
```vue
|
|
80
|
+
<script setup lang="ts">
|
|
81
|
+
import { useAssistant } from '@foisit/vue-wrapper';
|
|
166
82
|
|
|
167
|
-
|
|
83
|
+
const assistant = useAssistant();
|
|
168
84
|
|
|
169
|
-
|
|
85
|
+
const addTempCommand = () => {
|
|
86
|
+
assistant.addCommand('clear', () => clearAll());
|
|
87
|
+
};
|
|
88
|
+
</script>
|
|
170
89
|
|
|
171
|
-
|
|
90
|
+
<template>
|
|
91
|
+
<button @click="addTempCommand">Add Command</button>
|
|
92
|
+
</template>
|
|
93
|
+
```
|
|
172
94
|
|
|
173
95
|
---
|
|
174
96
|
|
|
175
|
-
##
|
|
97
|
+
## π Gesture Activation
|
|
176
98
|
|
|
177
|
-
|
|
99
|
+
Once integrated, a subtle **"Powered by Foisit"** watermark appears. **Double-click** it to open the chat overlay.
|