@aakash58/chatbot 1.1.19 → 1.1.21

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

@@ -0,0 +1,35 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+
+@Component({
+  selector: 'app-chat-button',
+  standalone: true,
+  imports: [CommonModule, MatIconModule],
+  templateUrl: './chat-button.component.html',
+  styleUrls: ['./chat-button.component.scss'],
+})
+export class ChatButtonComponent {
+  @Input() buttonStyle: 'fab' | 'sidebar' | 'sidebar-top' | 'sidebar-bottom' = 'fab';
+  @Input() isChatOpen: boolean = false;
+  @Input() unreadCount: number = 0;
+  @Input() appTitle: string = 'Chat';
+  @Input() appLogoUrl: string = '';
+  @Input() appTextLogoUrl: string = '';
+
+  @Output() toggle = new EventEmitter<void>();
+
+  get isSidebar(): boolean {
+    return this.buttonStyle.startsWith('sidebar');
+  }
+
+  get sidebarPosition(): 'top' | 'center' | 'bottom' {
+    if (!this.isSidebar) return 'center';
+    if (this.buttonStyle === 'sidebar') return 'center';
+    return this.buttonStyle.split('-')[1] as 'top' | 'center' | 'bottom';
+  }
+
+  onToggle() {
+    this.toggle.emit();
+  }
+}

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

@@ -0,0 +1,3 @@
+<div class="terms-conditions">
+    <!-- Terms and conditions relocated to Personalization Hub -->
+</div>

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

@@ -0,0 +1,20 @@
+.terms-conditions {
+  padding: 10px 15px;
+  text-align: center;
+  font-size: 0.8rem;
+  background-color: var(--background-color);
+  border-top: 1px solid var(--background-color);
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
+
+  a {
+    color: var(--secondary-text-color);
+    text-decoration: none;
+    transition: color 0.2s ease;
+
+    &:hover {
+      color: var(--primary-color);
+      text-decoration: underline;
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-chat-footer',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './chat-footer.component.html',
+  styleUrls: ['./chat-footer.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ChatFooterComponent {}

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

@@ -0,0 +1,34 @@
+<div class="chat-header">
+  <div class="chat-title">
+    <img class="chat-logo" style="width: 150px; height: 50px; margin-left: 0px" [src]="appHeaderLogoUrl"
+      alt="Text-Logo" />
+  </div>
+
+  <div class="chat-header-buttons">
+    <!-- History Button -->
+
+    <!-- add chat Button -->
+    @if (isAuthenticated) {
+    <button class="header-button" (click)="onStartNewConversation()" title="Start new conversation">
+      <mat-icon>add</mat-icon>
+    </button>
+    }
+
+    <!-- history Button -->
+    @if (isAuthenticated) {
+    <button class="header-button" (click)="onToggleHistorySidebar()" title="Chat History">
+      <mat-icon>history</mat-icon>
+    </button>
+    }
+
+    <!-- more Button -->
+    <button class="header-button" [matMenuTriggerFor]="settingsMenu">
+      <mat-icon>more_vert</mat-icon>
+    </button>
+
+    <!-- minimize Button -->
+    <button class="header-button" (click)="onToggleChat()">
+      <mat-icon>minimize</mat-icon>
+    </button>
+  </div>
+</div>

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

@@ -0,0 +1,78 @@
+@use '@angular/material' as mat;
+
+.chat-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 20px;
+  background-color: var(--background-color);
+  color: var(--text-alt-color);
+  // cursor: move;
+  user-select: none;
+}
+s
+// .chat-header:active {
+//   cursor: grabbing;
+// }
+
+.chat-title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-family: var(--font-family);
+}
+
+.chat-logo {
+  width: 45px;
+  height: 45px;
+  object-fit: contain;
+}
+
+.chat-header h2 {
+  margin: 0;
+  font-size: 1.2rem;
+  color: var(--mat-sys-on-primary);
+  font-family: var(--font-family);
+  font-weight: bold;
+}
+
+.chat-header-buttons {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 1px;
+}
+
+/* Header buttons: fullscreen + close (directly in header) */
+.header-button {
+  background: var(--background-color);
+  border: 1px solid var(--background-color);
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: var(--text-color);
+  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
+  outline: none;
+
+  mat-icon {
+    font-size: 18px;
+    width: 18px;
+    height: 18px;
+  }
+
+  &:hover {
+    // background-color: var(--primary-color);
+    // border-color: var(--primary-color);
+    // color: var(--white);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(var(--black-rgb), 0.15);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+}

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

@@ -0,0 +1,52 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { ThemeService } from '../../../../core/services/theme.service';
+import { inject } from '@angular/core';
+import { ChatService } from '../../chat.service';
+import Logger from '../../../../core/utils/logger.service';
+import { ChatUIStateService } from '../../chat-ui-state.service';
+import { SnackbarUtils } from '../../../../shared/snackbar/snackbar.utils';
+
+@Component({
+  selector: 'app-chat-header',
+  standalone: true,
+  imports: [CommonModule, MatIconModule, MatMenuModule],
+  templateUrl: './chat-header.component.html',
+  styleUrls: ['./chat-header.component.scss'],
+})
+export class ChatHeaderComponent {
+  @Input() appHeaderLogoUrl: string = '';
+  @Input() isAuthenticated: boolean = false;
+  @Input() isFullScreen: boolean = false;
+  @Input() settingsMenu: any;
+  @Input() isNewChatDisabled: boolean = false;
+
+  @Output() toggleChat = new EventEmitter<void>();
+  @Output() toggleFullScreen = new EventEmitter<void>();
+  @Output() toggleHistorySidebar = new EventEmitter<void>();
+  @Output() clearChat = new EventEmitter<void>();
+
+  public themeService = inject(ThemeService);
+  public chatService = inject(ChatService);
+  private uiState = inject(ChatUIStateService);
+
+  onToggleChat() {
+    this.toggleChat.emit();
+  }
+
+  onToggleHistorySidebar() {
+    this.toggleHistorySidebar.emit();
+  }
+
+  onToggleFullScreen() {
+    this.toggleFullScreen.emit();
+  }
+
+  onStartNewConversation() {
+    Logger.warn('Starting new conversation...');
+    this.chatService.startNewSession();
+    this.uiState.closeHistorySidebar();
+  }
+}

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

@@ -0,0 +1,77 @@
+<div class="history-sidebar" [class.open]="isOpen">
+  <div class="sidebar-header">
+    <div class="marquee-container" style="flex: 1; margin-right: 10px">
+      <h3 class="marquee-text">{{ userName }}'s Chat History</h3>
+    </div>
+    <button class="refresh-btn" (click)="onRefresh()" title="Refresh history">
+      <mat-icon>refresh</mat-icon>
+    </button>
+
+    <button class="close-btn" (click)="onClose()">
+      <mat-icon>close</mat-icon>
+    </button>
+  </div>
+
+  <div class="sidebar-content" (scroll)="onScroll($event)">
+    @if (isLoading) {
+    <div class="loader-container">
+      <div class="loader"></div>
+      <p>Loading history...</p>
+    </div>
+    }
+
+    @if (!isLoading && sessions.length === 0) {
+    <div class="empty-state">
+      <mat-icon>history</mat-icon>
+      <p>No chat history yet</p>
+      <span>Start a conversation to see it here</span>
+    </div>
+    }
+
+    @if (!isLoading) {
+    @for (group of chatHistory; track group.label) {
+    <div class="session-group">
+      <div class="group-label">{{ group.label }}</div>
+      <div class="session-list">
+        @for (session of group.sessions; track session.id) {
+        <div class="session-item" (click)="onSessionClick(session)">
+          <div class="session-content">
+            <div class="session-title">{{ session.title }}</div>
+            <div class="session-time">
+              {{ formatTime(session.timestamp) }} · {{ formatDate(session.timestamp) }}
+            </div>
+          </div>
+          <div class="session-actions">
+            <button class="edit-btn" [disabled]="processingSessionId === session.id"
+              (click)="onEditClick($event, session)" title="Edit title">
+              @if (processingSessionId !== session.id) {
+              <mat-icon>edit</mat-icon>
+              } @else {
+              <div class="loader-tiny"></div>
+              }
+            </button>
+            <button class="delete-btn" [disabled]="processingSessionId === session.id"
+              (click)="onDeleteClick($event, session.id)" title="Delete conversation">
+              @if (processingSessionId !== session.id) {
+              <mat-icon>delete</mat-icon>
+              } @else {
+              <div class="loader-tiny"></div>
+              }
+            </button>
+          </div>
+        </div>
+        }
+      </div>
+    </div>
+    }
+    }
+
+    <!-- Loading more indicator -->
+    @if (isLoadingMore) {
+    <div class="loading-more">
+      <div class="loader-small"></div>
+      <p>Loading more...</p>
+    </div>
+    }
+  </div>
+</div>

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

@@ -0,0 +1,346 @@
+:host {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.history-sidebar {
+  top: 0;
+  right: 0;
+  display: none;
+  height: 100%;
+  width: 100%;
+  background: var(--background-color);
+  flex-direction: column;
+}
+
+.history-sidebar.open {
+  display: flex;
+}
+
+.sidebar-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.sidebar-header h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-color);
+  font-family: var(--font-family);
+  display: inline-block;
+}
+
+.sidebar-content {
+  flex: 1 1 auto;
+  /* take remaining space */
+  overflow-y: auto;
+  /* enable vertical scroll */
+  padding: 10px 0;
+  scroll-behavior: smooth;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: background 0.2s;
+}
+
+.close-btn:hover {
+  background: var(--bot-message-color);
+}
+
+.close-btn mat-icon {
+  color: var(--text-color);
+  font-size: 20px;
+  width: 20px;
+  height: 20px;
+}
+
+.refresh-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: background 0.2s;
+  margin-right: 8px;
+}
+
+.refresh-btn:hover {
+  background: var(--bot-message-color);
+}
+
+.refresh-btn mat-icon {
+  color: var(--text-color);
+  font-size: 20px;
+  width: 20px;
+  height: 20px;
+}
+
+.clear-all-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: background 0.2s;
+  margin-right: 8px;
+}
+
+.clear-all-btn:hover {
+  background: var(--bot-message-color);
+}
+
+.clear-all-btn mat-icon {
+  color: var(--text-color);
+  font-size: 20px;
+  width: 20px;
+  height: 20px;
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  text-align: center;
+}
+
+.empty-state mat-icon {
+  font-size: 64px;
+  width: 64px;
+  height: 64px;
+  color: var(--secondary-text-color);
+  margin-bottom: 16px;
+}
+
+.empty-state p {
+  margin: 0 0 8px 0;
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--text-color);
+  font-family: var(--font-family);
+}
+
+.empty-state span {
+  font-size: 14px;
+  color: var(--secondary-text-color);
+  font-family: var(--font-family);
+}
+
+.session-group {
+  margin-bottom: 24px;
+}
+
+.group-label {
+  padding: 8px 20px;
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--secondary-text-color);
+  font-family: var(--font-family);
+}
+
+.session-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.session-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 20px;
+  cursor: pointer;
+  transition: background 0.2s;
+  gap: 8px;
+}
+
+.session-item:hover {
+  background: var(--bot-message-color);
+}
+
+.session-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.session-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-color);
+  font-family: var(--font-family);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-bottom: 4px;
+}
+
+.session-time {
+  font-size: 12px;
+  color: var(--secondary-text-color);
+  font-family: var(--font-family);
+}
+
+.session-actions {
+  display: flex;
+  gap: 4px;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.session-item:hover .session-actions {
+  opacity: 1;
+}
+
+.edit-btn,
+.delete-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: all 0.2s;
+}
+
+.edit-btn:hover {
+  background: var(--bot-message-color);
+}
+
+.delete-btn:hover {
+  background: var(--light-red);
+}
+
+.edit-btn mat-icon,
+.delete-btn mat-icon {
+  color: var(--secondary-text-color);
+  font-size: 18px;
+  width: 18px;
+  height: 18px;
+}
+
+.edit-btn:hover mat-icon {
+  color: var(--primary-color);
+}
+
+.delete-btn:hover mat-icon {
+  color: var(--red);
+}
+
+/* Scrollbar */
+/* Webkit browsers (Chrome, Edge, Safari) */
+
+.sidebar-content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.sidebar-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.sidebar-content::-webkit-scrollbar-thumb {
+  background: rgba(var(--black-rgb), 0.1);
+  border-radius: 10px;
+}
+
+.sidebar-content::-webkit-scrollbar-thumb:hover {
+  background: rgba(var(--black-rgb), 0.1);
+  border-radius: 10px;
+}
+
+/* Firefox */
+// .sidebar-content {
+//   scrollbar-width: thin;
+//   scrollbar-color: var(--primary-color) var(--background-color);
+// }
+
+.loader-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 20px;
+  color: var(--secondary-text-color);
+
+  p {
+    margin-top: 15px;
+    font-size: 14px;
+    font-weight: 500;
+  }
+}
+
+.loader {
+  width: 32px;
+  height: 32px;
+  border: 3px solid rgba(var(--border-color-rgb), 0.1);
+  border-radius: 50%;
+  border-top-color: var(--primary-color);
+  animation: spin 1s ease-in-out infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.loading-more {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  color: var(--secondary-text-color);
+
+  p {
+    margin-top: 10px;
+    font-size: 13px;
+    font-weight: 500;
+  }
+}
+
+.loader-small {
+  width: 24px;
+  height: 24px;
+  border: 3px solid rgba(var(--border-color-rgb), 0.1);
+  border-radius: 50%;
+  border-top-color: var(--primary-color);
+  animation: spin 1s ease-in-out infinite;
+}
+
+.loader-tiny {
+  width: 14px;
+  height: 14px;
+  border: 2px solid rgba(var(--border-color-rgb), 0.1);
+  border-radius: 50%;
+  border-top-color: var(--primary-color);
+  animation: spin 1s ease-in-out infinite;
+}
+
+.edit-btn:disabled,
+.delete-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}