From 76029160493981ec23a2807529d788812f16398e Mon Sep 17 00:00:00 2001
From: rsaintpaul <romaric.saintpaul@kleegroup.com>
Date: Fri, 27 Sep 2024 10:48:34 +0200
Subject: [PATCH] [CHATBOT-630 create services for chatbot.js]

---
 .../src/main/webapp/static/chatbot/index.html |  30 +-
 .../webapp/static/chatbot/js/botService.js    | 307 +++++++
 .../main/webapp/static/chatbot/js/chatbot.js  | 812 ++++++------------
 .../chatbot/js/documentaryResourceService.js  |   5 +
 .../webapp/static/chatbot/js/qAndAService.js  |  19 +
 .../webapp/static/chatbot/style/style.css     |   8 +-
 6 files changed, 595 insertions(+), 586 deletions(-)
 create mode 100644 vertigo-bot-executor/src/main/webapp/static/chatbot/js/botService.js
 create mode 100644 vertigo-bot-executor/src/main/webapp/static/chatbot/js/documentaryResourceService.js
 create mode 100644 vertigo-bot-executor/src/main/webapp/static/chatbot/js/qAndAService.js

diff --git a/vertigo-bot-executor/src/main/webapp/static/chatbot/index.html b/vertigo-bot-executor/src/main/webapp/static/chatbot/index.html
index ec73c8a43..e2ae4c5ad 100644
--- a/vertigo-bot-executor/src/main/webapp/static/chatbot/index.html
+++ b/vertigo-bot-executor/src/main/webapp/static/chatbot/index.html
@@ -32,8 +32,8 @@
       <q-layout view="hHh lpr fFf" class="row col">
         <q-layout-header class="bg-white">
           <div class="custom-header row items-center non-selectable" >
-            <div class="title col-grow q-ml-md">
-              {{ botName }}
+            <div class="title col-grow q-ml-sm">
+              {{ platformName }}
             </div>
             <!--<q-btn-dropdown color="primary" icon="language">
               <q-list style="text-align: center; padding: 0">
@@ -67,14 +67,14 @@
           </div>
           <q-page id="page"
                   class="row col column animate-fade">
-            <div v-if="!menu && tab ==='bot'"
+            <div v-if="footerMenu ==='bot'"
                  id="main"
                  class="column col-grow no-wrap chatbot-qanda-container"
             >
               <q-scroll-area class="col row no-wrap q-px-sm"
                              ref="scroller">
                 <div class="q-pr-md q-pt-md">
-                  <div v-for="(msg, index) in messages">
+                  <div v-for="(msg, index) in botConfig.messages">
                     <q-chat-message
                       v-if="msg.text"
                       class="animate-fade"
@@ -98,7 +98,7 @@
                   </div>
                   <div class="sys-chat">
                     <q-chat-message
-                      v-if="error"
+                      v-if="botConfig.error"
                       class="animate-fade"
                       bg-color="orange-4"
                       text-color="black"
@@ -119,7 +119,7 @@
 
                   <div class="message-processing sys-chat non-selectable">
                     <q-chat-message
-                      v-if="processing"
+                      v-if="botConfig.processing"
                       class="animate-fade"
                       bg-color="grey-grdf"
                     >
@@ -197,8 +197,8 @@
                            @keyup.enter="inputConfig.modeTextarea || inputConfig.responseText.trim() === '' ? false : postAnswerText(false)"
                            v-model="inputConfig.responseText"
                            placeholder="Ecrire un message..."
-                           :disable="processing || error || (!acceptNlu && !isEnded) || customConfig.disableNlu"
-                           :loading="processing"></q-input>
+                           :disable="botConfig.processing || botConfig.error || (!botConfig.acceptNlu && !botConfig.isEnded) || customConfig.disableNlu"
+                           :loading="botConfig.processing"></q-input>
                 </div>
                 <q-btn
                         :style="'margin-top: 0px;'"
@@ -206,16 +206,16 @@
                         class="btn-send"
                         icon="send"
                         @click="postAnswerText(false)"
-                        :disable="processing || inputConfig.responseText.trim() === ''"></q-btn>
+                        :disable="botConfig.processing || inputConfig.responseText.trim() === ''"></q-btn>
                 <q-btn round
                        color="red"
                        @click="restart"
-                       v-if="devMode === true && false"
+                       v-if="botConfig.devMode === true && false"
                        icon="refresh"></q-btn>
               </div>
             </div>
 
-            <div v-if="tab === 'qAndA'" class="column col-grow no-wrap chatbot-qanda-container">
+            <div v-if="footerMenu === 'qAndA'" class="column col-grow no-wrap chatbot-qanda-container">
               <div class="column col-grow" v-if="!qAndAConfig.selectedQuestion">
                 <div class="custom-input-qanda">
                   <q-input v-model="qAndAConfig.filterInput"
@@ -234,6 +234,7 @@
                   </div>
                   <div style="height: 30px"></div>
                 </q-scroll-area>
+
               </div>
 
               <q-scroll-area v-if="qAndAConfig.selectedQuestion"
@@ -278,8 +279,8 @@
         </q-page-container>
 
         <q-layout-footer v-if="customConfig.chatbotDisplay && customConfig.qandaDisplay" style="display: flex">
-          <q-btn icon="smart_toy" class="q-btn-footer" :class="{'q-btn-footer-selected': tab==='bot'}" @Click="tabChange('bot')"></q-btn>
-          <q-btn icon="question_answer" class="q-btn-footer" :class="{'q-btn-footer-selected': tab==='qAndA'}" @Click="tabChange('qAndA')"></q-btn>
+          <q-btn icon="smart_toy" class="q-btn-footer" :class="{'q-btn-footer-selected': footerMenu === 'bot'}" @Click="footerMenuChange('bot')"></q-btn>
+          <q-btn icon="question_answer" class="q-btn-footer" :class="{'q-btn-footer-selected': footerMenu === 'qAndA'}" @Click="footerMenuChange('qAndA')"></q-btn>
         </q-layout-footer>
       </q-layout>
     </div>
@@ -292,5 +293,8 @@
             integrity="sha512-QpQT1tpnIGTHF8DZQmL2Xp9QhAYp7Kfl8yJwlyjoYNe1YDWgE1kd9NfnzPVo2GPDpHtLyixEKaSNL/CNe6ZzYg=="
             crossorigin="anonymous"></script>
     <script src="js/chatbot.js"></script>
+    <script src="js/botService.js"></script>
+    <script src="js/documentaryResourceService.js"></script>
+    <script src="js/qAndAService.js"></script>
   </body>
 </html>
diff --git a/vertigo-bot-executor/src/main/webapp/static/chatbot/js/botService.js b/vertigo-bot-executor/src/main/webapp/static/chatbot/js/botService.js
new file mode 100644
index 000000000..74c58d255
--- /dev/null
+++ b/vertigo-bot-executor/src/main/webapp/static/chatbot/js/botService.js
@@ -0,0 +1,307 @@
+function updateSessionStorage() {
+    sessionStorage.convId = chatbot.botConfig.convId;
+    sessionStorage.setItem('inputConfig', JSON.stringify(chatbot.inputConfig));
+    sessionStorage.setItem('messages', JSON.stringify(chatbot.botConfig.messages));
+}
+
+function restoreFromSessionStorage() {
+    chatbot.botConfig.convId = sessionStorage.convId;
+    chatbot.inputConfig = JSON.parse(sessionStorage.inputConfig);
+    chatbot.botConfig.messages = JSON.parse(sessionStorage.messages);
+}
+
+function clearSessionStorage() {
+    sessionStorage.clear();
+}
+
+function setParametersFromHttpResponse(httpResponse) {
+    chatbot.botConfig.convId = httpResponse.data.metadatas.sessionId;
+    updateSessionStorage();
+    _handleResponse(httpResponse, false);
+}
+
+function startConversation() {
+    chatbot.botConfig.lastUserInteraction = Date.now();
+    const urlPage = window.location.href;
+    scanContextKeys(new Map(Object.entries(chatbot.contextMap))).then(value => {
+        chatbot.context = value;
+        if (chatbot.context['url'] === undefined) {
+            chatbot.context['url'] = urlPage;
+        }
+        if (sessionStorage.convId) {
+            restoreFromSessionStorage();
+            _scrollToBottom();
+        } else {
+            chatbot.$http.post(chatbot.botConfig.botUrl + '/start', {message: null, metadatas: {'context': chatbot.context}})
+                .then(setParametersFromHttpResponse)
+                .catch(() => {
+                    // error
+                    chatbot.botConfig.error = true;
+                    chatbot.botConfig.processing = false;
+                    _scrollToBottom();
+                });
+        }
+    });
+}
+
+function postAnswerBtn(btn) {
+    chatbot.botConfig.messages.push({
+        text: [DOMPurify.sanitize(btn.label)],
+        sent: true,
+        bgColor: 'primary',
+        textColor: 'white'
+    });
+
+    updateSessionStorage();
+
+    _scrollToBottom();
+
+    if (btn.url !== undefined) {
+        const link = document.createElement('a');
+        link.href = btn.url;
+        if (btn.newTab) {
+            link.target = '_blank';
+        } else {
+            link.target = '_top';
+        }
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    }
+    askBot(btn.payload, btn.label, true, null, null, chatbot.botConfig.rating);
+}
+
+function fileUpload(btn, index) {
+    const file = document.getElementById('file_' + index).files[0];
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = function (evt) {
+        askBot(btn.payload, null, false, evt.target.result, file.name, false);
+    };
+}
+
+function postAnswerText(isRating) {
+    let sanitizedString = '';
+    if (isRating) {
+        sanitizedString = chatbot.inputConfig.rating.toString();
+        chatbot.inputConfig.showRating = false;
+        chatbot.botConfig.messages.push({
+            text: null,
+            rating: true,
+            sent: true,
+            bgColor: 'primary',
+            textColor: 'white'
+        });
+
+    } else {
+        sanitizedString = DOMPurify.sanitize(chatbot.inputConfig.responseText.trim()
+            .replace(/(?:\r\n|\r|\n)/g, '<br>'));
+        chatbot.botConfig.messages.push({
+            text: sanitizedString !== '' ? [sanitizedString] : null,
+            rating: isRating,
+            sent: true,
+            bgColor: 'primary',
+            textColor: 'white'
+        });
+    }
+    updateSessionStorage();
+
+    _scrollToBottom();
+
+    const response = chatbot.inputConfig.responsePattern === '' ? sanitizedString.replace(/(")/g, '"')
+        : chatbot.inputConfig.responsePattern.replace('#', sanitizedString.replace(/(")/g, '\\"'));
+    askBot(response, null, false, null, null, isRating);
+}
+
+function askBot(value, label, isButton, fileContent, fileName, rating) {
+    chatbot.botConfig.prevInputConfig = JSON.parse(JSON.stringify(chatbot.inputConfig));
+    reinitInput();
+    chatbot.botConfig.lastPayload = value;
+    chatbot.botConfig.processing = true;
+
+    chatbot.botConfig.lastUserInteraction = Date.now();
+    let botInput;
+    if (fileContent) {
+        botInput = {
+            message: null,
+            metadatas: {context: chatbot.context, payload: value, filecontent: fileContent, filename: fileName}
+        };
+    } else if (isButton) {
+        botInput = {message: null, metadatas: {context: chatbot.context, payload: value, text: label}};
+    } else {
+        botInput = {message: value, metadatas: {context: chatbot.context}};
+    }
+    if (rating) {
+        botInput.metadatas.rating = value
+        if (chatbot.botConfig.ratingType === 'SIMPLE') {
+            botInput.message = null
+        }
+    }
+    return Vue.http.post(chatbot.botConfig.botUrl + '/talk/' + chatbot.botConfig.convId, botInput)
+        .then(httpResponse => {
+            _handleResponse(httpResponse, false);
+        }).catch(
+            () => {
+                // error
+                chatbot.botConfig.error = true;
+
+                chatbot.botConfig.processing = false;
+                _scrollToBottom();
+            });
+
+}
+
+function _handleResponse(httpResponse, isRating) {
+    // success
+    if (httpResponse.data.metadatas.sessionId && chatbot.botConfig.convId !== httpResponse.data.metadatas.sessionId) {
+        refreshBot(true);
+        setParametersFromHttpResponse(httpResponse);
+
+    } else {
+        const responses = httpResponse.data.htmlTexts;
+        const buttons = httpResponse.data.choices;
+        const cards = httpResponse.data.cards;
+        const files = httpResponse.data.files;
+        chatbot.botConfig.acceptNlu = httpResponse.data.acceptNlu !== undefined ? httpResponse.data.acceptNlu : true;
+        chatbot.botConfig.rating = httpResponse.data.rating.enabled;
+        chatbot.botConfig.ratingType = httpResponse.data.rating.type;
+        chatbot.botConfig.isEnded = httpResponse.data.status === 'Ended' && !isRating;
+        if (httpResponse.data.metadatas && httpResponse.data.metadatas.avatar) {
+            chatbot.botConfig.botAvatar = 'data:image/png;base64,' + httpResponse.data.metadatas.avatar;
+        }
+
+        if (httpResponse.data.metadatas && httpResponse.data.metadatas.jsevent) {
+            parent.postMessage({jsevent: httpResponse.data.metadatas.jsevent}, '*');
+        }
+
+        if (httpResponse.data.metadatas && httpResponse.data.metadatas.welcometour) {
+            parent.postMessage({welcomeTour: httpResponse.data.metadatas.welcometour}, '*');
+        }
+
+        for (let i = 0; i < responses.length - 1; i++) {
+            chatbot.botConfig.watingMessagesStack.push({text: responses[i]});
+        }
+        chatbot.botConfig.watingMessagesStack.push({
+            text: responses[responses.length - 1],
+            buttons: buttons,
+            cards: cards,
+            files: files
+        });
+
+        _displayMessages();
+    }
+}
+
+function _displayMessages() {
+    if (chatbot.botConfig.watingMessagesStack.length > 0) {
+        const currentMessage = chatbot.botConfig.watingMessagesStack.shift();
+        let watingTime = chatbot.botConfig.lastUserInteraction - Date.now() + chatbot.botConfig.minTimeBetweenMessages;
+
+        if (chatbot.botConfig.devMode === true) {
+            watingTime = 0;
+        }
+
+        sleep(watingTime).then(function () {
+            _processResponse(currentMessage);
+            chatbot.botConfig.lastUserInteraction = Date.now();
+            _displayMessages();
+        });
+    } else {
+        chatbot.inputConfig.showRating = chatbot.botConfig.rating && chatbot.botConfig.ratingType === 'SIMPLE' && chatbot.inputConfig.rating === 0;
+        chatbot.botConfig.processing = false;
+        if (chatbot.botConfig.keepAction) {
+            chatbot.inputConfig = chatbot.botConfig.prevInputConfig;
+            chatbot.inputConfig.responseText = '';
+            chatbot.botConfig.keepAction = false;
+            updateSessionStorage();
+        }
+    }
+}
+
+function _processResponse(response) {
+    const lastMsg = chatbot.botConfig.messages[chatbot.botConfig.messages.length - 1];
+    if (response.text !== undefined && response.text !== '') {
+        if (lastMsg && !lastMsg.sent) {
+            // ajoute un message à un précédent message du bot
+            lastMsg.text.push(response.text);
+        } else {
+            // première réponse du bot
+            if (chatbot.customConfig.displayAvatar) {
+                chatbot.botConfig.messages.push({
+                    avatar: chatbot.botConfig.botAvatar,
+                    text: [response.text],
+                    bgColor: 'grey-grdf'
+                });
+            } else {
+                chatbot.botConfig.messages.push({
+                    text: [response.text],
+                    bgColor: 'grey-grdf'
+                });
+            }
+        }
+        updateSessionStorage();
+
+    }
+
+    if (response.buttons) {
+        response.buttons.forEach(function (value, key) {
+            chatbot.inputConfig.buttons.push(value);
+            updateSessionStorage();
+        }, chatbot);
+    }
+
+    if (response.cards) {
+        response.cards.forEach(function (value, key) {
+            chatbot.inputConfig.cards.push(value);
+            updateSessionStorage();
+        }, chatbot);
+    }
+
+    if (response.files) {
+        response.files.forEach(function (value, key) {
+            chatbot.inputConfig.files.push(value);
+            updateSessionStorage();
+        }, chatbot);
+    }
+
+    _scrollToBottom();
+}
+
+function refreshBot(isAnotherConversation) {
+    chatbot.inputConfig = {
+        modeTextarea: false,
+        responseText: '',
+        responsePattern: '',
+        showRating: false,
+        rating: 0,
+        buttons: [],
+        files: [],
+        cards: []
+    };
+    chatbot.botConfig.error = false;
+    chatbot.botConfig.convId = null;
+    chatbot.botConfig.messages = [];
+    chatbot.botConfig.rating = false;
+
+    clearSessionStorage();
+
+    if (!isAnotherConversation) {
+        startConversation();
+    }
+}
+
+function _scrollToBottom() {
+    const scrollHeight = chatbot.$refs.scroller.$el.children[0].children[0].scrollHeight; // workaround
+    chatbot.$refs.scroller.setScrollPosition(scrollHeight, 400);
+}
+
+function reinitInput() {
+    chatbot.inputConfig.modeTextarea = false;
+    chatbot.inputConfig.responsePattern = '';
+    chatbot.inputConfig.responseText = '';
+    chatbot.inputConfig.buttons = [];
+    chatbot.inputConfig.cards = [];
+    chatbot.inputConfig.files = [];
+    chatbot.botConfig.error = false;
+    updateSessionStorage();
+}
diff --git a/vertigo-bot-executor/src/main/webapp/static/chatbot/js/chatbot.js b/vertigo-bot-executor/src/main/webapp/static/chatbot/js/chatbot.js
index 8a2a2e906..6c935696b 100644
--- a/vertigo-bot-executor/src/main/webapp/static/chatbot/js/chatbot.js
+++ b/vertigo-bot-executor/src/main/webapp/static/chatbot/js/chatbot.js
@@ -1,570 +1,242 @@
-const sleep = function (milliseconds) {
-    return new Promise(function (resolve) {
-        setTimeout(resolve, milliseconds);
-    });
-};
-
-const getUrlVars = function () {
-    const vars = {};
-    window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function (m, key, value) {
-        vars[key] = value;
-    });
-    return vars;
-};
-
-
-const urlVars = getUrlVars();
-const _botRunnerUrl = urlVars['runnerUrl'];
-const _botName = decodeURI(urlVars['botName']);
-const _avatar = _botRunnerUrl + '/static/chatbot/images/avatar/avatar.png';
-
-const _platformBaseUrl = _botRunnerUrl + '/api/platform-config';
-const _botBaseUrl = _botRunnerUrl + '/api/chatbot';
-const _qAndABaseUrl = _botRunnerUrl + '/api/qanda';
-const _documentaryResourceBaseUrl = _botRunnerUrl + '/api/docres';
-
-const scanContextKeys = (context) => new Promise((res, rej) => {
-    const channel = new MessageChannel();
-    channel.port1.onmessage = ({data}) => {
-        channel.port1.close();
-        if (data.error) {
-            rej(data.error);
-        } else {
-            res(data.result);
-        }
-    };
-
-    parent.postMessage({context: context}, '*', [channel.port2]);
-});
-
-window.addEventListener(
-    'message',
-    async function (event) {
-        if (event.data === 'start') {
-            await chatbot.initPlatform();
-        }
-        if (event.data.sendTopic) {
-            const button = chatbot.inputConfig.buttons.find((button) => button.payload === event.data.sendTopic.topic)
-            if (chatbot.convId !== undefined && button !== undefined) {
-                chatbot.postAnswerBtn(button)
-            }
-        }
-        if (event.data === 'clearSessionStorage') {
-            sessionStorage.clear();
-        } else if (event.data === 'refresh') {
-            chatbot.refreshPlatform()
-        } else if (event.data === 'conversationExist') {
-            parent.postMessage({conversationExist: sessionStorage.convId !== undefined}, '*');
-        }
-    });
-
-const chatbot = new Vue({
-        el: '#q-app',
-        updated() {
-            const images = document.getElementsByClassName('imgClass');
-            const htmls = document.getElementsByClassName('htmlClass');
-            for (let i = 0; i < images.length; i++) {
-                images[i].addEventListener('click', function (e) {
-                    parent.postMessage({pictureModal: this.src}, '*');
-                }, false);
-            }
-            for (let j = 0; j < htmls.length; j++) {
-                htmls[j].addEventListener('click', function (e) {
-                    parent.postMessage({htmlModal: this.getAttribute('data-html')}, '*');
-                }, false);
-            }
-            if (!chatbot.$refs.input.disable) {
-                this.focusInput()
-            }
-        },
-        data: {
-            // config
-
-            convId: null,
-            botName: _botName,
-            botUrl: _botBaseUrl,
-            devMode: false, // ##param.devMode##
-            minTimeBetweenMessages: 1000,
-            botAvatar: _avatar,
-            // technique
-            inputConfig: {
-                // TODO, il exste d'autres modes, par ex email
-                modeTextarea: false,
-                responseText: '',
-                responsePattern: '',
-                showRating: false,
-                rating: 0,
-                buttons: [],
-                cards: [],
-                files: []
-            },
-            customConfig: {
-                reinitializationButton: false,
-                backgroundColor: 'grey',
-                fontColor: 'black',
-                botMessageBackgroundColor: 'grey',
-                botMessageFontColor: 'black',
-                userMessageBackgroundColor: 'grey',
-                userMessageFontColor: 'black',
-                fontFamily: 'Arial, Helvetica, sans-serif',
-                displayAvatar: true,
-                disableNlu: false,
-                chatbotDisplay: false,
-                qandaDisplay: false,
-                documentaryResourceDisplay: false
-            },
-            isEnded: false,
-
-            tab: '',
-            platformUrl: _platformBaseUrl,
-            prevInputConfig: {},
-            lastPayload: null,
-            processing: false,
-            acceptNlu: true,
-            rating: false,
-            ratingType: 'SIMPLE',
-            error: false,
-            messages: [],
-            keepAction: false,
-            menu: false,
-            lastUserInteraction: 0,
-            watingMessagesStack: [],
-            context: {},
-            contextMap: {},
-
-            qAndAConfig: {
-                qAndAUrl: _qAndABaseUrl,
-                questionAnswerList: [],
-                filteredQuestionAnswerList: [],
-                filterInput: '',
-                selectedQuestion: null
-            },
-            documentaryResourceConfig: {
-                documentaryResourceUrl: _documentaryResourceBaseUrl,
-                documentaryResourceList: [],
-                documentaryResourceFileBaseUrl: _documentaryResourceBaseUrl + '/getDocumentaryResourceFile?label='
-            }
-        },
-        methods: {
-
-            async initPlatform(){
-                await chatbot.initPlatformConfig()
-                if(chatbot.customConfig.chatbotDisplay) {chatbot.startConversation()}
-                if(chatbot.customConfig.qandaDisplay) {chatbot.initQAndA()}
-                if(chatbot.customConfig.documentaryResourceDisplay) {chatbot.initDocumentaryResources()}
-                chatbot.initLayout()
-            },
-
-            async initPlatformConfig() {
-                document.getElementById('page').style.visibility = 'visible';
-                document.getElementById('loading').style.display = 'none';
-
-                try {
-                    await this.$http.get(chatbot.platformUrl + '/getCustomConfig').then(httpResponse => {
-                        chatbot.customConfig.reinitializationButton = httpResponse.body.reinitializationButton;
-                        chatbot.customConfig.backgroundColor = httpResponse.body.backgroundColor;
-                        chatbot.customConfig.fontColor = httpResponse.body.fontColor;
-                        chatbot.customConfig.botMessageBackgroundColor = httpResponse.body.botMessageBackgroundColor;
-                        chatbot.customConfig.botMessageFontColor = httpResponse.body.botMessageFontColor;
-                        chatbot.customConfig.userMessageBackgroundColor = httpResponse.body.userMessageBackgroundColor;
-                        chatbot.customConfig.userMessageFontColor = httpResponse.body.userMessageFontColor;
-                        chatbot.customConfig.fontFamily = httpResponse.body.fontFamily;
-                        chatbot.customConfig.displayAvatar = httpResponse.body.displayAvatar;
-                        chatbot.customConfig.disableNlu = httpResponse.body.disableNlu;
-                        chatbot.customConfig.chatbotDisplay = httpResponse.body.chatbotDisplay;
-                        chatbot.customConfig.qandaDisplay = httpResponse.body.qandaDisplay;
-                        chatbot.customConfig.documentaryResourceDisplay = httpResponse.body.documentaryResourceDisplay;
-                        sessionStorage.setItem('customConfig', JSON.stringify(chatbot.customConfig));
-                    });
-                } catch (error) {
-                console.error('Erreur lors de la récupération de la configuration du chatbot', error);
-            }
-                if (sessionStorage.contextMap) {
-                    chatbot.contextMap = JSON.parse(sessionStorage.contextMap);
-                } else {
-                    this.$http.post(chatbot.botUrl + '/context').then(contextResponse => {
-                        chatbot.contextMap = contextResponse.data;
-                        sessionStorage.setItem('contextMap', JSON.stringify(chatbot.contextMap));
-                    });
-                }
-            },
-
-            updateSessionStorage() {
-                sessionStorage.convId = chatbot.convId;
-                sessionStorage.setItem('inputConfig', JSON.stringify(chatbot.inputConfig));
-                sessionStorage.setItem('messages', JSON.stringify(chatbot.messages));
-            },
-            restoreFromSessionStorage() {
-                chatbot.convId = sessionStorage.convId;
-                chatbot.inputConfig = JSON.parse(sessionStorage.inputConfig);
-                chatbot.messages = JSON.parse(sessionStorage.messages);
-            },
-            clearSessionStorage() {
-                sessionStorage.clear();
-            },
-
-            setParametersFromHttpResponse(httpResponse) {
-                chatbot.convId = httpResponse.data.metadatas.sessionId;
-                chatbot.updateSessionStorage();
-                chatbot._handleResponse(httpResponse, false);
-            },
-
-            startConversation() {
-                chatbot.lastUserInteraction = Date.now();
-                const urlPage = window.location.href;
-                scanContextKeys(new Map(Object.entries(chatbot.contextMap))).then(value => {
-                    chatbot.context = value;
-                    if (chatbot.context['url'] === undefined) {
-                        chatbot.context['url'] = urlPage;
-                    }
-                    if (sessionStorage.convId) {
-                        chatbot.restoreFromSessionStorage();
-                        chatbot._scrollToBottom();
-                    } else {
-                        this.$http.post(chatbot.botUrl + '/start', {message: null, metadatas: {'context': chatbot.context}})
-                            .then(chatbot.setParametersFromHttpResponse)
-                            .catch(() => {
-                                // error
-                                chatbot.error = true;
-                                chatbot.processing = false;
-                                chatbot._scrollToBottom();
-                            });
-                    }
-                });
-            },
-
-            postAnswerBtn(btn) {
-                chatbot.messages.push({
-                    text: [DOMPurify.sanitize(btn.label)],
-                    sent: true,
-                    bgColor: 'primary',
-                    textColor: 'white'
-                });
-
-                chatbot.updateSessionStorage();
-
-                chatbot._scrollToBottom();
-
-                if (btn.url !== undefined) {
-                    const link = document.createElement('a');
-                    link.href = btn.url;
-                    if (btn.newTab) {
-                        link.target = '_blank';
-                    } else {
-                        link.target = '_top';
-                    }
-                    document.body.appendChild(link);
-                    link.click();
-                    document.body.removeChild(link);
-                }
-                chatbot.askBot(btn.payload, btn.label, true, null, null, chatbot.rating);
-            },
-            fileUpload(btn, index) {
-                const file = document.getElementById('file_' + index).files[0];
-                const reader = new FileReader();
-                reader.readAsDataURL(file);
-                reader.onload = function (evt) {
-                    chatbot.askBot(btn.payload, null, false, evt.target.result, file.name, false);
-                };
-            }
-            ,
-            postAnswerText(isRating) {
-                let sanitizedString = '';
-                if (isRating) {
-                    sanitizedString = chatbot.inputConfig.rating.toString();
-                    chatbot.inputConfig.showRating = false;
-                    chatbot.messages.push({
-                        text: null,
-                        rating: true,
-                        sent: true,
-                        bgColor: 'primary',
-                        textColor: 'white'
-                    });
-
-                } else {
-                    sanitizedString = DOMPurify.sanitize(chatbot.inputConfig.responseText.trim()
-                        .replace(/(?:\r\n|\r|\n)/g, '<br>'));
-                    chatbot.messages.push({
-                        text: sanitizedString !== '' ? [sanitizedString] : null,
-                        rating: isRating,
-                        sent: true,
-                        bgColor: 'primary',
-                        textColor: 'white'
-                    });
-                }
-                chatbot.updateSessionStorage();
-
-                chatbot._scrollToBottom();
-
-                const response = chatbot.inputConfig.responsePattern === '' ? sanitizedString.replace(/(")/g, '"')
-                    : chatbot.inputConfig.responsePattern.replace('#', sanitizedString.replace(/(")/g, '\\"'));
-                chatbot.askBot(response, null, false, null, null, isRating);
-            },
-            _scrollToBottom() {
-                const scrollHeight = this.$refs.scroller.$el.children[0].children[0].scrollHeight; // workaround
-                this.$refs.scroller.setScrollPosition(scrollHeight, 400);
-            },
-
-            askBot(value, label, isButton, fileContent, fileName, rating) {
-                chatbot.prevInputConfig = JSON.parse(JSON.stringify(chatbot.inputConfig));
-                chatbot.reinitInput();
-                chatbot.lastPayload = value;
-                chatbot.processing = true;
-
-                chatbot.lastUserInteraction = Date.now();
-                let botInput;
-                if (fileContent) {
-                    botInput = {
-                        message: null,
-                        metadatas: {context: chatbot.context, payload: value, filecontent: fileContent, filename: fileName}
-                    };
-                } else if (isButton) {
-                    botInput = {message: null, metadatas: {context: chatbot.context, payload: value, text: label}};
-                } else {
-                    botInput = {message: value, metadatas: {context: chatbot.context}};
-                }
-                if (rating) {
-                    botInput.metadatas.rating = value
-                    if (chatbot.ratingType === 'SIMPLE') {
-                        botInput.message = null
-                    }
-                }
-                return Vue.http.post(chatbot.botUrl + '/talk/' + chatbot.convId, botInput)
-                    .then(httpResponse => {
-                        chatbot._handleResponse(httpResponse, false);
-                    }).catch(
-                        () => {
-                            // error
-                            chatbot.error = true;
-
-                            chatbot.processing = false;
-                            chatbot._scrollToBottom();
-                        });
-
-            }
-            ,
-            _handleResponse(httpResponse, isRating) {
-                // success
-                if (httpResponse.data.metadatas.sessionId && chatbot.convId !== httpResponse.data.metadatas.sessionId) {
-                    chatbot.refreshBot(true);
-                    console.log('le bug')
-                    chatbot.setParametersFromHttpResponse(httpResponse);
-
-                } else {
-                    const responses = httpResponse.data.htmlTexts;
-                    const buttons = httpResponse.data.choices;
-                    const cards = httpResponse.data.cards;
-                    const files = httpResponse.data.files;
-                    chatbot.acceptNlu = httpResponse.data.acceptNlu !== undefined ? httpResponse.data.acceptNlu : true;
-                    chatbot.rating = httpResponse.data.rating.enabled;
-                    chatbot.ratingType = httpResponse.data.rating.type;
-                    chatbot.isEnded = httpResponse.data.status === 'Ended' && !isRating;
-                    if (httpResponse.data.metadatas && httpResponse.data.metadatas.avatar) {
-                        chatbot.botAvatar = 'data:image/png;base64,' + httpResponse.data.metadatas.avatar;
-                    }
-
-                    if (httpResponse.data.metadatas && httpResponse.data.metadatas.jsevent) {
-                        parent.postMessage({jsevent: httpResponse.data.metadatas.jsevent}, '*');
-                    }
-
-                    if (httpResponse.data.metadatas && httpResponse.data.metadatas.welcometour) {
-                        parent.postMessage({welcomeTour: httpResponse.data.metadatas.welcometour}, '*');
-                    }
-
-                    for (let i = 0; i < responses.length - 1; i++) {
-                        chatbot.watingMessagesStack.push({text: responses[i]});
-                    }
-                    chatbot.watingMessagesStack.push({
-                        text: responses[responses.length - 1],
-                        buttons: buttons,
-                        cards: cards,
-                        files: files
-                    });
-
-                    chatbot._displayMessages();
-                }
-            }
-            ,
-            _displayMessages() {
-                if (chatbot.watingMessagesStack.length > 0) {
-                    const currentMessage = chatbot.watingMessagesStack.shift();
-                    let watingTime = chatbot.lastUserInteraction - Date.now() + chatbot.minTimeBetweenMessages;
-
-                    if (chatbot.devMode === true) {
-                        watingTime = 0;
-                    }
-
-                    sleep(watingTime).then(function () {
-                        chatbot._processResponse(currentMessage);
-                        chatbot.lastUserInteraction = Date.now();
-                        chatbot._displayMessages();
-                    });
-                } else {
-                    chatbot.inputConfig.showRating = chatbot.rating && chatbot.ratingType === 'SIMPLE' && chatbot.inputConfig.rating === 0;
-                    chatbot.processing = false;
-                    if (chatbot.keepAction) {
-                        chatbot.inputConfig = chatbot.prevInputConfig;
-                        chatbot.inputConfig.responseText = '';
-                        chatbot.keepAction = false;
-                        chatbot.updateSessionStorage();
-                    }
-                }
-            }
-            ,
-            focusInput() {
-                chatbot.$refs.input.focus();
-            }
-            ,
-            _processResponse(response) {
-                const lastMsg = chatbot.messages[chatbot.messages.length - 1];
-                if (response.text !== undefined && response.text !== '') {
-                    if (lastMsg && !lastMsg.sent) {
-                        // ajoute un message à un précédent message du bot
-                        lastMsg.text.push(response.text);
-                    } else {
-                        // première réponse du bot
-                        if (chatbot.customConfig.displayAvatar) {
-                            chatbot.messages.push({
-                                avatar: chatbot.botAvatar,
-                                text: [response.text],
-                                bgColor: 'grey-grdf'
-                            });
-                        } else {
-                            chatbot.messages.push({
-                                text: [response.text],
-                                bgColor: 'grey-grdf'
-                            });
-                        }
-                    }
-                    chatbot.updateSessionStorage();
-
-                }
-
-                if (response.buttons) {
-                    response.buttons.forEach(function (value, key) {
-                        chatbot.inputConfig.buttons.push(value);
-                        chatbot.updateSessionStorage();
-                    }, chatbot);
-                }
-
-                if (response.cards) {
-                    response.cards.forEach(function (value, key) {
-                        chatbot.inputConfig.cards.push(value);
-                        chatbot.updateSessionStorage();
-                    }, chatbot);
-                }
-
-                if (response.files) {
-                    response.files.forEach(function (value, key) {
-                        chatbot.inputConfig.files.push(value);
-                        chatbot.updateSessionStorage();
-                    }, chatbot);
-                }
-
-                chatbot._scrollToBottom();
-            },
-            reinitInput() {
-                chatbot.inputConfig.modeTextarea = false;
-                chatbot.inputConfig.responsePattern = '';
-                chatbot.inputConfig.responseText = '';
-                chatbot.inputConfig.buttons = [];
-                chatbot.inputConfig.cards = [];
-                chatbot.inputConfig.files = [];
-                chatbot.error = false;
-                chatbot.updateSessionStorage();
-            },
-            minimize() {
-                parent.postMessage('Chatbot.minimize', '*');
-            },
-            refreshBot(isAnotherConversation) {
-                chatbot.inputConfig = {
-                    modeTextarea: false,
-                    responseText: '',
-                    responsePattern: '',
-                    showRating: false,
-                    rating: 0,
-                    buttons: [],
-                    files: [],
-                    cards: []
-                };
-                chatbot.customConfig = {};
-                chatbot.error = false;
-                chatbot.convId = null;
-                chatbot.contextMap = {};
-                chatbot.messages = [];
-                chatbot.rating = false;
-
-                chatbot.clearSessionStorage();
-
-                if (!isAnotherConversation) {
-                    chatbot.startConversation();
-                }
-            },
-
-            refreshPlatform(){
-                chatbot.initPlatformConfig()
-                if (chatbot.tab === 'bot') {
-                    chatbot.refreshBot()
-                } else if (chatbot.tab === 'qAndA') {
-                    chatbot.initQAndA();
-                }
-                if (chatbot.customConfig.documentaryResourceDisplay) {
-                    chatbot.initDocumentaryResources();
-                }
-            },
-            // Function to complete to switch to another bot
-            changeLocal(locale) {
-                //todo : change url bot to simulate language change
-            },
-
-            initLayout(){
-                if (chatbot.customConfig.qandaDisplay && !chatbot.customConfig.chatbotDisplay){
-                    chatbot.tab = 'qAndA'
-                } else {
-                    chatbot.tab = 'bot'
-                }
-            },
-
-            tabChange(tab) {
-                chatbot.tab = tab
-                if(tab === 'bot'){
-                    this.$nextTick(() => {
-                        chatbot._scrollToBottom();
-                        chatbot.qAndAConfig.selectedQuestion = null;
-                    });
-                }
-            },
-
-            /* Q&A */
-
-            initQAndA(){
-                this.$http.get(chatbot.qAndAConfig.qAndAUrl + '/getQuestionsAnswers').then(questionAnswerResponse => {
-                    chatbot.qAndAConfig.questionAnswerList = questionAnswerResponse.data;
-                    chatbot.qAndAConfig.filteredQuestionAnswerList = questionAnswerResponse.data;
-                    chatbot.qAndAConfig.filterInput = '';
-                });
-            },
-
-            filterQuestionsAnswers(){
-                if (chatbot.qAndAConfig.filterInput !== ''){
-                    chatbot.qAndAConfig.filteredQuestionAnswerList = chatbot.qAndAConfig.questionAnswerList.filter(questionAnswer => questionAnswer.question.toLowerCase().includes(chatbot.qAndAConfig.filterInput.toLowerCase()) || questionAnswer.answer.toLowerCase().includes(chatbot.qAndAConfig.filterInput.toLowerCase()))
-                }else{
-                    chatbot.qAndAConfig.filteredQuestionAnswerList = chatbot.qAndAConfig.questionAnswerList
-                }
-            },
-
-            selectQuestion(selected){
-                chatbot.qAndAConfig.selectedQuestion = selected;
-            },
-
-
-            /* Documentary resources */
-
-            initDocumentaryResources() {
-                this.$http.get(chatbot.documentaryResourceConfig.documentaryResourceUrl + '/getDocumentaryResources').then(documentaryResourceResponse => {
-                    chatbot.documentaryResourceConfig.documentaryResourceList = documentaryResourceResponse.data;
-                });
-            },
-        }
-    })
-;
+const sleep = function (milliseconds) {
+    return new Promise(function (resolve) {
+        setTimeout(resolve, milliseconds);
+    });
+};
+
+const getUrlVars = function () {
+    const vars = {};
+    window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function (m, key, value) {
+        vars[key] = value;
+    });
+    return vars;
+};
+
+
+const urlVars = getUrlVars();
+const _platformRunnerUrl = urlVars['runnerUrl'];
+const _platformName = decodeURI(urlVars['botName']);
+const _avatar = _platformRunnerUrl + '/static/chatbot/images/avatar/avatar.png';
+
+const _platformBaseUrl = _platformRunnerUrl + '/api/platform-config';
+const _botBaseUrl = _platformRunnerUrl + '/api/chatbot';
+const _qAndABaseUrl = _platformRunnerUrl + '/api/qanda';
+const _documentaryResourceBaseUrl = _platformRunnerUrl + '/api/docres';
+
+const scanContextKeys = (context) => new Promise((res, rej) => {
+    const channel = new MessageChannel();
+    channel.port1.onmessage = ({data}) => {
+        channel.port1.close();
+        if (data.error) {
+            rej(data.error);
+        } else {
+            res(data.result);
+        }
+    };
+
+    parent.postMessage({context: context}, '*', [channel.port2]);
+});
+
+window.addEventListener(
+    'message',
+    async function (event) {
+        if (event.data === 'start') {
+            await chatbot.initPlatform();
+        }
+        if (event.data.sendTopic) {
+            const button = chatbot.inputConfig.buttons.find((button) => button.payload === event.data.sendTopic.topic)
+            if (chatbot.botConfig.convId !== undefined && button !== undefined) {
+                postAnswerBtn(button)
+            }
+        }
+        if (event.data === 'clearSessionStorage') {
+            sessionStorage.clear();
+        } else if (event.data === 'refresh') {
+            chatbot.refreshPlatform()
+            console.log('refresh event')
+        } else if (event.data === 'conversationExist') {
+            parent.postMessage({conversationExist: sessionStorage.convId !== undefined}, '*');
+        }
+    });
+
+const chatbot = new Vue({
+        el: '#q-app',
+        updated() {
+            const images = document.getElementsByClassName('imgClass');
+            const htmls = document.getElementsByClassName('htmlClass');
+            for (let i = 0; i < images.length; i++) {
+                images[i].addEventListener('click', function (e) {
+                    parent.postMessage({pictureModal: this.src}, '*');
+                }, false);
+            }
+            for (let j = 0; j < htmls.length; j++) {
+                htmls[j].addEventListener('click', function (e) {
+                    parent.postMessage({htmlModal: this.getAttribute('data-html')}, '*');
+                }, false);
+            }
+            if (chatbot.$refs.input && !chatbot.$refs.input.disable) {
+                this.focusInput()
+            }
+        },
+        data: {
+            // config
+
+            footerMenu: '',
+            platformUrl: _platformBaseUrl,
+            context: {},
+            contextMap: {},
+            platformName: _platformName,
+
+            customConfig: {
+                reinitializationButton: false,
+                backgroundColor: 'grey',
+                fontColor: 'black',
+                botMessageBackgroundColor: 'grey',
+                botMessageFontColor: 'black',
+                userMessageBackgroundColor: 'grey',
+                userMessageFontColor: 'black',
+                fontFamily: 'Arial, Helvetica, sans-serif',
+                displayAvatar: true,
+                disableNlu: false,
+                chatbotDisplay: false,
+                qandaDisplay: false,
+                documentaryResourceDisplay: false
+            },
+            botConfig: {
+                convId: null,
+                botUrl: _botBaseUrl,
+                devMode: false, // ##param.devMode##
+                minTimeBetweenMessages: 1000,
+                botAvatar: _avatar,
+                isEnded: false,
+                prevInputConfig: {},
+                lastPayload: null,
+                processing: false,
+                acceptNlu: true,
+                rating: false,
+                ratingType: 'SIMPLE',
+                error: false,
+                messages: [],
+                keepAction: false,
+                lastUserInteraction: 0,
+                watingMessagesStack: [],
+            },
+            // technique
+            inputConfig: {
+                // TODO, il exste d'autres modes, par ex email
+                modeTextarea: false,
+                responseText: '',
+                responsePattern: '',
+                showRating: false,
+                rating: 0,
+                buttons: [],
+                cards: [],
+                files: []
+            },
+
+            qAndAConfig: {
+                qAndAUrl: _qAndABaseUrl,
+                questionAnswerList: [],
+                filteredQuestionAnswerList: [],
+                filterInput: '',
+                selectedQuestion: null
+            },
+            documentaryResourceConfig: {
+                documentaryResourceUrl: _documentaryResourceBaseUrl,
+                documentaryResourceList: [],
+                documentaryResourceFileBaseUrl: _documentaryResourceBaseUrl + '/getDocumentaryResourceFile?label='
+            }
+        },
+        methods: {
+
+            async initPlatform(){
+                // waiting for the custom config to set the display params
+                await chatbot.initPlatformConfig()
+                if(chatbot.customConfig.chatbotDisplay) {startConversation()}
+                if(chatbot.customConfig.qandaDisplay) {initQAndA()}
+                if(chatbot.customConfig.documentaryResourceDisplay) {initDocumentaryResources()}
+                chatbot.initLayout()
+            },
+
+            async initPlatformConfig() {
+                document.getElementById('page').style.visibility = 'visible';
+                document.getElementById('loading').style.display = 'none';
+
+                try {
+                    await this.$http.get(chatbot.platformUrl + '/getCustomConfig').then(httpResponse => {
+                        chatbot.customConfig.reinitializationButton = httpResponse.body.reinitializationButton;
+                        chatbot.customConfig.backgroundColor = httpResponse.body.backgroundColor;
+                        chatbot.customConfig.fontColor = httpResponse.body.fontColor;
+                        chatbot.customConfig.botMessageBackgroundColor = httpResponse.body.botMessageBackgroundColor;
+                        chatbot.customConfig.botMessageFontColor = httpResponse.body.botMessageFontColor;
+                        chatbot.customConfig.userMessageBackgroundColor = httpResponse.body.userMessageBackgroundColor;
+                        chatbot.customConfig.userMessageFontColor = httpResponse.body.userMessageFontColor;
+                        chatbot.customConfig.fontFamily = httpResponse.body.fontFamily;
+                        chatbot.customConfig.displayAvatar = httpResponse.body.displayAvatar;
+                        chatbot.customConfig.disableNlu = httpResponse.body.disableNlu;
+                        chatbot.customConfig.chatbotDisplay = httpResponse.body.chatbotDisplay;
+                        chatbot.customConfig.qandaDisplay = httpResponse.body.qandaDisplay;
+                        chatbot.customConfig.documentaryResourceDisplay = httpResponse.body.documentaryResourceDisplay;
+                        sessionStorage.setItem('customConfig', JSON.stringify(chatbot.customConfig));
+                    });
+                } catch (error) {
+                console.error('Erreur lors de la récupération de la configuration du chatbot', error);
+            }
+                if (sessionStorage.contextMap) {
+                    chatbot.contextMap = JSON.parse(sessionStorage.contextMap);
+                } else {
+                    this.$http.post(chatbot.botConfig.botUrl + '/context').then(contextResponse => {
+                        chatbot.contextMap = contextResponse.data;
+                        sessionStorage.setItem('contextMap', JSON.stringify(chatbot.contextMap));
+                    });
+                }
+            },
+            minimize() {
+                parent.postMessage('Chatbot.minimize', '*');
+            },
+
+            refreshPlatform(){
+                chatbot.initPlatformConfig()
+                if (chatbot.footerMenu === 'bot') {
+                    refreshBot()
+                } else if (chatbot.footerMenu === 'qAndA') {
+                    initQAndA();
+                }
+                if (chatbot.customConfig.documentaryResourceDisplay) {
+                    initDocumentaryResources();
+                }
+            },
+            // Function to complete to switch to another bot
+            changeLocal(locale) {
+                //todo : change url bot to simulate language change
+            },
+
+            initLayout(){
+                // On start, if there is only the Q&A on, we show it. Otherwise, we open on the chatbot by default
+                if (chatbot.customConfig.qandaDisplay && !chatbot.customConfig.chatbotDisplay){
+                    chatbot.footerMenu = 'qAndA'
+                } else {
+                    chatbot.footerMenu = 'bot'
+                }
+            },
+
+
+            footerMenuChange(menuValue) {
+                chatbot.footerMenu = menuValue
+                if(menuValue === 'bot'){
+                    this.$nextTick(() => {
+                        // instant scroll to bottom of the bot layout when clicking on 'bot' menu
+                        const scrollHeight = chatbot.$refs.scroller.$el.children[0].children[0].scrollHeight; // workaround
+                        chatbot.$refs.scroller.setScrollPosition(scrollHeight);
+                        // if a question/answer is open when clicking on 'bot' menu, it closes it
+                        chatbot.qAndAConfig.selectedQuestion = null;
+                    });
+                }
+            },
+
+            focusInput() {
+                chatbot.$refs.input.focus();
+            }
+        }
+    })
+;
diff --git a/vertigo-bot-executor/src/main/webapp/static/chatbot/js/documentaryResourceService.js b/vertigo-bot-executor/src/main/webapp/static/chatbot/js/documentaryResourceService.js
new file mode 100644
index 000000000..8aaa65e4a
--- /dev/null
+++ b/vertigo-bot-executor/src/main/webapp/static/chatbot/js/documentaryResourceService.js
@@ -0,0 +1,5 @@
+function initDocumentaryResources() {
+    chatbot.$http.get(chatbot.documentaryResourceConfig.documentaryResourceUrl + '/getDocumentaryResources').then(documentaryResourceResponse => {
+        chatbot.documentaryResourceConfig.documentaryResourceList = documentaryResourceResponse.data;
+    });
+}
diff --git a/vertigo-bot-executor/src/main/webapp/static/chatbot/js/qAndAService.js b/vertigo-bot-executor/src/main/webapp/static/chatbot/js/qAndAService.js
new file mode 100644
index 000000000..e46a12f95
--- /dev/null
+++ b/vertigo-bot-executor/src/main/webapp/static/chatbot/js/qAndAService.js
@@ -0,0 +1,19 @@
+function initQAndA(){
+    chatbot.$http.get(chatbot.qAndAConfig.qAndAUrl + '/getQuestionsAnswers').then(questionAnswerResponse => {
+        chatbot.qAndAConfig.questionAnswerList = questionAnswerResponse.data;
+        chatbot.qAndAConfig.filteredQuestionAnswerList = questionAnswerResponse.data;
+        chatbot.qAndAConfig.filterInput = '';
+    });
+}
+
+function filterQuestionsAnswers(){
+    if (chatbot.qAndAConfig.filterInput !== ''){
+        chatbot.qAndAConfig.filteredQuestionAnswerList = chatbot.qAndAConfig.questionAnswerList.filter(questionAnswer => questionAnswer.question.toLowerCase().includes(chatbot.qAndAConfig.filterInput.toLowerCase()) || questionAnswer.answer.toLowerCase().includes(chatbot.qAndAConfig.filterInput.toLowerCase()))
+    }else{
+        chatbot.qAndAConfig.filteredQuestionAnswerList = chatbot.qAndAConfig.questionAnswerList
+    }
+}
+
+function selectQuestion(selected){
+    chatbot.qAndAConfig.selectedQuestion = selected;
+}
\ No newline at end of file
diff --git a/vertigo-bot-executor/src/main/webapp/static/chatbot/style/style.css b/vertigo-bot-executor/src/main/webapp/static/chatbot/style/style.css
index 151187ecf..49596cacd 100644
--- a/vertigo-bot-executor/src/main/webapp/static/chatbot/style/style.css
+++ b/vertigo-bot-executor/src/main/webapp/static/chatbot/style/style.css
@@ -48,6 +48,7 @@ footer {
     background-color: #ffffff;
     border: solid 1px rgba(0, 0, 0, 0.2);
     box-shadow: 0 0 8px rgba(58, 58, 58, 0.25);
+    overflow: hidden;
 }
 
 .docres-container {
@@ -68,7 +69,7 @@ footer {
 }
 
 .q-message {
-    margin-bottom: 14px
+    margin-bottom: 14px;
 }
 
 .q-message-text{
@@ -107,7 +108,8 @@ footer {
     border-radius: 18px;
     margin-top: 5px;
     min-height: unset;
-    padding: 8px 12px 8px 12px;
+    padding: 8px 14px 8px 12px;
+    inline-size: fit-content;
 }
 
 .q-message-sent .q-message-text-content {
@@ -135,7 +137,7 @@ footer {
 }
 
 .custom-header {
-    padding: 4px 0;
+    padding: 4px 8px;
     font-family: var(--font-family) !important;
     background: var(--background-color) !important;
     box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15);