@aakash58/chatbot 1.1.21 → 1.1.24

package/projects/doohbot/src/lib/app/login/login-form.component.ts

@@ -1,45 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { MatIconModule } from '@angular/material/icon';
-
-@Component({
-  selector: 'app-login-form',
-  standalone: true,
-  imports: [CommonModule, FormsModule, MatIconModule],
-  templateUrl: './login-form.component.html',
-  styleUrls: ['./login-form.component.scss'],
-})
-export class LoginFormComponent {
-  @Input() isLoggingIn: boolean = false;
-
-  @Output() loginSubmit = new EventEmitter<{
-    username: string;
-    password: string;
-    rememberMe: boolean;
-  }>();
-  @Output() cancel = new EventEmitter<void>();
-
-  public loginUsername = '';
-  public loginPassword = '';
-  public showPassword = false;
-  public rememberMe = false;
-
-  togglePasswordVisibility() {
-    this.showPassword = !this.showPassword;
-  }
-
-  onLoginSubmit() {
-    if (this.loginUsername && this.loginPassword) {
-      this.loginSubmit.emit({
-        username: this.loginUsername,
-        password: this.loginPassword,
-        rememberMe: this.rememberMe,
-      });
-    }
-  }
-
-  onCancel() {
-    this.cancel.emit();
-  }
-}

package/projects/doohbot/src/lib/app/personalization/personalization-dialog.component.html

@@ -1,81 +0,0 @@
-<div class="personalization-container">
-  <div class="header">
-    <div class="title-section">
-      <mat-icon class="header-icon">settings_suggest</mat-icon>
-      <h2>Personalization</h2>
-    </div>
-    <button mat-icon-button (click)="onCancel()" matTooltip="Close">
-      <mat-icon>close</mat-icon>
-    </button>
-  </div>
-
-  <mat-dialog-content class="dialog-layout no-padding">
-    <!-- Sidebar Navigation -->
-    <aside class="sidebar">
-      @for (section of sections; track section.id) {
-        @if (section.type === 'header') {
-          <div class="nav-header">{{ section.label }}</div>
-        } @else {
-          <div
-            class="nav-item"
-            [class.active]="activeSection === section.id"
-            (click)="selectSection(section.id)"
-          >
-            <mat-icon>{{ section.icon }}</mat-icon>
-            <span>{{ section.label }}</span>
-          </div>
-        }
-      }
-    </aside>
-
-    <!-- Main Content Area -->
-    <main class="main-content">
-      <!-- Appearance / Preferences Section -->
-      @if (activeSection === 'preferences') {
-        <app-preferences-section
-          [settings]="settings"
-          [colorTokens]="colorTokens"
-          [isCustomColorSelected]="isCustomColorSelected()"
-          [defaultColor]="personalization.developerDefaults().primaryColor || 'default'"
-          (onThemeSelect)="selectTheme($event)"
-          (onColorSelect)="selectColor($event)"
-          (onButtonStyleSelect)="selectButtonStyle($event)"
-          (onSave)="onSave()"
-          (onReset)="onReset()"
-        >
-        </app-preferences-section>
-      }
-
-      <!-- Account / Profile Section -->
-      @if (activeSection === 'account_settings') {
-        <app-account-section
-          (onDeleteAllHistory)="deleteAllHistory()"
-          (onLogoutAll)="logoutAllDevices()"
-          (onDeleteAccount)="deleteAccount()"
-        ></app-account-section>
-      }
-
-      @if (activeSection === 'profile') {
-        <app-profile-section
-          [username]="username"
-          [userImageUrl]="userImageUrl"
-          [userRole]="userRole"
-        ></app-profile-section>
-      }
-
-      <!-- General Section -->
-      @if (activeSection === 'general') {
-        <app-setting-section
-          [settings]="settings"
-          [hasChanges]="hasChanges"
-          (onSave)="onSave()"
-        ></app-setting-section>
-      }
-
-      <!-- Terms and Conditions Section -->
-      @if (activeSection === 'terms') {
-        <app-terms-section></app-terms-section>
-      }
-    </main>
-  </mat-dialog-content>
-</div>

package/projects/doohbot/src/lib/app/personalization/personalization-dialog.component.scss

@@ -1,179 +0,0 @@
-@use '@angular/material' as mat;
-
-.personalization-container {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: none;
-  max-height: none;
-  max-height: 90vh;
-  background: var(--background-color);
-  color: var(--text-color);
-  border-radius: 12px;
-  overflow: hidden;
-  box-shadow: var(--border-shadow-color);
-
-  .header {
-    flex: 0 0 auto;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 12px 20px;
-    border-bottom: 1px solid var(--border-color);
-    background: var(--background-color);
-
-    .title-section {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-
-      .header-icon {
-        color: var(--secondary-text-color);
-        font-size: 20px;
-        width: 20px;
-        height: 20px;
-      }
-
-      h2 {
-        margin: 0;
-        font-size: 0.95rem;
-        font-weight: 500;
-        color: var(--secondary-text-color);
-      }
-    }
-  }
-
-  .dialog-layout {
-    display: flex;
-    padding: 0;
-    margin: 0;
-    flex: 1;
-    overflow: hidden;
-  }
-
-  // --- Sidebar ---
-  .sidebar {
-    width: 240px;
-    background: rgba(var(--black-rgb), 0.02);
-    border-right: 1px solid var(--border-color);
-    padding: 16px 8px;
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    overflow-y: auto;
-    scrollbar-gutter: stable;
-
-    &::-webkit-scrollbar {
-      width: 4px;
-    }
-
-    &::-webkit-scrollbar-track {
-      background: transparent;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: rgba(var(--black-rgb), 0.1);
-      border-radius: 10px;
-
-      &:hover {
-        background: rgba(var(--black-rgb), 0.2);
-      }
-    }
-
-    .nav-header {
-      padding: 12px 12px 6px;
-      font-size: 0.75rem;
-      font-weight: 600;
-      text-transform: uppercase;
-      color: var(--secondary-text-color);
-      letter-spacing: 0.5px;
-    }
-
-    .nav-item {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      padding: 8px 12px;
-      border-radius: 6px;
-      cursor: pointer;
-      transition: all 0.2s ease;
-      color: var(--text-color);
-
-      mat-icon {
-        font-size: 18px;
-        width: 18px;
-        height: 18px;
-        color: var(--secondary-text-color);
-      }
-
-      span {
-        font-size: 0.9rem;
-        font-weight: 400;
-      }
-
-      &:hover {
-        background: rgba(var(--black-rgb), 0.05);
-      }
-
-      &.active {
-        background: rgba(var(--primary-color-rgb), 0.1);
-        font-weight: 500;
-        color: var(--primary-color);
-
-        mat-icon {
-          color: var(--primary-color);
-        }
-      }
-    }
-  }
-
-  // --- Main Content ---
-  .main-content {
-    flex: 1;
-    overflow-y: auto;
-    background: var(--background-color);
-    position: relative;
-
-    &::-webkit-scrollbar {
-      width: 6px;
-    }
-
-    &::-webkit-scrollbar-track {
-      background: transparent;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: rgba(var(--black-rgb), 0.1);
-      border-radius: 10px;
-
-      &:hover {
-        background: rgba(var(--black-rgb), 0.2);
-      }
-    }
-  }
-
-}
-
-.full-width {
-  width: 100%;
-}
-
-@keyframes slideIn {
-  from {
-    opacity: 0;
-    transform: translateY(4px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-// Dark mode overrides
-:host-context(.dark-theme) {
-  .personalization-container .sidebar {
-    background: var(--background-color);
-  }
-}

package/projects/doohbot/src/lib/app/personalization/personalization-dialog.component.ts

@@ -1,217 +0,0 @@
-import { Component, inject, OnDestroy } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { MatTabsModule } from '@angular/material/tabs';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { MatSelectModule } from '@angular/material/select';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { PreferencesSectionComponent } from './sections/preferences/preferences-section.component';
-import { ProfileSectionComponent } from './sections/profile/profile-section.component';
-import { TermsSectionComponent } from './sections/terms/terms-section.component';
-import { SettingSectionComponent } from './sections/settings/setting-section.component';
-import { AccountSectionComponent } from './sections/account/account-section.component';
-import { ChatHistoryService } from '../chat/services/chat-history.service';
-import { AuthService } from '../../core/auth/auth.service';
-import { PersonalizationService, PersonalizationSettings } from './personalization.service';
-import { DialogService } from '../../shared/dialog/dialog.service';
-import { DialogUtils } from '../../shared/dialog/dialog.utils';
-import { SnackbarService } from '../../shared/snackbar/snackbar.service';
-import { ThemeService } from '../../core/services/theme.service';
-
-@Component({
-  selector: 'app-personalization-dialog',
-  standalone: true,
-  imports: [
-    CommonModule,
-    FormsModule,
-    MatDialogModule,
-    MatButtonModule,
-    MatIconModule,
-    MatTabsModule,
-    MatSlideToggleModule,
-    MatFormFieldModule,
-    MatInputModule,
-    MatSelectModule,
-    MatTooltipModule,
-    PreferencesSectionComponent,
-    ProfileSectionComponent,
-    SettingSectionComponent,
-    TermsSectionComponent,
-    AccountSectionComponent,
-  ],
-  templateUrl: './personalization-dialog.component.html',
-  styleUrls: ['./personalization-dialog.component.scss'],
-})
-export class PersonalizationDialogComponent implements OnDestroy {
-  private dialogRef = inject(MatDialogRef<PersonalizationDialogComponent>);
-  private dialogService = inject(DialogService);
-  public personalization = inject(PersonalizationService);
-  private authService = inject(AuthService);
-  private chatHistory = inject(ChatHistoryService);
-  private snackbar = inject(SnackbarService);
-
-  // Local copy of settings for editing
-  public settings: PersonalizationSettings = JSON.parse(
-    JSON.stringify(this.personalization.settings()),
-  );
-
-  public activeSection = 'profile';
-
-  public sections = [
-    { id: 'account', label: 'Account', type: 'header' },
-    { id: 'profile', label: 'My profile', icon: 'person_outline', type: 'item' },
-    { id: 'account_settings', label: 'Manage Account', icon: 'manage_accounts', type: 'item' },
-    { id: 'preferences', label: 'Preferences', icon: 'tune', type: 'item' },
-    { id: 'workspace', label: 'Workspace', type: 'header' },
-    { id: 'general', label: 'Settings', icon: 'settings', type: 'item' },
-    { id: 'info', label: 'Support', type: 'header' },
-    { id: 'terms', label: 'Terms & Conditions', icon: 'description', type: 'item' },
-  ];
-
-  public colorTokens = [
-    {
-      name: 'Standard',
-      value: 'default',
-    },
-    { name: 'Purple', value: '#7c3aed' },
-    { name: 'Pink', value: '#db2777' },
-    { name: 'Red', value: '#dc2626' },
-    { name: 'Orange', value: '#ea580c' },
-    { name: 'Green', value: '#16a34a' },
-    { name: 'Teal', value: '#0d9488' },
-    { name: 'Blue', value: '#2563eb' },
-  ];
-
-  private themeService = inject(ThemeService);
-  private originalColor: string = '';
-  private isSaved = false;
-
-  constructor() {
-    this.originalColor = this.personalization.settings().appearance.primaryColor;
-  }
-
-  onSave() {
-    if (this.activeSection === 'preferences') {
-      this.isSaved = true;
-      this.personalization.updateAppearance(this.settings.appearance);
-      // Re-apply to ensure consistency (effect handles it, but just in case)
-      this.snackbar.success('Appearance settings saved');
-    } else if (this.activeSection === 'general') {
-      this.personalization.updateInstructions(this.settings.customInstructions);
-      this.snackbar.success('Settings saved');
-    }
-  }
-
-  onCancel() {
-    this.dialogRef.close(false);
-    // ngOnDestroy will handle revert
-  }
-
-  ngOnDestroy() {
-    if (!this.isSaved) {
-      // Revert to original color if not saved
-      this.themeService.applyPrimaryColorToGlobal(this.originalColor);
-    }
-  }
-
-  onReset() {
-    DialogUtils.confirmReset(this.dialogService).subscribe((confirmed) => {
-      if (confirmed) {
-        // Only reset the current section
-        if (this.activeSection === 'preferences') {
-          // Reset only appearance settings to defaults
-          this.personalization.resetToDefaults();
-          // Re-clone settings to update UI
-          this.settings = JSON.parse(JSON.stringify(this.personalization.settings()));
-
-          // Live preview the reset
-          this.themeService.applyPrimaryColorToGlobal(this.settings.appearance.primaryColor);
-        }
-      }
-    });
-  }
-
-  selectTheme(theme: 'light' | 'dark' | 'auto') {
-    this.settings.appearance.theme = theme;
-    // Optional: Preview theme? User only asked for color.
-  }
-
-  selectColor(color: string) {
-    this.settings.appearance.primaryColor = color;
-    //! Live Preview for changed color
-    // this.themeService.applyPrimaryColorToGlobal(color);
-  }
-
-  selectButtonStyle(style: 'fab' | 'sidebar' | 'sidebar-top' | 'sidebar-bottom') {
-    this.settings.appearance.buttonStyle = style;
-  }
-
-  selectSection(sectionId: string) {
-    if (this.sections.find((s) => s.id === sectionId && s.type === 'item')) {
-      this.activeSection = sectionId;
-    }
-  }
-
-  get hasChanges(): boolean {
-    if (this.activeSection === 'preferences') return this.hasPreferencesChanges();
-    if (this.activeSection === 'general') return this.hasInstructionChanges();
-    return false;
-  }
-
-  hasPreferencesChanges(): boolean {
-    const original = this.personalization.settings().appearance;
-    const current = this.settings.appearance;
-    return JSON.stringify(original) !== JSON.stringify(current);
-  }
-
-  hasInstructionChanges(): boolean {
-    const original = this.personalization.settings().customInstructions;
-    const current = this.settings.customInstructions;
-    return JSON.stringify(original) !== JSON.stringify(current);
-  }
-
-  get username(): string {
-    return this.authService.getLoggedInUserName();
-  }
-
-  get userImageUrl(): string | null {
-    return this.authService.getLoggedInUserImageUrl();
-  }
-
-  get userRole(): string {
-    return this.authService.getLoggedInUserRole();
-  }
-
-  isCustomColorSelected(): boolean {
-    return !this.colorTokens.some(
-      (token) => token.value.toLowerCase() === this.settings.appearance.primaryColor.toLowerCase(),
-    );
-  }
-
-  onCustomColorChange(event: Event) {
-    const color = (event.target as HTMLInputElement).value;
-    this.selectColor(color);
-  }
-
-  deleteAllHistory() {
-    const userId = this.authService.getUserId() || '';
-    this.chatHistory.deleteAllHistory(userId.toString()).subscribe(() => {
-      // History cleared
-    });
-  }
-
-  logoutAllDevices() {
-    console.log('Logging out of all devices...');
-    // Implement service call when API is ready
-  }
-
-  deleteAccount() {
-    console.log('Deleting account...');
-    // Implement service call when API is ready
-  }
-}