@aakash58/chatbot 1.0.43 → 1.0.45
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.
- package/fesm2022/aakash58-chatbot.mjs +62 -28
- package/fesm2022/aakash58-chatbot.mjs.map +1 -1
- package/index.d.ts +22 -2
- package/package.json +1 -1
|
@@ -583,41 +583,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
|
|
|
583
583
|
class ThemeService {
|
|
584
584
|
overlay;
|
|
585
585
|
renderer;
|
|
586
|
-
_theme = signal('
|
|
586
|
+
_theme = signal('light', ...(ngDevMode ? [{ debugName: "_theme" }] : []));
|
|
587
587
|
theme = this._theme.asReadonly();
|
|
588
588
|
_activeTheme = signal('light-theme', ...(ngDevMode ? [{ debugName: "_activeTheme" }] : []));
|
|
589
589
|
activeTheme = this._activeTheme.asReadonly();
|
|
590
|
+
themeObserver;
|
|
590
591
|
constructor(rendererFactory, overlay) {
|
|
591
592
|
this.overlay = overlay;
|
|
592
593
|
this.renderer = rendererFactory.createRenderer(null, null);
|
|
593
|
-
//
|
|
594
|
-
|
|
595
|
-
|
|
594
|
+
// Detect theme from parent app
|
|
595
|
+
this.detectParentTheme();
|
|
596
|
+
// Watch for theme changes in parent app
|
|
597
|
+
this.watchParentTheme();
|
|
596
598
|
}
|
|
599
|
+
/**
|
|
600
|
+
* Detect theme from parent app's body/html classes
|
|
601
|
+
*/
|
|
602
|
+
detectParentTheme() {
|
|
603
|
+
const body = document.body;
|
|
604
|
+
const html = document.documentElement;
|
|
605
|
+
// Check for common theme class patterns
|
|
606
|
+
const isDark = body.classList.contains('dark') ||
|
|
607
|
+
body.classList.contains('dark-theme') ||
|
|
608
|
+
body.classList.contains('dark-mode') ||
|
|
609
|
+
html.classList.contains('dark') ||
|
|
610
|
+
html.classList.contains('dark-theme') ||
|
|
611
|
+
html.classList.contains('dark-mode') ||
|
|
612
|
+
body.getAttribute('data-theme') === 'dark' ||
|
|
613
|
+
html.getAttribute('data-theme') === 'dark';
|
|
614
|
+
const detectedTheme = isDark ? 'dark' : 'light';
|
|
615
|
+
this.setTheme(detectedTheme);
|
|
616
|
+
}
|
|
617
|
+
/**
|
|
618
|
+
* Watch for theme changes in parent app using MutationObserver
|
|
619
|
+
*/
|
|
620
|
+
watchParentTheme() {
|
|
621
|
+
this.themeObserver = new MutationObserver(() => {
|
|
622
|
+
this.detectParentTheme();
|
|
623
|
+
});
|
|
624
|
+
// Watch body and html for class/attribute changes
|
|
625
|
+
this.themeObserver.observe(document.body, {
|
|
626
|
+
attributes: true,
|
|
627
|
+
attributeFilter: ['class', 'data-theme'],
|
|
628
|
+
});
|
|
629
|
+
this.themeObserver.observe(document.documentElement, {
|
|
630
|
+
attributes: true,
|
|
631
|
+
attributeFilter: ['class', 'data-theme'],
|
|
632
|
+
});
|
|
633
|
+
}
|
|
634
|
+
/**
|
|
635
|
+
* Set theme (can be called manually or from parent app input)
|
|
636
|
+
* @param mode 'light' or 'dark'
|
|
637
|
+
*/
|
|
597
638
|
setTheme(mode) {
|
|
598
639
|
this._theme.set(mode);
|
|
599
|
-
|
|
600
|
-
this.
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
window.matchMedia('(prefers-color-scheme: dark)').onchange = (e) => {
|
|
609
|
-
if (this._theme() === 'system') {
|
|
610
|
-
const newTheme = e.matches ? 'dark-theme' : 'light-theme';
|
|
611
|
-
this._activeTheme.set(newTheme);
|
|
612
|
-
this.applyThemeToGlobal(newTheme);
|
|
613
|
-
}
|
|
614
|
-
};
|
|
615
|
-
}
|
|
616
|
-
else if (mode === 'dark') {
|
|
617
|
-
themeToApply = 'dark-theme';
|
|
618
|
-
}
|
|
619
|
-
this._activeTheme.set(themeToApply);
|
|
620
|
-
this.applyThemeToGlobal(themeToApply);
|
|
640
|
+
const themeClass = mode === 'dark' ? 'dark-theme' : 'light-theme';
|
|
641
|
+
this._activeTheme.set(themeClass);
|
|
642
|
+
this.applyThemeToGlobal(themeClass);
|
|
643
|
+
}
|
|
644
|
+
/**
|
|
645
|
+
* Get current theme
|
|
646
|
+
*/
|
|
647
|
+
getTheme() {
|
|
648
|
+
return this._theme();
|
|
621
649
|
}
|
|
622
650
|
applyThemeToGlobal(theme) {
|
|
623
651
|
const body = document.body;
|
|
@@ -629,6 +657,12 @@ class ThemeService {
|
|
|
629
657
|
this.renderer.addClass(el, theme);
|
|
630
658
|
});
|
|
631
659
|
}
|
|
660
|
+
/**
|
|
661
|
+
* Clean up observer on destroy
|
|
662
|
+
*/
|
|
663
|
+
ngOnDestroy() {
|
|
664
|
+
this.themeObserver?.disconnect();
|
|
665
|
+
}
|
|
632
666
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: ThemeService, deps: [{ token: i0.RendererFactory2 }, { token: i1.OverlayContainer }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
633
667
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: ThemeService, providedIn: 'root' });
|
|
634
668
|
}
|
|
@@ -1173,7 +1207,7 @@ class ChatWindowComponent {
|
|
|
1173
1207
|
this.clearChat.emit();
|
|
1174
1208
|
}
|
|
1175
1209
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: ChatWindowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1176
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.12", type: ChatWindowComponent, isStandalone: true, selector: "app-chat-window", inputs: { isChatOpen: "isChatOpen", enableDrag: "enableDrag", enableResize: "enableResize", isFullScreen: "isFullScreen", appTitle: "appTitle", appLogoUrl: "appLogoUrl", moreIcon: "moreIcon", minimizeIcon: "minimizeIcon", messages: "messages", isBotTyping: "isBotTyping", appSubtitle: "appSubtitle", welcomeDesc: "welcomeDesc", predefinedMessages: "predefinedMessages", botAvatarUrl: "botAvatarUrl", userAvatarUrl: "userAvatarUrl", trackByMessageId: "trackByMessageId", hintText: "hintText", sendIcon: "sendIcon", messageError: "messageError", showSuggestionChips: "showSuggestionChips" }, outputs: { toggleChat: "toggleChat", toggleFullScreen: "toggleFullScreen", openSettings: "openSettings", suggestionClick: "suggestionClick", send: "send", clearMessageError: "clearMessageError", clearChat: "clearChat" }, ngImport: i0, template: "<div\r\n *ngIf=\"isChatOpen\"\r\n draggableDialog\r\n [enableDrag]=\"enableDrag\"\r\n [dragHandle]=\"'.chat-header'\"\r\n resizableDialog\r\n [enableResize]=\"enableResize\"\r\n class=\"chat-window\"\r\n [class.fullscreen]=\"isFullScreen\"\r\n>\r\n <!-- chat window -->\r\n <div class=\"chat-header\">\r\n <div class=\"chat-title\">\r\n <img class=\"chat-logo\" style=\"border-radius: 14px\" [src]=\"appLogoUrl\" alt=\"Logo\" />\r\n <h2>{{ appTitle }}</h2>\r\n </div>\r\n\r\n <div class=\"chat-header-buttons\">\r\n <!-- settings Button -->\r\n <button class=\"header-button\" [matMenuTriggerFor]=\"settingsMenu\">\r\n <mat-icon>{{ moreIcon }}</mat-icon>\r\n </button>\r\n\r\n <!-- minimize Button -->\r\n <button class=\"header-button\" (click)=\"onToggleChat()\">\r\n <mat-icon>{{ minimizeIcon }}</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- Messages / Welcome Screen -->\r\n <app-message-list\r\n [messages]=\"messages\"\r\n [isBotTyping]=\"isBotTyping\"\r\n [appLogoUrl]=\"appLogoUrl\"\r\n [appSubtitle]=\"appSubtitle\"\r\n [welcomeDesc]=\"welcomeDesc\"\r\n [predefinedMessages]=\"predefinedMessages\"\r\n [botAvatarUrl]=\"botAvatarUrl\"\r\n [userAvatarUrl]=\"userAvatarUrl\"\r\n [trackByMessageId]=\"trackByMessageId\"\r\n (suggestionClick)=\"onSuggestionClick($event)\"\r\n ></app-message-list>\r\n\r\n <!-- SUGGESTED CHIPS: Show only if last bot message was fallback -->\r\n <app-chips\r\n *ngIf=\"showSuggestionChips\"\r\n [messages]=\"predefinedMessages\"\r\n [disabled]=\"isBotTyping\"\r\n (chipClick)=\"onSuggestionClick($event)\"\r\n ></app-chips>\r\n\r\n <!-- Inline error message -->\r\n <app-snackbar\r\n *ngIf=\"messageError\"\r\n [message]=\"messageError\"\r\n [show]=\"!messageError\"\r\n (closed)=\"onClearMessageError()\"\r\n ></app-snackbar>\r\n\r\n <!-- Chat Input -->\r\n <app-message-input\r\n [isBotTyping]=\"isBotTyping\"\r\n [hintText]=\"hintText\"\r\n [sendIcon]=\"sendIcon\"\r\n (send)=\"onSend($event)\"\r\n ></app-message-input>\r\n\r\n <!-- footer -->\r\n <div class=\"terms-conditions\">\r\n <a href=\"#\">Terms and Conditions</a>\r\n </div>\r\n</div>\r\n\r\n<mat-menu #settingsMenu=\"matMenu\" class=\"mat-menu-override\">\r\n <!-- Change Theme -->\r\n <div class=\"theme-selector\">\r\n <!--
|
|
1210
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.12", type: ChatWindowComponent, isStandalone: true, selector: "app-chat-window", inputs: { isChatOpen: "isChatOpen", enableDrag: "enableDrag", enableResize: "enableResize", isFullScreen: "isFullScreen", appTitle: "appTitle", appLogoUrl: "appLogoUrl", moreIcon: "moreIcon", minimizeIcon: "minimizeIcon", messages: "messages", isBotTyping: "isBotTyping", appSubtitle: "appSubtitle", welcomeDesc: "welcomeDesc", predefinedMessages: "predefinedMessages", botAvatarUrl: "botAvatarUrl", userAvatarUrl: "userAvatarUrl", trackByMessageId: "trackByMessageId", hintText: "hintText", sendIcon: "sendIcon", messageError: "messageError", showSuggestionChips: "showSuggestionChips" }, outputs: { toggleChat: "toggleChat", toggleFullScreen: "toggleFullScreen", openSettings: "openSettings", suggestionClick: "suggestionClick", send: "send", clearMessageError: "clearMessageError", clearChat: "clearChat" }, ngImport: i0, template: "<div\r\n *ngIf=\"isChatOpen\"\r\n draggableDialog\r\n [enableDrag]=\"enableDrag\"\r\n [dragHandle]=\"'.chat-header'\"\r\n resizableDialog\r\n [enableResize]=\"enableResize\"\r\n class=\"chat-window\"\r\n [class.fullscreen]=\"isFullScreen\"\r\n>\r\n <!-- chat window -->\r\n <div class=\"chat-header\">\r\n <div class=\"chat-title\">\r\n <img class=\"chat-logo\" style=\"border-radius: 14px\" [src]=\"appLogoUrl\" alt=\"Logo\" />\r\n <h2>{{ appTitle }}</h2>\r\n </div>\r\n\r\n <div class=\"chat-header-buttons\">\r\n <!-- settings Button -->\r\n <button class=\"header-button\" [matMenuTriggerFor]=\"settingsMenu\">\r\n <mat-icon>{{ moreIcon }}</mat-icon>\r\n </button>\r\n\r\n <!-- minimize Button -->\r\n <button class=\"header-button\" (click)=\"onToggleChat()\">\r\n <mat-icon>{{ minimizeIcon }}</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- Messages / Welcome Screen -->\r\n <app-message-list\r\n [messages]=\"messages\"\r\n [isBotTyping]=\"isBotTyping\"\r\n [appLogoUrl]=\"appLogoUrl\"\r\n [appSubtitle]=\"appSubtitle\"\r\n [welcomeDesc]=\"welcomeDesc\"\r\n [predefinedMessages]=\"predefinedMessages\"\r\n [botAvatarUrl]=\"botAvatarUrl\"\r\n [userAvatarUrl]=\"userAvatarUrl\"\r\n [trackByMessageId]=\"trackByMessageId\"\r\n (suggestionClick)=\"onSuggestionClick($event)\"\r\n ></app-message-list>\r\n\r\n <!-- SUGGESTED CHIPS: Show only if last bot message was fallback -->\r\n <app-chips\r\n *ngIf=\"showSuggestionChips\"\r\n [messages]=\"predefinedMessages\"\r\n [disabled]=\"isBotTyping\"\r\n (chipClick)=\"onSuggestionClick($event)\"\r\n ></app-chips>\r\n\r\n <!-- Inline error message -->\r\n <app-snackbar\r\n *ngIf=\"messageError\"\r\n [message]=\"messageError\"\r\n [show]=\"!messageError\"\r\n (closed)=\"onClearMessageError()\"\r\n ></app-snackbar>\r\n\r\n <!-- Chat Input -->\r\n <app-message-input\r\n [isBotTyping]=\"isBotTyping\"\r\n [hintText]=\"hintText\"\r\n [sendIcon]=\"sendIcon\"\r\n (send)=\"onSend($event)\"\r\n ></app-message-input>\r\n\r\n <!-- footer -->\r\n <div class=\"terms-conditions\">\r\n <a href=\"#\">Terms and Conditions</a>\r\n </div>\r\n</div>\r\n\r\n<mat-menu #settingsMenu=\"matMenu\" class=\"mat-menu-override\">\r\n <!-- Change Theme -->\r\n <div class=\"theme-selector\">\r\n <!-- Light Theme -->\r\n <button\r\n mat-icon-button\r\n class=\"theme-btn\"\r\n [class.selected]=\"themeService.theme() === 'light'\"\r\n (click)=\"themeService.setTheme('light')\"\r\n >\r\n <mat-icon>light_mode</mat-icon>\r\n </button>\r\n\r\n <!-- Dark Theme -->\r\n <button\r\n mat-icon-button\r\n class=\"theme-btn\"\r\n [class.selected]=\"themeService.theme() === 'dark'\"\r\n (click)=\"themeService.setTheme('dark')\"\r\n >\r\n <mat-icon>dark_mode</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <!-- Full-Screen Button -->\r\n <button mat-menu-item (click)=\"onToggleFullScreen()\" style=\"display: flex; align-items: center\">\r\n <mat-icon>{{ isFullScreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>\r\n <span> {{ isFullScreen ? 'Minimize' : 'Expand' }}</span>\r\n </button>\r\n\r\n <!-- Clear Chat -->\r\n <button mat-menu-item (click)=\"onClearChat()\" style=\"display: flex; align-items: center\">\r\n <mat-icon>clear_all</mat-icon>\r\n <span>Clear Chat</span>\r\n </button>\r\n</mat-menu>\r\n", styles: [".chat-window{width:clamp(400px,30vw,450px);height:clamp(620px,70vh,660px);background-color:var(--background-color);border-radius:20px;border-color:var(--border-color);box-shadow:var(--border-shadow-color);display:flex;flex-direction:column;overflow:hidden;animation:slide-in .5s ease;position:fixed;right:20px;bottom:20px;-webkit-user-select:none;user-select:none}@media (max-width: 768px){.chat-window{width:95%;height:calc(100vh - 20px)}}@media (max-width: 480px){.chat-window{width:90%;height:calc(100vh - 40px)}}.chat-window.fullscreen{width:98vw;height:96vh;border-radius:20px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-user-select:none;user-select:none}@keyframes slide-in{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.chat-header{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;background-color:var(--background-color);color:var(--text-alt-color);cursor:move;-webkit-user-select:none;user-select:none}.chat-header:active{cursor:grabbing}.chat-title{display:flex;align-items:center;gap:6px;font-family:var(--font-family)}.chat-logo{width:45px;height:45px;object-fit:contain}.chat-header h2{margin:0;font-size:1.2rem;color:var(--text-alt-color);font-family:var(--font-family);font-weight:700}.header-button{background:none;border:none;color:var(--text-alt-color);cursor:pointer;font-size:1.5rem}.header-button :hover{transform:scale(1.1)}.terms-conditions{font-size:.8rem;color:var(--text-color);margin-top:5px;margin-bottom:10px;display:flex;justify-content:center;align-items:center}.terms-conditions a{color:var(--grey);text-decoration:underline;font-family:var(--font-family)}.terms-conditions a:hover{color:var(--primary-color)}.theme-selector{display:flex;align-items:center;padding:4px 12px;gap:8px}.theme-btn{background:none;border:none;color:#fff;transition:color .2s ease}.theme-btn.selected{color:#000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: Chips, selector: "app-chips", inputs: ["messages", "disabled"], outputs: ["chipClick"] }, { kind: "component", type: MessageListComponent, selector: "app-message-list", inputs: ["messages", "isBotTyping", "appLogoUrl", "appSubtitle", "welcomeDesc", "predefinedMessages", "botAvatarUrl", "userAvatarUrl", "trackByMessageId"], outputs: ["suggestionClick"] }, { kind: "component", type: MessageInputComponent, selector: "app-message-input", inputs: ["isBotTyping", "hintText", "sendIcon"], outputs: ["send"] }, { kind: "component", type: SnackBar, selector: "app-snackbar", inputs: ["message", "autoDismiss", "dismissDelay", "show"], outputs: ["closed"] }, { kind: "directive", type: DraggableDialogDirective, selector: "[draggableDialog]", inputs: ["dragHandle", "enableDrag"] }, { kind: "directive", type: ResizableDialogDirective, selector: "[resizableDialog]", inputs: ["enableResize"] }] });
|
|
1177
1211
|
}
|
|
1178
1212
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: ChatWindowComponent, decorators: [{
|
|
1179
1213
|
type: Component,
|
|
@@ -1187,7 +1221,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
|
|
|
1187
1221
|
SnackBar,
|
|
1188
1222
|
DraggableDialogDirective,
|
|
1189
1223
|
ResizableDialogDirective,
|
|
1190
|
-
], template: "<div\r\n *ngIf=\"isChatOpen\"\r\n draggableDialog\r\n [enableDrag]=\"enableDrag\"\r\n [dragHandle]=\"'.chat-header'\"\r\n resizableDialog\r\n [enableResize]=\"enableResize\"\r\n class=\"chat-window\"\r\n [class.fullscreen]=\"isFullScreen\"\r\n>\r\n <!-- chat window -->\r\n <div class=\"chat-header\">\r\n <div class=\"chat-title\">\r\n <img class=\"chat-logo\" style=\"border-radius: 14px\" [src]=\"appLogoUrl\" alt=\"Logo\" />\r\n <h2>{{ appTitle }}</h2>\r\n </div>\r\n\r\n <div class=\"chat-header-buttons\">\r\n <!-- settings Button -->\r\n <button class=\"header-button\" [matMenuTriggerFor]=\"settingsMenu\">\r\n <mat-icon>{{ moreIcon }}</mat-icon>\r\n </button>\r\n\r\n <!-- minimize Button -->\r\n <button class=\"header-button\" (click)=\"onToggleChat()\">\r\n <mat-icon>{{ minimizeIcon }}</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- Messages / Welcome Screen -->\r\n <app-message-list\r\n [messages]=\"messages\"\r\n [isBotTyping]=\"isBotTyping\"\r\n [appLogoUrl]=\"appLogoUrl\"\r\n [appSubtitle]=\"appSubtitle\"\r\n [welcomeDesc]=\"welcomeDesc\"\r\n [predefinedMessages]=\"predefinedMessages\"\r\n [botAvatarUrl]=\"botAvatarUrl\"\r\n [userAvatarUrl]=\"userAvatarUrl\"\r\n [trackByMessageId]=\"trackByMessageId\"\r\n (suggestionClick)=\"onSuggestionClick($event)\"\r\n ></app-message-list>\r\n\r\n <!-- SUGGESTED CHIPS: Show only if last bot message was fallback -->\r\n <app-chips\r\n *ngIf=\"showSuggestionChips\"\r\n [messages]=\"predefinedMessages\"\r\n [disabled]=\"isBotTyping\"\r\n (chipClick)=\"onSuggestionClick($event)\"\r\n ></app-chips>\r\n\r\n <!-- Inline error message -->\r\n <app-snackbar\r\n *ngIf=\"messageError\"\r\n [message]=\"messageError\"\r\n [show]=\"!messageError\"\r\n (closed)=\"onClearMessageError()\"\r\n ></app-snackbar>\r\n\r\n <!-- Chat Input -->\r\n <app-message-input\r\n [isBotTyping]=\"isBotTyping\"\r\n [hintText]=\"hintText\"\r\n [sendIcon]=\"sendIcon\"\r\n (send)=\"onSend($event)\"\r\n ></app-message-input>\r\n\r\n <!-- footer -->\r\n <div class=\"terms-conditions\">\r\n <a href=\"#\">Terms and Conditions</a>\r\n </div>\r\n</div>\r\n\r\n<mat-menu #settingsMenu=\"matMenu\" class=\"mat-menu-override\">\r\n <!-- Change Theme -->\r\n <div class=\"theme-selector\">\r\n <!--
|
|
1224
|
+
], template: "<div\r\n *ngIf=\"isChatOpen\"\r\n draggableDialog\r\n [enableDrag]=\"enableDrag\"\r\n [dragHandle]=\"'.chat-header'\"\r\n resizableDialog\r\n [enableResize]=\"enableResize\"\r\n class=\"chat-window\"\r\n [class.fullscreen]=\"isFullScreen\"\r\n>\r\n <!-- chat window -->\r\n <div class=\"chat-header\">\r\n <div class=\"chat-title\">\r\n <img class=\"chat-logo\" style=\"border-radius: 14px\" [src]=\"appLogoUrl\" alt=\"Logo\" />\r\n <h2>{{ appTitle }}</h2>\r\n </div>\r\n\r\n <div class=\"chat-header-buttons\">\r\n <!-- settings Button -->\r\n <button class=\"header-button\" [matMenuTriggerFor]=\"settingsMenu\">\r\n <mat-icon>{{ moreIcon }}</mat-icon>\r\n </button>\r\n\r\n <!-- minimize Button -->\r\n <button class=\"header-button\" (click)=\"onToggleChat()\">\r\n <mat-icon>{{ minimizeIcon }}</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- Messages / Welcome Screen -->\r\n <app-message-list\r\n [messages]=\"messages\"\r\n [isBotTyping]=\"isBotTyping\"\r\n [appLogoUrl]=\"appLogoUrl\"\r\n [appSubtitle]=\"appSubtitle\"\r\n [welcomeDesc]=\"welcomeDesc\"\r\n [predefinedMessages]=\"predefinedMessages\"\r\n [botAvatarUrl]=\"botAvatarUrl\"\r\n [userAvatarUrl]=\"userAvatarUrl\"\r\n [trackByMessageId]=\"trackByMessageId\"\r\n (suggestionClick)=\"onSuggestionClick($event)\"\r\n ></app-message-list>\r\n\r\n <!-- SUGGESTED CHIPS: Show only if last bot message was fallback -->\r\n <app-chips\r\n *ngIf=\"showSuggestionChips\"\r\n [messages]=\"predefinedMessages\"\r\n [disabled]=\"isBotTyping\"\r\n (chipClick)=\"onSuggestionClick($event)\"\r\n ></app-chips>\r\n\r\n <!-- Inline error message -->\r\n <app-snackbar\r\n *ngIf=\"messageError\"\r\n [message]=\"messageError\"\r\n [show]=\"!messageError\"\r\n (closed)=\"onClearMessageError()\"\r\n ></app-snackbar>\r\n\r\n <!-- Chat Input -->\r\n <app-message-input\r\n [isBotTyping]=\"isBotTyping\"\r\n [hintText]=\"hintText\"\r\n [sendIcon]=\"sendIcon\"\r\n (send)=\"onSend($event)\"\r\n ></app-message-input>\r\n\r\n <!-- footer -->\r\n <div class=\"terms-conditions\">\r\n <a href=\"#\">Terms and Conditions</a>\r\n </div>\r\n</div>\r\n\r\n<mat-menu #settingsMenu=\"matMenu\" class=\"mat-menu-override\">\r\n <!-- Change Theme -->\r\n <div class=\"theme-selector\">\r\n <!-- Light Theme -->\r\n <button\r\n mat-icon-button\r\n class=\"theme-btn\"\r\n [class.selected]=\"themeService.theme() === 'light'\"\r\n (click)=\"themeService.setTheme('light')\"\r\n >\r\n <mat-icon>light_mode</mat-icon>\r\n </button>\r\n\r\n <!-- Dark Theme -->\r\n <button\r\n mat-icon-button\r\n class=\"theme-btn\"\r\n [class.selected]=\"themeService.theme() === 'dark'\"\r\n (click)=\"themeService.setTheme('dark')\"\r\n >\r\n <mat-icon>dark_mode</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <!-- Full-Screen Button -->\r\n <button mat-menu-item (click)=\"onToggleFullScreen()\" style=\"display: flex; align-items: center\">\r\n <mat-icon>{{ isFullScreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>\r\n <span> {{ isFullScreen ? 'Minimize' : 'Expand' }}</span>\r\n </button>\r\n\r\n <!-- Clear Chat -->\r\n <button mat-menu-item (click)=\"onClearChat()\" style=\"display: flex; align-items: center\">\r\n <mat-icon>clear_all</mat-icon>\r\n <span>Clear Chat</span>\r\n </button>\r\n</mat-menu>\r\n", styles: [".chat-window{width:clamp(400px,30vw,450px);height:clamp(620px,70vh,660px);background-color:var(--background-color);border-radius:20px;border-color:var(--border-color);box-shadow:var(--border-shadow-color);display:flex;flex-direction:column;overflow:hidden;animation:slide-in .5s ease;position:fixed;right:20px;bottom:20px;-webkit-user-select:none;user-select:none}@media (max-width: 768px){.chat-window{width:95%;height:calc(100vh - 20px)}}@media (max-width: 480px){.chat-window{width:90%;height:calc(100vh - 40px)}}.chat-window.fullscreen{width:98vw;height:96vh;border-radius:20px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-user-select:none;user-select:none}@keyframes slide-in{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.chat-header{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;background-color:var(--background-color);color:var(--text-alt-color);cursor:move;-webkit-user-select:none;user-select:none}.chat-header:active{cursor:grabbing}.chat-title{display:flex;align-items:center;gap:6px;font-family:var(--font-family)}.chat-logo{width:45px;height:45px;object-fit:contain}.chat-header h2{margin:0;font-size:1.2rem;color:var(--text-alt-color);font-family:var(--font-family);font-weight:700}.header-button{background:none;border:none;color:var(--text-alt-color);cursor:pointer;font-size:1.5rem}.header-button :hover{transform:scale(1.1)}.terms-conditions{font-size:.8rem;color:var(--text-color);margin-top:5px;margin-bottom:10px;display:flex;justify-content:center;align-items:center}.terms-conditions a{color:var(--grey);text-decoration:underline;font-family:var(--font-family)}.terms-conditions a:hover{color:var(--primary-color)}.theme-selector{display:flex;align-items:center;padding:4px 12px;gap:8px}.theme-btn{background:none;border:none;color:#fff;transition:color .2s ease}.theme-btn.selected{color:#000}\n"] }]
|
|
1191
1225
|
}], propDecorators: { isChatOpen: [{
|
|
1192
1226
|
type: Input
|
|
1193
1227
|
}], enableDrag: [{
|