@aakash58/chatbot 1.1.19 → 1.1.21

package/projects/doohbot/src/lib/app/chat/services/chat-api.service.ts

@@ -0,0 +1,82 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { ChatHistoryData, ChatHistoryRequest, ChatMessage } from '../model/chat-history.model';
+import { HttpStreamService } from '../../../core/http/http-stream.service';
+import { HttpService } from '../../../core/http/http.service';
+import { ApiResponse } from '../../../core/models/api-response.model';
+import logger from '../../../core/utils/logger.service';
+import { ChatRequest } from '../model/chat-request.model';
+import { ChatResponse } from '../model/chat-response.model';
+import { ChatStreamResponse } from '../model/chat-stream-response.model';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ChatApiService {
+  get apiUrl(): string {
+    return this.http.apiUrl;
+  }
+
+  constructor(
+    private http: HttpService,
+    private httpStreamService: HttpStreamService,
+  ) {
+    logger.log('ChatApiService: Initialized');
+  }
+
+  /**
+   * Send chat message and get full response
+   */
+  sendMessage(request?: ChatRequest, showLoader = false): Observable<ApiResponse<ChatResponse>> {
+    return this.http.post('chats/ask', request, showLoader);
+  }
+
+  /**
+   * Send chat message and get streaming response
+   */
+  sendMessageStream(request: ChatRequest): Observable<ChatStreamResponse> {
+    return this.httpStreamService.createHttpStream(`${this.apiUrl}chats/stream`, request);
+  }
+
+  getChatHistory(
+    request: ChatHistoryRequest,
+    showLoader = false,
+  ): Observable<ApiResponse<ChatHistoryData>> {
+    return this.http.post('chats/sessions', request, showLoader);
+  }
+
+  getChatSession(
+    chatSessionId: string,
+    showLoader = false,
+  ): Observable<ApiResponse<ChatMessage[]>> {
+    return this.http.get(`chats/sessions/${chatSessionId}`, undefined, showLoader);
+  }
+
+  // deleteChatSession(chatSessionId: string, showLoader = false): Observable<ApiResponse<void>> {
+  //   return this.http.delete(`chats/sessions/${chatSessionId}`, undefined, showLoader);
+  // }
+
+  // deleteChatSession(chatSessionId: string, showLoader = false): Observable<ApiResponse<void>> {
+  //   return this.clearChatHistory(
+  //     { chat_session_ids: [chatSessionId], delete_all: false },
+  //     showLoader,
+  //   );
+  // }
+
+  deleteChatSession(chatSessionId: string, showLoader = false): Observable<ApiResponse<void>> {
+    const body = { chat_session_ids: [chatSessionId], delete_all: false };
+    return this.http.delete('chats/sessions', body, showLoader);
+  }
+
+  updateChatTitle(
+    chatSessionId: string,
+    title: string,
+    showLoader = false,
+  ): Observable<ApiResponse<void>> {
+    return this.http.patch(`chats/sessions/${chatSessionId}/title`, { title }, showLoader);
+  }
+
+  clearChatHistory(request?: object, showLoader = false): Observable<ApiResponse<void>> {
+    return this.http.delete('chats/sessions', request, showLoader);
+  }
+}

package/projects/doohbot/src/lib/app/chat/services/chat-audio.service.ts

@@ -0,0 +1,44 @@
+import { Injectable } from '@angular/core';
+import logger from '../../../core/utils/logger.service';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class ChatAudioService {
+    private audioUnlocked = false;
+
+    constructor() { }
+
+    /**
+     * Unlock audio playback (required for autoplay in browsers)
+     */
+    public unlockAudio(): void {
+        if (this.audioUnlocked) return;
+        const audio = new Audio();
+        audio.volume = 1.0;
+        audio
+            .play()
+            .then(() => (this.audioUnlocked = true))
+            .catch(() => { });
+    }
+
+    /**
+     * Play bot message sound
+     */
+    public playBotSound(): void {
+        if (!this.audioUnlocked) return;
+        try {
+            const audio = new Audio('assets/bot.mp3');
+            audio.play();
+        } catch (error) {
+            logger.error('Error playing bot sound:', error);
+        }
+    }
+
+    /**
+     * Check if audio is unlocked
+     */
+    public isAudioUnlocked(): boolean {
+        return this.audioUnlocked;
+    }
+}

package/projects/doohbot/src/lib/app/chat/services/chat-history.service.ts

@@ -0,0 +1,303 @@
+import { Injectable, inject, signal } from '@angular/core';
+import { Observable, of, catchError, map } from 'rxjs';
+import { ChatApiService } from './chat-api.service';
+import { ChatSession } from '../model/chat-session.model';
+import { Message } from '../../../core/models/message';
+import { SnackbarUtils } from '../../../shared/snackbar/snackbar.utils';
+import logger from '../../../core/utils/logger.service';
+import { ChatSessionResponse, ChatMessage } from '../model/chat-history.model';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ChatHistoryService {
+  private chatApiService = inject(ChatApiService);
+
+  // History State Signals
+  public sessions = signal<ChatSession[]>([]);
+  public isLoading = signal<boolean>(false);
+  public isLoadingMore = signal<boolean>(false);
+  public hasMore = signal<boolean>(true);
+  public historyOffset = signal<number>(0);
+  public isCacheValid = signal<boolean>(false);
+  public processingSessionId = signal<string | null>(null);
+
+  /**
+   * Map API session response to ChatSession model
+   */
+  public mapSessionResponseToSession(
+    sessionResponse: ChatSessionResponse,
+    userId: string,
+  ): ChatSession {
+    // Use last_message_at or created_at or current time
+    const timestamp = sessionResponse.last_message_at
+      ? new Date(sessionResponse.last_message_at)
+      : sessionResponse.created_at
+        ? new Date(sessionResponse.created_at)
+        : new Date();
+
+    logger.log('Mapping session response:', sessionResponse);
+
+    // Map messages from the session if they exist
+    let messages: Message[] = [];
+    if (sessionResponse.messages && Array.isArray(sessionResponse.messages)) {
+      messages = sessionResponse.messages.map((msg: ChatMessage) => ({
+        id: msg.message_id || '',
+        sender: msg.role,
+        text: msg.content,
+        completed: true,
+        isHistory: true,
+        timestamp: new Date(msg.created_at),
+      }));
+    }
+
+    // Use response_id as primary ID, fallback to chat_session_id
+    const sessionId = sessionResponse.response_id || sessionResponse.chat_session_id || '';
+
+    return {
+      id: sessionId,
+      timestamp: timestamp,
+      title: sessionResponse.title || 'Previous Conversation',
+      userId: userId,
+      messages: messages,
+    };
+  }
+
+  /**
+   * Load all chat sessions for a specific user
+   */
+  loadSessions(userId: string, forceRefresh: boolean = false): void {
+    logger.log('loadSessions called', { userId, forceRefresh });
+
+    if (this.isCacheValid() && !forceRefresh && this.sessions().length > 0) {
+      logger.log('Cache is valid and sessions already loaded. Skipping API call.');
+      return;
+    }
+
+    this.isLoading.set(true);
+    this.historyOffset.set(0);
+    logger.log('Fetching chat history from API...');
+
+    this.chatApiService
+      .getChatHistory({ limit: 50, offset: 0 })
+      .pipe(
+        map((response) => {
+          logger.log('Chat history response received', response);
+
+          if (response && response.success && response.data && response.data.sessions) {
+            const remoteSessions = response.data.sessions.map((session: ChatSessionResponse) =>
+              this.mapSessionResponseToSession(session, userId),
+            );
+            const hasMore =
+              response.data.offset + response.data.sessions.length < response.data.total;
+
+            logger.log(`Mapped ${remoteSessions.length} sessions. Has more: ${hasMore}`);
+            return { sessions: remoteSessions, hasMore };
+          }
+
+          logger.warn('No sessions found in response');
+          return { sessions: [], hasMore: false };
+        }),
+        catchError((err) => {
+          SnackbarUtils.error('Failed to load history');
+          logger.error('ChatHistoryService: Failed to load history:', err);
+          return of({ sessions: [], hasMore: false });
+        }),
+      )
+      .subscribe({
+        next: (result) => {
+          this.sessions.set(result.sessions);
+          this.hasMore.set(result.hasMore);
+          this.historyOffset.set(result.sessions.length);
+          this.isCacheValid.set(true);
+          this.isLoading.set(false);
+
+          logger.log(`Loaded ${result.sessions.length} sessions. Cache valid: true`);
+        },
+        error: () => {
+          this.isLoading.set(false);
+          logger.error('loadSessions: Unexpected error in subscription');
+        },
+      });
+  }
+
+  /**
+   * Load more sessions for infinite scroll
+   */
+  loadMoreSessions(userId: string): void {
+    if (!this.hasMore() || this.isLoadingMore()) return;
+
+    const currentOffset = this.historyOffset();
+    this.isLoadingMore.set(true);
+
+    this.chatApiService
+      .getChatHistory({ limit: 50, offset: currentOffset })
+      .pipe(
+        map((response) => {
+          if (response && response.success && response.data && response.data.sessions) {
+            const remoteSessions = response.data.sessions.map((session: ChatSessionResponse) =>
+              this.mapSessionResponseToSession(session, userId),
+            );
+            const hasMore =
+              response.data.offset + response.data.sessions.length < response.data.total;
+            return { sessions: remoteSessions, hasMore };
+          }
+          return { sessions: [], hasMore: false };
+        }),
+        catchError((err) => {
+          SnackbarUtils.error('Failed to load more history');
+          logger.error('ChatHistoryService: Failed to load more history:', err);
+          return of({ sessions: [], hasMore: false });
+        }),
+      )
+      .subscribe({
+        next: (result) => {
+          const updatedSessions = [...this.sessions(), ...result.sessions];
+          this.sessions.set(updatedSessions);
+          this.hasMore.set(result.hasMore);
+          this.historyOffset.set(currentOffset + result.sessions.length);
+          this.isLoadingMore.set(false);
+        },
+        error: () => this.isLoadingMore.set(false),
+      });
+  }
+
+  /**
+   * Load messages for a specific session
+   */
+  loadSessionMessages(sessionId: string): Observable<Message[]> {
+    return this.chatApiService.getChatSession(sessionId).pipe(
+      map((response) => {
+        if (response.success && response.data) {
+          // Sort messages by created_at timestamp to ensure chronological order (user, assistant, user, assistant...)
+          function sortMessages(messages: any[]) {
+            const users = messages.filter((m) => m.role === 'user');
+            const assistants = messages.filter((m) => m.role === 'assistant');
+
+            const result = [];
+            const maxLength = Math.max(users.length, assistants.length);
+
+            for (let i = 0; i < maxLength; i++) {
+              if (users[i]) result.push(users[i]);
+              if (assistants[i]) result.push(assistants[i]);
+            }
+
+            return result;
+          }
+
+          const sortedData = sortMessages(response.data);
+
+          return sortedData.map((msg: ChatMessage) => ({
+            id: msg.message_id || '',
+            sender: msg.role,
+            text: msg.content,
+            completed: true,
+            isHistory: true,
+            timestamp: new Date(msg.created_at),
+          }));
+        }
+        return [];
+      }),
+      catchError((err) => {
+        logger.error('ChatHistoryService: Failed to load messages:', err);
+        SnackbarUtils.error('Failed to load messages');
+        return of([]);
+      }),
+    );
+  }
+
+  /**
+   * Delete a specific session
+   */
+  deleteSession(sessionId: string, userId: string): Observable<void> {
+    this.processingSessionId.set(sessionId);
+    return this.chatApiService.deleteChatSession(sessionId).pipe(
+      map((response) => {
+        if (response && response.success) {
+          this.sessions.update((prev) => prev.filter((s) => s.id !== sessionId));
+          SnackbarUtils.success('Conversation deleted successfully');
+        }
+      }),
+      catchError((err) => {
+        SnackbarUtils.error('Failed to delete conversation');
+        logger.error('ChatHistoryService: Failed to delete session', err);
+        throw err;
+      }),
+      map(() => {
+        this.processingSessionId.set(null);
+      }),
+    );
+  }
+
+  /**
+   * Delete all history
+   */
+  deleteAllHistory(userId: string): Observable<void> {
+    this.isLoading.set(true);
+    return this.chatApiService.clearChatHistory({ delete_all: true }).pipe(
+      map((response) => {
+        if (response && response.success) {
+          this.sessions.set([]);
+          this.isCacheValid.set(false);
+          SnackbarUtils.success('Chat history cleared');
+        }
+      }),
+      catchError((err) => {
+        SnackbarUtils.error('Failed to clear history');
+        logger.error('ChatHistoryService: Failed to clear history', err);
+        throw err;
+      }),
+      map(() => {
+        this.isLoading.set(false);
+      }),
+    );
+  }
+
+  /**
+   * Update session title
+   */
+  updateSessionTitle(sessionId: string, newTitle: string, userId: string): Observable<boolean> {
+    this.processingSessionId.set(sessionId);
+    return this.chatApiService.updateChatTitle(sessionId, newTitle).pipe(
+      map((response) => {
+        const success = !!(response && response.success);
+        if (success) {
+          this.sessions.update((prev) =>
+            prev.map((s) => (s.id === sessionId ? { ...s, title: newTitle } : s)),
+          );
+        }
+        this.processingSessionId.set(null);
+        SnackbarUtils.success('Title updated successfully');
+        return success;
+      }),
+      catchError((err) => {
+        SnackbarUtils.error('Failed to update title');
+        logger.error('ChatHistoryService: Failed to update title', err);
+        this.processingSessionId.set(null);
+        return of(false);
+      }),
+    );
+  }
+
+  /**
+   * Invalidate cache
+   */
+  invalidateCache(): void {
+    this.isCacheValid.set(false);
+    this.historyOffset.set(0);
+    this.hasMore.set(true);
+  }
+
+  /**
+   * Clear all history state
+   */
+  clearState(): void {
+    this.sessions.set([]);
+    this.isLoading.set(false);
+    this.isLoadingMore.set(false);
+    this.hasMore.set(true);
+    this.historyOffset.set(0);
+    this.isCacheValid.set(false);
+    this.processingSessionId.set(null);
+  }
+}

package/projects/doohbot/src/lib/app/login/login-form.component.html

@@ -0,0 +1,80 @@
+<form
+  class="login-form-container"
+  (ngSubmit)="onLoginSubmit()"
+  autocomplete="on"
+  #loginForm="ngForm"
+>
+  <h3 class="login-title">Login to Doohbot</h3>
+
+  <div class="login-fields">
+    <!-- Username Field -->
+    <div class="input-group">
+      <label class="input-label">Username</label>
+      <input
+        type="text"
+        name="username"
+        [(ngModel)]="loginUsername"
+        #username="ngModel"
+        placeholder="Enter your username"
+        class="login-input"
+        required
+        autocomplete="username"
+      />
+      @if (username.invalid && (username.dirty || username.touched)) {
+        <span class="error-text"> Username is required </span>
+      }
+    </div>
+
+    <!-- Password Field -->
+    <div class="input-group">
+      <label class="input-label">Password</label>
+      <div class="password-wrapper">
+        <input
+          [type]="showPassword ? 'text' : 'password'"
+          name="password"
+          [(ngModel)]="loginPassword"
+          #password="ngModel"
+          placeholder="Enter your password"
+          class="login-input password-input"
+          required
+          autocomplete="current-password"
+        />
+
+        <button
+          type="button"
+          class="password-toggle-btn"
+          (click)="togglePasswordVisibility()"
+          tabindex="-1"
+        >
+          <mat-icon>
+            {{ showPassword ? 'visibility' : 'visibility_off' }}
+          </mat-icon>
+        </button>
+      </div>
+      @if (password.invalid && (password.dirty || password.touched)) {
+        <span class="error-text"> Password is required </span>
+      }
+    </div>
+
+    <!-- Remember Me -->
+    <div class="remember-me-container">
+      <label class="remember-me-label">
+        <input
+          type="checkbox"
+          name="rememberMe"
+          [(ngModel)]="rememberMe"
+          class="remember-me-checkbox"
+        />
+        <span class="remember-me-text">Remember me</span>
+      </label>
+    </div>
+  </div>
+
+  <div class="login-actions">
+    <button type="button" (click)="onCancel()" class="auth-btn secondary">Cancel</button>
+
+    <button type="submit" class="auth-btn primary" [disabled]="loginForm.invalid || isLoggingIn">
+      {{ isLoggingIn ? 'Logging in...' : 'Login' }}
+    </button>
+  </div>
+</form>

package/projects/doohbot/src/lib/app/login/login-form.component.scss

@@ -0,0 +1,189 @@
+.login-form-container {
+  padding: 30px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  margin: 0 auto; // Center horizontally
+  box-sizing: border-box; // Include padding/border in width/height
+  max-width: 400px; // Set a maximum width
+  width: 100%; // Full width up to max-width
+  animation: fadeIn 0.3s ease-in-out;
+
+  .login-title {
+    text-align: center;
+    margin: 0 0 10px 0;
+    font-size: 1.5em;
+    color: var(--text-color);
+    font-family: var(--font-family);
+    font-weight: 600;
+  }
+
+  .login-fields {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    width: 100%;
+
+    .login-input {
+      padding: 10px 12px;
+      border-radius: 8px;
+      border: 1px solid var(--border-color);
+      font-size: 0.9em;
+      background: var(--background-color);
+      color: var(--text-color);
+      width: 100%; // Full width
+      box-sizing: border-box; // Ensure padding doesn’t increase total width
+
+      &:focus {
+        outline: none;
+        background-color: var(--background-color);
+        border-color: var(--primary-color);
+      }
+    }
+
+    .password-wrapper {
+      position: relative;
+      display: flex;
+      align-items: center;
+
+      .login-input {
+        width: 100%;
+        padding-right: 40px; // Space for toggle icon
+        box-sizing: border-box; // Ensure padding doesn’t increase total width
+      }
+
+      .password-toggle-btn {
+        position: absolute;
+        right: 8px;
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 4px;
+        color: var(--text-color);
+        opacity: 0.6;
+        transition: opacity 0.2s;
+
+        &:hover {
+          opacity: 1;
+        }
+
+        mat-icon {
+          font-size: 20px;
+          width: 20px;
+          height: 20px;
+        }
+      }
+    }
+
+    .remember-me-container {
+      display: flex;
+      align-items: center;
+      margin-top: -5px;
+      user-select: none;
+
+      .remember-me-label {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        cursor: pointer;
+        padding: 4px 0;
+      }
+
+      .remember-me-checkbox {
+        width: 14px;
+        height: 14px;
+        cursor: pointer;
+        accent-color: var(--primary-color);
+        margin: 0;
+      }
+
+      .remember-me-text {
+        font-size: 0.8em;
+        color: var(--text-color);
+        font-family: var(--font-family);
+        font-weight: 300;
+      }
+    }
+  }
+
+  .login-actions {
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+    margin-top: 10px;
+  }
+
+  .input-group {
+    display: flex;
+    flex-direction: column;
+    gap: 6px; // space between label and input
+    text-align: left;
+    width: 100%;
+  }
+
+  .input-label {
+    font-size: 0.85em;
+    color: var(--text-color);
+    font-family: var(--font-family);
+    font-weight: 500;
+    margin-left: 2px;
+  }
+
+  .error-text {
+    font-size: 0.6em;
+    color: var(--red);
+    margin-top: 2px;
+    margin-left: 2px;
+    font-family: var(--font-family);
+  }
+}
+
+.auth-btn {
+  padding: 8px 18px;
+  border-radius: 20px;
+  cursor: pointer;
+  font-size: 0.9em;
+  font-weight: 500;
+  transition: all 0.2s ease;
+
+  &.primary {
+    background: var(--primary-color);
+    color: var(--white);
+    border: 1px solid var(--primary-color);
+
+    &:hover {
+      opacity: 0.9;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+
+  &.secondary {
+    background: transparent;
+    color: var(--text-alt-color);
+    border: 1px solid var(--primary-color);
+
+    &:hover {
+      opacity: 0.9;
+    }
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}