Fixed handling of multi-round prompt discussions and minor UI fixes

chat_client/static/css/klatchatNano.css

@@ -437,4 +437,4 @@ background-color: darkblue;
 
 .modal, .modal-backdrop {
 position: absolute !important;
-}
+}

chat_client/static/js/builder_utils.js

@@ -177,12 +177,12 @@ async function buildSubmindHTML(promptID, submindID, submindUserData, submindRes
     }
 
     const phaseDataObjectMapping = {
-        'response': submindResponse,
-        'vote': submindVote
+        'response': submindResponse  || emptyAnswer,
+        'vote': submindVote || emptyAnswer
     }
     let promptParticipantTemplate;
     // Fallback to the single-discussion rounds
-    if (!Array.isArray(submindOpinions)) {
+    if (!discussionRounds || discussionRounds === 1) {
         phaseDataObjectMapping['opinion'] = submindOpinions;
         promptParticipantTemplate = 'prompt_participant'
     }else{
@@ -213,13 +213,16 @@ async function buildSubmindHTML(promptID, submindID, submindUserData, submindRes
  */
 function buildSubmindDiscussionHTML(promptID, userNickname, submindOpinions, discussionRounds) {
     let html = '';
-    for (let i = 0; i < discussionRounds; i++){
+    if (!submindOpinions){
+        submindOpinions = [];
+    }
+    for (let i = 1; i <= discussionRounds; i++){
         let opinion;
         // means that discussion phases were skipped
-        if (i > submindOpinions.length - 1){
+        if (i > submindOpinions.length){
             opinion = {}
         } else {
-            opinion = submindOpinions[i];
+            opinion = submindOpinions[i - 1];
         }
 
         const createdOnTS = opinion?.created_on
@@ -243,15 +246,25 @@ function buildSubmindDiscussionHTML(promptID, userNickname, submindOpinions, dis
  * @param winner_response - shout of the winner
  */
 async function buildPromptWinnerHTML(nickname, winner_response) {
-    return `
-    <div class="d-flex flex-column align-items-center justify-content-center">
-        <span class="mt-2 mb-3 font-weight-bold">Selected winner</span>
-        ${await buildPromptParticipantIcon(nickname)}
-        <div style="max-width: 400px; margin-top: 20px;">
-            ${winner_response}
-        </div>
-    </div>
-    `
+    let html;
+    if (nickname){
+        html = `
+            <div class="d-flex flex-column align-items-center justify-content-center">
+                <span class="mt-2 mb-3 font-weight-bold">Selected winner</span>
+                ${await buildPromptParticipantIcon(nickname)}
+                <div style="max-width: 400px; margin-top: 20px;">
+                    ${winner_response}
+                </div>
+            </div>
+        `
+    }else{
+        html = `
+            <div class="d-flex flex-column align-items-center justify-content-center" style="font-weight: normal">
+                Consensus not reached.
+            </div>
+        `
+    }
+    return html;
 }
 
 /**
@@ -369,6 +382,12 @@ async function buildPromptHTML(prompt) {
         promptData['winner'] = 'Consensus not reached.'
     }
 
+    let tableRowLength = 4;
+
+    if (discussionRounds){
+        tableRowLength += discussionRounds - 1;
+    }
+
     const discussionsHeader = !discussionRounds
         ? `<th data-rtc-resizable="discussion">Discussion</th>`
         : Array.from({ length: discussionRounds }, (_, i) =>
@@ -381,7 +400,8 @@ async function buildPromptHTML(prompt) {
         'prompt_id': prompt['_id'],
         'cid': prompt['cid'],
         'discussions_header': discussionsHeader,
-        'message_time': prompt['created_on']
+        'message_time': prompt['created_on'],
+        'tr_length': tableRowLength
     });
 }
 

chat_client/static/js/chat_utils.js

@@ -387,7 +387,7 @@ async function buildConversation(conversationData, skin, remember=true,conversat
  * @param maxResults - max number of messages to fetch
  * @returns {Promise<{}>} promise resolving conversation data returned
  */
-async function getConversationDataByInput(input, skin, oldestMessageTS=null, maxResults=10){
+async function getConversationDataByInput(input, skin, oldestMessageTS=null, maxResults=30){
     let conversationData = {};
     if(input){
         let query_url = `chat_api/search/${input.toString()}?limit_chat_history=${maxResults}&skin=${skin}`;
@@ -696,7 +696,7 @@ async function displayConversation(searchStr, skin=CONVERSATION_SKINS.PROMPTS, a
     }
     else if (searchStr !== "") {
         const alertParent = document.getElementById(alertParentID || conversationParentID);
-        await getConversationDataByInput(searchStr, skin, null, 10).then(async conversationData => {
+        await getConversationDataByInput(searchStr, skin, null).then(async conversationData => {
             let responseOk = false;
             if (!conversationData || Object.keys(conversationData).length === 0){
                 displayAlert(

chat_client/static/js/klatchatNano.js

@@ -4071,4 +4071,4 @@ const initKlatChat = (options) => {
     document.addEventListener('DOMContentLoaded', (e) => {
         return new NanoBuilder(options);
     })
-};
+};

chat_client/static/js/message_utils.js

@@ -106,25 +106,29 @@ const getUserPromptTR = (promptID, userID) => {
 
 /**
  * Adds prompt message of specified user id
- * @param cid: target conversation id
- * @param userID: target submind user id
- * @param messageText: message of submind
- * @param promptId: target prompt id
- * @param promptState: prompt state to consider
+ * @param cid - target conversation id
+ * @param userID - target submind user id
+ * @param messageText - message of submind
+ * @param promptId - target prompt id
+ * @param promptState - prompt state to consider
+ * @param promptContext - associated prompt's context
  */
-async function addPromptMessage(cid, userID, messageText, promptId, promptState){
+async function addPromptMessage(cid, userID, messageText, promptId, promptState, promptContext){
     const tableBody = document.getElementById(`${promptId}_tbody`);
     if (await getCurrentSkin(cid) === CONVERSATION_SKINS.PROMPTS){
         try {
             const userData = await getUserData(userID);
             promptState = PROMPT_STATES[promptState].toLowerCase();
             if (!getUserPromptTR(promptId, userID)) {
-                const newUserRow = await buildSubmindHTML(promptId, userID, userData, '', '', '');
+                const newUserRow = await buildSubmindHTML(promptId, userID, userData, '', '', '', promptContext?.discussion_rounds);
                 tableBody.insertAdjacentHTML('beforeend', newUserRow);
             }
             try {
-                console.log("userData:", userData)
-                const messageElem = document.getElementById(`${promptId}_${userData['nickname']}_${promptState}`);
+                let messageElemId = `${promptId}_${userData['nickname']}_${promptState}`
+                if (promptState === "disc" && promptContext?.discussion_rounds > 1 && promptContext?.discussion_counter){
+                    messageElemId += `_${promptContext?.discussion_counter}`
+                }
+                const messageElem = document.getElementById(messageElemId);
                 messageElem.innerText = messageText;
             } catch (e) {
                 console.warn(`Failed to add prompt message (${cid},${userID}, ${messageText}, ${promptId}, ${promptState}) - ${e}`)
@@ -182,7 +186,7 @@ async function addOldMessages(cid, skin=CONVERSATION_SKINS.BASE) {
             const firstMessageItem = messageContainer.children[i];
             const oldestMessageTS = await DBGateway.getInstance(DB_TABLES.CHAT_MESSAGES_PAGINATION).getItem(cid).then(res=> res?.oldest_created_on || null);
             if (oldestMessageTS) {
-                const numMessages = await getCurrentSkin(cid) === CONVERSATION_SKINS.PROMPTS? 30: 10;
+                const numMessages = await getCurrentSkin(cid) === CONVERSATION_SKINS.PROMPTS? 50: 10;
                 await getConversationDataByInput( cid, skin, oldestMessageTS, numMessages ).then( async conversationData => {
                     if (messageContainer) {
                         const userMessageList = getUserMessages( conversationData, null );

chat_client/static/js/sio.js

@@ -72,7 +72,7 @@ function initSIO(){
     });
 
     socket.on('new_prompt_message', async (message) => {
-        await addPromptMessage(message['cid'], message['userID'], message['messageText'], message['promptID'], message['promptState'])
+        await addPromptMessage(message['cid'], message['userID'], message['messageText'], message['promptID'], message['promptState'], message?.context)
                 .catch(err => console.error('Error occurred while adding new prompt data: ', err));
     });
 
@@ -82,9 +82,17 @@ function initSIO(){
         console.info(`setting prompt_id=${promptID} as completed`);
         if (promptElem){
             const promptWinner = document.getElementById(`${promptID}_winner`);
-            const winner_response = document.getElementById(`${promptID}_${data['winner']}_resp`).innerText;
-            console.log("data:", data)
-            promptWinner.innerHTML = await buildPromptWinnerHTML(data['winner'], winner_response);
+            let winnerResponse;
+            if (data?.winner){
+                const winnerRespHTML = document.getElementById(`${promptID}_${data.winner}_resp`);
+                if (winnerRespHTML) {
+                    winnerResponse = winnerRespHTML.innerText;
+                }
+            }
+            if (!winnerResponse){
+                winnerResponse = "Consensus not reached."
+            }
+            promptWinner.innerHTML = await buildPromptWinnerHTML(data['winner'], winnerResponse);
         }else {
             console.warn(`Failed to get HTML element from prompt_id=${promptID}`);
         }

chat_client/templates/components/prompt_table.html

@@ -2,7 +2,7 @@
     <table class="data table table-bordered prompt-table" data-rtc-resizable-table="table.one" id="{prompt_id}">
         <thead>
             <tr>
-                <th colspan="4">Prompt: "{prompt_text}"</th>
+                <th colspan="{tr_length}">Prompt: "{prompt_text}"</th>
             </tr>
             <tr>
                 <th data-rtc-resizable="subminds">Submind</th>
@@ -15,7 +15,7 @@
             {prompt_participants_data}
         </tbody>
         <tr>
-            <th colspan="4" id="{prompt_id}_winner" style="font-weight: normal">{selected_winner}</th>
+            <th colspan="{tr_length}" id="{prompt_id}_winner" style="font-weight: normal">{selected_winner}</th>
         </tr>
     </table>
 </li>

requirements/requirements.txt

@@ -2,7 +2,7 @@ cachetools==5.5.0
 fastapi==0.115.6
 httpx==0.28.1  # required by FastAPI
 Jinja2==3.1.4
-klatchat-utils~=0.0,>=0.0.1a1
+klatchat-utils~=0.0,>=0.0.1a2
 neon_utils[sentry]~=1.12
 python-multipart==0.0.9
 requests==2.32.3