@aakash58/chatbot 1.1.19 → 1.1.21

package/projects/doohbot/src/lib/shared/dialog/dialog.component.scss

@@ -0,0 +1,100 @@
+.dialog-container {
+  padding: 0;
+  min-width: 320px;
+  max-width: 500px;
+
+  .dialog-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 24px 24px 16px;
+    margin-bottom: 0;
+
+    .dialog-icon {
+      font-size: 32px;
+      width: 32px;
+      height: 32px;
+      color: var(--primary-color);
+
+      &.warn-icon {
+        color: var(--red);
+      }
+    }
+
+    h2 {
+      margin: 0;
+      font-size: 20px;
+      font-weight: 600;
+      color: var(--secondary-text-color);
+    }
+  }
+
+  mat-dialog-content {
+    padding: 0 24px 24px;
+    margin: 0;
+
+    .dialog-message {
+      margin: 0;
+      font-size: 14px;
+      line-height: 1.6;
+      color: var(--text-color);
+    }
+  }
+
+  mat-dialog-actions {
+    padding: 12px 24px 24px;
+    margin: 0;
+    gap: 12px;
+
+    .cancel-btn {
+      color: var(--secondary-text-color, var(--grey));
+      transition: all 0.2s ease;
+
+      &:hover {
+        background-color: var(--hover-bg);
+      }
+    }
+
+    .confirm-btn {
+      font-weight: 500;
+      transition: all 0.2s ease;
+
+      &.warn-btn {
+        background-color: var(--red);
+        color: var(--white);
+
+        &:hover {
+          background-color: var(--red);
+        }
+      }
+
+      &.primary-btn {
+        background-color: var(--primary-color);
+        color: var(--white);
+
+        &:hover {
+          background-color: var(--primary-color);
+        }
+      }
+
+      &.accent-btn {
+        background-color: var(--light-red);
+        color: var(--white);
+
+        &:hover {
+          background-color: var(--light-red);
+        }
+      }
+    }
+  }
+}
+
+//! moved to material-override.scss
+
+// ::ng-deep {
+//   .cdk-overlay-pane {
+//     .mat-mdc-dialog-container {
+//       --mdc-dialog-container-color: var(--background-color);
+//     }
+//   }
+// }

package/projects/doohbot/src/lib/shared/dialog/dialog.component.ts

@@ -0,0 +1,42 @@
+import { Component, Inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+
+export interface DialogData {
+  title: string;
+  message: string;
+  confirmText?: string;
+  cancelText?: string;
+  confirmButtonColor?: 'primary' | 'accent' | 'warn';
+  icon?: string;
+}
+
+@Component({
+  selector: 'app-dialog',
+  standalone: true,
+  imports: [CommonModule, MatDialogModule, MatButtonModule, MatIconModule],
+  templateUrl: './dialog.component.html',
+  styleUrls: ['./dialog.component.scss'],
+})
+export class DialogComponent {
+  constructor(
+    public dialogRef: MatDialogRef<DialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: DialogData,
+  ) {
+    // Set defaults
+    this.data.confirmText = this.data.confirmText || 'Confirm';
+    this.data.cancelText = this.data.cancelText || 'Cancel';
+    this.data.confirmButtonColor = this.data.confirmButtonColor || 'warn';
+    this.data.icon = this.data.icon || 'warning';
+  }
+
+  onCancel(): void {
+    this.dialogRef.close(false);
+  }
+
+  onConfirm(): void {
+    this.dialogRef.close(true);
+  }
+}

package/projects/doohbot/src/lib/shared/dialog/dialog.service.ts

@@ -0,0 +1,62 @@
+import { Injectable } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { Observable } from 'rxjs';
+import { DialogComponent, DialogData } from './dialog.component';
+import { InputDialogComponent, InputDialogData } from '../input-dialog/input-dialog.component';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DialogService {
+  constructor(private dialog: MatDialog) { }
+
+  /**
+   * Opens a confirmation dialog with customizable options
+   * @param data Configuration for the dialog
+   * @returns Observable that emits true if confirmed, false if cancelled
+   */
+  open(data: DialogData): Observable<boolean> {
+    const dialogRef = this.dialog.open(DialogComponent, {
+      width: '400px',
+      data: data,
+      disableClose: false,
+      autoFocus: true,
+      restoreFocus: true,
+    });
+
+    return dialogRef.afterClosed();
+  }
+
+  /**
+   * Convenience method for delete confirmation dialogs
+   * @param itemName Name of the item being deleted
+   * @returns Observable that emits true if confirmed, false if cancelled
+   */
+  confirmDelete(itemName: string = 'this item'): Observable<boolean> {
+    return this.open({
+      title: 'Confirm Delete',
+      message: `Are you sure you want to delete ${itemName}? This action cannot be undone.`,
+      confirmText: 'Delete',
+      cancelText: 'Cancel',
+      confirmButtonColor: 'warn',
+      icon: 'delete_forever',
+    });
+  }
+
+  /**
+   * Opens a dialog with an input field
+   * @param data Configuration for the input dialog
+   * @returns Observable that emits the input value if confirmed, null if cancelled
+   */
+  openInput(data: InputDialogData): Observable<string | null> {
+    const dialogRef = this.dialog.open(InputDialogComponent, {
+      width: '400px',
+      data: data,
+      disableClose: false,
+      autoFocus: true,
+      restoreFocus: true,
+    });
+
+    return dialogRef.afterClosed();
+  }
+}

package/projects/doohbot/src/lib/shared/dialog/dialog.utils.ts

@@ -0,0 +1,102 @@
+import { DialogService } from './dialog.service';
+import { Observable } from 'rxjs';
+
+/**
+ * Utility class for common dialog operations
+ * Provides reusable dialog configurations for consistency across the application
+ */
+export class DialogUtils {
+    /**
+     * Show a logout confirmation dialog
+     * @param dialogService The DialogService instance
+     * @returns Observable that emits true if confirmed, false if cancelled
+     */
+    static confirmLogout(dialogService: DialogService): Observable<boolean> {
+        return dialogService.open({
+            title: 'Logout',
+            message: 'Are you sure you want to logout?',
+            confirmText: 'Logout',
+            cancelText: 'Cancel',
+            icon: 'logout',
+            confirmButtonColor: 'warn',
+        });
+    }
+
+    /**
+     * Show a reset confirmation dialog
+     * @param dialogService The DialogService instance
+     * @param itemName Optional name of what is being reset (default: 'preferences')
+     * @returns Observable that emits true if confirmed, false if cancelled
+     */
+    static confirmReset(
+        dialogService: DialogService,
+        itemName: string = 'preferences'
+    ): Observable<boolean> {
+        return dialogService.open({
+            title: 'Reset to Defaults',
+            message: `Are you sure you want to reset ${itemName} to default settings? This action cannot be undone.`,
+            confirmText: 'Reset',
+            cancelText: 'Cancel',
+            icon: 'restart_alt',
+            confirmButtonColor: 'warn',
+        });
+    }
+
+    /**
+     * Show a delete confirmation dialog
+     * @param dialogService The DialogService instance
+     * @param itemName Name of the item being deleted
+     * @returns Observable that emits true if confirmed, false if cancelled
+     */
+    static confirmDelete(
+        dialogService: DialogService,
+        itemName: string = 'this item'
+    ): Observable<boolean> {
+        return dialogService.open({
+            title: 'Confirm Delete',
+            message: `Are you sure you want to delete ${itemName}? This action cannot be undone.`,
+            confirmText: 'Delete',
+            cancelText: 'Cancel',
+            confirmButtonColor: 'warn',
+            icon: 'delete_forever',
+        });
+    }
+
+    /**
+     * Show a clear all confirmation dialog
+     * @param dialogService The DialogService instance
+     * @param itemName Name of what is being cleared (e.g., 'chat history', 'all sessions')
+     * @returns Observable that emits true if confirmed, false if cancelled
+     */
+    static confirmClearAll(
+        dialogService: DialogService,
+        itemName: string = 'all items'
+    ): Observable<boolean> {
+        return dialogService.open({
+            title: 'Clear All',
+            message: `Are you sure you want to clear ${itemName}? This action cannot be undone.`,
+            confirmText: 'Clear All',
+            cancelText: 'Cancel',
+            confirmButtonColor: 'warn',
+            icon: 'delete_sweep',
+        });
+    }
+
+    /**
+     * Show a discard changes confirmation dialog
+     * @param dialogService The DialogService instance
+     * @returns Observable that emits true if confirmed, false if cancelled
+     */
+    static confirmDiscardChanges(dialogService: DialogService): Observable<boolean> {
+        return dialogService.open({
+            title: 'Discard Changes',
+            message: 'You have unsaved changes. Are you sure you want to discard them?',
+            confirmText: 'Discard',
+            cancelText: 'Keep Editing',
+            confirmButtonColor: 'warn',
+            icon: 'warning',
+        });
+    }
+}
+
+

package/projects/doohbot/src/lib/shared/dropdown-menu/dropdown-menu.component.html

@@ -0,0 +1,30 @@
+<details class="dropdown-menu" #details>
+  <summary role="button" class="dropdown-trigger">
+    <ng-content select="[trigger]"></ng-content>
+  </summary>
+  <ul class="dropdown-list">
+    <ng-content></ng-content>
+  </ul>
+</details>
+
+<!-- ussage example:
+<app-dropdown-menu>
+  <span trigger>☰ Menu</span>
+
+  <app-menu-item href="/profile" (selected)="doSomething('profile')">
+    My Profile
+  </app-menu-item>
+  
+  <app-menu-item href="/settings" (selected)="doSomething('settings')">
+    Settings
+  </app-menu-item>
+  
+  <app-menu-item href="#" (selected)="logout()">
+    Logout
+  </app-menu-item>
+</app-dropdown-menu> -->
+
+<!-- 
+  Note: The above usage example is commented out to avoid rendering issues.
+  It demonstrates how to use the DropdownMenu component with MenuItem components as options.
+-->

package/projects/doohbot/src/lib/shared/dropdown-menu/dropdown-menu.component.scss

@@ -0,0 +1,53 @@
+.dropdown-menu {
+  position: relative;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+}
+
+.dropdown-menu summary {
+  list-style: none;
+  cursor: pointer;
+  outline: none;
+}
+
+.dropdown-menu summary::-webkit-details-marker {
+  display: none;
+}
+
+.dropdown-list {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin: 8px 0 0 0;
+  padding: 8px 0;
+  width: 180px;
+  background: var(--background-color);
+  border-radius: 6px;
+  box-shadow: var(--border-shadow-color);
+  z-index: 1000;
+  list-style: none;
+}
+
+.dropdown-list::before {
+  content: '';
+  position: absolute;
+  top: -6px;
+  left: 16px;
+  width: 0;
+  height: 0;
+  border: 6px solid transparent;
+  border-bottom-color: var(--background-color);
+}
+
+.dropdown-list li a {
+  display: block;
+  padding: 8px 16px;
+  color: var(--primary-color);
+  text-decoration: none;
+}
+
+.dropdown-list li a:hover {
+  background: var(--red);
+  color: var(--secondary-color);
+}

package/projects/doohbot/src/lib/shared/dropdown-menu/dropdown-menu.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DropdownMenu } from './dropdown-menu.component';
+
+describe('DropdownMenu', () => {
+  let component: DropdownMenu;
+  let fixture: ComponentFixture<DropdownMenu>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DropdownMenu],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DropdownMenu);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/doohbot/src/lib/shared/dropdown-menu/dropdown-menu.component.ts

@@ -0,0 +1,35 @@
+import {
+  AfterContentInit,
+  Component,
+  ContentChildren,
+  ElementRef,
+  QueryList,
+  ViewChild,
+} from '@angular/core';
+import { MenuItem } from '../menu-item/menu-item.component';
+
+@Component({
+  selector: 'app-dropdown-menu',
+  standalone: true,
+  imports: [],
+  templateUrl: './dropdown-menu.component.html',
+  styleUrl: './dropdown-menu.component.scss',
+})
+export class DropdownMenu implements AfterContentInit {
+  @ViewChild('details') detailsRef!: ElementRef<HTMLDetailsElement>;
+
+  @ContentChildren(MenuItem) menuItems!: QueryList<MenuItem>;
+
+  ngAfterContentInit() {
+    // Subscribe to all menu item selections
+    this.menuItems.forEach((item) => {
+      item.selected.subscribe(() => {
+        this.close();
+      });
+    });
+  }
+
+  close(): void {
+    this.detailsRef.nativeElement.open = false;
+  }
+}

package/projects/doohbot/src/lib/shared/input-dialog/input-dialog.component.html

@@ -0,0 +1,16 @@
+<div class="dialog-container">
+    <h2 mat-dialog-title>{{ data.title }}</h2>
+    <mat-dialog-content>
+        <p class="dialog-message">{{ data.message }}</p>
+        <div class="input-group">
+            <input type="text" class="dialog-input" [(ngModel)]="value" [placeholder]="data.placeholder"
+                (keyup.enter)="onConfirm()" focus="true" />
+        </div>
+    </mat-dialog-content>
+    <mat-dialog-actions align="end">
+        <button mat-button class="cancel-btn" (click)="onCancel()">{{ data.cancelText }}</button>
+        <button mat-flat-button color="primary" class="confirm-btn" [disabled]="!value.trim()" (click)="onConfirm()">
+            {{ data.confirmText }}
+        </button>
+    </mat-dialog-actions>
+</div>

package/projects/doohbot/src/lib/shared/input-dialog/input-dialog.component.scss

@@ -0,0 +1,45 @@
+.dialog-container {
+    padding: 8px;
+}
+
+.dialog-message {
+    color: var(--secondary-text-color);
+    margin-bottom: 20px;
+    font-size: 14px;
+}
+
+.input-group {
+    margin-bottom: 20px;
+}
+
+.dialog-input {
+    width: 100%;
+    padding: 12px 16px;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    background: var(--input-bg);
+    color: var(--text-color);
+    font-size: 14px;
+    font-family: inherit;
+    transition: all 0.2s;
+    box-sizing: border-box;
+
+    &:focus {
+        outline: none;
+        border-color: var(--primary-color);
+        box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
+        background: #fff;
+    }
+}
+
+
+.cancel-btn {
+    border-radius: 8px;
+    font-weight: 500;
+}
+
+.confirm-btn {
+    border-radius: 8px;
+    font-weight: 500;
+    margin-left: 8px;
+}

package/projects/doohbot/src/lib/shared/input-dialog/input-dialog.component.ts

@@ -0,0 +1,46 @@
+import { Component, Inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { FormsModule } from '@angular/forms';
+
+export interface InputDialogData {
+    title: string;
+    message: string;
+    initialValue: string;
+    placeholder?: string;
+    confirmText?: string;
+    cancelText?: string;
+}
+
+@Component({
+    selector: 'app-input-dialog',
+    standalone: true,
+    imports: [CommonModule, MatDialogModule, MatButtonModule, FormsModule],
+    templateUrl: './input-dialog.component.html',
+    styleUrls: ['./input-dialog.component.scss'],
+})
+export class InputDialogComponent {
+    public value: string;
+
+    constructor(
+        public dialogRef: MatDialogRef<InputDialogComponent>,
+        @Inject(MAT_DIALOG_DATA) public data: InputDialogData,
+    ) {
+        this.value = data.initialValue;
+        // Set defaults
+        this.data.confirmText = this.data.confirmText || 'Save';
+        this.data.cancelText = this.data.cancelText || 'Cancel';
+        this.data.placeholder = this.data.placeholder || 'Enter value...';
+    }
+
+    onCancel(): void {
+        this.dialogRef.close(null);
+    }
+
+    onConfirm(): void {
+        if (this.value && this.value.trim()) {
+            this.dialogRef.close(this.value.trim());
+        }
+    }
+}

package/projects/doohbot/src/lib/shared/menu-item/menu-item.component.html

@@ -0,0 +1,5 @@
+<li>
+  <a [href]="href" (click)="onClick($event)">
+    <ng-content></ng-content>
+  </a>
+</li>

package/projects/doohbot/src/lib/shared/menu-item/menu-item.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MenuItem } from './menu-item.component';
+
+describe('MenuItem', () => {
+  let component: MenuItem;
+  let fixture: ComponentFixture<MenuItem>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MenuItem],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MenuItem);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/doohbot/src/lib/shared/menu-item/menu-item.component.ts

@@ -0,0 +1,20 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-menu-item',
+  standalone: true,
+  imports: [],
+  templateUrl: './menu-item.component.html',
+  styleUrl: './menu-item.component.scss',
+})
+export class MenuItem {
+  @Input() href = '#';
+  @Output() selected = new EventEmitter<void>();
+
+  onClick(event: Event): void {
+    // Optional: prevent default if used for actions, not navigation
+    // event.preventDefault();
+
+    this.selected.emit();
+  }
+}

package/projects/doohbot/src/lib/shared/pipes/simple-markdown.pipe.ts

@@ -0,0 +1,19 @@
+import { Pipe, PipeTransform, inject } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { MarkdownService } from '../../core/services/markdown.service';
+
+@Pipe({
+  name: 'Markdown',
+  standalone: true,
+  pure: true,
+})
+export class MarkdownPipe implements PipeTransform {
+  private markdownService = inject(MarkdownService);
+  private sanitizer = inject(DomSanitizer);
+
+  transform(value: string | undefined | null): SafeHtml {
+    if (!value) return '';
+    const html = this.markdownService.convert(value);
+    return this.sanitizer.bypassSecurityTrustHtml(html);
+  }
+}

package/projects/doohbot/src/lib/shared/popout/popout.html

@@ -0,0 +1 @@
+<p>popout works!</p>

package/projects/doohbot/src/lib/shared/popout/popout.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Popout } from './popout';
+
+describe('Popout', () => {
+  let component: Popout;
+  let fixture: ComponentFixture<Popout>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Popout]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(Popout);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/doohbot/src/lib/shared/popout/popout.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'lib-popout',
+  imports: [],
+  templateUrl: './popout.html',
+  styleUrl: './popout.css',
+})
+export class Popout {
+
+}

package/projects/doohbot/src/lib/shared/snackbar/snackbar.component.html

@@ -0,0 +1,7 @@
+<div class="snackbar-message" [ngClass]="'type-' + type">
+  <div class="error-content">
+    <mat-icon class="alert-icon">{{ icon }}</mat-icon>
+    <span class="error-text">{{ message }}</span>
+  </div>
+  <mat-icon class="close-icon" (click)="close()">close</mat-icon>
+</div>