@memberjunction/ng-explorer-core 0.9.79 → 0.9.116

package/dist/lib/ask-skip/ask-skip.component.js

@@ -1,488 +1,501 @@
-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, ViewChild } from '@angular/core';
-import { Metadata, RunView } from '@memberjunction/core';
-import { GraphQLDataProvider } from '@memberjunction/graphql-dataprovider';
-import { Container } from '@memberjunction/ng-container-directives';
-import { SkipDynamicReportComponent } from './skip-dynamic-report-wrapper';
-import * as i0 from "@angular/core";
-import * as i1 from "../../shared/shared.service";
-import * as i2 from "@angular/router";
-import * as i3 from "@angular/common";
-import * as i4 from "@angular/forms";
-import * as i5 from "@progress/kendo-angular-buttons";
-import * as i6 from "@progress/kendo-angular-indicators";
-import * as i7 from "@progress/kendo-angular-icons";
-import * as i8 from "@memberjunction/ng-container-directives";
-import * as i9 from "@progress/kendo-angular-listview";
-const _c0 = ["AskSkipPanel"];
-const _c1 = ["conversationList"];
-const _c2 = ["AskSkipInput"];
-function AskSkipComponent_ng_template_6_kendo_icon_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "kendo-icon", 22);
-} }
-function AskSkipComponent_ng_template_6_kendo_icon_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "kendo-icon", 23);
-} }
-function AskSkipComponent_ng_template_6_span_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span");
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const dataItem_r6 = i0.ɵɵnextContext().dataItem;
-    i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(dataItem_r6.Name);
-} }
-function AskSkipComponent_ng_template_6_textarea_5_Template(rf, ctx) { if (rf & 1) {
-    const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "textarea", 24);
-    i0.ɵɵlistener("ngModelChange", function AskSkipComponent_ng_template_6_textarea_5_Template_textarea_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r15); const dataItem_r6 = i0.ɵɵnextContext().dataItem; return i0.ɵɵresetView(dataItem_r6.Name = $event); });
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const dataItem_r6 = i0.ɵɵnextContext().dataItem;
-    i0.ɵɵproperty("ngModel", dataItem_r6.Name);
-} }
-function AskSkipComponent_ng_template_6_div_6_kendo_icon_1_Template(rf, ctx) { if (rf & 1) {
-    const _r23 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-icon", 30);
-    i0.ɵɵlistener("click", function AskSkipComponent_ng_template_6_div_6_kendo_icon_1_Template_kendo_icon_click_0_listener() { i0.ɵɵrestoreView(_r23); const dataItem_r6 = i0.ɵɵnextContext(2).dataItem; const ctx_r21 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r21.editConvo(dataItem_r6)); });
-    i0.ɵɵelementEnd();
-} }
-function AskSkipComponent_ng_template_6_div_6_kendo_icon_2_Template(rf, ctx) { if (rf & 1) {
-    const _r26 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-icon", 31);
-    i0.ɵɵlistener("click", function AskSkipComponent_ng_template_6_div_6_kendo_icon_2_Template_kendo_icon_click_0_listener() { i0.ɵɵrestoreView(_r26); const dataItem_r6 = i0.ɵɵnextContext(2).dataItem; const ctx_r24 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r24.deleteConvo(dataItem_r6)); });
-    i0.ɵɵelementEnd();
-} }
-function AskSkipComponent_ng_template_6_div_6_kendo_icon_3_Template(rf, ctx) { if (rf & 1) {
-    const _r29 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-icon", 32);
-    i0.ɵɵlistener("click", function AskSkipComponent_ng_template_6_div_6_kendo_icon_3_Template_kendo_icon_click_0_listener() { i0.ɵɵrestoreView(_r29); const dataItem_r6 = i0.ɵɵnextContext(2).dataItem; const ctx_r27 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r27.saveConvoName(dataItem_r6)); });
-    i0.ɵɵelementEnd();
-} }
-function AskSkipComponent_ng_template_6_div_6_kendo_icon_4_Template(rf, ctx) { if (rf & 1) {
-    const _r32 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-icon", 33);
-    i0.ɵɵlistener("click", function AskSkipComponent_ng_template_6_div_6_kendo_icon_4_Template_kendo_icon_click_0_listener() { i0.ɵɵrestoreView(_r32); const dataItem_r6 = i0.ɵɵnextContext(2).dataItem; const ctx_r30 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r30.cancelConvoEdit(dataItem_r6)); });
-    i0.ɵɵelementEnd();
-} }
-function AskSkipComponent_ng_template_6_div_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 25);
-    i0.ɵɵtemplate(1, AskSkipComponent_ng_template_6_div_6_kendo_icon_1_Template, 1, 0, "kendo-icon", 26);
-    i0.ɵɵtemplate(2, AskSkipComponent_ng_template_6_div_6_kendo_icon_2_Template, 1, 0, "kendo-icon", 27);
-    i0.ɵɵtemplate(3, AskSkipComponent_ng_template_6_div_6_kendo_icon_3_Template, 1, 0, "kendo-icon", 28);
-    i0.ɵɵtemplate(4, AskSkipComponent_ng_template_6_div_6_kendo_icon_4_Template, 1, 0, "kendo-icon", 29);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r11 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", !ctx_r11.ConversationEditMode);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", !ctx_r11.ConversationEditMode);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r11.ConversationEditMode);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r11.ConversationEditMode);
-} }
-function AskSkipComponent_ng_template_6_Template(rf, ctx) { if (rf & 1) {
-    const _r34 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 16);
-    i0.ɵɵlistener("click", function AskSkipComponent_ng_template_6_Template_div_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r34); const dataItem_r6 = restoredCtx.dataItem; const ctx_r33 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r33.selectConversation(dataItem_r6)); });
-    i0.ɵɵtemplate(1, AskSkipComponent_ng_template_6_kendo_icon_1_Template, 1, 0, "kendo-icon", 17);
-    i0.ɵɵtemplate(2, AskSkipComponent_ng_template_6_kendo_icon_2_Template, 1, 0, "kendo-icon", 18);
-    i0.ɵɵelementStart(3, "div", 19);
-    i0.ɵɵtemplate(4, AskSkipComponent_ng_template_6_span_4_Template, 2, 1, "span", 11);
-    i0.ɵɵtemplate(5, AskSkipComponent_ng_template_6_textarea_5_Template, 1, 1, "textarea", 20);
-    i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(6, AskSkipComponent_ng_template_6_div_6_Template, 5, 4, "div", 21);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const dataItem_r6 = ctx.dataItem;
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", (ctx_r1.SelectedConversation == null ? null : ctx_r1.SelectedConversation.ID) === dataItem_r6.ID ? "conversation-item-selected" : "")("title", dataItem_r6.Name);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", !ctx_r1.IsSkipProcessing(dataItem_r6));
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r1.SelectedConversation && ctx_r1.IsSkipProcessing(dataItem_r6));
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", dataItem_r6.ID !== (ctx_r1.SelectedConversation == null ? null : ctx_r1.SelectedConversation.ID) || !ctx_r1.ConversationEditMode);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", dataItem_r6.ID === (ctx_r1.SelectedConversation == null ? null : ctx_r1.SelectedConversation.ID) && ctx_r1.ConversationEditMode);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", (ctx_r1.SelectedConversation == null ? null : ctx_r1.SelectedConversation.ID) === dataItem_r6.ID);
-} }
-function AskSkipComponent_div_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div")(1, "div", 34)(2, "div", 35);
-    i0.ɵɵelement(3, "img", 36);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 37)(5, "div");
-    i0.ɵɵtext(6);
-    i0.ɵɵelementEnd()()()();
-} if (rf & 2) {
-    const message_r35 = ctx.$implicit;
-    const ctx_r3 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngClass", message_r35.Role.trim().toLowerCase() === "ai" ? "ai-message" : message_r35.Role.trim().toLowerCase() === "error" ? "error-message" : "user-message");
-    i0.ɵɵadvance(2);
-    i0.ɵɵpropertyInterpolate("src", message_r35.Role.trim().toLowerCase() === "ai" || message_r35.Role.trim().toLowerCase() === "error" ? "assets/Skip - Mark Only - Small.png" : ctx_r3.userImage(), i0.ɵɵsanitizeUrl);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("id", "skip_message_" + message_r35.ID);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r3.createDetailHtml(message_r35));
-} }
-function AskSkipComponent_div_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div");
-    i0.ɵɵelement(1, "kendo-loader");
-    i0.ɵɵelementEnd();
-} }
-const _c3 = function () { return { "item-border": true }; };
-class SkipMessage {
-    constructor() {
-        this.Type = 'user';
-        this.Message = '';
-        this.ID = 0;
-    }
-}
-export class SkipColumnInfo {
-}
-export class SkipSQLResults {
-}
-export class SkipChartOptions {
-}
-export class SkipData {
-}
-export class AskSkipComponent {
-    constructor(sharedService, renderer, injector, router, route, location) {
-        this.sharedService = sharedService;
-        this.renderer = renderer;
-        this.injector = injector;
-        this.router = router;
-        this.route = route;
-        this.location = location;
-        this.AllowSend = true;
-        this.Messages = [];
-        this.Conversations = [];
-        this.ConversationEditMode = false;
-        this._loaded = false;
-        this._scrollToBottom = false;
-        this._oldConvoName = '';
-        this._detailHtml = {};
-        this._processingStatus = {};
-    }
-    ngOnInit() {
-    }
-    ngOnDestroy() {
-        // Unsubscribe to prevent memory leaks
-        if (this.paramsSubscription) {
-            this.paramsSubscription.unsubscribe();
-        }
-    }
-    ngAfterViewInit() {
-        this.paramsSubscription = this.route.params.subscribe(params => {
-            if (!this._loaded) {
-                this._loaded = true; // do this once
-                const conversationId = params['conversationId'];
-                if (conversationId && !isNaN(conversationId)) {
-                    this.loadConversations(parseInt(conversationId, 10)); // Load the conversation based on the conversationId
-                }
-                else {
-                    this.loadConversations();
-                }
-            }
-        });
-    }
-    ngAfterViewChecked() {
-        if (this._scrollToBottom) {
-            this.scrollToBottom();
-        }
-        this._scrollToBottom = false;
-    }
-    loadConversations(conversationIdToLoad = undefined) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const md = new Metadata();
-            const rv = new RunView();
-            const result = yield rv.RunView({
-                EntityName: 'Conversations',
-                ExtraFilter: 'UserID=' + md.CurrentUser.ID,
-                OrderBy: 'CreatedAt DESC' // get in reverse order
-            });
-            if (result && result.Success) {
-                this.Conversations = result.Results;
-            }
-            if (this.Conversations.length === 0) {
-                // no conversations, so create a new one
-                this.createNewConversation();
-                this.sharedService.InvokeManualResize();
-            }
-            else if (conversationIdToLoad) {
-                // we have > 0 convos and we were asked to load a specific one
-                const convo = this.Conversations.find(c => c.ID == conversationIdToLoad);
-                if (convo) {
-                    this.selectConversation(convo);
-                }
-                else {
-                    // we didn't find the conversation so just select the first one
-                    this.selectConversation(this.Conversations[0]);
-                }
-            }
-            else {
-                // select the first conversation since no param was provided and we have > 0 convos
-                this.selectConversation(this.Conversations[0]);
-            }
-        });
-    }
-    editConvo(conversation) {
-        this._oldConvoName = conversation.Name;
-        this.ConversationEditMode = true;
-    }
-    cancelConvoEdit(conversation) {
-        conversation.Name = this._oldConvoName;
-        this.ConversationEditMode = false;
-    }
-    saveConvoName(conversation) {
-        return __awaiter(this, void 0, void 0, function* () {
-            let newConvoObject;
-            if (conversation.Save !== undefined) {
-                newConvoObject = conversation;
-            }
-            else {
-                const md = new Metadata();
-                newConvoObject = yield md.GetEntityObject('Conversations');
-                yield newConvoObject.Load(conversation.ID);
-                // now replace conversation in the list with the new object
-                this.Conversations = this.Conversations.map(c => c.ID == conversation.ID ? newConvoObject : c);
-            }
-            newConvoObject.Name = conversation.Name;
-            if (yield newConvoObject.Save())
-                this.ConversationEditMode = false;
-            else
-                this.sharedService.CreateSimpleNotification('Error saving conversation name', 'error', 5000);
-        });
-    }
-    deleteConvo(conversation) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (confirm('Are you sure you want to delete this conversation?')) {
-                // delete the conversation - we might need to load the entity if the current object isn't a "real object"
-                if (yield this.DeleteConversation(conversation.ID)) {
-                    // get the index of the conversation
-                    const idx = this.Conversations.findIndex(c => c.ID === conversation.ID);
-                    // remove the conversation from the list
-                    this.Conversations = this.Conversations.filter(c => c.ID != conversation.ID);
-                    if (this.Conversations.length > 0) {
-                        const newIdx = idx > 0 ? idx - 1 : 0;
-                        this.selectConversation(this.Conversations[newIdx]);
-                    }
-                    else
-                        this.Messages = [];
-                }
-                else {
-                    this.sharedService.CreateSimpleNotification('Error deleting conversation', 'error', 5000);
-                }
-            }
-        });
-    }
-    createNewConversation() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const md = new Metadata();
-            const convo = yield md.GetEntityObject('Conversations');
-            convo.NewRecord();
-            convo.Name = 'New Chat'; // default value
-            convo.UserID = md.CurrentUser.ID;
-            yield convo.Save();
-            this.Conversations = [convo, ...this.Conversations]; // do this way instead of unshift to ensure that binding refreshes
-            this.selectConversation(convo);
-            this._scrollToBottom = true; // this results in the angular after Viewchecked scrolling to bottom when it's done
-        });
-    }
-    onEnter(event) {
-        this.sendSkipQuestion();
-    }
-    selectConversation(conversation) {
-        var _a;
-        return __awaiter(this, void 0, void 0, function* () {
-            if (conversation && conversation.ID !== ((_a = this.SelectedConversation) === null || _a === void 0 ? void 0 : _a.ID)) {
-                // load up the conversation if not already the one that's loaded
-                this.Messages = []; // clear out the messages
-                const oldStatus = this._processingStatus[conversation.ID];
-                this._processingStatus[conversation.ID] = true;
-                this.SelectedConversation = conversation;
-                const md = new Metadata();
-                const rv = new RunView();
-                const result = yield rv.RunView({
-                    EntityName: 'Conversation Details',
-                    ExtraFilter: 'ConversationID=' + conversation.ID,
-                    OrderBy: 'CreatedAt ASC' // show messages in order of creation
-                });
-                if (result && result.Success) {
-                    this._detailHtml = {};
-                    this.Messages = result.Results;
-                    this._scrollToBottom = true; // this results in the angular after Viewchecked scrolling to bottom when it's done
-                }
-                this._processingStatus[conversation.ID] = oldStatus; // set back to old status as it might have been processing
-                this.sharedService.InvokeManualResize(500);
-                // ensure the list box has the conversation in view
-                this.scrollToConversation(conversation.ID);
-                // finally update the browser URL since we've changed the conversation ID
-                this.location.go('/askskip/' + conversation.ID);
-                //      this.router.navigate(['askskip', conversation.ID]);
-            }
-        });
-    }
-    scrollToConversation(conversationId) {
-        if (this.conversationList) {
-            const convoElement = this.conversationList.element.nativeElement;
-            const itemIndex = this.Conversations.findIndex(c => c.ID === conversationId);
-            // Find the item element within the container based on its index
-            const itemElement = Array.from(convoElement.querySelectorAll('[data-kendo-listview-item-index]'))
-                .find((el) => parseInt(el.getAttribute('data-kendo-listview-item-index'), 10) === itemIndex);
-            if (itemElement) {
-                setTimeout(() => {
-                    // do this within a timeout to ensure rendering is completed
-                    itemElement.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
-                }, 100);
-            }
-        }
-    }
-    sendSkipQuestion() {
-        var _a, _b, _c;
-        return __awaiter(this, void 0, void 0, function* () {
-            const convoID = this.SelectedConversation ? this.SelectedConversation.ID : -1;
-            if (this.SelectedConversation)
-                this._processingStatus[(_a = this.SelectedConversation) === null || _a === void 0 ? void 0 : _a.ID] = true;
-            const val = this.askSkipInput.nativeElement.value;
-            if (val && val.length > 0) {
-                this.AllowSend = false;
-                const md = new Metadata();
-                const convoDetail = yield md.GetEntityObject('Conversation Details');
-                convoDetail.NewRecord();
-                convoDetail.Message = val;
-                convoDetail.Role = 'user';
-                this.Messages.push(convoDetail); // this is NOT saved here because it is saved on the server side. Later on in this code after the save we will update the object with the ID from the server
-                this.askSkipInput.nativeElement.value = '';
-                this._scrollToBottom = true; // this results in the angular after Viewchecked scrolling to bottom when it's done
-                const result = yield this.ExecuteAskSkipQuery(val, this.SelectedConversation);
-                if (result && result.ExecuteAskSkipQuery && result.ExecuteAskSkipQuery.Success) {
-                    if (convoID !== ((_b = this.SelectedConversation) === null || _b === void 0 ? void 0 : _b.ID)) {
-                        // this scenario arises when we have a selected convo change after we submitted our request to skip
-                        // so we do nothing here other than update the status. 
-                        this._processingStatus[convoID] = false;
-                    }
-                    else {
-                        const resultObject = JSON.parse(result.ExecuteAskSkipQuery.Result);
-                        if (!this.SelectedConversation) {
-                            const convo = yield md.GetEntityObject('Conversations');
-                            yield convo.Load(result.ExecuteAskSkipQuery.ConversationId);
-                            this._processingStatus[result.ExecuteAskSkipQuery.ConversationId] = true;
-                            this.Conversations.push(convo);
-                            this.SelectedConversation = convo;
-                        }
-                        else if (this.Messages.length === 1) {
-                            // we are on the first message so skip renamed the convo, use that 
-                            this.SelectedConversation.Name = resultObject.ReportTitle; // this will update the UI
-                            // the below LOOKS redundant to just updating this.SelectedConversation.Name, but it is needed to ensure that the list box is updated
-                            // otherwise Angular binding doesn't pick up the change without the below.
-                            const idx = this.Conversations.findIndex(c => { var _a; return c.ID === ((_a = this.SelectedConversation) === null || _a === void 0 ? void 0 : _a.ID); });
-                            if (idx >= 0) {
-                                // update our this.Conversations array to reflect the new name. First find the index of the conversation and then get that item and update it
-                                this.Conversations[idx].Name = this.SelectedConversation.Name;
-                            }
-                        }
-                        yield convoDetail.Load(result.ExecuteAskSkipQuery.UserMessageConversationDetailId); // update the object to load from DB
-                        const aiDetail = yield md.GetEntityObject('Conversation Details');
-                        yield aiDetail.Load(result.ExecuteAskSkipQuery.AIMessageConversationDetailId); // get record from the database
-                        this.Messages.push(aiDetail);
-                        // we don't create a user notification here in the client, that is done on the server and via GraphQL subscriptions it tells us and we update the UI automatically...
-                    }
-                }
-                else {
-                    const errorMessage = yield md.GetEntityObject('Conversation Details');
-                    errorMessage.NewRecord();
-                    errorMessage.Role = 'error';
-                    errorMessage.Message = 'Error took place';
-                    this.Messages.push(errorMessage);
-                    this.AllowSend = true;
-                }
-                this._scrollToBottom = true; // this results in the angular after Viewchecked scrolling to bottom when it's done
-                if (this.SelectedConversation)
-                    this._processingStatus[(_c = this.SelectedConversation) === null || _c === void 0 ? void 0 : _c.ID] = false;
-                this.AllowSend = true;
-                // invoke manual resize with a delay to ensure that the scroll to bottom has taken place
-                this.sharedService.InvokeManualResize(500);
-            }
-        });
-    }
-    createDetailHtml(detail) {
-        if (detail.ID !== null && detail.ID !== undefined && detail.ID > 0 && this._detailHtml[detail.ID]) {
-            // use cached HTML details for SAVED conversation details, don't do for NEW ONes where ID is null
-            return this._detailHtml[detail.ID];
-        }
-        else {
-            let sMessage = '';
-            if (detail.Role.trim().toLowerCase() === 'ai') {
-                const resultObject = JSON.parse(detail.Message);
-                const newId = this.Messages.length;
-                if (resultObject && resultObject.SQLResults && resultObject.SQLResults.results.length > 0) {
-                    sMessage = "Here's the report I've prepared for you, please let me know if you need anything changed or another report!";
-                }
-                else {
+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, ViewChild } from '@angular/core';
+import { Metadata, RunQuery, RunView } from '@memberjunction/core';
+import { GraphQLDataProvider } from '@memberjunction/graphql-dataprovider';
+import { Container } from '@memberjunction/ng-container-directives';
+import { SkipDynamicReportComponent } from './skip-dynamic-report-wrapper';
+import * as i0 from "@angular/core";
+import * as i1 from "../../shared/shared.service";
+import * as i2 from "@angular/router";
+import * as i3 from "@angular/common";
+import * as i4 from "@angular/forms";
+import * as i5 from "@progress/kendo-angular-buttons";
+import * as i6 from "@progress/kendo-angular-indicators";
+import * as i7 from "@progress/kendo-angular-icons";
+import * as i8 from "@memberjunction/ng-container-directives";
+import * as i9 from "@progress/kendo-angular-listview";
+const _c0 = ["AskSkipPanel"];
+const _c1 = ["conversationList"];
+const _c2 = ["AskSkipInput"];
+function AskSkipComponent_ng_template_8_kendo_svgicon_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kendo-svgicon", 22);
+} if (rf & 2) {
+    const ctx_r7 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("icon", ctx_r7.sharedService.kendoSVGIcon("comment"));
+} }
+function AskSkipComponent_ng_template_8_kendo_svgicon_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kendo-svgicon", 23);
+} if (rf & 2) {
+    const ctx_r8 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("icon", ctx_r8.sharedService.kendoSVGIcon("clock"));
+} }
+function AskSkipComponent_ng_template_8_span_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const dataItem_r6 = i0.ɵɵnextContext().dataItem;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(dataItem_r6.Name);
+} }
+function AskSkipComponent_ng_template_8_textarea_5_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "textarea", 24);
+    i0.ɵɵlistener("ngModelChange", function AskSkipComponent_ng_template_8_textarea_5_Template_textarea_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r15); const dataItem_r6 = i0.ɵɵnextContext().dataItem; return i0.ɵɵresetView(dataItem_r6.Name = $event); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const dataItem_r6 = i0.ɵɵnextContext().dataItem;
+    i0.ɵɵproperty("ngModel", dataItem_r6.Name);
+} }
+function AskSkipComponent_ng_template_8_div_6_kendo_svgicon_1_Template(rf, ctx) { if (rf & 1) {
+    const _r23 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-svgicon", 30);
+    i0.ɵɵlistener("click", function AskSkipComponent_ng_template_8_div_6_kendo_svgicon_1_Template_kendo_svgicon_click_0_listener() { i0.ɵɵrestoreView(_r23); const dataItem_r6 = i0.ɵɵnextContext(2).dataItem; const ctx_r21 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r21.editConvo(dataItem_r6)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r17 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("icon", ctx_r17.sharedService.kendoSVGIcon("edit"));
+} }
+function AskSkipComponent_ng_template_8_div_6_kendo_svgicon_2_Template(rf, ctx) { if (rf & 1) {
+    const _r26 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-svgicon", 31);
+    i0.ɵɵlistener("click", function AskSkipComponent_ng_template_8_div_6_kendo_svgicon_2_Template_kendo_svgicon_click_0_listener() { i0.ɵɵrestoreView(_r26); const dataItem_r6 = i0.ɵɵnextContext(2).dataItem; const ctx_r24 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r24.deleteConvo(dataItem_r6)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r18 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("icon", ctx_r18.sharedService.kendoSVGIcon("delete"));
+} }
+function AskSkipComponent_ng_template_8_div_6_kendo_svgicon_3_Template(rf, ctx) { if (rf & 1) {
+    const _r29 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-svgicon", 32);
+    i0.ɵɵlistener("click", function AskSkipComponent_ng_template_8_div_6_kendo_svgicon_3_Template_kendo_svgicon_click_0_listener() { i0.ɵɵrestoreView(_r29); const dataItem_r6 = i0.ɵɵnextContext(2).dataItem; const ctx_r27 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r27.saveConvoName(dataItem_r6)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r19 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("icon", ctx_r19.sharedService.kendoSVGIcon("check"));
+} }
+function AskSkipComponent_ng_template_8_div_6_kendo_svgicon_4_Template(rf, ctx) { if (rf & 1) {
+    const _r32 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-svgicon", 33);
+    i0.ɵɵlistener("click", function AskSkipComponent_ng_template_8_div_6_kendo_svgicon_4_Template_kendo_svgicon_click_0_listener() { i0.ɵɵrestoreView(_r32); const dataItem_r6 = i0.ɵɵnextContext(2).dataItem; const ctx_r30 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r30.cancelConvoEdit(dataItem_r6)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r20 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("icon", ctx_r20.sharedService.kendoSVGIcon("close"));
+} }
+function AskSkipComponent_ng_template_8_div_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 25);
+    i0.ɵɵtemplate(1, AskSkipComponent_ng_template_8_div_6_kendo_svgicon_1_Template, 1, 1, "kendo-svgicon", 26)(2, AskSkipComponent_ng_template_8_div_6_kendo_svgicon_2_Template, 1, 1, "kendo-svgicon", 27)(3, AskSkipComponent_ng_template_8_div_6_kendo_svgicon_3_Template, 1, 1, "kendo-svgicon", 28)(4, AskSkipComponent_ng_template_8_div_6_kendo_svgicon_4_Template, 1, 1, "kendo-svgicon", 29);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r11 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r11.ConversationEditMode);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r11.ConversationEditMode);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r11.ConversationEditMode);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r11.ConversationEditMode);
+} }
+function AskSkipComponent_ng_template_8_Template(rf, ctx) { if (rf & 1) {
+    const _r34 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 16);
+    i0.ɵɵlistener("click", function AskSkipComponent_ng_template_8_Template_div_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r34); const dataItem_r6 = restoredCtx.dataItem; const ctx_r33 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r33.selectConversation(dataItem_r6)); });
+    i0.ɵɵtemplate(1, AskSkipComponent_ng_template_8_kendo_svgicon_1_Template, 1, 1, "kendo-svgicon", 17)(2, AskSkipComponent_ng_template_8_kendo_svgicon_2_Template, 1, 1, "kendo-svgicon", 18);
+    i0.ɵɵelementStart(3, "div", 19);
+    i0.ɵɵtemplate(4, AskSkipComponent_ng_template_8_span_4_Template, 2, 1, "span", 11)(5, AskSkipComponent_ng_template_8_textarea_5_Template, 1, 1, "textarea", 20);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(6, AskSkipComponent_ng_template_8_div_6_Template, 5, 4, "div", 21);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const dataItem_r6 = ctx.dataItem;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", (ctx_r1.SelectedConversation == null ? null : ctx_r1.SelectedConversation.ID) === dataItem_r6.ID ? "conversation-item-selected" : "")("title", dataItem_r6.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r1.IsSkipProcessing(dataItem_r6));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.SelectedConversation && ctx_r1.IsSkipProcessing(dataItem_r6));
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", dataItem_r6.ID !== (ctx_r1.SelectedConversation == null ? null : ctx_r1.SelectedConversation.ID) || !ctx_r1.ConversationEditMode);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", dataItem_r6.ID === (ctx_r1.SelectedConversation == null ? null : ctx_r1.SelectedConversation.ID) && ctx_r1.ConversationEditMode);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", (ctx_r1.SelectedConversation == null ? null : ctx_r1.SelectedConversation.ID) === dataItem_r6.ID);
+} }
+function AskSkipComponent_div_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div")(1, "div", 34)(2, "div", 35);
+    i0.ɵɵelement(3, "img", 36);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 37)(5, "div");
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const message_r35 = ctx.$implicit;
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", message_r35.Role.trim().toLowerCase() === "ai" ? "ai-message" : message_r35.Role.trim().toLowerCase() === "error" ? "error-message" : "user-message");
+    i0.ɵɵadvance(2);
+    i0.ɵɵpropertyInterpolate("src", message_r35.Role.trim().toLowerCase() === "ai" || message_r35.Role.trim().toLowerCase() === "error" ? "assets/Skip - Mark Only - Small.png" : ctx_r3.userImage(), i0.ɵɵsanitizeUrl);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("id", "skip_message_" + message_r35.ID);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r3.createDetailHtml(message_r35));
+} }
+function AskSkipComponent_div_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div");
+    i0.ɵɵelement(1, "kendo-loader");
+    i0.ɵɵelementEnd();
+} }
+const _c3 = () => ({ "item-border": true });
+class SkipMessage {
+    constructor() {
+        this.Type = 'user';
+        this.Message = '';
+        this.ID = 0;
+    }
+}
+export class SkipColumnInfo {
+}
+export class SkipSQLResults {
+}
+export class SkipChartOptions {
+}
+export class SkipData {
+}
+export class AskSkipComponent {
+    constructor(sharedService, renderer, injector, router, route, location) {
+        this.sharedService = sharedService;
+        this.renderer = renderer;
+        this.injector = injector;
+        this.router = router;
+        this.route = route;
+        this.location = location;
+        this.AllowSend = true;
+        this.Messages = [];
+        this.Conversations = [];
+        this.ConversationEditMode = false;
+        this._loaded = false;
+        this._scrollToBottom = false;
+        this._oldConvoName = '';
+        this._detailHtml = {};
+        this._processingStatus = {};
+    }
+    ngOnInit() {
+    }
+    ngOnDestroy() {
+        // Unsubscribe to prevent memory leaks
+        if (this.paramsSubscription) {
+            this.paramsSubscription.unsubscribe();
+        }
+    }
+    ngAfterViewInit() {
+        this.paramsSubscription = this.route.params.subscribe(params => {
+            if (!this._loaded) {
+                this._loaded = true; // do this once
+                const conversationId = params['conversationId'];
+                if (conversationId && !isNaN(conversationId)) {
+                    this.loadConversations(parseInt(conversationId, 10)); // Load the conversation based on the conversationId
+                }
+                else {
+                    this.loadConversations();
+                }
+            }
+        });
+    }
+    ngAfterViewChecked() {
+        if (this._scrollToBottom) {
+            this.scrollToBottom();
+        }
+        this._scrollToBottom = false;
+    }
+    loadConversations(conversationIdToLoad = undefined) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const md = new Metadata();
+            const rv = new RunView();
+            const result = yield rv.RunView({
+                EntityName: 'Conversations',
+                ExtraFilter: 'UserID=' + md.CurrentUser.ID,
+                OrderBy: 'CreatedAt DESC' // get in reverse order
+            });
+            if (result && result.Success) {
+                this.Conversations = result.Results;
+            }
+            if (this.Conversations.length === 0) {
+                // no conversations, so create a new one
+                this.createNewConversation();
+                this.sharedService.InvokeManualResize();
+            }
+            else if (conversationIdToLoad) {
+                // we have > 0 convos and we were asked to load a specific one
+                const convo = this.Conversations.find(c => c.ID == conversationIdToLoad);
+                if (convo) {
+                    this.selectConversation(convo);
+                }
+                else {
+                    // we didn't find the conversation so just select the first one
+                    this.selectConversation(this.Conversations[0]);
+                }
+            }
+            else {
+                // select the first conversation since no param was provided and we have > 0 convos
+                this.selectConversation(this.Conversations[0]);
+            }
+        });
+    }
+    editConvo(conversation) {
+        this._oldConvoName = conversation.Name;
+        this.ConversationEditMode = true;
+    }
+    cancelConvoEdit(conversation) {
+        conversation.Name = this._oldConvoName;
+        this.ConversationEditMode = false;
+    }
+    saveConvoName(conversation) {
+        return __awaiter(this, void 0, void 0, function* () {
+            let newConvoObject;
+            if (conversation.Save !== undefined) {
+                newConvoObject = conversation;
+            }
+            else {
+                const md = new Metadata();
+                newConvoObject = yield md.GetEntityObject('Conversations');
+                yield newConvoObject.Load(conversation.ID);
+                // now replace conversation in the list with the new object
+                this.Conversations = this.Conversations.map(c => c.ID == conversation.ID ? newConvoObject : c);
+            }
+            newConvoObject.Name = conversation.Name;
+            if (yield newConvoObject.Save())
+                this.ConversationEditMode = false;
+            else
+                this.sharedService.CreateSimpleNotification('Error saving conversation name', 'error', 5000);
+        });
+    }
+    deleteConvo(conversation) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (confirm('Are you sure you want to delete this conversation?')) {
+                // delete the conversation - we might need to load the entity if the current object isn't a "real object"
+                if (yield this.DeleteConversation(conversation.ID)) {
+                    // get the index of the conversation
+                    const idx = this.Conversations.findIndex(c => c.ID === conversation.ID);
+                    // remove the conversation from the list
+                    this.Conversations = this.Conversations.filter(c => c.ID != conversation.ID);
+                    if (this.Conversations.length > 0) {
+                        const newIdx = idx > 0 ? idx - 1 : 0;
+                        this.selectConversation(this.Conversations[newIdx]);
+                    }
+                    else
+                        this.Messages = [];
+                }
+                else {
+                    this.sharedService.CreateSimpleNotification('Error deleting conversation', 'error', 5000);
+                }
+            }
+        });
+    }
+    createNewConversation() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const md = new Metadata();
+            const convo = yield md.GetEntityObject('Conversations');
+            convo.NewRecord();
+            convo.Name = 'New Chat'; // default value
+            convo.UserID = md.CurrentUser.ID;
+            yield convo.Save();
+            this.Conversations = [convo, ...this.Conversations]; // do this way instead of unshift to ensure that binding refreshes
+            this.selectConversation(convo);
+            this._scrollToBottom = true; // this results in the angular after Viewchecked scrolling to bottom when it's done
+        });
+    }
+    onEnter(event) {
+        this.sendSkipQuestion();
+    }
+    selectConversation(conversation) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            if (conversation && conversation.ID !== ((_a = this.SelectedConversation) === null || _a === void 0 ? void 0 : _a.ID)) {
+                // load up the conversation if not already the one that's loaded
+                this.Messages = []; // clear out the messages
+                const oldStatus = this._processingStatus[conversation.ID];
+                this._processingStatus[conversation.ID] = true;
+                this.SelectedConversation = conversation;
+                const md = new Metadata();
+                const rv = new RunView();
+                const result = yield rv.RunView({
+                    EntityName: 'Conversation Details',
+                    ExtraFilter: 'ConversationID=' + conversation.ID,
+                    OrderBy: 'CreatedAt ASC' // show messages in order of creation
+                });
+                if (result && result.Success) {
+                    this._detailHtml = {};
+                    this.Messages = result.Results;
+                    this._scrollToBottom = true; // this results in the angular after Viewchecked scrolling to bottom when it's done
+                }
+                this._processingStatus[conversation.ID] = oldStatus; // set back to old status as it might have been processing
+                this.sharedService.InvokeManualResize(500);
+                // ensure the list box has the conversation in view
+                this.scrollToConversation(conversation.ID);
+                // finally update the browser URL since we've changed the conversation ID
+                this.location.go('/askskip/' + conversation.ID);
+                //      this.router.navigate(['askskip', conversation.ID]);
+            }
+        });
+    }
+    scrollToConversation(conversationId) {
+        if (this.conversationList) {
+            const convoElement = this.conversationList.element.nativeElement;
+            const itemIndex = this.Conversations.findIndex(c => c.ID === conversationId);
+            // Find the item element within the container based on its index
+            const itemElement = Array.from(convoElement.querySelectorAll('[data-kendo-listview-item-index]'))
+                .find((el) => parseInt(el.getAttribute('data-kendo-listview-item-index'), 10) === itemIndex);
+            if (itemElement) {
+                setTimeout(() => {
+                    // do this within a timeout to ensure rendering is completed
+                    itemElement.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
+                }, 100);
+            }
+        }
+    }
+    sendSkipQuestion() {
+        var _a, _b, _c;
+        return __awaiter(this, void 0, void 0, function* () {
+            const convoID = this.SelectedConversation ? this.SelectedConversation.ID : -1;
+            if (this.SelectedConversation)
+                this._processingStatus[(_a = this.SelectedConversation) === null || _a === void 0 ? void 0 : _a.ID] = true;
+            const val = this.askSkipInput.nativeElement.value;
+            if (val && val.length > 0) {
+                this.AllowSend = false;
+                const md = new Metadata();
+                const convoDetail = yield md.GetEntityObject('Conversation Details');
+                convoDetail.NewRecord();
+                convoDetail.Message = val;
+                convoDetail.Role = 'user';
+                this.Messages.push(convoDetail); // this is NOT saved here because it is saved on the server side. Later on in this code after the save we will update the object with the ID from the server
+                this.askSkipInput.nativeElement.value = '';
+                this._scrollToBottom = true; // this results in the angular after Viewchecked scrolling to bottom when it's done
+                const result = yield this.ExecuteAskSkipQuery(val, this.SelectedConversation);
+                if (result && result.ExecuteAskSkipQuery && result.ExecuteAskSkipQuery.Success) {
+                    if (convoID !== ((_b = this.SelectedConversation) === null || _b === void 0 ? void 0 : _b.ID)) {
+                        // this scenario arises when we have a selected convo change after we submitted our request to skip
+                        // so we do nothing here other than update the status. 
+                        this._processingStatus[convoID] = false;
+                    }
+                    else {
+                        const resultObject = JSON.parse(result.ExecuteAskSkipQuery.Result);
+                        if (!this.SelectedConversation) {
+                            const convo = yield md.GetEntityObject('Conversations');
+                            yield convo.Load(result.ExecuteAskSkipQuery.ConversationId);
+                            this._processingStatus[result.ExecuteAskSkipQuery.ConversationId] = true;
+                            this.Conversations.push(convo);
+                            this.SelectedConversation = convo;
+                        }
+                        else if (this.Messages.length === 1) {
+                            // we are on the first message so skip renamed the convo, use that 
+                            this.SelectedConversation.Name = resultObject.ReportTitle; // this will update the UI
+                            // the below LOOKS redundant to just updating this.SelectedConversation.Name, but it is needed to ensure that the list box is updated
+                            // otherwise Angular binding doesn't pick up the change without the below.
+                            const idx = this.Conversations.findIndex(c => { var _a; return c.ID === ((_a = this.SelectedConversation) === null || _a === void 0 ? void 0 : _a.ID); });
+                            if (idx >= 0) {
+                                // update our this.Conversations array to reflect the new name. First find the index of the conversation and then get that item and update it
+                                this.Conversations[idx].Name = this.SelectedConversation.Name;
+                            }
+                        }
+                        yield convoDetail.Load(result.ExecuteAskSkipQuery.UserMessageConversationDetailId); // update the object to load from DB
+                        const aiDetail = yield md.GetEntityObject('Conversation Details');
+                        yield aiDetail.Load(result.ExecuteAskSkipQuery.AIMessageConversationDetailId); // get record from the database
+                        this.Messages.push(aiDetail);
+                        // we don't create a user notification here in the client, that is done on the server and via GraphQL subscriptions it tells us and we update the UI automatically...
+                    }
+                }
+                else {
+                    const errorMessage = yield md.GetEntityObject('Conversation Details');
+                    errorMessage.NewRecord();
+                    errorMessage.Role = 'error';
+                    errorMessage.Message = 'Error took place';
+                    this.Messages.push(errorMessage);
+                    this.AllowSend = true;
+                }
+                this._scrollToBottom = true; // this results in the angular after Viewchecked scrolling to bottom when it's done
+                if (this.SelectedConversation)
+                    this._processingStatus[(_c = this.SelectedConversation) === null || _c === void 0 ? void 0 : _c.ID] = false;
+                this.AllowSend = true;
+                // invoke manual resize with a delay to ensure that the scroll to bottom has taken place
+                this.sharedService.InvokeManualResize(500);
+            }
+        });
+    }
+    createDetailHtml(detail) {
+        if (detail.ID !== null && detail.ID !== undefined && detail.ID > 0 && this._detailHtml[detail.ID]) {
+            // use cached HTML details for SAVED conversation details, don't do for NEW ONes where ID is null
+            return this._detailHtml[detail.ID];
+        }
+        else {
+            let sMessage = '';
+            if (detail.Role.trim().toLowerCase() === 'ai') {
+                const resultObject = JSON.parse(detail.Message);
+                const newId = this.Messages.length;
+                if (resultObject && resultObject.SQLResults && resultObject.SQLResults.results.length > 0) {
+                    sMessage = "Here's the report I've prepared for you, please let me know if you need anything changed or another report!";
+                }
+                else {
                     sMessage = `<div class="alert alert-warning" role="alert">
                       <strong>No data returned.</strong>
-                      </div>`;
-                }
-                if (resultObject && resultObject.SQLResults && resultObject.SQLResults.results.length > 0) {
-                    this.addReportToConversation(detail, resultObject, detail.ID);
-                }
-            }
-            else {
-                sMessage = detail.Message;
-            }
-            if (detail.ID !== null && detail.ID !== undefined && detail.ID > 0)
-                this._detailHtml[detail.ID] = sMessage; // only cache it if it's a saved detail if it is for a new one don't bother yet...
-            return sMessage;
-        }
-    }
-    scrollToBottom() {
-        try {
-            this.askSkipPanel.nativeElement.scrollTop = this.askSkipPanel.nativeElement.scrollHeight;
-        }
-        catch (err) {
-        }
-    }
-    addReportToConversation(detail, result, messageId) {
-        // set a short timeout to allow Angular to render as the div we want to add the grid to won't exist yet otherwise
-        setTimeout(() => {
-            const componentRef = this.askSkip.viewContainerRef.createComponent(SkipDynamicReportComponent);
-            // Pass the data to the new chart
-            const report = componentRef.instance;
-            report.SkipData = result;
-            report.ConversationID = detail.ConversationID;
-            report.ConversationDetailID = detail.ID;
-            if (this.SelectedConversation)
-                report.ConversationName = this.SelectedConversation.Name;
-            this._scrollToBottom = true;
-            // // Get a reference to the root element of the component
-            // const elementRef = componentRef.location.nativeElement;
-            // // Add the class to the element
-            // this.renderer.addClass(elementRef, 'skip-dynamic-report-container');
-            // Locate the target child div by its ID
-            const targetChildDiv = document.getElementById('skip_message_' + messageId);
-            // Move the component's element to the required location
-            this.renderer.appendChild(targetChildDiv, componentRef.location.nativeElement);
-        }, 250);
-    }
-    userImage() {
-        return this.sharedService.CurrentUserImage;
-    }
-    ExecuteAskSkipQuery(question, SelectedConversation) {
-        return __awaiter(this, void 0, void 0, function* () {
-            try {
+                      </div>`;
+                }
+                if (resultObject && resultObject.SQLResults && resultObject.SQLResults.results.length > 0) {
+                    this.addReportToConversation(detail, resultObject, detail.ID);
+                }
+            }
+            else {
+                sMessage = detail.Message;
+            }
+            if (detail.ID !== null && detail.ID !== undefined && detail.ID > 0)
+                this._detailHtml[detail.ID] = sMessage; // only cache it if it's a saved detail if it is for a new one don't bother yet...
+            return sMessage;
+        }
+    }
+    scrollToBottom() {
+        try {
+            this.askSkipPanel.nativeElement.scrollTop = this.askSkipPanel.nativeElement.scrollHeight;
+        }
+        catch (err) {
+        }
+    }
+    addReportToConversation(detail, result, messageId) {
+        // set a short timeout to allow Angular to render as the div we want to add the grid to won't exist yet otherwise
+        setTimeout(() => {
+            const componentRef = this.askSkip.viewContainerRef.createComponent(SkipDynamicReportComponent);
+            // Pass the data to the new chart
+            const report = componentRef.instance;
+            report.SkipData = result;
+            report.ConversationID = detail.ConversationID;
+            report.ConversationDetailID = detail.ID;
+            if (this.SelectedConversation)
+                report.ConversationName = this.SelectedConversation.Name;
+            this._scrollToBottom = true;
+            // // Get a reference to the root element of the component
+            // const elementRef = componentRef.location.nativeElement;
+            // // Add the class to the element
+            // this.renderer.addClass(elementRef, 'skip-dynamic-report-container');
+            // Locate the target child div by its ID
+            const targetChildDiv = document.getElementById('skip_message_' + messageId);
+            // Move the component's element to the required location
+            this.renderer.appendChild(targetChildDiv, componentRef.location.nativeElement);
+        }, 250);
+    }
+    userImage() {
+        return this.sharedService.CurrentUserImage;
+    }
+    ExecuteAskSkipQuery(question, SelectedConversation) {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
                 const gql = `query ExecuteAskSkipQuery($userQuestion: String!, $conversationId: Int!) {
         ExecuteAskSkipQuery(UserQuestion: $userQuestion, ConversationId: $conversationId) {
           Success
@@ -492,100 +505,122 @@ export class AskSkipComponent {
           UserMessageConversationDetailId
           AIMessageConversationDetailId
         }
-      }`;
-                const result = yield GraphQLDataProvider.ExecuteGQL(gql, { userQuestion: question, conversationId: SelectedConversation ? SelectedConversation.ID : 0 });
-                return result;
-            }
-            catch (err) {
-                console.error(err);
-                const md = new Metadata();
-                const errorMessage = yield md.GetEntityObject('Conversation Details');
-                errorMessage.NewRecord();
-                errorMessage.Role = 'error';
-                errorMessage.Message = 'Error took place' + err;
-                this.Messages.push(errorMessage);
-                this.AllowSend = true;
-            }
-        });
-    }
-    DeleteConversation(ConversationID) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const md = new Metadata();
-            const convEntity = yield md.GetEntityObject('Conversations');
-            yield convEntity.Load(ConversationID);
-            return yield convEntity.Delete();
-        });
-    }
-    IsSkipProcessing(Conversation) {
-        if (this._processingStatus[Conversation.ID]) {
-            return this._processingStatus[Conversation.ID];
-        }
-        else
-            return false;
-    }
-}
-AskSkipComponent.ɵfac = function AskSkipComponent_Factory(t) { return new (t || AskSkipComponent)(i0.ɵɵdirectiveInject(i1.SharedService), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i2.Router), i0.ɵɵdirectiveInject(i2.ActivatedRoute), i0.ɵɵdirectiveInject(i3.Location)); };
-AskSkipComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AskSkipComponent, selectors: [["app-ask-skip"]], viewQuery: function AskSkipComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(Container, 7);
-        i0.ɵɵviewQuery(_c0, 7);
-        i0.ɵɵviewQuery(_c1, 5);
-        i0.ɵɵviewQuery(_c2, 5);
-    } if (rf & 2) {
-        let _t;
-        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.askSkip = _t.first);
-        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.askSkipPanel = _t.first);
-        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.conversationList = _t.first);
-        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.askSkipInput = _t.first);
-    } }, decls: 19, vars: 13, consts: [[1, "chat-container"], [1, "conversation-history"], ["kendoButton", "", 3, "click"], ["mjFillContainer", "", 1, "conversation-list", 3, "data", "itemClass", "fillWidth"], ["conversationList", ""], ["kendoListViewItemTemplate", ""], [1, "input-wrapper"], [1, "skip-title"], ["mjContainer", "", "mjFillContainer", "", 1, "messages", 3, "bottomMargin", "fillWidth"], ["AskSkipPanel", ""], [4, "ngFor", "ngForOf"], [4, "ngIf"], [1, "input-area"], ["type", "text", "placeholder", "Type your message...", 3, "disabled", "keyup.enter"], ["AskSkipInput", ""], ["kendoButton", "", 3, "disabled", "primary", "click"], [1, "conversation-item", 3, "ngClass", "title", "click"], ["name", "comment", "class", "conversation-icon", 4, "ngIf"], ["name", "clock", "class", "conversation-icon", 4, "ngIf"], [1, "text-container"], ["maxlength", "100", 3, "ngModel", "ngModelChange", 4, "ngIf"], ["class", "edit-conversation-panel", 4, "ngIf"], ["name", "comment", 1, "conversation-icon"], ["name", "clock", 1, "conversation-icon"], ["maxlength", "100", 3, "ngModel", "ngModelChange"], [1, "edit-conversation-panel"], ["name", "edit", "class", "edit-icon", 3, "click", 4, "ngIf"], ["name", "delete", "class", "delete-icon", 3, "click", 4, "ngIf"], ["name", "check", "class", "save-icon", 3, "click", 4, "ngIf"], ["name", "close", "class", "cancel-edit-icon", 3, "click", 4, "ngIf"], ["name", "edit", 1, "edit-icon", 3, "click"], ["name", "delete", 1, "delete-icon", 3, "click"], ["name", "check", 1, "save-icon", 3, "click"], ["name", "close", 1, "cancel-edit-icon", 3, "click"], [1, "message-row", 3, "ngClass"], [1, "message-image"], [1, "avatar", 3, "src"], ["mjContainer", "", 1, "message", 3, "id"]], template: function AskSkipComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "button", 2);
-        i0.ɵɵlistener("click", function AskSkipComponent_Template_button_click_2_listener() { return ctx.createNewConversation(); });
-        i0.ɵɵtext(3, "+ New Chat");
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(4, "kendo-listview", 3, 4);
-        i0.ɵɵtemplate(6, AskSkipComponent_ng_template_6_Template, 7, 7, "ng-template", 5);
-        i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(7, "div", 6)(8, "div", 7);
-        i0.ɵɵtext(9, "Ask Skip!");
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(10, "div", 8, 9);
-        i0.ɵɵtemplate(12, AskSkipComponent_div_12_Template, 7, 4, "div", 10);
-        i0.ɵɵtemplate(13, AskSkipComponent_div_13_Template, 2, 0, "div", 11);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(14, "div", 12)(15, "textarea", 13, 14);
-        i0.ɵɵlistener("keyup.enter", function AskSkipComponent_Template_textarea_keyup_enter_15_listener($event) { return ctx.onEnter($event); });
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(17, "button", 15);
-        i0.ɵɵlistener("click", function AskSkipComponent_Template_button_click_17_listener() { return ctx.sendSkipQuestion(); });
-        i0.ɵɵtext(18, "Send");
-        i0.ɵɵelementEnd()()()();
-    } if (rf & 2) {
-        i0.ɵɵadvance(4);
-        i0.ɵɵstyleProp("height", 280, "px");
-        i0.ɵɵproperty("data", ctx.Conversations)("itemClass", i0.ɵɵpureFunction0(12, _c3))("fillWidth", false);
-        i0.ɵɵadvance(6);
-        i0.ɵɵproperty("bottomMargin", 60)("fillWidth", false);
-        i0.ɵɵadvance(2);
-        i0.ɵɵproperty("ngForOf", ctx.Messages);
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", ctx.SelectedConversation && ctx.IsSkipProcessing(ctx.SelectedConversation));
-        i0.ɵɵadvance(2);
-        i0.ɵɵproperty("disabled", ctx.SelectedConversation && ctx.IsSkipProcessing(ctx.SelectedConversation));
-        i0.ɵɵadvance(2);
-        i0.ɵɵproperty("disabled", ctx.SelectedConversation !== undefined && ctx.IsSkipProcessing(ctx.SelectedConversation))("primary", true);
-    } }, dependencies: [i3.NgClass, i3.NgForOf, i3.NgIf, i4.DefaultValueAccessor, i4.NgControlStatus, i4.MaxLengthValidator, i4.NgModel, i5.Button, i6.LoaderComponent, i7.IconComponent, i8.FillContainer, i8.Container, i9.ItemTemplateDirective, i9.ListViewComponent], styles: [".chat-container[_ngcontent-%COMP%] {\r\n    padding: 0px;\r\n    display: flex;\r\n    flex-direction: row;\r\n    height: 100%;\r\n}\r\n\r\n.new-conversation[_ngcontent-%COMP%] {\r\n    height: 30px;\r\n    font-size: large;\r\n}\r\n\r\n.conversation-history[_ngcontent-%COMP%] {\r\n    min-width: 225px;\r\n    width: 225px;\r\n    height: 100%;\r\n    overflow-y: auto; \r\n    margin-right: 10px;\r\n    padding-top: 5px;\r\n\r\n    margin-top: 0px;  \r\n    padding-top: 0px;  \r\n}\r\n\r\n.conversation-history[_ngcontent-%COMP%]    > button[_ngcontent-%COMP%] {\r\n    height: 25px;\r\n}\r\n\r\n\r\n\r\n.skip-title[_ngcontent-%COMP%] {\r\n    font-size: larger;\r\n    margin-bottom: 5px;\r\n    height: 20px;\r\n    margin-top: 5px;\r\n}\r\n\r\n.conversation-list[_ngcontent-%COMP%] {\r\n    margin-top: 5px;\r\n    padding-top: 5px;\r\n}\r\n\r\n.messages[_ngcontent-%COMP%] {\r\n    flex-grow: 1; \r\n    overflow-y: auto; \r\n    overflow-x: hidden; \r\n    border: solid 1px rgba(0, 0, 0, 0.08);\r\n    margin-bottom: 5px;\r\n\r\n    margin-top: 2px; \r\n}\r\n\r\n.message-row[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    align-items: start; \r\n    border-bottom: solid 1px rgba(0, 0, 0, 0.08);\r\n    padding: 10px;\r\n    width: 100%;\r\n}\r\n\r\n.conversation-item[_ngcontent-%COMP%] {\r\n    margin-left: 5px;\r\n    margin-right: 5px;\r\n    padding-top: 10px;\r\n    padding-bottom: 10px;\r\n    padding-left: 5px;\r\n    padding-right: 5px;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n    overflow: hidden;\r\n    max-height: 150px;\r\n    font-size: 14px;\r\n\r\n    display: flex;\r\n    align-items: flex-start; \r\n\r\n    flex-wrap: wrap; \r\n}\r\n\r\n.text-container[_ngcontent-%COMP%] {\r\n    flex: 1; \r\n    display: flex;\r\n    flex-direction: column; \r\n}\r\n\r\n.text-container[_ngcontent-%COMP%]   textarea[_ngcontent-%COMP%] {\r\n    resize: none; \r\n    \r\n}\r\n\r\n.conversation-item[_ngcontent-%COMP%]    > .conversation-icon[_ngcontent-%COMP%] {\r\n    margin-top: 3px;\r\n}\r\n\r\n.conversation-item[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\r\n    display: inline-block;\r\n    white-space: pre-wrap;  \r\n    overflow: auto;\r\n    word-wrap: break-word;\r\n    margin-left: 3px;     \r\n}\r\n\r\n.conversation-item[_ngcontent-%COMP%]:hover {\r\n    background-color: rgba(0, 0, 0, 0.05);\r\n}\r\n.conversation-item-selected[_ngcontent-%COMP%] {\r\n    background-color: rgba(0, 0, 0, 0.15);\r\n}\r\n.conversation-item[_ngcontent-%COMP%]    > .conversation-icon[_ngcontent-%COMP%] {\r\n    margin-right: 11px;\r\n}\r\n.edit-conversation-panel[_ngcontent-%COMP%] {\r\n    width: 100%; \r\n    display: flex;\r\n    justify-content: flex-end; \r\n}\r\n.edit-conversation-panel[_ngcontent-%COMP%]    > .k-icon[_ngcontent-%COMP%] {\r\n    margin-left: 5px;\r\n    cursor: pointer;\r\n}\r\n.edit-conversation-panel[_ngcontent-%COMP%]    > .k-icon[_ngcontent-%COMP%]:hover {\r\n    color: #ff0000;\r\n}\r\n\r\n.message[_ngcontent-%COMP%] {\r\n    word-wrap: break-word;\r\n    width: 100%;\r\n    margin-right: 20px;\r\n}\r\n.message-image[_ngcontent-%COMP%] {\r\n    max-width: 45px;\r\n    max-height: 45px;\r\n    margin-right: 10px;\r\n    margin-left: 5px;\r\n    margin-bottom: 10px;\r\n}\r\n.message-image[_ngcontent-%COMP%]    > img[_ngcontent-%COMP%] {\r\n    max-width: 100%;\r\n    max-height: 100%;\r\n}\r\n.user-message[_ngcontent-%COMP%] {\r\n  background-color: white;\r\n  \r\n}\r\n\r\n.error-message[_ngcontent-%COMP%] {\r\n    background-color:lightpink;\r\n    \r\n  }\r\n  \r\n.ai-message[_ngcontent-%COMP%] {\r\n  background-color:rgba(0, 0, 0, 0.05);\r\n  \r\n}\r\n\r\n\r\n\r\n.user-message[_ngcontent-%COMP%] {\r\n    align-self: flex-start; \r\n}\r\n\r\n.ai-message[_ngcontent-%COMP%] {\r\n    align-self: flex-end; \r\n}\r\n\r\n.input-area[_ngcontent-%COMP%] {\r\n    height: 49px;\r\n    display: flex;\r\n    align-items: center;\r\n}\r\n\r\n.input-area[_ngcontent-%COMP%]    > button[_ngcontent-%COMP%] {\r\n    vertical-align: top;\r\n    width: 100px;\r\n    height: 40px;\r\n    font-size: large;\r\n    margin-top: 3px;\r\n    margin-left: 1px;\r\n}\r\n\r\n.input-area[_ngcontent-%COMP%]    > textarea[_ngcontent-%COMP%] {\r\n    padding: 3px;\r\n    border: solid 1px rgba(0, 0, 0, 0.08) ;\r\n    margin-top: 4px;\r\n    margin-right: 5px;\r\n    height: 42px;\r\n    font-size: large;\r\n    resize: none;\r\n    flex: 1;  \r\n} \r\n\r\n.input-wrapper[_ngcontent-%COMP%] {\r\n    flex-grow: 1; \r\n    height: 100%;\r\n}"] });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AskSkipComponent, [{
-        type: Component,
-        args: [{ selector: 'app-ask-skip', template: "<div class = \"chat-container\">\n    <div class=\"conversation-history\">\n        <button kendoButton (click)=\"createNewConversation()\" >+ New Chat</button>\n        <kendo-listview\n            class=\"conversation-list\"\n            [data]=\"Conversations\"\n            [style.height.px]=\"280\"\n            [itemClass]=\"{ 'item-border': true }\"\n            mjFillContainer \n            [fillWidth]=\"false\"\n            #conversationList\n            >\n            <ng-template kendoListViewItemTemplate let-dataItem=\"dataItem\">\n                <div class=\"conversation-item\" \n                     [ngClass]=\"SelectedConversation?.ID === dataItem.ID ? 'conversation-item-selected' : ''\"\n                     [title]=\"dataItem.Name\" \n                     (click)=\"selectConversation(dataItem)\"> \n                    <kendo-icon *ngIf=\"!IsSkipProcessing(dataItem)\" name=\"comment\" class=\"conversation-icon\"></kendo-icon>\n                    <kendo-icon *ngIf=\"SelectedConversation && IsSkipProcessing(dataItem)\" name=\"clock\" class=\"conversation-icon\"></kendo-icon>\n                    <div class=\"text-container\">\n                        <span *ngIf=\"dataItem.ID !== SelectedConversation?.ID || !ConversationEditMode\">{{ dataItem.Name }}</span>\n                        <textarea *ngIf=\"dataItem.ID === SelectedConversation?.ID && ConversationEditMode\" [(ngModel)]=\"dataItem.Name\" maxlength=\"100\"></textarea>\n                    </div>\n                    <div *ngIf=\"SelectedConversation?.ID === dataItem.ID\" class=\"edit-conversation-panel\">\n                        <kendo-icon *ngIf=\"!ConversationEditMode\" name=\"edit\" class=\"edit-icon\" (click)=\"editConvo(dataItem)\"></kendo-icon>\n                        <kendo-icon *ngIf=\"!ConversationEditMode\" name=\"delete\" class=\"delete-icon\" (click)=\"deleteConvo(dataItem)\"></kendo-icon>    \n                        <kendo-icon *ngIf=\"ConversationEditMode\" name=\"check\" class=\"save-icon\" (click)=\"saveConvoName(dataItem)\" ></kendo-icon>\n                        <kendo-icon *ngIf=\"ConversationEditMode\" name=\"close\" class=\"cancel-edit-icon\" (click)=\"cancelConvoEdit(dataItem)\"></kendo-icon>\n                    </div>\n                </div>\n            </ng-template>\n        </kendo-listview>\n    </div>\n    <div class=\"input-wrapper\">\n        <div class=\"skip-title\">Ask Skip!</div>\n        <div #AskSkipPanel mjContainer class=\"messages\" mjFillContainer [bottomMargin]=\"60\" [fillWidth]=\"false\">\n            <div *ngFor=\"let message of Messages\">  \n                <div class=\"message-row\" [ngClass]=\"message.Role.trim().toLowerCase() === 'ai' ? 'ai-message' : message.Role.trim().toLowerCase() === 'error' ? 'error-message' : 'user-message'\" >\n                    <div class=\"message-image\">\n                        <img src=\"{{message.Role.trim().toLowerCase() === 'ai' || message.Role.trim().toLowerCase() === 'error' ? 'assets/Skip - Mark Only - Small.png' : userImage()}}\" class=\"avatar\" />\n                    </div>\n                    <div class=\"message\" mjContainer [id]=\"'skip_message_' + message.ID\">\n                        <div>{{this.createDetailHtml(message)}}</div> \n                    </div>\n                </div>\n            </div>\n            <div *ngIf=\"SelectedConversation && IsSkipProcessing(SelectedConversation)\">\n                <kendo-loader></kendo-loader>\n            </div>\n        </div>\n        <div class=\"input-area\">\n            <textarea\n                    #AskSkipInput \n                    [disabled]=\"SelectedConversation && IsSkipProcessing(SelectedConversation)\" \n                    (keyup.enter)=\"onEnter($event)\" \n                    type=\"text\" \n                    placeholder=\"Type your message...\"></textarea>\n            <button kendoButton [disabled]=\"SelectedConversation !== undefined && IsSkipProcessing(SelectedConversation)\" (click)=\"sendSkipQuestion()\" [primary]=\"true\">Send</button>\n        </div>\n    </div>\n</div>     ", styles: [".chat-container {\r\n    padding: 0px;\r\n    display: flex;\r\n    flex-direction: row;\r\n    height: 100%;\r\n}\r\n\r\n.new-conversation {\r\n    height: 30px;\r\n    font-size: large;\r\n}\r\n\r\n.conversation-history {\r\n    min-width: 225px;\r\n    width: 225px;\r\n    height: 100%;\r\n    overflow-y: auto; /* Add scroll if the content exceeds the height */\r\n    margin-right: 10px;\r\n    padding-top: 5px;\r\n\r\n    margin-top: 0px;  \r\n    padding-top: 0px;  \r\n}\r\n\r\n.conversation-history > button {\r\n    height: 25px;\r\n}\r\n\r\n\r\n\r\n.skip-title {\r\n    font-size: larger;\r\n    margin-bottom: 5px;\r\n    height: 20px;\r\n    margin-top: 5px;\r\n}\r\n\r\n.conversation-list {\r\n    margin-top: 5px;\r\n    padding-top: 5px;\r\n}\r\n\r\n.messages {\r\n    flex-grow: 1; /* This will make the messages take the remaining space */\r\n    overflow-y: auto; /* enable scrolling if the content overflows */\r\n    overflow-x: hidden; /* hide horizontal scrollbar */\r\n    border: solid 1px rgba(0, 0, 0, 0.08);\r\n    margin-bottom: 5px;\r\n\r\n    margin-top: 2px; /* align it with the top of converation history exactly*/\r\n}\r\n\r\n.message-row {\r\n    display: flex;\r\n    align-items: start; /* if you want to align them at the top */\r\n    border-bottom: solid 1px rgba(0, 0, 0, 0.08);\r\n    padding: 10px;\r\n    width: 100%;\r\n}\r\n\r\n.conversation-item {\r\n    margin-left: 5px;\r\n    margin-right: 5px;\r\n    padding-top: 10px;\r\n    padding-bottom: 10px;\r\n    padding-left: 5px;\r\n    padding-right: 5px;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n    overflow: hidden;\r\n    max-height: 150px;\r\n    font-size: 14px;\r\n\r\n    display: flex;\r\n    align-items: flex-start; /* Align items to the top */\r\n\r\n    flex-wrap: wrap; /* Allow items to wrap to the next line */\r\n}\r\n\r\n.text-container {\r\n    flex: 1; /* Take up remaining space */\r\n    display: flex;\r\n    flex-direction: column; /* Stack children vertically */\r\n}\r\n\r\n.text-container textarea {\r\n    resize: none; /* Disable resizing */\r\n    /* Add more styles for the textarea if needed */\r\n}\r\n\r\n.conversation-item > .conversation-icon {\r\n    margin-top: 3px;\r\n}\r\n\r\n.conversation-item span {\r\n    display: inline-block;\r\n    white-space: pre-wrap;  /* Allow text to wrap */\r\n    overflow: auto;\r\n    word-wrap: break-word;\r\n    margin-left: 3px;     /* Move the text to the right */\r\n}\r\n\r\n.conversation-item:hover {\r\n    background-color: rgba(0, 0, 0, 0.05);\r\n}\r\n.conversation-item-selected {\r\n    background-color: rgba(0, 0, 0, 0.15);\r\n}\r\n.conversation-item > .conversation-icon {\r\n    margin-right: 11px;\r\n}\r\n.edit-conversation-panel {\r\n    width: 100%; /* Take up the full width */\r\n    display: flex;\r\n    justify-content: flex-end; /* Align icons to the right */\r\n}\r\n.edit-conversation-panel > .k-icon {\r\n    margin-left: 5px;\r\n    cursor: pointer;\r\n}\r\n.edit-conversation-panel > .k-icon:hover {\r\n    color: #ff0000;\r\n}\r\n\r\n.message {\r\n    word-wrap: break-word;\r\n    width: 100%;\r\n    margin-right: 20px;\r\n}\r\n.message-image {\r\n    max-width: 45px;\r\n    max-height: 45px;\r\n    margin-right: 10px;\r\n    margin-left: 5px;\r\n    margin-bottom: 10px;\r\n}\r\n.message-image > img {\r\n    max-width: 100%;\r\n    max-height: 100%;\r\n}\r\n.user-message {\r\n  background-color: white;\r\n  /* additional styling for user messages... */\r\n}\r\n\r\n.error-message {\r\n    background-color:lightpink;\r\n    /* additional styling for AI messages... */\r\n  }\r\n  \r\n.ai-message {\r\n  background-color:rgba(0, 0, 0, 0.05);\r\n  /* additional styling for AI messages... */\r\n}\r\n\r\n\r\n\r\n.user-message {\r\n    align-self: flex-start; /* align user messages to the left */\r\n}\r\n\r\n.ai-message {\r\n    align-self: flex-end; /* align AI messages to the right */\r\n}\r\n\r\n.input-area {\r\n    height: 49px;\r\n    display: flex;\r\n    align-items: center;\r\n}\r\n\r\n.input-area > button {\r\n    vertical-align: top;\r\n    width: 100px;\r\n    height: 40px;\r\n    font-size: large;\r\n    margin-top: 3px;\r\n    margin-left: 1px;\r\n}\r\n\r\n.input-area > textarea {\r\n    padding: 3px;\r\n    border: solid 1px rgba(0, 0, 0, 0.08) ;\r\n    margin-top: 4px;\r\n    margin-right: 5px;\r\n    height: 42px;\r\n    font-size: large;\r\n    resize: none;\r\n    flex: 1;  /* Take up remaining space */\r\n} \r\n\r\n.input-wrapper {\r\n    flex-grow: 1; /* This will make the input-wrapper take the remaining space */\r\n    height: 100%;\r\n}\r\n"] }]
-    }], function () { return [{ type: i1.SharedService }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i3.Location }]; }, { askSkip: [{
-            type: ViewChild,
-            args: [Container, { static: true }]
-        }], askSkipPanel: [{
-            type: ViewChild,
-            args: ['AskSkipPanel', { static: true }]
-        }], conversationList: [{
-            type: ViewChild,
-            args: ['conversationList', { static: false }]
-        }], askSkipInput: [{
-            type: ViewChild,
-            args: ['AskSkipInput']
-        }] }); })();
+      }`;
+                const result = yield GraphQLDataProvider.ExecuteGQL(gql, { userQuestion: question, conversationId: SelectedConversation ? SelectedConversation.ID : 0 });
+                return result;
+            }
+            catch (err) {
+                console.error(err);
+                const md = new Metadata();
+                const errorMessage = yield md.GetEntityObject('Conversation Details');
+                errorMessage.NewRecord();
+                errorMessage.Role = 'error';
+                errorMessage.Message = 'Error took place' + err;
+                this.Messages.push(errorMessage);
+                this.AllowSend = true;
+            }
+        });
+    }
+    DeleteConversation(ConversationID) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const md = new Metadata();
+            const convEntity = yield md.GetEntityObject('Conversations');
+            yield convEntity.Load(ConversationID);
+            return yield convEntity.Delete();
+        });
+    }
+    IsSkipProcessing(Conversation) {
+        if (this._processingStatus[Conversation.ID]) {
+            return this._processingStatus[Conversation.ID];
+        }
+        else
+            return false;
+    }
+    runQuery() {
+        return __awaiter(this, void 0, void 0, function* () {
+            // total test crap code, get rid of this once we have a real queries UI
+            const rq = new RunQuery();
+            // ask the user which query ID to run
+            const queryId = prompt('Enter the query ID to run');
+            if (queryId) {
+                const result = yield rq.RunQuery({ QueryID: parseInt(queryId, 10) });
+                if (result && result.Success) {
+                    alert('Success! ' + JSON.stringify(result.Results));
+                    console.log(result.Results);
+                }
+                else {
+                    alert('Error! ' + result.ErrorMessage);
+                }
+            }
+        });
+    }
+}
+AskSkipComponent.ɵfac = function AskSkipComponent_Factory(t) { return new (t || AskSkipComponent)(i0.ɵɵdirectiveInject(i1.SharedService), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i2.Router), i0.ɵɵdirectiveInject(i2.ActivatedRoute), i0.ɵɵdirectiveInject(i3.Location)); };
+AskSkipComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AskSkipComponent, selectors: [["app-ask-skip"]], viewQuery: function AskSkipComponent_Query(rf, ctx) { if (rf & 1) {
+        i0.ɵɵviewQuery(Container, 7);
+        i0.ɵɵviewQuery(_c0, 7);
+        i0.ɵɵviewQuery(_c1, 5);
+        i0.ɵɵviewQuery(_c2, 5);
+    } if (rf & 2) {
+        let _t;
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.askSkip = _t.first);
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.askSkipPanel = _t.first);
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.conversationList = _t.first);
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.askSkipInput = _t.first);
+    } }, decls: 21, vars: 13, consts: [[1, "chat-container"], ["kendoButton", "", 3, "click"], [1, "conversation-history"], ["mjFillContainer", "", 1, "conversation-list", 3, "data", "itemClass", "fillWidth"], ["conversationList", ""], ["kendoListViewItemTemplate", ""], [1, "input-wrapper"], [1, "skip-title"], ["mjContainer", "", "mjFillContainer", "", 1, "messages", 3, "bottomMargin", "fillWidth"], ["AskSkipPanel", ""], [4, "ngFor", "ngForOf"], [4, "ngIf"], [1, "input-area"], ["type", "text", "placeholder", "Type your message...", 3, "disabled", "keyup.enter"], ["AskSkipInput", ""], ["kendoButton", "", 3, "disabled", "primary", "click"], [1, "conversation-item", 3, "ngClass", "title", "click"], ["name", "comment", "svgIcon", "conversation-icon", 3, "icon", 4, "ngIf"], ["name", "clock", "class", "conversation-icon", 3, "icon", 4, "ngIf"], [1, "text-container"], ["maxlength", "100", 3, "ngModel", "ngModelChange", 4, "ngIf"], ["class", "edit-conversation-panel", 4, "ngIf"], ["name", "comment", "svgIcon", "conversation-icon", 3, "icon"], ["name", "clock", 1, "conversation-icon", 3, "icon"], ["maxlength", "100", 3, "ngModel", "ngModelChange"], [1, "edit-conversation-panel"], ["name", "edit", "class", "edit-icon", 3, "icon", "click", 4, "ngIf"], ["name", "delete", "class", "delete-icon", 3, "icon", "click", 4, "ngIf"], ["name", "check", "class", "save-icon", 3, "icon", "click", 4, "ngIf"], ["name", "close", "class", "cancel-edit-icon", 3, "icon", "click", 4, "ngIf"], ["name", "edit", 1, "edit-icon", 3, "icon", "click"], ["name", "delete", 1, "delete-icon", 3, "icon", "click"], ["name", "check", 1, "save-icon", 3, "icon", "click"], ["name", "close", 1, "cancel-edit-icon", 3, "icon", "click"], [1, "message-row", 3, "ngClass"], [1, "message-image"], [1, "avatar", 3, "src"], ["mjContainer", "", 1, "message", 3, "id"]], template: function AskSkipComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 0)(1, "button", 1);
+        i0.ɵɵlistener("click", function AskSkipComponent_Template_button_click_1_listener() { return ctx.runQuery(); });
+        i0.ɵɵtext(2, "Test - Run Query");
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(3, "div", 2)(4, "button", 1);
+        i0.ɵɵlistener("click", function AskSkipComponent_Template_button_click_4_listener() { return ctx.createNewConversation(); });
+        i0.ɵɵtext(5, "+ New Chat");
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(6, "kendo-listview", 3, 4);
+        i0.ɵɵtemplate(8, AskSkipComponent_ng_template_8_Template, 7, 7, "ng-template", 5);
+        i0.ɵɵelementEnd()();
+        i0.ɵɵelementStart(9, "div", 6)(10, "div", 7);
+        i0.ɵɵtext(11, "Ask Skip!");
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(12, "div", 8, 9);
+        i0.ɵɵtemplate(14, AskSkipComponent_div_14_Template, 7, 4, "div", 10)(15, AskSkipComponent_div_15_Template, 2, 0, "div", 11);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(16, "div", 12)(17, "textarea", 13, 14);
+        i0.ɵɵlistener("keyup.enter", function AskSkipComponent_Template_textarea_keyup_enter_17_listener($event) { return ctx.onEnter($event); });
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(19, "button", 15);
+        i0.ɵɵlistener("click", function AskSkipComponent_Template_button_click_19_listener() { return ctx.sendSkipQuestion(); });
+        i0.ɵɵtext(20, "Send");
+        i0.ɵɵelementEnd()()()();
+    } if (rf & 2) {
+        i0.ɵɵadvance(6);
+        i0.ɵɵstyleProp("height", 280, "px");
+        i0.ɵɵproperty("data", ctx.Conversations)("itemClass", i0.ɵɵpureFunction0(12, _c3))("fillWidth", false);
+        i0.ɵɵadvance(6);
+        i0.ɵɵproperty("bottomMargin", 60)("fillWidth", false);
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("ngForOf", ctx.Messages);
+        i0.ɵɵadvance();
+        i0.ɵɵproperty("ngIf", ctx.SelectedConversation && ctx.IsSkipProcessing(ctx.SelectedConversation));
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("disabled", ctx.SelectedConversation && ctx.IsSkipProcessing(ctx.SelectedConversation));
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("disabled", ctx.SelectedConversation !== undefined && ctx.IsSkipProcessing(ctx.SelectedConversation))("primary", true);
+    } }, dependencies: [i3.NgClass, i3.NgForOf, i3.NgIf, i4.DefaultValueAccessor, i4.NgControlStatus, i4.MaxLengthValidator, i4.NgModel, i5.ButtonComponent, i6.LoaderComponent, i7.SVGIconComponent, i8.FillContainer, i8.Container, i9.ItemTemplateDirective, i9.ListViewComponent], styles: [".chat-container[_ngcontent-%COMP%] {\r\n    padding: 0px;\r\n    display: flex;\r\n    flex-direction: row;\r\n    height: 100%;\r\n}\r\n\r\n.new-conversation[_ngcontent-%COMP%] {\r\n    height: 30px;\r\n    font-size: large;\r\n}\r\n\r\n.conversation-history[_ngcontent-%COMP%] {\r\n    min-width: 225px;\r\n    width: 225px;\r\n    height: 100%;\r\n    overflow-y: auto; \n\r\n    margin-right: 10px;\r\n    padding-top: 5px;\r\n\r\n    margin-top: 0px;  \r\n    padding-top: 0px;  \r\n}\r\n\r\n.conversation-history[_ngcontent-%COMP%]    > button[_ngcontent-%COMP%] {\r\n    height: 25px;\r\n}\r\n\r\n\r\n\r\n.skip-title[_ngcontent-%COMP%] {\r\n    font-size: larger;\r\n    margin-bottom: 5px;\r\n    height: 20px;\r\n    margin-top: 5px;\r\n}\r\n\r\n.conversation-list[_ngcontent-%COMP%] {\r\n    margin-top: 5px;\r\n    padding-top: 5px;\r\n}\r\n\r\n.messages[_ngcontent-%COMP%] {\r\n    flex-grow: 1; \n\r\n    overflow-y: auto; \n\r\n    overflow-x: hidden; \n\r\n    border: solid 1px rgba(0, 0, 0, 0.08);\r\n    margin-bottom: 5px;\r\n\r\n    margin-top: 2px; \n\r\n}\r\n\r\n.message-row[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    align-items: start; \n\r\n    border-bottom: solid 1px rgba(0, 0, 0, 0.08);\r\n    padding: 10px;\r\n    width: 100%;\r\n}\r\n\r\n.conversation-item[_ngcontent-%COMP%] {\r\n    margin-left: 5px;\r\n    margin-right: 5px;\r\n    padding-top: 10px;\r\n    padding-bottom: 10px;\r\n    padding-left: 5px;\r\n    padding-right: 5px;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n    overflow: hidden;\r\n    max-height: 150px;\r\n    font-size: 14px;\r\n\r\n    display: flex;\r\n    align-items: flex-start; \n\r\n\r\n    flex-wrap: wrap; \n\r\n}\r\n\r\n.text-container[_ngcontent-%COMP%] {\r\n    flex: 1; \n\r\n    display: flex;\r\n    flex-direction: column; \n\r\n}\r\n\r\n.text-container[_ngcontent-%COMP%]   textarea[_ngcontent-%COMP%] {\r\n    resize: none; \n\r\n    \n\r\n}\r\n\r\n.conversation-item[_ngcontent-%COMP%]    > .conversation-icon[_ngcontent-%COMP%] {\r\n    margin-top: 3px;\r\n}\r\n\r\n.conversation-item[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\r\n    display: inline-block;\r\n    white-space: pre-wrap;  \n\r\n    overflow: auto;\r\n    word-wrap: break-word;\r\n    margin-left: 3px;     \n\r\n}\r\n\r\n.conversation-item[_ngcontent-%COMP%]:hover {\r\n    background-color: rgba(0, 0, 0, 0.05);\r\n}\r\n.conversation-item-selected[_ngcontent-%COMP%] {\r\n    background-color: rgba(0, 0, 0, 0.15);\r\n}\r\n.conversation-item[_ngcontent-%COMP%]    > .conversation-icon[_ngcontent-%COMP%] {\r\n    margin-right: 11px;\r\n}\r\n.edit-conversation-panel[_ngcontent-%COMP%] {\r\n    width: 100%; \n\r\n    display: flex;\r\n    justify-content: flex-end; \n\r\n}\r\n.edit-conversation-panel[_ngcontent-%COMP%]    > .k-icon[_ngcontent-%COMP%] {\r\n    margin-left: 5px;\r\n    cursor: pointer;\r\n}\r\n.edit-conversation-panel[_ngcontent-%COMP%]    > .k-icon[_ngcontent-%COMP%]:hover {\r\n    color: #ff0000;\r\n}\r\n\r\n.message[_ngcontent-%COMP%] {\r\n    word-wrap: break-word;\r\n    width: 100%;\r\n    margin-right: 20px;\r\n}\r\n.message-image[_ngcontent-%COMP%] {\r\n    max-width: 45px;\r\n    max-height: 45px;\r\n    margin-right: 10px;\r\n    margin-left: 5px;\r\n    margin-bottom: 10px;\r\n}\r\n.message-image[_ngcontent-%COMP%]    > img[_ngcontent-%COMP%] {\r\n    max-width: 100%;\r\n    max-height: 100%;\r\n}\r\n.user-message[_ngcontent-%COMP%] {\r\n  background-color: white;\r\n  \n\r\n}\r\n\r\n.error-message[_ngcontent-%COMP%] {\r\n    background-color:lightpink;\r\n    \n\r\n  }\r\n  \r\n.ai-message[_ngcontent-%COMP%] {\r\n  background-color:rgba(0, 0, 0, 0.05);\r\n  \n\r\n}\r\n\r\n\r\n\r\n.user-message[_ngcontent-%COMP%] {\r\n    align-self: flex-start; \n\r\n}\r\n\r\n.ai-message[_ngcontent-%COMP%] {\r\n    align-self: flex-end; \n\r\n}\r\n\r\n.input-area[_ngcontent-%COMP%] {\r\n    height: 49px;\r\n    display: flex;\r\n    align-items: center;\r\n}\r\n\r\n.input-area[_ngcontent-%COMP%]    > button[_ngcontent-%COMP%] {\r\n    vertical-align: top;\r\n    width: 100px;\r\n    height: 40px;\r\n    font-size: large;\r\n    margin-top: 3px;\r\n    margin-left: 1px;\r\n}\r\n\r\n.input-area[_ngcontent-%COMP%]    > textarea[_ngcontent-%COMP%] {\r\n    padding: 3px;\r\n    border: solid 1px rgba(0, 0, 0, 0.08) ;\r\n    margin-top: 4px;\r\n    margin-right: 5px;\r\n    height: 42px;\r\n    font-size: large;\r\n    resize: none;\r\n    flex: 1;  \n\r\n} \r\n\r\n.input-wrapper[_ngcontent-%COMP%] {\r\n    flex-grow: 1; \n\r\n    height: 100%;\r\n}"] });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AskSkipComponent, [{
+        type: Component,
+        args: [{ selector: 'app-ask-skip', template: "<div class = \"chat-container\">\n    <button kendoButton (click)=\"runQuery()\" >Test - Run Query</button>\n    <div class=\"conversation-history\">\n        <button kendoButton (click)=\"createNewConversation()\" >+ New Chat</button>\n        <kendo-listview\n            class=\"conversation-list\"\n            [data]=\"Conversations\"\n            [style.height.px]=\"280\"\n            [itemClass]=\"{ 'item-border': true }\"\n            mjFillContainer \n            [fillWidth]=\"false\"\n            #conversationList\n            >\n            <ng-template kendoListViewItemTemplate let-dataItem=\"dataItem\">\n                <div class=\"conversation-item\" \n                     [ngClass]=\"SelectedConversation?.ID === dataItem.ID ? 'conversation-item-selected' : ''\"\n                     [title]=\"dataItem.Name\" \n                     (click)=\"selectConversation(dataItem)\"> \n                    <kendo-svgicon *ngIf=\"!IsSkipProcessing(dataItem)\" [icon]=\"sharedService.kendoSVGIcon('comment')\" name=\"comment\" svgIcon=\"conversation-icon\"></kendo-svgicon>\n                    <kendo-svgicon *ngIf=\"SelectedConversation && IsSkipProcessing(dataItem)\" [icon]=\"sharedService.kendoSVGIcon('clock')\" name=\"clock\" class=\"conversation-icon\"></kendo-svgicon>\n                    <div class=\"text-container\">\n                        <span *ngIf=\"dataItem.ID !== SelectedConversation?.ID || !ConversationEditMode\">{{ dataItem.Name }}</span>\n                        <textarea *ngIf=\"dataItem.ID === SelectedConversation?.ID && ConversationEditMode\" [(ngModel)]=\"dataItem.Name\" maxlength=\"100\"></textarea>\n                    </div>\n                    <div *ngIf=\"SelectedConversation?.ID === dataItem.ID\" class=\"edit-conversation-panel\">\n                        <kendo-svgicon *ngIf=\"!ConversationEditMode\" [icon]=\"sharedService.kendoSVGIcon('edit')\" name=\"edit\" class=\"edit-icon\" (click)=\"editConvo(dataItem)\"></kendo-svgicon>\n                        <kendo-svgicon *ngIf=\"!ConversationEditMode\" [icon]=\"sharedService.kendoSVGIcon('delete')\" name=\"delete\" class=\"delete-icon\" (click)=\"deleteConvo(dataItem)\"></kendo-svgicon>    \n                        <kendo-svgicon *ngIf=\"ConversationEditMode\" [icon]=\"sharedService.kendoSVGIcon('check')\" name=\"check\" class=\"save-icon\" (click)=\"saveConvoName(dataItem)\" ></kendo-svgicon>\n                        <kendo-svgicon *ngIf=\"ConversationEditMode\" [icon]=\"sharedService.kendoSVGIcon('close')\" name=\"close\" class=\"cancel-edit-icon\" (click)=\"cancelConvoEdit(dataItem)\"></kendo-svgicon>\n                    </div>\n                </div>\n            </ng-template>\n        </kendo-listview>\n    </div>\n    <div class=\"input-wrapper\">\n        <div class=\"skip-title\">Ask Skip!</div>\n        <div #AskSkipPanel mjContainer class=\"messages\" mjFillContainer [bottomMargin]=\"60\" [fillWidth]=\"false\">\n            <div *ngFor=\"let message of Messages\">  \n                <div class=\"message-row\" [ngClass]=\"message.Role.trim().toLowerCase() === 'ai' ? 'ai-message' : message.Role.trim().toLowerCase() === 'error' ? 'error-message' : 'user-message'\" >\n                    <div class=\"message-image\">\n                        <img src=\"{{message.Role.trim().toLowerCase() === 'ai' || message.Role.trim().toLowerCase() === 'error' ? 'assets/Skip - Mark Only - Small.png' : userImage()}}\" class=\"avatar\" />\n                    </div>\n                    <div class=\"message\" mjContainer [id]=\"'skip_message_' + message.ID\">\n                        <div>{{this.createDetailHtml(message)}}</div> \n                    </div>\n                </div>\n            </div>\n            <div *ngIf=\"SelectedConversation && IsSkipProcessing(SelectedConversation)\">\n                <kendo-loader></kendo-loader>\n            </div>\n        </div>\n        <div class=\"input-area\">\n            <textarea\n                    #AskSkipInput \n                    [disabled]=\"SelectedConversation && IsSkipProcessing(SelectedConversation)\" \n                    (keyup.enter)=\"onEnter($event)\" \n                    type=\"text\" \n                    placeholder=\"Type your message...\"></textarea>\n            <button kendoButton [disabled]=\"SelectedConversation !== undefined && IsSkipProcessing(SelectedConversation)\" (click)=\"sendSkipQuestion()\" [primary]=\"true\">Send</button>\n        </div>\n    </div>\n</div>     ", styles: [".chat-container {\r\n    padding: 0px;\r\n    display: flex;\r\n    flex-direction: row;\r\n    height: 100%;\r\n}\r\n\r\n.new-conversation {\r\n    height: 30px;\r\n    font-size: large;\r\n}\r\n\r\n.conversation-history {\r\n    min-width: 225px;\r\n    width: 225px;\r\n    height: 100%;\r\n    overflow-y: auto; /* Add scroll if the content exceeds the height */\r\n    margin-right: 10px;\r\n    padding-top: 5px;\r\n\r\n    margin-top: 0px;  \r\n    padding-top: 0px;  \r\n}\r\n\r\n.conversation-history > button {\r\n    height: 25px;\r\n}\r\n\r\n\r\n\r\n.skip-title {\r\n    font-size: larger;\r\n    margin-bottom: 5px;\r\n    height: 20px;\r\n    margin-top: 5px;\r\n}\r\n\r\n.conversation-list {\r\n    margin-top: 5px;\r\n    padding-top: 5px;\r\n}\r\n\r\n.messages {\r\n    flex-grow: 1; /* This will make the messages take the remaining space */\r\n    overflow-y: auto; /* enable scrolling if the content overflows */\r\n    overflow-x: hidden; /* hide horizontal scrollbar */\r\n    border: solid 1px rgba(0, 0, 0, 0.08);\r\n    margin-bottom: 5px;\r\n\r\n    margin-top: 2px; /* align it with the top of converation history exactly*/\r\n}\r\n\r\n.message-row {\r\n    display: flex;\r\n    align-items: start; /* if you want to align them at the top */\r\n    border-bottom: solid 1px rgba(0, 0, 0, 0.08);\r\n    padding: 10px;\r\n    width: 100%;\r\n}\r\n\r\n.conversation-item {\r\n    margin-left: 5px;\r\n    margin-right: 5px;\r\n    padding-top: 10px;\r\n    padding-bottom: 10px;\r\n    padding-left: 5px;\r\n    padding-right: 5px;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n    overflow: hidden;\r\n    max-height: 150px;\r\n    font-size: 14px;\r\n\r\n    display: flex;\r\n    align-items: flex-start; /* Align items to the top */\r\n\r\n    flex-wrap: wrap; /* Allow items to wrap to the next line */\r\n}\r\n\r\n.text-container {\r\n    flex: 1; /* Take up remaining space */\r\n    display: flex;\r\n    flex-direction: column; /* Stack children vertically */\r\n}\r\n\r\n.text-container textarea {\r\n    resize: none; /* Disable resizing */\r\n    /* Add more styles for the textarea if needed */\r\n}\r\n\r\n.conversation-item > .conversation-icon {\r\n    margin-top: 3px;\r\n}\r\n\r\n.conversation-item span {\r\n    display: inline-block;\r\n    white-space: pre-wrap;  /* Allow text to wrap */\r\n    overflow: auto;\r\n    word-wrap: break-word;\r\n    margin-left: 3px;     /* Move the text to the right */\r\n}\r\n\r\n.conversation-item:hover {\r\n    background-color: rgba(0, 0, 0, 0.05);\r\n}\r\n.conversation-item-selected {\r\n    background-color: rgba(0, 0, 0, 0.15);\r\n}\r\n.conversation-item > .conversation-icon {\r\n    margin-right: 11px;\r\n}\r\n.edit-conversation-panel {\r\n    width: 100%; /* Take up the full width */\r\n    display: flex;\r\n    justify-content: flex-end; /* Align icons to the right */\r\n}\r\n.edit-conversation-panel > .k-icon {\r\n    margin-left: 5px;\r\n    cursor: pointer;\r\n}\r\n.edit-conversation-panel > .k-icon:hover {\r\n    color: #ff0000;\r\n}\r\n\r\n.message {\r\n    word-wrap: break-word;\r\n    width: 100%;\r\n    margin-right: 20px;\r\n}\r\n.message-image {\r\n    max-width: 45px;\r\n    max-height: 45px;\r\n    margin-right: 10px;\r\n    margin-left: 5px;\r\n    margin-bottom: 10px;\r\n}\r\n.message-image > img {\r\n    max-width: 100%;\r\n    max-height: 100%;\r\n}\r\n.user-message {\r\n  background-color: white;\r\n  /* additional styling for user messages... */\r\n}\r\n\r\n.error-message {\r\n    background-color:lightpink;\r\n    /* additional styling for AI messages... */\r\n  }\r\n  \r\n.ai-message {\r\n  background-color:rgba(0, 0, 0, 0.05);\r\n  /* additional styling for AI messages... */\r\n}\r\n\r\n\r\n\r\n.user-message {\r\n    align-self: flex-start; /* align user messages to the left */\r\n}\r\n\r\n.ai-message {\r\n    align-self: flex-end; /* align AI messages to the right */\r\n}\r\n\r\n.input-area {\r\n    height: 49px;\r\n    display: flex;\r\n    align-items: center;\r\n}\r\n\r\n.input-area > button {\r\n    vertical-align: top;\r\n    width: 100px;\r\n    height: 40px;\r\n    font-size: large;\r\n    margin-top: 3px;\r\n    margin-left: 1px;\r\n}\r\n\r\n.input-area > textarea {\r\n    padding: 3px;\r\n    border: solid 1px rgba(0, 0, 0, 0.08) ;\r\n    margin-top: 4px;\r\n    margin-right: 5px;\r\n    height: 42px;\r\n    font-size: large;\r\n    resize: none;\r\n    flex: 1;  /* Take up remaining space */\r\n} \r\n\r\n.input-wrapper {\r\n    flex-grow: 1; /* This will make the input-wrapper take the remaining space */\r\n    height: 100%;\r\n}\r\n"] }]
+    }], () => [{ type: i1.SharedService }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i3.Location }], { askSkip: [{
+            type: ViewChild,
+            args: [Container, { static: true }]
+        }], askSkipPanel: [{
+            type: ViewChild,
+            args: ['AskSkipPanel', { static: true }]
+        }], conversationList: [{
+            type: ViewChild,
+            args: ['conversationList', { static: false }]
+        }], askSkipInput: [{
+            type: ViewChild,
+            args: ['AskSkipInput']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AskSkipComponent, { className: "AskSkipComponent", filePath: "src\\lib\\ask-skip\\ask-skip.component.ts", lineNumber: 56 }); })();