@aakash58/chatbot 1.0.72 → 1.0.73
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -810,11 +810,11 @@ class MessageListComponent {
|
|
|
810
810
|
this.suggestionClick.emit(text);
|
|
811
811
|
}
|
|
812
812
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MessageListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
813
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: MessageListComponent, isStandalone: true, selector: "app-message-list", inputs: { messages: "messages", isBotTyping: "isBotTyping", appLogoUrl: "appLogoUrl", appSubtitle: "appSubtitle", welcomeDesc: "welcomeDesc", predefinedMessages: "predefinedMessages", botAvatarUrl: "botAvatarUrl", userAvatarUrl: "userAvatarUrl", isAuthenticated: "isAuthenticated", trackByMessageId: "trackByMessageId" }, outputs: { suggestionClick: "suggestionClick" }, viewQueries: [{ propertyName: "chatMessagesContainer", first: true, predicate: ["chatMessages"], descendants: true }], ngImport: i0, template: "<div #chatMessages class=\"chat-messages\">\r\n <!-- Welcome Screen -->\r\n <div class=\"welcome-screen\" *ngIf=\"messages.length === 0 && !isBotTyping\">\r\n <img [src]=\"appLogoUrl\" alt=\"Welcome\" class=\"welcome-image\" style=\"border-radius: 24px\" />\r\n <h3>{{ appSubtitle }}</h3>\r\n <p>{{ welcomeDesc }}</p>\r\n\r\n <!-- Predefined messages chips: Only show when authenticated -->\r\n <app-chips\r\n *ngIf=\"isAuthenticated\"\r\n [messages]=\"predefinedMessages\"\r\n [disabled]=\"isBotTyping\"\r\n (chipClick)=\"onPredefinedClick($event)\"\r\n ></app-chips>\r\n </div>\r\n\r\n <!-- Chat Messages -->\r\n <div\r\n *ngFor=\"let message of messages; trackBy: trackByMessageId\"\r\n class=\"message-wrapper\"\r\n [class.user]=\"message.sender === 'user'\"\r\n [class.bot]=\"message.sender === 'bot'\"\r\n >\r\n <!-- Bot Avatar -->\r\n <img\r\n *ngIf=\"message.sender === 'bot'\"\r\n class=\"bot-avatar\"\r\n [src]=\"botAvatarUrl\"\r\n alt=\"Bot Avatar\"\r\n />\r\n\r\n <!-- Message Bubble -->\r\n <div\r\n class=\"message\"\r\n [class.user]=\"message.sender === 'user'\"\r\n [class.bot]=\"message.sender === 'bot'\"\r\n >\r\n {{ message.text }}\r\n <!-- Show time below message -->\r\n <div *ngIf=\"message.sender === 'bot'\" class=\"message-time\">\r\n {{ message.timestamp | date: 'shortTime' }}\r\n </div>\r\n </div>\r\n\r\n <!-- User Avatar -->\r\n <img\r\n *ngIf=\"message.sender === 'user'\"\r\n class=\"user-avatar\"\r\n [src]=\"userAvatarUrl\"\r\n alt=\"User Avatar\"\r\n />\r\n </div>\r\n\r\n <!-- Typing Indicator -->\r\n <div class=\"message-wrapper bot\" *ngIf=\"isBotTyping\">\r\n <img class=\"bot-avatar\" [src]=\"botAvatarUrl\" alt=\"Bot Avatar\" />\r\n <div class=\"message bot\">\r\n <div class=\"typing-indicator\">\r\n <span></span>\r\n <span></span>\r\n <span></span>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;overflow:hidden}.chat-messages{flex-grow:1;padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}.chat-messages::-webkit-scrollbar{width:8px}.chat-messages::-webkit-scrollbar-track{background:var(--grey);border-radius:4px}.chat-messages::-webkit-scrollbar-thumb{background-color:var(--primary-color);border-radius:4px}.chat-messages::-webkit-scrollbar-thumb:hover{background-color:var(--primary-color)}.chat-messages{scrollbar-width:thin;scrollbar-color:var(--primary-color) var(--background-color)}.welcome-screen{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;height:100%;padding:0 20px}.welcome-image{width:80px;margin-bottom:30px}.welcome-screen h3{margin:0 0 5px;color:var(--text-color);font-family:var(--font-family);font-size:24px}.welcome-screen p{margin:0 0 30px;color:var(--secondary-text-color);font-size:14px;font-family:var(--font-family)}.message-wrapper{display:flex;align-items:flex-end;gap:8px;margin-bottom:6px}.message-wrapper.user{justify-content:flex-end}.message-wrapper.bot{justify-content:flex-start}.message{padding:10px 15px;border-radius:20px;max-width:80%;overflow-y:auto;word-wrap:break-word;font-family:var(--font-family)}.message .message-time{font-size:11px;color:var(--grey);text-align:right;margin-top:4px}.message.user{background-color:var(--primary-color);color:var(--user-text-color);align-self:flex-end}.message.bot{background-color:var(--bot-message-color);color:var(--bot-text-color);align-self:flex-start}.bot-avatar
|
|
813
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: MessageListComponent, isStandalone: true, selector: "app-message-list", inputs: { messages: "messages", isBotTyping: "isBotTyping", appLogoUrl: "appLogoUrl", appSubtitle: "appSubtitle", welcomeDesc: "welcomeDesc", predefinedMessages: "predefinedMessages", botAvatarUrl: "botAvatarUrl", userAvatarUrl: "userAvatarUrl", isAuthenticated: "isAuthenticated", trackByMessageId: "trackByMessageId" }, outputs: { suggestionClick: "suggestionClick" }, viewQueries: [{ propertyName: "chatMessagesContainer", first: true, predicate: ["chatMessages"], descendants: true }], ngImport: i0, template: "<div #chatMessages class=\"chat-messages\">\r\n <!-- Welcome Screen -->\r\n <div class=\"welcome-screen\" *ngIf=\"messages.length === 0 && !isBotTyping\">\r\n <img [src]=\"appLogoUrl\" alt=\"Welcome\" class=\"welcome-image\" style=\"border-radius: 24px\" />\r\n <h3>{{ appSubtitle }}</h3>\r\n <p>{{ welcomeDesc }}</p>\r\n\r\n <!-- Predefined messages chips: Only show when authenticated -->\r\n <app-chips\r\n *ngIf=\"isAuthenticated\"\r\n [messages]=\"predefinedMessages\"\r\n [disabled]=\"isBotTyping\"\r\n (chipClick)=\"onPredefinedClick($event)\"\r\n ></app-chips>\r\n </div>\r\n\r\n <!-- Chat Messages -->\r\n <div\r\n *ngFor=\"let message of messages; trackBy: trackByMessageId\"\r\n class=\"message-wrapper\"\r\n [class.user]=\"message.sender === 'user'\"\r\n [class.bot]=\"message.sender === 'bot'\"\r\n >\r\n <!-- Bot Avatar -->\r\n <img\r\n *ngIf=\"message.sender === 'bot'\"\r\n class=\"bot-avatar\"\r\n [src]=\"botAvatarUrl\"\r\n alt=\"Bot Avatar\"\r\n />\r\n\r\n <!-- Message Bubble -->\r\n <div\r\n class=\"message\"\r\n [class.user]=\"message.sender === 'user'\"\r\n [class.bot]=\"message.sender === 'bot'\"\r\n >\r\n {{ message.text }}\r\n <!-- Show time below message -->\r\n <div *ngIf=\"message.sender === 'bot'\" class=\"message-time\">\r\n {{ message.timestamp | date: 'shortTime' }}\r\n </div>\r\n </div>\r\n\r\n <!-- User Avatar -->\r\n <img\r\n *ngIf=\"message.sender === 'user'\"\r\n class=\"user-avatar\"\r\n [src]=\"userAvatarUrl\"\r\n alt=\"User Avatar\"\r\n />\r\n </div>\r\n\r\n <!-- Typing Indicator -->\r\n <div class=\"message-wrapper bot\" *ngIf=\"isBotTyping\">\r\n <img class=\"bot-avatar\" [src]=\"botAvatarUrl\" alt=\"Bot Avatar\" />\r\n <div class=\"message bot\">\r\n <div class=\"typing-indicator\">\r\n <span></span>\r\n <span></span>\r\n <span></span>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;overflow:hidden}.chat-messages{flex-grow:1;padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}.chat-messages::-webkit-scrollbar{width:8px}.chat-messages::-webkit-scrollbar-track{background:var(--grey);border-radius:4px}.chat-messages::-webkit-scrollbar-thumb{background-color:var(--primary-color);border-radius:4px}.chat-messages::-webkit-scrollbar-thumb:hover{background-color:var(--primary-color)}.chat-messages{scrollbar-width:thin;scrollbar-color:var(--primary-color) var(--background-color)}.welcome-screen{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;height:100%;padding:0 20px}.welcome-image{width:80px;margin-bottom:30px}.welcome-screen h3{margin:0 0 5px;color:var(--text-color);font-family:var(--font-family);font-size:24px}.welcome-screen p{margin:0 0 30px;color:var(--secondary-text-color);font-size:14px;font-family:var(--font-family)}.message-wrapper{display:flex;align-items:flex-end;gap:8px;margin-bottom:6px}.message-wrapper.user{justify-content:flex-end}.message-wrapper.bot{justify-content:flex-start}.message{padding:10px 15px;border-radius:20px;max-width:80%;overflow-y:auto;word-wrap:break-word;font-family:var(--font-family)}.message .message-time{font-size:11px;color:var(--grey);text-align:right;margin-top:4px}.message.user{background-color:var(--primary-color);color:var(--user-text-color);align-self:flex-end}.message.bot{background-color:var(--bot-message-color);color:var(--bot-text-color);align-self:flex-start}.bot-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover;border:1px solid var(--border-color);filter:var(--avatar-filter)}.user-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover;border:1px solid var(--border-color)}.user-avatar.placeholder{filter:var(--avatar-filter)}.typing-indicator{display:flex;align-items:center;justify-content:center;gap:4px}.typing-indicator span{width:8px;height:8px;background-color:var(--typing-indicator-color);border-radius:50%;animation:blink 1.4s infinite both}.typing-indicator span:nth-child(2){animation-delay:.2s}.typing-indicator span:nth-child(3){animation-delay:.4s}@keyframes blink{0%,80%,to{opacity:.2}40%{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: Chips, selector: "app-chips", inputs: ["messages", "disabled"], outputs: ["chipClick"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] });
|
|
814
814
|
}
|
|
815
815
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MessageListComponent, decorators: [{
|
|
816
816
|
type: Component,
|
|
817
|
-
args: [{ selector: 'app-message-list', standalone: true, imports: [CommonModule, Chips], template: "<div #chatMessages class=\"chat-messages\">\r\n <!-- Welcome Screen -->\r\n <div class=\"welcome-screen\" *ngIf=\"messages.length === 0 && !isBotTyping\">\r\n <img [src]=\"appLogoUrl\" alt=\"Welcome\" class=\"welcome-image\" style=\"border-radius: 24px\" />\r\n <h3>{{ appSubtitle }}</h3>\r\n <p>{{ welcomeDesc }}</p>\r\n\r\n <!-- Predefined messages chips: Only show when authenticated -->\r\n <app-chips\r\n *ngIf=\"isAuthenticated\"\r\n [messages]=\"predefinedMessages\"\r\n [disabled]=\"isBotTyping\"\r\n (chipClick)=\"onPredefinedClick($event)\"\r\n ></app-chips>\r\n </div>\r\n\r\n <!-- Chat Messages -->\r\n <div\r\n *ngFor=\"let message of messages; trackBy: trackByMessageId\"\r\n class=\"message-wrapper\"\r\n [class.user]=\"message.sender === 'user'\"\r\n [class.bot]=\"message.sender === 'bot'\"\r\n >\r\n <!-- Bot Avatar -->\r\n <img\r\n *ngIf=\"message.sender === 'bot'\"\r\n class=\"bot-avatar\"\r\n [src]=\"botAvatarUrl\"\r\n alt=\"Bot Avatar\"\r\n />\r\n\r\n <!-- Message Bubble -->\r\n <div\r\n class=\"message\"\r\n [class.user]=\"message.sender === 'user'\"\r\n [class.bot]=\"message.sender === 'bot'\"\r\n >\r\n {{ message.text }}\r\n <!-- Show time below message -->\r\n <div *ngIf=\"message.sender === 'bot'\" class=\"message-time\">\r\n {{ message.timestamp | date: 'shortTime' }}\r\n </div>\r\n </div>\r\n\r\n <!-- User Avatar -->\r\n <img\r\n *ngIf=\"message.sender === 'user'\"\r\n class=\"user-avatar\"\r\n [src]=\"userAvatarUrl\"\r\n alt=\"User Avatar\"\r\n />\r\n </div>\r\n\r\n <!-- Typing Indicator -->\r\n <div class=\"message-wrapper bot\" *ngIf=\"isBotTyping\">\r\n <img class=\"bot-avatar\" [src]=\"botAvatarUrl\" alt=\"Bot Avatar\" />\r\n <div class=\"message bot\">\r\n <div class=\"typing-indicator\">\r\n <span></span>\r\n <span></span>\r\n <span></span>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;overflow:hidden}.chat-messages{flex-grow:1;padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}.chat-messages::-webkit-scrollbar{width:8px}.chat-messages::-webkit-scrollbar-track{background:var(--grey);border-radius:4px}.chat-messages::-webkit-scrollbar-thumb{background-color:var(--primary-color);border-radius:4px}.chat-messages::-webkit-scrollbar-thumb:hover{background-color:var(--primary-color)}.chat-messages{scrollbar-width:thin;scrollbar-color:var(--primary-color) var(--background-color)}.welcome-screen{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;height:100%;padding:0 20px}.welcome-image{width:80px;margin-bottom:30px}.welcome-screen h3{margin:0 0 5px;color:var(--text-color);font-family:var(--font-family);font-size:24px}.welcome-screen p{margin:0 0 30px;color:var(--secondary-text-color);font-size:14px;font-family:var(--font-family)}.message-wrapper{display:flex;align-items:flex-end;gap:8px;margin-bottom:6px}.message-wrapper.user{justify-content:flex-end}.message-wrapper.bot{justify-content:flex-start}.message{padding:10px 15px;border-radius:20px;max-width:80%;overflow-y:auto;word-wrap:break-word;font-family:var(--font-family)}.message .message-time{font-size:11px;color:var(--grey);text-align:right;margin-top:4px}.message.user{background-color:var(--primary-color);color:var(--user-text-color);align-self:flex-end}.message.bot{background-color:var(--bot-message-color);color:var(--bot-text-color);align-self:flex-start}.bot-avatar
|
|
817
|
+
args: [{ selector: 'app-message-list', standalone: true, imports: [CommonModule, Chips], template: "<div #chatMessages class=\"chat-messages\">\r\n <!-- Welcome Screen -->\r\n <div class=\"welcome-screen\" *ngIf=\"messages.length === 0 && !isBotTyping\">\r\n <img [src]=\"appLogoUrl\" alt=\"Welcome\" class=\"welcome-image\" style=\"border-radius: 24px\" />\r\n <h3>{{ appSubtitle }}</h3>\r\n <p>{{ welcomeDesc }}</p>\r\n\r\n <!-- Predefined messages chips: Only show when authenticated -->\r\n <app-chips\r\n *ngIf=\"isAuthenticated\"\r\n [messages]=\"predefinedMessages\"\r\n [disabled]=\"isBotTyping\"\r\n (chipClick)=\"onPredefinedClick($event)\"\r\n ></app-chips>\r\n </div>\r\n\r\n <!-- Chat Messages -->\r\n <div\r\n *ngFor=\"let message of messages; trackBy: trackByMessageId\"\r\n class=\"message-wrapper\"\r\n [class.user]=\"message.sender === 'user'\"\r\n [class.bot]=\"message.sender === 'bot'\"\r\n >\r\n <!-- Bot Avatar -->\r\n <img\r\n *ngIf=\"message.sender === 'bot'\"\r\n class=\"bot-avatar\"\r\n [src]=\"botAvatarUrl\"\r\n alt=\"Bot Avatar\"\r\n />\r\n\r\n <!-- Message Bubble -->\r\n <div\r\n class=\"message\"\r\n [class.user]=\"message.sender === 'user'\"\r\n [class.bot]=\"message.sender === 'bot'\"\r\n >\r\n {{ message.text }}\r\n <!-- Show time below message -->\r\n <div *ngIf=\"message.sender === 'bot'\" class=\"message-time\">\r\n {{ message.timestamp | date: 'shortTime' }}\r\n </div>\r\n </div>\r\n\r\n <!-- User Avatar -->\r\n <img\r\n *ngIf=\"message.sender === 'user'\"\r\n class=\"user-avatar\"\r\n [src]=\"userAvatarUrl\"\r\n alt=\"User Avatar\"\r\n />\r\n </div>\r\n\r\n <!-- Typing Indicator -->\r\n <div class=\"message-wrapper bot\" *ngIf=\"isBotTyping\">\r\n <img class=\"bot-avatar\" [src]=\"botAvatarUrl\" alt=\"Bot Avatar\" />\r\n <div class=\"message bot\">\r\n <div class=\"typing-indicator\">\r\n <span></span>\r\n <span></span>\r\n <span></span>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;overflow:hidden}.chat-messages{flex-grow:1;padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}.chat-messages::-webkit-scrollbar{width:8px}.chat-messages::-webkit-scrollbar-track{background:var(--grey);border-radius:4px}.chat-messages::-webkit-scrollbar-thumb{background-color:var(--primary-color);border-radius:4px}.chat-messages::-webkit-scrollbar-thumb:hover{background-color:var(--primary-color)}.chat-messages{scrollbar-width:thin;scrollbar-color:var(--primary-color) var(--background-color)}.welcome-screen{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;height:100%;padding:0 20px}.welcome-image{width:80px;margin-bottom:30px}.welcome-screen h3{margin:0 0 5px;color:var(--text-color);font-family:var(--font-family);font-size:24px}.welcome-screen p{margin:0 0 30px;color:var(--secondary-text-color);font-size:14px;font-family:var(--font-family)}.message-wrapper{display:flex;align-items:flex-end;gap:8px;margin-bottom:6px}.message-wrapper.user{justify-content:flex-end}.message-wrapper.bot{justify-content:flex-start}.message{padding:10px 15px;border-radius:20px;max-width:80%;overflow-y:auto;word-wrap:break-word;font-family:var(--font-family)}.message .message-time{font-size:11px;color:var(--grey);text-align:right;margin-top:4px}.message.user{background-color:var(--primary-color);color:var(--user-text-color);align-self:flex-end}.message.bot{background-color:var(--bot-message-color);color:var(--bot-text-color);align-self:flex-start}.bot-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover;border:1px solid var(--border-color);filter:var(--avatar-filter)}.user-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover;border:1px solid var(--border-color)}.user-avatar.placeholder{filter:var(--avatar-filter)}.typing-indicator{display:flex;align-items:center;justify-content:center;gap:4px}.typing-indicator span{width:8px;height:8px;background-color:var(--typing-indicator-color);border-radius:50%;animation:blink 1.4s infinite both}.typing-indicator span:nth-child(2){animation-delay:.2s}.typing-indicator span:nth-child(3){animation-delay:.4s}@keyframes blink{0%,80%,to{opacity:.2}40%{opacity:1}}\n"] }]
|
|
818
818
|
}], propDecorators: { messages: [{
|
|
819
819
|
type: Input
|
|
820
820
|
}], isBotTyping: [{
|