@aakash58/chatbot 1.1.20 → 1.1.21

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

@@ -0,0 +1,123 @@
+import {
+  Directive,
+  ElementRef,
+  HostListener,
+  Input,
+  OnInit,
+  Renderer2,
+  OnChanges,
+  SimpleChanges,
+} from '@angular/core';
+
+@Directive({
+  selector: '[draggableDialog]',
+  standalone: true,
+})
+export class DraggableDialogDirective implements OnInit, OnChanges {
+  private isDragging = false;
+  private startX = 0;
+  private startY = 0;
+  private offsetX = 0;
+  private offsetY = 0;
+
+  @Input('dragHandle') dragHandleSelector: string | undefined;
+  @Input() enableDrag = false;
+
+  private dragHandle: HTMLElement | undefined;
+
+  constructor(
+    private el: ElementRef,
+    private renderer: Renderer2,
+  ) {}
+
+  ngOnInit() {
+    this.updateDragState();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['enableDrag']) {
+      this.updateDragState();
+    }
+  }
+
+  private updateDragState() {
+    if (this.enableDrag) {
+      if (this.dragHandleSelector) {
+        this.dragHandle = this.el.nativeElement.querySelector(this.dragHandleSelector);
+      } else {
+        this.dragHandle = this.el.nativeElement; // fallback
+      }
+      if (this.dragHandle) {
+        this.renderer.setStyle(this.dragHandle, 'cursor', 'move');
+      }
+    } else {
+      if (this.dragHandle) {
+        this.renderer.setStyle(this.dragHandle, 'cursor', 'default');
+      }
+      // We don't need to unset dragHandle, just ensure the cursor is reset and the mousedown check respects the flag?
+      // Actually, the mousedown listener is always active. We should check enableDrag inside mousedown.
+    }
+  }
+
+  @HostListener('mousedown', ['$event'])
+  onMouseDown(event: MouseEvent) {
+    if (!this.enableDrag) return;
+    if (event.defaultPrevented) return; // Respect other handlers (like resize)
+
+    if (!this.dragHandle) return;
+
+    const target = event.target as HTMLElement;
+
+    // Strict check if handle is explicitly provided via selector, ensuring we only drag when clicking that specific handle
+    if (
+      this.dragHandleSelector &&
+      target !== this.dragHandle &&
+      !this.dragHandle.contains(target)
+    ) {
+      return;
+    }
+
+    // If using the host element as the handle (no selector), allow dragging from children
+    // BUT exclude specific interactive elements to ensure usability
+    if (!this.dragHandleSelector) {
+      // Check if target is a resize handle (has class or data-dir)
+      if (target.hasAttribute('data-dir') || target.classList.contains('doohbot-resize-handle'))
+        return;
+
+      if (!this.dragHandle.contains(target)) return;
+
+      // Prevent dragging when interacting with controls
+      const tagName = target.tagName;
+      if (['BUTTON', 'INPUT', 'TEXTAREA', 'A', 'SELECT', 'MAT-ICON'].includes(tagName)) return;
+
+      // Optional: explicit opt-out class
+      if (target.classList.contains('no-drag')) return;
+    }
+
+    this.isDragging = true;
+    this.startX = event.clientX - this.offsetX;
+    this.startY = event.clientY - this.offsetY;
+
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  }
+
+  @HostListener('document:mousemove', ['$event'])
+  onMouseMove(event: MouseEvent) {
+    if (!this.isDragging) return;
+
+    this.offsetX = event.clientX - this.startX;
+    this.offsetY = event.clientY - this.startY;
+
+    this.renderer.setStyle(
+      this.el.nativeElement,
+      'transform',
+      `translate(${this.offsetX}px, ${this.offsetY}px)`,
+    );
+  }
+
+  @HostListener('document:mouseup', [])
+  onMouseUp() {
+    this.isDragging = false;
+  }
+}

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

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

package/projects/doohbot/src/lib/core/directives/fullscreen/fullscreen.directive.ts

@@ -0,0 +1,58 @@
+import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';
+
+@Directive({
+  selector: '[appFullscreen]',
+  standalone: true,
+})
+export class FullscreenDirective {
+  private isFullScreen = false;
+  private preFullscreenState: {
+    width: string;
+    height: string;
+    left: string;
+    top: string;
+  } | null = null;
+
+  @Input() fullscreenTarget: string = '.chat-window';
+
+  constructor(
+    private el: ElementRef,
+    private renderer: Renderer2,
+  ) { }
+
+  public toggle(): void {
+    const targetEl = this.el.nativeElement.querySelector(this.fullscreenTarget);
+    if (!targetEl) return;
+
+    if (!this.isFullScreen) {
+      this.preFullscreenState = {
+        width: targetEl.style.width,
+        height: targetEl.style.height,
+        left: targetEl.style.left,
+        top: targetEl.style.top,
+      };
+
+      targetEl.style.width = '';
+      targetEl.style.height = '';
+      targetEl.style.left = '';
+      targetEl.style.top = '';
+      targetEl.style.transform = '';
+
+      this.isFullScreen = true;
+    } else {
+      this.isFullScreen = false;
+
+      if (this.preFullscreenState) {
+        targetEl.style.width = this.preFullscreenState.width;
+        targetEl.style.height = this.preFullscreenState.height;
+        targetEl.style.left = this.preFullscreenState.left;
+        targetEl.style.top = this.preFullscreenState.top;
+        targetEl.style.transform = ''; // Clear transform to allow CSS transitions/classes
+      }
+    }
+  }
+
+  public getFullscreenState(): boolean {
+    return this.isFullScreen;
+  }
+}

package/projects/doohbot/src/lib/core/directives/fullscreen/fullscreen.module.ts

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

package/projects/doohbot/src/lib/core/directives/popout/popout.directive.ts

@@ -0,0 +1,169 @@
+import {
+  Component,
+  ElementRef,
+  HostListener,
+  Input,
+  EventEmitter,
+  OnDestroy,
+  Output,
+  Renderer2,
+  ViewChild,
+} from '@angular/core';
+
+@Component({
+  selector: 'popout-window',
+  template: `
+    <div #innerWrapper style="width: 100%; height: 100%; overflow: auto;">
+      <ng-content></ng-content>
+    </div>
+  `,
+})
+export class PopoutWindowDirective implements OnDestroy {
+  @ViewChild('innerWrapper') private innerWrapper!: ElementRef;
+
+  @Input() windowWidth: number = 400;
+  @Input() windowHeight: number = 400;
+  @Input() windowLeft: number = 200;
+  @Input() windowTop: number = 200;
+  @Input() windowTitle: string = 'Popout Window';
+  @Input() windowStyle: string = '';
+  @Input() windowStyleUrl: string = '';
+  @Input() suppressCloneStyles = false;
+  @Input() get isPoppedOut(): boolean {
+    return this.isOut;
+  }
+  @Output() closed: EventEmitter<boolean> = new EventEmitter();
+  @Output() shown: EventEmitter<Window> = new EventEmitter();
+
+  private popoutWindow: Window | null = null;
+  private isOut = false;
+  private observer: MutationObserver | undefined;
+
+  @HostListener('window:beforeunload')
+  public beforeunloadHandler(): void {
+    this.close();
+  }
+
+  constructor(
+    private renderer2: Renderer2,
+    private elementRef: ElementRef,
+  ) {}
+
+  ngOnDestroy(): void {
+    this.observer?.disconnect();
+    this.close();
+  }
+
+  private close(): void {
+    if (this.popoutWindow) {
+      this.popoutWindow.close();
+      this.popoutWindow = null;
+      this.isOut = false;
+      this.closed.next(true);
+    }
+  }
+
+  public popIn(): void {
+    if (this.elementRef.nativeElement && this.innerWrapper.nativeElement) {
+      this.renderer2.appendChild(this.elementRef.nativeElement, this.innerWrapper.nativeElement);
+      this.close();
+    }
+  }
+
+  public popOut(): void {
+    if (!this.popoutWindow) {
+      const elmRect = this.innerWrapper.nativeElement.getBoundingClientRect();
+
+      const navHeight = window.outerHeight - window.innerHeight;
+      const navWidth = window.outerWidth - window.innerWidth;
+
+      const winLeft = this.windowLeft || window.screenX + navWidth + elmRect.left;
+      const winTop = this.windowTop || window.screenY + navHeight + elmRect.top - 60;
+
+      this.popoutWindow = window.open(
+        '',
+        `popoutWindow${Date.now()}`,
+        `width=${this.windowWidth > 99 ? this.windowWidth : elmRect.width},
+        height=${this.windowHeight > 99 ? this.windowHeight : elmRect.height + 1},
+        left=${winLeft},
+        top=${winTop}`,
+      );
+
+      if (!this.popoutWindow) {
+        console.error('Popup blocked or failed to open');
+        return;
+      }
+
+      this.popoutWindow.document.title = this.windowTitle
+        ? this.windowTitle
+        : window.document.title;
+      this.popoutWindow.document.body.style.margin = '0';
+
+      if (!this.suppressCloneStyles) {
+        document.head.querySelectorAll('style').forEach((node) => {
+          this.popoutWindow?.document.head.appendChild(node.cloneNode(true));
+        });
+
+        this.observeStyleChanges();
+
+        document.head.querySelectorAll('link[rel="stylesheet"]').forEach((node) => {
+          this.popoutWindow?.document.head.insertAdjacentHTML(
+            'beforeend',
+            `<link rel="stylesheet" type="${(node as HTMLLinkElement).type}" href="${(node as HTMLLinkElement).href}">`,
+          );
+        });
+
+        // Safe check for document.fonts
+        const doc: any = document;
+        const targetDoc: any = this.popoutWindow.document;
+        if (doc.fonts && targetDoc.fonts) {
+          doc.fonts.forEach((node: any) => {
+            targetDoc.fonts.add(node);
+          });
+        }
+      }
+
+      if (this.windowStyleUrl) {
+        this.popoutWindow.document.head.insertAdjacentHTML(
+          'beforeend',
+          `<link rel="stylesheet" type="text/css" href="${window.location.origin}/${this.windowStyleUrl}">`,
+        );
+      }
+
+      if (this.windowStyle) {
+        this.popoutWindow.document.head.insertAdjacentHTML(
+          'beforeend',
+          `<style>${this.windowStyle}</style>`,
+        );
+      }
+
+      this.renderer2.appendChild(this.popoutWindow.document.body, this.innerWrapper.nativeElement);
+      this.isOut = true;
+      this.shown.emit(this.popoutWindow);
+
+      this.popoutWindow.addEventListener('unload', () => {
+        this.popIn();
+      });
+    } else {
+      this.popoutWindow.focus();
+    }
+  }
+
+  private observeStyleChanges(): void {
+    const docHead = document.querySelector('head');
+    if (!docHead) return;
+
+    this.observer?.disconnect();
+    this.observer = new MutationObserver((mutations: MutationRecord[]) => {
+      mutations.forEach((mutation: MutationRecord) => {
+        mutation.addedNodes.forEach((node: Node) => {
+          if (node.nodeName === 'STYLE' && this.popoutWindow) {
+            this.popoutWindow.document.head.appendChild(node.cloneNode(true));
+          }
+        });
+      });
+    });
+
+    this.observer.observe(docHead, { childList: true });
+  }
+}

package/projects/doohbot/src/lib/core/directives/popout/popout.module.ts

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+import { PopoutWindowDirective } from './popout.directive';
+
+@NgModule({
+  declarations: [],
+  imports: [PopoutWindowDirective],
+  exports: [PopoutWindowDirective],
+})
+export class PopoutWindowModule {}

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

@@ -0,0 +1,197 @@
+// resizable-dialog.directive.ts
+import {
+  Directive,
+  ElementRef,
+  Renderer2,
+  OnInit,
+  OnDestroy,
+  HostListener,
+  Input,
+  OnChanges,
+  SimpleChanges,
+} from '@angular/core';
+
+@Directive({
+  selector: '[resizableDialog]',
+  standalone: true,
+})
+export class ResizableDialogDirective implements OnInit, OnDestroy, OnChanges {
+  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;
+
+  @Input() enableResize = false;
+
+  // Define resize directions
+  private directions = ['n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw'];
+
+  constructor(
+    private el: ElementRef<HTMLElement>,
+    private renderer: Renderer2,
+  ) {}
+
+  ngOnInit() {
+    this.updateResizeState();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['enableResize']) {
+      this.updateResizeState();
+    }
+  }
+
+  private updateResizeState() {
+    if (this.enableResize) {
+      if (this.resizeHandles.length === 0) {
+        this.setStyle();
+        this.createResizeHandles();
+      }
+    } else {
+      this.removeResizeHandles();
+    }
+  }
+
+  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.addClass(handle, 'doohbot-resize-handle');
+      this.renderer.setStyle(handle, 'position', 'absolute');
+      this.renderer.setStyle(handle, 'background', 'transparent');
+      this.renderer.setStyle(handle, 'zIndex', '2000'); // High z-index to sit above content
+      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', '15px'); // Slightly larger hit area
+        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') ? '-5px' : null); // Extend slightly out
+        this.renderer.setStyle(handle, 'left', dir.includes('w') ? '-5px' : null);
+      }
+      if (dir.includes('n') || dir.includes('s')) {
+        this.renderer.setStyle(handle, 'height', '15px');
+        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') ? '-5px' : null);
+        this.renderer.setStyle(handle, 'top', dir.includes('n') ? '-5px' : null);
+      }
+      if (dir === 'ne' || dir === 'nw' || dir === 'se' || dir === 'sw') {
+        this.renderer.setStyle(handle, 'width', '20px');
+        this.renderer.setStyle(handle, 'height', '20px');
+        this.renderer.setStyle(handle, 'borderRadius', '50%');
+        this.renderer.setStyle(handle, 'cursor', `${dir}-resize`);
+        this.renderer.setStyle(handle, 'top', dir.includes('n') ? '-10px' : null);
+        this.renderer.setStyle(handle, 'bottom', dir.includes('s') ? '-10px' : null);
+        this.renderer.setStyle(handle, 'left', dir.includes('w') ? '-10px' : null);
+        this.renderer.setStyle(handle, 'right', dir.includes('e') ? '-10px' : 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) {
+    if (!this.enableResize) return;
+    if (event.defaultPrevented) return; // Respect other handlers
+
+    const target = event.target as HTMLElement;
+    const dir = target.getAttribute('data-dir');
+    if (!dir) return;
+
+    event.preventDefault();
+    event.stopImmediatePropagation();
+
+    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/core/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/core/enums/api-request-state.enum.ts

@@ -0,0 +1,9 @@
+// /**
+//  * API request state
+//  */
+// export enum ApiRequestState {
+//   IDLE = 'idle',
+//   LOADING = 'loading',
+//   SUCCESS = 'success',
+//   ERROR = 'error',
+// }

package/projects/doohbot/src/lib/core/environments/environment.prod.ts

@@ -0,0 +1,14 @@
+// export const environment = {
+//   staging: false,
+//   development: false,
+//   production: true,
+//   chatApiUrl: 'https://api.production.com',
+//   apiKey: '',
+// };
+export const environment = {
+  config: 'const/app-const.prod.json',
+  production: true,
+  apiBaseUrl: '',
+  loginEndpoint: '',
+  apiSegment: 'api/v1/',
+};

package/projects/doohbot/src/lib/core/environments/environment.ts

@@ -0,0 +1,14 @@
+// export const environment = {
+//   staging: false,
+//   development: false,
+//   production: true,
+//   chatApiUrl: 'https://api.production.com',
+//   apiKey: '',
+// };
+export const environment = {
+  config: 'const/app-const.json',
+  production: false,
+  apiBaseUrl: '',
+  loginEndpoint: '',
+  apiSegment: 'api/v1/',
+};