TTYG help texts and some other minor touches (#1638)

## What - Updated various TTYG help texts - Wrap explain agent instructions - (not just TTYG) Updated many French translations to have a space after a colon (French orthography rule) - Less space between icon and text on TTYG initial screen create agent button ## Why - Better usability - Accurate translations ## How - Mostly translation files - A bit of html/css Co-authored-by: Pavel Mihaylov <pavel@ontotext.com> Co-authored-by: Svilen Velikov <51084653+svilenvelikov@users.noreply.github.com>
Ontotext-AD · Oct 24, 2024 · 5e28274 · 5e28274
1 parent ba51a66
commit 5e28274
Show file tree

Hide file tree

Showing 10 changed files with 96 additions and 82 deletions.
diff --git a/scripts/validate-translations.js b/scripts/validate-translations.js
@@ -60,6 +60,9 @@ const identicalTranslations = [
     "{{progressMessage}}... {{timeHuman}}",
     "\n{{extraMessage}}",
     "{{n}}/{{nn}}",
+    "{{'ttyg.helpInfo'|translate|trustAsHtml}}",
+    "{{'ttyg.help.how.content2'|translate|trustAsHtml}}",
+    "{{'ttyg.helpInfo'|translate|trustAsHtml}}",
     "",
 
     // Example values below - maybe they should never be translated?

diff --git a/src/css/ttyg/agent-instructions-explain-modal.css b/src/css/ttyg/agent-instructions-explain-modal.css
@@ -6,3 +6,7 @@
 .instructions-explain .instruction-content {
     margin-top: 0.5em;
 }
+
+.instructions-explain pre {
+    white-space: pre-wrap;
+}
diff --git a/src/css/ttyg/no-agents-view.css b/src/css/ttyg/no-agents-view.css
@@ -17,3 +17,7 @@
     display: flex;
     justify-content: center;
 }
+
+.no-agents-view-component .create-agent-btn span {
+    margin-left: 0.5rem;
+}
diff --git a/src/css/workbench-custom.css b/src/css/workbench-custom.css
@@ -405,3 +405,7 @@
 .update-ontop-repo-dialog .modal-dialog .modal-content .modal-body {
     font-family: var(--mono-font);
 }
+
+.help-info b {
+    font-weight: 500;
+}
diff --git a/src/i18n/locale-en.json b/src/i18n/locale-en.json
@@ -225,7 +225,7 @@
         }
     },
     "ttyg": {
-        "helpInfo": "Talk to Your Graph is chat bot based on OpenAI's GPT-4 model that can answer questions about data stored in GraphDB, leveraging both your data and the general knowledge of the GPT-4 model. The bot works in connection with the ChatGPT Retrieval connector.",
+        "helpInfo": "The <b>Talk to Your Graph</b> view lets you interact with your database through a conversational interface. You can ask natural language questions about the data and receive answers generated through the combined power of GraphDB and OpenAI. It supports multiple agent configurations and persistent chats for ongoing, contextual conversations.",
         "loading": "Loading...",
         "help": {
             "btn": {
@@ -344,6 +344,7 @@
                 "retrieval_search": "ChatGPT Retrieval",
                 "iri_discovery": "FTS for IRI discovery"
             },
+            "query_colon": ":",
             "query_desc": {
                 "sparql_query":"Direct query",
                 "fts_search": "Full-text search via SPARQL",
@@ -647,8 +648,9 @@
             },
             "messages": {
                 "no_agents": "No agents found for the selected filter.",
-                "help_1": "Talk to your data in natural language. All you need to do is create and instruct your own AI Agent to assist you.",
-                "help_2": "The Agent is an AI-powered conversational agent designed to help with a wide range of tasks, from answering questions and providing information to assisting with creative and technical projects. It leverages advanced natural language processing to understand and respond to user inputs in a human-like manner, making interactions intuitive and efficient.",
+                "help_1": "{{'ttyg.helpInfo'|translate|trustAsHtml}}",
+                "help_2": "{{'ttyg.help.how.content2'|translate|trustAsHtml}}",
+                "help_config": "To use <b>Talk to Your Graph</b>, GraphDB must first be configured to work with OpenAI. Please ensure that the necessary API keys and settings are in place before starting. For detailed setup instructions, refer to the <a href=\"{{talkToGraphDocumentationLink}}\" target=\"_blank\" rel=\"noopener\">documentation<i class=\"icon-external\"></i></a> or contact your administrator.",
                 "token_prop_warn1": "To enable this feature, set the config property",
                 "token_prop_warn2": "to your GPT token in",
                 "token_prop_warn3": "file.",
@@ -661,7 +663,7 @@
             }
         },
         "help.what.title": "What is this?",
-        "help.what.content": "Talk to Your Graph is chat bot based on OpenAI's GPT-4 model that can answer questions about data stored in GraphDB, leveraging both your data and the general knowledge of the GPT-4 model.",
+        "help.what.content": "{{'ttyg.helpInfo'|translate|trustAsHtml}}",
         "help.how.title": "How does it work?",
         "help.how.content": "The bot uses the ChatGPT Retrieval connector to fetch information it does not know about. As such, you must first create a suitable connector. See also the settings for fine-tuning the integration with the Retrieval connector."
     },

diff --git a/src/i18n/locale-fr.json b/src/i18n/locale-fr.json
diff --git a/src/js/angular/ttyg/templates/chat-item-detail.html b/src/js/angular/ttyg/templates/chat-item-detail.html
@@ -53,7 +53,7 @@
                             <div class="header" gdb-tooltip="">
                                 <div class="label">
                                     <span class="query-method" ng-bind-html="'ttyg.chat_panel.labels.called' | translate:{name: queryMethod.name} | trustAsHtml">
-                                    </span>:
+                                    </span>{{ 'ttyg.chat_panel.query_colon' | translate }}
                                     <span class="query-method-details" ng-bind="('ttyg.chat_panel.query_desc.' + queryMethod.name) | translate">
                                     </span>
                                 </div>

diff --git a/src/js/angular/ttyg/templates/chatInfo.html b/src/js/angular/ttyg/templates/chatInfo.html
@@ -1,11 +1,11 @@
 <div class="ot-view-info">
     <h5>{{'ttyg.help.what.title' | translate}}</h5>
-    <p>
-        {{'ttyg.help.what.content' | translate}}
+    <p ng-bind-html="'ttyg.help.what.content' | translate | trustAsHtml">
     </p>
 
     <h5>{{'ttyg.help.how.title' | translate}}</h5>
-    <p>
-        {{'ttyg.help.how.content' | translate}}
+    <p ng-bind-html="'ttyg.help.how.content1' | translate | trustAsHtml">
+    </p>
+    <p ng-bind-html="'ttyg.help.how.content2' | translate | trustAsHtml">
     </p>
 </div>
diff --git a/src/js/angular/ttyg/templates/no-agents-view.html b/src/js/angular/ttyg/templates/no-agents-view.html
@@ -2,28 +2,21 @@
 
 <div class="no-agents-view-component">
     <div class="content">
-        <div class="alert alert-help mb-3">{{ 'ttyg.agent.messages.help_1' | translate }}</div>
-        <div class="alert alert-help mb-3">{{ 'ttyg.agent.messages.help_2' | translate }}</div>
-        <div class="alert alert-warning mb-3">
-            <div>
-                {{ 'ttyg.agent.messages.token_prop_warn1' | translate }}
-                <strong class="ttyg-token-prop copyable">graphdb.gpt.token</strong>
-                <copy-to-clipboard tooltip-text="ttyg.agent.btn.copy_gpt_token_prop.tooltip"></copy-to-clipboard>
-                {{ 'ttyg.agent.messages.token_prop_warn2' | translate }}
-                <strong>conf/graphdb.properties</strong>
-                {{ 'ttyg.agent.messages.token_prop_warn3' | translate }}
-            </div>
-            <a href="{{talkToGraphDocumentationLink}}" target="_blank" rel="noopener">{{ 'ttyg.agent.messages.token_prop_warn4' | translate }}</a>
-        </div>
+        <div class="alert alert-help mb-3" ng-bind-html="'ttyg.agent.messages.help_1' | translate | trustAsHtml"></div>
+        <div class="alert alert-help mb-3" ng-bind-html="'ttyg.agent.messages.help_2' | translate | trustAsHtml"></div>
 
         <div class="actions">
             <button class="btn btn-outline-primary btn-lg text-xs-left create-agent-btn"
                     gdb-tooltip="{{!canModifyAgent ? ('ttyg.agent.fat_btn.create_agent.tooltip_disabled' | translate) : ''}}"
                     ng-disabled="!canModifyAgent"
                     ng-click="onCreateAgent()">
                 <i class="fa-regular fa-message-bot fa-xl"></i>
-                <span class="text ml-1">{{'ttyg.agent.fat_btn.create_agent.label' | translate}}</span>
+                <span class="text">{{'ttyg.agent.fat_btn.create_agent.label' | translate}}</span>
             </button>
         </div>
+
+        <div class="alert alert-warning mt-3">
+            <div ng-bind-html="'ttyg.agent.messages.help_config' | translate | trustAsHtml"></div>
+        </div>
     </div>
 </div>
diff --git a/test-cypress/fixtures/locale-en.json b/test-cypress/fixtures/locale-en.json
@@ -225,7 +225,7 @@
         }
     },
     "ttyg": {
-        "helpInfo": "Talk to Your Graph is chat bot based on OpenAI's GPT-4 model that can answer questions about data stored in GraphDB, leveraging both your data and the general knowledge of the GPT-4 model. The bot works in connection with the ChatGPT Retrieval connector.",
+        "helpInfo": "The <b>Talk to Your Graph</b> view lets you interact with your database through a conversational interface. You can ask natural language questions about the data and receive answers generated through the combined power of GraphDB and OpenAI. It supports multiple agent configurations and persistent chats for ongoing, contextual conversations.",
         "loading": "Loading...",
         "help": {
             "btn": {
@@ -344,6 +344,7 @@
                 "retrieval_search": "ChatGPT Retrieval",
                 "iri_discovery": "FTS for IRI discovery"
             },
+            "query_colon": ":",
             "query_desc": {
                 "sparql_query":"Direct query",
                 "fts_search": "Full-text search via SPARQL",
@@ -647,8 +648,9 @@
             },
             "messages": {
                 "no_agents": "No agents found for the selected filter.",
-                "help_1": "Talk to your data in natural language. All you need to do is create and instruct your own AI Agent to assist you.",
-                "help_2": "The Agent is an AI-powered conversational agent designed to help with a wide range of tasks, from answering questions and providing information to assisting with creative and technical projects. It leverages advanced natural language processing to understand and respond to user inputs in a human-like manner, making interactions intuitive and efficient.",
+                "help_1": "{{'ttyg.helpInfo'|translate|trustAsHtml}}",
+                "help_2": "{{'ttyg.help.how.content2'|translate|trustAsHtml}}",
+                "help_config": "To use <b>Talk to Your Graph</b>, GraphDB must first be configured to work with OpenAI. Please ensure that the necessary API keys and settings are in place before starting. For detailed setup instructions, refer to the <a href=\"{{talkToGraphDocumentationLink}}\" target=\"_blank\" rel=\"noopener\">documentation<i class=\"icon-external\"></i></a> or contact your administrator.",
                 "token_prop_warn1": "To enable this feature, set the config property",
                 "token_prop_warn2": "to your GPT token in",
                 "token_prop_warn3": "file.",
@@ -661,7 +663,7 @@
             }
         },
         "help.what.title": "What is this?",
-        "help.what.content": "Talk to Your Graph is chat bot based on OpenAI's GPT-4 model that can answer questions about data stored in GraphDB, leveraging both your data and the general knowledge of the GPT-4 model.",
+        "help.what.content": "{{'ttyg.helpInfo'|translate|trustAsHtml}}",
         "help.how.title": "How does it work?",
         "help.how.content": "The bot uses the ChatGPT Retrieval connector to fetch information it does not know about. As such, you must first create a suitable connector. See also the settings for fine-tuning the integration with the Retrieval connector."
     },