@aakash58/chatbot 1.1.20 → 1.1.21

package/projects/doohbot/src/lib/app/personalization/personalization.service.ts

@@ -0,0 +1,197 @@
+import { Injectable, signal, inject, effect } from '@angular/core';
+import { StorageService } from '../../core/auth/storage.service';
+import { AuthService } from '../../core/auth/auth.service';
+import { toSignal } from '@angular/core/rxjs-interop';
+
+export interface Characteristics {
+  warm: string;
+  enthusiastic: string;
+  headersAndLists: string;
+  emoji: string;
+}
+
+export interface AboutYou {
+  nickname: string;
+  occupation: string;
+}
+
+export interface CustomInstructions {
+  enabled: boolean;
+  aboutUser: string;
+  responseStyle: string;
+  characteristics: Characteristics;
+  aboutYou: AboutYou;
+}
+
+export interface AppearanceSettings {
+  theme: 'light' | 'dark' | 'auto';
+  primaryColor: string;
+  buttonStyle: 'fab' | 'sidebar' | 'sidebar-top' | 'sidebar-bottom';
+}
+
+export interface PersonalizationSettings {
+  customInstructions: CustomInstructions;
+  appearance: AppearanceSettings;
+  meta: {
+    version: number;
+    lastUpdated: number;
+  };
+}
+
+const BASE_STORAGE_KEY = 'app.personalization.v1';
+
+const DEFAULT_SETTINGS: PersonalizationSettings = {
+  customInstructions: {
+    enabled: false,
+    aboutUser: '',
+    responseStyle: '',
+    characteristics: {
+      warm: 'Default',
+      enthusiastic: 'Default',
+      headersAndLists: 'Default',
+      emoji: 'Default',
+    },
+    aboutYou: {
+      nickname: '',
+      occupation: '',
+    },
+  },
+  appearance: {
+    theme: 'auto',
+    primaryColor: 'default', // Standard primary color (resolves to developer default)
+    buttonStyle: 'fab',
+  },
+  meta: {
+    version: 1,
+    lastUpdated: Date.now(),
+  },
+};
+
+@Injectable({
+  providedIn: 'root',
+})
+export class PersonalizationService {
+  private storage = inject(StorageService);
+  private authService = inject(AuthService);
+
+  // Reactive Authentication Status
+  private authStatus = toSignal(this.authService.authStatus$);
+
+  // State Signals
+  private _settings = signal<PersonalizationSettings>(DEFAULT_SETTINGS);
+  public settings = this._settings.asReadonly();
+
+  // Developer-provided defaults (from DoohbotInput)
+  private _developerDefaults = signal<Partial<AppearanceSettings>>({});
+  public readonly developerDefaults = this._developerDefaults.asReadonly();
+
+  constructor() {
+    // Reload settings when auth status changes (user logins or logouts)
+    effect(
+      () => {
+        const status = this.authStatus();
+        this._settings.set(this.loadSettings());
+      },
+      { allowSignalWrites: true }, // TODO
+    );
+
+    // Automatically persist changes when settings signal updates
+    effect(() => {
+      const currentSettings = this._settings();
+      this.saveSettings(currentSettings);
+    });
+  }
+
+  private getStorageKey(): string {
+    const userId = this.authService.getUserId();
+    return userId ? `${BASE_STORAGE_KEY}_${userId}` : BASE_STORAGE_KEY;
+  }
+
+  /**
+   * Update custom instructions
+   */
+  updateInstructions(instructions: Partial<CustomInstructions>) {
+    this._settings.update((s) => ({
+      ...s,
+      customInstructions: { ...s.customInstructions, ...instructions },
+      meta: { ...s.meta, lastUpdated: Date.now() },
+    }));
+  }
+
+  /**
+   * Update appearance settings
+   */
+  updateAppearance(appearance: Partial<AppearanceSettings>) {
+    this._settings.update((s) => ({
+      ...s,
+      appearance: { ...s.appearance, ...appearance },
+      meta: { ...s.meta, lastUpdated: Date.now() },
+    }));
+  }
+
+  /**
+   * Set initial developer defaults (called from DoohbotComponent)
+   */
+  setDeveloperDefaults(defaults: Partial<AppearanceSettings>) {
+    this._developerDefaults.set(defaults);
+    // Refresh settings to apply defaults if no user settings are saved
+    this._settings.set(this.loadSettings());
+  }
+
+  /**
+   * Reset all personalization to defaults
+   */
+  resetToDefaults() {
+    this._settings.set({
+      ...DEFAULT_SETTINGS,
+      meta: { ...DEFAULT_SETTINGS.meta, lastUpdated: Date.now() },
+    });
+  }
+
+  /**
+   * Get the formatted instructions block for chat requests
+   */
+  getFormattedInstructions(): string {
+    const s = this._settings().customInstructions;
+    if (!s.enabled) return '';
+
+    let block = '--- CUSTOM INSTRUCTIONS ---\n';
+    if (s.aboutUser) {
+      block += `USER CONTEXT: ${s.aboutUser}\n`;
+    }
+    if (s.responseStyle) {
+      block += `RESPONSE STYLE: ${s.responseStyle}\n`;
+    }
+    block += '---------------------------';
+
+    return s.aboutUser || s.responseStyle ? block : '';
+  }
+
+  private loadSettings(): PersonalizationSettings {
+    try {
+      const key = this.getStorageKey();
+      // StorageService.get handles decryption/parsing
+      const saved = this.storage.get(key);
+      if (saved) {
+        return { ...DEFAULT_SETTINGS, ...saved };
+      }
+    } catch (e) {
+      console.error('Failed to load personalization settings', e);
+    }
+
+    // Return defaults merged with developer overrides
+    return {
+      ...DEFAULT_SETTINGS,
+      appearance: {
+        ...DEFAULT_SETTINGS.appearance,
+        ...this._developerDefaults(),
+        primaryColor: 'default', //! Force 'default'  for fresh loads so it resolves dynamically
+      },
+    };
+  }
+
+  private saveSettings(settings: PersonalizationSettings) {
+    const key = this.getStorageKey();
+    this.storage.set(key, settings);
+  }
+}

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

@@ -0,0 +1,111 @@
+<div class="account-container">
+    <div class="settings-list">
+
+        <!-- Delete all chats row -->
+        <div class="settings-row">
+            <div class="row-info">
+                <span class="row-label">Delete all chats</span>
+            </div>
+            <div class="row-action">
+                <button class="pill-btn danger" (click)="confirmDeleteAllHistory()">Delete all</button>
+            </div>
+        </div>
+
+        <!-- Export data row -->
+        <div class="settings-row">
+            <div class="row-info">
+                <span class="row-label">Export data</span>
+            </div>
+            <div class="row-action">
+                <button class="pill-btn">Export</button>
+            </div>
+        </div>
+
+        <!-- Org ID row -->
+        <div class="settings-row">
+            <div class="row-info">
+                <span class="row-label">Organization ID</span>
+                <span class="row-sublabel">Used for workspace identification</span>
+            </div>
+            <div class="row-action">
+                <code class="org-id">{{ organizationId }}</code>
+                <button mat-icon-button (click)="copyOrgId()" [matTooltip]="isCopied ? 'Copied!' : 'Copy ID'">
+                    <mat-icon>{{ isCopied ? 'check' : 'content_copy' }}</mat-icon>
+                </button>
+            </div>
+        </div>
+
+        <!-- Logout all row -->
+        <div class="settings-row">
+            <div class="row-info">
+                <span class="row-label">Global Logout</span>
+                <span class="row-sublabel">Sign out from all active devices</span>
+            </div>
+            <div class="row-action">
+                <button class="pill-btn danger" (click)="confirmLogoutAll()">Logout all</button>
+            </div>
+        </div>
+
+        <!-- Delete account row -->
+        <div class="settings-row no-border">
+            <div class="row-info">
+                <span class="row-label danger-text">Delete account</span>
+                <span class="row-sublabel">Permanently delete your profile and data</span>
+            </div>
+            <div class="row-action">
+                <button class="pill-btn danger-filled" (click)="confirmDeleteAccount()">Delete Account</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Active Sessions Section -->
+    <div class="sessions-section">
+        <h3>Active sessions</h3>
+        <div class="sessions-table-container">
+            <table class="sessions-table">
+                <thead>
+                    <tr>
+                        <th>Device</th>
+                        <th>Location</th>
+                        <th>Created</th>
+                        <th>Updated</th>
+                        <th></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    @for (session of sessions; track session.id) {
+                    <tr [class.current]="session.isCurrent">
+                        <td>
+                            <div class="device-cell">
+                                <mat-icon>{{ session.device.includes('Windows') ? 'laptop' : 'smartphone' }}</mat-icon>
+                                <div class="device-info">
+                                    <span class="device-name">{{ session.device }}</span>
+                                    @if (session.isCurrent) {
+                                    <span class="current-badge">Current</span>
+                                    }
+                                </div>
+                            </div>
+                        </td>
+                        <td>{{ session.location }}</td>
+                        <td>{{ session.created }}</td>
+                        <td>{{ session.updated }}</td>
+                        <td class="action-cell">
+                            @if (!session.isCurrent) {
+                            <button mat-icon-button [matMenuTriggerFor]="sessionMenu">
+                                <mat-icon>more_vert</mat-icon>
+                            </button>
+                            <mat-menu #sessionMenu="matMenu" xPosition="before">
+                                <button mat-menu-item (click)="confirmLogoutSession(session)">
+                                    <mat-icon>logout</mat-icon>
+                                    <span>Log out of session</span>
+                                </button>
+                            </mat-menu>
+                            }
+                        </td>
+                    </tr>
+                    }
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,218 @@
+.account-container {
+    padding: 32px 48px;
+    display: flex;
+    flex-direction: column;
+    gap: 48px;
+    animation: fadeIn 0.3s ease-out;
+}
+
+.settings-list {
+    display: flex;
+    flex-direction: column;
+    background: rgba(var(--black-rgb), 0.02);
+    border-radius: 16px;
+    border: 1px solid rgba(var(--black-rgb), 0.05);
+    overflow: hidden;
+}
+
+.settings-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px 24px;
+    border-bottom: 1px solid rgba(var(--black-rgb), 0.05);
+    transition: background 0.2s ease;
+
+    &.clickable {
+        cursor: pointer;
+
+        &:hover {
+            background: rgba(var(--black-rgb), 0.04);
+        }
+    }
+
+    &.no-border {
+        border-bottom: none;
+    }
+
+    .row-info {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+
+        .row-label {
+            font-size: 1.05rem;
+            font-weight: 500;
+            color: var(--text-color);
+        }
+
+        .row-sublabel {
+            font-size: 0.9rem;
+            color: var(--secondary-text-color);
+        }
+
+        .danger-text {
+            color: var(--warn-color);
+        }
+    }
+
+    .row-action {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+
+        .status-text {
+            font-size: 0.95rem;
+            color: var(--secondary-text-color);
+        }
+
+        .chevron {
+            color: var(--secondary-text-color);
+            font-size: 20px;
+        }
+
+        .org-id {
+            font-family: 'Space Mono', monospace;
+            padding: 4px 12px;
+            background: rgba(var(--primary-rgb), 0.05);
+            border-radius: 6px;
+            font-size: 0.9rem;
+            color: var(--primary-color);
+        }
+    }
+}
+
+.pill-btn {
+    background: none;
+    border: 1.5px solid rgba(var(--black-rgb), 0.15);
+    border-radius: 100px;
+    padding: 8px 24px;
+    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);
+    }
+
+    &.danger {
+        color: var(--warn-color);
+        border-color: rgba(var(--warn-rgb), 0.3);
+
+        &:hover {
+            background: rgba(var(--warn-rgb), 0.05);
+            border-color: var(--warn-color);
+        }
+    }
+
+    &.danger-filled {
+        background: transparent;
+        color: var(--text-color);
+        border: var(--red);
+
+        &:hover {
+            background: var(--red);
+            box-shadow: 0 4px 12px rgba(var(--warn-rgb), 0.2);
+        }
+    }
+}
+
+.sessions-section {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+
+    h3 {
+        margin: 0;
+        font-size: 1.25rem;
+        font-weight: 700;
+        color: var(--text-color);
+    }
+}
+
+.sessions-table-container {
+    border: 1px solid rgba(var(--black-rgb), 0.05);
+    border-radius: 16px;
+    background: rgba(var(--black-rgb), 0.01);
+    overflow: hidden;
+}
+
+.sessions-table {
+    width: 100%;
+    border-collapse: collapse;
+    text-align: left;
+
+    th {
+        padding: 16px 20px;
+        background: rgba(var(--black-rgb), 0.03);
+        font-size: 0.8rem;
+        font-weight: 700;
+        color: var(--secondary-text-color);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+
+    td {
+        padding: 20px;
+        border-top: 1px solid rgba(var(--black-rgb), 0.05);
+        font-size: 0.95rem;
+        color: var(--text-color);
+    }
+
+    tr.current {
+        background: rgba(var(--primary-rgb), 0.03);
+    }
+
+    .action-cell {
+        text-align: right;
+        padding-right: 12px;
+        color: var(--secondary-text-color);
+    }
+}
+
+.device-cell {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+
+    mat-icon {
+        font-size: 24px;
+        color: var(--secondary-text-color);
+    }
+
+    .device-info {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+
+        .device-name {
+            font-weight: 600;
+        }
+
+        .current-badge {
+            font-size: 0.7rem;
+            color: var(--primary-color);
+            background: rgba(var(--primary-rgb), 0.1);
+            padding: 2px 8px;
+            border-radius: 4px;
+            width: fit-content;
+            font-weight: 700;
+            text-transform: uppercase;
+        }
+    }
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}

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

@@ -0,0 +1,121 @@
+import { Component, Input, Output, EventEmitter, inject, ChangeDetectorRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatMenuModule } from '@angular/material/menu';
+import { DialogService } from '../../../../shared/dialog/dialog.service';
+import { AuthService } from '../../../../core/auth/auth.service';
+
+export interface ActiveSession {
+    id: string;
+    device: string;
+    location: string;
+    created: string;
+    updated: string;
+    isCurrent?: boolean;
+}
+
+@Component({
+    selector: 'app-account-section',
+    standalone: true,
+    imports: [CommonModule, MatIconModule, MatButtonModule, MatTooltipModule, MatMenuModule],
+    templateUrl: './account-section.component.html',
+    styleUrls: ['./account-section.component.scss']
+})
+export class AccountSectionComponent {
+    private dialogService = inject(DialogService);
+    private authService = inject(AuthService);
+    private cd = inject(ChangeDetectorRef);
+
+    @Input() organizationId: string = '';
+    public isCopied = false;
+
+    ngOnInit() {
+        if (!this.organizationId) {
+            this.organizationId = this.authService.getOrganizationId() || '';
+        }
+    }
+
+    @Output() onDeleteAllHistory = new EventEmitter<void>();
+    @Output() onLogoutAll = new EventEmitter<void>();
+    @Output() onLogoutSession = new EventEmitter<string>();
+    @Output() onDeleteAccount = new EventEmitter<void>();
+
+    public sessions: ActiveSession[] = [
+        {
+            id: 'session-1',
+            device: 'Chrome (Windows)',
+            location: 'Kathmandu, Bagmati Province, NP',
+            created: 'Jan 9, 2026, 9:21 AM',
+            updated: 'Jan 9, 2026, 9:21 AM',
+            isCurrent: true
+        }
+    ];
+
+    copyOrgId() {
+        const orgId = this.authService.getOrganizationId();
+        if (orgId) {
+            navigator.clipboard.writeText(orgId);
+            this.isCopied = true;
+            this.cd.detectChanges();
+
+            setTimeout(() => {
+                this.isCopied = false;
+                this.cd.detectChanges();
+            }, 800);
+        }
+    }
+
+    confirmLogoutAll() {
+        this.dialogService.open({
+            title: 'Log out of all devices',
+            message: 'Are you sure you want to log out of all active devices? You will be signed out everywhere except here.',
+            confirmText: 'Log out all',
+            cancelText: 'Cancel',
+            confirmButtonColor: 'warn',
+            icon: 'logout'
+        }).subscribe(confirmed => {
+            if (confirmed) this.onLogoutAll.emit();
+        });
+    }
+
+    confirmLogoutSession(session: ActiveSession) {
+        this.dialogService.open({
+            title: 'Log out of session',
+            message: `Are you sure you want to log out from ${session.device} at ${session.location}?`,
+            confirmText: 'Log out',
+            cancelText: 'Cancel',
+            confirmButtonColor: 'warn',
+            icon: 'logout'
+        }).subscribe(confirmed => {
+            if (confirmed) this.onLogoutSession.emit(session.id);
+        });
+    }
+
+    confirmDeleteAllHistory() {
+        this.dialogService.open({
+            title: 'Clear All History',
+            message: 'Are you sure you want to delete all chat history? This action cannot be undone.',
+            confirmText: 'Clear All',
+            cancelText: 'Cancel',
+            confirmButtonColor: 'warn',
+            icon: 'delete_sweep'
+        }).subscribe(confirmed => {
+            if (confirmed) this.onDeleteAllHistory.emit();
+        });
+    }
+
+    confirmDeleteAccount() {
+        this.dialogService.open({
+            title: 'Delete Your Account',
+            message: 'This will permanently delete your account and all associated data. This action is irreversible. Are you absolutely sure?',
+            confirmText: 'Delete Account',
+            cancelText: 'Cancel',
+            confirmButtonColor: 'warn',
+            icon: 'person_remove'
+        }).subscribe(confirmed => {
+            if (confirmed) this.onDeleteAccount.emit();
+        });
+    }
+}

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

@@ -0,0 +1,46 @@
+<div class="instructions-container">
+    <header class="pane-header">
+        <h1>Custom Instructions</h1>
+        <p>Tell us more about yourself and how you want the assistant to respond.</p>
+    </header>
+
+    <div class="settings-list">
+        <!-- Enable Toggle Row -->
+        <div class="settings-row">
+            <div class="row-info">
+                <span class="row-label">Enable Custom Instructions</span>
+                <span class="row-sublabel">Apply these preferences to all new conversations</span>
+            </div>
+            <div class="row-action">
+                <mat-slide-toggle [(ngModel)]="settings.customInstructions.enabled" color="primary"></mat-slide-toggle>
+            </div>
+        </div>
+    </div>
+
+    <div class="instruction-fields" [class.disabled]="!settings.customInstructions.enabled">
+        <div class="field-item">
+            <div class="field-header">
+                <label>What should the assistant know about you?</label>
+                <mat-icon
+                    matTooltip="e.g. I prefer code examples in TypeScript, I'm a senior dev...">info_outline</mat-icon>
+            </div>
+            <mat-form-field appearance="outline" class="full-width no-label" subscriptSizing="dynamic">
+                <textarea matInput rows="4" [(ngModel)]="settings.customInstructions.aboutUser"
+                    placeholder="Provide some context about yourself..."
+                    [disabled]="!settings.customInstructions.enabled"></textarea>
+            </mat-form-field>
+        </div>
+
+        <div class="field-item">
+            <div class="field-header">
+                <label>How should the assistant respond?</label>
+                <mat-icon matTooltip="e.g. Be concise, use bullet points, avoid jargon...">info_outline</mat-icon>
+            </div>
+            <mat-form-field appearance="outline" class="full-width no-label" subscriptSizing="dynamic">
+                <textarea matInput rows="4" [(ngModel)]="settings.customInstructions.responseStyle"
+                    placeholder="Describe the response style you'd like..."
+                    [disabled]="!settings.customInstructions.enabled"></textarea>
+            </mat-form-field>
+        </div>
+    </div>
+</div>