@memberjunction/ng-chat 5.11.0 → 5.13.0
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.
|
@@ -365,11 +365,11 @@ export class ChatComponent {
|
|
|
365
365
|
i0.ɵɵproperty("disabled", !ctx.InternalAllowSend || ctx.currentMessage.length === 0 || ctx.ShowWaitingIndicator);
|
|
366
366
|
i0.ɵɵadvance(2);
|
|
367
367
|
i0.ɵɵconditional(ctx.showingClearAllDialog ? 17 : -1);
|
|
368
|
-
} }, dependencies: [i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgModel, i3.LoadingComponent, i4.ButtonComponent, i5.DialogComponent, i5.DialogActionsComponent], styles: [".loader[_ngcontent-%COMP%] {\n position: absolute;\n left: 0px;\n}\n\n.chat-wrapper[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n position: relative; \n\n}\n\n.chat-messages[_ngcontent-%COMP%] {\n overflow-y: auto; \n\n overflow-x: hidden; \n\n \n\n margin-bottom: 5px;\n\n margin-top: 2px; \n\n\n flex: 1;\n}\n\n\n\n.chat-messages[_ngcontent-%COMP%]::-webkit-scrollbar {\n width: 0;\n background: transparent; \n\n}\n\n\n\n.chat-messages[_ngcontent-%COMP%]:hover::-webkit-scrollbar {\n width: 12px; \n\n background-color:
|
|
368
|
+
} }, dependencies: [i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgModel, i3.LoadingComponent, i4.ButtonComponent, i5.DialogComponent, i5.DialogActionsComponent], styles: [".loader[_ngcontent-%COMP%] {\n position: absolute;\n left: 0px;\n}\n\n.chat-wrapper[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n position: relative; \n\n}\n\n.chat-messages[_ngcontent-%COMP%] {\n overflow-y: auto; \n\n overflow-x: hidden; \n\n \n\n margin-bottom: 5px;\n\n margin-top: 2px; \n\n\n flex: 1;\n}\n\n\n\n.chat-messages[_ngcontent-%COMP%]::-webkit-scrollbar {\n width: 0;\n background: transparent; \n\n}\n\n\n\n.chat-messages[_ngcontent-%COMP%]:hover::-webkit-scrollbar {\n width: 12px; \n\n background-color: var(--mj-bg-surface-sunken); \n\n\n}\n\n\n\n.chat-messages[_ngcontent-%COMP%]:hover::-webkit-scrollbar-thumb {\n background-color: var(--mj-text-muted); \n\n opacity: 0.5; \n\n}\n\n\n\n.chat-messages[_ngcontent-%COMP%]:hover::-webkit-scrollbar-thumb {\n border-radius: 10px;\n}\n\n\n\n.chat-messages[_ngcontent-%COMP%]:hover::-webkit-scrollbar-thumb:hover {\n background: var(--mj-text-secondary); \n\n}\n\n\n.chat-messages[_ngcontent-%COMP%] {\n scrollbar-width: thin; \n\n scrollbar-color: var(--mj-text-muted) var(--mj-bg-surface-sunken); \n\n}\n \n\n\n\n.chat-input-area[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-card);\n display: flex;\n justify-content: center;\n align-items: center;\n padding-top: 12px;\n min-height: 35px;\n margin-bottom: 15px;\n}\n.chat-input-area[_ngcontent-%COMP%] > button[_ngcontent-%COMP%] {\n vertical-align: top;\n width: 30px;\n height: 30px;\n margin-top: 3px;\n border-radius: 12px;\n}\n.chat-input-area[_ngcontent-%COMP%] > button[_ngcontent-%COMP%]:first-of-type {\n margin-left: -40px;\n}\n.chat-input-area[_ngcontent-%COMP%] > button[_ngcontent-%COMP%]:last-child {\n margin-left: -65px;\n}\n\n.text-area-wrapper[_ngcontent-%COMP%] {\n padding: 3px;\n border: solid 1px color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n border-radius: 15px;\n\n margin-top: 4px;\n margin-right: -1px;\n min-height: 42px;\n max-height: 100%; \n\n\n overflow: hidden; \n align-items: center;\n\n \n\n max-width: 710px; \n width: 75%; \n\n padding-right: 90px; \n\n} \n.text-area-wrapper[_ngcontent-%COMP%] > textarea[_ngcontent-%COMP%] {\n border: 0;\n outline: 0;\n resize: none;\n\n min-height: 20px; \n\n\n width: 100%;\n overflow-y: hidden; \n\n\n font-family: S\u00F6hne, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Ubuntu, Cantarell, \"Noto Sans\", sans-serif, \"Helvetica Neue\", Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n font-size: 1rem;\n\n margin-left: 7px;\n margin-top: 7px;\n margin-bottom: 5px;\n}\n\n.text-area-wrapper[_ngcontent-%COMP%] > textarea[_ngcontent-%COMP%]:disabled {\n background-color: var(--mj-bg-surface-card);\n}\n\n\n .chat-message-wrap {\n display: flex;\n align-items: flex-start; \n\n margin-bottom: 10px;\n margin-right: 10px;\n}\n\n .chat-message-image {\n margin-top: 12px;\n font-size: 24px; \n\n margin-right: 10px; \n\n width: 50px;\n flex-shrink: 0; \n \n}\n\n\n\n .chat-message {\n padding-left: 7px;\n padding-right: 7px;\n margin-bottom: 10px;\n border-radius: 5px;\n background-color: var(--mj-bg-surface-sunken);\n box-shadow: var(--mj-shadow-sm);\n word-wrap: break-word;\n}\n\n .chat-message-ai {\n background-color: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.scroll-to-bottom[_ngcontent-%COMP%] {\n position: absolute; \n\n left: 50%; \n\n transform: translateX(-50%); \n\n bottom: 100px; \n\n z-index: 1000; \n\n border-radius: 50%;\n width: 35px;\n height: 35px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 22px;\n background-color: var(--mj-bg-surface-sunken);\n box-shadow: var(--mj-shadow-md); \n\n cursor: pointer;\n}\n\n\n\n\n\n.welcome-wrapper[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 100%;\n width: 100%;\n overflow: hidden;\n}\n\n.welcome-message[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n overflow: hidden;\n height: 100%;\n}\n\n\n.welcome-message[_ngcontent-%COMP%] img[_ngcontent-%COMP%] {\n width: 120px;\n height: 50px;\n margin-bottom: 20px; \n\n}\n\n.welcome-header-text[_ngcontent-%COMP%] {\n font-size: larger;\n font-weight: bold;\n}\n\n\n\n.welcome-suggested-questions[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-content: center;\n}\n.welcome-suggested-questions-col[_ngcontent-%COMP%] {\n display: flex;\n}\n\n\n\n.welcome-question[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column; \n\n align-items: left;;\n width: 300px; \n justify-content: space-between;\n margin: 5px; \n\n border: solid 1px color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n border-radius: 15px;\n padding: 10px;\n cursor: pointer;\n}\n\n.welcome-question[_ngcontent-%COMP%]:hover {\n background-color: color-mix(in srgb, var(--mj-text-primary) 5%, transparent);\n}\n\n\n.welcome-question-header[_ngcontent-%COMP%] {\n font-size: 12pt;\n font-weight: bold;\n display: block; \n\n}\n\n\n\n.welcome-question[_ngcontent-%COMP%] span[_ngcontent-%COMP%]:not(.welcome-question-header) {\n font-weight: normal;\n font-size: 10pt;\n}"] });
|
|
369
369
|
}
|
|
370
370
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ChatComponent, [{
|
|
371
371
|
type: Component,
|
|
372
|
-
args: [{ standalone: false, selector: 'mj-chat', template: "<div class=\"chat-wrapper\">\n @if(Messages.length === 0 && !ShowWaitingIndicator) {\n <div class=\"welcome-wrapper\">\n <div class='welcome-message'>\n @if(AILargeImageURL) {\n <img [src]=\"AILargeImageURL\"/>\n }\n <div class=\"welcome-header-text\">What can I help with today?</div>\n </div>\n <div class='welcome-suggested-questions'>\n <div class=\"welcome-suggested-questions-col\">\n @if (WelcomeQuestions.length > 0) {\n <div class=\"welcome-question\" (click)=\"SendUserMessage(WelcomeQuestions[0].prompt)\">\n <span class=\"welcome-question-header\">{{WelcomeQuestions[0].topLine}}</span>\n <span>{{WelcomeQuestions[0].bottomLine}}</span>\n </div>\n }\n @if (WelcomeQuestions.length > 1) {\n <div class=\"welcome-question\" (click)=\"SendUserMessage(WelcomeQuestions[1].prompt)\">\n <span class=\"welcome-question-header\">{{WelcomeQuestions[1].topLine}}</span>\n <span>{{WelcomeQuestions[1].bottomLine}}</span>\n </div> \n }\n </div>\n <div class=\"welcome-suggested-questions-col\">\n @if (WelcomeQuestions.length > 2) {\n <div class=\"welcome-question\" (click)=\"SendUserMessage(WelcomeQuestions[2].prompt)\">\n <span class=\"welcome-question-header\">{{WelcomeQuestions[2].topLine}}</span>\n <span>{{WelcomeQuestions[2].bottomLine}}</span>\n </div> \n }\n @if (WelcomeQuestions.length > 3) {\n <div class=\"welcome-question\" (click)=\"SendUserMessage(WelcomeQuestions[3].prompt)\">\n <span class=\"welcome-question-header\">{{WelcomeQuestions[3].topLine}}</span>\n <span>{{WelcomeQuestions[3].bottomLine}}</span>\n </div> \n }\n </div>\n </div>\n </div> \n }\n\n <div class=\"chat-messages\" \n #messagesContainer \n (scroll)=\"handleCheckScroll()\">\n <!-- messages go here -->\n <span>{{InitialMessage}}</span>\n </div>\n @if (ShowScrollToBottomButton) {\n <span class=\"scroll-to-bottom fas fa-arrow-down\" (click)=\"ScrollMessagesToBottom()\"></span>\n }\n\n <div class = \"chat-input-area\">\n @if (ShowWaitingIndicator) {\n <mj-loading [showText]=\"false\" size=\"small\" class=\"loader\"></mj-loading>\n }\n <div class=\"text-area-wrapper\">\n <textarea #theInput \n [(ngModel)]=\"currentMessage\" \n [disabled]=\"ShowWaitingIndicator\" \n [placeholder]=\"Placeholder\" \n (input)=\"handleInputChange($event)\"\n (keyup.enter)=\"SendCurrentMessage()\" >\n </textarea>\n </div>\n <button kendoButton \n [disabled]=\"Messages.length === 0 || ShowWaitingIndicator\"\n (click)=\"showingClearAllDialog = true\">\n <span class=\"fa-solid fa-trash-can\" title=\"Clear Chat\">\n </span>\n </button>\n <button kendoButton\n [disabled]=\"!InternalAllowSend || currentMessage.length === 0 || ShowWaitingIndicator\" \n (click)=\"SendCurrentMessage()\">\n <span class=\"fas fa-solid fa-arrow-up\" title=\"Send Message\"></span>\n </button>\n </div>\n</div>\n@if (showingClearAllDialog) {\n <kendo-dialog>\n <p>{{ClearAllMessagesPrompt}}</p>\n <kendo-dialog-actions>\n <button kendoButton (click)=\"HandleClearChat()\" themeColor=\"primary\">Yes</button>\n <button kendoButton (click)=\"showingClearAllDialog = false\">No</button>\n </kendo-dialog-actions>\n </kendo-dialog>\n}\n", styles: [".loader {\n position: absolute;\n left: 0px;\n}\n\n.chat-wrapper {\n display: flex;\n flex-direction: column;\n position: relative; /* Add this line if the wrapper needs to be a reference point */\n}\n\n.chat-messages {\n overflow-y: auto; /* enable scrolling if the content overflows */\n overflow-x: hidden; /* hide horizontal scrollbar */\n /* border: solid 1px rgba(0, 0, 0, 0.08); */\n margin-bottom: 5px;\n\n margin-top: 2px; /* align it with the top of converation history exactly*/\n\n flex: 1;\n}\n\n/* Hide scrollbar for Chrome, Safari and Opera */\n.chat-messages::-webkit-scrollbar {\n width: 0;\n background: transparent; /* Optional: just make scrollbar invisible */\n}\n\n/* Optional: Show scrollbar on hover */\n.chat-messages:hover::-webkit-scrollbar {\n width: 12px; /* Adjust the width of the scrollbar here */\n background-color: #f0f0f0; /* Adjust the background color of the scrollbar here */\n\n}\n\n/* Handle on hover */\n.chat-messages:hover::-webkit-scrollbar-thumb {\n background-color: #888; /* Adjust the color of the scrollbar handle here */\n opacity: 0.5; /* Adjust the opacity of the scrollbar handle here */\n}\n\n/* Handle rounded corners */\n.chat-messages:hover::-webkit-scrollbar-thumb {\n border-radius: 10px;\n}\n\n/* Optional: handle's hover effect */\n.chat-messages:hover::-webkit-scrollbar-thumb:hover {\n background: #555; /* Adjust hover color here */\n}\n/* Works on Firefox */\n.chat-messages {\n scrollbar-width: thin; /* \"auto\" or \"thin\" */\n scrollbar-color: #888 #f0f0f0; /* thumb and track color */\n}\n \n\n\n\n.chat-input-area {\n background: #fff;\n display: flex;\n justify-content: center;\n align-items: center;\n padding-top: 12px;\n min-height: 35px;\n margin-bottom: 15px;\n}\n.chat-input-area > button {\n vertical-align: top;\n width: 30px;\n height: 30px;\n margin-top: 3px;\n border-radius: 12px;\n}\n.chat-input-area > button:first-of-type {\n margin-left: -40px;\n}\n.chat-input-area > button:last-child {\n margin-left: -65px;\n}\n\n.text-area-wrapper {\n padding: 3px;\n border: solid 1px rgba(0, 0, 0, 0.08) ;\n border-radius: 15px;\n\n margin-top: 4px;\n margin-right: -1px;\n min-height: 42px;\n max-height: 100%; /* Prevent it from growing beyond the container */\n\n overflow: hidden; \n align-items: center;\n\n /*combined width and padding is 800*/\n max-width: 710px; \n width: 75%; /*take up 75% but no more than 710px*/\n padding-right: 90px; /* Space for the buttons */\n} \n.text-area-wrapper > textarea {\n border: 0;\n outline: 0;\n resize: none;\n\n min-height: 20px; /* Initial height */\n\n width: 100%;\n overflow-y: hidden; /* Hide scrollbar */\n\n font-family: S\u00F6hne, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Ubuntu, Cantarell, \"Noto Sans\", sans-serif, \"Helvetica Neue\", Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n font-size: 1rem;\n\n margin-left: 7px;\n margin-top: 7px;\n margin-bottom: 5px;\n}\n\n.text-area-wrapper > textarea:disabled {\n background-color: white;\n}\n\n\n::ng-deep .chat-message-wrap {\n display: flex;\n align-items: flex-start; /* Align items to the top */\n margin-bottom: 10px;\n margin-right: 10px;\n}\n\n::ng-deep .chat-message-image {\n margin-top: 12px;\n font-size: 24px; /* Adjust size as necessary */\n margin-right: 10px; /* Space between the icon and the message text */\n width: 50px;\n flex-shrink: 0; /* Prevents the icon from shrinking */ \n}\n\n/* Styling for dynamic markdown content and message differentiation */\n::ng-deep .chat-message {\n padding-left: 7px;\n padding-right: 7px;\n margin-bottom: 10px;\n border-radius: 5px;\n background-color: rgb(255, 255, 240);\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n word-wrap: break-word;\n}\n\n::ng-deep .chat-message-ai {\n background-color: rgb(230, 246, 253);\n}\n\n.scroll-to-bottom {\n position: absolute; /* Or absolute, depending on your layout specifics */\n left: 50%; /* Start from the middle of the container */\n transform: translateX(-50%); /* Move it back by half of its own width to truly center it */\n bottom: 100px; /* Adjust based on the height of your input area */\n z-index: 1000; /* Make sure it's above all other content */\n border-radius: 50%;\n width: 35px;\n height: 35px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 22px;\n background-color: #f8f8f8;\n box-shadow: 0px 0px 5px rgba(0,0,0,0.3); /* Optional: Adds a subtle shadow for better visibility */\n cursor: pointer;\n}\n\n\n\n/* Center the welcome message vertically and horizontally */\n.welcome-wrapper {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 100%;\n width: 100%;\n overflow: hidden;\n}\n\n.welcome-message {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n overflow: hidden;\n height: 100%;\n}\n\n\n.welcome-message img {\n width: 120px;\n height: 50px;\n margin-bottom: 20px; /* Adds some space between the image and the text below */\n}\n\n.welcome-header-text {\n font-size: larger;\n font-weight: bold;\n}\n\n/* Position the welcome-suggested-questions at the bottom of its container */\n.welcome-suggested-questions {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-content: center;\n}\n.welcome-suggested-questions-col {\n display: flex;\n}\n\n/* Flex layout for questions, two per row */\n.welcome-question {\n display: flex;\n flex-direction: column; /* Stack the header and text vertically */\n align-items: left;;\n width: 300px; \n justify-content: space-between;\n margin: 5px; /* Adds some space around each question */\n border: solid 1px rgba(41, 28, 28, 0.08);\n border-radius: 15px;\n padding: 10px;\n cursor: pointer;\n}\n\n.welcome-question:hover {\n background-color: rgba(0, 0, 0, 0.05);\n}\n\n\n.welcome-question-header {\n font-size: 12pt;\n font-weight: bold;\n display: block; /* Ensures the header is on its own line */\n}\n\n/* Non-bold text for the content below the header */\n.welcome-question span:not(.welcome-question-header) {\n font-weight: normal;\n font-size: 10pt;\n}\n"] }]
|
|
372
|
+
args: [{ standalone: false, selector: 'mj-chat', template: "<div class=\"chat-wrapper\">\n @if(Messages.length === 0 && !ShowWaitingIndicator) {\n <div class=\"welcome-wrapper\">\n <div class='welcome-message'>\n @if(AILargeImageURL) {\n <img [src]=\"AILargeImageURL\"/>\n }\n <div class=\"welcome-header-text\">What can I help with today?</div>\n </div>\n <div class='welcome-suggested-questions'>\n <div class=\"welcome-suggested-questions-col\">\n @if (WelcomeQuestions.length > 0) {\n <div class=\"welcome-question\" (click)=\"SendUserMessage(WelcomeQuestions[0].prompt)\">\n <span class=\"welcome-question-header\">{{WelcomeQuestions[0].topLine}}</span>\n <span>{{WelcomeQuestions[0].bottomLine}}</span>\n </div>\n }\n @if (WelcomeQuestions.length > 1) {\n <div class=\"welcome-question\" (click)=\"SendUserMessage(WelcomeQuestions[1].prompt)\">\n <span class=\"welcome-question-header\">{{WelcomeQuestions[1].topLine}}</span>\n <span>{{WelcomeQuestions[1].bottomLine}}</span>\n </div> \n }\n </div>\n <div class=\"welcome-suggested-questions-col\">\n @if (WelcomeQuestions.length > 2) {\n <div class=\"welcome-question\" (click)=\"SendUserMessage(WelcomeQuestions[2].prompt)\">\n <span class=\"welcome-question-header\">{{WelcomeQuestions[2].topLine}}</span>\n <span>{{WelcomeQuestions[2].bottomLine}}</span>\n </div> \n }\n @if (WelcomeQuestions.length > 3) {\n <div class=\"welcome-question\" (click)=\"SendUserMessage(WelcomeQuestions[3].prompt)\">\n <span class=\"welcome-question-header\">{{WelcomeQuestions[3].topLine}}</span>\n <span>{{WelcomeQuestions[3].bottomLine}}</span>\n </div> \n }\n </div>\n </div>\n </div> \n }\n\n <div class=\"chat-messages\" \n #messagesContainer \n (scroll)=\"handleCheckScroll()\">\n <!-- messages go here -->\n <span>{{InitialMessage}}</span>\n </div>\n @if (ShowScrollToBottomButton) {\n <span class=\"scroll-to-bottom fas fa-arrow-down\" (click)=\"ScrollMessagesToBottom()\"></span>\n }\n\n <div class = \"chat-input-area\">\n @if (ShowWaitingIndicator) {\n <mj-loading [showText]=\"false\" size=\"small\" class=\"loader\"></mj-loading>\n }\n <div class=\"text-area-wrapper\">\n <textarea #theInput \n [(ngModel)]=\"currentMessage\" \n [disabled]=\"ShowWaitingIndicator\" \n [placeholder]=\"Placeholder\" \n (input)=\"handleInputChange($event)\"\n (keyup.enter)=\"SendCurrentMessage()\" >\n </textarea>\n </div>\n <button kendoButton \n [disabled]=\"Messages.length === 0 || ShowWaitingIndicator\"\n (click)=\"showingClearAllDialog = true\">\n <span class=\"fa-solid fa-trash-can\" title=\"Clear Chat\">\n </span>\n </button>\n <button kendoButton\n [disabled]=\"!InternalAllowSend || currentMessage.length === 0 || ShowWaitingIndicator\" \n (click)=\"SendCurrentMessage()\">\n <span class=\"fas fa-solid fa-arrow-up\" title=\"Send Message\"></span>\n </button>\n </div>\n</div>\n@if (showingClearAllDialog) {\n <kendo-dialog>\n <p>{{ClearAllMessagesPrompt}}</p>\n <kendo-dialog-actions>\n <button kendoButton (click)=\"HandleClearChat()\" themeColor=\"primary\">Yes</button>\n <button kendoButton (click)=\"showingClearAllDialog = false\">No</button>\n </kendo-dialog-actions>\n </kendo-dialog>\n}\n", styles: [".loader {\n position: absolute;\n left: 0px;\n}\n\n.chat-wrapper {\n display: flex;\n flex-direction: column;\n position: relative; /* Add this line if the wrapper needs to be a reference point */\n}\n\n.chat-messages {\n overflow-y: auto; /* enable scrolling if the content overflows */\n overflow-x: hidden; /* hide horizontal scrollbar */\n /* border: solid 1px rgba(0, 0, 0, 0.08); */\n margin-bottom: 5px;\n\n margin-top: 2px; /* align it with the top of converation history exactly*/\n\n flex: 1;\n}\n\n/* Hide scrollbar for Chrome, Safari and Opera */\n.chat-messages::-webkit-scrollbar {\n width: 0;\n background: transparent; /* Optional: just make scrollbar invisible */\n}\n\n/* Optional: Show scrollbar on hover */\n.chat-messages:hover::-webkit-scrollbar {\n width: 12px; /* Adjust the width of the scrollbar here */\n background-color: var(--mj-bg-surface-sunken); /* Adjust the background color of the scrollbar here */\n\n}\n\n/* Handle on hover */\n.chat-messages:hover::-webkit-scrollbar-thumb {\n background-color: var(--mj-text-muted); /* Adjust the color of the scrollbar handle here */\n opacity: 0.5; /* Adjust the opacity of the scrollbar handle here */\n}\n\n/* Handle rounded corners */\n.chat-messages:hover::-webkit-scrollbar-thumb {\n border-radius: 10px;\n}\n\n/* Optional: handle's hover effect */\n.chat-messages:hover::-webkit-scrollbar-thumb:hover {\n background: var(--mj-text-secondary); /* Adjust hover color here */\n}\n/* Works on Firefox */\n.chat-messages {\n scrollbar-width: thin; /* \"auto\" or \"thin\" */\n scrollbar-color: var(--mj-text-muted) var(--mj-bg-surface-sunken); /* thumb and track color */\n}\n \n\n\n\n.chat-input-area {\n background: var(--mj-bg-surface-card);\n display: flex;\n justify-content: center;\n align-items: center;\n padding-top: 12px;\n min-height: 35px;\n margin-bottom: 15px;\n}\n.chat-input-area > button {\n vertical-align: top;\n width: 30px;\n height: 30px;\n margin-top: 3px;\n border-radius: 12px;\n}\n.chat-input-area > button:first-of-type {\n margin-left: -40px;\n}\n.chat-input-area > button:last-child {\n margin-left: -65px;\n}\n\n.text-area-wrapper {\n padding: 3px;\n border: solid 1px color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n border-radius: 15px;\n\n margin-top: 4px;\n margin-right: -1px;\n min-height: 42px;\n max-height: 100%; /* Prevent it from growing beyond the container */\n\n overflow: hidden; \n align-items: center;\n\n /*combined width and padding is 800*/\n max-width: 710px; \n width: 75%; /*take up 75% but no more than 710px*/\n padding-right: 90px; /* Space for the buttons */\n} \n.text-area-wrapper > textarea {\n border: 0;\n outline: 0;\n resize: none;\n\n min-height: 20px; /* Initial height */\n\n width: 100%;\n overflow-y: hidden; /* Hide scrollbar */\n\n font-family: S\u00F6hne, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Ubuntu, Cantarell, \"Noto Sans\", sans-serif, \"Helvetica Neue\", Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n font-size: 1rem;\n\n margin-left: 7px;\n margin-top: 7px;\n margin-bottom: 5px;\n}\n\n.text-area-wrapper > textarea:disabled {\n background-color: var(--mj-bg-surface-card);\n}\n\n\n::ng-deep .chat-message-wrap {\n display: flex;\n align-items: flex-start; /* Align items to the top */\n margin-bottom: 10px;\n margin-right: 10px;\n}\n\n::ng-deep .chat-message-image {\n margin-top: 12px;\n font-size: 24px; /* Adjust size as necessary */\n margin-right: 10px; /* Space between the icon and the message text */\n width: 50px;\n flex-shrink: 0; /* Prevents the icon from shrinking */ \n}\n\n/* Styling for dynamic markdown content and message differentiation */\n::ng-deep .chat-message {\n padding-left: 7px;\n padding-right: 7px;\n margin-bottom: 10px;\n border-radius: 5px;\n background-color: var(--mj-bg-surface-sunken);\n box-shadow: var(--mj-shadow-sm);\n word-wrap: break-word;\n}\n\n::ng-deep .chat-message-ai {\n background-color: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.scroll-to-bottom {\n position: absolute; /* Or absolute, depending on your layout specifics */\n left: 50%; /* Start from the middle of the container */\n transform: translateX(-50%); /* Move it back by half of its own width to truly center it */\n bottom: 100px; /* Adjust based on the height of your input area */\n z-index: 1000; /* Make sure it's above all other content */\n border-radius: 50%;\n width: 35px;\n height: 35px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 22px;\n background-color: var(--mj-bg-surface-sunken);\n box-shadow: var(--mj-shadow-md); /* Optional: Adds a subtle shadow for better visibility */\n cursor: pointer;\n}\n\n\n\n/* Center the welcome message vertically and horizontally */\n.welcome-wrapper {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 100%;\n width: 100%;\n overflow: hidden;\n}\n\n.welcome-message {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n overflow: hidden;\n height: 100%;\n}\n\n\n.welcome-message img {\n width: 120px;\n height: 50px;\n margin-bottom: 20px; /* Adds some space between the image and the text below */\n}\n\n.welcome-header-text {\n font-size: larger;\n font-weight: bold;\n}\n\n/* Position the welcome-suggested-questions at the bottom of its container */\n.welcome-suggested-questions {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-content: center;\n}\n.welcome-suggested-questions-col {\n display: flex;\n}\n\n/* Flex layout for questions, two per row */\n.welcome-question {\n display: flex;\n flex-direction: column; /* Stack the header and text vertically */\n align-items: left;;\n width: 300px; \n justify-content: space-between;\n margin: 5px; /* Adds some space around each question */\n border: solid 1px color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n border-radius: 15px;\n padding: 10px;\n cursor: pointer;\n}\n\n.welcome-question:hover {\n background-color: color-mix(in srgb, var(--mj-text-primary) 5%, transparent);\n}\n\n\n.welcome-question-header {\n font-size: 12pt;\n font-weight: bold;\n display: block; /* Ensures the header is on its own line */\n}\n\n/* Non-bold text for the content below the header */\n.welcome-question span:not(.welcome-question-header) {\n font-weight: normal;\n font-size: 10pt;\n}\n"] }]
|
|
373
373
|
}], () => [{ type: i1.MarkdownService }, { type: i0.ChangeDetectorRef }], { InitialMessage: [{
|
|
374
374
|
type: Input
|
|
375
375
|
}], Messages: [{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@memberjunction/ng-chat",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.13.0",
|
|
4
4
|
"description": "MemberJunction: Reusable Chat Component - can be used for AI or peer to peer chat applications.",
|
|
5
5
|
"main": "./dist/public-api.js",
|
|
6
6
|
"typings": "./dist/public-api.d.ts",
|
|
@@ -26,14 +26,14 @@
|
|
|
26
26
|
"@angular/forms": "21.1.3"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@memberjunction/core": "5.
|
|
30
|
-
"@memberjunction/ng-container-directives": "5.
|
|
31
|
-
"@memberjunction/ng-shared-generic": "5.
|
|
29
|
+
"@memberjunction/core": "5.13.0",
|
|
30
|
+
"@memberjunction/ng-container-directives": "5.13.0",
|
|
31
|
+
"@memberjunction/ng-shared-generic": "5.13.0",
|
|
32
32
|
"@progress/kendo-angular-indicators": "22.0.1",
|
|
33
33
|
"@progress/kendo-angular-buttons": "22.0.1",
|
|
34
34
|
"@progress/kendo-angular-dialog": "22.0.1",
|
|
35
35
|
"tslib": "^2.8.1",
|
|
36
|
-
"@memberjunction/ng-markdown": "5.
|
|
36
|
+
"@memberjunction/ng-markdown": "5.13.0"
|
|
37
37
|
},
|
|
38
38
|
"sideEffects": false,
|
|
39
39
|
"repository": {
|