TTYG process chat run step by step + UX improvements (#1636)

* TTYG process chat run step by step + UX improvements

## What
- Process chat answers step by step and provide immediate feedback to user
- Improved loader in chat list
- Cleaned up logic for new chat flow
- Small fixes here and there

## Why
- Better usability
- Better look

## How
- Use new API endpoint for continuing a chat run
- CSS changes to align things properly

Note: needs backend changes from the ttyg-continue-chat-run branch to use the continue flow but will work as before with branches before that is merged.

Note: tests don't test the new continue flow yet.

* TTYG process chat run step by step + UX improvements
- added padding on messages-hint block

* Fixes the event name in a javadoc

* Sets the question timestamp when the ask button is clicked. When a question is asked, it is added to the list of chats, and a tooltip shows when the question was asked. If the timestamp is not set, the tooltip will be incorrect until the chat is reloaded.

* Resets the waitingForLastMessage flag if continueChatRun fails, to prevent blocking the UI.

---------

Co-authored-by: Pavel Mihaylov <pavel@ontotext.com>
Co-authored-by: boyantonchev <boyan.tonchev@ontotext.com>
Co-authored-by: boyan-tonchev <108174872+boyan-tonchev@users.noreply.github.com>

src/css/ttyg/chat-panel.css

@@ -65,6 +65,7 @@
 }
 
 .chat-panel .messages-hint {
+    padding-top: 1rem;
     text-align: center;
 }
 
@@ -128,7 +129,6 @@
 
 .chat-panel .new-question {
     width: 100%;
-    padding: 0 1rem;
 }
 
 .chat-panel .new-question .question-input {
@@ -137,7 +137,7 @@
 }
 
 .chat-panel .chat-loading {
-    margin-top: 100px;
+    margin: auto;
 }
 
 .chat-panel .text-warning {

src/css/ttyg/ttyg.css

@@ -3,7 +3,9 @@
     --toolbar-height: 37px;
     /* the gap between user and agent as well as between agent and agent messages */
     --message-gap: 1.5rem;
-    --chat-panel-height-offset: 13em;
+    --chat-height-vh-reduce: 12rem;
+    --chat-min-height: 300px;
+    --chat-panel-vh-reduce: 4rem;
 }
 
 @media (max-width: 1440px) {
@@ -125,25 +127,22 @@ chat area
 }
 
 .ttyg-view .chat-content .toolbar {
-    margin: auto;
+    /*margin: auto;*/
     padding: 0 1rem;
 }
 
 .ttyg-view .chat-content .chat {
     max-width: calc(800px + 2rem);
     margin: auto;
-    height: calc(100vh - var(--chat-panel-height-offset));
+    height: calc(100vh - var(--chat-height-vh-reduce));
+    min-height: var(--chat-min-height);
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
 }
 
 .ttyg-view .chat-content .chat .selected-chat-panel {
-    height: calc(100vh - var(--chat-panel-height-offset));
-}
-
-.ttyg-view.help-visible .chat-content .chat .selected-chat-panel {
-    height: calc(100vh - var(--chat-panel-height-offset) + 3em);
+    height: calc(100vh - var(--chat-height-vh-reduce) - var(--chat-panel-vh-reduce));
+    min-height: calc(var(--chat-min-height) - var(--chat-panel-vh-reduce)) ;
 }
 
 .ttyg-view .controls {
@@ -154,3 +153,15 @@ chat area
 .ttyg-view agent-select-menu {
     width: 300px;
 }
+
+.ttyg-view .chat-list-panel-loader {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: calc(100% - var(--toolbar-height))
+}
+
+.ttyg-view .chat-list-panel-loader > div {
+    display: flex;
+    font-weight: 400;
+}

src/js/angular/core/services/ttyg.service.js

@@ -69,6 +69,17 @@ function TTYGService(TTYGRestService, $repositories) {
             .then((response) => chatAnswerModelMapper(response.data));
     };
 
+    /**
+     * Continues a chat run. In essence continue means "fetch more answers".
+     * @param {ContinueChatRun} continueData .
+     * @return {Promise<ChatAnswerModel>} the next answer in the run.
+     */
+    const continueChatRun = (continueData) => {
+        const payload = continueData.toContinueRunRequestPayload();
+        return TTYGRestService.continueChatRun(payload)
+            .then((response) => chatAnswerModelMapper(response.data));
+    };
+
     /**
      * Deletes a conversation by its ID.
      * @param {string} id
@@ -174,6 +185,7 @@ function TTYGService(TTYGRestService, $repositories) {
         renameConversation,
         exportConversation,
         askQuestion,
+        continueChatRun,
         getConversations,
         deleteConversation,
         createConversation,

src/js/angular/models/ttyg/chat-answer.js

@@ -19,6 +19,11 @@ export class ChatAnswerModel {
          * @type {ChatMessageModel[]}
          */
         this._messages = data.messages || [];
+
+        /**
+         * @type {string}
+         */
+        this._continueRunId = data.continueRunId;
     }
 
     get chatId() {
@@ -52,4 +57,36 @@ export class ChatAnswerModel {
     set messages(value) {
         this._messages = value;
     }
+
+    get continueRunId() {
+        return this._continueRunId;
+    }
+
+    set continueRunId(value) {
+        this._continueRunId = value;
+    }
+}
+
+/**
+ * Represents information on continuing the chat run, i.e., fetching answers iteratively after
+ * asking until the last answer is received.
+ */
+export class ContinueChatRun {
+    constructor(chatItem, runId) {
+        this._chatItem = chatItem;
+        this._runId = runId;
+    }
+
+    get chatId() {
+        return this._chatItem.chatId;
+    }
+
+    toContinueRunRequestPayload() {
+        return {
+            conversationId: this.chatId,
+            runId: this._runId,
+            lastMessageId: this._chatItem.answers[this._chatItem.answers.length - 1].id,
+            agentId: this._chatItem.agentId
+        };
+    }
 }

src/js/angular/models/ttyg/chats.js

@@ -1,6 +1,15 @@
 import {ChatItemsListModel} from "./chat-item";
+import {md5HashGenerator} from "../../utils/hash-utils";
 
 export class ChatModel {
+    static getEmptyChat() {
+        const data = {
+            name: "\u00B7 \u00B7 \u00B7",
+            timestamp: Math.floor(Date.now() / 1000)
+        };
+        return new ChatModel(data, md5HashGenerator());
+    }
+
     constructor(data, hashGenerator) {
         this.hashGenerator = hashGenerator;
 
@@ -148,9 +157,21 @@ export class ChatsListModel {
         const chat = this._chats.find((c) => c.id === chatId);
         if (chat) {
             chat.timestamp = timestamp;
+            this.sortByTime();
+            this.updateChatsByDay();
+        }
+    }
+
+    /**
+     * Updates the name of a chat in the list.
+     * @param {string} chatId
+     * @param {string} name
+     */
+    updateChatName(chatId, name) {
+        const chat = this._chats.find((c) => c.id === chatId);
+        if (chat) {
+            chat.name = name;
         }
-        this.sortByTime();
-        this.updateChatsByDay();
     }
 
     /**

src/js/angular/rest/ttyg.rest.service.fake.backend.js

@@ -94,6 +94,10 @@ export class TtygRestServiceFakeBackend {
         // return new Promise((resolve, reject) => setTimeout(() => reject(''), ASK_DELAY));
     }
 
+    continueChatRun(data) {
+        alert("continueChatRun() not implemented");
+    }
+
     deleteConversation(id) {
         this.conversations = this.conversations.filter((conversation) => conversation.id !== id);
         return new Promise((resolve) => setTimeout(() => resolve(), DELETE_DELAY));

src/js/angular/rest/ttyg.rest.service.js

@@ -75,6 +75,18 @@ function TTYGRestService($http) {
         return $http.post(`${CONVERSATIONS_ENDPOINT}`, data);
     };
 
+    /**
+     * Calls the REST API to continue a chat run.
+     * @param {*} data
+     * @return {*}
+     */
+    const continueChatRun = (data) => {
+        if (DEVELOPMENT) {
+            return _fakeBackend.continueChatRun(data);
+        }
+        return $http.post(`${CONVERSATIONS_ENDPOINT}/continue`, data);
+    };
+
     /**
      * Deletes a conversation by its ID.
      * @param {string} id
@@ -186,6 +198,7 @@ function TTYGRestService($http) {
         renameConversation,
         exportConversation,
         askQuestion,
+        continueChatRun,
         getConversations,
         deleteConversation,
         createConversation,