@aakash58/chatbot 1.1.20 → 1.1.21

package/projects/doohbot/src/lib/core/services/markdown.service.ts

@@ -0,0 +1,73 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class MarkdownService {
+  constructor() {}
+
+  convert(markdown: string): string {
+    if (!markdown) return '';
+
+    // 1. Escape HTML first to prevent XSS
+    let html = this.escapeHtml(markdown);
+
+    // 2. Process Heads (h1-h3)
+    // # Header -> <h1>Header</h1>
+    html = html.replace(/^### (.*$)/gim, '<h3>$1</h3>');
+    html = html.replace(/^## (.*$)/gim, '<h2>$1</h2>');
+    html = html.replace(/^# (.*$)/gim, '<h1>$1</h1>');
+
+    // 3. Bold (** or __)
+    html = html.replace(/\*\*(.*?)\*\*/gim, '<strong>$1</strong>');
+    html = html.replace(/__(.*?)__/gim, '<strong>$1</strong>');
+
+    // 4. Italic (* or _)
+    html = html.replace(/\*(.*?)\*/gim, '<em>$1</em>');
+    html = html.replace(/_(.*?)_/gim, '<em>$1</em>');
+
+    // 5. Lists (unordered)
+    // Note: This is a simple regex that wraps each list item in <li>.
+    // Full list wrapping <ul> needs state awareness, but for simple chat line-by-line:
+    html = html.replace(/^\s*-\s+(.*$)/gim, '<li>$1</li>');
+    html = html.replace(/^\s*\*\s+(.*$)/gim, '<li>$1</li>');
+
+    // 6. Lists (ordered)
+    html = html.replace(/^\s*\d+\.\s+(.*$)/gim, '<li>$1</li>');
+
+    // 7. Paragraphs
+    // Split by double newline to form paragraphs, but avoid wrapping existing tags
+    // This is a naive implementation; for robust parsing, we'd need a token,
+    // but for simple chat, we can just replace \n with <br> inside paragraphs.
+
+    // Simple line break handling
+    html = html.replace(/\n/gim, '<br>');
+
+    // Optional: Wrap loose text in paragraphs if completely robust is needed,
+    // but <br> is usually sufficient for chat bubbles.
+
+    // Wrap adjacent <li>s in <ul> or <ol> is tricky with pure regex on the whole string.
+    // Improvement: We can wrap the whole block.
+
+    // Basic List Wrapping (very simple heuristic)
+    // Replace sequences of <li>...</li> with <ul>...</ul> is hard without multiple passes.
+    // For now, we will style straight <li>s if they appear, or just accept that they might lack a parent <ul>
+    // which browsers often handle okay visually, OR we try to group them.
+
+    // Let's try to group <li>s
+    html = html.replace(/(<li>.*<\/li>(\s*<br>\s*)*)+/gim, '<ul>$&</ul>');
+
+    // Clean up <br> inside <ul>
+    html = html.replace(/<\/li>\s*<br>\s*<li>/gim, '</li><li>');
+    html = html.replace(/<ul>\s*<br>/gim, '<ul>');
+    html = html.replace(/<br>\s*<\/ul>/gim, '</ul>');
+
+    return html;
+  }
+
+  private escapeHtml(text: string): string {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+}

package/projects/doohbot/src/lib/core/services/theme.service.ts

@@ -0,0 +1,305 @@
+import { effect, Injectable, OnDestroy, Renderer2, RendererFactory2, signal } from '@angular/core';
+import { OverlayContainer } from '@angular/cdk/overlay';
+import { DoohbotThemeConfig } from '../models/theme-config.model';
+import { PersonalizationService } from '../../app/personalization/personalization.service';
+
+export type ThemeMode = 'light' | 'dark' | 'auto';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ThemeService implements OnDestroy {
+  private renderer: Renderer2;
+  private _theme = signal<ThemeMode>('auto');
+  public theme = this._theme.asReadonly();
+
+  private _activeTheme = signal<'light-theme' | 'dark-theme'>('light-theme');
+  public activeTheme = this._activeTheme.asReadonly();
+
+  private observer: MutationObserver | null = null;
+  // private mediaQueryListener: ((e: MediaQueryListEvent) => void) | null = null;
+
+  constructor(
+    rendererFactory: RendererFactory2,
+    private overlay: OverlayContainer,
+    private personalization: PersonalizationService,
+  ) {
+    this.renderer = rendererFactory.createRenderer(null, null);
+
+    // Sync theme and primary color with PersonalizationService
+    effect(
+      () => {
+        const settings = this.personalization.settings();
+        const mode = settings.appearance.theme;
+        const primaryColor = settings.appearance.primaryColor;
+
+        // Update theme
+        this._theme.set(mode);
+        this.updateActiveTheme(mode);
+
+        // Update primary color globally
+        this.applyPrimaryColorToGlobal(primaryColor);
+      },
+      { allowSignalWrites: true },
+    );
+
+    // Separate effect to handle re-application of config when activeTheme changes
+    effect(() => {
+      // const currentTheme = this._activeTheme();
+      const config = this._currentConfig();
+      if (this.rootElement && config) {
+        this.applyCssVariables(this.rootElement, config);
+      }
+    });
+  }
+
+  private _currentConfig = signal<DoohbotThemeConfig | undefined>(undefined);
+  private rootElement: HTMLElement | null = null;
+
+  public setThemeConfig(config: DoohbotThemeConfig, rootElement: HTMLElement) {
+    this._currentConfig.set(config);
+    this.rootElement = rootElement;
+    // Initial apply
+    this.applyCssVariables(rootElement, config);
+  }
+
+  public applyPrimaryColorToGlobal(colorInput: string) {
+    if (!colorInput) return;
+
+    let color = colorInput;
+
+    // Resolve 'default' magic string to developer default
+    if (colorInput === 'default') {
+      const defaults = this.personalization.developerDefaults();
+      color = defaults.primaryColor || 'default';
+    }
+
+    if (color.includes(',')) {
+      const parts = color.split(',').map((p) => p.trim());
+      const isDark = this._activeTheme() === 'dark-theme';
+      color = parts.length >= 2 ? (isDark ? parts[1] : parts[0]) : parts[0];
+    }
+
+    const root = document.documentElement;
+    const overlayContainer = this.overlay.getContainerElement();
+    const onPrimary = this.getContrastColor(color);
+
+    // Standard Material 3 tokens
+    root.style.setProperty('--mat-sys-primary', color);
+    root.style.setProperty('--mat-sys-on-primary', onPrimary);
+
+    // Primary Container (using semi-transparent primary as a fallback if no specific logic)
+    const primaryContainer = `${color}33`; // 20% opacity
+    root.style.setProperty('--mat-sys-primary-container', primaryContainer);
+    root.style.setProperty('--mat-sys-on-primary-container', color);
+
+    overlayContainer.style.setProperty('--mat-sys-primary', color);
+    overlayContainer.style.setProperty('--mat-sys-on-primary', onPrimary);
+    overlayContainer.style.setProperty('--mat-sys-primary-container', primaryContainer);
+
+    // Update internal legacy/utility variables
+    root.style.setProperty('--primary-color', color);
+    root.style.setProperty('--user-message-color', color);
+    root.style.setProperty('--user-text-color', onPrimary);
+
+    overlayContainer.style.setProperty('--primary-color', color);
+  }
+
+  /**
+   * Simple luminance-based contrast calculation
+   * Returns #ffffff for dark colors and #000000 for light colors
+   */
+  private getContrastColor(hex: string): string {
+    if (!hex || hex.length < 6) return '#ffffff';
+
+    // Remove # if present
+    const cleanHex = hex.replace('#', '');
+    const r = parseInt(cleanHex.substring(0, 2), 16);
+    const g = parseInt(cleanHex.substring(2, 4), 16);
+    const b = parseInt(cleanHex.substring(4, 6), 16);
+
+    // Calculate luminance (standard formula)
+    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+
+    return luminance > 0.6 ? '#000000' : '#ffffff';
+  }
+
+  setTheme(mode: ThemeMode): void {
+    this.personalization.updateAppearance({ theme: mode });
+  }
+
+  private updateActiveTheme(mode: ThemeMode) {
+    this.cleanupObservers();
+
+    if (mode === 'auto') {
+      this.handleAutoTheme();
+    } else {
+      const themeToApply = mode === 'dark' ? 'dark-theme' : 'light-theme';
+      this._activeTheme.set(themeToApply);
+      this.applyThemeToGlobal(themeToApply);
+    }
+  }
+
+  private handleAutoTheme() {
+    // Initial detection
+    this.detectAndApplyParentTheme();
+
+    // Watch for changes in parent
+    this.observer = new MutationObserver(() => {
+      this.detectAndApplyParentTheme();
+    });
+
+    this.observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'data-theme'],
+    });
+    this.observer.observe(document.body, {
+      attributes: true,
+      attributeFilter: ['class', 'data-theme'],
+    });
+  }
+
+  private detectAndApplyParentTheme() {
+    const isDark = this.isParentDark();
+    const newTheme = isDark ? 'dark-theme' : 'light-theme';
+
+    // Only update if changed to avoid unnecessary DOM updates
+    if (this._activeTheme() !== newTheme) {
+      this._activeTheme.set(newTheme);
+      this.applyThemeToGlobal(newTheme);
+    }
+  }
+
+  private isParentDark(): boolean {
+    const body = document.body;
+    const html = document.documentElement;
+
+    // Check for common class names
+    const darkClasses = ['dark', 'dark-theme', 'dark-mode', 'night-mode'];
+    const hasDarkClass = (el: HTMLElement) => darkClasses.some((c) => el.classList.contains(c));
+
+    if (hasDarkClass(body) || hasDarkClass(html)) return true;
+
+    // Check for data-theme attribute
+    if (body.getAttribute('data-theme') === 'dark' || html.getAttribute('data-theme') === 'dark')
+      return true;
+
+    //  Check for Bootstrap 5.3+ data-bs-theme
+    if (
+      body.getAttribute('data-bs-theme') === 'dark' ||
+      html.getAttribute('data-bs-theme') === 'dark'
+    ) {
+      return true;
+    }
+
+    // Fallback to system preference
+    // return window.matchMedia('(prefers-color-scheme: dark)').matches;
+    return false;
+  }
+
+  private applyThemeToGlobal(theme: 'light-theme' | 'dark-theme') {
+    const overlayContainer = this.overlay.getContainerElement();
+    const root = document.documentElement;
+
+    // Apply to root for global CSS variables (light-dark() support)
+    this.renderer.removeClass(root, 'light-theme');
+    this.renderer.removeClass(root, 'dark-theme');
+    this.renderer.addClass(root, theme);
+
+    // Also apply to overlay container (for menus/dialogs)
+    this.renderer.removeClass(overlayContainer, 'light-theme');
+    this.renderer.removeClass(overlayContainer, 'dark-theme');
+    this.renderer.addClass(overlayContainer, theme);
+  }
+
+  private cleanupObservers() {
+    if (this.observer) {
+      this.observer.disconnect();
+      this.observer = null;
+    }
+  }
+
+  ngOnDestroy() {
+    this.cleanupObservers();
+  }
+
+  /**
+   * @deprecated Manual CSS variable application is now handled via theme.css tokens
+   */
+  public applyCssVariables(element: HTMLElement, config: DoohbotThemeConfig | undefined) {
+    if (!config) return;
+
+    const isDark = this._activeTheme() === 'dark-theme';
+
+    const applyColor = (input: string | undefined, variableName: string) => {
+      if (input) {
+        const parts = input.split(',').map((p) => p.trim());
+        const colorToUse = parts.length >= 2 ? (isDark ? parts[1] : parts[0]) : parts[0];
+        // Apply to Component Host
+        element.style.setProperty(`--${variableName}`, colorToUse);
+
+        // Apply to Overlay Container (for Dialogs/Menus which exist outside host)
+        this.overlay.getContainerElement().style.setProperty(`--${variableName}`, colorToUse);
+
+        // Secondary mapping for specific variables that have derived states
+        // if (variableName === 'primary-color') {
+        //   element.style.setProperty('--user-message-color', colorToUse);
+        //   element.style.setProperty('--mat-sys-primary', colorToUse);
+        //   const onPrimary = this.getContrastColor(colorToUse);
+        //   element.style.setProperty('--user-text-color', onPrimary);
+        //   element.style.setProperty('--mat-sys-on-primary', onPrimary);
+        // }
+      }
+    };
+
+    // Font
+    if (config.fontFamily) element.style.setProperty('--font-family', config.fontFamily);
+
+    // Primary & Secondary
+    // Handled globally via PersonalizationService/applyPrimaryColorToGlobal to allow user overrides
+    // applyColor(config.primaryColor, 'primary-color');
+    applyColor(config.secondaryColor, 'secondary-color');
+
+    // Backgrounds
+    applyColor(config.backgroundColor, 'background-color');
+
+    // Ensure chat input also follows dual mode if provided, or defaults?
+    // User only asked for background color "of the entire app".
+    applyColor(config.chatInputColor, 'chat-input-color');
+
+    // Text Colors
+    applyColor(config.textAltColor, 'text-alt-color');
+    applyColor(config.textColor, 'text-color');
+    applyColor(config.secondaryTextColor, 'secondary-text-color');
+    applyColor(config.hintTextColor, 'hint-text-color');
+
+    // Button Colors
+    applyColor(config.buttonColor, 'button-color');
+
+    // Message Colors
+    applyColor(config.userMessageColor, 'user-message-color');
+    applyColor(config.botMessageColor, 'bot-message-color');
+
+    // Message Text Colors
+    applyColor(config.userTextColor, 'user-text-color');
+    applyColor(config.botTextColor, 'bot-text-color');
+
+    // Borders
+    applyColor(config.borderColor, 'border-color');
+    applyColor(config.borderShadowColor, 'border-shadow-color');
+    applyColor(config.borderTopColor, 'border-top-color');
+
+    // Indicators
+    applyColor(config.typingIndicatorColor, 'typing-indicator-color');
+
+    // Utility Colors
+    applyColor(config.white, 'white');
+    applyColor(config.black, 'black');
+    applyColor(config.grey, 'grey');
+    applyColor(config.red, 'red');
+    applyColor(config.yellow, 'yellow');
+    applyColor(config.orange, 'orange');
+    applyColor(config.green, 'green');
+    applyColor(config.blue, 'blue');
+  }
+}

package/{lib/core/types/auth-mode.type.d.ts → projects/doohbot/src/lib/core/types/auth-mode.type.ts}

@@ -1,4 +1,4 @@
-/**
- * Authentication mode for the chatbot
- */
-export type AuthMode = 'manual' | 'auto';
+/**
+ * Authentication mode for the chatbot
+ */
+export type AuthMode = 'manual' | 'auto';

package/{lib/core/types/auth-status.type.d.ts → projects/doohbot/src/lib/core/types/auth-status.type.ts}

@@ -1,4 +1,5 @@
-/**
- * Authentication status
- */
-export type AuthStatus = 'authenticated' | 'unauthenticated' | 'expired';
+/**
+ * Authentication status
+ */
+
+export type AuthStatus = 'authenticated' | 'unauthenticated' | 'expired';

package/{lib/core/types/chat-stream.type.d.ts → projects/doohbot/src/lib/core/types/chat-stream.type.ts}

@@ -1,4 +1,4 @@
-/**
- * Chat stream type
- */
-export type ChatStream = 'chunk' | 'complete' | 'error';
+/**
+ * Chat stream type
+ */
+export type ChatStream = 'chunk' | 'complete' | 'error';

package/{lib/core/types/message-role.type.d.ts → projects/doohbot/src/lib/core/types/message-role.type.ts}

@@ -1,4 +1,4 @@
-/**
- * Message role types for chat messages
- */
-export type MessageRole = 'user' | 'assistant';
+/**
+ * Message role types for chat messages
+ */
+export type MessageRole = 'user' | 'assistant';

package/{lib/core/types/prompt-mode.type.d.ts → projects/doohbot/src/lib/core/types/prompt-mode.type.ts}

@@ -1,4 +1,5 @@
-/**
- * Prompt mode
- */
-export type PromptMode = 'markdown' | 'plain';
+/**
+ * Prompt mode
+ */
+
+export type PromptMode = 'markdown' | 'plain';

package/{lib/core/types/snackbar-error.type.d.ts → projects/doohbot/src/lib/core/types/snackbar-error.type.ts}

@@ -1,4 +1,5 @@
-/**
- * Error types for snackbar
- */
-export type SnackBarError = 'warn' | 'error' | 'success' | 'info';
+/**
+ * Error types for snackbar
+ */
+
+export type SnackBarError = 'warn' | 'error' | 'success' | 'info';

package/{lib/core/types/tenant-resolution-strategy.type.d.ts → projects/doohbot/src/lib/core/types/tenant-resolution-strategy.type.ts}

@@ -1,4 +1,4 @@
-/**
- * Tenant resolution strategy
- */
-export type TenantResolutionStrategy = 'static' | 'dynamic' | 'callback';
+/**
+ * Tenant resolution strategy
+ */
+export type TenantResolutionStrategy = 'static' | 'dynamic' | 'callback';

package/projects/doohbot/src/lib/core/utils/error-handler.util.ts

@@ -0,0 +1,31 @@
+import { HttpErrorResponse } from '@angular/common/http';
+
+export class ErrorHandlerUtil {
+  /**
+   * Maps an error to a user-friendly message
+   */
+  public static handleError(error: any): string {
+    if (error instanceof HttpErrorResponse) {
+      switch (error.status) {
+        case 401:
+          return 'Unauthorized. Please check your credentials.';
+        case 403:
+          return 'Forbidden. You do not have permission to perform this action.';
+        case 404:
+          return 'The requested resource was not found.';
+        case 429:
+          return 'Too many requests. Please try again later.';
+        case 500:
+          return 'Internal server error. Please try again later.';
+        default:
+          return error.error?.message || 'An unexpected error occurred.';
+      }
+    }
+
+    if (error instanceof Error) {
+      return error.message;
+    }
+
+    return 'An unexpected error occurred.';
+  }
+}

package/projects/doohbot/src/lib/core/utils/logger.service.ts

@@ -0,0 +1,45 @@
+import { isDevMode } from '@angular/core';
+
+class Logger {
+  private static prefix = '[Doohbot]';
+
+  // 🎨 Color styles
+  private static styles = {
+    log: 'color:#2196f3; font-weight:500',
+    info: 'color:#4caf50; font-weight:500',
+    warn: 'color:#ff9800; font-weight:600',
+    error: 'color:#f44336; font-weight:700',
+    debug: 'color:#9c27b0; font-weight:500',
+  };
+
+  private static canLog(): boolean {
+    return isDevMode();
+  }
+
+  static log(message: string, ...args: any[]): void {
+    if (!this.canLog()) return;
+    console.log(`%c${this.prefix} ${message}`, this.styles.log, ...args);
+  }
+
+  static info(message: string, ...args: any[]): void {
+    if (!this.canLog()) return;
+    console.info(`%c${this.prefix} ${message}`, this.styles.info, ...args);
+  }
+
+  static warn(message: string, ...args: any[]): void {
+    if (!this.canLog()) return;
+    console.warn(`%c${this.prefix} ${message}`, this.styles.warn, ...args);
+  }
+
+  static error(message: string, ...args: any[]): void {
+    if (!this.canLog()) return;
+    console.error(`%c${this.prefix} ${message}`, this.styles.error, ...args);
+  }
+
+  static debug(message: string, ...args: any[]): void {
+    if (!this.canLog()) return;
+    console.debug(`%c${this.prefix} ${message}`, this.styles.debug, ...args);
+  }
+}
+
+export default Logger;

package/projects/doohbot/src/lib/doohbot-input.ts

@@ -0,0 +1,19 @@
+export class DoohbotInput {
+  username = '';
+  password = '';
+  rememberMe?: boolean = false;
+  authToken?: string;
+  license?: string = '';
+  licenseCode?: string = '';
+  licenseKey?: string = '';
+  licenseFilePath?: string = '';
+  apiBaseUrl?: string = '';
+  apiSegment?: string = '';
+  tenancyName?: string = '';
+  storageKey?: string = '';
+  secretKey?: string = '';
+  companyCode?: string = '';
+  buttonStyle?: 'fab' | 'sidebar' | 'sidebar-top' | 'sidebar-bottom';
+  primaryColor?: string = '';
+  accentColor?: string = '';
+}

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

@@ -0,0 +1,34 @@
+<app-chat-button [buttonStyle]="activeButtonStyle()" [isChatOpen]="isChatOpen()" [unreadCount]="unreadCount()"
+  [appTitle]="DoohbotConst.appTitle" [appLogoUrl]="DoohbotConst.appLogo" [appTextLogoUrl]="DoohbotConst.appTextLogo"
+  (toggle)="toggleChat()"></app-chat-button>
+
+@if (isChatOpen()) {
+<app-chat-window appFullscreen [isChatOpen]="isChatOpen()" [enableDrag]="enableDrag" [enableResize]="enableResize"
+  [isFullScreen]="isFullScreen()" [appTitle]="DoohbotConst.appTitle" [appLogoUrl]="DoohbotConst.appLogo"
+  [appTextLogoUrl]="DoohbotConst.appTextLogo" [appHeaderLogoUrl]="DoohbotConst.appHeaderLogo" [messages]="messages()"
+  [isBotTyping]="isBotTyping()" [isStreaming]="isStreaming()" [appSubtitle]="DoohbotConst.appSubtitle"
+  [welcomeDesc]="DoohbotConst.welcomeDescription" [predefinedMessages]="predefinedMessages"
+  [suggestedMessages]="suggestedMessages" [botAvatarUrl]="DoohbotConst.botAvatar"
+  [userAvatarUrl]="DoohbotConst.userAvatar" [userName]="userName" [trackByMessageId]="trackByMessageId"
+  [hintText]="DoohbotConst.hintText" [messageError]="messageError()" [showSuggestionChips]="showSuggestionChips()"
+  [buttonStyle]="activeButtonStyle()" [isHistorySidebarOpen]="isHistorySidebarOpen()" [chatSessions]="chatSessions()"
+  [isLoadingSessions]="isLoadingSessions()" [processingSessionId]="processingSessionId()"
+  [hasMoreSessions]="hasMoreHistory()" [isLoadingMoreSessions]="isLoadingMore()" [chatHistoryUserName]="userName"
+  [isLoggingIn]="isLoggingIn()" [isAuthenticated]="isAuthenticated()" [authError]="authError()"
+  [authSuccess]="authSuccess()" (toggleChat)="toggleChat()" (loginSubmit)="onNormalLogin($event)"
+  (toggleFullScreen)="toggleFullScreen()" (toggleHistorySidebar)="toggleHistorySidebar()"
+  (sessionSelected)="loadChatSession($event)" (sessionDeleted)="deleteSession($event)"
+  (sessionRenamed)="renameSession($event)" (loadMoreSessions)="loadMoreHistory()" (refreshSessions)="refreshHistory()"
+  (suggestionClick)="sendMessage($event)" (send)="sendMessage($event)" (stop)="onStopRequest()"
+  (clearMessageError)="clearMessageError()" (clearChat)="clearChat()" (deleteAllSessions)="deleteAllSessions()"
+  (logout)="performLogout()"></app-chat-window>
+}
+
+<!-- Skeleton Loader while auth is unknown or refreshing -->
+<!-- @if (isChatOpen() && (authStatus() === 'expired')) {
+<div class="auth-loading-skeleton">
+  <div class="skeleton-header"></div>
+  <div class="skeleton-messages"></div>
+  <div class="skeleton-input"></div>
+</div>
+} -->

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

@@ -0,0 +1,17 @@
+@use '@angular/material' as mat;
+@use './styles/material-override' as *;
+@use './styles/theme' as *;
+
+// Global base styles (since encapsulation is None, these apply globally)
+html,
+body {
+  height: 100%;
+  margin: 0;
+  color-scheme: light dark;
+}
+
+body {
+  font-family: Roboto, 'Helvetica Neue', sans-serif;
+  color: var(--mat-sys-on-background);
+  background-color: var(--mat-sys-background);
+}

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

@@ -0,0 +1,31 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Doohbot } from './doohbot.component';
+import { ThemeService } from './core/services/theme.service';
+import { signal } from '@angular/core';
+
+describe('Doohbot', () => {
+  let component: Doohbot;
+  let fixture: ComponentFixture<Doohbot>;
+  let themeServiceMock: any;
+
+  beforeEach(async () => {
+    themeServiceMock = {
+      activeTheme: signal('light-theme'),
+      setTheme: jasmine.createSpy('setTheme'),
+      theme: signal('system'),
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [Doohbot],
+      providers: [{ provide: ThemeService, useValue: themeServiceMock }],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(Doohbot);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});