@aakash58/chatbot 1.1.20 → 1.1.21

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

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

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

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

@@ -0,0 +1,54 @@
+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/{lib/shared/snackbar/snackbar.utils.d.ts → projects/doohbot/src/lib/shared/snackbar/snackbar.utils.ts}

@@ -1,33 +1,49 @@
-import { SnackbarService } from './snackbar.service';
-/**
- * Utility class for common snackbar operations
- * Provides reusable snackbar configurations for consistency across the application
- */
-export declare class SnackbarUtils {
-    private static service;
-    /**
-     * Initialize the utility with a SnackbarService instance
-     * @param service The SnackbarService instance
-     */
-    static init(service: SnackbarService): void;
-    /**
-     * Show a success snackbar
-     * @param message The message to show
-     */
-    static success(message: string): void;
-    /**
-     * Show an error snackbar
-     * @param message The message to show
-     */
-    static error(message: string): void;
-    /**
-     * Show a warning snackbar
-     * @param message The message to show
-     */
-    static warn(message: string): void;
-    /**
-     * Show an info snackbar
-     * @param message The message to show
-     */
-    static info(message: string): void;
-}
+import { SnackbarService } from './snackbar.service';
+
+/**
+ * Utility class for common snackbar operations
+ * Provides reusable snackbar configurations for consistency across the application
+ */
+export class SnackbarUtils {
+    private static service: SnackbarService | null = null;
+
+    /**
+     * Initialize the utility with a SnackbarService instance
+     * @param service The SnackbarService instance
+     */
+    static init(service: SnackbarService): void {
+        this.service = service;
+    }
+
+    /**
+     * Show a success snackbar
+     * @param message The message to show
+     */
+    static success(message: string): void {
+        this.service?.success(message);
+    }
+
+    /**
+     * Show an error snackbar
+     * @param message The message to show
+     */
+    static error(message: string): void {
+        this.service?.error(message);
+    }
+
+    /**
+     * Show a warning snackbar
+     * @param message The message to show
+     */
+    static warn(message: string): void {
+        this.service?.warn(message);
+    }
+
+    /**
+     * Show an info snackbar
+     * @param message The message to show
+     */
+    static info(message: string): void {
+        this.service?.info(message);
+    }
+}

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

@@ -0,0 +1,132 @@
+// 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;
+}