@aakash58/chatbot 1.1.19 → 1.1.21

package/projects/doohbot/src/lib/app/chat/chat.service.ts

@@ -0,0 +1,547 @@
+import { Injectable, signal, inject, computed } from '@angular/core';
+import { Subscription, Subject, lastValueFrom } from 'rxjs';
+import { ChatSession } from './model/chat-session.model';
+import { ChatHistoryService } from './services/chat-history.service';
+
+// Extracted Services
+import { ChatApiService } from './services/chat-api.service';
+import { ChatAudioService } from './services/chat-audio.service';
+import { SnackbarUtils } from '../../shared/snackbar/snackbar.utils';
+import { ChatApiError } from '../../core/models/api-request.model';
+import { DOOHBOT_ADVANCED_CONFIG } from '../../core/models/doohbot-config.model';
+import { Message } from '../../core/models/message';
+import { PromptMode } from '../../core/types/prompt-mode.type';
+import logger from '../../core/utils/logger.service';
+import { ChatRequest } from './model/chat-request.model';
+import { ChatStreamMessage } from './model/chat-stream-message.model';
+import { AuthService } from './../../core/auth/auth.service';
+
+import { ChatUIStateService } from './chat-ui-state.service';
+import { PersonalizationService } from '../personalization/personalization.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ChatService {
+  // Dependencies
+  private apiService = inject(ChatApiService);
+  private authService = inject(AuthService);
+  private audioService = inject(ChatAudioService);
+  private config = inject(DOOHBOT_ADVANCED_CONFIG, { optional: true });
+  private chatHistoryService = inject(ChatHistoryService);
+  private chatUIStateService = inject(ChatUIStateService);
+  private personalization = inject(PersonalizationService);
+  private chatSessions = this.chatHistoryService.sessions;
+
+  // Public messages signal for current context
+  public messages = signal<Message[]>([]);
+
+  /**
+   * Determine if suggestion chips should be shown
+   */
+  public showSuggestionChips = computed(() => {
+    const msgs = this.messages();
+    if (msgs.length === 0) return false;
+    const lastBotMsg = [...msgs].reverse().find((m) => m.sender === 'assistant');
+    return lastBotMsg?.showSuggestions === true;
+  });
+
+  // Active session
+  private activeSession: ChatSession | null = null;
+
+  // UI state signals (Keep these here as they are relevant to the Chat UI state)
+  public isLoadingApi = signal<boolean>(false);
+  public apiError = signal<ChatApiError | null>(null);
+  public isBotTyping = signal<boolean>(false);
+  public promptMode = signal<PromptMode>('markdown');
+  public isStreaming = signal<boolean>(true); //! `isStreaming` is set to true by default
+
+  messagesStream: Array<ChatStreamMessage> = [];
+  currentResponse = '';
+
+  private streamSubscription?: Subscription;
+  private cancelSubject = new Subject<void>();
+
+  getFallbackReply(): string {
+    return "I'm sorry 😔, I didn't understand that.";
+  }
+
+  getFallbackError(): string {
+    return 'Something went wrong. Please try again.';
+  }
+
+  constructor() {
+    logger.log('ChatService: Initialized');
+
+    // Initialize prompt mode from config if available
+    if (this.config?.promptMode) {
+      this.promptMode.set(this.config.promptMode);
+    }
+  }
+
+  //! ==================== STATE MANAGEMENT ====================
+
+  /**
+   * Generate a unique session ID
+   */
+  private generateSessionId(): string {
+    if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+      return `session_${crypto.randomUUID()}`;
+    }
+    return `session_${Date.now()}_${Math.random().toString(36).substring(2, 15)}`;
+  }
+
+  /**
+   * Create a new chat session
+   */
+  createSession(userId: string): ChatSession {
+    return {
+      id: this.generateSessionId(),
+      timestamp: new Date(),
+      title: 'New Conversation',
+      messages: [],
+      userId,
+    };
+  }
+
+  /**
+   * Start a new chat session
+   */
+  public startNewSession(): void {
+    // this.cancelRequest(); //! Cancel any ongoing request before starting new session
+    const userId = this.authService.getUserId();
+
+    this.isBotTyping.set(false);
+    this.isLoadingApi.set(false);
+
+    this.activeSession = this.createSession(userId);
+    this.messages.set([]);
+  }
+
+  /**
+   * Load an existing session
+   */
+  public loadSession(session: ChatSession): void {
+    logger.log('[ChatService] Loading session:', session.id, 'Messages:', session.messages.length);
+    this.activeSession = session;
+    this.messages.set([...session.messages]);
+    logger.log('[ChatService] Messages signal updated. Current count:', this.messages().length);
+  }
+
+  /**
+   * Get active session
+   */
+  public getActiveSession(): ChatSession | null {
+    return this.activeSession;
+  }
+
+  /**
+   * Clear messages for current session and start new one
+   */
+  clearMessages(): void {
+    this.messages.set([]);
+    this.startNewSession();
+  }
+
+  /**
+   * Add message to current session
+   */
+  public addMessage(message: Message): void {
+    const newMessage = { ...message, timestamp: new Date() };
+
+    // Update current messages signal
+    this.messages.update((msgs) => [...msgs, newMessage]);
+
+    // Save to active session (Server handles actual storage, UI just adds to local signal for immediate feedback)
+    if (message.sender === 'assistant') {
+      this.audioService.playBotSound();
+    }
+  }
+
+  /**
+   * Continue a chat session
+   */
+  public continueSession(sessionId: string): void {
+    logger.log(`[ChatService] continuing session: ${sessionId}`);
+    this.chatHistoryService.loadSessionMessages(sessionId).subscribe((messages) => {
+      const loadedMessages = messages || [];
+      const sessionFromList = this.chatSessions().find((s) => s.id === sessionId);
+
+      if (sessionFromList) {
+        sessionFromList.messages = loadedMessages;
+        this.loadSession(sessionFromList);
+      } else {
+        const timestamp =
+          loadedMessages.length > 0
+            ? loadedMessages[loadedMessages.length - 1].timestamp || new Date()
+            : new Date();
+
+        const userId = this.authService.getUserId();
+
+        const newSession: ChatSession = {
+          id: sessionId,
+          timestamp: timestamp,
+          title: 'Previous Conversation',
+          messages: loadedMessages,
+          userId,
+        };
+        this.loadSession(newSession);
+      }
+
+      this.audioService.unlockAudio();
+      this.chatUIStateService.openChat();
+    });
+  }
+
+  //! ==================== MESSAGE PROCESSING ====================
+
+  /**
+   * Process a user message: add it, get bot reply, and add bot reply
+   */
+  public async sendMessage(text: string, maxLength: number = 1000): Promise<void> {
+    const trimmedText = text.trim();
+    if (!trimmedText) {
+      return;
+    }
+
+    if (trimmedText.length > maxLength) {
+      SnackbarUtils.error(`Message exceeds maximum length of ${maxLength} characters.`);
+      return;
+    }
+
+    //! Cancel any ongoing request before starting a new one
+    if (this.isBotTyping()) {
+      this.cancelRequest();
+    }
+
+    const currentSessionId = this.activeSession?.id;
+
+    this.addMessage({
+      sender: 'user',
+      text: text,
+      completed: true,
+      isHistory: false,
+      id: Date.now().toString(),
+      timestamp: new Date(),
+    });
+
+    this.isBotTyping.set(true);
+
+    try {
+      const response = await this.getBotReply(text);
+
+      // Check if session has changed while waiting for response
+      if (this.activeSession?.id !== currentSessionId) {
+        logger.log(
+          `[ChatService] Ignoring response for session: ${currentSessionId} as active session is now: ${this.activeSession?.id}`,
+        );
+        return;
+      }
+
+      const isFallback = response === this.getFallbackReply();
+
+      // Only add completion message if it wasn't handled by streaming (response is not empty string)
+      if (response !== '') {
+        this.addMessage({
+          sender: 'assistant',
+          text: response,
+          completed: true,
+          isHistory: false,
+          id: Date.now().toString(),
+          showSuggestions: false, //! Don't show suggestions for fallback reply
+        });
+      }
+    } finally {
+      // Only reset typing if we are still in the same session, or if we want to be safe (though resetting false is usually harmless)
+      if (this.activeSession?.id === currentSessionId) {
+        this.isBotTyping.set(false);
+      }
+    }
+  }
+
+  //! ==================== API CALLS ====================
+
+  async getBotReply(userText: string): Promise<string> {
+    logger.log('Requesting bot reply for:', userText);
+
+    try {
+      this.isLoadingApi.set(true);
+      this.apiError.set(null);
+
+      const request = this.buildChatRequest(userText);
+
+      //! chat endpoints
+      if (this.isStreaming()) {
+        return await this.stream(request);
+      } else {
+        return await this.ask(request);
+      }
+    } catch (error) {
+      SnackbarUtils.error('An error occurred while getting the bot reply.');
+      return this.getFallbackError();
+    }
+  }
+
+  /**
+   * Builds a chat request payload with the given user text and optional active session
+   * @param {string} userInput - The text provided by the user
+   * @returns {ChatRequest} - A chat request payload with the user text and optional active session
+   * @memberof ChatService
+   */
+
+  private buildChatRequest(userText: string): ChatRequest {
+    const instructions = this.personalization.getFormattedInstructions();
+    const finalQuestion = instructions ? `${instructions}\n\n${userText}` : userText;
+
+    const request: ChatRequest = {
+      question: finalQuestion,
+      organization_id: this.authService.getOrganizationId() || '',
+      prompt_mode: this.promptMode(),
+      custom_instructions: instructions,
+    };
+
+    if (this.activeSession && !this.activeSession.id.startsWith('session_')) {
+      request.response_id = this.activeSession.id;
+      logger.log('>>>> conversation continued:', this.activeSession.id);
+    } else {
+      logger.log('>>>> new conversation started');
+    }
+
+    return request;
+  }
+
+  // ! Ask api endpoint
+  private async ask(request: ChatRequest): Promise<string> {
+    logger.log('>>>>Using Standard Chat Endpoint<<<<');
+
+    const responseSubject = new Subject<string>();
+
+    const currentSessionId = this.activeSession?.id;
+
+    this.streamSubscription = this.apiService.sendMessage(request, true).subscribe({
+      next: (response) => {
+        if (this.activeSession?.id === currentSessionId) {
+          this.isLoadingApi.set(false);
+        }
+        if (response?.success && response.data) {
+          if (this.activeSession?.id === currentSessionId) {
+            this.mapSessionId(response.data.id);
+          }
+          responseSubject.next(response.data.content || this.getFallbackError());
+        } else {
+          responseSubject.next(this.getFallbackError());
+        }
+        responseSubject.complete();
+      },
+      error: (error) => {
+        logger.error('Ask error:', error);
+        if (this.activeSession?.id === currentSessionId) {
+          this.isLoadingApi.set(false);
+          this.isBotTyping.set(false);
+        }
+        responseSubject.next(this.getFallbackError());
+        responseSubject.complete();
+      },
+    });
+
+    // Handle manual cancellation
+    const cancelSub = this.cancelSubject.subscribe(() => {
+      responseSubject.next(''); // Resolve with empty string if cancelled
+      responseSubject.complete();
+    });
+
+    try {
+      return await lastValueFrom(responseSubject);
+    } finally {
+      cancelSub.unsubscribe();
+    }
+  }
+
+  // ! Stream api endpoint
+  private async stream(request: ChatRequest): Promise<string> {
+    logger.log('>>>>Using Stream Chat Endpoint<<<<');
+
+    this.currentResponse = '';
+    this.isBotTyping.set(true);
+
+    const assistantMessage: Message = {
+      id: Date.now().toString(),
+      sender: 'assistant',
+      text: '',
+      chunks: [],
+      timestamp: new Date(),
+      completed: false,
+      isHistory: false,
+      showSuggestions: false,
+    };
+
+    // Add empty bubble after first chunk has been received
+    this.addMessage(assistantMessage);
+
+    const streamComplete$ = new Subject<string>();
+    let hasStarted = false;
+
+    // Handle manual cancellation for stream
+    const cancelSub = this.cancelSubject.subscribe(() => {
+      if (!streamComplete$.closed) {
+        streamComplete$.next('');
+        streamComplete$.complete();
+      }
+    });
+
+    this.streamSubscription = this.apiService.sendMessageStream(request).subscribe({
+      next: (chunk) => {
+        if (!hasStarted) {
+          hasStarted = true;
+          this.isBotTyping.set(false);
+
+          // replace response_id in message id
+          this.messages.update((msgs) =>
+            msgs.map((m) =>
+              m.id === assistantMessage.id
+                ? {
+                  ...m,
+                  ...{ id: chunk.id },
+                }
+                : m,
+            ),
+          );
+
+          assistantMessage.id = chunk.id;
+
+          // Map the session ID to the backend-generated one
+          this.mapSessionId(chunk.response_id || chunk.id);
+        }
+
+        const text = chunk.content ?? '';
+        if (!text) return;
+
+        // keep message in sync without regeneration
+        this.messages.update((msgs) =>
+          msgs.map((m) =>
+            m.id === assistantMessage.id
+              ? {
+                ...m,
+                chunks: [...(m.chunks ?? []), text], // immutable append
+              }
+              : m,
+          ),
+        );
+
+        // const message = this.messages().find((m) => m.id === assistantMessage.id);
+        // logger.log('Appending chunk to assistant message:', message?.chunks);
+      },
+      complete: () => {
+        this.isLoadingApi.set(false);
+
+        // Mark the chunk stream compelted
+        this.messages.update((msgs) =>
+          msgs.map((m) => (m.id === assistantMessage.id ? { ...m, completed: true } : m)),
+        );
+
+        // const message = this.messages().find((m) => m.id === assistantMessage.id);
+        // this.currentResponse += message?.chunks?.join('') ?? '';
+
+        // logger.log('Appending chunk to assistant message:', message?.text);
+        // logger.log('Appending chunk to assistant message:', message?.chunks);
+
+        streamComplete$.next(this.currentResponse);
+        streamComplete$.complete();
+      },
+      error: (error) => {
+        logger.error('Chat error:', error);
+        SnackbarUtils.error('An error occurred during reply.');
+
+        this.isLoadingApi.set(false);
+        this.isBotTyping.set(false);
+        SnackbarUtils.error('An error occurred during reply.');
+
+        if (!hasStarted) this.addMessage(assistantMessage);
+        if (!assistantMessage.text) assistantMessage.text = this.getFallbackError();
+
+        // mark completed, do NOT rebuild content
+        this.messages.update((msgs) =>
+          msgs.map((m) =>
+            m.id === assistantMessage.id
+              ? {
+                ...m,
+                completed: true,
+                isHistory: false,
+                text: assistantMessage.text,
+              }
+              : m,
+          ),
+        );
+
+        streamComplete$.next('');
+        streamComplete$.complete();
+        // this.finalizeStreamError(assistantMessage, hasStarted, streamComplete$);
+      },
+    });
+
+    try {
+      await lastValueFrom(streamComplete$);
+    } finally {
+      cancelSub.unsubscribe();
+    }
+    return '';
+  }
+
+  //! -----------------------------------------
+
+  cancelRequest(): void {
+    this.cancelSubject.next();
+
+    // Reset UI states immediately
+    this.isLoadingApi.set(false);
+    this.isBotTyping.set(false);
+    this.currentResponse = '';
+
+    if (this.streamSubscription) {
+      logger.log('Cancelling ongoing chat request...');
+      this.streamSubscription.unsubscribe();
+      this.streamSubscription = undefined;
+
+      // Clean up assistant messages:
+      // Remove if completely empty
+      // Mark as completed if it has content
+      this.messages.update((msgs) =>
+        msgs
+          .filter(
+            (m) =>
+              !(
+                m.sender === 'assistant' &&
+                !m.completed &&
+                !m.text &&
+                (!m.chunks || m.chunks.length === 0)
+              ),
+          )
+          .map((m) => (m.sender === 'assistant' && !m.completed ? { ...m, completed: true } : m)),
+      );
+    }
+  }
+
+  //! ==================== AUDIO ====================
+
+  public unlockAudio(): void {
+    this.audioService.unlockAudio();
+  }
+
+  /**
+   * Map local placeholder session ID to backend-generated ID
+   */
+  private mapSessionId(responseId?: string): void {
+    if (!responseId || !this.activeSession || !this.activeSession.id.startsWith('session_')) {
+      return;
+    }
+
+    const oldId = this.activeSession.id;
+    logger.log(`[ChatService] Mapping local session ${oldId} → backend ID ${responseId}`);
+
+    // Update active session subject
+    this.activeSession.id = responseId;
+
+    // Trigger history refresh to get the server-generated title
+    this.chatHistoryService.invalidateCache();
+  }
+}

package/projects/doohbot/src/lib/app/chat/components/chat-button/chat-button.component.html

@@ -0,0 +1,27 @@
+<!-- fab -->
+@if (buttonStyle === 'fab' && !isChatOpen) {
+  <button class="chat-fab" (click)="onToggle()">
+    <!-- <mat-icon>{{ chatIcon }}</mat-icon> -->
+    <img style="width: 30px; height: 30px" [src]="appLogoUrl" />
+    <!-- <div class="chat-logo"></div> -->
+    @if (unreadCount > 0) {
+      <span class="alert-badge">
+        {{ unreadCount > 9 ? '9+' : unreadCount }}
+      </span>
+    }
+  </button>
+}
+
+<!-- sidebar button -->
+@if (isSidebar && !isChatOpen) {
+  <button class="chat-sidebar" (click)="onToggle()" [ngClass]="sidebarPosition">
+    <!-- <h2 style="transform: rotate(-90deg); font-size: 16px">{{ appTitle }}</h2> -->
+    <img style="transform: rotate(-90deg); width: 100px; height: 45px" [src]="appTextLogoUrl" />
+
+    @if (unreadCount > 0) {
+      <span class="alert-badge">
+        {{ unreadCount > 9 ? '9+' : unreadCount }}
+      </span>
+    }
+  </button>
+}

package/projects/doohbot/src/lib/app/chat/components/chat-button/chat-button.component.scss

@@ -0,0 +1,115 @@
+/* Sidebar button */
+.chat-sidebar {
+  position: fixed;
+  right: 0;
+  width: 40px;
+  height: 120px;
+  border-radius: 16px 0 0 16px;
+  background: var(--background-color);
+  color: var(--white);
+  border: none;
+  box-shadow: var(--border-shadow-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  z-index: 1000;
+
+  &.disabled {
+    background: transparent;
+    border-radius: 0;
+  }
+
+  h2 {
+    margin: 0;
+    font-size: 12px;
+    transform: rotate(-90deg);
+    white-space: nowrap;
+  }
+
+  .alert-badge {
+    position: absolute;
+    bottom: 15px;
+    right: 30px;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: var(--red);
+    color: var(--white);
+    font-size: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.chat-sidebar.center {
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.chat-sidebar.top {
+  top: calc(50% - 45vh);
+  transform: none;
+}
+
+.chat-sidebar.bottom {
+  top: calc(50% + 30vh);
+  transform: none;
+}
+
+/* Existing FAB */
+.chat-fab {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: var(--background-color);
+  color: var(--white);
+  box-shadow: 0 6px 16px rgba(var(--black-rgb), 0.2);
+  border: none;
+  cursor: pointer;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.chat-fab svg,
+.chat-fab mat-icon {
+  width: 24px;
+  height: 24px;
+}
+
+.chat-fab:hover {
+  transform: scale(1.1);
+}
+
+.alert-badge {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  background: var(--red);
+  color: var(--white);
+  border-radius: 50%;
+  min-width: 18px;
+  height: 18px;
+  font-size: 11px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  line-height: 1;
+}
+
+.chat-logo {
+  width: 45px;
+  height: 45px;
+
+  mask: url('/assets/logo.svg') no-repeat center;
+  mask-size: contain;
+
+  background-color: var(--mat-sys-on-primary);
+}