@adzen/doohbot 1.0.1 → 1.0.2

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

@@ -1,163 +0,0 @@
-// resizable-dialog.directive.ts
-import { Directive, ElementRef, Renderer2, OnInit, OnDestroy, HostListener } from '@angular/core';
-
-@Directive({
-  selector: '[resizableDialog]',
-})
-export class ResizableDialogDirective implements OnInit, OnDestroy {
-  private resizeHandles: HTMLElement[] = [];
-  private activeHandle: string | null = null;
-  private startX = 0;
-  private startY = 0;
-  private startWidth = 0;
-  private startHeight = 0;
-  private startLeft = 0;
-  private startTop = 0;
-
-  // Define resize directions
-  private directions = ['n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw'];
-
-  constructor(
-    private el: ElementRef<HTMLElement>,
-    private renderer: Renderer2,
-  ) {}
-
-  ngOnInit() {
-    this.setStyle();
-    this.createResizeHandles();
-  }
-
-  ngOnDestroy() {
-    this.removeResizeHandles();
-  }
-
-  private setStyle() {
-    const element = this.el.nativeElement;
-    this.renderer.setStyle(element, 'position', 'absolute');
-    this.renderer.setStyle(element, 'overflow', 'hidden');
-    this.renderer.setStyle(element, 'boxSizing', 'border-box');
-  }
-
-  private createResizeHandles() {
-    this.directions.forEach((dir) => {
-      const handle = this.renderer.createElement('div');
-      this.renderer.setAttribute(handle, 'data-dir', dir);
-      this.renderer.setStyle(handle, 'position', 'absolute');
-      this.renderer.setStyle(handle, 'background', 'transparent');
-      this.renderer.setStyle(handle, 'zIndex', '10');
-      this.renderer.setStyle(handle, 'userSelect', 'none');
-
-      // Set size and position based on direction
-      if (dir.includes('e') || dir.includes('w')) {
-        this.renderer.setStyle(handle, 'width', '10px');
-        this.renderer.setStyle(handle, 'cursor', dir.includes('e') ? 'e-resize' : 'w-resize');
-        this.renderer.setStyle(handle, 'top', '0');
-        this.renderer.setStyle(handle, 'bottom', '0');
-        this.renderer.setStyle(handle, 'right', dir.includes('e') ? '0' : null);
-        this.renderer.setStyle(handle, 'left', dir.includes('w') ? '0' : null);
-      }
-      if (dir.includes('n') || dir.includes('s')) {
-        this.renderer.setStyle(handle, 'height', '10px');
-        this.renderer.setStyle(handle, 'cursor', dir.includes('s') ? 's-resize' : 'n-resize');
-        this.renderer.setStyle(handle, 'left', '0');
-        this.renderer.setStyle(handle, 'right', '0');
-        this.renderer.setStyle(handle, 'bottom', dir.includes('s') ? '0' : null);
-        this.renderer.setStyle(handle, 'top', dir.includes('n') ? '0' : null);
-      }
-      if (dir === 'ne' || dir === 'nw' || dir === 'se' || dir === 'sw') {
-        this.renderer.setStyle(handle, 'width', '12px');
-        this.renderer.setStyle(handle, 'height', '12px');
-        this.renderer.setStyle(handle, 'borderRadius', '50%');
-        this.renderer.setStyle(handle, 'cursor', `${dir}-resize`);
-        this.renderer.setStyle(handle, 'top', dir.includes('n') ? '0' : null);
-        this.renderer.setStyle(handle, 'bottom', dir.includes('s') ? '0' : null);
-        this.renderer.setStyle(handle, 'left', dir.includes('w') ? '0' : null);
-        this.renderer.setStyle(handle, 'right', dir.includes('e') ? '0' : null);
-      }
-
-      this.renderer.appendChild(this.el.nativeElement, handle);
-      this.resizeHandles.push(handle);
-    });
-  }
-
-  private removeResizeHandles() {
-    this.resizeHandles.forEach((handle) => {
-      this.renderer.removeChild(this.el.nativeElement, handle);
-    });
-    this.resizeHandles = [];
-  }
-
-  @HostListener('mousedown', ['$event'])
-  onMouseDown(event: MouseEvent) {
-    const target = event.target as HTMLElement;
-    const dir = target.getAttribute('data-dir');
-    if (!dir) return;
-
-    event.preventDefault();
-
-    this.activeHandle = dir;
-    const rect = this.el.nativeElement.getBoundingClientRect();
-
-    this.startX = event.clientX;
-    this.startY = event.clientY;
-    this.startWidth = parseFloat(this.getComputedStyleValue('width'));
-    this.startHeight = parseFloat(this.getComputedStyleValue('height'));
-    this.startLeft = parseFloat(this.getComputedStyleValue('left'));
-    this.startTop = parseFloat(this.getComputedStyleValue('top'));
-
-    // Prevent text selection during resize
-    document.body.classList.add('no-select');
-  }
-
-  @HostListener('document:mousemove', ['$event'])
-  onMouseMove(event: MouseEvent) {
-    if (!this.activeHandle) return;
-
-    const dx = event.clientX - this.startX;
-    const dy = event.clientY - this.startY;
-
-    let newWidth = this.startWidth;
-    let newHeight = this.startHeight;
-    let newLeft = this.startLeft;
-    let newTop = this.startTop;
-
-    const minWidth = 150;
-    const minHeight = 100;
-
-    // Horizontal resize
-    if (this.activeHandle.includes('e')) {
-      newWidth = Math.max(this.startWidth + dx, minWidth);
-    }
-    if (this.activeHandle.includes('w')) {
-      newWidth = Math.max(this.startWidth - dx, minWidth);
-      newLeft = this.startLeft + (this.startWidth - newWidth);
-    }
-
-    // Vertical resize
-    if (this.activeHandle.includes('s')) {
-      newHeight = Math.max(this.startHeight + dy, minHeight);
-    }
-    if (this.activeHandle.includes('n')) {
-      newHeight = Math.max(this.startHeight - dy, minHeight);
-      newTop = this.startTop + (this.startHeight - newHeight);
-    }
-
-    // Apply changes
-    this.renderer.setStyle(this.el.nativeElement, 'width', `${newWidth}px`);
-    this.renderer.setStyle(this.el.nativeElement, 'height', `${newHeight}px`);
-    this.renderer.setStyle(this.el.nativeElement, 'left', `${newLeft}px`);
-    this.renderer.setStyle(this.el.nativeElement, 'top', `${newTop}px`);
-  }
-
-  @HostListener('document:mouseup')
-  onMouseUp() {
-    if (this.activeHandle) {
-      this.activeHandle = null;
-      document.body.classList.remove('no-select');
-    }
-  }
-
-  private getComputedStyleValue(property: string): string {
-    return getComputedStyle(this.el.nativeElement).getPropertyValue(property) || '0';
-  }
-}

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

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

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