@aakash58/chatbot 1.1.20 → 1.1.21

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

@@ -0,0 +1,256 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  TrackByFunction,
+  OnDestroy,
+  OnInit,
+  SimpleChanges,
+  OnChanges,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { MessageListComponent } from '../message-list/message-list.component';
+import { MessageInputComponent } from '../message-input/message-input.component';
+import { inject } from '@angular/core';
+import { ChatHistorySidebarComponent } from '../chat-history-sidebar/chat-history-sidebar.component';
+import { FormsModule } from '@angular/forms';
+import { AuthService } from '../../../../core/auth/auth.service';
+import { DraggableDialogDirective } from '../../../../core/directives/draggable/draggable-dialog.directive';
+import { ResizableDialogDirective } from '../../../../core/directives/resizable/resizable-dialog.directive';
+import { Message } from '../../../../core/models/message';
+import { DoohbotThemeConfig } from '../../../../core/models/theme-config.model';
+import { ThemeService } from '../../../../core/services/theme.service';
+import { ChatHeaderComponent } from '../chat-header/chat-header.component';
+import { LoginFormComponent } from '../../../login/login-form.component';
+import { ChatFooterComponent } from '../chat-footer/chat-footer.component';
+import logger from '../../../../core/utils/logger.service';
+import { Chips } from '../../../../shared/chips/chips.component';
+import { ChatSession } from '../../model/chat-session.model';
+import { PersonalizationDialogComponent } from '../../../personalization/personalization-dialog.component';
+
+@Component({
+  selector: 'app-chat-window',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatIconModule,
+    MatMenuModule,
+    Chips,
+    MessageListComponent,
+    MessageInputComponent,
+    DraggableDialogDirective,
+    ResizableDialogDirective,
+    ChatHistorySidebarComponent,
+    ChatHeaderComponent,
+    LoginFormComponent,
+    ChatFooterComponent,
+    FormsModule,
+    MatDialogModule,
+  ],
+  templateUrl: './chat-window.component.html',
+  styleUrls: ['./chat-window.component.scss'],
+})
+export class ChatWindowComponent implements OnInit, OnDestroy, OnChanges {
+  @Input() isChatOpen: boolean = false;
+  @Input() enableDrag: boolean = false;
+  @Input() enableResize: boolean = false;
+  @Input() isFullScreen: boolean = false;
+  @Input() isStreaming: boolean = true;
+  @Input() isAuthenticated: boolean = false;
+  @Input() appTitle: string = '';
+  @Input() appLogoUrl: string = '';
+  @Input() appTextLogoUrl: string = '';
+  @Input() appHeaderLogoUrl: string = '';
+  @Input() messages: Message[] = [];
+  @Input() isBotTyping: boolean = false;
+  @Input() appSubtitle: string = '';
+  @Input() welcomeDesc: string = '';
+  @Input() predefinedMessages: string[] = [];
+  @Input() suggestedMessages: string[] = [];
+  @Input() botAvatarUrl: string = '';
+  @Input() userAvatarUrl: string = '';
+  @Input() userName: string = '';
+  @Input() trackByMessageId: TrackByFunction<Message> = (index, item) => item.id ?? index;
+  @Input() hintText: string = '';
+  @Input() messageError: string | null = null;
+  @Input() showSuggestionChips: boolean = false;
+  @Input() isHistorySidebarOpen: boolean = false;
+  @Input() chatSessions: ChatSession[] = [];
+  @Input() chatHistoryUserName: string = 'User';
+
+  @Input() isLoggingIn: boolean = false;
+  @Input() authError: string | null = null;
+  @Input() authSuccess: string | null = null;
+  @Input() isLoadingSessions: boolean = false;
+  @Input() hasMoreSessions: boolean = false;
+  @Input() isLoadingMoreSessions: boolean = false;
+  @Input() processingSessionId: string | null = null;
+  @Input() themeConfig: DoohbotThemeConfig | undefined;
+  @Input() buttonStyle: string = 'fab';
+
+  @Output() toggleChat = new EventEmitter<void>();
+  @Output() toggleFullScreen = new EventEmitter<void>();
+  @Output() toggleHistorySidebar = new EventEmitter<void>();
+  @Output() openSettings = new EventEmitter<void>();
+  @Output() suggestionClick = new EventEmitter<string>();
+  @Output() send = new EventEmitter<string>();
+  @Output() stop = new EventEmitter<void>();
+  @Output() clearMessageError = new EventEmitter<void>();
+  @Output() clearChat = new EventEmitter<void>();
+  @Output() sessionSelected = new EventEmitter<ChatSession>();
+  @Output() sessionDeleted = new EventEmitter<string>();
+  @Output() loadMoreSessions = new EventEmitter<void>();
+  @Output() refreshSessions = new EventEmitter<void>();
+  @Output() sessionRenamed = new EventEmitter<{ sessionId: string; newTitle: string }>();
+  @Output() deleteAllSessions = new EventEmitter<void>();
+
+  @Output() loginSubmit = new EventEmitter<{
+    username: string;
+    password: string;
+    rememberMe: boolean;
+  }>();
+  @Output() logout = new EventEmitter<void>();
+
+  public themeService = inject(ThemeService);
+  public authService = inject(AuthService);
+  private dialog = inject(MatDialog);
+
+  // UI state
+  public showLoginForm = false;
+
+  public get canDrag(): boolean {
+    return this.enableDrag && this.buttonStyle === 'fab' && !this.isFullScreen;
+  }
+
+  public get canResize(): boolean {
+    return this.enableResize && this.buttonStyle === 'fab' && !this.isFullScreen;
+  }
+
+  constructor() {}
+
+  onToggleChat() {
+    this.toggleChat.emit();
+  }
+
+  onToggleHistorySidebar() {
+    logger.log('History button clicked!');
+    this.toggleHistorySidebar.emit();
+  }
+
+  onLoginClick() {
+    this.showLoginForm = true;
+  }
+
+  onLoginSubmit(credentials: { username: string; password: string; rememberMe: boolean }) {
+    this.loginSubmit.emit(credentials);
+  }
+
+  onCancelLogin() {
+    this.showLoginForm = false;
+  }
+
+  onToggleFullScreen() {
+    this.toggleFullScreen.emit();
+  }
+
+  onOpenSettings() {
+    this.openSettings.emit();
+  }
+
+  onOpenPersonalization() {
+    this.dialog.open(PersonalizationDialogComponent, {
+      width: '1100px',
+      height: '700px',
+      maxWidth: '95vw',
+      panelClass: 'personalization-dialog-panel',
+    });
+  }
+
+  onSuggestionClick(text: string) {
+    this.suggestionClick.emit(text);
+  }
+
+  onSend(text: string) {
+    this.send.emit(text);
+  }
+
+  onStop() {
+    this.stop.emit();
+  }
+
+  onClearMessageError() {
+    this.messageError = null;
+    this.clearMessageError.emit();
+  }
+
+  onClearAuthError() {
+    this.clearMessageError.emit();
+  }
+
+  onClearChat() {
+    this.clearChat.emit();
+  }
+
+  onLogout() {
+    this.logout.emit();
+  }
+
+  onSessionSelected(session: ChatSession) {
+    this.sessionSelected.emit(session);
+  }
+
+  onSessionDeleted(sessionId: string) {
+    this.sessionDeleted.emit(sessionId);
+  }
+
+  onSessionRenamed(event: { sessionId: string; newTitle: string }) {
+    this.sessionRenamed.emit(event);
+  }
+
+  onDeleteAllSessions() {
+    this.deleteAllSessions.emit();
+  }
+
+  onPopoutShown(win: Window) {
+    // Apply theme classes
+    const activeTheme = this.themeService.activeTheme();
+    logger.log('Popout shown, applying theme:', activeTheme);
+
+    const body = win.document.body;
+    // We cannot use renderer easily on another document without custom renderer factory,
+    // but native DOM manipulation is fine here since it's a separate window object.
+    body.classList.remove('light-theme', 'dark-theme');
+    body.classList.add(activeTheme);
+
+    // Apply CSS variables
+    this.themeService.applyCssVariables(body, this.themeConfig);
+  }
+
+  ngOnInit() {
+    // Initialization logic if needed
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    //? Handle authentication status changes
+    if (changes['isAuthenticated']) {
+      if (this.isAuthenticated) {
+        this.showLoginForm = false;
+      }
+    }
+
+    //? Handle logging in status changes
+    if (changes['isLoggingIn']) {
+      if (this.isLoggingIn) {
+        this.showLoginForm = false;
+      } else if (!this.isAuthenticated && !changes['isLoggingIn'].firstChange) {
+        this.showLoginForm = true;
+      }
+    }
+  }
+
+  ngOnDestroy() {}
+}

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

@@ -0,0 +1,17 @@
+<!-- Chat Input -->
+<div class="chat-input">
+  <div class="input-wrapper">
+    <input #messageInput type="text" [disabled]="isBotTyping" (keydown.enter)="
+        !isBotTyping && onSend(messageInput.value); !isBotTyping && (messageInput.value = '')
+      " [placeholder]="hintText" />
+
+    <button (click)="
+        isBotTyping ? onStop() : onSend(messageInput.value);
+        !isBotTyping && (messageInput.value = '')
+      ">
+      <mat-icon [class.stop-icon]="isBotTyping">{{
+        isBotTyping ? 'stop_circle' : 'send'
+        }}</mat-icon>
+    </button>
+  </div>
+</div>

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

@@ -0,0 +1,59 @@
+/* Chat input */
+:host {
+  display: block;
+  width: 100%;
+}
+
+.chat-input {
+  display: flex;
+  padding: 10px;
+  border-top: 1px solid var(--border-top-color);
+  background-color: var(--background-color);
+}
+
+.chat-input .input-wrapper {
+  position: relative;
+  flex-grow: 1;
+}
+
+.chat-input input {
+  width: 100%;
+  background-color: var(--background-color);
+  border: 1px solid var(--border-color);
+  border-radius: 16px;
+  padding: 10px 50px 10px 15px;
+  /* Extra right padding to make room for the button */
+  font-size: 14px;
+  color: var(--text-color);
+  caret-color: var(--hint-text-color);
+  font-family: var(--font-family);
+  box-sizing: border-box;
+
+  &::placeholder {
+    color: var(--hint-text-color);
+  }
+
+  &:focus {
+    border-color: var(--primary-color);
+    outline: none;
+  }
+}
+
+.chat-input button {
+  position: absolute;
+  right: 5px;
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: transparent;
+  color: var(--primary-color);
+  border: none;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  // z-index: 2;
+
+  .stop-icon {
+    color: var(--red);
+  }
+}

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

@@ -0,0 +1,28 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+
+@Component({
+  selector: 'app-message-input',
+  standalone: true,
+  imports: [CommonModule, MatIconModule],
+  templateUrl: './message-input.component.html',
+  styleUrls: ['./message-input.component.scss'],
+})
+export class MessageInputComponent {
+  @Input() isBotTyping: boolean = false;
+  @Input() hintText: string = 'Type a message...';
+
+  @Output() send = new EventEmitter<string>();
+  @Output() stop = new EventEmitter<void>();
+
+  onSend(text: string) {
+    if (text.trim()) {
+      this.send.emit(text);
+    }
+  }
+
+  onStop() {
+    this.stop.emit();
+  }
+}

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

@@ -0,0 +1,138 @@
+<div #chatMessages class="chat-messages">
+  <!-- Welcome Screen -->
+  @if (messages.length === 0 && !isBotTyping) {
+    <div class="welcome-screen">
+      <img [src]="appLogoUrl" alt="Welcome" class="welcome-image" style="border-radius: 0px" />
+
+      <!-- Only show greeting if authenticated -->
+      @if (userName && isAuthenticated) {
+        <div class="marquee-container">
+          <h2 class="welcome-greeting marquee-text">
+            Hi, {{ userName }}!
+            <span class="emoji">{{ appEmoji.waveHand }}</span>
+          </h2>
+        </div>
+      }
+
+      <h3>{{ appSubtitle }}</h3>
+      <p>{{ welcomeDesc }}</p>
+
+      <!-- Predefined messages chips: Only show when authenticated -->
+      @if (isAuthenticated) {
+        <app-chips
+          [messages]="predefinedMessages"
+          [disabled]="isBotTyping"
+          (chipClick)="onPredefinedClick($event)"
+        ></app-chips>
+      }
+
+      @if (!isAuthenticated) {
+        <div class="auth-buttons-container" style="margin-top: 20px">
+          <button (click)="loginClick.emit()" class="auth-btn primary" [disabled]="isLoggingIn">
+            {{ isLoggingIn ? 'Logging in...' : 'Login' }}
+          </button>
+        </div>
+      }
+    </div>
+  }
+
+  <!-- Chat Messages -->
+  <div
+    *ngFor="let message of messages; trackBy: trackByMessageId"
+    class="message"
+    [class.user]="message.sender === 'user'"
+    [class.assistant]="message.sender === 'assistant'"
+    [class.streaming]="!message.completed && message.sender === 'assistant'"
+  >
+    <!-- Avatar (Assistant on Left) -->
+    @if (message.sender === 'assistant') {
+      <div class="avatar-container">
+        <img class="assistant-avatar" [src]="botAvatarUrl" alt="Bot Avatar" />
+      </div>
+    }
+
+    <!-- Message Bubble -->
+    <div class="message-content">
+      <!-- User chat bubble -->
+      @if (message.sender === 'user') {
+        <div class="user">
+          <span>{{ message.text }}</span>
+          <button class="copy-btn" (click)="copyMessage(message)" title="Copy message">
+            <mat-icon>{{ message.copied ? 'check' : 'content_copy' }}</mat-icon>
+          </button>
+        </div>
+      }
+
+      <!-- Assistant chat bubble -->
+      @if (message.sender === 'assistant') {
+        <div class="assistant">
+          @if (isStreaming && !message.isHistory) {
+            <!-- Show text/chunks if they exist -->
+            @if (message.chunks && message.chunks.length > 0) {
+              <span
+                *ngFor="let chunk of message.chunks; let i = index"
+                class="markdown-content"
+                [attr.data-index]="i"
+                [innerHTML]="chunk | Markdown"
+              ></span>
+            } @else if (!message.completed) {
+              <div class="typing-indicator">
+                <span></span>
+                <span></span>
+                <span></span>
+              </div>
+            }
+          } @else {
+            <!-- Non-streaming or history -->
+            @if (message.text) {
+              <span class="markdown-content" [innerHTML]="message.text | Markdown"></span>
+            } @else if (!message.completed) {
+              <div class="typing-indicator">
+                <span></span>
+                <span></span>
+                <span></span>
+              </div>
+            }
+          }
+          @if (message.completed) {
+            <button class="copy-btn" (click)="copyMessage(message)" title="Copy message">
+              <mat-icon>{{ message.copied ? 'check' : 'content_copy' }}</mat-icon>
+            </button>
+          }
+        </div>
+      }
+
+      <!-- Show time below message -->
+      @if (message.sender === 'assistant' && message.completed) {
+        <div class="message-time">
+          {{ message.timestamp | date: 'shortTime' }}
+        </div>
+      }
+    </div>
+
+    <!-- Avatar (User on Right) -->
+    @if (message.sender === 'user') {
+      <div class="avatar-container">
+        <img class="user-avatar" [src]="userAvatarUrl" alt="User Avatar" />
+      </div>
+    }
+  </div>
+
+  <!-- Standalone Typing Indicator (Fallback if no message added yet) -->
+  @if (isBotTyping && messages[messages.length - 1]?.sender !== 'assistant') {
+    <div class="message assistant">
+      <div class="avatar-container">
+        <img class="assistant-avatar" [src]="botAvatarUrl" alt="Bot Avatar" />
+      </div>
+      <div class="message-content">
+        <div class="assistant">
+          <div class="typing-indicator">
+            <span></span>
+            <span></span>
+            <span></span>
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+</div>