@foisit/vue-wrapper 0.0.1 β 1.2.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 +174 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,7 +1,177 @@
|
|
|
1
|
-
#
|
|
1
|
+
# ποΈ Foisit Vue Wrapper: Speak, and itβs Done.
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
The **Foisit Vue Wrapper** brings voice interactivity to your Vue apps with the power of the **Foisit Assistant**. From recognizing voice commands to responding with actions, this is your all-in-one assistant for Vue! π§ββοΈβ¨
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## π Features
|
|
6
6
|
|
|
7
|
-
|
|
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/)
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
## π Installation
|
|
20
|
+
|
|
21
|
+
Get started by installing the library:
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
npm install @foisit/vue-wrapper
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
or
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
yarn add @foisit/vue-wrapper
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
---
|
|
34
|
+
|
|
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`
|
|
40
|
+
|
|
41
|
+
The `AssistantProvider` must be used as a wrapper to provide the assistant context.
|
|
42
|
+
|
|
43
|
+
#### `App.vue`
|
|
44
|
+
|
|
45
|
+
```vue
|
|
46
|
+
<script setup lang="ts">
|
|
47
|
+
import { AssistantProvider } from '@foisit/vue-wrapper';
|
|
48
|
+
|
|
49
|
+
const config = {
|
|
50
|
+
activationCommand: 'John',
|
|
51
|
+
fallbackResponse: 'Sorry, I didnβt understand that.',
|
|
52
|
+
commands: [
|
|
53
|
+
{ command: 'show profile', action: () => console.log('Showing profile...') },
|
|
54
|
+
{ command: 'log out', action: () => console.log('Logging out...') },
|
|
55
|
+
],
|
|
56
|
+
};
|
|
57
|
+
</script>
|
|
58
|
+
|
|
59
|
+
<template>
|
|
60
|
+
<AssistantProvider :config="config">
|
|
61
|
+
<Content />
|
|
62
|
+
</AssistantProvider>
|
|
63
|
+
</template>
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
---
|
|
67
|
+
|
|
68
|
+
### Step 2: Add Commands and Interact with the Assistant
|
|
69
|
+
|
|
70
|
+
Use the `useAssistant` composable **inside** components wrapped by the `AssistantProvider`. Define and use commands dynamically.
|
|
71
|
+
|
|
72
|
+
#### `Content.vue`
|
|
73
|
+
|
|
74
|
+
```vue
|
|
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>
|
|
113
|
+
|
|
114
|
+
<style scoped>
|
|
115
|
+
.content-container {
|
|
116
|
+
text-align: center;
|
|
117
|
+
margin: 0 auto;
|
|
118
|
+
max-width: 500px;
|
|
119
|
+
border: 1px solid #ddd;
|
|
120
|
+
border-radius: 8px;
|
|
121
|
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
122
|
+
}
|
|
123
|
+
</style>
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
---
|
|
127
|
+
|
|
128
|
+
### Step 3: Run the App π
|
|
129
|
+
|
|
130
|
+
Start your Vue app and watch the magic happen! β¨
|
|
131
|
+
|
|
132
|
+
```bash
|
|
133
|
+
npm run dev
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
or
|
|
137
|
+
|
|
138
|
+
```bash
|
|
139
|
+
yarn dev
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
---
|
|
143
|
+
|
|
144
|
+
## π οΈ API Reference
|
|
145
|
+
|
|
146
|
+
### `AssistantConfig`
|
|
147
|
+
|
|
148
|
+
Configure your assistant's behavior with this object.
|
|
149
|
+
|
|
150
|
+
| Property | Type | Description |
|
|
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 }` |
|
|
155
|
+
|
|
156
|
+
---
|
|
157
|
+
|
|
158
|
+
### π Composable Methods
|
|
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. |
|
|
166
|
+
|
|
167
|
+
---
|
|
168
|
+
|
|
169
|
+
## π€ Contributing
|
|
170
|
+
|
|
171
|
+
Want to make the assistant even better? PRs are welcomed! π
|
|
172
|
+
|
|
173
|
+
---
|
|
174
|
+
|
|
175
|
+
## π License
|
|
176
|
+
|
|
177
|
+
This library is licensed under the MIT License.
|