@adzen/doohbot 1.0.0

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

@@ -0,0 +1,345 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  ElementRef,
+  inject,
+  Input,
+  Renderer2,
+  signal,
+  TrackByFunction,
+  ViewChild,
+  ViewEncapsulation,
+} from '@angular/core';
+import { MessageService } from './services/messaging.service';
+import { Message } from './model/message';
+import { CommonModule } from '@angular/common';
+import { OverlayContainer } from '@angular/cdk/overlay';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatIcon } from '@angular/material/icon';
+import { Observable } from 'rxjs';
+import { DoohbotInput } from './inputs/doohbot-input';
+import { SnackBar } from './shared/snackbar/snackbar';
+import { MatBadgeModule } from '@angular/material/badge';
+import { Chips } from './shared/chips/chips';
+import { PredefinedMessages } from './helpers/predefined_messages';
+import { MatTooltip } from '@angular/material/tooltip';
+import { DraggableDialogDirective } from './directives/draggable/draggable-dialog.directive';
+import { ResizableDialogDirective } from './directives/resizable/resizable-dialog.directive';
+
+@Component({
+  selector: 'app-doohbot',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatIcon,
+    MatMenuModule,
+    SnackBar,
+    DraggableDialogDirective,
+    ResizableDialogDirective,
+    MatBadgeModule,
+    Chips,
+    MatTooltip,
+  ],
+  templateUrl: './doohbot.html',
+  styleUrl: './doohbot.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Doohbot extends DoohbotInput {
+  @Input() config: DoohbotInput = new DoohbotInput();
+  @Input() platformTenant!: string;
+  @Input() subTenant!: string;
+  @Input() agent!: string;
+  @Input() buttonStyle: 'fab' | 'sidebar' = 'fab';
+
+  isFullScreen = false;
+  showThemeMenu = false;
+  isMenuOpen: boolean = false;
+  currentUser: string = 'User';
+
+  public isChatOpen = signal(false);
+  public isBotTyping = signal(false);
+  private messageService = inject(MessageService);
+  public messages = this.messageService.messages;
+  private lastReadMessageId = signal<string | null>(null);
+  private mutationObserver!: MutationObserver;
+
+  maxMessageLength = 1000;
+  messageError = signal<string | null>(null);
+  @ViewChild('chatMessages') private chatMessagesContainer!: ElementRef;
+
+  $index: TrackByFunction<Message> | undefined;
+
+  theme: 'light' | 'dark' | 'system' = 'system';
+
+  settingsMenuItems: Array<{ label: string; action: () => void }> = [
+    { label: 'Light Theme', action: () => this.changeTheme('light') },
+    { label: 'Dark Theme', action: () => this.changeTheme('dark') },
+    { label: 'System Theme', action: () => this.changeTheme('system') },
+  ];
+
+  // Predefined messages for chips
+  public predefinedMessages: string[] = PredefinedMessages;
+
+  dismissTimeout: number | null = null;
+
+  ngOnInit() {
+    this.changeTheme(this.theme);
+    this.userAvatarUrl = this.config.userAvatarUrl || '';
+  }
+
+  getCurrentUser(): Observable<string> {
+    return new Observable((observer) => {
+      observer.next('');
+    });
+  }
+
+  // When user clicks a chip
+  onPredefinedClick(text: string) {
+    this.sendMessage(text);
+  }
+
+  changeTheme(mode: 'light' | 'dark' | 'system'): void {
+    this.theme = mode;
+    localStorage.setItem('theme', mode);
+    this.applyTheme(mode);
+    this.isMenuOpen = false;
+  }
+
+  private applyTheme(mode: 'light' | 'dark' | 'system') {
+    const body = document.body;
+    const host = this.elementRef.nativeElement;
+    const overlayContainer = this.overlay.getContainerElement();
+
+    // Remove existing theme classes
+    [body, host, overlayContainer].forEach((el) => {
+      this.renderer.removeClass(el, 'light-theme');
+      this.renderer.removeClass(el, 'dark-theme');
+    });
+
+    let themeToApply: 'light-theme' | 'dark-theme' = 'light-theme';
+
+    if (mode === 'system') {
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      themeToApply = prefersDark ? 'dark-theme' : 'light-theme';
+
+      // Live system change listener
+      window.matchMedia('(prefers-color-scheme: dark)').onchange = (e) => {
+        if (this.theme === 'system') {
+          const newTheme = e.matches ? 'dark-theme' : 'light-theme';
+          [body, host, overlayContainer].forEach((el) => {
+            this.renderer.removeClass(el, 'light-theme');
+            this.renderer.removeClass(el, 'dark-theme');
+            this.renderer.addClass(el, newTheme);
+          });
+        }
+      };
+    } else if (mode === 'dark') {
+      themeToApply = 'dark-theme';
+    }
+
+    // Apply the theme to all important elements
+    [body, host, overlayContainer].forEach((el) => this.renderer.addClass(el, themeToApply));
+  }
+  constructor(
+    private overlay: OverlayContainer,
+    private elementRef: ElementRef,
+    private renderer: Renderer2,
+  ) {
+    super();
+    effect(() => {
+      this.messages();
+      setTimeout(() => this.scrollToBottom(), 0);
+    });
+  }
+
+  openSettingsMenu(): void {
+    this.isMenuOpen = true;
+  }
+
+  public preFullscreenState: {
+    width: string;
+    height: string;
+    left: string;
+    top: string;
+  } | null = null;
+
+  toggleFullScreen() {
+    const chatWindow = document.querySelector('.chat-window') as HTMLElement;
+    if (!chatWindow) return;
+
+    if (!this.isFullScreen) {
+      //   ENTER "FULLSCREEN" / Save current drag/resize state
+      this.preFullscreenState = {
+        width: chatWindow.style.width,
+        height: chatWindow.style.height,
+        left: chatWindow.style.left,
+        top: chatWindow.style.top,
+      };
+
+      //  Clear inline styles that conflict with .fullscreen
+      chatWindow.style.width = '';
+      chatWindow.style.height = '';
+      chatWindow.style.left = '';
+      chatWindow.style.top = '';
+      chatWindow.style.transform = ''; // important!
+
+      //  Activate centered "fullscreen"
+      chatWindow.classList.add('fullscreen');
+      this.isFullScreen = true;
+    } else {
+      //  EXIT "FULLSCREEN"
+      chatWindow.classList.remove('fullscreen');
+      this.isFullScreen = false;
+
+      //  Restore drag/resize state
+      if (this.preFullscreenState) {
+        chatWindow.style.width = this.preFullscreenState.width || '400px';
+        chatWindow.style.height = this.preFullscreenState.height || '500px';
+        chatWindow.style.left = this.preFullscreenState.left || 'auto';
+        chatWindow.style.top = this.preFullscreenState.top || 'auto';
+        chatWindow.style.transform = 'none';
+      }
+    }
+  }
+  public ngAfterViewInit(): void {
+    this.mutationObserver = new MutationObserver(() => {
+      this.scrollToBottom();
+    });
+
+    this.mutationObserver.observe(this.chatMessagesContainer.nativeElement, {
+      childList: true,
+    });
+  }
+
+  public scrollToBottom(): void {
+    try {
+      this.chatMessagesContainer.nativeElement.scrollTop =
+        this.chatMessagesContainer.nativeElement.scrollHeight;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  public ngOnDestroy(): void {
+    this.mutationObserver.disconnect();
+  }
+
+  toggleChat() {
+    const currentlyOpen = this.isChatOpen();
+    this.isChatOpen.update((open) => !open);
+
+    // When opening the chat, mark all messages as read
+    if (!currentlyOpen) {
+      const messages = this.messages();
+      if (messages.length > 0) {
+        // Mark the latest message as read
+        const lastMessage = messages[messages.length - 1];
+        this.lastReadMessageId.set(lastMessage.id ?? null);
+      }
+    }
+  }
+  clearChat() {
+    this.messageService.clearMessages();
+  }
+
+  public sendMessage(text: string): void {
+    const trimmedText = text.trim();
+    this.messageError();
+
+    if (!trimmedText) return;
+
+    if (trimmedText.length > this.maxMessageLength) {
+      this.messageError.set(this.errorMessage);
+
+      // Auto-dismiss
+      setTimeout(() => {
+        this.messageError();
+      }, 5000);
+      return;
+    }
+    this.messageService.addMessage({
+      sender: 'user',
+      text: trimmedText,
+      id: Date.now().toString(),
+      timestamp: new Date(),
+    });
+    this.isBotTyping.set(true);
+
+    setTimeout(() => {
+      const botReply = this.messageService.getBotReply(trimmedText);
+      const isFallback = botReply === this.messageService.getFallbackReply();
+      this.messageService.addMessage({
+        sender: 'bot',
+        text: botReply,
+        id: Date.now().toString(),
+        showSuggestions: isFallback,
+      });
+      this.isBotTyping.set(false);
+    }, 1000);
+  }
+
+  // Clears the message error.
+  public clearMessageError(): void {
+    this.messageError.set(null);
+
+    //  Cancel pending auto-dismiss
+    if (this.dismissTimeout) {
+      clearTimeout(this.dismissTimeout);
+      this.dismissTimeout = null;
+    }
+  }
+
+  // Determines whether to show suggestion chips
+  showSuggestionChips = computed(() => {
+    const msgs = this.messages();
+    if (msgs.length === 0) return false;
+
+    // Find the last bot message
+    const lastBotMsg = [...msgs].reverse().find((m) => m.sender === 'bot');
+    return lastBotMsg?.showSuggestions === true;
+  });
+
+  // Mark last message as read
+  public markAsReadEffect = effect(() => {
+    const isOpen = this.isChatOpen();
+    const msgs = this.messages();
+
+    if (isOpen && msgs.length > 0) {
+      const lastMessage = msgs[msgs.length - 1];
+      if (lastMessage.id) {
+        // Only update if ID exists and it's newer than current
+        const currentLastRead = this.lastReadMessageId();
+        if (lastMessage.id !== currentLastRead) {
+          this.lastReadMessageId.set(lastMessage.id);
+        }
+      }
+    }
+  });
+
+  unreadCount = computed(() => {
+    // If chat is open, treat as all read
+    if (this.isChatOpen()) {
+      return 0;
+    }
+
+    const messages = this.messages();
+    if (messages.length === 0) return 0;
+
+    const lastReadId = this.lastReadMessageId();
+
+    // Find index of last read message
+    let lastReadIndex = -1;
+    if (lastReadId !== null) {
+      lastReadIndex = messages.findIndex((msg) => msg.id === lastReadId);
+    }
+
+    // Unread = bot messages after the last read message
+    const unreadBotMessages = messages
+      .slice(lastReadIndex + 1)
+      .filter((msg) => msg.sender === 'bot');
+
+    return unreadBotMessages.length;
+  });
+}

package/projects/doohbot/src/lib/elements/elements.ts

@@ -0,0 +1,25 @@
+import { NgModule, Injector } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { createCustomElement } from '@angular/elements';
+import { MatIconModule } from '@angular/material/icon';
+import { platformBrowser } from '@angular/platform-browser';
+import { Doohbot } from '../doohbot';
+
+@NgModule({
+  imports: [BrowserModule, MatIconModule],
+  declarations: [],
+})
+export class ElementModule {
+  constructor(injector: Injector) {
+    const doohbotElement = createCustomElement(Doohbot, { injector });
+
+    // Check if already defined to avoid errors
+    if (!customElements.get('app-doohbot')) {
+      customElements.define('app-doohbot', doohbotElement);
+    }
+  }
+}
+
+platformBrowser()
+  .bootstrapModule(ElementModule)
+  .catch((err) => console.error(err));

package/projects/doohbot/src/lib/helpers/predefined_messages.ts

@@ -0,0 +1,2 @@
+// chat-config.ts
+export const PredefinedMessages = ['Hello!', 'I need help', 'Contact support', 'News and Updates'];

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

@@ -0,0 +1,25 @@
+export class DoohbotInput {
+  // inputs
+  userAvatarUrl: string = 'https://iili.io/KpEYoCP.png';
+
+  // Application Constants Text
+  readonly appTitle = 'DoohBot';
+  readonly appSubtitle = 'Welcome to DoohBot';
+  readonly welcomeDesc =
+    'We provide a powerful live chat platform to help businesses connect with their customers, offer support, and increase sales through real-time conversations.';
+  readonly chatIcon = 'chat';
+  readonly sendIcon = 'send';
+  readonly closeIcon = 'close';
+  readonly clear = 'clear_all';
+  readonly minimizeIcon = 'remove';
+  readonly moreIcon = 'more_vert';
+  readonly fullscreenIcon = 'fullscreen';
+  readonly fullscreenExitIcon = 'fullscreen_exit';
+  readonly hintText = 'Please Enter Here';
+  errorMessage = 'The message you submitted was too long.';
+
+  // Application Constants Images
+  readonly appLogoUrl = 'https://iili.io/KmDhToN.md.png';
+  readonly botAvatarUrl = 'https://iili.io/KpER0Ge.png';
+  mode: string | undefined;
+}

package/projects/doohbot/src/lib/model/doohbot.intents.ts

@@ -0,0 +1,24 @@
+import { ChatIntent } from './message';
+
+export const CHAT_INTENTS: ChatIntent[] = [
+  {
+    patterns: ['hello', 'hi', 'hey', 'greetings', 'good morning', 'good afternoon', 'good evening'],
+    response: '👋Hello! How can I help you today?',
+  },
+  {
+    patterns: ['how are you', 'how are you doing'],
+    response: "I'm just a bot, but I'm doing great! How about you?",
+  },
+  {
+    patterns: ['help', 'support', 'problem', 'about', 'issue', 'question', 'assist', 'Contact'],
+    response: 'Sure! Please tell me your issue, and I will try to assist you.',
+  },
+  {
+    patterns: ['bye', 'goodbye', 'see you', 'thanks', 'thank you', 'bye bye', 'see you later'],
+    response: 'Goodbye! Have a nice day!',
+  },
+  {
+    patterns: ['news and updates', 'updates', 'news', 'new'],
+    response: 'Stay tuned for the latest news and updates from our team!',
+  },
+];

package/projects/doohbot/src/lib/model/message.ts

@@ -0,0 +1,13 @@
+export interface Message {
+  id: string;
+  sender: 'user' | 'bot';
+  senderName?: string;
+  text: string;
+  timestamp?: Date;
+  showSuggestions?: boolean;
+}
+
+export interface ChatIntent {
+  patterns: string[];
+  response: string;
+}

package/projects/doohbot/src/lib/model/token.ts

@@ -0,0 +1,3 @@
+import { InjectionToken } from '@angular/core';
+
+export const DOOHBOT_API_URL = new InjectionToken<string>('DOOHBOT_API_URL');