TTYG centered intro message and input on new chat (#1621)

* TTYG centered intro message and input on new chat ## What - New hint message - Center hint and input vertically close to each other ## Why - Better focus on new chat ## How - CSS/HTML * fix conditions for chat panel rendering * exclude label which should not be translated --------- Co-authored-by: Pavel Mihaylov <[email protected]> Co-authored-by: svilen.velikov <[email protected]>
Ontotext-AD · Oct 18, 2024 · 4378322 · 4378322
1 parent 885890f
commit 4378322
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 11 deletions.
diff --git a/scripts/validate-translations.js b/scripts/validate-translations.js
@@ -36,6 +36,7 @@ const identicalTranslations = [
  "Type:",
  "type",
  "Google Analytics (GA4)",
+ "<b>GRAPH</b>WISE – AI THRIVES ON WHOLE DATA",
 
  // File formats:
  "JSON",

diff --git a/src/css/ttyg/chat-panel.css b/src/css/ttyg/chat-panel.css
@@ -11,6 +11,12 @@
  clip: rect(0, auto, auto, 0);
 }
 
+.chat-panel.no-content {
+ justify-content: center;
+ align-items: center;
+ height: inherit !important;
+}
+
 .chat-panel .chat-details {
  display: flex;
  flex-direction: column;
@@ -59,11 +65,17 @@
 }
 
 .chat-panel .messages-hint {
- font-size: 2em;
- padding-top: 2em;
  text-align: center;
 }
 
+.chat-panel .messages-hint .hint1 {
+ font-size: 1.5rem;
+}
+
+.chat-panel .messages-hint .hint2 {
+ font-size: 1.5rem;
+}
+
 .chat-panel .new-question {
  width: 100%;
  padding: 0 1rem;

diff --git a/src/i18n/locale-en.json b/src/i18n/locale-en.json
@@ -276,7 +276,8 @@
  }
  },
  "chat_panel": {
- "hint": "Talk to your graph – simply ask a question!",
+ "hint1": "<b>GRAPH</b>WISE – AI THRIVES ON WHOLE DATA",
+ "hint2": "Simply ask a question!",
  "deleted_agent": "<span class=\"text-warning\"><i class=\"fa-regular fa-triangle-exclamation fa-xs\"></i> deleted agent</span>",
  "btn": {
  "ask": {

diff --git a/src/i18n/locale-fr.json b/src/i18n/locale-fr.json
@@ -276,7 +276,8 @@
  }
  },
  "chat_panel": {
- "hint": "Parlez à votre graphe – posez simplement une question !\nPour le moment, cela fonctionne mieux si vous demandez en anglais, désolé !",
+ "hint1": "<b>GRAPH</b>WISE – AI THRIVES ON WHOLE DATA",
+ "hint2": "Posez simplement une question !",
  "deleted_agent": "<span class=\"text-warning\"><i class=\"fa-regular fa-triangle-exclamation fa-xs\"></i> agent supprimé</span>",
  "btn": {
  "ask": {

diff --git a/src/js/angular/ttyg/templates/chat-panel.html b/src/js/angular/ttyg/templates/chat-panel.html
@@ -1,14 +1,10 @@
 <link href="css/ttyg/chat-panel.css?v=[AIV]{version}[/AIV]" rel="stylesheet"/>
 
-<div class="chat-panel h-100">
+<div class="chat-panel h-100" ng-class="chat.chatHistory.isEmpty() && !askingChatItem ? 'no-content' : ''">
 
  <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}" ng-if="!loadingChat">
+ <div class="chat-details" ng-class="{'hidden': !chat}" ng-if="!loadingChat && !chat.chatHistory.isEmpty() || askingChatItem">
  <div ng-repeat="chatItemDetail in chat.chatHistory.items">
 
  <!-- Before the first chat item is displayed, show the agent change info if the agent of the first response is different from the selected agent. -->
@@ -51,4 +47,9 @@
  {{ 'ttyg.chat_panel.btn.ask.label ' | translate }}
  </button>
  </div>
+
+ <div class="messages-hint text-muted" ng-if="!loadingChat && chat.chatHistory.isEmpty() && !askingChatItem" ng-cloak>
+ <div class="hint1" ng-bind-html="'ttyg.chat_panel.hint1' | htmlTranslate"></div>
+ <div class="hint2" ng-bind="'ttyg.chat_panel.hint2' | translate"></div>
+ </div>
 </div>
diff --git a/test-cypress/fixtures/locale-en.json b/test-cypress/fixtures/locale-en.json
@@ -276,7 +276,8 @@
  }
  },
  "chat_panel": {
- "hint": "Talk to your graph – simply ask a question!",
+ "hint1": "<b>GRAPH</b>WISE – AI THRIVES ON WHOLE DATA",
+ "hint2": "Simply ask a question!",
  "deleted_agent": "<span class=\"text-warning\"><i class=\"fa-regular fa-triangle-exclamation fa-xs\"></i> deleted agent</span>",
  "btn": {
  "ask": {