@adzen/doohbot 1.0.0

package/projects/doohbot/src/lib/directives/resizable/resizable-dialog.module.ts

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+import { ResizableDialogDirective } from './resizable-dialog.directive';
+
+@NgModule({
+  declarations: [],
+  imports: [ResizableDialogDirective],
+  exports: [ResizableDialogDirective],
+})
+export default class ResizableDialogModule {}

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

@@ -0,0 +1,216 @@
+<!-- fab -->
+@if (buttonStyle === 'fab' && !isChatOpen()) {
+  <button class="chat-fab" (click)="toggleChat()">
+    <mat-icon>{{ chatIcon }}</mat-icon>
+    @if (unreadCount() > 0) {
+      <span class="alert-badge">
+        {{ unreadCount() > 9 ? '9+' : unreadCount() }}
+      </span>
+    }
+  </button>
+}
+<!-- sidebar button -->
+@if (buttonStyle === 'sidebar' && !isChatOpen()) {
+  <button class="chat-sidebar" (click)="toggleChat()">
+    <h2 style="transform: rotate(-90deg); font-size: 16px">{{ appTitle }}</h2>
+    @if (unreadCount() > 0) {
+      <span class="alert-badge">
+        {{ unreadCount() > 9 ? '9+' : unreadCount() }}
+      </span>
+    }
+  </button>
+}
+
+<!-- ... chat window ... -->
+@if (isChatOpen()) {
+  <div
+    draggableDialog
+    [dragHandle]="'.chat-header'"
+    resizableDialog
+    class="chat-window"
+    [class.fullscreen]="isFullScreen"
+  >
+    <!-- chat window -->
+    <div class="chat-header">
+      <div class="chat-title">
+        <img class="chat-logo" [src]="appLogoUrl" alt="Logo" />
+        <h2>{{ appTitle }}</h2>
+      </div>
+
+      <div class="chat-header-buttons">
+        <!-- settings Button -->
+        <button class="header-button" [matMenuTriggerFor]="settingsMenu" matTooltip="Menu">
+          <mat-icon>{{ moreIcon }}</mat-icon>
+        </button>
+
+        <!-- minimize Button -->
+        <button class="header-button" (click)="toggleChat()" matTooltip="Close">
+          <mat-icon>{{ minimizeIcon }}</mat-icon>
+        </button>
+      </div>
+    </div>
+
+    <!-- Messages / Welcome Screen -->
+    <div #chatMessages class="chat-messages">
+      <!-- Welcome Screen -->
+      @if (messages().length === 0 && !isBotTyping()) {
+        <div class="welcome-screen">
+          <img [src]="appLogoUrl" alt="Welcome" class="welcome-image" />
+          <h3>{{ appSubtitle }}</h3>
+          <p>{{ welcomeDesc }}</p>
+
+          <!-- Predefined messages chips -->
+          <app-chips
+            [messages]="predefinedMessages"
+            [disabled]="isBotTyping()"
+            (click)="onPredefinedClick($event)"
+          ></app-chips>
+        </div>
+      }
+
+      <!-- Chat Messages -->
+      @for (message of messages(); track message.id ?? $index; let i = $index) {
+        <div
+          class="message-wrapper"
+          [class.user]="message.sender === 'user'"
+          [class.bot]="message.sender === 'bot'"
+        >
+          <!-- Bot Avatar -->
+          @if (message.sender === 'bot') {
+            <img class="bot-avatar" [src]="botAvatarUrl" alt="Bot Avatar" />
+          }
+
+          <!-- Message Bubble -->
+          <div
+            class="message"
+            [class.user]="message.sender === 'user'"
+            [class.bot]="message.sender === 'bot'"
+          >
+            {{ message.text }}
+            <!--  Show time below message -->
+            @if (message.sender === 'bot') {
+              <div class="message-time">
+                {{ message.timestamp | date: 'shortTime' }}
+              </div>
+            }
+          </div>
+
+          <!-- User Avatar -->
+          @if (message.sender === 'user') {
+            <img class="user-avatar" [src]="userAvatarUrl" alt="User Avatar" />
+          }
+        </div>
+      }
+
+      <!-- Typing Indicator -->
+      @if (isBotTyping()) {
+        <div class="message-wrapper bot">
+          <img class="bot-avatar" [src]="botAvatarUrl" alt="Bot Avatar" />
+          <div class="message bot">
+            <div class="typing-indicator">
+              <span></span>
+              <span></span>
+              <span></span>
+            </div>
+          </div>
+        </div>
+      }
+    </div>
+
+    <!--  SUGGESTED CHIPS: Show only if last bot message was fallback -->
+    @if (showSuggestionChips()) {
+      <app-chips
+        [messages]="predefinedMessages"
+        [disabled]="isBotTyping()"
+        (click)="onPredefinedClick($event)"
+      ></app-chips>
+    }
+
+    <!--  Inline error message -->
+    @if (messageError()) {
+      <app-snackbar
+        [message]="messageError()"
+        [show]="!messageError()"
+        (closed)="clearMessageError()"
+      ></app-snackbar>
+    }
+
+    <!-- Chat Input -->
+    <div class="chat-input">
+      <input
+        #messageInput
+        type="text"
+        [disabled]="isBotTyping()"
+        (keydown.enter)="sendMessage(messageInput.value); messageInput.value = ''"
+        placeholder="{{ hintText }}"
+      />
+      <button (click)="sendMessage(messageInput.value); messageInput.value = ''">
+        <mat-icon>{{ sendIcon }}</mat-icon>
+      </button>
+    </div>
+
+    <!-- footer -->
+    <div class="terms-conditions">
+      <a href="#">Terms and Conditions</a>
+    </div>
+  </div>
+}
+
+<mat-menu #settingsMenu="matMenu" class="mat-menu-override">
+  <!-- Change Theme -->
+  <div class="theme-selector">
+    <!-- <span>Theme</span> -->
+
+    <!-- System Theme -->
+    <button
+      mat-icon-button
+      class="theme-btn"
+      [class.selected]="theme === 'system'"
+      (click)="changeTheme('system')"
+    >
+      <mat-icon>brightness_6</mat-icon>
+    </button>
+
+    <!-- Light Theme -->
+    <button
+      mat-icon-button
+      class="theme-btn"
+      [class.selected]="theme === 'light'"
+      (click)="changeTheme('light')"
+    >
+      <mat-icon>light_mode</mat-icon>
+    </button>
+
+    <!-- Dark Theme -->
+    <button
+      mat-icon-button
+      class="theme-btn"
+      [class.selected]="theme === 'dark'"
+      (click)="changeTheme('dark')"
+    >
+      <mat-icon>dark_mode</mat-icon>
+    </button>
+  </div>
+
+  <!-- Full-Screen Button -->
+  <button mat-menu-item (click)="toggleFullScreen()" style="display: flex; align-items: center">
+    <mat-icon>{{ isFullScreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
+    <span> {{ isFullScreen ? 'Minimize' : 'Expand' }}</span>
+  </button>
+
+  <!-- Pop-out Screen -->
+  <!-- <button
+    mat-menu-item
+    (click)="isPoppedOut ? popIn() : popOut()"
+    style="display: flex; align-items: center"
+  >
+    <mat-icon>{{ isPoppedOut ? 'open_in_new_off' : 'open_in_new' }}</mat-icon>
+    <span>{{ isPoppedOut ? 'Pop-in Screen' : 'Pop-out Screen' }}</span>
+  </button> -->
+
+  <!-- Clear Chat -->
+  <button mat-menu-item (click)="clearChat()" style="display: flex; align-items: center">
+    <mat-icon>clear_all</mat-icon>
+    <span>Clear Chat</span>
+  </button>
+</mat-menu>