@aakash58/chatbot 1.1.19 → 1.1.21

package/projects/app-doohbot/src/styles.scss

@@ -0,0 +1,15 @@
+// /* You can add global styles to this file, and also import other style files */
+// :root {
+//   --primary-color: #4F46E5;
+//   --secondary-color: #6c757d;
+//   --background-color: #f8f9fa;
+//   --white: #ffffff;
+//   --text-color: #333;
+//   --font-family: Arial, sans-serif;
+// }
+
+// body {
+//   font-family: var(--font-family);
+//   background-color: var(--background-color);
+//   color: var(--text-color);
+// }

package/projects/app-doohbot/tsconfig.app.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/app",
+    "types": []
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "src/**/*.spec.ts"
+  ]
+}

package/projects/app-doohbot/tsconfig.spec.json

@@ -0,0 +1,14 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "src/**/*.ts"
+  ]
+}

package/projects/doohbot/README.md

@@ -0,0 +1,64 @@
+# Doohbot
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.3.0.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the library, run:
+
+```bash
+ng build doohbot
+```
+
+This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+
+### Publishing the Library
+
+Once the project is built, you can publish your library by following these steps:
+
+1. Navigate to the `dist` directory:
+
+   ```bash
+   cd dist/doohbot
+   ```
+
+2. Run the `npm publish` command to publish your library to the npm registry:
+   ```bash
+   npm publish
+   ```
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

package/projects/doohbot/docs/README.md

@@ -0,0 +1,140 @@
+# Authentication & Authorization System
+
+This document outlines the authentication and authorization mechanisms in the project, including token handling, session management, and security practices.
+
+---
+
+## 1. Authentication Flow
+
+The system supports both **Standard Login** (username/password) and **Federated Login** (external credentials).
+
+### Flow Steps:
+
+1. **Triggering Login**
+   - The UI (e.g., `Doohbot` component) triggers login via `ChatFacadeService`.
+   - `ChatFacadeService` delegates the API call to `AccountService`.
+
+2. **Session Initialization**
+   - On successful login, `AuthService.setSession()` is called.
+   - Responsibilities of `setSession()`:
+     - Decode the JWT `access_token` to extract user details (`user_id`, `roles`, etc.).
+     - Securely save `access_token` and `refresh_token`.
+     - Set the application state to **authenticated**.
+     - Start a **Proactive Refresh Timer** to refresh tokens automatically.
+
+---
+
+## 2. Token Storage & Security
+
+The project uses a dedicated **TokenStorageService** for persistence and security.
+
+- **Encrypted Storage**
+  - All sensitive data in `localStorage` is encrypted using **AES (Advanced Encryption Standard)** via CryptoJS.
+  - Prevents tokens and user information from being visible in plain text in browser developer tools.
+- **Unified Key**
+  - All authentication-related data is stored under a single configuration-defined key for consistency and easier management.
+
+---
+
+## 3. Authorization
+
+Authorization relies on **user metadata** decoded from the JWT.
+
+- **Roles & Permissions**
+  - During login, user roles and permissions are extracted and saved securely.
+- **Contextual Data**
+  - Tracks `organization_id`, `company_id`, and `office_id`.
+  - Used to scope API requests and filter data appropriately.
+
+---
+
+## 4. Token Refresh Mechanism
+
+Ensures uninterrupted login via **two strategies**:
+
+### 4.1 Proactive Refresh
+
+- `AuthService` schedules a timer to automatically call `/auth/refresh`.
+- Triggered **5 minutes before the current `access_token` expires**.
+
+### 4.2 Reactive Refresh (Interceptor)
+
+- Handles edge cases like 401 errors if the proactive timer is missed.
+- Steps:
+  1. Intercept the `401 Unauthorized` response.
+  2. Pause all outgoing requests.
+  3. Refresh the token using the `refresh_token`.
+  4. Retry the original request with the new token.
+  5. Resume all paused requests.
+
+---
+
+## 5. Application Bootstrapping
+
+On application startup, the `Doohbot` component calls `AuthService.validateStoredToken()`. This method checks if a valid token exists:
+
+```ts
+AuthService.validateStoredToken();
+```
+
+- If valid, it restores the session.
+- If expired but a `refresh_token` exists, it attempts an immediate refresh.
+- If no valid session can be restored, it sets the state to unauthenticated.
+
+---
+
+## 6. Logout Process
+
+The `logout()` process (via `ChatFacadeService`) ensures a clean exit:
+
+- Calls the backend logout endpoint to invalidate the `refresh_token`.
+- Clears all encrypted `localStorage`, `sessionStorage`, and reactive states.
+- Resets the UI and chat history.
+
+This architecture provides a secure, seamless, and reactive authentication experience while keeping sensitive data protected.
+
+## 7. Flow Diagram
+
+flowchart TD
+%% Login Flow
+A[User opens app] --> B[Doohbot component triggers login]
+B --> C[ChatFacadeService calls AccountService]
+C --> D{Login Success?}
+D -->|Yes| E["AuthService.setSession()"]
+E --> F["Decode JWT access_token"]
+F --> G["Save access_token & refresh_token securely"]
+G --> H[Set app state to authenticated]
+H --> I[Start proactive refresh timer]
+D -->|No| J[Show login error]
+
+    %% Token Refresh
+    I --> K{Token about to expire?}
+    K -->|Yes| L["Proactive Refresh: Call /auth/refresh"]
+    K -->|No| M[Wait]
+
+    %% Reactive Refresh (401 Unauthorized)
+    N[Outgoing API Request] --> O{401 Unauthorized?}
+    O -->|Yes| P[Pause outgoing requests]
+    P --> Q["Refresh token using refresh_token"]
+    Q --> R[Retry original request with new token]
+    R --> S[Resume paused requests]
+    O -->|No| T[Process request normally]
+
+    %% Application Bootstrapping
+    U[App Startup] --> V["AuthService.validateStoredToken()"]
+    V --> W{Token valid?}
+    W -->|Yes| H
+    W -->|Expired but refresh_token exists| L
+    W -->|No valid session| X[Set app state to unauthenticated]
+
+    %% Logout Flow
+    Y[User clicks logout] --> Z["ChatFacadeService.logout()"]
+    Z --> ZA[Call backend logout endpoint]
+    ZA --> ZB[Clear localStorage & sessionStorage]
+    ZB --> ZC[Reset UI and chat history]
+
+## Flow Diagram Preview
+
+### [View](https://mermaid.live/edit#pako:eNplVWtT2zoQ_Ss7mumddiakeVLiD70TEij0AWkCpcVm7gh7sT04kivJPBr473cl2Umg-ZCxpXOOdo921ysWywRZwG4KeR9nXBk4m0bizRv4KtNcwCEtR2IcnmtUIEsUGnhZXsHOzkfYD6dSZtfSQCyXpRQoDBiVpykqDYWlX0Vi30En4STj5pDHPMEFqrs8Roh5UWgYx7GshKkXiTBxhOnKn7-o4hi1_vc5ElO78fQL9RMchBEbVyarWW2NJKB1LsXbdxEjkQMnckiwKdoE4fPFGXAn9Z-Rtygc6tChPhFqwe_wxT78AwpvFOqsftcYVwqLR0f85IhH4QKNtQO04QbBSOAUFNmQx_SeEPDIAY_DhbHOlkry2OR0VK0NJl-iumpyO5FP8DlcZPLe2weolLTbkQD60aWcuVjmnu1Xj90RX1Z-i1_LythI8KHMFVrfLOjLxruvlO5sHUgtFcCEbgPe2_jf18G5TDdkG9y38ILnZjugOb4UgreDThfOhRWSKv-DyTuPPQlPK5PKXKQwnh0T_HeF2vhCOl29JjVxn27inoUzXmkE2cgoL6HrKGdO6jtl14TiL67SHrx1mevMvjvOPJyjUY9AR5PpvGiU4T43GQi890o1Z-44C-LoaolQ2qCS18Gcri07C8lsW1drVSHVksx-3LZxXJaFLRqqYNiX0mijqK4ocI84DwkAroiquvl-vGqBO17kCVXdwkiFiSuGuheswA_HuaiLxGEbiy82Fh9trxy4AkrgmurpZSvgQ06ZUiVtw0-kl6VGcY34BD__bo9KvG6QtQPU7rZy_byxa7_8zInJl1s3Tmjbp35Jqf81TtoesZXzpQePQ1fa1zym2JNaCOixpCoyDXbswfvhpECuCEXTyVrJU6RRUOdULzQcP9ouJ7YUKNPzY-B0AA1RAxk5JJW9YtZiqcoTFhhVYYtRuy-5fWUrqxIxsmOJEQvoMeHqNmKReCZOycWllMuGpmSVZiy44YWmt6q0Nz3Near4BkIpoZrYYcqC_shJsGDFHljQ7fTbg15_MNwddYb93odRr8UeWbDT6w3anT79dwbDTnfU_TB8brE_7thue68z7Ax3B3v93d1Rb284bDFMckrqm_9euM_G8__P7w-4)
+
+---

package/projects/doohbot/ng-package.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/doohbot",
+  "lib": {
+    "entryFile": "src/public-api.ts",
+    "styleIncludePaths": ["src/lib"]
+  },
+  "assets": ["src/assets"],
+  "allowedNonPeerDependencies": ["crypto-js", "@auth0/angular-jwt"]
+}

package/projects/doohbot/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@aakash58/chatbot",
+  "version": "1.1.19",
+  "description": "version support 17+",
+  "peerDependencies": {
+    "@angular/common": ">=17.0.0",
+    "@angular/core": ">=17.0.0",
+    "@angular/material": ">=17.0.0",
+    "@angular/cdk": ">=17.0.0"
+  },
+  "dependencies": {
+    "crypto-js": "^4.2.0",
+    "@auth0/angular-jwt": "^5.2.0"
+  },
+  "sideEffects": false
+}

package/projects/doohbot/src/lib/app/chat/chat-ui-state.service.ts

@@ -0,0 +1,194 @@
+import { Injectable, signal, computed, effect, Signal } from '@angular/core';
+import { Message } from '../../core/models/message';
+
+/**
+ * ChatUIStateService - Centralized UI state management
+ *
+ * Manages all UI-related state for the chat component including:
+ * - Chat window open/close state
+ * - History sidebar visibility
+ * - Unread message tracking
+ * - Fullscreen state
+ *
+ * This service uses Angular signals for reactive state management,
+ * allowing components to subscribe to state changes efficiently.
+ */
+@Injectable({
+  providedIn: 'root',
+})
+export class ChatUIStateService {
+  //! ===================== UI STATE SIGNALS============================
+
+  /**
+   * Whether the chat window is currently open
+   */
+  public isChatOpen = signal(false);
+
+  /**
+   * Whether the history sidebar is currently open
+   */
+  public isHistorySidebarOpen = signal(false);
+
+  /**
+   * Whether the chat is in fullscreen mode
+   */
+  public isFullScreen = signal(false);
+
+  /**
+   * ID of the last message that was read by the user
+   */
+  private lastReadMessageId = signal<string | null>(null);
+
+  /**
+   * Reference to current messages (injected from outside)
+   */
+  private messagesSignal: Signal<Message[]> = signal<Message[]>([]);
+
+  //! ===================== COMPUTED SIGNALS ======================
+
+  /**
+   * Computed number of unread bot messages
+   */
+  public unreadCount = computed(() => {
+    if (this.isChatOpen()) {
+      return 0; // No unread when chat is open
+    }
+
+    const messages = this.messagesSignal();
+    if (messages.length === 0) return 0;
+
+    const lastReadId = this.lastReadMessageId();
+    let lastReadIndex = -1;
+
+    if (lastReadId !== null) {
+      lastReadIndex = messages.findIndex((msg) => msg.id === lastReadId);
+    }
+
+    // Count unread bot messages after last read position
+    const unreadBotMessages = messages
+      .slice(lastReadIndex + 1)
+      .filter((msg) => msg.sender === 'assistant');
+
+    return unreadBotMessages.length;
+  });
+
+  //! ===================== EFFECTS ========================
+
+  /**
+   * Effect to automatically mark messages as read when chat is opened
+   */
+  public markAsReadEffect = effect(
+    () => {
+      const isOpen = this.isChatOpen();
+      const msgs = this.messagesSignal();
+
+      if (isOpen && msgs.length > 0) {
+        const lastMessage = msgs[msgs.length - 1];
+        if (lastMessage?.id) {
+          const currentLastRead = this.lastReadMessageId();
+          if (lastMessage.id !== currentLastRead) {
+            this.lastReadMessageId.set(lastMessage.id);
+          }
+        }
+      }
+    },
+    { allowSignalWrites: true }, // TODO
+  );
+
+  //! =================== PUBLIC METHODS ===========================
+
+  /**
+   * Set the messages signal reference from an external source
+   * This allows the UI state service to track messages from MessageService
+   */
+  setMessagesSignal(messagesSignal: Signal<Message[]>): void {
+    this.messagesSignal = messagesSignal;
+  }
+
+  /**
+   * Toggle the chat window open/close state
+   */
+  toggleChat(): void {
+    const currentlyOpen = this.isChatOpen();
+    this.isChatOpen.update((open) => !open);
+
+    // Mark messages as read when opening chat
+    if (!currentlyOpen) {
+      const messages = this.messagesSignal();
+      if (messages.length > 0) {
+        const lastMessage = messages[messages.length - 1];
+        this.lastReadMessageId.set(lastMessage.id ?? null);
+      }
+    }
+  }
+
+  /**
+   * Toggle the history sidebar open/close state
+   */
+  toggleHistorySidebar(): void {
+    this.isHistorySidebarOpen.update((open) => !open);
+  }
+
+  /**
+   * Close the chat window
+   */
+  closeChat(): void {
+    this.isChatOpen.set(false);
+  }
+
+  /**
+   * Open the chat window
+   */
+  openChat(): void {
+    this.isChatOpen.set(true);
+  }
+
+  /**
+   * Close the history sidebar
+   */
+  closeHistorySidebar(): void {
+    this.isHistorySidebarOpen.set(false);
+  }
+
+  /**
+   * Open the history sidebar
+   */
+  openHistorySidebar(): void {
+    this.isHistorySidebarOpen.set(true);
+  }
+
+  /**
+   * Toggle fullscreen mode
+   */
+  toggleFullscreen(): void {
+    this.isFullScreen.update((fs) => !fs);
+  }
+
+  /**
+   * Set fullscreen state
+   */
+  setFullscreen(isFullscreen: boolean): void {
+    this.isFullScreen.set(isFullscreen);
+  }
+
+  /**
+   * Manually mark messages as read up to a specific message ID
+   */
+  markMessagesAsRead(messageId: string): void {
+    this.lastReadMessageId.set(messageId);
+  }
+
+  /**
+   * Reset last read message ID
+   */
+  resetLastRead(): void {
+    this.lastReadMessageId.set(null);
+  }
+
+  /**
+   * Get the last read message ID
+   */
+  getLastReadMessageId(): string | null {
+    return this.lastReadMessageId();
+  }
+}