@postnord/pn-marketweb-components 3.5.2 → 4.0.0

package/esm/pn-chat.entry.js

@@ -0,0 +1,470 @@
+import { r as registerInstance, h, F as Fragment, d as Host } from './index-c311acd6.js';
+import { a as arrow_right } from './arrow_right-f4852d04.js';
+import { c as close } from './close-9e7bd787.js';
+import { m as minus } from './minus-2b8ae0b8.js';
+import { L as LocalStorageService } from './LocalStorageService-78b1794d.js';
+import { P as PnChatService } from './pn-chat.service-f4037d6f.js';
+import './FetchHelper-4789695a.js';
+
+const icon$1 = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M21 11.998a1 1 0 0 1-.577.908l-15 7a1 1 0 0 1-1.237-1.487l4.585-6.42-1.46-2.043A1 1 0 1 1 8.94 8.794l1.875 2.625a1 1 0 0 1 0 1.162l-2.788 3.903 9.599-4.48L6.58 6.909a1 1 0 1 1 .838-1.816l13 6a1 1 0 0 1 .581.906M5 4a1 1 0 0 1 1 1v.01a1 1 0 1 1-2 0V5a1 1 0 0 1 1-1" clip-rule="evenodd"/></svg>';
+const submit = icon$1;
+
+const icon = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12.388 2c5.522 0 10 4.477 10 10s-4.478 10-10 10H2l1.355-4.064-.798-3.987a8.8 8.8 0 0 1-.17-1.717V12c0-5.523 4.478-10 10-10m8 10a8 8 0 0 0-16 0v.232q0 .67.13 1.325l.902 4.507L4.775 20h7.612a8 8 0 0 0 8-8m-12.5-1.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3m6 1.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0m3-1.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3" clip-rule="evenodd"/></svg>';
+const talk_bubble = icon;
+
+const translations = {
+    'sv': {
+        relatedContentAriaLabel: 'Relaterat innehåll',
+        chatMinimizedAriaLabel: 'Chatten är minimerad',
+        chatOpenedAriaLabel: 'Chatten är öppen',
+        minimizeChatAriaLabel: 'Minimera chatten',
+        closeChatAriaLabel: 'Stäng chatten',
+        openChatAriaLabel: 'Öppna chatten',
+        chatControlsAriaLabel: 'Chattkontroller',
+        chatMessagesAriaLabel: 'Chattmeddelanden',
+        sentMessageAriaLabel: 'Meddelande skickat',
+        writeChatMessagePlaceholder: 'Skriv ett meddelande...',
+        waitingForAnswerLabel: 'Väntar på svar',
+        sendButtonText: 'Skicka',
+        loadingText: 'Laddar...',
+    },
+    'en': {
+        relatedContentAriaLabel: 'Related content',
+        chatMinimizedAriaLabel: 'Chat is minimized',
+        chatOpenedAriaLabel: 'Chat is open',
+        minimizeChatAriaLabel: 'Minimize chat',
+        closeChatAriaLabel: 'Close chat',
+        openChatAriaLabel: 'Open chat',
+        chatControlsAriaLabel: 'Chat controls',
+        chatMessagesAriaLabel: 'Chat messages',
+        sentMessageAriaLabel: 'Message sent',
+        writeChatMessagePlaceholder: 'Type a message...',
+        waitingForAnswerLabel: 'Waiting for answer',
+        sendButtonText: 'Send',
+        loadingText: 'Loading...',
+    },
+    'da': {
+        relatedContentAriaLabel: 'Relateret indhold',
+        chatMinimizedAriaLabel: 'Chatten er minimeret',
+        chatOpenedAriaLabel: 'Chatten er åben',
+        minimizeChatAriaLabel: 'Minimer chatten',
+        closeChatAriaLabel: 'Luk chatten',
+        openChatAriaLabel: 'Åbn chatten',
+        chatControlsAriaLabel: 'Chatkontroller',
+        chatMessagesAriaLabel: 'Chatbeskeder',
+        sentMessageAriaLabel: 'Besked sendt',
+        writeChatMessagePlaceholder: 'Skriv en besked...',
+        waitingForAnswerLabel: 'Venter på svar',
+        sendButtonText: 'Send',
+        loadingText: 'Indlæser...',
+    },
+    'no': {
+        relatedContentAriaLabel: 'Relatert innhold',
+        chatMinimizedAriaLabel: 'Chatten er minimert',
+        chatOpenedAriaLabel: 'Chatten er åpen',
+        minimizeChatAriaLabel: 'Minimer chatten',
+        closeChatAriaLabel: 'Lukk chatten',
+        openChatAriaLabel: 'Åpne chatten',
+        chatControlsAriaLabel: 'Chatkontroller',
+        chatMessagesAriaLabel: 'Chatmeldinger',
+        sentMessageAriaLabel: 'Melding sendt',
+        writeChatMessagePlaceholder: 'Skriv en melding...',
+        waitingForAnswerLabel: 'Venter på svar',
+        sendButtonText: 'Send',
+        loadingText: 'Laster...',
+    },
+    'fi': {
+        relatedContentAriaLabel: 'Aiheeseen liittyvä sisältö',
+        chatMinimizedAriaLabel: 'Keskustelu on pienennetty',
+        chatOpenedAriaLabel: 'Keskustelu on auki',
+        minimizeChatAriaLabel: 'Pienennä keskustelu',
+        closeChatAriaLabel: 'Sulje keskustelu',
+        openChatAriaLabel: 'Avaa keskustelu',
+        chatControlsAriaLabel: 'Keskustelun hallinta',
+        chatMessagesAriaLabel: 'Keskusteluviestit',
+        sentMessageAriaLabel: 'Viesti lähetetty',
+        writeChatMessagePlaceholder: 'Kirjoita viesti...',
+        waitingForAnswerLabel: 'Odotetaan vastausta',
+        sendButtonText: 'Lähetä',
+        loadingText: 'Ladataan...',
+    },
+};
+
+const pnChatCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}.pn-chat{display:flex;flex-direction:column;height:600px;width:100%;max-width:400px;box-shadow:0 4px 12px rgba(0, 0, 0, 0.1);border-radius:1.6rem}@media (max-width: 768px){.pn-chat:not(.minimized){position:absolute;height:100dvh;width:100dvw;max-width:100%;top:0;left:0}.pn-chat.minimized{height:70px;border-radius:0.8rem 0.8rem 0 0}}@media (min-width: 768px) and (max-width: 1024px){.pn-chat{max-width:350px}}.pn-chat .chat-header{background-color:#005d92;color:#ffffff;padding:0.8rem;padding-left:1.6rem;display:flex;justify-content:space-between;align-items:center}@media (min-width: 768px){.pn-chat .chat-header{border-radius:1.6rem 1.6rem 0 0}}.pn-chat .chat-header .chat-controls{display:flex}.pn-chat .chat-header pn-button.minimize-btn button.pn-button{padding-bottom:0}.pn-chat .chat-header pn-button.minimize-btn button.pn-button .pn-button-content{align-items:flex-end}.pn-chat .chat-header #chat-title{margin:0;font-size:2rem;font-weight:400;line-height:1.4}.pn-chat .chat-main{display:flex;flex-direction:column;flex-grow:1;overflow-y:auto;gap:1.6rem;padding:1.6rem;padding-bottom:3.2rem;border-left:1px solid #d3cecb;border-right:1px solid #d3cecb;background-color:#ffffff}.pn-chat .chat-main.loading-chat-main{display:flex;justify-content:center;align-items:center;padding-bottom:1.6rem}.pn-chat .chat-loading-spinner{background-color:#005d92;width:4.8rem;height:4.8rem;border-radius:4.8rem;display:flex;align-items:center;justify-content:center}.pn-chat .chat-loading-content{color:#2d2013;font-size:1.6rem;font-weight:400}.pn-chat .chat-overview{text-align:center}.pn-chat .chat-messages{display:flex;flex-direction:column;gap:1.6rem;text-align:center}.pn-chat .card-container .slider-wrapper{margin:0}.pn-chat .card-container .slides-container{display:flex;gap:1rem}.pn-chat .card-container .slide:nth-child(even) [data-card]{width:calc(100% - 1rem)}@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(0.95)}}.pn-chat .chat-footer{background:#ffffff;border:1px solid #d3cecb;border-top:none}.pn-chat .chat-footer .form{display:flex;gap:0.7rem;padding:1rem}.pn-chat .chat-input-container{display:flex;flex-grow:1;justify-content:space-between;gap:0.7rem;background:#f9f8f8;border-radius:6.4rem}.pn-chat .chat-input-container .chat-text-input{text-indent:0.8rem;border:none;background:transparent;width:100%;outline:0.2rem solid transparent;outline-offset:0.2rem}.pn-chat .chat-input-container .chat-text-input:focus{border-radius:6.4rem}.pn-chat .chat-input-container .chat-text-input:focus-visible{outline-color:#005d92}.pn-chat .chat-input-container .chat-disabled-button{display:flex;width:3.5em;min-height:3em;min-width:0;align-items:center;justify-content:center}.pn-chat.minimized{background:transparent;border:initial;box-shadow:initial;max-width:50px;max-height:50px;min-width:initial;min-height:initial;transform:scale(0.95);cursor:pointer}.pn-chat.minimized .minimize-btn,.pn-chat.minimized .close-btn{position:absolute;top:0;right:0;bottom:0;left:0}.pn-chat.minimized .minimize-btn button,.pn-chat.minimized .close-btn button{display:none}.pn-chat.minimized .chat-main,.pn-chat.minimized .chat-footer{display:none}.pn-chat.closed{display:none}.pn-chat .open-chat-btn .pn-button{width:5.6rem;height:5.6rem}.pn-chat .open-chat-btn .pn-icon svg{width:3.2rem;height:3.2rem}.pn-chat .indicator-icon{padding:0.2rem 0.8rem;margin-right:auto;margin-top:1rem;margin-bottom:2rem;visibility:hidden}@media (max-width: 768px){body.chat-open{overflow:hidden}}";
+const PnChatStyle0 = pnChatCss;
+
+const PnChat = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.endpoint = undefined;
+        this.customerSegment = undefined;
+        this.mainHeading = '';
+        this.relatedContentAriaLabel = undefined;
+        this.chatMinimizedAriaLabel = undefined;
+        this.chatOpenedAriaLabel = undefined;
+        this.minimizeChatAriaLabel = undefined;
+        this.closeChatAriaLabel = undefined;
+        this.openChatAriaLabel = undefined;
+        this.chatControlsAriaLabel = undefined;
+        this.chatMessagesAriaLabel = undefined;
+        this.sentMessageAriaLabel = undefined;
+        this.writeChatMessagePlaceholder = undefined;
+        this.waitingForAnswerLabel = undefined;
+        this.sendButtonText = undefined;
+        this.loadingText = undefined;
+        this.carouselSlidesToShow = 1;
+        this.messages = undefined;
+        this.language = 'sv';
+        this.market = 'se';
+        this.itemId = '';
+        this.pnChatId = '00000000-0000-0000-0000-000000000000';
+        this.forceOpen = false;
+        this.isLoggedIn = false;
+        this.message = '';
+        this.messagesData = undefined;
+        this.isMinimized = true;
+        this.isClosed = false;
+        this.lastMessageId = '';
+        this.i18n = undefined;
+    }
+    chatId;
+    _defaultChatId = '00000000-0000-0000-0000-000000000000';
+    _defaultAlternativeChatId = '1';
+    chatLocalStorageKey = 'sf-chat-state';
+    chatMessagesContainer;
+    chatRef;
+    inputRef;
+    storage = new LocalStorageService();
+    _chatService;
+    _chatSegment = "#chat";
+    _forceClose = false;
+    componentWillLoad() {
+        this._forceClose = false;
+        this._chatService = new PnChatService(this.endpoint, this.market, this.language);
+        this.messagesData = {
+            header: {},
+            messages: [],
+        };
+        let storageId = this.storage.get(this.chatLocalStorageKey);
+        if (storageId && storageId.isLoggedIn === !this.isLoggedIn) {
+            this.storage.remove(this.chatLocalStorageKey);
+        }
+        else if (storageId && storageId.chatId) {
+            this.chatId = storageId?.chatId ?? this.chatId;
+        }
+        this.setTranslations();
+        setInterval(() => {
+            this.updateChat();
+        }, 1500);
+    }
+    setTranslations() {
+        if (this.language && translations[this.language]) {
+            this.i18n = translations[this.language];
+        }
+    }
+    getTranslation(key) {
+        const value = this[key];
+        if (value === undefined || value === null || value === '') {
+            return translations[this.language]?.[key] ?? translations['en'][key];
+        }
+        return value;
+    }
+    async updateChat() {
+        if (this.isMinimized || this.isClosed) {
+            return;
+        }
+        let prevLastMessageId = this.lastMessageId;
+        await this._chatService.fetchMessages(this.chatId, this.messagesData).then(newMessages => {
+            this.lastMessageId = this._chatService.GetLastMessageId(newMessages?.messages, this.lastMessageId);
+            let htmlCollection = document.getElementsByClassName('pn-chat-before');
+            let elements = Array.from(htmlCollection);
+            newMessages.messages.forEach(message => {
+                elements.forEach(element => {
+                    if (message.content != null && (element.textContent.trim() === message.content.trim() || element.textContent.trim().includes(message.content.trim()))) {
+                        element.remove();
+                    }
+                });
+                this.renderMessage(message);
+            });
+            if (prevLastMessageId !== this.lastMessageId) {
+                this._chatService.updateLastMessageId(this.chatId, this.lastMessageId);
+                this.messagesData = newMessages;
+                newMessages.messages.forEach(message => {
+                    this.renderMessage(message);
+                });
+            }
+        });
+    }
+    async setStartValues() {
+        if (this._forceClose) {
+            this._forceClose = false;
+            return;
+        }
+        if ((!this.chatId || this.chatId === this._defaultChatId || this.chatId === this._defaultAlternativeChatId) && !this.isMinimized) {
+            this.chatId = await this._chatService.startChat(this.pnChatId, this.itemId);
+            this.storage.set(this.chatLocalStorageKey, { chatId: this.chatId, isLoggedIn: this.isLoggedIn });
+        }
+        if (this.chatId) {
+            this.storage.set(this.chatLocalStorageKey, { chatId: this.chatId, isLoggedIn: this.isLoggedIn });
+            await this.fetchMessages();
+            this.lastMessageId = this._chatService.GetLastMessageId(this.messagesData.messages, this.lastMessageId);
+        }
+    }
+    async fetchMessages() {
+        await this._chatService.fetchMessages(this.chatId, this.messagesData).then(newMessages => {
+            this.lastMessageId = this._chatService.GetLastMessageId(this.messagesData.messages, this.lastMessageId);
+            this.messagesData = newMessages;
+            let htmlCollection = document.getElementsByClassName('pn-chat-before');
+            let elements = Array.from(htmlCollection);
+            newMessages.messages.forEach(message => {
+                elements.forEach(element => {
+                    if (element.textContent.trim() === message.content.trim() || element.textContent.trim().includes(message.content.trim())) {
+                        element.remove();
+                    }
+                });
+                this.renderMessage(message);
+            });
+            return newMessages;
+        });
+    }
+    async handleSend() {
+        if (!this.message?.trim()) {
+            return;
+        }
+        let message = this.message;
+        this.message = '';
+        this.createBeforeElement(message);
+        let responseId = await this._chatService.sendMessage(message, this.itemId, this.chatId, this.lastMessageId, 'Text');
+        this.lastMessageId = responseId;
+        this.lastMessageId = this._chatService.GetLastMessageId(this.messagesData.messages, this.lastMessageId);
+        this.announceToScreenReader(this.getTranslation('sentMessageAriaLabel'));
+    }
+    ;
+    groupMessages() {
+        const result = [];
+        let currentCardGroup = [];
+        const flushCardGroup = () => {
+            if (currentCardGroup.length > 0) {
+                const carouselData = {
+                    slides: currentCardGroup.map(card => {
+                        const cardHtml = `
+              <pn-chat-message customerSegment=${this.customerSegment} data-card role="article" category=${card.category}>
+                <h2 class="card-heading">${card.heading}</h2>
+                <p>${card.content}</p>
+                ${card.buttons
+                            ?.map(button => `
+                  <pn-button
+                    href="${button.href}"
+                    class="${button.class}"
+                    appearance="${button.appearance}"
+                    variant="${button.variant}"
+                    small="${button.small}"
+                    role="button"
+                  >
+                    ${button.content}
+                  </pn-button>
+                `)
+                            .join('') || ''}
+              </pn-chat-message>
+            `;
+                        return cardHtml;
+                    }),
+                };
+                result.push(h("pn-marketweb-carousel", { class: "card-container", nextButtonLabel: "Next", previousButtonLabel: "Previous", ariaNavigationLabel: this.getTranslation('relatedContentAriaLabel'), slidesToShow: this.carouselSlidesToShow, source: JSON.stringify(carouselData) }));
+                currentCardGroup = [];
+            }
+        };
+        this.messagesData.messages.forEach((message, index) => {
+            if (message.category === 'Card') {
+                currentCardGroup.push(message);
+                if (index === this.messagesData.messages.length - 1 || this.messagesData.messages[index + 1]?.category !== 'Card') {
+                    flushCardGroup();
+                }
+            }
+            else {
+                flushCardGroup();
+                result.push(this.renderMessage(message));
+            }
+        });
+        return result;
+    }
+    handleKeyPress = (event) => {
+        if (event.key === 'Enter' && this.message.trim()) {
+            event.preventDefault();
+            this.handleSend();
+        }
+    };
+    handleSendMessage = (event) => {
+        if (this.message.trim()) {
+            event.preventDefault();
+            this.handleSend();
+        }
+    };
+    handleButtonKeyDown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            event.target.click();
+        }
+    }
+    handleKeyDown(event) {
+        if (event.key === 'Escape' && this.isMinimized && !this.isClosed) {
+            this.toggleChat();
+        }
+    }
+    handleMessagesChange(newMessage) {
+        if (newMessage) {
+            this.handleSend();
+        }
+    }
+    handleNewChatId() {
+        this.chatId = this.pnChatId === this._defaultAlternativeChatId ? this._defaultChatId : this.pnChatId;
+        this.messagesData.messages = [];
+        this.isMinimized = false;
+        this.setStartValues();
+    }
+    handleSameChatId() {
+        this.isMinimized = false;
+    }
+    scrollToBottom() {
+        const observer = new MutationObserver((_, obs) => {
+            const chatMain = document.getElementById('chat-main');
+            if (chatMain) {
+                setTimeout(() => {
+                    chatMain.scrollTo({
+                        top: chatMain.scrollHeight,
+                        behavior: 'smooth'
+                    });
+                }, 500);
+                obs.disconnect();
+            }
+        });
+        observer.observe(document.body, { childList: true, subtree: true, });
+    }
+    closeChat = () => {
+        this._forceClose = true;
+        this.storage.remove(this.chatLocalStorageKey);
+        this.chatId = null;
+        this.pnChatId = this._defaultChatId;
+        let chatElement = document.getElementsByTagName('pn-chat')[0];
+        chatElement.setAttribute('item-id', '');
+        let hasActiveShipmentInUrl = window.location.href.includes(this._chatSegment);
+        if (hasActiveShipmentInUrl) {
+            this.isMinimized = !this.isMinimized;
+            this.announceToScreenReader(this.isMinimized ? this.getTranslation('chatMinimizedAriaLabel') : this.getTranslation('chatOpenedAriaLabel'));
+            document.body.classList.toggle('chat-open');
+            window.location.href = window.location.href.split(this._chatSegment)[0];
+        }
+        else {
+            this._forceClose = false;
+            this.toggleChat();
+        }
+    };
+    toggleChat = () => {
+        this.isMinimized = !this.isMinimized;
+        this.announceToScreenReader(this.isMinimized ? this.getTranslation('chatMinimizedAriaLabel') : this.getTranslation('chatOpenedAriaLabel'));
+        document.body.classList.toggle('chat-open');
+        if (!this.isMinimized && !this.chatId) {
+            this.setStartValues();
+        }
+    };
+    announceToScreenReader(message) {
+        const announcement = document.createElement('div');
+        announcement.setAttribute('role', 'status');
+        announcement.setAttribute('aria-live', 'polite');
+        announcement.classList.add('sr-only');
+        announcement.textContent = message;
+        document.body.appendChild(announcement);
+        setTimeout(() => announcement.remove(), 1000);
+    }
+    renderMessage(message) {
+        switch (message.category) {
+            case 'Bot':
+                return this.renderBaseMessage(message);
+            case 'Button':
+                return this.renderButtonMessage(message);
+            case 'ButtonResponse':
+                return this.renderBaseMessage(message);
+            case 'Link':
+                return this.renderLinkMessage(message);
+            case 'Card':
+                return this.renderCardMessage(message);
+            case 'User':
+                return this.renderBaseMessage(message);
+            case 'Agent':
+                return this.renderAgentMessage(message);
+            case 'System':
+                return this.renderBaseMessage(message);
+        }
+    }
+    renderBaseMessage(message) {
+        return (h("pn-chat-message", { customerSegment: this.customerSegment, category: message.category, agentName: '', role: "log", "aria-live": "polite" }, message.content));
+    }
+    renderAgentMessage(message) {
+        return (h("pn-chat-message", { customerSegment: this.customerSegment, category: message.category, agentName: message.agentName, role: "log", "aria-live": "polite" }, message.content));
+    }
+    renderButtonMessage(message) {
+        let props = {};
+        if (message?.props) {
+            try {
+                props = JSON.parse(message.props);
+            }
+            catch (error) {
+                console.error('Error parsing button props', error instanceof Error ? error.message : 'Unknown error');
+            }
+        }
+        const handleClick = () => {
+            if (props['data-action'] === 'minimize') {
+                this.toggleChat();
+            }
+            if (props['dataAction'] === 'choice' && props['dataOptionChoice']) {
+                (async () => {
+                    await this.handleSendChoice(props['dataOptionChoice'], message.content);
+                })();
+            }
+        };
+        return (h("pn-chat-message", { customerSegment: this.customerSegment, category: message.category }, h("pn-button", { class: message.class, role: "button", ...props, onClick: handleClick, onKeyDown: e => this.handleButtonKeyDown(e) }, message.content)));
+    }
+    createBeforeElement(content) {
+        const targetElement = this.chatMessagesContainer;
+        const chatMessage = document.createElement('pn-chat-message');
+        chatMessage.setAttribute('customerSegment', this.customerSegment);
+        chatMessage.setAttribute('category', 'User');
+        chatMessage.classList.add('pn-chat-before');
+        chatMessage.textContent = content;
+        targetElement.appendChild(chatMessage);
+        this.scrollToBottom();
+        chatMessage.scrollIntoView();
+    }
+    async handleSendChoice(choiceId, content) {
+        this.createBeforeElement(content);
+        let responseId = await this._chatService.sendMessage(choiceId, this.itemId, this.chatId, this.lastMessageId, 'Choice');
+        this.lastMessageId = responseId;
+        this.lastMessageId = this._chatService.GetLastMessageId(this.messagesData.messages, this.lastMessageId);
+        this.announceToScreenReader(this.getTranslation('sentMessageAriaLabel'));
+    }
+    renderLinkMessage(message) {
+        return (h("pn-chat-message", { customerSegment: this.customerSegment, category: message.category }, h("a", { href: message.href, role: "link", rel: "noopener noreferrer" }, h("span", { class: "content" }, message.content), h("pn-icon", { icon: arrow_right, color: "blue700", "aria-hidden": "true", role: "presentation" }))));
+    }
+    renderCardMessage(message) {
+        return (h("pn-chat-message", { customerSegment: this.customerSegment, category: message.category, "data-card": true, role: "article" }, h("h2", { class: "card-heading" }, message.heading), h("p", null, message.content), message.buttons && (h("div", { class: "cta" }, message.buttons?.map(button => (h("pn-button", { href: button.href, class: button.class, appearance: button.appearance, variant: button.variant, small: button.small, role: "button", onKeyDown: e => this.handleButtonKeyDown(e) }, button.content)))))));
+    }
+    render() {
+        const mainId = 'chat-main';
+        const inputId = 'chat-input';
+        const headerButton = this.messagesData?.header.button;
+        return (h(Host, { key: '0cf24e9474bc0e7e39ec51b8e9bf7646f4ac21d8', class: this.customerSegment }, !this.isClosed && this.messagesData && (h("div", { key: 'f275614056e1f2df7972377ae3041ab690eae830', class: `pn-chat ${this.isMinimized ? 'minimized' : ''} ${this.isClosed ? 'closed' : ''}`, ref: el => (this.chatRef = el), role: "region", "aria-label": this.mainHeading }, !this.isMinimized && (h(Fragment, { key: '8bc0f594242ab297bc95e091a95bd382c1ce0b31' }, h("header", { key: '7a20b62deac0cb3fa34bf3abf7dba3f8eccb94e7', class: "chat-header", role: "banner" }, h("h1", { key: '0dbe95cfd3ca8856fc95bfd3e0a6e970b87ec6df', id: "chat-title" }, this.mainHeading), h("div", { key: '3c7ecf77edb890a351882a22a0910cdc8e2abc7b', class: "chat-controls", role: "toolbar", "aria-label": this.getTranslation('chatControlsAriaLabel') }, h("pn-button", { key: '564dd6d3c7234356f3805b4e0808411d97e41292', icon: minus, "icon-only": "true", class: "minimize-btn", onClick: this.toggleChat, "aria-expanded": !this.isMinimized, "aria-controls": mainId, "aria-label": this.getTranslation('minimizeChatAriaLabel'), variant: "borderless", tooltip: this.getTranslation('minimizeChatAriaLabel') }), h("pn-button", { key: '5d2873c2409d3caa7887bf9b99de5f64b5c8af22', icon: close, "icon-only": "true", class: "close-btn", onClick: this.closeChat, "aria-expanded": !this.isMinimized, "aria-label": this.getTranslation('closeChatAriaLabel'), variant: "borderless", tooltip: this.getTranslation('closeChatAriaLabel') }))), (this.messagesData?.messages?.length ?? 0) > 0 ?
+            (h("main", { id: mainId, class: "chat-main", role: "main", "aria-labelledby": "chat-title" }, this.messagesData.header && (h("div", { class: "chat-overview" }, h("div", { class: "body" }, this.messagesData.header.body), headerButton && (h("pn-button", { href: headerButton.href, class: headerButton.class, appearance: headerButton.appearance, variant: headerButton.variant, small: headerButton.small, role: "button", onKeyDown: e => this.handleButtonKeyDown(e) }, headerButton.content)))), h("div", { ref: el => (this.chatMessagesContainer = el), class: "chat-messages", role: "log", "aria-live": "polite", "aria-label": this.getTranslation('chatMessagesAriaLabel') }, this.groupMessages()), h("pn-icon", { class: "indicator-icon", "aria-label": this.getTranslation('waitingForAnswerLabel'), role: "presentation" })))
+            : (h("main", { id: mainId, class: "chat-main loading-chat-main", role: "main", "aria-labelledby": "chat-title" }, h("div", { class: "chat-loading-spinner" }, h("pn-spinner", { light: "true", size: "1.5" })), h("span", { class: "chat-loading-content" }, this.getTranslation('loadingText')))), h("footer", { key: '6d8a4b4e0ce587c39f307f5ad37dd7498eaaaa4a', class: "chat-footer", role: "contentinfo" }, h("div", { key: 'b2879f8c86f2d01cd9563d21d9303b2e4d649503', class: "form", role: "form", "aria-labelledby": inputId }, h("label", { key: '9af815bef9cf42c18379839844bcf0101bd3921e', htmlFor: inputId, class: "sr-only" }, this.getTranslation('writeChatMessagePlaceholder')), h("div", { key: '97007d97f8fe0a7c5f8b8e9c25bbe20918679484', class: "chat-input-container" }, h("input", { key: '6e156d7ad63763316d2be89b925099fa03984232', id: inputId, class: "chat-text-input", ref: el => (this.inputRef = el), type: "text", placeholder: this.getTranslation('writeChatMessagePlaceholder'), value: this.message, onInput: (e) => (this.message = e.target.value), onKeyPress: this.handleKeyPress, maxLength: 3990 }), !this.message.trim() ? (h("div", { class: "chat-disabled-button", role: "button", "aria-label": this.getTranslation('sendButtonText'), "aria-disabled": "true", tabIndex: -1 }, h("pn-icon", { color: "gray400", icon: submit }))) : (h("pn-button", { "icon-only": "true", variant: "borderless", appearance: "light", icon: submit, onClick: this.handleSendMessage, disabled: !this.message.trim(), "aria-label": this.getTranslation('sendButtonText'), tooltip: this.getTranslation('sendButtonText') }))))))), this.isMinimized && (h("pn-button", { key: '98f1a01a3774b504c91e72279133f46d327c723f', icon: talk_bubble, "icon-only": "true", class: "open-chat-btn", onClick: this.toggleChat, tooltip: this.getTranslation('openChatAriaLabel'), "aria-label": this.getTranslation('openChatAriaLabel'), "aria-expanded": !this.isMinimized }))))));
+    }
+    static get watchers() { return {
+        "messages": ["handleMessagesChange"],
+        "pnChatId": ["handleNewChatId"],
+        "forceOpen": ["handleSameChatId"],
+        "isMinimized": ["scrollToBottom"]
+    }; }
+};
+PnChat.style = PnChatStyle0;
+
+export { PnChat as pn_chat };
+
+//# sourceMappingURL=pn-chat.entry.js.map

package/esm/pn-chat.entry.js.map

@@ -0,0 +1 @@
+{"file":"pn-chat.entry.js","mappings":"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","names":["icon"],"sources":["node_modules/pn-design-assets/pn-assets/icons/submit.js","node_modules/pn-design-assets/pn-assets/icons/talk_bubble.js","src/components/widgets/pn-chat/translations.ts","src/components/widgets/pn-chat/pn-chat.scss?tag=pn-chat","src/components/widgets/pn-chat/pn-chat.tsx"],"sourcesContent":["const icon = '<svg class=\"pn-icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#000\" fill-rule=\"evenodd\" d=\"M21 11.998a1 1 0 0 1-.577.908l-15 7a1 1 0 0 1-1.237-1.487l4.585-6.42-1.46-2.043A1 1 0 1 1 8.94 8.794l1.875 2.625a1 1 0 0 1 0 1.162l-2.788 3.903 9.599-4.48L6.58 6.909a1 1 0 1 1 .838-1.816l13 6a1 1 0 0 1 .581.906M5 4a1 1 0 0 1 1 1v.01a1 1 0 1 1-2 0V5a1 1 0 0 1 1-1\" clip-rule=\"evenodd\"/></svg>';\nexport const submit = icon;\n","const icon = '<svg class=\"pn-icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#000\" fill-rule=\"evenodd\" d=\"M12.388 2c5.522 0 10 4.477 10 10s-4.478 10-10 10H2l1.355-4.064-.798-3.987a8.8 8.8 0 0 1-.17-1.717V12c0-5.523 4.478-10 10-10m8 10a8 8 0 0 0-16 0v.232q0 .67.13 1.325l.902 4.507L4.775 20h7.612a8 8 0 0 0 8-8m-12.5-1.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3m6 1.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0m3-1.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3\" clip-rule=\"evenodd\"/></svg>';\nexport const talk_bubble = icon;\nexport const talkBubble = icon;\n","export const translations = {\n  'sv': {\n    relatedContentAriaLabel: 'Relaterat innehåll',\n    chatMinimizedAriaLabel: 'Chatten är minimerad',\n    chatOpenedAriaLabel: 'Chatten är öppen',\n    minimizeChatAriaLabel: 'Minimera chatten',\n    closeChatAriaLabel: 'Stäng chatten',\n    openChatAriaLabel: 'Öppna chatten',\n    chatControlsAriaLabel: 'Chattkontroller',\n    chatMessagesAriaLabel: 'Chattmeddelanden',\n    sentMessageAriaLabel: 'Meddelande skickat',\n    writeChatMessagePlaceholder: 'Skriv ett meddelande...',\n    waitingForAnswerLabel: 'Väntar på svar',\n    sendButtonText: 'Skicka',\n    loadingText: 'Laddar...',\n  },\n  'en': {\n    relatedContentAriaLabel: 'Related content',\n    chatMinimizedAriaLabel: 'Chat is minimized',\n    chatOpenedAriaLabel: 'Chat is open',\n    minimizeChatAriaLabel: 'Minimize chat',\n    closeChatAriaLabel: 'Close chat',\n    openChatAriaLabel: 'Open chat',\n    chatControlsAriaLabel: 'Chat controls',\n    chatMessagesAriaLabel: 'Chat messages',\n    sentMessageAriaLabel: 'Message sent',\n    writeChatMessagePlaceholder: 'Type a message...',\n    waitingForAnswerLabel: 'Waiting for answer',\n    sendButtonText: 'Send',\n    loadingText: 'Loading...',\n  },\n  'da': {\n    relatedContentAriaLabel: 'Relateret indhold',\n    chatMinimizedAriaLabel: 'Chatten er minimeret',\n    chatOpenedAriaLabel: 'Chatten er åben',\n    minimizeChatAriaLabel: 'Minimer chatten',\n    closeChatAriaLabel: 'Luk chatten',\n    openChatAriaLabel: 'Åbn chatten',\n    chatControlsAriaLabel: 'Chatkontroller',\n    chatMessagesAriaLabel: 'Chatbeskeder',\n    sentMessageAriaLabel: 'Besked sendt',\n    writeChatMessagePlaceholder: 'Skriv en besked...',\n    waitingForAnswerLabel: 'Venter på svar',\n    sendButtonText: 'Send',\n    loadingText: 'Indlæser...',\n  },\n  'no': {\n    relatedContentAriaLabel: 'Relatert innhold',\n    chatMinimizedAriaLabel: 'Chatten er minimert',\n    chatOpenedAriaLabel: 'Chatten er åpen',\n    minimizeChatAriaLabel: 'Minimer chatten',\n    closeChatAriaLabel: 'Lukk chatten',\n    openChatAriaLabel: 'Åpne chatten',\n    chatControlsAriaLabel: 'Chatkontroller',\n    chatMessagesAriaLabel: 'Chatmeldinger',\n    sentMessageAriaLabel: 'Melding sendt',\n    writeChatMessagePlaceholder: 'Skriv en melding...',\n    waitingForAnswerLabel: 'Venter på svar',\n    sendButtonText: 'Send',\n    loadingText: 'Laster...',\n  },\n  'fi': {\n    relatedContentAriaLabel: 'Aiheeseen liittyvä sisältö',\n    chatMinimizedAriaLabel: 'Keskustelu on pienennetty',\n    chatOpenedAriaLabel: 'Keskustelu on auki',\n    minimizeChatAriaLabel: 'Pienennä keskustelu',\n    closeChatAriaLabel: 'Sulje keskustelu',\n    openChatAriaLabel: 'Avaa keskustelu',\n    chatControlsAriaLabel: 'Keskustelun hallinta',\n    chatMessagesAriaLabel: 'Keskusteluviestit',\n    sentMessageAriaLabel: 'Viesti lähetetty',\n    writeChatMessagePlaceholder: 'Kirjoita viesti...',\n    waitingForAnswerLabel: 'Odotetaan vastausta',\n    sendButtonText: 'Lähetä',\n    loadingText: 'Ladataan...',\n  },\n};","@import '../../../globals/main.scss';\n$spacing: 1.6rem;\n\n.pn-chat {\n  @media (max-width: 768px) {\n    &:not(.minimized) {\n      position: absolute;\n      height: 100dvh;\n      width: 100dvw;\n      max-width: 100%;\n      top: 0;\n      left: 0;\n    }\n\n    &.minimized {\n      height: 70px;\n      border-radius: 0.8rem 0.8rem 0 0;\n    }\n  }\n\n  @media (min-width: 768px) and (max-width: 1024px) {\n    max-width: 350px;\n\n  }\n\n  display: flex;\n  flex-direction: column;\n  height: 600px;\n  width: 100%;\n  max-width: 400px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  border-radius: 1.6rem;\n\n  .chat-header {\n    background-color: $blue700;\n    color: $white;\n    padding: 0.8rem;\n    padding-left: 1.6rem;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    @media (min-width: 768px) {\n      border-radius: 1.6rem 1.6rem 0 0;\n    }\n\n    .chat-controls {\n      display: flex;\n    }\n\n    pn-button.minimize-btn {\n      button.pn-button {\n        padding-bottom: 0;\n\n        .pn-button-content {\n          align-items: flex-end;\n        }\n      }\n    }\n  }\n\n  .chat-header #chat-title {\n    margin: 0;\n    font-size: 2rem;\n    font-weight: 400;\n    line-height: 1.4;\n  }\n\n  .chat-main {\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n    overflow-y: auto;\n    gap: $spacing;\n    padding: $spacing;\n    padding-bottom: $spacing * 2;\n    border-left: 1px solid $gray200;\n    border-right: 1px solid $gray200;\n    background-color: $white;\n\n    &.loading-chat-main {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      padding-bottom: 1.6rem;\n    }\n  }\n\n  .chat-loading-spinner {\n    background-color: $blue700;\n    width: 4.8rem;\n    height: 4.8rem;\n    border-radius: 4.8rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .chat-loading-content {\n    color: $gray900;\n    font-size: 1.6rem;\n    font-weight: 400;\n  }\n\n  .chat-overview {\n    text-align: center;\n  }\n\n  .chat-messages {\n    display: flex;\n    flex-direction: column;\n    gap: $spacing;\n    text-align: center;\n  }\n\n  .card-container {\n    .slider-wrapper {\n      margin: 0;\n    }\n\n    $card-gap: 1rem;\n\n    .slides-container {\n      display: flex;\n      gap: $card-gap;\n    }\n\n    .slide:nth-child(even) [data-card] {\n      width: calc(100% - $card-gap);\n    }\n  }\n\n  @keyframes pulse {\n\n    0%,\n    100% {\n      opacity: 1;\n      transform: scale(1);\n    }\n\n    50% {\n      opacity: 0.5;\n      transform: scale(0.95);\n    }\n  }\n\n  .chat-footer {\n    background: $white;\n    border: 1px solid $gray200;\n    border-top: none;\n  }\n\n  .chat-footer .form {\n    display: flex;\n    gap: 0.7rem;\n    padding: 1rem;\n  }\n\n  .chat-input-container {\n    display: flex;\n    flex-grow: 1;\n    justify-content: space-between;\n    gap: 0.7rem;\n    background: $gray25;\n    border-radius: 6.4rem;\n\n    .chat-text-input {\n      text-indent: 0.8rem;\n      border: none;\n      background: transparent;\n      width: 100%;\n      outline: 0.2rem solid transparent;\n      outline-offset: 0.2rem;\n\n      &:focus {\n        border-radius: 6.4rem;\n      }\n\n      &:focus-visible {\n        outline-color: $blue700;\n      }\n    }\n\n    .chat-disabled-button {\n      display: flex;\n      width: 3.5em;\n      min-height: 3em;\n      min-width: 0;\n      align-items: center;\n      justify-content: center;\n    }\n  }\n\n  &.minimized {\n    background: transparent;\n    border: initial;\n    box-shadow: initial;\n    max-width: 50px;\n    max-height: 50px;\n    min-width: initial;\n    min-height: initial;\n    transform: scale(0.95);\n\n    cursor: pointer;\n\n    .minimize-btn,\n    .close-btn {\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n\n      button {\n        display: none;\n      }\n    }\n\n    .chat-main,\n    .chat-footer {\n      display: none;\n    }\n  }\n\n  &.closed {\n    display: none;\n  }\n\n  .open-chat-btn {\n    .pn-button {\n      width: 5.6rem;\n      height: 5.6rem;\n    }\n\n    .pn-icon svg {\n      width: 3.2rem;\n      height: 3.2rem;\n    }\n  }\n\n  .indicator-icon {\n    padding: 0.2rem 0.8rem;\n    margin-right: auto;\n    margin-top: 1rem;\n    margin-bottom: 2rem;\n    visibility: hidden;\n  }\n}\n\nbody.chat-open {\n  @media (max-width: 768px) {\n    overflow: hidden;\n  }\n}","import { Component, h, Prop, State, Host, Watch, Listen, Fragment } from '@stencil/core';\nimport { minus, close, arrow_right, talk_bubble, submit } from 'pn-design-assets/pn-assets/icons.js';\nimport { AgentMessage, BaseMessage, ButtonMessage, CardMessage, ChatMessage, ChatMessages, CustomerSegment, LinkMessage } from './types';\nimport { LocalStorageService } from '@/globals/LocalStorageService';\nimport { JSX } from 'react';\nimport { PnChatService } from './pn-chat.service';\nimport { translations } from './translations';\nimport type { Translationsi18n } from './types';\n\n@Component({\n  tag: 'pn-chat',\n  styleUrl: 'pn-chat.scss',\n})\nexport class PnChat {\n  @Prop() endpoint!: string;\n  @Prop() customerSegment!: CustomerSegment;\n  @Prop() mainHeading: string = '';\n  @Prop() relatedContentAriaLabel: string;\n  @Prop() chatMinimizedAriaLabel: string;\n  @Prop() chatOpenedAriaLabel: string;\n  @Prop() minimizeChatAriaLabel: string;\n  @Prop() closeChatAriaLabel: string;\n  @Prop() openChatAriaLabel: string;\n  @Prop() chatControlsAriaLabel: string;\n  @Prop() chatMessagesAriaLabel: string;\n  @Prop() sentMessageAriaLabel: string;\n  @Prop() writeChatMessagePlaceholder: string;\n  @Prop() waitingForAnswerLabel: string;\n  @Prop() sendButtonText: string;\n  @Prop() loadingText: string;\n  @Prop() carouselSlidesToShow: number = 1;\n  @Prop() messages: string;\n  @Prop() language: string = 'sv';\n  @Prop() market: string = 'se';\n  @Prop() itemId?: string = '';\n  @Prop() pnChatId: string = '00000000-0000-0000-0000-000000000000';\n  @Prop() forceOpen: boolean = false;\n  @Prop() isLoggedIn: boolean = false;\n\n  @State() private message: string = '';\n  @State() private messagesData: ChatMessages;\n  @State() private isMinimized: boolean = true;\n  @State() private isClosed: boolean = false;\n  @State() private lastMessageId: string = '';\n  @State() i18n: any;\n\n  private chatId: string;\n\n  private readonly _defaultChatId: string = '00000000-0000-0000-0000-000000000000';\n  private readonly _defaultAlternativeChatId: string = '1';\n  private readonly chatLocalStorageKey = 'sf-chat-state';\n  private chatMessagesContainer?: HTMLElement;\n  private chatRef?: HTMLDivElement;\n  private inputRef?: HTMLInputElement;\n  private storage: LocalStorageService = new LocalStorageService();\n  private _chatService: PnChatService;\n  private _chatSegment: string = \"#chat\";\n  private _forceClose: boolean = false;\n\n  componentWillLoad(): void {\n    this._forceClose = false;\n    this._chatService = new PnChatService(this.endpoint, this.market, this.language);\n    this.messagesData = {\n      header: {},\n      messages: [],\n    };\n\n    let storageId = this.storage.get(this.chatLocalStorageKey);\n\n    if (storageId && storageId.isLoggedIn === !this.isLoggedIn) {\n      this.storage.remove(this.chatLocalStorageKey);\n    }\n    else if (storageId && storageId.chatId) {\n      this.chatId = storageId?.chatId ?? this.chatId;\n    }\n\n    this.setTranslations();\n\n    setInterval(() => {\n      this.updateChat();\n    }, 1500);\n  }\n\n  setTranslations() {\n    if (this.language && translations[this.language]) {\n      this.i18n = translations[this.language];\n    }\n  }\n\nprivate getTranslation(key: keyof Translationsi18n): string {\n  const value = this[key];\n  if (value === undefined || value === null || value === '') {\n    return translations[this.language]?.[key] ?? translations['en'][key];\n  }\n  return value;\n}\n\n  private async updateChat() {\n    if (this.isMinimized || this.isClosed) {\n      return;\n    }\n\n    let prevLastMessageId = this.lastMessageId;\n\n    await this._chatService.fetchMessages(this.chatId, this.messagesData).then(newMessages => {\n      this.lastMessageId = this._chatService.GetLastMessageId(newMessages?.messages, this.lastMessageId);\n      let htmlCollection = document.getElementsByClassName('pn-chat-before');\n      let elements = Array.from(htmlCollection);\n\n      newMessages.messages.forEach(message => {\n        elements.forEach(element => {\n          if (message.content != null && (element.textContent.trim() === message.content.trim() || element.textContent.trim().includes(message.content.trim()))) {\n            element.remove();\n          }\n        });\n        this.renderMessage(message);\n      });\n\n      if (prevLastMessageId !== this.lastMessageId) {\n        this._chatService.updateLastMessageId(this.chatId, this.lastMessageId);\n        this.messagesData = newMessages;\n        newMessages.messages.forEach(message => {\n          this.renderMessage(message);\n        });\n      }\n    });\n  }\n\n  private async setStartValues() {\n    if (this._forceClose) {\n      this._forceClose = false;\n      return;\n    }\n\n    if ((!this.chatId || this.chatId === this._defaultChatId || this.chatId === this._defaultAlternativeChatId) && !this.isMinimized) {\n      this.chatId = await this._chatService.startChat(this.pnChatId, this.itemId);\n      this.storage.set(this.chatLocalStorageKey, { chatId: this.chatId, isLoggedIn: this.isLoggedIn });\n    }\n\n    if (this.chatId) {\n      this.storage.set(this.chatLocalStorageKey, { chatId: this.chatId, isLoggedIn: this.isLoggedIn });\n      await this.fetchMessages();\n      this.lastMessageId = this._chatService.GetLastMessageId(this.messagesData.messages, this.lastMessageId);\n    }\n  }\n\n  private async fetchMessages() {\n    let newMessages = await this._chatService.fetchMessages(this.chatId, this.messagesData).then(newMessages => {\n      this.lastMessageId = this._chatService.GetLastMessageId(this.messagesData.messages, this.lastMessageId);\n      this.messagesData = newMessages;\n      let htmlCollection = document.getElementsByClassName('pn-chat-before');\n      let elements = Array.from(htmlCollection);\n\n      newMessages.messages.forEach(message => {\n        elements.forEach(element => {\n          if (element.textContent.trim() === message.content.trim() || element.textContent.trim().includes(message.content.trim())) {\n            element.remove();\n          }\n        });\n        this.renderMessage(message);\n      });\n      return newMessages;\n    });\n  }\n\n  private async handleSend() {\n    if (!this.message?.trim()) {\n      return;\n    }\n\n    let message = this.message;\n    this.message = '';\n    this.createBeforeElement(message);\n\n    let responseId = await this._chatService.sendMessage(message, this.itemId, this.chatId, this.lastMessageId, 'Text');\n    this.lastMessageId = responseId;\n    this.lastMessageId = this._chatService.GetLastMessageId(this.messagesData.messages, this.lastMessageId);\n\n    this.announceToScreenReader(this.getTranslation('sentMessageAriaLabel'));\n  };\n\n  private groupMessages(): JSX.Element[] {\n    const result: JSX.Element[] = [];\n    let currentCardGroup: CardMessage[] = [];\n\n    const flushCardGroup = () => {\n      if (currentCardGroup.length > 0) {\n        const carouselData = {\n          slides: currentCardGroup.map(card => {\n            const cardHtml = `\n              <pn-chat-message customerSegment=${this.customerSegment} data-card role=\"article\" category=${card.category}>\n                <h2 class=\"card-heading\">${card.heading}</h2>\n                <p>${card.content}</p>\n                ${card.buttons\n                ?.map(\n                  button => `\n                  <pn-button\n                    href=\"${button.href}\"\n                    class=\"${button.class}\"\n                    appearance=\"${button.appearance}\"\n                    variant=\"${button.variant}\"\n                    small=\"${button.small}\"\n                    role=\"button\"\n                  >\n                    ${button.content}\n                  </pn-button>\n                `,\n                )\n                .join('') || ''\n              }\n              </pn-chat-message>\n            `;\n            return cardHtml;\n          }),\n        };\n        result.push(\n          <pn-marketweb-carousel\n            class=\"card-container\"\n            nextButtonLabel=\"Next\"\n            previousButtonLabel=\"Previous\"\n            ariaNavigationLabel={this.getTranslation('relatedContentAriaLabel')}\n            slidesToShow={this.carouselSlidesToShow}\n            source={JSON.stringify(carouselData)}\n          ></pn-marketweb-carousel>,\n        );\n        currentCardGroup = [];\n      }\n    };\n\n    this.messagesData.messages.forEach((message, index) => {\n      if (message.category === 'Card') {\n        currentCardGroup.push(message as CardMessage);\n\n        if (index === this.messagesData.messages.length - 1 || this.messagesData.messages[index + 1]?.category !== 'Card') {\n          flushCardGroup();\n        }\n      } else {\n        flushCardGroup();\n        result.push(this.renderMessage(message));\n      }\n    });\n\n    return result;\n  }\n\n  private handleKeyPress = (event: KeyboardEvent) => {\n    if (event.key === 'Enter' && this.message.trim()) {\n      event.preventDefault();\n      this.handleSend();\n    }\n  };\n\n  private handleSendMessage = (event: MouseEvent) => {\n    if (this.message.trim()) {\n      event.preventDefault();\n      this.handleSend();\n    }\n  }\n\n  private handleButtonKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      (event.target as HTMLElement).click();\n    }\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape' && this.isMinimized && !this.isClosed) {\n      this.toggleChat();\n    }\n  }\n\n  @Watch('messages')\n  handleMessagesChange(newMessage: string): void {\n    if (newMessage) {\n      this.handleSend();\n    }\n  }\n\n  @Watch('pnChatId')\n  handleNewChatId() {\n    this.chatId = this.pnChatId === this._defaultAlternativeChatId ? this._defaultChatId : this.pnChatId;\n    this.messagesData.messages = [];\n    this.isMinimized = false;\n    this.setStartValues();\n  }\n\n  @Watch('forceOpen')\n  handleSameChatId() {\n    this.isMinimized = false;\n  }\n\n  @Watch('isMinimized')\n  scrollToBottom() {\n    const observer = new MutationObserver((_, obs) => {\n      const chatMain = document.getElementById('chat-main');\n      if (chatMain) {\n        setTimeout(() => {\n          chatMain.scrollTo({\n            top: chatMain.scrollHeight,\n            behavior: 'smooth'\n          });\n        }, 500)\n        obs.disconnect();\n      }\n    });\n    observer.observe(document.body, { childList: true, subtree: true, });\n  }\n\n  private closeChat = () => {\n    this._forceClose = true;\n    this.storage.remove(this.chatLocalStorageKey);\n    this.chatId = null;\n    this.pnChatId = this._defaultChatId;\n    let chatElement = document.getElementsByTagName('pn-chat')[0];\n    chatElement.setAttribute('item-id', '');\n\n    let hasActiveShipmentInUrl = window.location.href.includes(this._chatSegment);\n    if (hasActiveShipmentInUrl) {\n      this.isMinimized = !this.isMinimized;\n      this.announceToScreenReader(this.isMinimized ? this.getTranslation('chatMinimizedAriaLabel') : this.getTranslation('chatOpenedAriaLabel'));\n      document.body.classList.toggle('chat-open');\n      window.location.href = window.location.href.split(this._chatSegment)[0];\n    }\n    else {\n      this._forceClose = false;\n      this.toggleChat();\n    }\n  }\n\n  private toggleChat = () => {\n    this.isMinimized = !this.isMinimized;\n    this.announceToScreenReader(this.isMinimized ? this.getTranslation('chatMinimizedAriaLabel') : this.getTranslation('chatOpenedAriaLabel'));\n    document.body.classList.toggle('chat-open');\n\n    if (!this.isMinimized && !this.chatId) {\n      this.setStartValues();\n    }\n  };\n\n  private announceToScreenReader(message: string) {\n    const announcement = document.createElement('div');\n    announcement.setAttribute('role', 'status');\n    announcement.setAttribute('aria-live', 'polite');\n    announcement.classList.add('sr-only');\n    announcement.textContent = message;\n    document.body.appendChild(announcement);\n    setTimeout(() => announcement.remove(), 1000);\n  }\n\n  private renderMessage(message: ChatMessage): JSX.Element {\n    switch (message.category) {\n      case 'Bot':\n        return this.renderBaseMessage(message);\n      case 'Button':\n        return this.renderButtonMessage(message);\n      case 'ButtonResponse':\n        return this.renderBaseMessage(message);\n      case 'Link':\n        return this.renderLinkMessage(message);\n      case 'Card':\n        return this.renderCardMessage(message);\n      case 'User':\n        return this.renderBaseMessage(message);\n      case 'Agent':\n        return this.renderAgentMessage(message);\n      case 'System':\n        return this.renderBaseMessage(message);\n    }\n  }\n\n  private renderBaseMessage(message: BaseMessage): JSX.Element {\n    return (\n      <pn-chat-message customerSegment={this.customerSegment} category={message.category} agentName='' role=\"log\" aria-live=\"polite\">\n        {message.content}\n      </pn-chat-message>\n    );\n  }\n\n  private renderAgentMessage(message: AgentMessage): JSX.Element {\n    return (\n      <pn-chat-message customerSegment={this.customerSegment} category={message.category} agentName={message.agentName} role=\"log\" aria-live=\"polite\">\n        {message.content}\n      </pn-chat-message>\n    );\n  }\n\n  private renderButtonMessage(message: ButtonMessage): JSX.Element {\n    let props = {};\n\n    if (message?.props) {\n      try {\n        props = JSON.parse(message.props);\n      } catch (error) {\n        console.error('Error parsing button props', error instanceof Error ? error.message : 'Unknown error');\n      }\n    }\n\n    const handleClick = () => {\n      if (props['data-action'] === 'minimize') {\n        this.toggleChat();\n      }\n      if (props['dataAction'] === 'choice' && props['dataOptionChoice']) {\n        (async () => {\n          await this.handleSendChoice(props['dataOptionChoice'], message.content);\n        })();\n      }\n    };\n\n    return (\n      <pn-chat-message customerSegment={this.customerSegment} category={message.category}>\n        <pn-button class={message.class} role=\"button\" {...props} onClick={handleClick} onKeyDown={e => this.handleButtonKeyDown(e)}>\n          {message.content}\n        </pn-button>\n      </pn-chat-message>\n    );\n  }\n\n  private createBeforeElement(content: string) {\n    const targetElement = this.chatMessagesContainer;\n    const chatMessage = document.createElement('pn-chat-message');\n    chatMessage.setAttribute('customerSegment', this.customerSegment);\n    chatMessage.setAttribute('category', 'User');\n    chatMessage.classList.add('pn-chat-before');\n    chatMessage.textContent = content;\n\n    targetElement.appendChild(chatMessage);\n    this.scrollToBottom();\n    chatMessage.scrollIntoView();\n  }\n\n  private async handleSendChoice(choiceId: string, content: string) {\n    this.createBeforeElement(content);\n\n    let responseId = await this._chatService.sendMessage(choiceId, this.itemId, this.chatId, this.lastMessageId, 'Choice');\n    this.lastMessageId = responseId;\n    this.lastMessageId = this._chatService.GetLastMessageId(this.messagesData.messages, this.lastMessageId);\n\n    this.announceToScreenReader(this.getTranslation('sentMessageAriaLabel'));\n  }\n\n  private renderLinkMessage(message: LinkMessage): JSX.Element {\n    return (\n      <pn-chat-message customerSegment={this.customerSegment} category={message.category}>\n        <a href={message.href} role=\"link\" rel=\"noopener noreferrer\">\n          <span class=\"content\">{message.content}</span>\n          <pn-icon icon={arrow_right} color=\"blue700\" aria-hidden=\"true\" role=\"presentation\" />\n        </a>\n      </pn-chat-message>\n    );\n  }\n\n  private renderCardMessage(message: CardMessage): JSX.Element {\n    return (\n      <pn-chat-message customerSegment={this.customerSegment} category={message.category} data-card role=\"article\">\n        <h2 class=\"card-heading\">{message.heading}</h2>\n        <p>{message.content}</p>\n        {message.buttons && (\n          <div class=\"cta\">\n            {message.buttons?.map(button => (\n              <pn-button\n                href={button.href}\n                class={button.class}\n                appearance={button.appearance}\n                variant={button.variant}\n                small={button.small}\n                role=\"button\"\n                onKeyDown={e => this.handleButtonKeyDown(e)}\n              >\n                {button.content}\n              </pn-button>\n            ))}\n          </div>\n        )}\n      </pn-chat-message>\n    );\n  }\n\n  render() {\n    const mainId = 'chat-main';\n    const inputId = 'chat-input';\n    const headerButton = this.messagesData?.header.button;\n\n    return (\n      <Host class={this.customerSegment}>\n        {!this.isClosed && this.messagesData && (\n          <div\n            class={`pn-chat ${this.isMinimized ? 'minimized' : ''} ${this.isClosed ? 'closed' : ''}`}\n            ref={el => (this.chatRef = el as HTMLDivElement)}\n            role=\"region\"\n            aria-label={this.mainHeading}\n          >\n            {!this.isMinimized && (\n              <Fragment>\n                <header class=\"chat-header\" role=\"banner\">\n                  <h1 id=\"chat-title\">{this.mainHeading}</h1>\n                  <div class=\"chat-controls\" role=\"toolbar\" aria-label={this.getTranslation('chatControlsAriaLabel')}>\n                    <pn-button\n                      icon={minus}\n                      icon-only=\"true\"\n                      class=\"minimize-btn\"\n                      onClick={this.toggleChat}\n                      aria-expanded={!this.isMinimized}\n                      aria-controls={mainId}\n                      aria-label={this.getTranslation('minimizeChatAriaLabel')}\n                      variant=\"borderless\"\n                      tooltip={this.getTranslation('minimizeChatAriaLabel')}\n                    />\n                    <pn-button\n                      icon={close}\n                      icon-only=\"true\"\n                      class=\"close-btn\"\n                      onClick={this.closeChat}\n                      aria-expanded={!this.isMinimized}\n                      aria-label={this.getTranslation('closeChatAriaLabel')}\n                      variant=\"borderless\"\n                      tooltip={this.getTranslation('closeChatAriaLabel')}\n                    />\n                  </div>\n                </header>\n                {(this.messagesData?.messages?.length ?? 0) > 0 ?\n                  (<main id={mainId} class=\"chat-main\" role=\"main\" aria-labelledby=\"chat-title\">\n                    {this.messagesData.header && (\n                      <div class=\"chat-overview\">\n                        <div class=\"body\">{this.messagesData.header.body}</div>\n                        {headerButton && (\n                          <pn-button\n                            href={headerButton.href}\n                            class={headerButton.class}\n                            appearance={headerButton.appearance}\n                            variant={headerButton.variant}\n                            small={headerButton.small}\n                            role=\"button\"\n                            onKeyDown={e => this.handleButtonKeyDown(e)}\n                          >\n                            {headerButton.content}\n                          </pn-button>\n                        )}\n                      </div>\n                    )}\n                    <div ref={el => (this.chatMessagesContainer = el as HTMLElement)} class=\"chat-messages\" role=\"log\" aria-live=\"polite\" aria-label={this.getTranslation('chatMessagesAriaLabel')}>\n                      {this.groupMessages()}\n                    </div>\n                    <pn-icon\n                      class=\"indicator-icon\"\n                      aria-label={this.getTranslation('waitingForAnswerLabel')}\n                      role=\"presentation\"\n                    ></pn-icon>\n                  </main>)\n                  : (<main id={mainId} class=\"chat-main loading-chat-main\" role=\"main\" aria-labelledby=\"chat-title\">\n                    <div class=\"chat-loading-spinner\">\n                      <pn-spinner light=\"true\" size=\"1.5\"></pn-spinner>\n                    </div>\n                    <span class=\"chat-loading-content\">{this.getTranslation('loadingText')}</span>\n                  </main>)}\n                <footer class=\"chat-footer\" role=\"contentinfo\">\n                  <div class=\"form\" role=\"form\" aria-labelledby={inputId}>\n                    <label htmlFor={inputId} class=\"sr-only\">\n                      {this.getTranslation('writeChatMessagePlaceholder')}\n                    </label>\n                    <div class=\"chat-input-container\">\n                      <input\n                        id={inputId}\n                        class=\"chat-text-input\"\n                        ref={el => (this.inputRef = el as HTMLInputElement)}\n                        type=\"text\"\n                        placeholder={this.getTranslation('writeChatMessagePlaceholder')}\n                        value={this.message}\n                        onInput={(e: Event) => (this.message = (e.target as HTMLInputElement).value)}\n                        onKeyPress={this.handleKeyPress}\n                        maxLength={3990}\n                      />\n                      {!this.message.trim() ? (\n                        <div\n                          class=\"chat-disabled-button\"\n                          role=\"button\"\n                          aria-label={this.getTranslation('sendButtonText')}\n                          aria-disabled=\"true\"\n                          tabIndex={-1}>\n                          <pn-icon color=\"gray400\" icon={submit}></pn-icon>\n                        </div>\n                      ) : (\n                        <pn-button\n                          icon-only=\"true\"\n                          variant=\"borderless\"\n                          appearance=\"light\"\n                          icon={submit}\n                          onClick={this.handleSendMessage}\n                          disabled={!this.message.trim()}\n                          aria-label={this.getTranslation('sendButtonText')}\n                          tooltip={this.getTranslation('sendButtonText')}>\n                        </pn-button>\n                      )}\n                    </div>\n                  </div>\n                </footer>\n              </Fragment>\n            )}\n            {this.isMinimized && (\n              <pn-button\n                icon={talk_bubble}\n                icon-only=\"true\"\n                class=\"open-chat-btn\"\n                onClick={this.toggleChat}\n                tooltip={this.getTranslation('openChatAriaLabel')}\n                aria-label={this.getTranslation('openChatAriaLabel')}\n                aria-expanded={!this.isMinimized}\n              ></pn-button>\n            )}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}"],"version":3}