@aakash58/chatbot 1.1.20 → 1.1.21

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

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

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

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

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