@memberjunction/ng-chat 1.1.0

package/dist/lib/chat/chat.component.d.ts

@@ -0,0 +1,70 @@
+import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter } from '@angular/core';
+import { MarkdownService } from 'ngx-markdown';
+import * as i0 from "@angular/core";
+export declare class ChatWelcomeQuestion {
+    topLine: string;
+    bottomLine: string;
+    prompt: string;
+}
+export declare class ChatMessage {
+    message: string;
+    senderName: string;
+    senderType: 'user' | 'ai';
+    id?: any;
+    constructor(message: string, senderName: string, senderType: 'user' | 'ai', id?: any);
+}
+export declare class ChatComponent implements AfterViewInit {
+    private markdownService;
+    private cd;
+    InitialMessage: string;
+    Messages: ChatMessage[];
+    /**
+     * Optional, provide this to show an image for the AI. If not provided, a default robot icon will be shown.
+     */
+    AIImageURL: string;
+    AILargeImageURL: string;
+    /**
+     * Optional, provide up to 4 welcome questions with example prompts.
+     * These will be shown to the user when the chat is first opened and there are no messages.
+     */
+    WelcomeQuestions: ChatWelcomeQuestion[];
+    /**
+     * Optional, provide a prompt for the user when they click the clear all messages button.
+     */
+    ClearAllMessagesPrompt: string;
+    /**
+     * Set this to enable/disable sending of a message. Whenever the input is empty, this field will be
+     * ignored and the send button will be disabled.
+     */
+    AllowSend: boolean;
+    InternalAllowSend: boolean;
+    /**
+     * The placeholder text for the input field
+     */
+    Placeholder: string;
+    private _ShowWaitingIndicator;
+    get ShowWaitingIndicator(): boolean;
+    set ShowWaitingIndicator(value: boolean);
+    ngAfterViewInit(): void;
+    MessageAdded: EventEmitter<ChatMessage>;
+    ClearChatRequested: EventEmitter<void>;
+    private messagesContainer;
+    theInput: ElementRef | undefined;
+    currentMessage: string;
+    showingClearAllDialog: boolean;
+    constructor(markdownService: MarkdownService, cd: ChangeDetectorRef);
+    SendCurrentMessage(): void;
+    handleInputChange(event: any): void;
+    protected resizeTextInput(): void;
+    SendMessage(message: string, senderName: string, senderType: 'user' | 'ai', id: any, fireEvent?: boolean): void;
+    SendUserMessage(message: string): void;
+    HandleClearChat(): void;
+    ClearAllMessages(): void;
+    protected FocusTextArea(): void;
+    protected AppendMessage(message: ChatMessage, fireEvent?: boolean): Promise<void>;
+    protected ScrollMessagesToBottom(animate?: boolean): void;
+    ShowScrollToBottomButton: boolean;
+    handleCheckScroll(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ChatComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ChatComponent, "mj-chat", never, { "InitialMessage": { "alias": "InitialMessage"; "required": false; }; "Messages": { "alias": "Messages"; "required": false; }; "AIImageURL": { "alias": "AIImageURL"; "required": false; }; "AILargeImageURL": { "alias": "AILargeImageURL"; "required": false; }; "WelcomeQuestions": { "alias": "WelcomeQuestions"; "required": false; }; "ClearAllMessagesPrompt": { "alias": "ClearAllMessagesPrompt"; "required": false; }; "AllowSend": { "alias": "AllowSend"; "required": false; }; "Placeholder": { "alias": "Placeholder"; "required": false; }; "ShowWaitingIndicator": { "alias": "ShowWaitingIndicator"; "required": false; }; }, { "MessageAdded": "MessageAdded"; "ClearChatRequested": "ClearChatRequested"; }, never, never, false, never>;
+}

package/dist/lib/chat/chat.component.js

@@ -0,0 +1,408 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { LogError } from '@memberjunction/core';
+import * as i0 from "@angular/core";
+import * as i1 from "ngx-markdown";
+import * as i2 from "@angular/forms";
+import * as i3 from "@memberjunction/ng-container-directives";
+import * as i4 from "@progress/kendo-angular-indicators";
+import * as i5 from "@progress/kendo-angular-buttons";
+import * as i6 from "@progress/kendo-angular-dialog";
+const _c0 = ["messagesContainer"];
+const _c1 = ["theInput"];
+function ChatComponent_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "img", 15);
+} if (rf & 2) {
+    const ctx_r6 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("src", ctx_r6.AILargeImageURL, i0.ɵɵsanitizeUrl);
+} }
+function ChatComponent_Conditional_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 20);
+    i0.ɵɵlistener("click", function ChatComponent_Conditional_1_Conditional_7_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r11 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r11.SendUserMessage(ctx_r11.WelcomeQuestions[0].prompt)); });
+    i0.ɵɵelementStart(1, "span", 21);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r7 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r7.WelcomeQuestions[0].topLine);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r7.WelcomeQuestions[0].bottomLine);
+} }
+function ChatComponent_Conditional_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 20);
+    i0.ɵɵlistener("click", function ChatComponent_Conditional_1_Conditional_8_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r13 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r13.SendUserMessage(ctx_r13.WelcomeQuestions[1].prompt)); });
+    i0.ɵɵelementStart(1, "span", 21);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r8 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r8.WelcomeQuestions[1].topLine);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r8.WelcomeQuestions[1].bottomLine);
+} }
+function ChatComponent_Conditional_1_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 20);
+    i0.ɵɵlistener("click", function ChatComponent_Conditional_1_Conditional_10_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r16); const ctx_r15 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r15.SendUserMessage(ctx_r15.WelcomeQuestions[2].prompt)); });
+    i0.ɵɵelementStart(1, "span", 21);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r9 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r9.WelcomeQuestions[2].topLine);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r9.WelcomeQuestions[2].bottomLine);
+} }
+function ChatComponent_Conditional_1_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 20);
+    i0.ɵɵlistener("click", function ChatComponent_Conditional_1_Conditional_11_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r17 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r17.SendUserMessage(ctx_r17.WelcomeQuestions[3].prompt)); });
+    i0.ɵɵelementStart(1, "span", 21);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r10 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r10.WelcomeQuestions[3].topLine);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r10.WelcomeQuestions[3].bottomLine);
+} }
+function ChatComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 13)(1, "div", 14);
+    i0.ɵɵtemplate(2, ChatComponent_Conditional_1_Conditional_2_Template, 1, 1, "img", 15);
+    i0.ɵɵelementStart(3, "div", 16);
+    i0.ɵɵtext(4, "What can I help with today?");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(5, "div", 17)(6, "div", 18);
+    i0.ɵɵtemplate(7, ChatComponent_Conditional_1_Conditional_7_Template, 5, 2, "div", 19)(8, ChatComponent_Conditional_1_Conditional_8_Template, 5, 2, "div", 19);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "div", 18);
+    i0.ɵɵtemplate(10, ChatComponent_Conditional_1_Conditional_10_Template, 5, 2, "div", 19)(11, ChatComponent_Conditional_1_Conditional_11_Template, 5, 2, "div", 19);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(2, ctx_r0.AILargeImageURL ? 2 : -1);
+    i0.ɵɵadvance(5);
+    i0.ɵɵconditional(7, ctx_r0.WelcomeQuestions.length > 0 ? 7 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(8, ctx_r0.WelcomeQuestions.length > 1 ? 8 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(10, ctx_r0.WelcomeQuestions.length > 2 ? 10 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(11, ctx_r0.WelcomeQuestions.length > 3 ? 11 : -1);
+} }
+function ChatComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r20 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 22);
+    i0.ɵɵlistener("click", function ChatComponent_Conditional_6_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r20); const ctx_r19 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r19.ScrollMessagesToBottom()); });
+    i0.ɵɵelementEnd();
+} }
+function ChatComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kendo-loader", 23);
+} }
+function ChatComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    const _r22 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-dialog")(1, "p");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "kendo-dialog-actions")(4, "button", 24);
+    i0.ɵɵlistener("click", function ChatComponent_Conditional_17_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r22); const ctx_r21 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r21.HandleClearChat()); });
+    i0.ɵɵtext(5, "Yes");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "button", 25);
+    i0.ɵɵlistener("click", function ChatComponent_Conditional_17_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r22); const ctx_r23 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r23.showingClearAllDialog = false); });
+    i0.ɵɵtext(7, "No");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r5 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r5.ClearAllMessagesPrompt);
+} }
+export class ChatWelcomeQuestion {
+    constructor() {
+        this.topLine = "";
+        this.bottomLine = "";
+        this.prompt = "";
+    }
+}
+export class ChatMessage {
+    constructor(message, senderName, senderType, id = null) {
+        this.senderType = 'user';
+        this.message = message;
+        this.senderName = senderName;
+        this.senderType = senderType;
+        this.id = id;
+    }
+}
+export class ChatComponent {
+    get ShowWaitingIndicator() {
+        return this._ShowWaitingIndicator;
+    }
+    set ShowWaitingIndicator(value) {
+        var _a;
+        this._ShowWaitingIndicator = value;
+        (_a = this.cd) === null || _a === void 0 ? void 0 : _a.detectChanges(); // Manually trigger change detection
+        if (!value) {
+            this.FocusTextArea();
+        }
+    }
+    ngAfterViewInit() {
+        this.FocusTextArea();
+    }
+    constructor(markdownService, cd) {
+        this.markdownService = markdownService;
+        this.cd = cd;
+        this.InitialMessage = '';
+        this.Messages = [];
+        /**
+         * Optional, provide this to show an image for the AI. If not provided, a default robot icon will be shown.
+         */
+        this.AIImageURL = '';
+        this.AILargeImageURL = '';
+        /**
+         * Optional, provide up to 4 welcome questions with example prompts.
+         * These will be shown to the user when the chat is first opened and there are no messages.
+         */
+        this.WelcomeQuestions = [];
+        /**
+         * Optional, provide a prompt for the user when they click the clear all messages button.
+         */
+        this.ClearAllMessagesPrompt = 'Are you sure you want to clear all messages?';
+        /**
+         * Set this to enable/disable sending of a message. Whenever the input is empty, this field will be
+         * ignored and the send button will be disabled.
+         */
+        this.AllowSend = true;
+        this.InternalAllowSend = true;
+        /**
+         * The placeholder text for the input field
+         */
+        this.Placeholder = 'Type a message...';
+        this._ShowWaitingIndicator = false;
+        this.MessageAdded = new EventEmitter();
+        this.ClearChatRequested = new EventEmitter();
+        this.currentMessage = '';
+        this.showingClearAllDialog = false;
+        this.ShowScrollToBottomButton = false;
+    }
+    SendCurrentMessage() {
+        if (this.currentMessage.trim() !== '') {
+            this.SendMessage(this.currentMessage, 'User', 'user', null);
+            this.currentMessage = ''; // Clear the input field
+        }
+    }
+    handleInputChange(event) {
+        var _a;
+        const val = (_a = this.theInput) === null || _a === void 0 ? void 0 : _a.nativeElement.value;
+        this.InternalAllowSend = this.AllowSend && (val ? val.length > 0 : false);
+        this.resizeTextInput();
+    }
+    resizeTextInput() {
+        var _a;
+        try {
+            const textarea = (_a = this.theInput) === null || _a === void 0 ? void 0 : _a.nativeElement;
+            if (textarea) {
+                textarea.style.height = 'auto'; // Reset height to recalculate
+                textarea.style.height = `${textarea.scrollHeight}px`; // Set to scrollHeight    
+            }
+        }
+        catch (e) {
+            LogError(e);
+        }
+    }
+    SendMessage(message, senderName, senderType, id, fireEvent = true) {
+        const newMessage = new ChatMessage(message, senderName, senderType, id);
+        this.AppendMessage(newMessage, fireEvent);
+    }
+    SendUserMessage(message) {
+        this.SendMessage(message, 'User', 'user', null);
+    }
+    HandleClearChat() {
+        this.ClearChatRequested.emit();
+    }
+    ClearAllMessages() {
+        this.Messages = [];
+        this.messagesContainer.nativeElement.innerHTML = `<span>${this.InitialMessage}</span>`;
+        this.ScrollMessagesToBottom();
+        this.cd.detectChanges(); // Manually trigger change detection
+        this.FocusTextArea();
+        this.showingClearAllDialog = false;
+    }
+    FocusTextArea() {
+        setTimeout(() => { var _a; return (_a = this.theInput) === null || _a === void 0 ? void 0 : _a.nativeElement.focus(); }, 0); // use a timeout to ensure that angular has updated the DOM
+    }
+    AppendMessage(message, fireEvent = true) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const messageWrapElement = document.createElement('div');
+            messageWrapElement.className = "chat-message-wrap";
+            const imageElement = document.createElement('span');
+            if (message.senderType === 'ai') {
+                if (this.AIImageURL) {
+                    const img = document.createElement('img');
+                    img.src = this.AIImageURL;
+                    img.style.maxWidth = '24px';
+                    imageElement.appendChild(img);
+                }
+                else
+                    imageElement.classList.add('fa-solid', 'fa-robot');
+            }
+            else {
+                imageElement.classList.add('fa-solid', 'fa-user');
+            }
+            imageElement.classList.add("chat-message-image");
+            messageWrapElement.appendChild(imageElement);
+            const messageElement = document.createElement('div');
+            messageElement.innerHTML = yield this.markdownService.parse(message.message);
+            messageElement.className = "chat-message";
+            if (message.senderType === 'ai') {
+                messageElement.classList.add('chat-message-ai');
+            }
+            messageWrapElement.appendChild(messageElement);
+            this.Messages.push(message);
+            if (this.Messages.length === 1) {
+                // clear out the default message
+                this.messagesContainer.nativeElement.innerHTML = '';
+            }
+            this.messagesContainer.nativeElement.appendChild(messageWrapElement);
+            if (fireEvent)
+                this.MessageAdded.emit(message);
+            this.ScrollMessagesToBottom(false);
+            this.cd.detectChanges(); // Manually trigger change detection
+        });
+    }
+    ScrollMessagesToBottom(animate = true) {
+        try {
+            if (animate) {
+                const element = this.messagesContainer.nativeElement;
+                element.scrollTo({
+                    top: element.scrollHeight,
+                    behavior: 'smooth' // This enables the smooth scrolling
+                });
+            }
+            else {
+                this.messagesContainer.nativeElement.scrollTop = this.messagesContainer.nativeElement.scrollHeight;
+            }
+        }
+        catch (err) { }
+    }
+    handleCheckScroll() {
+        const element = this.messagesContainer.nativeElement;
+        if (element.scrollHeight - element.scrollTop > element.clientHeight) {
+            this.ShowScrollToBottomButton = true;
+        }
+        else {
+            this.ShowScrollToBottomButton = false;
+        }
+    }
+}
+ChatComponent.ɵfac = function ChatComponent_Factory(t) { return new (t || ChatComponent)(i0.ɵɵdirectiveInject(i1.MarkdownService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+ChatComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ChatComponent, selectors: [["mj-chat"]], viewQuery: function ChatComponent_Query(rf, ctx) { if (rf & 1) {
+        i0.ɵɵviewQuery(_c0, 7);
+        i0.ɵɵviewQuery(_c1, 5);
+    } if (rf & 2) {
+        let _t;
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.messagesContainer = _t.first);
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.theInput = _t.first);
+    } }, inputs: { InitialMessage: "InitialMessage", Messages: "Messages", AIImageURL: "AIImageURL", AILargeImageURL: "AILargeImageURL", WelcomeQuestions: "WelcomeQuestions", ClearAllMessagesPrompt: "ClearAllMessagesPrompt", AllowSend: "AllowSend", Placeholder: "Placeholder", ShowWaitingIndicator: "ShowWaitingIndicator" }, outputs: { MessageAdded: "MessageAdded", ClearChatRequested: "ClearChatRequested" }, decls: 18, vars: 10, consts: [["mjFillContainer", "", 1, "chat-wrapper"], ["class", "welcome-wrapper"], [1, "chat-messages", 3, "scroll"], ["messagesContainer", ""], ["class", "scroll-to-bottom fas fa-arrow-down"], [1, "chat-input-area"], ["type", "converging-spinner", "class", "loader"], [1, "text-area-wrapper"], [3, "ngModel", "disabled", "placeholder", "ngModelChange", "input", "keyup.enter"], ["theInput", ""], ["kendoButton", "", 3, "disabled", "click"], ["title", "Clear Chat", 1, "fa-solid", "fa-trash-can"], ["title", "Send Message", 1, "fas", "fa-solid", "fa-arrow-up"], [1, "welcome-wrapper"], [1, "welcome-message"], [3, "src"], [1, "welcome-header-text"], [1, "welcome-suggested-questions"], [1, "welcome-suggested-questions-col"], ["class", "welcome-question"], [1, "welcome-question", 3, "click"], [1, "welcome-question-header"], [1, "scroll-to-bottom", "fas", "fa-arrow-down", 3, "click"], ["type", "converging-spinner", 1, "loader"], ["kendoButton", "", "themeColor", "primary", 3, "click"], ["kendoButton", "", 3, "click"]], template: function ChatComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 0);
+        i0.ɵɵtemplate(1, ChatComponent_Conditional_1_Template, 12, 5, "div", 1);
+        i0.ɵɵelementStart(2, "div", 2, 3);
+        i0.ɵɵlistener("scroll", function ChatComponent_Template_div_scroll_2_listener() { return ctx.handleCheckScroll(); });
+        i0.ɵɵelementStart(4, "span");
+        i0.ɵɵtext(5);
+        i0.ɵɵelementEnd()();
+        i0.ɵɵtemplate(6, ChatComponent_Conditional_6_Template, 1, 0, "span", 4);
+        i0.ɵɵelementStart(7, "div", 5);
+        i0.ɵɵtemplate(8, ChatComponent_Conditional_8_Template, 1, 0, "kendo-loader", 6);
+        i0.ɵɵelementStart(9, "div", 7)(10, "textarea", 8, 9);
+        i0.ɵɵtwoWayListener("ngModelChange", function ChatComponent_Template_textarea_ngModelChange_10_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.currentMessage, $event) || (ctx.currentMessage = $event); return $event; });
+        i0.ɵɵlistener("input", function ChatComponent_Template_textarea_input_10_listener($event) { return ctx.handleInputChange($event); })("keyup.enter", function ChatComponent_Template_textarea_keyup_enter_10_listener() { return ctx.SendCurrentMessage(); });
+        i0.ɵɵtext(12, "            ");
+        i0.ɵɵelementEnd()();
+        i0.ɵɵelementStart(13, "button", 10);
+        i0.ɵɵlistener("click", function ChatComponent_Template_button_click_13_listener() { return ctx.showingClearAllDialog = true; });
+        i0.ɵɵelement(14, "span", 11);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(15, "button", 10);
+        i0.ɵɵlistener("click", function ChatComponent_Template_button_click_15_listener() { return ctx.SendCurrentMessage(); });
+        i0.ɵɵelement(16, "span", 12);
+        i0.ɵɵelementEnd()()();
+        i0.ɵɵtemplate(17, ChatComponent_Conditional_17_Template, 8, 1, "kendo-dialog");
+    } if (rf & 2) {
+        i0.ɵɵadvance();
+        i0.ɵɵconditional(1, ctx.Messages.length === 0 && !ctx.ShowWaitingIndicator ? 1 : -1);
+        i0.ɵɵadvance(4);
+        i0.ɵɵtextInterpolate(ctx.InitialMessage);
+        i0.ɵɵadvance();
+        i0.ɵɵconditional(6, ctx.ShowScrollToBottomButton ? 6 : -1);
+        i0.ɵɵadvance(2);
+        i0.ɵɵconditional(8, ctx.ShowWaitingIndicator ? 8 : -1);
+        i0.ɵɵadvance(2);
+        i0.ɵɵtwoWayProperty("ngModel", ctx.currentMessage);
+        i0.ɵɵproperty("disabled", ctx.ShowWaitingIndicator)("placeholder", ctx.Placeholder);
+        i0.ɵɵadvance(3);
+        i0.ɵɵproperty("disabled", ctx.Messages.length === 0 || ctx.ShowWaitingIndicator);
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("disabled", !ctx.InternalAllowSend || ctx.currentMessage.length === 0 || ctx.ShowWaitingIndicator);
+        i0.ɵɵadvance(2);
+        i0.ɵɵconditional(17, ctx.showingClearAllDialog ? 17 : -1);
+    } }, dependencies: [i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgModel, i3.FillContainer, i4.LoaderComponent, i5.ButtonComponent, i6.DialogComponent, i6.DialogActionsComponent], styles: [".loader[_ngcontent-%COMP%] {\n    position: absolute;\n    left: 0px;\n}\n\n.chat-wrapper[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    position: relative; \n\n}\n\n.chat-messages[_ngcontent-%COMP%] {\n    overflow-y: auto; \n\n    overflow-x: hidden; \n\n    \n\n    margin-bottom: 5px;\n\n    margin-top: 2px; \n\n\n    flex: 1;\n}\n\n\n\n.chat-messages[_ngcontent-%COMP%]::-webkit-scrollbar {\n    width: 0;\n    background: transparent; \n\n}\n\n\n\n.chat-messages[_ngcontent-%COMP%]:hover::-webkit-scrollbar {\n    width: 12px; \n\n    background-color: #f0f0f0; \n\n\n}\n\n\n\n.chat-messages[_ngcontent-%COMP%]:hover::-webkit-scrollbar-thumb {\n    background-color: #888; \n\n    opacity: 0.5; \n\n}\n\n\n\n.chat-messages[_ngcontent-%COMP%]:hover::-webkit-scrollbar-thumb {\n    border-radius: 10px;\n}\n\n\n\n.chat-messages[_ngcontent-%COMP%]:hover::-webkit-scrollbar-thumb:hover {\n    background: #555; \n\n}\n\n\n.chat-messages[_ngcontent-%COMP%] {\n    scrollbar-width: thin; \n\n    scrollbar-color: #888 #f0f0f0; \n\n}\n \n\n\n\n.chat-input-area[_ngcontent-%COMP%] {\n    background: #fff;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding-top: 12px;\n    min-height: 35px;\n    margin-bottom: 15px;\n}\n.chat-input-area[_ngcontent-%COMP%]    > button[_ngcontent-%COMP%] {\n    vertical-align: top;\n    width: 30px;\n    height: 30px;\n    margin-top: 3px;\n    border-radius: 12px;\n}\n.chat-input-area[_ngcontent-%COMP%]    > button[_ngcontent-%COMP%]:first-of-type {\n    margin-left: -40px;\n}\n.chat-input-area[_ngcontent-%COMP%]    > button[_ngcontent-%COMP%]:last-child {\n    margin-left: -65px;\n}\n\n.text-area-wrapper[_ngcontent-%COMP%] {\n    padding: 3px;\n    border: solid 1px rgba(0, 0, 0, 0.08) ;\n    border-radius: 15px;\n\n    margin-top: 4px;\n    margin-right: -1px;\n    min-height: 42px;\n    max-height: 100%; \n\n\n    overflow: hidden;    \n    align-items: center;\n\n    \n\n    max-width: 710px;    \n    width: 75%; \n\n    padding-right: 90px; \n\n} \n.text-area-wrapper[_ngcontent-%COMP%]    > textarea[_ngcontent-%COMP%] {\n    border: 0;\n    outline: 0;\n    resize: none;\n\n    min-height: 20px; \n\n\n    width: 100%;\n    overflow-y: hidden; \n\n\n    font-family: S\u00F6hne, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Ubuntu, Cantarell, \"Noto Sans\", sans-serif, \"Helvetica Neue\", Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    font-size: 1rem;\n\n    margin-left: 7px;\n    margin-top: 7px;\n    margin-bottom: 5px;\n}\n\n.text-area-wrapper[_ngcontent-%COMP%]    > textarea[_ngcontent-%COMP%]:disabled {\n    background-color: white;\n}\n\n\n  .chat-message-wrap {\n    display: flex;\n    align-items: flex-start; \n\n    margin-bottom: 10px;\n    margin-right: 10px;\n}\n\n  .chat-message-image {\n    margin-top: 12px;\n    font-size: 24px; \n\n    margin-right: 10px; \n\n    width: 50px;\n    flex-shrink: 0; \n    \n}\n\n\n\n  .chat-message {\n    padding-left: 7px;\n    padding-right: 7px;\n    margin-bottom: 10px;\n    border-radius: 5px;\n    background-color: rgb(255, 255, 240);\n    box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n    word-wrap: break-word;\n}\n\n  .chat-message-ai {\n    background-color: rgb(230, 246, 253);\n}\n\n.scroll-to-bottom[_ngcontent-%COMP%] {\n    position: absolute; \n\n    left: 50%; \n\n    transform: translateX(-50%); \n\n    bottom: 100px; \n\n    z-index: 1000; \n\n    border-radius: 50%;\n    width: 35px;\n    height: 35px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 22px;\n    background-color: #f8f8f8;\n    box-shadow: 0px 0px 5px rgba(0,0,0,0.3); \n\n    cursor: pointer;\n}\n\n\n\n\n\n.welcome-wrapper[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    height: 100%;\n    width: 100%;\n    overflow: hidden;\n}\n\n.welcome-message[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n    overflow: hidden;\n    height: 100%;\n}\n\n\n.welcome-message[_ngcontent-%COMP%]   img[_ngcontent-%COMP%] {\n    width: 120px;\n    height: 50px;\n    margin-bottom: 20px; \n\n}\n\n.welcome-header-text[_ngcontent-%COMP%] {\n    font-size: larger;\n    font-weight: bold;\n}\n\n\n\n.welcome-suggested-questions[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-content: center;\n}\n.welcome-suggested-questions-col[_ngcontent-%COMP%] {\n    display: flex;\n}\n\n\n\n.welcome-question[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column; \n\n    align-items: left;;\n    width: 300px;  \n    justify-content: space-between;\n    margin: 5px; \n\n    border: solid 1px rgba(41, 28, 28, 0.08);\n    border-radius: 15px;\n    padding: 10px;\n    cursor: pointer;\n}\n\n.welcome-question[_ngcontent-%COMP%]:hover {\n    background-color: rgba(0, 0, 0, 0.05);\n}\n\n\n.welcome-question-header[_ngcontent-%COMP%] {\n    font-size: 12pt;\n    font-weight: bold;\n    display: block; \n\n}\n\n\n\n.welcome-question[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:not(.welcome-question-header) {\n    font-weight: normal;\n    font-size: 10pt;\n}"] });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ChatComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-chat', template: "<div mjFillContainer class=\"chat-wrapper\">\n    @if(Messages.length === 0 && !ShowWaitingIndicator) {\n        <div class=\"welcome-wrapper\">\n            <div class='welcome-message'>\n                @if(AILargeImageURL) {\n                    <img [src]=\"AILargeImageURL\"/>\n                }\n                <div class=\"welcome-header-text\">What can I help with today?</div>\n            </div>\n            <div class='welcome-suggested-questions'>\n                <div class=\"welcome-suggested-questions-col\">\n                    @if (WelcomeQuestions.length > 0) {\n                        <div class=\"welcome-question\" (click)=\"SendUserMessage(WelcomeQuestions[0].prompt)\">\n                            <span class=\"welcome-question-header\">{{WelcomeQuestions[0].topLine}}</span>\n                            <span>{{WelcomeQuestions[0].bottomLine}}</span>\n                        </div>\n                    }\n                    @if (WelcomeQuestions.length > 1) {\n                        <div class=\"welcome-question\" (click)=\"SendUserMessage(WelcomeQuestions[1].prompt)\">\n                            <span class=\"welcome-question-header\">{{WelcomeQuestions[1].topLine}}</span>\n                            <span>{{WelcomeQuestions[1].bottomLine}}</span>\n                        </div>        \n                    }\n                </div>\n                <div class=\"welcome-suggested-questions-col\">\n                    @if (WelcomeQuestions.length > 2) {\n                        <div class=\"welcome-question\" (click)=\"SendUserMessage(WelcomeQuestions[2].prompt)\">\n                            <span class=\"welcome-question-header\">{{WelcomeQuestions[2].topLine}}</span>\n                            <span>{{WelcomeQuestions[2].bottomLine}}</span>\n                        </div>    \n                    }\n                    @if (WelcomeQuestions.length > 3) {\n                        <div class=\"welcome-question\" (click)=\"SendUserMessage(WelcomeQuestions[3].prompt)\">\n                            <span class=\"welcome-question-header\">{{WelcomeQuestions[3].topLine}}</span>\n                            <span>{{WelcomeQuestions[3].bottomLine}}</span>\n                        </div>        \n                    }\n                </div>\n            </div>\n        </div>        \n    }\n\n    <div class=\"chat-messages\" \n         #messagesContainer \n         (scroll)=\"handleCheckScroll()\">\n        <!-- messages go here -->\n        <span>{{InitialMessage}}</span>\n    </div>\n    @if (ShowScrollToBottomButton) {\n        <span class=\"scroll-to-bottom fas fa-arrow-down\" (click)=\"ScrollMessagesToBottom()\"></span>\n    }\n\n    <div class = \"chat-input-area\">\n        @if (ShowWaitingIndicator) {\n            <kendo-loader type=\"converging-spinner\" class=\"loader\"></kendo-loader>\n        }\n        <div class=\"text-area-wrapper\">\n            <textarea #theInput \n                        [(ngModel)]=\"currentMessage\" \n                        [disabled]=\"ShowWaitingIndicator\" \n                        [placeholder]=\"Placeholder\" \n                        (input)=\"handleInputChange($event)\"\n                        (keyup.enter)=\"SendCurrentMessage()\" >\n            </textarea>\n        </div>\n        <button kendoButton \n                [disabled]=\"Messages.length === 0 || ShowWaitingIndicator\"\n                (click)=\"showingClearAllDialog = true\">\n            <span class=\"fa-solid fa-trash-can\" title=\"Clear Chat\">\n            </span>\n        </button>\n        <button kendoButton\n                [disabled]=\"!InternalAllowSend || currentMessage.length === 0 || ShowWaitingIndicator\" \n                (click)=\"SendCurrentMessage()\">\n                <span class=\"fas fa-solid fa-arrow-up\" title=\"Send Message\"></span>\n        </button>\n    </div>\n</div>\n@if (showingClearAllDialog) {\n    <kendo-dialog>\n        <p>{{ClearAllMessagesPrompt}}</p>\n          <kendo-dialog-actions>\n            <button kendoButton (click)=\"HandleClearChat()\" themeColor=\"primary\">Yes</button>\n            <button kendoButton (click)=\"showingClearAllDialog = false\">No</button>\n          </kendo-dialog-actions>\n    </kendo-dialog>\n}\n", styles: [".loader {\n    position: absolute;\n    left: 0px;\n}\n\n.chat-wrapper {\n    display: flex;\n    flex-direction: column;\n    position: relative; /* Add this line if the wrapper needs to be a reference point */\n}\n\n.chat-messages {\n    overflow-y: auto; /* enable scrolling if the content overflows */\n    overflow-x: hidden; /* hide horizontal scrollbar */\n    /* border: solid 1px rgba(0, 0, 0, 0.08); */\n    margin-bottom: 5px;\n\n    margin-top: 2px; /* align it with the top of converation history exactly*/\n\n    flex: 1;\n}\n\n/* Hide scrollbar for Chrome, Safari and Opera */\n.chat-messages::-webkit-scrollbar {\n    width: 0;\n    background: transparent; /* Optional: just make scrollbar invisible */\n}\n\n/* Optional: Show scrollbar on hover */\n.chat-messages:hover::-webkit-scrollbar {\n    width: 12px; /* Adjust the width of the scrollbar here */\n    background-color: #f0f0f0; /* Adjust the background color of the scrollbar here */\n\n}\n\n/* Handle on hover */\n.chat-messages:hover::-webkit-scrollbar-thumb {\n    background-color: #888; /* Adjust the color of the scrollbar handle here */\n    opacity: 0.5; /* Adjust the opacity of the scrollbar handle here */\n}\n\n/* Handle rounded corners */\n.chat-messages:hover::-webkit-scrollbar-thumb {\n    border-radius: 10px;\n}\n\n/* Optional: handle's hover effect */\n.chat-messages:hover::-webkit-scrollbar-thumb:hover {\n    background: #555; /* Adjust hover color here */\n}\n/* Works on Firefox */\n.chat-messages {\n    scrollbar-width: thin; /* \"auto\" or \"thin\" */\n    scrollbar-color: #888 #f0f0f0; /* thumb and track color */\n}\n \n\n\n\n.chat-input-area {\n    background: #fff;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding-top: 12px;\n    min-height: 35px;\n    margin-bottom: 15px;\n}\n.chat-input-area > button {\n    vertical-align: top;\n    width: 30px;\n    height: 30px;\n    margin-top: 3px;\n    border-radius: 12px;\n}\n.chat-input-area > button:first-of-type {\n    margin-left: -40px;\n}\n.chat-input-area > button:last-child {\n    margin-left: -65px;\n}\n\n.text-area-wrapper {\n    padding: 3px;\n    border: solid 1px rgba(0, 0, 0, 0.08) ;\n    border-radius: 15px;\n\n    margin-top: 4px;\n    margin-right: -1px;\n    min-height: 42px;\n    max-height: 100%; /* Prevent it from growing beyond the container */\n\n    overflow: hidden;    \n    align-items: center;\n\n    /*combined width and padding is 800*/\n    max-width: 710px;    \n    width: 75%; /*take up 75% but no more than 710px*/\n    padding-right: 90px; /* Space for the buttons */\n} \n.text-area-wrapper > textarea {\n    border: 0;\n    outline: 0;\n    resize: none;\n\n    min-height: 20px; /* Initial height */\n\n    width: 100%;\n    overflow-y: hidden; /* Hide scrollbar */\n\n    font-family: S\u00F6hne, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Ubuntu, Cantarell, \"Noto Sans\", sans-serif, \"Helvetica Neue\", Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    font-size: 1rem;\n\n    margin-left: 7px;\n    margin-top: 7px;\n    margin-bottom: 5px;\n}\n\n.text-area-wrapper > textarea:disabled {\n    background-color: white;\n}\n\n\n::ng-deep .chat-message-wrap {\n    display: flex;\n    align-items: flex-start; /* Align items to the top */\n    margin-bottom: 10px;\n    margin-right: 10px;\n}\n\n::ng-deep .chat-message-image {\n    margin-top: 12px;\n    font-size: 24px; /* Adjust size as necessary */\n    margin-right: 10px; /* Space between the icon and the message text */\n    width: 50px;\n    flex-shrink: 0; /* Prevents the icon from shrinking */    \n}\n\n/* Styling for dynamic markdown content and message differentiation */\n::ng-deep .chat-message {\n    padding-left: 7px;\n    padding-right: 7px;\n    margin-bottom: 10px;\n    border-radius: 5px;\n    background-color: rgb(255, 255, 240);\n    box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n    word-wrap: break-word;\n}\n\n::ng-deep .chat-message-ai {\n    background-color: rgb(230, 246, 253);\n}\n\n.scroll-to-bottom {\n    position: absolute; /* Or absolute, depending on your layout specifics */\n    left: 50%; /* Start from the middle of the container */\n    transform: translateX(-50%); /* Move it back by half of its own width to truly center it */\n    bottom: 100px; /* Adjust based on the height of your input area */\n    z-index: 1000; /* Make sure it's above all other content */\n    border-radius: 50%;\n    width: 35px;\n    height: 35px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 22px;\n    background-color: #f8f8f8;\n    box-shadow: 0px 0px 5px rgba(0,0,0,0.3); /* Optional: Adds a subtle shadow for better visibility */\n    cursor: pointer;\n}\n\n\n\n/* Center the welcome message vertically and horizontally */\n.welcome-wrapper {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    height: 100%;\n    width: 100%;\n    overflow: hidden;\n}\n\n.welcome-message {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n    overflow: hidden;\n    height: 100%;\n}\n\n\n.welcome-message img {\n    width: 120px;\n    height: 50px;\n    margin-bottom: 20px; /* Adds some space between the image and the text below */\n}\n\n.welcome-header-text {\n    font-size: larger;\n    font-weight: bold;\n}\n\n/* Position the welcome-suggested-questions at the bottom of its container */\n.welcome-suggested-questions {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-content: center;\n}\n.welcome-suggested-questions-col {\n    display: flex;\n}\n\n/* Flex layout for questions, two per row */\n.welcome-question {\n    display: flex;\n    flex-direction: column; /* Stack the header and text vertically */\n    align-items: left;;\n    width: 300px;  \n    justify-content: space-between;\n    margin: 5px; /* Adds some space around each question */\n    border: solid 1px rgba(41, 28, 28, 0.08);\n    border-radius: 15px;\n    padding: 10px;\n    cursor: pointer;\n}\n\n.welcome-question:hover {\n    background-color: rgba(0, 0, 0, 0.05);\n}\n\n\n.welcome-question-header {\n    font-size: 12pt;\n    font-weight: bold;\n    display: block; /* Ensures the header is on its own line */\n}\n\n/* Non-bold text for the content below the header */\n.welcome-question span:not(.welcome-question-header) {\n    font-weight: normal;\n    font-size: 10pt;\n}\n"] }]
+    }], () => [{ type: i1.MarkdownService }, { type: i0.ChangeDetectorRef }], { InitialMessage: [{
+            type: Input
+        }], Messages: [{
+            type: Input
+        }], AIImageURL: [{
+            type: Input
+        }], AILargeImageURL: [{
+            type: Input
+        }], WelcomeQuestions: [{
+            type: Input
+        }], ClearAllMessagesPrompt: [{
+            type: Input
+        }], AllowSend: [{
+            type: Input
+        }], Placeholder: [{
+            type: Input
+        }], ShowWaitingIndicator: [{
+            type: Input
+        }], MessageAdded: [{
+            type: Output
+        }], ClearChatRequested: [{
+            type: Output
+        }], messagesContainer: [{
+            type: ViewChild,
+            args: ['messagesContainer', { static: true }]
+        }], theInput: [{
+            type: ViewChild,
+            args: ['theInput']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ChatComponent, { className: "ChatComponent", filePath: "src/lib/chat/chat.component.ts", lineNumber: 30 }); })();

package/dist/lib/module.d.ts

@@ -0,0 +1,14 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./chat/chat.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/forms";
+import * as i4 from "@memberjunction/ng-container-directives";
+import * as i5 from "@progress/kendo-angular-indicators";
+import * as i6 from "@progress/kendo-angular-buttons";
+import * as i7 from "@progress/kendo-angular-dialog";
+import * as i8 from "ngx-markdown";
+export declare class ChatModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ChatModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ChatModule, [typeof i1.ChatComponent], [typeof i2.CommonModule, typeof i3.FormsModule, typeof i4.ContainerDirectivesModule, typeof i5.IndicatorsModule, typeof i6.ButtonsModule, typeof i7.DialogModule, typeof i8.MarkdownModule], [typeof i1.ChatComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<ChatModule>;
+}

package/dist/lib/module.js

@@ -0,0 +1,50 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+// Markdown
+import { MarkdownModule } from 'ngx-markdown';
+// LOCAL
+import { ChatComponent } from './chat/chat.component';
+import { ContainerDirectivesModule } from '@memberjunction/ng-container-directives';
+import { IndicatorsModule } from '@progress/kendo-angular-indicators';
+import { ButtonsModule } from '@progress/kendo-angular-buttons';
+import { DialogModule } from '@progress/kendo-angular-dialog';
+import * as i0 from "@angular/core";
+import * as i1 from "ngx-markdown";
+export class ChatModule {
+}
+ChatModule.ɵfac = function ChatModule_Factory(t) { return new (t || ChatModule)(); };
+ChatModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: ChatModule });
+ChatModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule,
+        FormsModule,
+        ContainerDirectivesModule,
+        IndicatorsModule,
+        ButtonsModule,
+        DialogModule,
+        MarkdownModule.forRoot()] });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ChatModule, [{
+        type: NgModule,
+        args: [{
+                declarations: [
+                    ChatComponent
+                ],
+                imports: [
+                    CommonModule,
+                    FormsModule,
+                    ContainerDirectivesModule,
+                    IndicatorsModule,
+                    ButtonsModule,
+                    DialogModule,
+                    MarkdownModule.forRoot()
+                ],
+                exports: [
+                    ChatComponent
+                ]
+            }]
+    }], null, null); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(ChatModule, { declarations: [ChatComponent], imports: [CommonModule,
+        FormsModule,
+        ContainerDirectivesModule,
+        IndicatorsModule,
+        ButtonsModule,
+        DialogModule, i1.MarkdownModule], exports: [ChatComponent] }); })();

package/dist/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/chat/chat.component';
+export * from './lib/module';

package/dist/public-api.js

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface
+ */
+export * from './lib/chat/chat.component';
+export * from './lib/module';

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@memberjunction/ng-chat",
+  "version": "1.1.0",
+  "description": "MemberJunction: Reusable Chat Component - can be used for AI or peer to peer chat applications.",
+  "main": "./dist/public-api.js",
+  "typings": "./dist/public-api.d.ts",
+  "files": [
+    "/dist"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "ngc"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@angular/compiler": "~17.2.2",
+    "@angular/compiler-cli": "~17.2.2"
+  },
+  "peerDependencies": {
+    "@angular/common": "~17.2.2",
+    "@angular/core": "~17.2.2",
+    "@angular/forms": "~17.2.2"
+  },
+  "dependencies": {
+    "@memberjunction/codegen-lib": "1.2.0",
+    "@memberjunction/ng-container-directives": "1.2.0",
+    "@progress/kendo-angular-indicators": "~15.1.0",
+    "@progress/kendo-angular-buttons": "~15.1.0",
+    "@progress/kendo-angular-dialog": "~15.1.0",
+    "tslib": "^2.3.0",
+    "ngx-markdown": "^17.1.1"
+  },
+  "sideEffects": false
+}