@aakash58/chatbot 1.1.21 → 1.1.22

package/projects/doohbot/src/lib/app/personalization/sections/instructions/instructions-section.component.scss

@@ -1,138 +0,0 @@
-.instructions-container {
-    padding: 40px 60px;
-    display: flex;
-    flex-direction: column;
-    gap: 32px;
-    animation: slideIn 0.3s ease-out;
-
-    .pane-header {
-        h1 {
-            margin: 0 0 8px 0;
-            font-size: 1.75rem;
-            font-weight: 700;
-        }
-
-        p {
-            margin: 0;
-            font-size: 1rem;
-            color: var(--secondary-text-color);
-        }
-    }
-}
-
-.settings-list {
-    display: flex;
-    flex-direction: column;
-    background: rgba(var(--black-rgb), 0.02);
-    border-radius: 12px;
-    border: 1px solid rgba(var(--black-rgb), 0.05);
-    overflow: hidden;
-
-    .settings-row {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 20px 24px;
-        border-bottom: 1px solid rgba(var(--black-rgb), 0.05);
-
-        &:last-child {
-            border-bottom: none;
-        }
-
-        .row-info {
-            display: flex;
-            flex-direction: column;
-            gap: 4px;
-
-            .row-label {
-                font-size: 1.05rem;
-                font-weight: 600;
-                color: var(--text-color);
-            }
-
-            .row-sublabel {
-                font-size: 0.9rem;
-                color: var(--secondary-text-color);
-            }
-        }
-    }
-}
-
-.instruction-fields {
-    display: flex;
-    flex-direction: column;
-    gap: 32px;
-    transition: all 0.3s ease;
-
-    &.disabled {
-        opacity: 0.5;
-        filter: grayscale(0.5);
-        pointer-events: none;
-    }
-
-    .field-item {
-        display: flex;
-        flex-direction: column;
-        gap: 12px;
-
-        .field-header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            margin-bottom: 4px;
-
-            label {
-                font-size: 0.95rem;
-                font-weight: 600;
-                color: var(--text-color);
-            }
-
-            mat-icon {
-                font-size: 18px;
-                width: 18px;
-                height: 18px;
-                color: var(--secondary-text-color);
-                cursor: help;
-                opacity: 0.7;
-                transition: opacity 0.2s;
-
-                &:hover {
-                    opacity: 1;
-                }
-            }
-        }
-    }
-}
-
-.full-width {
-    width: 100%;
-}
-
-@keyframes slideIn {
-    from {
-        opacity: 0;
-        transform: translateY(4px);
-    }
-
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-.pill-btn {
-    background: none;
-    border: 1.5px solid rgba(var(--black-rgb), 0.15);
-    border-radius: 100px;
-    padding: 6px 20px;
-    font-size: 0.9rem;
-    font-weight: 600;
-    color: var(--text-color);
-    cursor: pointer;
-    transition: all 0.2s ease;
-
-    &:hover {
-        background: rgba(var(--black-rgb), 0.05);
-        border-color: rgba(var(--black-rgb), 0.3);
-    }
-}

package/projects/doohbot/src/lib/app/personalization/sections/instructions/instructions-section.component.ts

@@ -1,28 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { MatIconModule } from '@angular/material/icon';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { PersonalizationSettings } from '../../personalization.service';
-
-@Component({
-  selector: 'app-instructions-section',
-  standalone: true,
-  imports: [
-    CommonModule,
-    FormsModule,
-    MatSlideToggleModule,
-    MatFormFieldModule,
-    MatInputModule,
-    MatIconModule,
-    MatTooltipModule
-  ],
-  templateUrl: './instructions-section.component.html',
-  styleUrls: ['./instructions-section.component.scss'],
-})
-export class InstructionsSectionComponent {
-  @Input() settings!: PersonalizationSettings;
-}

package/projects/doohbot/src/lib/app/personalization/sections/preferences/color-picker-dialog.component.ts

@@ -1,92 +0,0 @@
-import { Component, Inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { MatDialogModule, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { MatButtonModule } from '@angular/material/button';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-
-@Component({
-  selector: 'app-color-picker-dialog',
-  standalone: true,
-  imports: [
-    CommonModule,
-    FormsModule,
-    MatDialogModule,
-    MatButtonModule,
-    MatFormFieldModule,
-    MatInputModule,
-  ],
-  template: `
-    <h2 mat-dialog-title>Choose Custom Color</h2>
-    <mat-dialog-content>
-      <div class="picker-container">
-        <input
-          type="color"
-          [(ngModel)]="color"
-          (input)="onColorInput($event)"
-          class="main-picker"
-        />
-        <mat-form-field appearance="outline">
-          <mat-label>Hex Code</mat-label>
-          <input matInput [(ngModel)]="color" placeholder="#000000" />
-        </mat-form-field>
-      </div>
-    </mat-dialog-content>
-    <mat-dialog-actions align="end">
-      <button mat-button (click)="onCancel()">Cancel</button>
-      <button mat-raised-button color="primary" (click)="onConfirm()">Apply</button>
-    </mat-dialog-actions>
-  `,
-  styles: [
-    `
-      .picker-container {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 20px;
-        padding: 10px 0;
-      }
-      .main-picker {
-        width: 100px;
-        height: 100px;
-        padding: 0;
-        border: none;
-        border-radius: 50%;
-        cursor: pointer;
-        outline: none;
-        background: none;
-      }
-      .main-picker::-webkit-color-swatch-wrapper {
-        padding: 0;
-      }
-      .main-picker::-webkit-color-swatch {
-        border: none;
-        border-radius: 50%;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-      }
-    `,
-  ],
-})
-export class ColorPickerDialogComponent {
-  public color: string;
-
-  constructor(
-    public dialogRef: MatDialogRef<ColorPickerDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: { color: string },
-  ) {
-    this.color = data.color;
-  }
-
-  onColorInput(event: any) {
-    this.color = event.target.value;
-  }
-
-  onCancel() {
-    this.dialogRef.close();
-  }
-
-  onConfirm() {
-    this.dialogRef.close(this.color);
-  }
-}

package/projects/doohbot/src/lib/app/personalization/sections/preferences/preferences-section.component.html

@@ -1,198 +0,0 @@
-<div class="preferences-container">
-  <header class="pane-header">
-    <h1>Preferences</h1>
-    <p>Customize how your assistant looks and feels.</p>
-  </header>
-
-  <div class="settings-list">
-    <!-- Appearance Row -->
-    <div class="settings-row">
-      <div class="row-info">
-        <span class="row-label">Appearance</span>
-      </div>
-      <div class="row-action">
-        <mat-form-field appearance="outline" subscriptSizing="dynamic">
-          <mat-select
-            [value]="settings.appearance.theme"
-            (selectionChange)="onThemeSelect.emit($event.value)"
-          >
-            <mat-select-trigger>
-              <div class="selected-option-trigger">
-                <mat-icon>{{ getThemeIcon(settings.appearance.theme) }}</mat-icon>
-                <span>{{ getThemeLabel(settings.appearance.theme) }}</span>
-              </div>
-            </mat-select-trigger>
-            <mat-option value="light">
-              <div class="option-content">
-                <mat-icon>light_mode</mat-icon>
-                <span>Light Mode</span>
-              </div>
-            </mat-option>
-            <mat-option value="dark">
-              <div class="option-content">
-                <mat-icon>dark_mode</mat-icon>
-                <span>Dark Mode</span>
-              </div>
-            </mat-option>
-            <mat-option value="auto">
-              <div class="option-content">
-                <mat-icon>brightness_auto</mat-icon>
-                <span>System</span>
-              </div>
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-      </div>
-    </div>
-
-    <!-- Accent Color Row -->
-    <div class="settings-row">
-      <div class="row-info">
-        <span class="row-label">Accent color</span>
-      </div>
-      <div class="row-action">
-        <mat-form-field appearance="outline" subscriptSizing="dynamic">
-          <mat-select
-            [value]="settings.appearance.primaryColor"
-            (selectionChange)="onColorSelect.emit($event.value)"
-          >
-            <mat-select-trigger>
-              <div class="selected-color-trigger">
-                <div
-                  class="color-dot"
-                  [style.background-color]="
-                    settings.appearance.primaryColor === 'default'
-                      ? defaultColor
-                      : settings.appearance.primaryColor
-                  "
-                ></div>
-                <span>{{ getSelectedColorName() }}</span>
-              </div>
-            </mat-select-trigger>
-            @for (color of colorTokens; track color.name) {
-              <mat-option [value]="color.value">
-                <div class="option-content">
-                  <div
-                    class="color-dot"
-                    [style.background-color]="
-                      color.value === 'default' ? defaultColor : color.value
-                    "
-                  ></div>
-                  <span>{{ color.name === 'Standard' ? 'Default' : color.name }}</span>
-                </div>
-              </mat-option>
-            }
-
-            <!-- Active Custom Color -->
-            @if (isCustomColor()) {
-              <mat-option [value]="settings.appearance.primaryColor">
-                <div class="option-content">
-                  <div
-                    class="color-dot"
-                    [style.background-color]="settings.appearance.primaryColor"
-                  ></div>
-                  <span>Custom</span>
-                </div>
-              </mat-option>
-            }
-
-            <!-- Action to pick new Custom Color -->
-            <mat-option
-              [value]="'picker-trigger'"
-              (click)="openCustomColorPicker(); $event.stopPropagation()"
-            >
-              <div class="option-content">
-                <mat-icon>colorize</mat-icon>
-                <span>{{ isCustomColor() ? 'Change Custom...' : 'Custom...' }}</span>
-              </div>
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-      </div>
-    </div>
-
-    <!-- Trigger Style Row -->
-    <div class="settings-row">
-      <div class="row-info">
-        <span class="row-label">Trigger Style</span>
-      </div>
-      <div class="row-action">
-        <mat-form-field appearance="outline" subscriptSizing="dynamic">
-          <mat-select
-            [value]="settings.appearance.buttonStyle"
-            (selectionChange)="onButtonStyleSelect.emit($event.value)"
-          >
-            <mat-select-trigger>
-              <div class="selected-option-trigger">
-                <mat-icon>{{ getStyleIcon(settings.appearance.buttonStyle) }}</mat-icon>
-                <span>{{ getStyleLabel(settings.appearance.buttonStyle) }}</span>
-              </div>
-            </mat-select-trigger>
-            <mat-option value="fab">
-              <div class="option-content">
-                <mat-icon>radio_button_checked</mat-icon>
-                <span>FAB</span>
-              </div>
-            </mat-option>
-            <mat-option value="sidebar">
-              <div class="option-content">
-                <mat-icon>view_sidebar</mat-icon>
-                <span>Sidebar</span>
-              </div>
-            </mat-option>
-            <mat-option value="sidebar-top">
-              <div class="option-content">
-                <mat-icon>vertical_align_top</mat-icon>
-                <span>Sidebar Top</span>
-              </div>
-            </mat-option>
-            <mat-option value="sidebar-bottom">
-              <div class="option-content">
-                <mat-icon>vertical_align_bottom</mat-icon>
-                <span>Sidebar Bottom</span>
-              </div>
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-      </div>
-    </div>
-
-    <!-- Language Placeholder -->
-    <div class="settings-row">
-      <div class="row-info">
-        <span class="row-label">Language</span>
-      </div>
-      <div class="row-action">
-        <button class="pill-btn">Auto-detect</button>
-      </div>
-    </div>
-
-    <!-- Voice Placeholder -->
-    <div class="settings-row">
-      <div class="row-info">
-        <span class="row-label">Voice</span>
-      </div>
-      <div class="row-action">
-        <button class="pill-btn">Cove</button>
-      </div>
-    </div>
-
-    <!-- Data Controls Placeholder -->
-    <div class="settings-row">
-      <div class="row-info">
-        <span class="row-label">Data controls</span>
-      </div>
-      <div class="row-action">
-        <button class="pill-btn">Manage</button>
-      </div>
-    </div>
-  </div>
-
-  <div class="section-actions">
-    <button mat-button class="reset-btn" (click)="onReset.emit()">Reset</button>
-    <div class="spacer"></div>
-    <button mat-raised-button color="primary" class="save-btn" (click)="onSave.emit()">
-      Apply Changes
-    </button>
-  </div>
-</div>

package/projects/doohbot/src/lib/app/personalization/sections/preferences/preferences-section.component.scss

@@ -1,107 +0,0 @@
-.preferences-container {
-    padding: 40px;
-    display: flex;
-    flex-direction: column;
-    gap: 32px;
-    min-height: 100%;
-    box-sizing: border-box;
-    animation: fadeIn 0.3s ease-out;
-
-    .pane-header {
-        h1 {
-            margin: 0 0 8px 0;
-            font-size: 1.75rem;
-            font-weight: 700;
-        }
-
-        p {
-            margin: 0;
-            font-size: 1rem;
-            color: var(--secondary-text-color);
-        }
-    }
-}
-
-.settings-list {
-    display: flex;
-    flex-direction: column;
-
-    .settings-row {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 16px 0;
-        border-bottom: 1px solid rgba(var(--black-rgb), 0.05);
-
-        &:last-child {
-            border-bottom: none;
-        }
-
-        .row-info {
-            .row-label {
-                font-size: 1rem;
-                font-weight: 500;
-                color: var(--text-color);
-            }
-        }
-
-        .row-action {
-            width: 200px;
-        }
-    }
-}
-
-.option-content,
-.selected-color-trigger,
-.selected-option-trigger {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-
-    mat-icon {
-        font-size: 20px;
-        width: 20px;
-        height: 20px;
-        color: var(--secondary-text-color);
-    }
-
-    .color-dot {
-        width: 14px;
-        height: 14px;
-        border-radius: 50%;
-        flex-shrink: 0;
-    }
-
-    span {
-        font-size: 0.95rem;
-    }
-}
-
-@keyframes slideIn {
-    from {
-        opacity: 0;
-        transform: translateY(4px);
-    }
-
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-.pill-btn {
-    background: none;
-    border: 1.5px solid rgba(var(--black-rgb), 0.15);
-    border-radius: 100px;
-    padding: 6px 20px;
-    font-size: 0.9rem;
-    font-weight: 600;
-    color: var(--text-color);
-    cursor: pointer;
-    transition: all 0.2s ease;
-
-    &:hover {
-        background: rgba(var(--black-rgb), 0.05);
-        border-color: rgba(var(--black-rgb), 0.3);
-    }
-}

package/projects/doohbot/src/lib/app/personalization/sections/preferences/preferences-section.component.ts

@@ -1,103 +0,0 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatIconModule } from '@angular/material/icon';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatSelectModule } from '@angular/material/select';
-import { MatDialog } from '@angular/material/dialog';
-import { PersonalizationSettings } from '../../personalization.service';
-import { ColorPickerDialogComponent } from './color-picker-dialog.component';
-
-@Component({
-  selector: 'app-preferences-section',
-  standalone: true,
-  imports: [CommonModule, MatIconModule, MatTooltipModule, MatFormFieldModule, MatSelectModule],
-  templateUrl: './preferences-section.component.html',
-  styleUrls: ['./preferences-section.component.scss'],
-})
-export class PreferencesSectionComponent {
-  constructor(private dialog: MatDialog) { }
-  @Input() settings!: PersonalizationSettings;
-  @Input() colorTokens: any[] = [];
-  @Input() isCustomColorSelected = false;
-  @Input() defaultColor: string = 'default';
-
-  @Output() onThemeSelect = new EventEmitter<'light' | 'dark' | 'auto'>();
-  @Output() onColorSelect = new EventEmitter<string>();
-  @Output() onButtonStyleSelect = new EventEmitter<'fab' | 'sidebar' | 'sidebar-top' | 'sidebar-bottom'>();
-  @Output() onSave = new EventEmitter<void>();
-  @Output() onReset = new EventEmitter<void>();
-
-  onCustomColorChange(event: Event) {
-    const color = (event.target as HTMLInputElement).value;
-    this.onColorSelect.emit(color);
-  }
-
-  getSelectedColorName(): string {
-    const current = this.settings.appearance.primaryColor;
-    if (current === 'default') return 'Default';
-
-    // Fallback for legacy saved hexes that happen to match default
-    // or finding the named token
-    const token = this.colorTokens.find(c => c.value.toLowerCase() === current.toLowerCase());
-    if (token) return token.name === 'Standard' ? 'Default' : token.name;
-
-    return 'Custom';
-  }
-
-  isCustomColor(): boolean {
-    const current = this.settings.appearance.primaryColor;
-    if (current === 'default') return false;
-
-    return !this.colorTokens.some(c => c.value.toLowerCase() === current.toLowerCase());
-  }
-
-  getThemeIcon(theme: string): string {
-    switch (theme) {
-      case 'light': return 'light_mode';
-      case 'dark': return 'dark_mode';
-      default: return 'brightness_auto';
-    }
-  }
-
-  getThemeLabel(theme: string): string {
-    switch (theme) {
-      case 'light': return 'Light Mode';
-      case 'dark': return 'Dark Mode';
-      default: return 'System';
-    }
-  }
-
-  getStyleIcon(style: string): string {
-    switch (style) {
-      case 'fab': return 'radio_button_checked';
-      case 'sidebar': return 'view_sidebar';
-      case 'sidebar-top': return 'vertical_align_top';
-      case 'sidebar-bottom': return 'vertical_align_bottom';
-      default: return 'radio_button_checked';
-    }
-  }
-
-  getStyleLabel(style: string): string {
-    switch (style) {
-      case 'fab': return 'FAB';
-      case 'sidebar': return 'Sidebar';
-      case 'sidebar-top': return 'Sidebar Top';
-      case 'sidebar-bottom': return 'Sidebar Bottom';
-      default: return 'FAB';
-    }
-  }
-
-  openCustomColorPicker() {
-    const dialogRef = this.dialog.open(ColorPickerDialogComponent, {
-      width: '350px',
-      data: { color: this.settings.appearance.primaryColor }
-    });
-
-    dialogRef.afterClosed().subscribe(result => {
-      if (result) {
-        this.onColorSelect.emit(result);
-      }
-    });
-  }
-}