graphdb-workbench 2.8.0-TR5 → 2.8.0-TR7

package/dist/js/angular/core/directives/autocomplete/templates/autocomplete.html

@@ -1,4 +1,4 @@
-<link href="css/autocomplete-select.css?v=2.8.0-TR5" rel="stylesheet"/>
+<link href="css/autocomplete-select.css?v=2.8.0-TR7" rel="stylesheet"/>
 
 <div class="autocomplete-select-wrapper">
     <div class="autocomplete-select">

package/dist/js/angular/core/directives/operations-statuses-monitor/templates/operations-statuses-monitor.html

@@ -1,4 +1,4 @@
-<link href="css/operations-statuses-monitor.css?v=2.8.0-TR5" rel="stylesheet"/>
+<link href="css/operations-statuses-monitor.css?v=2.8.0-TR7" rel="stylesheet"/>
 
 <div ng-if="activeOperations && activeOperations.operations && activeOperations.operations.length > 0"
      class="operations-statuses btn-group">

package/dist/js/angular/core/directives/rdfresourcesearch/templates/rdfResourceSearchTemplate.html

@@ -1,4 +1,4 @@
-<link href="css/rdf-resource-search.css?v=2.8.0-TR5" rel="stylesheet"/>
+<link href="css/rdf-resource-search.css?v=2.8.0-TR7" rel="stylesheet"/>
 
 <div ng-if="getActiveRepository() && hasActiveLocation() && isNotLoading()" ng-cloak>
     <div id="search-box" class="card search-rdf-input" ng-keydown="onKeyDown($event)" ng-if="!isHomePage()">

package/dist/js/angular/core/directives/yasgui-component/templates/yasgui-component.html

@@ -1,4 +1,4 @@
-<link href="css/lib/ontotext-yasgui-web-component.css?v=2.8.0-TR5" rel="stylesheet">
+<link href="css/lib/ontotext-yasgui-web-component.css?v=2.8.0-TR7" rel="stylesheet">
 
 <ontotext-yasgui
     class="{{classToApply}}"

package/dist/js/angular/security/templates/user.html

@@ -31,7 +31,7 @@
 	</ul>
 </script>
 
-<link href="css/lib/ng-tags-input/ng-tags-input.min.css?v=2.8.0-TR5" rel="stylesheet"/>
+<link href="css/lib/ng-tags-input/ng-tags-input.min.css?v=2.8.0-TR7" rel="stylesheet"/>
 
 <h1>{{pageTitle}}</h1>
 

package/dist/js/angular/ttyg/templates/agent-list.html

@@ -1,4 +1,4 @@
-<link href="css/ttyg/agent-list.css?v=2.8.0-TR5" rel="stylesheet"/>
+<link href="css/ttyg/agent-list.css?v=2.8.0-TR7" rel="stylesheet"/>
 
 <div class="agent-list-component">
     <div class="agents-filter-dropdown btn-group" uib-dropdown>

package/dist/js/angular/ttyg/templates/agent-select-menu.html

@@ -1,12 +1,14 @@
-<link href="css/ttyg/agent-select-menu.css?v=2.8.0-TR5" rel="stylesheet"/>
+<link href="css/ttyg/agent-select-menu.css?v=2.8.0-TR7" rel="stylesheet"/>
 
 <div class="btn-group agent-select-menu" uib-dropdown>
     <button type="button" class="btn dropdown-toggle-btn" uib-dropdown-toggle
             ng-attr-title="{{selectedAgent && !selectedAgent.isDeleted && selectedAgent.repositoryId ? (selectedAgent.name + ' &middot; ' + selectedAgent.repositoryId) : null}}">
         <span ng-if="!selectedAgent">{{'ttyg.agent.agent_select_menu.no_selection_label' | translate}}</span>
-        <span ng-if="selectedAgent && !selectedAgent.isDeleted && selectedAgent.repositoryId">{{selectedAgent.name}} &middot; {{selectedAgent.repositoryId}}</span>
+        <span ng-if="selectedAgent && !selectedAgent.isDeleted && selectedAgent.repositoryId">
+            <span class="agent-name">{{selectedAgent.name}}</span> &middot; {{selectedAgent.repositoryId}}
+        </span>
         <span ng-if="selectedAgent && !selectedAgent.isDeleted && !selectedAgent.repositoryId">
-            {{selectedAgent.name}} &middot; <i class="fa-regular fa-triangle-exclamation text-warning"></i>
+            <span class="agent-name">{{selectedAgent.name}}</span> &middot; <i class="fa-regular fa-triangle-exclamation text-warning"></i>
                 {{'ttyg.agent.deleted_repository' | translate}}
         </span>
         <span ng-if="selectedAgent && selectedAgent.isDeleted" class="text-warning">

package/dist/js/angular/ttyg/templates/chat-item-detail.html

@@ -0,0 +1,68 @@
+<link href="css/ttyg/chat-item-details.css?v=2.8.0-TR7" rel="stylesheet"/>
+
+<div class="chat-detail">
+    <div class="user-message">
+        <div class="question alert-help">
+            {{ chatItemDetail.question.message }}
+        </div>
+    </div>
+    <div class="assistant">
+        <div class="assistant-icon alert-help">
+            <i class="fa-regular fa-message-bot"></i>
+        </div>
+        <div class="assistant-message" ng-if="chatItemDetail.answer">
+            <div class="answer" ng-bind-html="MarkdownService.renderMarkdown(chatItemDetail.answer.message)">
+            </div>
+            <div class="actions" ng-class="{'hidden-actions': !showActions}">
+                <button class="btn btn-link btn-sm regenerate-question-btn"
+                        ng-click="regenerateQuestion()"
+                        ng-disabled="disabled"
+                        gdb-tooltip="{{'ttyg.chat_panel.btn.regenerate.tooltip' | translate}}">
+                    <i class="fa-regular fa-arrows-rotate"></i>
+                </button>
+                <copy-to-clipboard tooltip-text="ttyg.chat_panel.btn.copy.tooltip" text-to-copy="chatItemDetail.answer.message"></copy-to-clipboard>
+                <button class="btn btn-link btn-sm explain-response-btn"
+                        ng-click="explainResponse()"
+                        ng-disabled="disabled && !explainResponseModel"
+                        gdb-tooltip="{{'ttyg.chat_panel.btn.explain_response.tooltip' | translate}}">
+                    <i class="fa-regular fa-wand-magic-sparkles"></i>
+                    <i class="fa-regular fa-chevron-up toggle-explain-response-icon" ng-class="{expanded: explainResponseModel && explainResponseModel.expanded}"></i>
+                </button>
+            </div>
+            <div class="derived-answer-hint" ng-if="loadingExplainResponse ||showActions && explainResponseModel.expanded">
+                <div>{{ 'ttyg.chat_panel.btn.derive_answer.hint' | translate }}</div>
+                <button class="btn deliver-answer-btn" ng-click="onAskHowAnswerWasDerived()">
+                    {{ 'ttyg.chat_panel.btn.derive_answer.label' | translate }}
+                </button>
+            </div>
+            <div ng-if="loadingExplainResponse" onto-loader-new size="40"></div>
+            <div ng-if="explainResponseModel && explainResponseModel.expanded" class="explain-response" ng-repeat="queryMethod in explainResponseModel.queryMethods">
+                <div class="explain-response-row">
+                    <span class="label">{{'ttyg.chat_panel.labels.query_method' | translate}}:</span>
+                    <span class="content">{{queryMethod.name}}</span>
+                </div>
+                <div class="explain-response-row">
+                    <span class="label">{{'ttyg.chat_panel.labels.raw_query' | translate}}:</span>
+                    <span class="content">{{queryMethod.rawQuery}}</span>
+                    <copy-to-clipboard tooltip-text="ttyg.chat_panel.btn.copy.tooltip" text-to-copy="queryMethod.rawQuery"></copy-to-clipboard>
+                </div>
+                <div class="explain-query">
+                    <div class="header">
+                        <div class="label">{{'ttyg.chat_panel.labels.sparql_query' | translate}}</div>
+                        <div class="actions">
+                            <copy-to-clipboard tooltip-text="ttyg.chat_panel.btn.copy.tooltip" text-to-copy="queryMethod.query"></copy-to-clipboard>
+                            <button class="btn btn-link btn-sm"
+                                    ng-click="onOpenInSparqlEditor(queryMethod.query)">
+                                <i class="icon-sparql"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="query">
+                        <pre><code>{{queryMethod.query}}</code></pre>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div ng-if="asking" onto-loader-new size="40"></div>
+    </div>
+</div>

package/dist/js/angular/ttyg/templates/chat-list.html

@@ -1,47 +1,49 @@
-<link href="css/ttyg/chat-list.css?v=2.8.0-TR5" rel="stylesheet"/>
+<link href="css/ttyg/chat-list.css?v=2.8.0-TR7" rel="stylesheet"/>
 
 <div class="chat-list-component">
-    <div ng-repeat="chatGroup in chatList.chatsByDay" class="chat-group">
-        <label>{{getHumanReadableTimestamp(chatGroup.timestamp)}}</label>
-        <ul>
-            <li ng-repeat="chat in chatGroup.chats track by chat.hash" class="chat-item"
-                ng-class="{'selected': chat.id === selectedChat.id, 'edited': renamedChat && chat.id === renamedChat.id}">
-                <div class="chat-name">
-                    <inline-editable-text
-                        field-name="name"
-                        source="chat"
-                        is-editing="renamedChat && chat.id === renamedChat.id"
-                        on-save="onRenameChat(newText, source)"
-                        on-cancel="onCancelChatRenaming()"
-                        on-dblclick="onSelectChatForRenaming(chat)"
-                        on-click="onSelectChat(source)">
-                    </inline-editable-text>
-                </div>
-                <div ng-if="!renamedChat || chat.id !== renamedChat.id" class="btn-group">
-                    <button class="btn btn-link secondary btn-sm open-chat-actions-btn"
-                            data-toggle="dropdown" aria-expanded="false"
-                            ng-if="true"
-                            ng-click="openChatActionMenu()"
-                            ng-disabled="false">
-                        <i class="fa-regular fa-ellipsis"></i>
-                    </button>
-                    <div class="dropdown-menu dropdown-menu-right chat-actions-menu">
-                        <button class="dropdown-item export-chat-btn" type="button" ng-click="onExportChat(chat)">
-                            <i class="fa-regular fa-arrow-down-to-line"></i>
-                            <span>{{'ttyg.chat.btn.export_chat.label' | translate}}</span>
-                        </button>
-                        <button class="dropdown-item rename-chat-btn" type="button" ng-click="onSelectChatForRenaming(chat)">
-                            <i class="fa-regular fa-pen"></i>
-                            <span>{{'ttyg.chat.btn.rename_chat.label' | translate}}</span>
-                        </button>
-                        <div class="dropdown-divider"></div>
-                        <button class="dropdown-item delete-chat-btn" type="button" ng-click="onDeleteChat(chat)">
-                            <i class="fa-regular fa-trash-can"></i>
-                            <span>{{'ttyg.chat.btn.delete_chat.label' | translate}}</span>
+    <div class="chat-list">
+        <div ng-repeat="chatGroup in chatList.chatsByDay" class="chat-group">
+            <label>{{getHumanReadableTimestamp(chatGroup.timestamp)}}</label>
+            <ul>
+                <li ng-repeat="chat in chatGroup.chats track by chat.hash" class="chat-item"
+                    ng-class="{'selected': chat.id === selectedChat.id, 'edited': renamedChat && chat.id === renamedChat.id}">
+                    <div class="chat-name">
+                        <inline-editable-text
+                            field-name="name"
+                            source="chat"
+                            is-editing="renamedChat && chat.id === renamedChat.id"
+                            on-save="onRenameChat(newText, source)"
+                            on-cancel="onCancelChatRenaming()"
+                            on-dblclick="onSelectChatForRenaming(chat)"
+                            on-click="onSelectChat(source)">
+                        </inline-editable-text>
+                    </div>
+                    <div ng-if="chat.id && (!renamedChat || chat.id !== renamedChat.id)" class="btn-group">
+                        <button class="btn btn-link secondary btn-sm open-chat-actions-btn"
+                                data-toggle="dropdown" aria-expanded="false"
+                                ng-if="true"
+                                ng-click="openChatActionMenu()"
+                                ng-disabled="false">
+                            <i class="fa-regular fa-ellipsis"></i>
                         </button>
+                        <div class="dropdown-menu dropdown-menu-right chat-actions-menu">
+                            <button class="dropdown-item export-chat-btn" type="button" ng-click="onExportChat(chat)">
+                                <i class="fa-regular fa-arrow-down-to-line"></i>
+                                <span>{{'ttyg.chat.btn.export_chat.label' | translate}}</span>
+                            </button>
+                            <button class="dropdown-item rename-chat-btn" type="button" ng-click="onSelectChatForRenaming(chat)">
+                                <i class="fa-regular fa-pen"></i>
+                                <span>{{'ttyg.chat.btn.rename_chat.label' | translate}}</span>
+                            </button>
+                            <div class="dropdown-divider"></div>
+                            <button class="dropdown-item delete-chat-btn" type="button" ng-click="onDeleteChat(chat)">
+                                <i class="fa-regular fa-trash-can"></i>
+                                <span>{{'ttyg.chat.btn.delete_chat.label' | translate}}</span>
+                            </button>
+                        </div>
                     </div>
-                </div>
-            </li>
-        </ul>
+                </li>
+            </ul>
+        </div>
     </div>
 </div>

package/dist/js/angular/ttyg/templates/chat-panel.html

@@ -1,46 +1,31 @@
-<link href="css/ttyg/chat-panel.css?v=2.8.0-TR5" rel="stylesheet"/>
+<link href="css/ttyg/chat-panel.css?v=2.8.0-TR7" rel="stylesheet"/>
 
 <div class="chat-panel h-100">
 
-    <div class="messages-hint text-muted" ng-if="chat.chatHistory.isEmpty()">
+    <div class="chat-loading" ng-if="loadingChat" onto-loader-new size="40"></div>
+
+    <div class="messages-hint text-muted" ng-if="!loadingChat && chat.chatHistory.isEmpty() && !askingChatItem">
         {{ 'ttyg.chat_panel.hint' | translate }}
     </div>
 
-    <div class="chat-details" ng-class="{'hidden': !chat}">
-        <div class="chat-detail" ng-repeat="chatItem in chat.chatHistory.items">
-            <div class="user-message">
-                <div class="question alert-help">
-                    {{ chatItem.question.message }}
-                </div>
-            </div>
-            <div class="assistant">
-                <div class="assistant-icon alert-help">
-                    <i class="fa-regular fa-message-bot"></i>
-                </div>
-                <div class="assistant-message">
-                    <div class="answer">
-                        {{ chatItem.answer.message }}
-                    </div>
-                    <div class="actions" ng-class="{'hidden-actions': !$last}">
-                        <button class="btn btn-link secondary btn-sm regenerate-question-btn"
-                                ng-click="regenerateQuestion(chatItem)"
-                                gdb-tooltip="{{'ttyg.chat_panel.btn.regenerate.tooltip' | translate}}">
-                            <i class="fa-regular fa-arrows-rotate"></i>
-                        </button>
-                        <button class="btn btn-link secondary btn-sm copy-answer-btn"
-                                ng-click="copyAnswerToClipboard(chatItem)"
-                                gdb-tooltip="{{'ttyg.chat_panel.btn.copy.tooltip' | translate}}">
-                            <i class="fa-regular fa-clone"></i>
-                        </button>
-                        <i class="fa-regular fa-wand-magic-sparkles"></i>
-                    </div>
-                </div>
-            </div>
-        </div>
+    <div class="chat-details" ng-class="{'hidden': !chat}" ng-if="!loadingChat">
+        <chat-item-detail
+            ng-repeat="chatItemDetail in chat.chatHistory.items"
+            chat-item-detail="chatItemDetail"
+            show-actions="!askingChatItem && $last"
+            on-regenerate-question="regenerateQuestion(chatItem)"
+            on-copy-answer-to-clipboard="copyAnswerToClipboard(chatItem)"
+            disabled="askingChatItem">
+        </chat-item-detail>
+        <chat-item-detail ng-if="askingChatItem" chat-item-detail="askingChatItem"
+                          asking="!!askingChatItem"></chat-item-detail>
     </div>
-    <div class="mew-question mb-3 mt-2 d-flex">
-        <input class="form-control question-input" ng-model="chatItem.question.message" type="text">
-        <button class="btn btn-primary ask-button" ng-disabled="!chatItem.question.message || !selectedAgent || selectedAgent.isDeleted" ng-click="ask()">
+    <div class="new-question mb-2 mt-2 d-flex">
+        <input class="form-control question-input" ng-model="chatItem.question.message" type="text"
+               ng-disabled="askingChatItem || loadingChat" ng-keypress="onKeypressOnInput($event)">
+        <button class="btn btn-primary ask-button"
+                ng-disabled="!chatItem.question.message || !selectedAgent || selectedAgent.isDeleted || askingChatItem || loadingChat"
+                ng-click="ask()">
             <i class="fa-regular fa-arrow-turn-left-up"></i>
             {{ 'ttyg.chat_panel.btn.ask.label ' | translate }}
         </button>

package/dist/js/angular/ttyg/templates/modal/agent-settings-modal.html

@@ -1,14 +1,17 @@
-<link href="css/ttyg/agent-settings-modal.css?v=2.8.0-TR5" rel="stylesheet"/>
-<link href="js/lib/rzslider/rzslider.min.css?v=2.8.0-TR5" rel="stylesheet"/>
+<link href="css/ttyg/agent-settings-modal.css?v=2.8.0-TR7" rel="stylesheet"/>
+<link href="js/lib/rzslider/rzslider.min.css?v=2.8.0-TR7" rel="stylesheet"/>
 
 <div class="modal-header">
     <button type="button" class="close" ng-click="close()"></button>
-    <h4 class="modal-title">{{(isEdit ? 'ttyg.agent.create_agent_modal.title.edit ' : 'ttyg.agent.create_agent_modal.title.create') | translate}}</h4>
+    <h4 class="modal-title">{{(
+        operation === AGENT_OPERATION.EDIT ? 'ttyg.agent.create_agent_modal.title.edit '
+        : operation === AGENT_OPERATION.CLONE ? 'ttyg.agent.create_agent_modal.title.clone'
+        : 'ttyg.agent.create_agent_modal.title.create') | translate}}</h4>
 </div>
 
 <div class="modal-body">
     <form novalidate name="agentSettingsForm" id="agentSettingsForm" class="agent-settings-form">
-        <div class="form-group agent-name">
+        <div class="form-group agent-name-label">
             <label for="name">{{'ttyg.agent.create_agent_modal.form.agent_name.label' | translate}}</label>
             <input type="text" class="form-control" id="name" name="name" ng-model="agentFormModel.name"
                    required autocomplete="off"
@@ -43,11 +46,12 @@
                         <div class="mr-0 extraction-method-toggle">
                             <input type="checkbox" id="{{extractionMethod.method + '_checkbox'}}"
                                    name="{{extractionMethod}}" class="switch"
-                                   ng-change="toggleExtractionMethod()"
+                                   ng-click="toggleExtractionMethod(extractionMethod, $event)"
                                    ng-model="extractionMethod.selected"/>
                             <label for="{{extractionMethod.method + '_checkbox'}}"></label>
                         </div>
-                        <a class="btn btn-link panel-toggle-link collapsed" data-toggle="collapse"
+                        <a class="btn btn-link panel-toggle-link collapsed"
+                           data-toggle="collapse"
                            data-target="#{{extractionMethod.method + '_method_content'}}"
                            aria-expanded="false" aria-controls="{{extractionMethod.method + '_method_content'}}"
                            ng-click="onExtractionMethodPanelToggle(extractionMethod)">
@@ -132,9 +136,14 @@
                         <!-- Similarity method settings -->
 
                         <div ng-if="extractionMethod.method === extractionMethods.SIMILARITY"
+                             ng-class="{'has-error': extractionMethod.selected && !extractionMethod.sparqlOption}"
                              class="extraction-method-options">
-                            <div ng-if="!similarityIndexes.length" class="no-similarity-index-message"
-                                 ng-bind-html="getNoSimilarityIndexHelpMessage()">
+                            <div ng-if="!similarityIndexes.length" class="no-similarity-index-message">
+                                {{'ttyg.agent.create_agent_modal.form.similarity_index.no_similarity_index.message_1' | translate}}
+                                <a href="#" ng-click="goToCreateSimilarityView()">
+                                    {{'ttyg.agent.create_agent_modal.form.similarity_index.no_similarity_index.message_2' | translate}}
+                                </a>
+                                {{'ttyg.agent.create_agent_modal.form.similarity_index.no_similarity_index.message_3' | translate}}.
                             </div>
                             <div ng-show="similarityIndexes.length">
                                 <div class="form-group similarity-index">
@@ -182,9 +191,14 @@
                         <!-- Retrieval method settings -->
 
                         <div ng-if="extractionMethod.method === extractionMethods.RETRIEVAL"
+                             ng-class="{'has-error': agentSettingsForm.$error.missingConnector}"
                              class="extraction-method-options">
-                            <div ng-if="!retrievalConnectors.length" class="no-retrieval-connector-message"
-                                 ng-bind-html="getNoRetrievalConnectorHelpMessage()">
+                            <div ng-if="!retrievalConnectors.length" class="no-retrieval-connector-message">
+                                {{'ttyg.agent.create_agent_modal.form.retrieval_search.no_retrieval_connectors.message_1' | translate}}
+                                <a href="#" ng-click="goToConnectorsView()">
+                                    {{'ttyg.agent.create_agent_modal.form.retrieval_search.no_retrieval_connectors.message_2' | translate}}
+                                </a>
+                                {{'ttyg.agent.create_agent_modal.form.retrieval_search.no_retrieval_connectors.message_3' | translate}}.
                             </div>
                             <div ng-show="retrievalConnectors.length">
                                 <div class="form-group retrieval-connector">
@@ -325,11 +339,13 @@
 </div>
 
 <div class="modal-footer">
-    <button type="button" ng-click="cancel()" class="btn btn-link cancel-btn">
+    <button type="button" ng-click="cancel()" class="btn cancel-btn">
         {{'ttyg.agent.create_agent_modal.btn.cancel.label' | translate}}
     </button>
     <button type="button" ng-click="ok()" ng-disabled="agentSettingsForm.$invalid"
             class="btn btn-primary save-agent-settings-btn">
-        {{( isEdit ? 'ttyg.agent.create_agent_modal.btn.save.label' : 'ttyg.agent.create_agent_modal.btn.create.label') | translate}}
+        {{(operation === AGENT_OPERATION.EDIT ? 'ttyg.agent.create_agent_modal.btn.save.label'
+        : operation === AGENT_OPERATION.CLONE ? 'ttyg.agent.create_agent_modal.btn.save.label'
+        : 'ttyg.agent.create_agent_modal.btn.create.label') | translate}}
     </button>
 </div>

package/dist/js/angular/ttyg/templates/no-agents-view.html

@@ -1,4 +1,4 @@
-<link href="css/ttyg/no-agents-view.css?v=2.8.0-TR5" rel="stylesheet"/>
+<link href="css/ttyg/no-agents-view.css?v=2.8.0-TR7" rel="stylesheet"/>
 
 <div class="no-agents-view-component">
     <div class="content">

package/dist/js/angular/ttyg/templates/ttyg.html

@@ -1,4 +1,4 @@
-<link href="css/ttyg/ttyg.css?v=2.8.0-TR5" rel="stylesheet"/>
+<link href="css/ttyg/ttyg.css?v=2.8.0-TR7" rel="stylesheet"/>
 
 <div class="ttyg-view">
     <h1 id="ttyg-view-title">
@@ -24,14 +24,14 @@
 
         <div id="left-sidebar" class="left-sidebar sidebar" ng-class="showChats ? 'expanded' : 'collapsed'">
             <div class="toolbar">
-                <button class="btn btn-link secondary btn-sm toggle-chats-sidebar-btn"
+                <button class="btn btn-link btn-sm toggle-chats-sidebar-btn"
                         ng-if="true"
                         ng-click="toggleChatsListSidebar()"
                         ng-disabled="false"
                         gdb-tooltip="{{'ttyg.chat.btn.' + (showChats ? 'close_sidebar' : 'open_sidebar') + '.tooltip' | translate}}">
                     <i class="fa-regular fa-sidebar"></i>
                 </button>
-                <button class="btn btn-link secondary btn-sm create-chat-btn"
+                <button class="btn btn-link btn-sm create-chat-btn"
                         ng-if="chats && !chats.isEmpty()"
                         ng-click="startNewChat()"
                         ng-disabled="false"
@@ -49,33 +49,26 @@
                 ps-click-outside="false"
                 ps-size="80vw">
                 <div class="sidebar-content">
-                    <chat-list ng-if="chats" chat-list="chats"></chat-list>
-                    <div ng-if="loadingChats" onto-loader-fancy message="{{'ttyg.chat.loading_chats' | translate}}"
+                    <chat-list ng-if="chats"></chat-list>
+                    <div ng-if="!chats && loadingChats" onto-loader-fancy message="{{'ttyg.chat.loading_chats' | translate}}"
                          size="25" style="height: 75vh; display: flex;"></div>
                 </div>
             </pageslide>
         </div>
 
         <div class="chat-content">
-            <div class="toolbar">
-                <agent-select-menu class="mr-1"></agent-select-menu>
-                <button class="btn btn-link secondary btn-sm edit-current-agent-btn mr-1"
-                        ng-if="true"
-                        ng-click="onEditAgent()"
-                        ng-disabled="false"
-                        gdb-tooltip="{{'ttyg.agent.btn.edit_agent.tooltip' | translate}}">
-                    <i class="fa-regular fa-gear"></i>
-                </button>
-                <button class="btn btn-link secondary btn-sm export-current-chat-btn"
-                        ng-if="true"
-                        ng-click="onExportSelectedChat()"
-                        ng-disabled="false"
-                        gdb-tooltip="{{'ttyg.chat.btn.export_chat.tooltip' | translate}}">
-                    <i class="fa-regular fa-arrow-down-to-line"></i>
-                </button>
-            </div>
-
             <div class="chat">
+                <div class="toolbar mb-2">
+                    <agent-select-menu class="mr-1"></agent-select-menu>
+                    <button class="btn btn-link btn-sm edit-current-agent-btn mr-1"
+                            ng-if="true"
+                            ng-click="onEditAgent()"
+                            ng-disabled="false"
+                            gdb-tooltip="{{'ttyg.agent.btn.edit_agent.tooltip' | translate}}">
+                        <i class="icon-settings"></i>
+                    </button>
+                </div>
+
                 <div uib-collapse="!isCollapsed" id="ot-help-text" class="alert alert-info">
                     <button type="button" ng-click="isCollapsed = false" gdb-tooltip="{{'common.close' | translate}}"
                             class="close"
@@ -100,26 +93,26 @@
 
         <div id="right-sidebar" class="right-sidebar sidebar" ng-class="showAgents ? 'expanded' : 'collapsed'">
             <div class="toolbar">
-                <button class="btn btn-link secondary btn-sm help-btn"
+                <button class="btn btn-link btn-sm help-btn"
                         ng-if="true"
                         ng-click="openHelp()"
                         ng-disabled="false"
                         gdb-tooltip="{{'ttyg.help.btn.show_help.tooltip' | translate}}">
-                    <i class="fa-regular fa-circle-question"></i>
+                    <i class="icon-help"></i>
                 </button>
-                <button class="btn btn-link secondary btn-sm create-agent-btn"
+                <button class="btn btn-link btn-sm create-agent-btn"
                         ng-if="true"
                         ng-click="onCreateAgent()"
                         ng-disabled="false"
                         gdb-tooltip="{{'ttyg.agent.btn.create_agent.tooltip' | translate}}">
-                    <i class="fa-regular fa-circle-plus"></i>
+                    <i class="icon-plus"></i>
                 </button>
-                <button class="btn btn-link secondary btn-sm toggle-agents-sidebar-btn"
+                <button class="btn btn-link btn-sm toggle-agents-sidebar-btn"
                         ng-if="true"
                         ng-click="toggleAgentsListSidebar()"
                         ng-disabled="false"
                         gdb-tooltip="{{'ttyg.agent.btn.' + (showAgents ? 'close_sidebar' : 'open_sidebar') + '.tooltip' | translate}}">
-                    <i class="fa-regular" ng-class="showAgents ? 'fa-xmark' : 'fa-message-bot'"></i>
+                    <i class="" ng-class="showAgents ? 'icon-close' : 'fa-message-bot'"></i>
                 </button>
             </div>