@aakash58/chatbot 1.1.19 → 1.1.21

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

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

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

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

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

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

@@ -0,0 +1,103 @@
+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);
+      }
+    });
+  }
+}