GDB-10716: Implement Explain Response Action (#1579)

* GDB-10716: Implement Explain Response Action ## What Introduce the explain response action. ## Why Users should be able to see how an answer was generated. ## How Extend the item chat detail component to display the explain response. * Fixes visualisation of toggle-explain-response-icon * Remove bottom border from explain query header * fixes explain-response-row alignment * Changed to reuse the CONVERSATIONS_ENDPOINT * Rename copy to onCopy * Fixes javadoc * Expose getExplainResponse function * Added error message if explain response failed * Fixes name of onAskHowAnswerWasDerived function * expose getAgent function * Fixes typo * Fixes javadoc * Fixes javadocs and variable name * changed the name onOpenInSparqlEditor * simplify explain response function * Fixes the setting of the agent ID for the chat item model instances. Only the answer has the agent ID. * Removes unnecessary clone of all explain responses * Fixed collapsing of explain responses. * Replace copy functionality with using of copy directive * Disable the links that triggers executing of question. * disable dev mode * fixes MR comments * fixes after rebase --------- Co-authored-by: Svilen Velikov <51084653+svilenvelikov@users.noreply.github.com>
Ontotext-AD · Oct 3, 2024 · 81f8c72 · 81f8c72
1 parent b6276c9
commit 81f8c72
Show file tree

Hide file tree

Showing 20 changed files with 663 additions and 176 deletions.
diff --git a/src/css/ttyg/chat-item-details.css b/src/css/ttyg/chat-item-details.css
@@ -0,0 +1,128 @@
+:root {
+    --border: 1px solid #C2C1C2;
+}
+
+.chat-detail .assistant {
+    display: flex;
+    gap: 16px;
+}
+
+.chat-detail .assistant-message {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    width: 80%;
+}
+
+.chat-detail .assistant-message .answer {
+    padding: 4px 8px;
+    line-height: var(--line-height);
+}
+
+.chat-detail .assistant-icon {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 10px;
+}
+
+.chat-detail .assistant-message .hidden-actions {
+    opacity: 0
+}
+
+.chat-detail .assistant-message .toggle-explain-response-icon {
+    transform: rotate(180deg);
+    font-size: 0.6rem;
+}
+
+.chat-detail .assistant-message .toggle-explain-response-icon.expanded {
+    transform: rotate(0deg);
+}
+
+.chat-detail .assistant-message .actions:hover {
+    opacity: 1;
+}
+
+.chat-detail .assistant-message .actions {
+    padding-left: 6px;
+}
+
+.chat-detail .assistant-message .derived-answer-hint {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.chat-detail .assistant-message .deliver-answer-btn {
+    background: none;
+    border: var(--border);
+    color: #414041
+}
+
+.chat-detail .assistant-message .explain-response-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.chat-detail .assistant-message .explain-responses {
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+}
+
+/* Better handling of markdown-derived HTML inside the assistant message */
+.chat-detail .assistant-message li > p:has(+:not(p)) {
+    margin-bottom: 0;
+}
+
+.chat-detail .explain-response {
+    display: flex;
+    flex-direction: column;
+}
+
+.chat-detail .explain-response .explain-response-row {
+    display: flex;
+    gap: 10px;
+    margin: 0 !important;
+    align-items: center;
+}
+
+.chat-detail .explain-response .label {
+    color: #1E293B;
+    font-weight: 400;
+}
+
+.chat-detail .explain-response .explain-query .header {
+    display: flex;
+    justify-content: space-between;
+    background-color: #F3F3F3;
+    padding: 4px 8px;
+}
+
+.chat-detail .explain-response .explain-query {
+    border: var(--border);
+}
+
+.chat-detail .explain-response .explain-query .query {
+    padding: 16px;
+}
+
+.chat-detail .copy-btn {
+    color: var(--primary-color);
+    border: none;
+    background-color: transparent;
+    cursor: pointer;
+    padding: 0;
+}
+
+.chat-detail .copy-btn:hover {
+    transform: scale(1.1);
+    transition: all 0.1s ease-out;
+}
+
+.chat-detail .copy-btn:focus {
+    outline: none;
+}
diff --git a/src/css/ttyg/chat-panel.css b/src/css/ttyg/chat-panel.css
@@ -11,17 +11,10 @@
     clip: rect(0, auto, auto, 0);
 }
 
-.chat-panel .btn-link:focus {
-    color: var(--text-color);
-}
-
-.chat-panel .btn-link:not(:hover) {
-    color: var(--text-color);
-}
-
 .chat-panel .chat-details {
     overflow-y: hidden;
     scrollbar-gutter: stable;
+    padding-right: 10px;
 }
 
 .chat-panel:hover .chat-details {
@@ -42,70 +35,24 @@
     color: var(--text-color);
 }
 
-.chat-panel .assistant {
-    display: flex;
-    gap: 16px;
-}
-
 .chat-panel .actions {
     display: flex;
     gap: 10px;
 }
 
-.chat-panel .assistant-message {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-}
-
-.chat-panel .assistant-message .answer {
-    padding: 4px 8px;
-    line-height: var(--line-height);
-}
-
 .chat-panel .user-message .question {
     max-width: 70%;
     padding: 8px 16px;
     color: var(--text-color);
     line-height: var(--line-height);
 }
 
-.chat-panel .assistant-icon {
-    width: 40px;
-    height: 40px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 10px;
-}
-
 .chat-panel .messages-hint {
     font-size: 2em;
     padding-top: 2em;
     text-align: center;
 }
 
-.chat-panel .assistant-message .hidden-actions {
-    opacity: 0
-}
-
-.chat-panel .assistant-message .toggle-explain-response-icon {
-    transform: rotate(180deg);
-    font-size: 0.6rem;
-}
-
-.chat-panel .assistant-message .toggle-explain-response-icon.expanded {
-    transform: rotate(0deg);
-}
-
-.chat-panel .assistant-message .actions:hover {
-    opacity: 1;
-}
-
-.chat-panel .assistant-message .actions {
-    padding-left: 6px;
-}
-
 .chat-panel .new-question {
     width: 100%;
 }
@@ -115,35 +62,6 @@
     color: var(--text-color);
 }
 
-.chat-panel .assistant-message .derived-answer-hint {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-
-.chat-panel .assistant-message .deliver-answer-btn {
-    background: none;
-    border-color: #C2C1C2;
-    color: #414041
-}
-
-.chat-panel .assistant-message .explain-response-wrapper {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-}
-
-.chat-panel .assistant-message .explain-responses {
-    display: flex;
-    flex-direction: column;
-    gap: 32px;
-}
-
 .chat-panel .chat-loading {
     margin-top: 100px;
 }
-
-/* Better handling of markdown-derived HTML inside the assistant message */
-.chat-panel .assistant-message li > p:has(+:not(p)) {
-    margin-bottom: 0;
-}
diff --git a/src/i18n/locale-en.json b/src/i18n/locale-en.json
@@ -232,6 +232,10 @@
                 "body": "Do you really want to delete <b>{{chatName}}</b>? All chat history will be lost."
             }
         },
+        "messages": {
+            "text_copy_successful": "Successfully copied to the clipboard.",
+            "text_copy_failed": "Failed copying to the clipboard."
+        },
         "chat": {
             "loading_chats": "Loading chats...",
             "btn": {
@@ -275,19 +279,28 @@
                 },
                 "copy": {
                     "tooltip": "Copy"
+                },
+                "explain_response": {
+                    "tooltip": "Explain response"
+                },
+                "derive_answer": {
+                    "label": "How did you derive this answer?",
+                    "hint": "Hint: you can also ask the model, for example"
                 }
             },
-            "messages": {
-                "answer_copy_successful": "The answer was successfully copied to the clipboard.",
-                "answer_copy_failed": "Failed to copy the answer to the clipboard."
+            "labels": {
+                "query_method": "Query method",
+                "raw_query": "Raw query",
+                "sparql_query": "SPARQL query"
+
             },
             "dialog": {
-                "confirm_repository_change_before_open_similarity": {
-                    "body": "If you proceed with creating the similarity index, GraphDB will open in a new tab and switch to the <b>{{repositoryId}}</b> repository."
-                },
-                "confirm_repository_change_before_open_connectors": {
-                    "body": "If you proceed with creating the ChatGPT retrieval connector, GraphDB will open in a new tab and switch to the <b>{{repositoryId}}</b> repository."
+                "confirm_repository_change": {
+                    "body": "If you proceed with executing of SPARQL query, GraphDB will open in a new tab and switch to the <b>{{repositoryId}}</b> repository."
                 }
+            },
+            "messages": {
+                "explain_response_failure": "Failed to retrieve the explanation for the response."
             }
         },
         "agent": {
@@ -403,6 +416,14 @@
                     "save": {
                         "label": "Save"
                     }
+                },
+                "dialog": {
+                    "confirm_repository_change_before_open_similarity": {
+                        "body": "If you proceed with creating the similarity index, GraphDB will open in a new tab and switch to the <b>{{repositoryId}}</b> repository."
+                    },
+                    "confirm_repository_change_before_open_connectors": {
+                        "body": "If you proceed with creating the ChatGPT retrieval connector, GraphDB will open in a new tab and switch to the <b>{{repositoryId}}</b> repository."
+                    }
                 }
             },
             "delete_agent_modal": {

diff --git a/src/i18n/locale-fr.json b/src/i18n/locale-fr.json
@@ -232,6 +232,10 @@
                 "body": "Voulez-vous vraiment supprimer <b>{{chatName}}</b>? Tout l'historique de la conversation sera perdu."
             }
         },
+        "messages": {
+            "text_copy_successful": "Copié avec succès dans le presse-papiers.",
+            "text_copy_failed": "Échec de la copie dans le presse-papiers."
+        },
         "chat": {
             "loading_chats": "Chargement des chats...",
             "deleted_repository": "Dépôt supprimé",
@@ -276,19 +280,27 @@
                 },
                 "copy": {
                     "tooltip": "Copier"
+                },
+                "explain_response": {
+                    "tooltip": "Expliquer la réponse"
+                },
+                "derive_answer": {
+                    "label": "Comment avez-vous obtenu cette réponse ?",
+                    "hint": "Astuce : vous pouvez également demander au modèle, par exemple"
                 }
             },
-            "messages": {
-                "answer_copy_successful": "La réponse a été copiée avec succès dans le presse-papiers.",
-                "answer_copy_failed": "Échec de la copie de la réponse dans le presse-papiers."
+            "labels": {
+                "query_method": "Méthode de requête",
+                "raw_query": "Requête brute",
+                "sparql_query": "Requête SPARQL"
             },
             "dialog": {
-                "confirm_repository_change_before_open_similarity": {
-                    "body": "Si vous continuez à créer l'index de similarité, GraphDB s'ouvrira dans un nouvel onglet et passera au dépôt <b>{{repositoryId}}</b>."
-                },
-                "confirm_repository_change_before_open_connectors": {
-                    "body": "Si vous continuez à créer le connecteur de récupération ChatGPT, GraphDB s'ouvrira dans un nouvel onglet et passera au dépôt <b>{{repositoryId}}</b>."
+                "confirm_repository_change": {
+                    "body": "Si vous continuez l'exécution de la requête SPARQL, GraphDB s'ouvrira dans un nouvel onglet et passera au dépôt <b>{{repositoryId}}</b>."
                 }
+            },
+            "messages":{
+                "explain_response_failure": "Échec de la récupération de l'explication pour la réponse."
             }
         },
         "agent": {
@@ -404,6 +416,14 @@
                     "save": {
                         "label": "Enregistrer"
                     }
+                },
+                "dialog": {
+                    "confirm_repository_change_before_open_similarity": {
+                        "body": "Si vous continuez à créer l'index de similarité, GraphDB s'ouvrira dans un nouvel onglet et passera au dépôt <b>{{repositoryId}}</b>."
+                    },
+                    "confirm_repository_change_before_open_connectors": {
+                        "body": "Si vous continuez à créer le connecteur de récupération ChatGPT, GraphDB s'ouvrira dans un nouvel onglet et passera au dépôt <b>{{repositoryId}}</b>."
+                    }
                 }
             },
             "delete_agent_modal": {