@aakash58/chatbot 1.1.19 → 1.1.21

package/projects/doohbot/src/lib/app/chat/components/chat-history-sidebar/chat-history-sidebar.component.ts

@@ -0,0 +1,188 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  OnChanges,
+  SimpleChanges,
+  Output,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { DialogService } from '../../../../shared/dialog/dialog.service';
+import { ChatSession, ChatSessionGroup } from '../../model/chat-session.model';
+
+@Component({
+  selector: 'app-chat-history-sidebar',
+  standalone: true,
+  imports: [CommonModule, MatIconModule],
+  templateUrl: './chat-history-sidebar.component.html',
+  styleUrls: ['./chat-history-sidebar.component.scss'],
+})
+export class ChatHistorySidebarComponent implements OnInit, OnChanges {
+  @Input() sessions: ChatSession[] = [];
+  @Input() isOpen: boolean = false;
+  @Input() userName: string = 'User';
+  @Input() isLoading: boolean = false;
+  @Input() hasMoreSessions: boolean = false;
+  @Input() isLoadingMore: boolean = false;
+  @Input() processingSessionId: string | null = null;
+
+  @Output() sessionSelected = new EventEmitter<ChatSession>();
+  @Output() sessionDeleted = new EventEmitter<string>();
+  @Output() closed = new EventEmitter<void>();
+  @Output() loadMore = new EventEmitter<void>();
+  @Output() refresh = new EventEmitter<void>();
+  @Output() sessionRenamed = new EventEmitter<{ sessionId: string; newTitle: string }>();
+  @Output() deleteAll = new EventEmitter<void>();
+
+  chatHistory: ChatSessionGroup[] = [];
+
+  constructor(private dialogService: DialogService) { }
+
+  ngOnInit(): void {
+    this.chatHistory = this.groupedSessions();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['sessions']) {
+      this.chatHistory = this.groupedSessions();
+    }
+  }
+
+  groupedSessions(): ChatSessionGroup[] {
+    const now = new Date();
+    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+    const yesterday = new Date(today);
+    yesterday.setDate(yesterday.getDate() - 1);
+    const weekAgo = new Date(today);
+    weekAgo.setDate(weekAgo.getDate() - 7);
+
+    const groups: ChatSessionGroup[] = [
+      { label: 'Today', sessions: [] },
+      { label: 'Yesterday', sessions: [] },
+      { label: 'This Week', sessions: [] },
+      { label: 'Older', sessions: [] },
+    ];
+
+    // Sort sessions by timestamp (newest first)
+    const sortedSessions = [...this.sessions].sort(
+      (a, b) => b.timestamp.getTime() - a.timestamp.getTime(),
+    );
+
+    sortedSessions.forEach((session) => {
+      const sessionDate = new Date(session.timestamp);
+      const sessionDayStart = new Date(
+        sessionDate.getFullYear(),
+        sessionDate.getMonth(),
+        sessionDate.getDate(),
+      );
+
+      if (sessionDayStart.getTime() === today.getTime()) {
+        groups[0].sessions.push(session);
+      } else if (sessionDayStart.getTime() === yesterday.getTime()) {
+        groups[1].sessions.push(session);
+      } else if (sessionDayStart.getTime() >= weekAgo.getTime()) {
+        groups[2].sessions.push(session);
+      } else {
+        groups[3].sessions.push(session);
+      }
+    });
+
+    // Filter out empty groups
+    return groups.filter((g) => g.sessions.length > 0);
+  }
+
+  onSessionClick(session: ChatSession): void {
+    this.sessionSelected.emit(session);
+  }
+
+  onEditClick(event: Event, session: ChatSession): void {
+    event.stopPropagation();
+    this.dialogService
+      .openInput({
+        title: 'Rename Conversation',
+        message: 'Enter a new title for this conversation:',
+        initialValue: session.title,
+        placeholder: 'New title...',
+        confirmText: 'Rename',
+      })
+      .subscribe((newTitle) => {
+        if (newTitle !== null && newTitle.trim() !== '' && newTitle !== session.title) {
+          this.sessionRenamed.emit({ sessionId: session.id, newTitle: newTitle.trim() });
+        }
+      });
+  }
+
+  onDeleteClick(event: Event, sessionId: string): void {
+    event.stopPropagation();
+    this.dialogService.confirmDelete('this conversation').subscribe((confirmed) => {
+      if (confirmed) {
+        this.sessionDeleted.emit(sessionId);
+        this.chatHistory = this.groupedSessions();
+      }
+    });
+  }
+
+  onClose(): void {
+    this.closed.emit();
+  }
+
+  formatTime(date: Date): string {
+    return new Date(date).toLocaleTimeString('en-US', {
+      hour: 'numeric',
+      minute: '2-digit',
+      hour12: true,
+    });
+  }
+
+  formatDate(date: Date): string {
+    return new Date(date).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+    });
+  }
+
+  /**
+   * Handle scroll event for infinite scroll
+   */
+  onScroll(event: Event): void {
+    const element = event.target as HTMLElement;
+    const scrollTop = element.scrollTop;
+    const scrollHeight = element.scrollHeight;
+    const clientHeight = element.clientHeight;
+
+    // Check if scrolled near bottom (within 100px)
+    const scrollBottom = scrollHeight - scrollTop - clientHeight;
+    if (scrollBottom < 100 && this.hasMoreSessions && !this.isLoadingMore && !this.isLoading) {
+      this.loadMore.emit();
+    }
+  }
+
+  /**
+   * Handle manual refresh
+   */
+  onRefresh(): void {
+    this.refresh.emit();
+  }
+
+  /**
+   * Handle clear all history
+   */
+  onClearAllClick(): void {
+    this.dialogService
+      .open({
+        title: 'Clear All History',
+        message: 'Are you sure you want to delete all chat history? This action cannot be undone.',
+        confirmText: 'Clear All',
+        cancelText: 'Cancel',
+        confirmButtonColor: 'warn',
+        icon: 'delete_sweep',
+      })
+      .subscribe((confirmed: boolean | undefined) => {
+        if (confirmed) {
+          this.deleteAll.emit();
+        }
+      });
+  }
+}

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

@@ -0,0 +1,146 @@
+@if (isChatOpen) {
+  <div
+    draggableDialog
+    [enableDrag]="canDrag"
+    resizableDialog
+    [enableResize]="canResize"
+    class="chat-window"
+    [class.fullscreen]="isFullScreen"
+    [class.layout-sidebar]="buttonStyle.includes('sidebar')"
+  >
+    <!-- chat window header -->
+    <app-chat-header
+      [appHeaderLogoUrl]="appHeaderLogoUrl"
+      [isAuthenticated]="isAuthenticated"
+      [isFullScreen]="isFullScreen"
+      [settingsMenu]="settingsMenu"
+      [isNewChatDisabled]="messages.length === 0"
+      (toggleChat)="onToggleChat()"
+      (toggleFullScreen)="onToggleFullScreen()"
+      (toggleHistorySidebar)="onToggleHistorySidebar()"
+      (clearChat)="onClearChat()"
+    ></app-chat-header>
+
+    <!-- Main Content Area: Toggle between Messages and History -->
+    <div class="chat-content-wrapper">
+      <!-- Chat History View -->
+      <app-chat-history-sidebar
+        [class.sidebar-closed]="!isHistorySidebarOpen"
+        [sessions]="chatSessions"
+        [isOpen]="isHistorySidebarOpen"
+        [userName]="chatHistoryUserName"
+        [isLoading]="isLoadingSessions"
+        [hasMoreSessions]="hasMoreSessions"
+        [isLoadingMore]="isLoadingMoreSessions"
+        [processingSessionId]="processingSessionId"
+        (sessionSelected)="onSessionSelected($event)"
+        (sessionDeleted)="onSessionDeleted($event)"
+        (loadMore)="loadMoreSessions.emit()"
+        (refresh)="refreshSessions.emit()"
+        (sessionRenamed)="onSessionRenamed($event)"
+        (deleteAll)="onDeleteAllSessions()"
+        (closed)="onToggleHistorySidebar()"
+      >
+      </app-chat-history-sidebar>
+
+      <!-- Messages View -->
+      <div class="messages-view" [class.hidden]="isHistorySidebarOpen && !isFullScreen">
+        <!-- Messages / Welcome Screen -->
+        @if (!showLoginForm) {
+          <app-message-list
+            [messages]="messages"
+            [isBotTyping]="isBotTyping"
+            [isStreaming]="isStreaming"
+            [appLogoUrl]="appLogoUrl"
+            [appSubtitle]="appSubtitle"
+            [welcomeDesc]="welcomeDesc"
+            [predefinedMessages]="predefinedMessages"
+            [botAvatarUrl]="botAvatarUrl"
+            [userAvatarUrl]="userAvatarUrl"
+            [userName]="userName"
+            [isAuthenticated]="isAuthenticated"
+            [isLoggingIn]="isLoggingIn"
+            [trackByMessageId]="trackByMessageId"
+            (suggestionClick)="onSuggestionClick($event)"
+            (loginClick)="onLoginClick()"
+          ></app-message-list>
+        }
+
+        @if (showSuggestionChips && isAuthenticated) {
+          <app-chips
+            [messages]="suggestedMessages"
+            [disabled]="isBotTyping"
+            (chipClick)="onSuggestionClick($event)"
+          ></app-chips>
+        }
+
+        <!-- Chat Input: Only show when authenticated -->
+        @if (isAuthenticated) {
+          <app-message-input
+            [isBotTyping]="isBotTyping"
+            [hintText]="hintText"
+            (send)="onSend($event)"
+            (stop)="onStop()"
+          ></app-message-input>
+        }
+
+        <!-- Login Form -->
+        @if (showLoginForm && !isAuthenticated) {
+          <app-login-form
+            [isLoggingIn]="isLoggingIn"
+            (loginSubmit)="onLoginSubmit($event)"
+            (cancel)="onCancelLogin()"
+          ></app-login-form>
+        }
+
+        <!--  Auth error snackbar (login/logout errors only) -->
+        <!-- <app-snackbar
+        *ngIf="authError"
+        [message]="authError"
+        (closed)="onClearAuthError()"
+      ></app-snackbar> -->
+
+        <!-- footer -->
+        <app-chat-footer></app-chat-footer>
+      </div>
+    </div>
+  </div>
+}
+
+<mat-menu #settingsMenu="matMenu">
+  <!-- Personalization -->
+  @if (isAuthenticated) {
+    <button
+      mat-menu-item
+      (click)="onOpenPersonalization()"
+      style="display: flex; align-items: center"
+    >
+      <mat-icon>settings_suggest</mat-icon>
+      <span>Personalization</span>
+    </button>
+  }
+
+  <!-- Change Theme -->
+
+  <!-- Full-Screen Button -->
+  <button mat-menu-item (click)="onToggleFullScreen()" style="display: flex; align-items: center">
+    <mat-icon>{{ isFullScreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
+    <span> {{ isFullScreen ? 'Minimize' : 'Expand' }}</span>
+  </button>
+
+  <!-- Clear Chat -->
+  @if (isAuthenticated && messages.length > 0) {
+    <button mat-menu-item (click)="onClearChat()" style="display: flex; align-items: center">
+      <mat-icon> clear_all</mat-icon>
+      <span>End Chat</span>
+    </button>
+  }
+
+  <!-- Logout -->
+  @if (isAuthenticated) {
+    <button mat-menu-item (click)="onLogout()" style="display: flex; align-items: center">
+      <mat-icon>logout</mat-icon>
+      <span>Logout</span>
+    </button>
+  }
+</mat-menu>

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

@@ -0,0 +1,187 @@
+@use '@angular/material' as mat;
+
+/* Chat container */
+.doohbot-container {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 1000;
+}
+
+/* Chat window */
+.chat-window {
+  width: clamp(400px, 30vw, 450px);
+  height: clamp(620px, 70vh, 660px);
+  background-color: var(--background-color);
+  // background-color: var(--mat-menu-bg) !important;
+  border-radius: 20px;
+  border-color: var(--border-color);
+  box-shadow: var(--border-shadow-color);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation: slide-in 0.5s ease;
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  user-select: none;
+  cursor: move;
+
+  // z-index: 999999 !important;
+}
+
+.chat-window:active {
+  cursor: grabbing;
+}
+
+@media (max-width: 768px) {
+  .chat-window {
+    width: 95%;
+    height: calc(100vh - 20px);
+  }
+}
+
+.chat-window.layout-sidebar {
+  height: 100vh;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: clamp(400px, 25vw, 450px);
+  border-radius: 20px 0 0 20px;
+  animation: slide-in-sidebar 0.4s ease-out;
+
+  &.fullscreen {
+    width: 100vw;
+    height: 100vh;
+    border-radius: 0;
+    transform: none;
+    top: 0;
+    left: 0;
+  }
+}
+
+@keyframes slide-in-sidebar {
+  from {
+    transform: translateX(100%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+@media (max-width: 480px) {
+  .chat-window {
+    width: 90%;
+    height: calc(100vh - 40px);
+  }
+}
+
+.chat-window.fullscreen {
+  width: 100vw;
+  height: 100vh;
+  border-radius: 0;
+  position: fixed;
+  top: 0;
+  left: 0;
+  transform: none;
+  user-select: none;
+  // z-index: 999999 !important;
+}
+
+/* Slide-in animation */
+// @keyframes slide-in {
+//   from {
+//     transform: translateY(100%);
+//     opacity: 0;
+//   }
+
+//   to {
+//     transform: translateY(0);
+//     opacity: 1;
+//   }
+// }
+
+// Chat content wrapper - main content area
+.chat-content-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+
+  app-chat-history-sidebar {
+    height: 100%;
+    width: 100%; // Default mobile/popup behavior
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+  }
+}
+
+// Fullscreen specific layout overrides
+.chat-window.fullscreen {
+  .chat-content-wrapper {
+    flex-direction: row; // Side-by-side in fullscreen
+  }
+
+  app-chat-history-sidebar {
+    width: 260px; // Fixed width sidebar
+    flex: 0 0 260px; // Don't shrink/grow
+    border-right: 1px solid var(--border-color);
+  }
+
+  app-chat-history-sidebar.sidebar-closed {
+    display: none;
+  }
+}
+
+// Messages view
+.messages-view {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+
+  &.hidden {
+    display: none;
+  }
+
+  // Ensure message list takes available space
+  app-message-list,
+  app-login-form {
+    flex: 1;
+    min-height: 0; // Important for proper scrolling
+  }
+
+  // Keep snackbar and input at the bottom
+  app-snackbar {
+    flex-shrink: 0;
+    margin-top: auto;
+  }
+
+  app-message-input {
+    flex-shrink: 0;
+  }
+}
+
+// <--- Theme Selector --->
+
+.theme-selector {
+  display: flex;
+  align-items: center;
+  padding: 4px 12px;
+  gap: 8px;
+}
+
+.theme-btn {
+  background: none;
+  border: none;
+  color: var(--white);
+  transition: color 0.2s ease;
+}
+
+.theme-btn.selected {
+  color: var(--primary-color);
+}