@aakash58/chatbot 1.1.19 → 1.1.21

package/projects/doohbot/src/lib/doohbot.component.ts

@@ -0,0 +1,545 @@
+import {
+  APP_INITIALIZER,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  ElementRef,
+  inject,
+  Input,
+  OnDestroy,
+  OnInit,
+  Renderer2,
+  signal,
+  SimpleChanges,
+  ViewChild,
+  ViewEncapsulation,
+} from '@angular/core';
+import { DoohbotConst } from './constant/doohbot-constant';
+import { LoginRequest } from './core/auth/models/login-request.model';
+import { FederatedLoginRequest } from './core/auth/models/federated-login-request.model';
+import { AuthService } from './core/auth/auth.service';
+import logger from './core/utils/logger.service';
+import { ThemeService } from './core/services/theme.service';
+import { PredefinedMessages, SuggestedMessages } from './predefined_messages';
+import { DoohbotInput } from './doohbot-input';
+import { DoohbotApiConfig } from './core/models/api-config.model';
+import { DoohbotThemeConfig } from './core/models/theme-config.model';
+import { ChatButtonComponent } from './app/chat/components/chat-button/chat-button.component';
+import { ChatWindowComponent } from './app/chat/components/chat-window/chat-window.component';
+import { FullscreenDirective } from './core/directives/fullscreen/fullscreen.directive';
+import { ChatHistoryService } from './app/chat/services/chat-history.service';
+import { ChatUIStateService } from './app/chat/chat-ui-state.service';
+import { ChatSession } from './app/chat/model/chat-session.model';
+import { AuthStatus } from './core/types/auth-status.type';
+import { ChatService } from './app/chat/chat.service';
+import { DialogService } from './shared/dialog/dialog.service';
+import { DialogUtils } from './shared/dialog/dialog.utils';
+import { SnackbarService } from './shared/snackbar/snackbar.service';
+import { PersonalizationService } from './app/personalization/personalization.service';
+import { LicenseService } from './core/services/license.service';
+import { AppConst } from './core/app-const';
+import { LicenseInterceptor } from './core/interceptors/license.interceptor';
+import { AuthInterceptor } from './core/interceptors/auth.interceptor';
+import { CommonModule } from '@angular/common';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+
+@Component({
+  selector: 'app-doohbot',
+  standalone: true,
+  imports: [CommonModule, ChatButtonComponent, ChatWindowComponent, FullscreenDirective],
+  templateUrl: './doohbot.component.html',
+  styleUrls: ['./doohbot.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Doohbot extends DoohbotInput implements OnInit, OnDestroy {
+  //! ======================= INPUTS ==========================
+
+  @Input() config: DoohbotInput = new DoohbotInput();
+  @Input() override buttonStyle?: 'fab' | 'sidebar' | 'sidebar-top' | 'sidebar-bottom' = 'fab';
+  @Input() enableDrag: boolean = false;
+  @Input() enableResize: boolean = false;
+  @Input() apiConfig?: DoohbotApiConfig;
+  @Input() themeConfig: DoohbotThemeConfig | undefined;
+
+  //! ====================  SERVICES ======================
+
+  private chatHistory = inject(ChatHistoryService);
+  private uiState = inject(ChatUIStateService);
+  private themeService = inject(ThemeService);
+  private authService = inject(AuthService);
+  private chatService = inject(ChatService);
+  private dialogService = inject(DialogService);
+  private snackbarService = inject(SnackbarService);
+  private personalization = inject(PersonalizationService);
+  private licenseService = inject(LicenseService);
+
+  //! ========================= EXPOSED STATE FROM SERVICES ============================
+
+  // UI State signals
+  public isChatOpen = this.uiState.isChatOpen;
+  public isHistorySidebarOpen = this.uiState.isHistorySidebarOpen;
+  public isFullScreen = this.uiState.isFullScreen;
+  public unreadCount = this.uiState.unreadCount;
+
+  // Chat State signals
+  public messages = this.chatService.messages;
+  public isBotTyping = this.chatService.isBotTyping;
+  public isStreaming = this.chatService.isStreaming;
+  public messageError = computed(() => this.chatService.apiError()?.message || null);
+  public showSuggestionChips = this.chatService.showSuggestionChips;
+  public chatSessions = this.chatHistory.sessions;
+  public hasMoreHistory = this.chatHistory.hasMore;
+  public isLoadingMore = this.chatHistory.isLoadingMore;
+  public isLoadingSessions = this.chatHistory.isLoading;
+  public processingSessionId = this.chatHistory.processingSessionId;
+
+  // Auth State signals
+  // public isAuthenticated = this.chatFacade.isAuthenticated;
+
+  public isLoggingIn = this.authService.isLoggingIn;
+  public authError = this.authService.authError;
+  public authSuccess = this.authService.authSuccess;
+
+  // Personalization
+  public activeButtonStyle = computed(() => this.personalization.settings().appearance.buttonStyle);
+
+  //! ======================= COMPONENT-SPECIFIC STATE =====================
+
+  public userName = 'User';
+  public predefinedMessages: string[] = PredefinedMessages;
+  public suggestedMessages: string[] = SuggestedMessages;
+
+  public maxMessageLength = 1000;
+
+  // Constants
+  readonly DoohbotConst = DoohbotConst;
+
+  // Context cleanup
+  private contextCleanup?: () => void;
+
+  // Reactive state
+  public authStatus = signal<AuthStatus>(this.authService.authStatus);
+  public isAuthenticated = signal<boolean>(this.authStatus() === 'authenticated');
+
+  //! ========================= VIEW CHILDREN ======================
+
+  @ViewChild(ChatWindowComponent, { read: ElementRef }) chatWindowRef!: ElementRef;
+  @ViewChild(FullscreenDirective) fullscreenDirective!: FullscreenDirective;
+
+  //! ======================= CONSTRUCTOR ========================
+
+  constructor(
+    private elementRef: ElementRef,
+    private renderer: Renderer2,
+  ) {
+    super();
+
+    // Setup messages signal ref for UI state service
+    this.uiState.setMessagesSignal(this.chatService.messages);
+
+    // Theme management effect
+    effect(() => {
+      const activeTheme = this.themeService.activeTheme();
+      const host = this.elementRef.nativeElement;
+      this.renderer.removeClass(host, 'light-theme');
+      this.renderer.removeClass(host, 'dark-theme');
+      this.renderer.addClass(host, activeTheme);
+    });
+  }
+
+  //! ====================== LIFECYCLE HOOKS =====================
+  // Corrected structural integrity.
+
+  async ngOnInit() {
+    logger.log('Initializing Doohbot component...');
+
+    // Load license registry from file and wait for it to complete
+    if (this.config.licenseFilePath) {
+      await this.licenseService.loadLicenseFile(this.config.licenseFilePath);
+    }
+
+    //  Run validation once on startup
+    this.authService.validateStoredToken().subscribe();
+
+    //  React to auth status changes
+    this.authService.authStatus$.subscribe((status) => {
+      const wasAuthenticated = this.isAuthenticated();
+      this.authStatus.set(status);
+      this.isAuthenticated.set(status === 'authenticated');
+
+      if (status === 'authenticated' && !wasAuthenticated) {
+        this.initializeUI();
+      }
+    });
+
+    // Handle initial state
+    if (this.isAuthenticated()) {
+      this.initializeUI();
+    } else {
+      //! STRICT VALIDATION: Only attempt federated login if we have the necessary configuration
+      const hasAuthToken = !!this.config.authToken;
+
+      // STRICT VALIDATION: We need both Token AND Valid License Context to proceed
+      if (this.canAttemptFederatedLogin()) {
+        logger.log('Attempting federated login...');
+        await this.onFederatedLogin();
+        // If federated login failed, the login screen will be shown automatically
+        // via the auth status subscription above
+      } else {
+        logger.info(
+          'Insufficient config for federated login (Need Token + TenancyName/LicenseKey). Waiting for user login.',
+        );
+      }
+    }
+  }
+
+  private canAttemptFederatedLogin(): boolean {
+    const hasAuthToken = !!this.config.authToken;
+
+    const hasDirectLicenseKey = !!this.config.licenseKey;
+    const hasTenantLicenseLookup = !!this.config.tenancyName && !!this.config.licenseFilePath;
+
+    const hasValidLicenseContext = hasDirectLicenseKey || hasTenantLicenseLookup;
+
+    return hasAuthToken && hasValidLicenseContext;
+  }
+
+  private initializeUI() {
+    // Apply theme
+    if (this.themeConfig) {
+      this.themeService.setThemeConfig(this.themeConfig, this.elementRef.nativeElement);
+    }
+
+    // Set user metadata
+    this.userAvatarUrl();
+    this.updateUserName();
+
+    // Start new session
+    this.chatService.startNewSession();
+
+    // Subscribe to context changes if not already
+    if (!this.contextCleanup) {
+      this.uiState.resetLastRead();
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    // Handle user context changes
+    if (changes['userContext']) {
+      // this.chatFacade.handleUserContextChange(this.userContext);
+      this.updateUserName();
+
+      // Reset UI state and re-authenticate
+      this.uiState.closeChat();
+      this.uiState.closeHistorySidebar();
+    }
+
+    // Handle config changes
+    if (changes['config']) {
+      this.authService.updateConfig(this.config);
+      this.userAvatarUrl();
+      this.updateUserName();
+
+      if (this.config.licenseKey) {
+        this.authService.setLicenseKey(this.config.licenseKey);
+      }
+
+      if (this.config.buttonStyle || this.buttonStyle) {
+        this.personalization.setDeveloperDefaults({
+          buttonStyle: this.buttonStyle || this.config.buttonStyle,
+        });
+      }
+
+      // Handle dynamic config updates for authentication
+      if (!this.isAuthenticated()) {
+        const token = this.config.authToken;
+        // Validate Config before attempting
+        if (token && this.canAttemptFederatedLogin()) {
+          this.onFederatedLogin(token);
+        }
+      }
+    }
+
+    if (changes['buttonStyle'] && this.buttonStyle) {
+      this.personalization.setDeveloperDefaults({ buttonStyle: this.buttonStyle });
+    }
+
+    if (changes['themeConfig']) {
+      if (this.themeConfig) {
+        this.themeService.setThemeConfig(this.themeConfig, this.elementRef.nativeElement);
+      }
+      if (this.themeConfig?.primaryColor) {
+        this.personalization.setDeveloperDefaults({ primaryColor: this.themeConfig.primaryColor });
+      }
+    }
+
+    // Handle Color Inputs
+    if (changes['config'] && (this.config.primaryColor || this.config.accentColor)) {
+      const defaults: any = {};
+      if (this.config.primaryColor) defaults.primaryColor = this.config.primaryColor;
+      if (this.config.accentColor) defaults.primaryColor = this.config.accentColor;
+
+      this.personalization.setDeveloperDefaults(defaults);
+    }
+  }
+
+  //! ====================== AUTHENTICATION ==================
+  // Logic moved to ChatFacadeService.initialize()
+
+  onNormalLogin(credentials: LoginRequest): void {
+    // Use Tenancy Name from Config Input
+    let tenancy = this.config.tenancyName;
+
+    //! fallback: Try to resolve from global utility (Auto-detect)
+    // if (!tenancy) {
+    //   tenancy = window.AppPreBootstrap?.resolveTenancyName(window.AppConsts?.appBaseUrl);
+    // }
+
+    // Resolve key from whatever tenancy we found
+    let autoKey = this.licenseService.resolveTenantLicenseKey(tenancy || undefined);
+
+    // Inject for strict validation
+    if (autoKey) {
+      credentials.license = autoKey;
+      // Also set it in service usage context for this session
+      this.authService.setLicenseKey(autoKey);
+    }
+
+    this.authService.login(credentials, false);
+  }
+
+  async onFederatedLogin(token?: string): Promise<void> {
+    // Resolve Key from tenancy name
+    let autoKey = this.licenseService.resolveTenantLicenseKey();
+
+    // Fallback to Config Input
+    if (!autoKey) {
+      autoKey = this.config.licenseKey || '';
+    }
+
+    if (autoKey) {
+      this.authService.setLicenseKey(autoKey);
+    }
+
+    const request: Partial<FederatedLoginRequest> = {
+      accessToken: token,
+      rememberMe: this.config.rememberMe,
+      license: autoKey,
+    };
+
+    // Await the federated login result
+    const success = await this.authService.federatedLogin(request);
+
+    if (!success) {
+      logger.info('Federated login failed. User can proceed with normal login.');
+    }
+  }
+
+  performLogout(): void {
+    DialogUtils.confirmLogout(this.dialogService).subscribe((confirmed) => {
+      if (confirmed) {
+        // Invalidate history cache before logout
+        this.chatHistory.invalidateCache();
+        this.authService.logout();
+      }
+    });
+  }
+
+  //! ====================== CHAT OPERATIONS =====================
+
+  toggleChat(): void {
+    this.uiState.toggleChat();
+  }
+
+  async sendMessage(text: string): Promise<void> {
+    await this.chatService.sendMessage(text, this.maxMessageLength);
+    // Invalidate cache after sending message
+    this.chatHistory.invalidateCache();
+  }
+
+  onStopRequest(): void {
+    logger.log('Stopping chat request...');
+    this.chatService.cancelRequest();
+  }
+
+  clearChat(): void {
+    const userId = this.authService.getUserId() || '';
+    // this.chatService.cancelRequest();
+    this.chatService.clearMessages();
+  }
+
+  clearMessageError(): void {
+    this.chatService.apiError.set(null);
+  }
+
+  //! ===================== SESSION MANAGEMENT =======================
+
+  toggleHistorySidebar(): void {
+    const isNowOpen = !this.uiState.isHistorySidebarOpen();
+    if (isNowOpen) {
+      // Only load if not already cached
+      this.loadUserSessions();
+    }
+    this.uiState.toggleHistorySidebar();
+  }
+
+  loadChatSession(session: ChatSession): void {
+    logger.log(`Session selected: ${session.id}. continuing session...`);
+    this.chatService.continueSession(session.id);
+    this.uiState.closeHistorySidebar();
+  }
+
+  deleteSession(sessionId: string): void {
+    logger.log(`Deleting session: ${sessionId}`);
+    const userId = this.authService.getUserId() || '';
+    this.chatHistory.deleteSession(sessionId, userId.toString()).subscribe(() => {
+      // Invalidate cache after deletion
+      this.chatHistory.invalidateCache();
+
+      // If deleted session is currently active, start a new one
+      const activeSession = this.chatService.getActiveSession();
+      if (activeSession?.id === sessionId) {
+        logger.log('Active session was deleted, starting a new one.');
+        this.chatService.startNewSession();
+      }
+    });
+  }
+
+  //! deleteAllSessions
+
+  deleteAllSessions(): void {
+    logger.log('Deleting all chat sessions');
+    const userId = this.authService.getUserId() || '';
+    this.chatHistory.deleteAllHistory(userId.toString()).subscribe({
+      next: () => {
+        this.chatService.clearMessages();
+      },
+    });
+  }
+
+  renameSession(event: { sessionId: string; newTitle: string }): void {
+    logger.log(`Renaming session ${event.sessionId} to ${event.newTitle}`);
+    const userId = this.authService.getUserId() || '';
+    this.chatHistory
+      .updateSessionTitle(event.sessionId, event.newTitle, userId.toString())
+      .subscribe((success) => {
+        if (success) {
+          // If updated session is currently active, update its title in ChatService
+          const activeSession = this.chatService.getActiveSession();
+          if (activeSession?.id === event.sessionId) {
+            activeSession.title = event.newTitle;
+          }
+        }
+      });
+  }
+
+  private loadUserSessions(): void {
+    const userId = this.authService.getUserId() || '';
+    logger.log(`Initiating loadUserSessions for user: ${userId}`);
+    this.chatHistory.loadSessions(userId.toString());
+  }
+
+  /**
+   * Load more sessions for infinite scroll
+   */
+  loadMoreHistory(): void {
+    const userId = this.authService.getUserId() || '';
+    logger.log(`Loading more sessions for user: ${userId}`);
+    this.chatHistory.loadMoreSessions(userId.toString());
+  }
+
+  /**
+   * Manually refresh history
+   */
+  refreshHistory(): void {
+    const userId = this.authService.getUserId() || '';
+    logger.log(`Refreshing sessions for user: ${userId}`);
+    this.chatHistory.invalidateCache();
+    this.chatHistory.loadSessions(userId.toString(), true); // force refresh
+  }
+
+  //! ======================== FULLSCREEN =====================
+
+  toggleFullScreen(): void {
+    if (this.fullscreenDirective) {
+      this.fullscreenDirective.toggle();
+      const isFullscreen = this.fullscreenDirective.getFullscreenState();
+      this.uiState.setFullscreen(isFullscreen);
+    }
+  }
+
+  //! ==================  UTILITY METHODS =======================
+
+  trackByMessageId(index: number, item: any): string {
+    return item.id || index.toString();
+  }
+
+  /**
+   * Resolve and update the username from all available sources
+   */
+  private updateUserName(): void {
+    if (!this.isAuthenticated()) {
+      this.userName = '';
+      return;
+    }
+
+    const loggedInName = this.authService.getLoggedInUserName();
+    // const contextName = this.userContext?.userName;
+    const configName = this.config.username;
+
+    if (configName) {
+      this.userName = configName;
+    } else if (loggedInName) {
+      this.userName = loggedInName;
+    } else {
+      this.userName = 'User';
+    }
+
+    logger.log('Resolved userName:', this.userName);
+  }
+
+  userAvatarUrl(): string {
+    return DoohbotConst.userAvatar;
+  }
+
+  ngOnDestroy() {
+    // Clean up subscriptions
+    if (this.contextCleanup) {
+      this.contextCleanup();
+    }
+
+    this.chatService.cancelRequest();
+  }
+}
+
+//! ================== INITIALIZATION =======================
+
+export function initializeApp() {
+  const appConst = inject(AppConst);
+  return appConst.load(); // Returns a Promise
+}
+
+bootstrapApplication(Doohbot, {
+  providers: [
+    provideHttpClient(withInterceptorsFromDi()),
+    AppConst,
+    {
+      provide: APP_INITIALIZER,
+      useFactory: initializeApp,
+      multi: true,
+    },
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: AuthInterceptor,
+      multi: true,
+    },
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: LicenseInterceptor,
+      multi: true,
+    },
+  ],
+});

package/projects/doohbot/src/lib/elements.ts

@@ -0,0 +1,25 @@
+import { NgModule, Injector } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { createCustomElement } from '@angular/elements';
+import { MatIconModule } from '@angular/material/icon';
+import { platformBrowser } from '@angular/platform-browser';
+import { Doohbot } from './doohbot.component';
+
+@NgModule({
+  imports: [BrowserModule, MatIconModule],
+  declarations: [],
+})
+export class ElementModule {
+  constructor(injector: Injector) {
+    const doohbotElement = createCustomElement(Doohbot, { injector });
+
+    // Check if already defined to avoid errors
+    if (!customElements.get('app-doohbot')) {
+      customElements.define('app-doohbot', doohbotElement);
+    }
+  }
+}
+
+platformBrowser()
+  .bootstrapModule(ElementModule)
+  .catch((err) => console.error(err));

package/projects/doohbot/src/lib/predefined_messages.ts

@@ -0,0 +1,14 @@
+export const PredefinedMessages = [
+  'How do I create a new DOOH proposal in Doohclick?',
+  'Can the buyer see internal notes I add in Doohclick?',
+  // 'What happens after a buyer approves a proposal?',
+  // 'Why would an SR hide the pipeline value in a proposal?',
+  // 'Are additional services like ad formatting included in the base campaign cost?',
+  'How to create a proposal?',
+];
+export const SuggestedMessages = [
+  'Hi! How can I help?',
+  'Check your activity?',
+  'Need account help?',
+  'Quick tips to start.',
+];

package/projects/doohbot/src/lib/shared/chips/chips.component.html

@@ -0,0 +1,9 @@
+@if (messages.length > 0) {
+  <div class="predefined-chips">
+    @for (msg of messages; track msg) {
+      <button class="chip" (click)="onChipClick(msg)">
+        {{ msg }}
+      </button>
+    }
+  </div>
+}

package/projects/doohbot/src/lib/shared/chips/chips.component.scss

@@ -0,0 +1,29 @@
+.predefined-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 10px;
+  font: var(--font-family);
+}
+
+.chip {
+  background-color: rgba(var(--primary-color), 0.2);
+  border: 1px solid var(--primary-color);
+  border-radius: 16px;
+  padding: 6px 12px;
+  cursor: pointer;
+  font-size: 0.9rem;
+  font: var(--font-family);
+  transition: background-color 0.3s ease;
+  color: var(--text-color);
+}
+
+.chip:hover {
+  background-color: var(--primary-color);
+  color: var(--white);
+}
+
+.chip.active {
+  background-color: var(--primary-color);
+  color: var(--white);
+}

package/projects/doohbot/src/lib/shared/chips/chips.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Chips } from './chips.component';
+
+describe('Chips', () => {
+  let component: Chips;
+  let fixture: ComponentFixture<Chips>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Chips],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(Chips);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/doohbot/src/lib/shared/chips/chips.component.ts

@@ -0,0 +1,20 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-chips',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './chips.component.html',
+  styleUrls: ['./chips.component.scss'],
+})
+export class Chips {
+  @Input() messages: string[] = []; // messages array
+  @Input() disabled = false;
+  @Output() chipClick = new EventEmitter<string>(); // emit clicked chip
+
+  onChipClick(msg: string) {
+    if (this.disabled) return;
+    this.chipClick.emit(msg);
+  }
+}

package/projects/doohbot/src/lib/shared/dialog/dialog.component.html

@@ -0,0 +1,29 @@
+<div class="dialog-container">
+  <div class="dialog-header">
+    <mat-icon class="dialog-icon" [class.warn-icon]="data.confirmButtonColor === 'warn'">
+      {{ data.icon }}
+    </mat-icon>
+    <h2 mat-dialog-title>{{ data.title }}</h2>
+  </div>
+
+  <mat-dialog-content>
+    <p class="dialog-message">{{ data.message }}</p>
+  </mat-dialog-content>
+
+  <mat-dialog-actions align="end">
+    <button mat-button class="cancel-btn" (click)="onCancel()" type="button">
+      {{ data.cancelText }}
+    </button>
+    <button
+      mat-raised-button
+      class="confirm-btn"
+      [class.warn-btn]="data.confirmButtonColor === 'warn'"
+      [class.primary-btn]="data.confirmButtonColor === 'primary'"
+      [class.accent-btn]="data.confirmButtonColor === 'accent'"
+      (click)="onConfirm()"
+      type="button"
+    >
+      {{ data.confirmText }}
+    </button>
+  </mat-dialog-actions>
+</div>