@aakash58/chatbot 1.1.21 → 1.1.24

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

@@ -1,125 +0,0 @@
-.snackbar-message {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 12px;
-  padding: 10px 16px;
-  border-radius: 6px;
-  color: var(--white);
-  font-size: 12px;
-  box-shadow: var(--border-shadow-color);
-  font-family: var(--font-family);
-  width: 100%;
-  max-width: 360px;
-  box-sizing: border-box;
-  background-color: var(--background-color); // Fallback
-  border: 1px solid transparent;
-
-  &.type-error {
-    background-color: color-mix(in srgb, var(--red), var(--white) 60%);
-    border-color: var(--red);
-
-    .alert-icon {
-      color: var(--red);
-    }
-
-    .close-icon:hover {
-      background-color: var(--red);
-    }
-  }
-
-  &.type-success {
-    background-color: color-mix(in srgb, var(--green), var(--white) 60%);
-    border-color: var(--green);
-
-    .alert-icon {
-      color: var(--green);
-    }
-
-    .close-icon:hover {
-      background-color: var(--green);
-    }
-  }
-
-  &.type-warn {
-    background-color: color-mix(in srgb, var(--orange), var(--white) 60%);
-    border-color: var(--orange);
-
-    .alert-icon {
-      color: var(--orange);
-    }
-
-    .close-icon:hover {
-      background-color: var(--orange);
-    }
-  }
-
-  &.type-info {
-    // using primary color or a blue
-    background-color: color-mix(in srgb, var(--blue), var(--white) 60%);
-    border-color: var(--blue);
-
-    .alert-icon {
-      color: var(--blue);
-    }
-
-    .close-icon:hover {
-      background-color: var(--blue);
-    }
-  }
-}
-
-.error-content {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  min-width: 0;
-  flex: 1;
-}
-
-.alert-icon {
-  font-size: 18px;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-}
-
-.error-text {
-  flex: 1;
-  text-align: left;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  color: var(--black); // Ensure text is visible on light bg
-}
-
-.close-icon {
-  color: var(--black);
-  cursor: pointer;
-  font-size: 18px;
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  opacity: 0.7;
-  flex-shrink: 0;
-}
-
-.close-icon:hover {
-  opacity: 1;
-  background-color: var(--red);
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(-5px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}

package/projects/doohbot/src/lib/shared/snackbar/snackbar.component.spec.ts

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

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

@@ -1,44 +0,0 @@
-import { Component, inject, OnInit } from '@angular/core';
-import { MatIconModule } from '@angular/material/icon';
-import { CommonModule } from '@angular/common';
-import { MAT_SNACK_BAR_DATA, MatSnackBarRef } from '@angular/material/snack-bar';
-import { SnackBarError } from '../../core/types/snackbar-error.type';
-
-@Component({
-  selector: 'app-snackbar',
-  templateUrl: './snackbar.component.html',
-  styleUrls: ['./snackbar.component.scss'],
-  standalone: true,
-  imports: [MatIconModule, CommonModule],
-})
-export class SnackBar implements OnInit {
-  private snackBarRef = inject(MatSnackBarRef);
-  private data = inject(MAT_SNACK_BAR_DATA);
-
-  public message: string | null = null;
-  public type: SnackBarError = 'error';
-
-  ngOnInit() {
-    this.message = this.data.message;
-    this.type = this.data.type || 'error';
-  }
-
-  close() {
-    this.snackBarRef.dismiss();
-  }
-
-  get icon(): string {
-    switch (this.type) {
-      case 'success':
-        return 'check_circle';
-      case 'error':
-        return 'error';
-      case 'warn':
-        return 'warning';
-      case 'info':
-        return 'info';
-      default:
-        return 'info';
-    }
-  }
-}

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

@@ -1,54 +0,0 @@
-import { inject, Injectable } from '@angular/core';
-import { MatSnackBar } from '@angular/material/snack-bar';
-import { SnackBarError } from '../../core/types/snackbar-error.type';
-import { SnackBar } from './snackbar.component';
-import { SnackbarUtils } from './snackbar.utils';
-
-export interface SnackbarConfig {
-  message: string;
-  duration?: number;
-  type: SnackBarError;
-}
-
-@Injectable({
-  providedIn: 'root',
-})
-export class SnackbarService {
-  private snackBar = inject(MatSnackBar);
-
-  constructor() {
-    SnackbarUtils.init(this);
-  }
-
-  // Generic show method
-  private show(message: string, duration: number, type: SnackBarError) {
-    this.snackBar.openFromComponent(SnackBar, {
-      duration: duration,
-      data: { message, type },
-      horizontalPosition: 'end',
-      verticalPosition: 'bottom',
-      panelClass: [`snackbar-${type}`]
-    });
-  }
-
-  // Convenience methods
-  success(message: string, duration: number = 3000) {
-    this.show(message, duration, 'success');
-  }
-
-  warn(message: string, duration: number = 5000) {
-    this.show(message, duration, 'warn');
-  }
-
-  error(message: string, duration: number = 5000) {
-    this.show(message, duration, 'error');
-  }
-
-  info(message: string, duration: number = 4000) {
-    this.show(message, duration, 'info');
-  }
-
-  clear() {
-    this.snackBar.dismiss();
-  }
-}

package/projects/doohbot/src/lib/styles/_theme.scss

@@ -1,132 +0,0 @@
-// Include theming for Angular Material with `mat.theme()`.
-// This Sass mixin will define CSS variables that are used for styling Angular Material
-// components according to the Material 3 design spec.
-// Learn more about theming and how to use it for your application's
-// custom components at https://material.angular.dev/guide/theming
-@use '@angular/material' as mat;
-
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
-@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
-
-// Light theme
-// Light theme
-$light-primary: mat.define-palette(mat.$deep-purple-palette);
-$light-accent: mat.define-palette(mat.$orange-palette);
-$light-theme: mat.define-light-theme(
-  (
-    color: (
-      primary: $light-primary,
-      accent: $light-accent,
-    ),
-    typography: mat.define-typography-config(
-        $font-family: 'Roboto',
-      ),
-  )
-);
-
-// Dark theme
-$dark-primary: mat.define-palette(mat.$orange-palette);
-$dark-accent: mat.define-palette(mat.$deep-purple-palette);
-$dark-theme: mat.define-dark-theme(
-  (
-    color: (
-      primary: $dark-primary,
-      accent: $dark-accent,
-    ),
-    typography: mat.define-typography-config(
-        $font-family: 'Roboto',
-      ),
-  )
-);
-
-:root {
-  // Default: system preference
-  @include mat.all-component-themes($light-theme);
-
-  // ---------- Global Theme Variables  ----------
-  --font-family: 'Roboto', Arial, sans-serif;
-  --primary-color: #2800ff;
-  --primary-color-rgb: 40, 0, 255;
-  --secondary-color: #08dacf;
-  --background-color: #f8f9fa;
-  --chat-input-color: var(--background-color);
-  --text-alt-color: #000000;
-  --button-color: #000000;
-  --text-color: #333;
-  --secondary-text-color: #858585;
-  --hint-text-color: #858585;
-  --user-message-color: var(--primary-color);
-  --bot-message-color: #e9ecef;
-  --user-text-color: #ffffff;
-  --bot-text-color: #333;
-  --border-color: #ccc;
-  --border-color-rgb: 204, 204, 204;
-  --border-shadow-color: 0 4px 16px rgba(0, 0, 0, 0.25);
-  --border-top-color: #dddddd00;
-  --typing-indicator-color: #999;
-  --avatar-filter: invert(48%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(96%) contrast(91%);
-
-  --white: #ffffff;
-  --white-rgb: 255, 255, 255;
-  --black: #000000;
-  --black-rgb: 0, 0, 0;
-  --grey: #6c757d;
-  --red: #ff0000;
-  --light-red: #f28b8b;
-  --green: #4caf50;
-  --orange: #ff9800;
-  --blue: #2196f3;
-  --mat-menu-bg: var(--primary-color);
-
-  // Global overrides for Material components
-  // Global overrides for Material components
-  // @include mat.theme-overrides((button-container-shape: 5px,
-  //     dialog-container-shape: 12px,
-  //     menu-container-shape: 5px,
-  //     card-container-shape: 12px,
-  //     form-field-container-shape: 5px,
-  //
-  //     // Bridge: Link Material roles to our custom variables
-  //     primary: var(--primary-color),
-  //     on-primary: var(--user-text-color),
-  //     surface: var(--background-color),
-  //     on-surface: var(--text-color),
-  //     outline: var(--border-color),
-  //   ));
-}
-
-// ---------- Theme classes (apply to html or body) ----------
-.light-theme {
-  @include mat.all-component-themes($light-theme);
-  // Uses defaults from :root
-}
-
-.dark-theme {
-  @include mat.all-component-themes($dark-theme);
-
-  // Overrides for Dark Mode
-  --background-color: #1a1717;
-  --chat-input-color: var(--background-color);
-  --text-alt-color: #ffffff;
-  --button-color: #ffffff;
-  --text-color: #f5f5f5;
-  --secondary-text-color: #a1a1a1;
-  --hint-text-color: #a1a1a1;
-  --user-message-color: var(--primary-color);
-  --bot-message-color: #333;
-  --user-text-color: #fff;
-  --bot-text-color: #fff;
-  --border-color: #444;
-  --border-color-rgb: 68, 68, 68;
-  --border-shadow-color: 0 4px 16px rgba(0, 0, 0, 0.75);
-  --border-top-color: #44444400;
-  --typing-indicator-color: #bbb;
-  --avatar-filter: invert(100%) brightness(100%);
-  --grey: #9ca3af;
-  --mat-menu-bg: var(--primary-color);
-
-  // Potential semantic adjustments for dark mode
-  --green: #81c784;
-  --orange: #ffb74d;
-  --blue: #64b5f6;
-}

package/projects/doohbot/src/lib/styles/material-override.scss

@@ -1,302 +0,0 @@
-@use '@angular/material' as mat;
-
-// ================================
-//      Manual CSS Overrides
-// ================================
-
-// ================================
-//      Custom Snackbar Overrides
-// ================================
-
-.mat-mdc-snack-bar-container {
-  &.mdc-snackbar {
-    background: transparent !important;
-    box-shadow: none !important;
-  }
-
-  .mdc-snackbar__surface {
-    background: transparent !important;
-    box-shadow: none !important;
-    padding: 0 !important;
-    min-width: 0 !important;
-  }
-
-  .mdc-snackbar__label {
-    padding: 0 !important;
-    width: 100%;
-  }
-}
-
-// ==========================================
-//      Global Material Button Overrides
-// ==========================================
-
-.mat-mdc-button-base {
-  transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1),
-    box-shadow 0.2s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
-
-  &:hover {
-    transform: translateY(-1px);
-  }
-
-  &:active {
-    transform: translateY(0);
-  }
-}
-
-// Raised and Flat variant elevation enhancements
-.mat-mdc-raised-button,
-.mat-mdc-unelevated-button {
-  &:hover:not(:disabled) {
-    box-shadow: 0 4px 12px rgba(var(--black-rgb), 0.15) !important;
-  }
-}
-
-// Icon button specific interaction
-.mat-mdc-icon-button {
-  transition: transform 0.2s ease !important;
-
-  &:hover {
-    transform: scale(1.1);
-  }
-
-  &:active {
-    transform: scale(0.95);
-  }
-}
-
-// Consistency for all variants
-.mdc-button,
-.mat-mdc-button,
-.mat-mdc-raised-button,
-.mat-mdc-unelevated-button,
-.mat-mdc-stroked-button {
-  border-radius: var(--button-container-shape, 5px) !important;
-
-  // Link state layers to theme
-  .mat-ripple {
-    opacity: 0.1 !important;
-  }
-}
-
-// ==========================================
-//      Shared Component Overrides
-// ==========================================
-
-// Global Dialog Styling
-.mat-mdc-dialog-container {
-  border-radius: 12px !important;
-  --mdc-dialog-container-color: var(--background-color) !important;
-
-  .mdc-dialog__surface {
-    border-radius: 12px !important;
-    overflow: hidden;
-  }
-}
-
-// Global Select & Dropdown Styling
-.mat-mdc-select-panel {
-  border-radius: 12px !important;
-  padding: 8px 0 !important;
-  box-shadow: 0 8px 24px rgba(var(--black-rgb), 0.12) !important;
-  border: 1px solid rgba(var(--black-rgb), 0.05) !important;
-
-  // Hide scrollbar for cleaner look
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  .mat-mdc-option {
-    min-height: 44px !important;
-
-    &.mdc-list-item--selected:not(.mdc-list-item--disabled) {
-      .mdc-list-item__primary-text {
-        color: var(--primary-color) !important;
-      }
-    }
-  }
-}
-
-// Global Menu & Context Actions
-.mat-mdc-menu-panel {
-  border-radius: 12px !important;
-  overflow: hidden !important;
-  border: 1px solid rgba(var(--black-rgb), 0.1) !important;
-  box-shadow: 0 8px 24px rgba(var(--black-rgb), 0.12) !important;
-  --mdc-menu-container-color: var(--background-color) !important;
-
-  .mat-mdc-menu-item:hover {
-    background-color: color-mix(in srgb, var(--primary-color), transparent 92%) !important;
-  }
-
-  // Consistent item styling
-  .mat-mdc-menu-item {
-    min-height: 44px !important;
-    font-size: 0.95rem !important;
-    font-weight: 500 !important;
-
-    .mat-icon {
-      margin-right: 12px !important;
-      font-size: 20px !important;
-      width: 20px !important;
-      height: 20px !important;
-      color: var(--secondary-text-color) !important;
-    }
-  }
-}
-
-// Basic Form Field resets (overridden below by more specific cases)
-.mat-mdc-form-field {
-  width: 100%;
-
-  .mat-mdc-text-field-wrapper {
-    background: transparent !important;
-  }
-}
-
-// Global Tooltip Styling
-.mat-mdc-tooltip {
-  --mdc-plain-tooltip-container-color: var(--black); // Standard dark tooltip
-  --mdc-plain-tooltip-supporting-text-color: var(--white);
-  border-radius: 6px !important;
-  font-size: 12px !important;
-  font-weight: 500 !important;
-  padding: 6px 10px !important;
-  backdrop-filter: blur(4px);
-  border: 1px solid rgba(var(--white-rgb), 0.1);
-}
-
-// --- Section Actions Pattern (Shared for Personalization Sections) ---
-.section-actions {
-  display: flex;
-  align-items: center;
-  padding: 32px 0 0 0;
-  border-top: 1px solid rgba(var(--black-rgb), 0.05);
-  margin-top: auto; // Push to bottom of flex container
-  padding-top: 24px;
-
-  .spacer {
-    flex: 1;
-  }
-
-  .reset-btn {
-    background-color: var(--secondary-text-color) !important;
-    color: var(--white) !important;
-    border-radius: 8px !important;
-    padding: 0 24px !important;
-    height: 44px !important;
-    font-weight: 500;
-
-    &:hover {
-      background-color: var(--text-color) !important;
-    }
-  }
-
-  .save-btn {
-    background-color: var(--primary-color) !important;
-    color: var(--white) !important;
-    border-radius: 8px !important;
-    padding: 0 24px !important;
-    height: 44px !important;
-    font-weight: 500;
-
-    &:disabled {
-      background-color: rgba(var(--black-rgb), 0.05) !important;
-      color: rgba(var(--black-rgb), 0.3) !important;
-      box-shadow: none !important;
-    }
-  }
-}
-
-// Remove default padding from dialog content globally for custom layouts
-.mat-mdc-dialog-content.no-padding {
-  padding: 0 !important;
-}
-
-// Global Slide Toggle Styling
-.mat-mdc-slide-toggle {
-  --mdc-switch-selected-handle-color: var(--white);
-  --mdc-switch-selected-track-color: var(--primary-color);
-  --mdc-switch-selected-focus-handle-color: var(--white);
-  --mdc-switch-selected-hover-handle-color: var(--white);
-  --mdc-switch-selected-pressed-handle-color: var(--white);
-  --mdc-switch-unselected-handle-color: var(--white);
-  --mdc-switch-unselected-track-color: rgba(var(--black-rgb), 0.1);
-
-  .mdc-switch__handle-track {
-    filter: drop-shadow(0 2px 4px rgba(var(--black-rgb), 0.1));
-  }
-}
-
-// Sleek Form Field Overrides (Personalization Hub Style)
-.mat-mdc-form-field {
-
-  // Container & Interaction
-  .mat-mdc-text-field-wrapper {
-    background: rgba(var(--black-rgb), 0.04) !important;
-    border: 1px solid rgba(var(--black-rgb), 0.08);
-    border-radius: 8px !important;
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-    cursor: text;
-
-    &:hover {
-      border-color: rgba(var(--black-rgb), 0.15);
-      background: rgba(var(--black-rgb), 0.05) !important;
-    }
-  }
-
-  &.mat-focused .mat-mdc-text-field-wrapper {
-    border-color: var(--primary-color) !important;
-    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.1) !important;
-    background: var(--background-color) !important;
-  }
-
-  // Input & Select Content Styling
-  .mat-mdc-form-field-infix {
-    padding-top: 10px !important;
-    padding-bottom: 10px !important;
-    min-height: auto !important;
-    display: flex;
-    align-items: center;
-
-    .mat-mdc-input-element,
-    .mat-mdc-select-value {
-      font-size: 0.95rem !important;
-      font-weight: 400 !important;
-      color: var(--text-color) !important;
-
-      &::placeholder {
-        color: var(--secondary-text-color) !important;
-        opacity: 0.6;
-      }
-    }
-  }
-
-  // Handle "No Label" variant (removing Material's label layout)
-  &.no-label {
-    .mdc-notched-outline__notch {
-      display: none !important;
-    }
-
-    .mdc-floating-label {
-      display: none !important;
-    }
-
-    .mat-mdc-text-field-wrapper {
-      padding-top: 0 !important;
-    }
-  }
-
-  // Remove the bottom space reserved for error/hints if subscriptSizing is ignored or dynamic
-  .mat-mdc-form-field-subscript-wrapper {
-    display: none !important;
-  }
-
-  // Specific height for select to match inputs
-  &.mat-form-field-type-mat-select {
-    .mat-mdc-text-field-wrapper {
-      min-height: 44px !important;
-      height: 44px !important;
-    }
-  }
-}