@bbq-chat/widgets-angular 1.0.0

package/dist/widget-renderer.component.js

@@ -0,0 +1,316 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { Component, Input, Output, EventEmitter, ElementRef, ViewChild, inject, Injector, createComponent, EnvironmentInjector, } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SsrWidgetRenderer, WidgetEventManager, } from '@bbq-chat/widgets';
+import { WidgetRegistryService } from './widget-registry.service';
+import { isHtmlRenderer, isComponentRenderer, isTemplateRenderer, } from './custom-widget-renderer.types';
+/**
+ * Angular component for rendering chat widgets
+ *
+ * This component handles rendering of chat widgets using the BbQ ChatWidgets library.
+ * It manages widget lifecycle, event handling, and cleanup.
+ *
+ * Supports three types of custom widget renderers:
+ * 1. HTML function renderers (return HTML strings)
+ * 2. Angular Component renderers (render as dynamic components)
+ * 3. Angular TemplateRef renderers (render as embedded views)
+ *
+ * @example
+ * ```typescript
+ * <bbq-widget-renderer
+ *   [widgets]="messageWidgets"
+ *   (widgetAction)="handleWidgetAction($event)">
+ * </bbq-widget-renderer>
+ * ```
+ */
+let WidgetRendererComponent = class WidgetRendererComponent {
+    constructor() {
+        /**
+         * Emits when a widget action is triggered
+         */
+        this.widgetAction = new EventEmitter();
+        this.widgetItems = [];
+        this.renderer = new SsrWidgetRenderer();
+        this.isViewInitialized = false;
+        this.widgetRegistry = inject(WidgetRegistryService);
+        this.injector = inject(Injector);
+        this.environmentInjector = inject(EnvironmentInjector);
+        this.dynamicComponents = [];
+        this.dynamicViews = [];
+    }
+    ngOnInit() {
+        this.updateWidgetHtml();
+    }
+    ngOnChanges(changes) {
+        if (changes['widgets']) {
+            this.updateWidgetHtml();
+        }
+    }
+    ngAfterViewInit() {
+        this.isViewInitialized = true;
+        this.setupEventHandlers();
+        // Render dynamic components/templates after view init
+        this.renderDynamicWidgets();
+    }
+    ngOnDestroy() {
+        this.cleanup();
+    }
+    /**
+     * Base implementation for updating the rendered HTML for the current widgets.
+     *
+     * Subclasses may override this method to customize how widgets are rendered
+     * (for example, to inject additional markup or perform preprocessing).
+     *
+     * Since this is the base implementation, overriding implementations are not
+     * required to call `super.updateWidgetHtml()`.
+     */
+    updateWidgetHtml() {
+        if (!this.widgets || this.widgets.length === 0) {
+            this.widgetItems = [];
+            return;
+        }
+        this.widgetItems = this.widgets.map((widget, index) => {
+            const customRenderer = this.widgetRegistry.getRenderer(widget.type);
+            // Check template renderer first (most specific)
+            if (customRenderer && isTemplateRenderer(customRenderer)) {
+                return {
+                    index,
+                    widget,
+                    isHtml: false,
+                };
+            }
+            // Check component renderer second
+            if (customRenderer && isComponentRenderer(customRenderer)) {
+                return {
+                    index,
+                    widget,
+                    isHtml: false,
+                };
+            }
+            // Check HTML function renderer last (most general, matches any function)
+            if (customRenderer && isHtmlRenderer(customRenderer)) {
+                return {
+                    index,
+                    widget,
+                    isHtml: true,
+                    html: customRenderer(widget),
+                };
+            }
+            // Default: render using the BbQ library renderer
+            return {
+                index,
+                widget,
+                isHtml: true,
+                html: this.renderer.renderWidget(widget),
+            };
+        });
+        // After view updates, reinitialize widgets only if view is already initialized
+        if (this.isViewInitialized) {
+            setTimeout(() => {
+                this.setupEventHandlers();
+                this.renderDynamicWidgets();
+            }, 0);
+        }
+    }
+    /**
+     * Render dynamic components and templates for custom widgets
+     */
+    renderDynamicWidgets() {
+        if (!this.containerRef?.nativeElement)
+            return;
+        // Use microtask to ensure Angular has completed change detection
+        Promise.resolve().then(() => {
+            if (!this.containerRef?.nativeElement)
+                return;
+            // Clean up existing dynamic components and views
+            this.cleanupDynamicWidgets();
+            const container = this.containerRef.nativeElement;
+            // Query all widget divs without the data-rendered filter
+            const dynamicWidgetDivs = Array.from(container.querySelectorAll('.bbq-widget'));
+            let dynamicIndex = 0;
+            this.widgetItems.forEach((item) => {
+                if (!item.isHtml) {
+                    const customRenderer = this.widgetRegistry.getRenderer(item.widget.type);
+                    if (!customRenderer)
+                        return;
+                    const targetDiv = dynamicWidgetDivs[dynamicIndex];
+                    if (!targetDiv)
+                        return;
+                    // Clear the div content before rendering
+                    targetDiv.innerHTML = '';
+                    if (isComponentRenderer(customRenderer)) {
+                        this.renderComponent(customRenderer, item.widget, targetDiv);
+                    }
+                    else if (isTemplateRenderer(customRenderer)) {
+                        this.renderTemplate(customRenderer, item.widget, targetDiv);
+                    }
+                    dynamicIndex++;
+                }
+            });
+        });
+    }
+    /**
+     * Render an Angular component for a custom widget
+     *
+     * Note: This method safely assigns properties to component instances
+     * by checking for property existence at runtime. This approach is necessary
+     * because we cannot statically verify that all components implement
+     * the CustomWidgetComponent interface.
+     */
+    renderComponent(componentType, widget, targetElement) {
+        // Create the component using Angular's createComponent API
+        const componentRef = createComponent(componentType, {
+            environmentInjector: this.environmentInjector,
+            elementInjector: this.injector,
+        });
+        // Safely set component inputs if they exist
+        const instance = componentRef.instance;
+        if (instance && typeof instance === 'object') {
+            // Set widget property if it exists in the prototype chain
+            if ('widget' in instance) {
+                instance.widget = widget;
+            }
+            // Set widgetAction callback if it exists in the prototype chain
+            if ('widgetAction' in instance) {
+                instance.widgetAction = (actionName, payload) => {
+                    this.widgetAction.emit({ actionName, payload });
+                };
+            }
+        }
+        // Attach the component's host view to the target element
+        targetElement.appendChild(componentRef.location.nativeElement);
+        // Store reference for cleanup
+        this.dynamicComponents.push(componentRef);
+        // Trigger change detection (use optional chaining for safety)
+        componentRef.changeDetectorRef?.detectChanges();
+    }
+    /**
+     * Render an Angular template for a custom widget
+     */
+    renderTemplate(templateRef, widget, targetElement) {
+        const context = {
+            $implicit: widget,
+            widget: widget,
+            emitAction: (actionName, payload) => {
+                this.widgetAction.emit({ actionName, payload });
+            },
+        };
+        const viewRef = templateRef.createEmbeddedView(context);
+        // Attach the view's DOM nodes to the target element
+        viewRef.rootNodes.forEach((node) => {
+            targetElement.appendChild(node);
+        });
+        // Store reference for cleanup
+        this.dynamicViews.push(viewRef);
+        // Trigger change detection
+        viewRef.detectChanges();
+    }
+    /**
+     * Cleanup dynamic components and views
+     */
+    cleanupDynamicWidgets() {
+        this.dynamicComponents.forEach((componentRef) => {
+            componentRef.destroy();
+        });
+        this.dynamicComponents = [];
+        this.dynamicViews.forEach((viewRef) => {
+            viewRef.destroy();
+        });
+        this.dynamicViews = [];
+    }
+    setupEventHandlers() {
+        if (!this.containerRef?.nativeElement)
+            return;
+        // Cleanup old resources before setting up new ones
+        this.cleanup();
+        const container = this.containerRef.nativeElement;
+        // Create a custom action handler that emits events
+        const actionHandler = {
+            handle: async (action, payload) => {
+                this.widgetAction.emit({ actionName: action, payload });
+            },
+        };
+        // Attach event handlers using WidgetEventManager
+        this.eventManager = new WidgetEventManager(actionHandler);
+        this.eventManager.attachHandlers(container);
+    }
+    handleClick(event) {
+        const target = event.target;
+        // Only trigger actions on non-form buttons and clickable elements (cards)
+        // Don't trigger on input elements or form buttons (let WidgetEventManager handle those)
+        const button = target.tagName === 'BUTTON' ? target : target.closest('button');
+        if (button && !button.closest('[data-widget-type="form"]')) {
+            const actionName = button.getAttribute('data-action');
+            if (actionName) {
+                try {
+                    const payloadStr = button.getAttribute('data-payload');
+                    const payload = payloadStr ? JSON.parse(payloadStr) : {};
+                    this.widgetAction.emit({ actionName, payload });
+                }
+                catch (err) {
+                    console.error('Failed to parse widget action payload:', err);
+                }
+            }
+        }
+    }
+    /**
+     * Cleanup all resources including event listeners.
+     */
+    cleanup() {
+        // Cleanup dynamic widgets first
+        this.cleanupDynamicWidgets();
+        // Cleanup event manager
+        this.eventManager = undefined;
+    }
+};
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], WidgetRendererComponent.prototype, "widgets", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], WidgetRendererComponent.prototype, "widgetAction", void 0);
+__decorate([
+    ViewChild('widgetContainer', { static: false }),
+    __metadata("design:type", ElementRef)
+], WidgetRendererComponent.prototype, "containerRef", void 0);
+WidgetRendererComponent = __decorate([
+    Component({
+        selector: 'bbq-widget-renderer',
+        standalone: true,
+        imports: [CommonModule],
+        template: `
+    <div #widgetContainer class="bbq-widgets-container" (click)="handleClick($event)">
+      @for (item of widgetItems; track item.index) {
+        @if (item.isHtml) {
+          <div class="bbq-widget" [innerHTML]="item.html"></div>
+        } @else {
+          <div class="bbq-widget" #dynamicWidget></div>
+        }
+      }
+    </div>
+  `,
+        styles: [
+            `
+      .bbq-widgets-container {
+        margin-top: 0.5rem;
+      }
+
+      .bbq-widget {
+        margin-bottom: 0.5rem;
+      }
+    `,
+        ],
+    })
+], WidgetRendererComponent);
+export { WidgetRendererComponent };
+//# sourceMappingURL=widget-renderer.component.js.map

package/dist/widget-renderer.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"widget-renderer.component.js","sourceRoot":"","sources":["../src/widget-renderer.component.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@bbq-chat/widgets-angular",
+  "version": "1.0.0",
+  "description": "Angular components and services for BbQ ChatWidgets",
+  "license": "MIT",
+  "author": "BbQ ChatWidgets Contributors",
+  "homepage": "https://github.com/JeanMarcMbouma/BbQ.ChatWidgets",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/JeanMarcMbouma/BbQ.ChatWidgets.git",
+    "directory": "js-angular"
+  },
+  "bugs": {
+    "url": "https://github.com/JeanMarcMbouma/BbQ.ChatWidgets/issues"
+  },
+  "keywords": [
+    "angular",
+    "chat",
+    "widgets",
+    "ui",
+    "components",
+    "bbq-chat"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsc && node scripts/build.mjs",
+    "build:watch": "tsc --watch",
+    "test": "echo \"No tests yet\"",
+    "lint": "eslint src --ext .ts",
+    "lint:fix": "eslint src --ext .ts --fix",
+    "format": "prettier --write \"src/**/*.ts\"",
+    "type-check": "tsc --noEmit",
+    "prepublishOnly": "npm run build && npm run lint"
+  },
+  "peerDependencies": {
+    "@angular/common": ">=17.0.0",
+    "@angular/core": ">=17.0.0",
+    "@bbq-chat/widgets": "^1.0.0"
+  },
+  "devDependencies": {
+    "@angular/common": "^17.3.0",
+    "@angular/core": "^17.3.0",
+    "@bbq-chat/widgets": "file:../js",
+    "@types/node": "^20.10.0",
+    "@typescript-eslint/eslint-plugin": "^6.13.0",
+    "@typescript-eslint/parser": "^6.13.0",
+    "esbuild": "^0.27.2",
+    "eslint": "^8.55.0",
+    "prettier": "^3.1.1",
+    "rxjs": "^7.8.0",
+    "tslib": "^2.3.0",
+    "typescript": "^5.4.2",
+    "zone.js": "^0.14.3"
+  },
+  "engines": {
+    "node": ">=14.0.0"
+  }
+}

package/src/custom-widget-renderer.types.ts

@@ -0,0 +1,120 @@
+import { Type, TemplateRef } from '@angular/core';
+import { ChatWidget } from '@bbq-chat/widgets';
+
+/**
+ * Context provided to template-based custom widget renderers
+ */
+export interface WidgetTemplateContext {
+  /**
+   * The widget instance being rendered
+   */
+  $implicit: ChatWidget;
+  
+  /**
+   * The widget instance (alternative access)
+   */
+  widget: ChatWidget;
+  
+  /**
+   * Emit a widget action
+   */
+  emitAction: (actionName: string, payload: unknown) => void;
+}
+
+/**
+ * Interface for component-based custom widget renderers
+ */
+export interface CustomWidgetComponent {
+  /**
+   * The widget instance to render
+   */
+  widget: ChatWidget;
+  
+  /**
+   * Event emitter for widget actions (optional, will be set by the renderer)
+   */
+  widgetAction?: (actionName: string, payload: unknown) => void;
+}
+
+/**
+ * Type for custom widget renderer functions that return HTML strings
+ */
+export type CustomWidgetHtmlRenderer = (widget: ChatWidget) => string;
+
+/**
+ * Type for custom widget renderer configurations
+ */
+export type CustomWidgetRenderer =
+  | CustomWidgetHtmlRenderer
+  | Type<CustomWidgetComponent>
+  | TemplateRef<WidgetTemplateContext>;
+
+/**
+ * Configuration for registering a custom widget renderer
+ */
+export interface CustomWidgetRendererConfig {
+  /**
+   * The widget type identifier
+   */
+  type: string;
+  
+  /**
+   * The renderer: can be a function returning HTML, an Angular Component class, or a TemplateRef
+   */
+  renderer: CustomWidgetRenderer;
+}
+
+/**
+ * Type guard to check if a renderer is a TemplateRef
+ */
+export function isTemplateRenderer(
+  renderer: CustomWidgetRenderer
+): renderer is TemplateRef<WidgetTemplateContext> {
+  return (
+    renderer !== null &&
+    typeof renderer === 'object' &&
+    'createEmbeddedView' in renderer
+  );
+}
+
+/**
+ * Type guard to check if a renderer is an Angular Component
+ * 
+ * Note: This uses a heuristic check based on the following assumptions:
+ * 1. Components are constructor functions
+ * 2. Components have a prototype with a constructor property
+ * 3. Components typically use dependency injection (no required constructor params)
+ * 
+ * Limitation: This may not detect components with required constructor parameters.
+ * For edge cases, explicitly check your component's constructor signature.
+ * 
+ * Alternative: You can always register a wrapper component that has no required params.
+ */
+export function isComponentRenderer(
+  renderer: CustomWidgetRenderer
+): renderer is Type<CustomWidgetComponent> {
+  // Check if it's a function (constructor) but not a regular function renderer
+  if (typeof renderer !== 'function') {
+    return false;
+  }
+  
+  // Check for Angular component characteristics
+  // Components typically have prototype with constructor property
+  return (
+    renderer.prototype !== undefined &&
+    renderer.prototype.constructor === renderer &&
+    renderer.length === 0 // Constructor with no required params (Angular DI)
+  );
+}
+
+/**
+ * Type guard to check if a renderer is an HTML function
+ * 
+ * Note: This should be checked AFTER checking for component and template renderers
+ * since components are also functions but with additional properties.
+ */
+export function isHtmlRenderer(
+  renderer: CustomWidgetRenderer
+): renderer is CustomWidgetHtmlRenderer {
+  return typeof renderer === 'function';
+}

package/src/index.ts

@@ -0,0 +1,65 @@
+/**
+ * @bbq-chat/widgets-angular
+ * 
+ * Angular components and services for BbQ ChatWidgets
+ * 
+ * This package provides Angular-native components and services that wrap
+ * the core @bbq-chat/widgets library, making it easy to integrate chat
+ * widgets into Angular applications.
+ * 
+ * @packageDocumentation
+ */
+
+// Export components
+export { WidgetRendererComponent } from './widget-renderer.component';
+
+// Export services
+export { WidgetRegistryService } from './widget-registry.service';
+
+// Export custom widget renderer types
+export type {
+  CustomWidgetComponent,
+  CustomWidgetRenderer,
+  CustomWidgetHtmlRenderer,
+  CustomWidgetRendererConfig,
+  WidgetTemplateContext,
+} from './custom-widget-renderer.types';
+
+export {
+  isHtmlRenderer,
+  isComponentRenderer,
+  isTemplateRenderer,
+} from './custom-widget-renderer.types';
+
+// Re-export commonly used types and classes from core package
+export {
+  ChatWidget,
+} from '@bbq-chat/widgets';
+
+export type {
+  ButtonWidget,
+  CardWidget,
+  FormWidget,
+  InputWidget,
+  TextAreaWidget,
+  DropdownWidget,
+  SliderWidget,
+  ToggleWidget,
+  FileUploadWidget,
+  DatePickerWidget,
+  MultiSelectWidget,
+  ProgressBarWidget,
+  ThemeSwitcherWidget,
+  ImageWidget,
+  ImageCollectionWidget,
+} from '@bbq-chat/widgets';
+
+// Re-export utilities
+export {
+  SsrWidgetRenderer,
+  WidgetEventManager,
+  customWidgetRegistry,
+} from '@bbq-chat/widgets';
+
+// Version
+export const VERSION = '1.0.0';