@foisit/angular-wrapper 1.2.0 → 2.0.0

package/README.md

@@ -1,88 +1,42 @@
-# 🎙️ Foisit Angular Wrapper: Speak, and it’s Done.
+# @foisit/angular-wrapper
 
-The **Foisit Angular Wrapper** brings voice interactivity to your Angular apps with the power of the **Foisit Assistant**. Imagine saying "background red" and watching your app come alive—now that's ✨magic✨!
+Power your Angular apps with an AI-driven text assistant.
 
-### **Why Foisit Angular Wrapper?**
-
-- 🧩 **Dynamic Commands**: Add or remove commands on the fly.
-- 🎨 **Visual Feedback**: Show visual cues when the assistant is active.
-- 🚀 **Effortless Integration**: Set up voice commands in minutes with minimal code.
-- 🗣️ **Voice Feedback**: Interactive voice responses make the assistant engaging.
-- 🔄 **Double Activation**: Activate or put the assistant to sleep with a double-tap.
-
-### 🌐 **Live Demo**
-
-🎉 [Test the Angular Assistant here!](https://ng-foisit-demo.netlify.app/)
+> [!NOTE]
+> 🎙️ **Coming Soon**: Voice recognition and responses are planned for a future release. Current support is focused on text-based interactions and AI intent matching.
 
 ---
 
 ## 🚀 Installation
 
-Get started by installing the library:
-
 ```bash
 npm install @foisit/angular-wrapper
 ```
 
-or
-
-```bash
-yarn add @foisit/angular-wrapper
-```
-
 ---
 
-## 🔧 Setup
-
-Here's how you can integrate the Foisit Assistant into your Angular app in just a few steps:
-
-### Step 1: Import the `AssistantModule`
-
-#### Using `forRoot` in `app.module.ts`
+## 🔧 Basic Setup
 
-```typescript
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { AppComponent } from './app.component';
-import { AssistantModule } from '@foisit/angular-wrapper';
+### 1. Import `AssistantModule`
 
-@NgModule({
-  declarations: [AppComponent],
-  imports: [
-    BrowserModule,
-    AssistantModule.forRoot({
-      activationCommand: 'John',
-      fallbackResponse: 'Sorry, I didn’t understand that.',
-      commands: [
-        { command: 'show profile', action: () => console.log('Showing profile...') },
-        { command: 'log out', action: () => console.log('Logging out...') },
-      ],
-    }),
-  ],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
-```
+Add `AssistantModule.forRoot()` to your `app.config.ts` (for Standalone) or `app.module.ts`.
 
-#### Or Using `app.config.ts` (Latest Versions)
+#### `app.config.ts` (Standalone)
 
 ```typescript
-import { ApplicationConfig, provideZoneChangeDetection, importProvidersFrom } from '@angular/core';
-import { provideRouter } from '@angular/router';
-import { appRoutes } from './app.routes';
 import { AssistantModule } from '@foisit/angular-wrapper';
 
 export const appConfig: ApplicationConfig = {
   providers: [
-    provideZoneChangeDetection({ eventCoalescing: true }),
-    provideRouter(appRoutes),
     importProvidersFrom(
       AssistantModule.forRoot({
-        activationCommand: 'John',
-        fallbackResponse: 'Sorry, I didn’t understand that.',
+        enableSmartIntent: true,
+        introMessage: 'Welcome! How can I help?',
         commands: [
-          { command: 'show profile', action: () => console.log('Showing profile...') },
-          { command: 'log out', action: () => console.log('Logging out...') },
+          {
+            command: 'profile',
+            action: () => router.navigate(['/profile']),
+          },
         ],
       })
     ),
@@ -92,125 +46,53 @@ export const appConfig: ApplicationConfig = {
 
 ---
 
-### Step 2: Interact with the Service 🗣️
-
-Define and remove voice commands and inject the `AssistantService` into your components, start the party by calling `startListening()`.
+## 🛡️ Critical Actions
 
-#### `app.component.ts`
+Commands marked as `critical` will automatically trigger a confirmation flow in the UI.
 
 ```typescript
-import { Component, signal } from '@angular/core';
-import { AssistantService } from '@foisit/angular-wrapper';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
-})
-export class AppComponent {
-  title = 'Angular Assistant Demo';
-  color = signal('transparent'); // Reactive color signal
-
-  constructor(private assistantService: AssistantService) {
-    // Define voice commands
-    this.assistantService.addCommand('background red', () => {
-      this.color.set('red');
-    });
-
-    this.assistantService.addCommand('remove background', () => {
-      this.color.set('transparent');
-    });
-
-    this.assistantService.addCommand('sleep', () => {
-      this.assistantService.stopListening();
-    });
-
-    // Start listening immediately
-    this.assistantService.startListening();
-  }
-}
-```
-
----
-
-### Step 3: Craft the UI 🎨
-
-Create a clean UI to showcase your assistant's magic.
-
-#### `app.component.html`
-
-```html
-<div
-  class="content-container"
-  [ngStyle]="{
-    'background-color': color(),
-    'padding': '20px'
-  }"
->
-  <h1>🧙‍♂️ Angular Assistant Demo</h1>
-  <p>Say the magic words to see the assistant in action:</p>
-  <ul>
-    <li>🟥 Say <strong>"background red"</strong> to make the background red.</li>
-    <li>🔄 Say <strong>"remove background"</strong> to reset the background.</li>
-    <li>😴 Say <strong>"sleep"</strong> to put the assistant to rest.</li>
-  </ul>
-  <p>🎨 Current Background: <strong>{{ color() }}</strong></p>
-</div>
-```
-
----
-
-### Step 4: Run the App 🏃
-
-Start your Angular app and watch the magic happen! ✨
-
-```bash
-ng serve
+const config = {
+  commands: [
+    {
+      command: 'delete post',
+      critical: true,
+      description: 'permanently delete this post',
+      action: () => this.postService.delete(),
+    },
+  ],
+};
 ```
 
 ---
 
-## 🛠️ API Reference
+## 🧠 AI Intent Matching
 
-### `AssistantConfig`
+Enable `enableSmartIntent: true` to allow the assistant to understand natural language.
 
-Configure your assistant's behavior with this object.
-
-| Property            | Type     | Description                                       |
-| ------------------- | -------- | ------------------------------------------------- |
-| `activationCommand` | `string` | The keyword to wake the assistant.                |
-| `fallbackResponse`  | `string` | The message when a command isn’t recognized.      |
-| `commands`          | `Array`  | A list of `{ command: string, action: Function }` |
-
----
-
-### 🔑 Service Methods
-
-| Method           | Description                             |
-| ---------------- | --------------------------------------- |
-| `addCommand`     | Dynamically add a new command.          |
-| `removeCommand`  | Remove an existing command dynamically. |
-| `startListening` | Start listening for voice commands.     |
-| `stopListening`  | Stop listening for voice commands.      |
+**User says:** _"Go to my profile"_  
+**Matched Command:** `{ command: 'profile', keywords: ['account', 'user settings'], ... }`
 
 ---
 
-## 🌟 Features
+## 🛠️ Service Usage: `AssistantService`
 
-- 🧩 **Dynamic Commands**: Add or remove commands on the fly.
-- 🎨 **Visual Feedback**: Show visual cues when the assistant is active.
-- 🚀 **Easy Integration**: Integrate the assistant with just a few lines of code.
-- 🗣️ **Voice Feedback**: The assistant can respond with voice feedback.
-- 🔄 **Double Activation**: The assistant can be activated with a double-click and also put to sleep with a double-click when active.
+Interact with the assistant dynamically from your components.
 
----
+```typescript
+import { AssistantService } from '@foisit/angular-wrapper';
 
-## 🤝 Contributing
+@Component({...})
+export class MyComponent {
+  constructor(private assistant: AssistantService) {}
 
-Want to make the assistant even better? PRs are welcomed! 🙌
+  addCommand() {
+    this.assistant.addCommand('clear', () => this.clearAll());
+  }
+}
+```
 
 ---
 
-## 📄 License
+## 👋 Gesture Activation
 
-This library is licensed under the MIT License.
+Once integrated, a subtle **"Powered by Foisit"** watermark appears. **Double-click** it to open the chat overlay.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foisit/angular-wrapper",
-  "version": "1.2.0",
+  "version": "2.0.0",
   "peerDependencies": {
     "@angular/common": "^19.0.0",
     "@angular/core": "^19.0.0"