@aakash58/chatbot 1.1.21 → 1.1.22

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

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

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

@@ -1,59 +0,0 @@
-/* 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

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

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