@aakash58/chatbot 1.1.21 → 1.1.24

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

@@ -1,188 +0,0 @@
-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

@@ -1,146 +0,0 @@
-@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

@@ -1,187 +0,0 @@
-@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);
-}