Fix Input losing focus (#382)

* fix(PaLM2): input losing focus on message stream ending

* fix(askOpenAI.js): fix typo in variable name from newUserMassageId to newUserMessageId

* feat(chatgpt-browser.js, askBingAI.js, askChatGPTBrowser.js): add onEventMessage callback to browserClient

Add onEventMessage callback to browserClient to handle event messages from the server. In askChatGPTBrowser.js, add a getPartialMessage variable to store the partial message text. In askBingAI.js, fix a typo in the variable name newUserMassageId to newUserMessageId. In askChatGPTBrowser.js, remove the preSendRequest parameter and move the sendMessage call to the onEventMessage callback. In askChatGPTBrowser.js, add a check for null or undefined value of getPartialMessage before appending it to the error message.

* fix(bing): input no longer loses input focus as convoId is persisted from beginning of convo

* refactor(Input): remove unused code and fix input autofocus
feat(package.json): add e2e:test-auth script to test authentication flow with saved storage

api/server/routes/ask/askBingAI.js

@@ -129,10 +129,15 @@ const ask = async ({
       }
     });
     const abortController = new AbortController();
+    let bingConversationId = null;
+    if (!isNewConversation) {
+      const convo = await getConvo(req.user.id, conversationId);
+      bingConversationId = convo.bingConversationId;
+    }
     let response = await askBing({
       text,
       parentMessageId: userParentMessageId,
-      conversationId,
+      conversationId: bingConversationId ?? conversationId,
       ...endpointOption,
       onProgress: progressCallback.call(null, {
         res,
@@ -147,7 +152,7 @@ const ask = async ({
     const newConversationId = endpointOption?.jailbreak
       ? response.jailbreakConversationId
       : response.conversationId || conversationId;
-    const newUserMassageId =
+    const newUserMessageId =
       response.parentMessageId || response.details.requestId || userMessageId;
     const newResponseMessageId = response.messageId || response.details.messageId;
 
@@ -156,10 +161,11 @@ const ask = async ({
       response.response || response.details.spokenText || '**Bing refused to answer.**';
 
     let responseMessage = {
-      conversationId: newConversationId,
+      conversationId,
+      bingConversationId: newConversationId,
       messageId: responseMessageId,
       newMessageId: newResponseMessageId,
-      parentMessageId: overrideParentMessageId || newUserMassageId,
+      parentMessageId: overrideParentMessageId || newUserMessageId,
       sender: endpointOption?.jailbreak ? 'Sydney' : 'BingAI',
       text: await handleText(response, true),
       suggestions:
@@ -173,31 +179,7 @@ const ask = async ({
     await saveMessage(responseMessage);
     responseMessage.messageId = newResponseMessageId;
 
-    // STEP2 update the convosation.
-
-    // First update conversationId if needed
-    // Note!
-    // Bing API will not use our conversationId at the first time,
-    // so change the placeholder conversationId to the real one.
-    // Attition: the api will also create new conversationId while using invalid userMessage.parentMessageId,
-    // but in this situation, don't change the conversationId, but create new convo.
-
-    let conversationUpdate = { conversationId: newConversationId, endpoint: 'bingAI' };
-    if (conversationId != newConversationId)
-      if (isNewConversation) {
-        // change the conversationId to new one
-        conversationUpdate = {
-          ...conversationUpdate,
-          conversationId: conversationId,
-          newConversationId: newConversationId
-        };
-      } else {
-        // create new conversation
-        conversationUpdate = {
-          ...conversationUpdate,
-          ...endpointOption
-        };
-      }
+    let conversationUpdate = { conversationId, bingConversationId: newConversationId, endpoint: 'bingAI' };
 
     if (endpointOption?.jailbreak) {
       conversationUpdate.jailbreak = true;
@@ -210,20 +192,16 @@ const ask = async ({
     }
 
     await saveConvo(req.user.id, conversationUpdate);
-    conversationId = newConversationId;
-
-    // STEP3 update the user message
-    userMessage.conversationId = newConversationId;
-    userMessage.messageId = newUserMassageId;
+    userMessage.messageId = newUserMessageId;
 
     // If response has parentMessageId, the fake userMessage.messageId should be updated to the real one.
     if (!overrideParentMessageId)
       await saveMessage({
         ...userMessage,
         messageId: userMessageId,
-        newMessageId: newUserMassageId
+        newMessageId: newUserMessageId
       });
-    userMessageId = newUserMassageId;
+    userMessageId = newUserMessageId;
 
     sendMessage(res, {
       title: await getConvoTitle(req.user.id, conversationId),

api/server/routes/ask/askChatGPTBrowser.js

@@ -76,7 +76,6 @@ const ask = async ({
   userMessage,
   endpointOption,
   conversationId,
-  preSendRequest = true,
   overrideParentMessageId = null,
   req,
   res
@@ -92,10 +91,8 @@ const ask = async ({
     'X-Accel-Buffering': 'no'
   });
 
-  if (preSendRequest) sendMessage(res, { message: userMessage, created: true });
-
   let responseMessageId = crypto.randomUUID();
-
+  let getPartialMessage = null;
   try {
     let lastSavedTimestamp = 0;
     const { onProgress: progressCallback, getPartialText } = createOnProgress({
@@ -116,15 +113,30 @@ const ask = async ({
         }
       }
     });
+
+    getPartialMessage = getPartialText;
     const abortController = new AbortController();
     let response = await browserClient({
       text,
       parentMessageId: userParentMessageId,
       conversationId,
       ...endpointOption,
-      onProgress: progressCallback.call(null, { res, text }),
       abortController,
-      userId
+      userId,
+      onProgress: progressCallback.call(null, { res, text }),
+      onEventMessage: (eventMessage) => {
+        let data = null;
+        try {
+          data = JSON.parse(eventMessage.data);
+        } catch (e) {
+          return;
+        }
+
+        sendMessage(res, {
+          message: { ...userMessage, conversationId: data.conversation_id },
+          created: true
+        });
+      }
     });
 
     console.log('CLIENT RESPONSE', response);
@@ -212,8 +224,8 @@ const ask = async ({
       parentMessageId: overrideParentMessageId || userMessageId,
       unfinished: false,
       cancelled: false,
-      error: true,
-      text: error.message
+      // error: true,
+      text: `${getPartialMessage() ?? ''}\n\nError message: "${error.message}"`
     };
     await saveMessage(errorMessage);
     handleError(res, errorMessage);

api/server/routes/ask/askGoogle.js

@@ -1,5 +1,6 @@
 const express = require('express');
 const router = express.Router();
+const crypto = require('crypto');
 const { titleConvo } = require('../../../app/');
 const GoogleClient = require('../../../app/google/GoogleClient');
 const { saveMessage, getConvoTitle, saveConvo, getConvo } = require('../../../models');
@@ -7,7 +8,7 @@ const { handleError, sendMessage, createOnProgress } = require('./handlers');
 const requireJwtAuth = require('../../../middleware/requireJwtAuth');
 
 router.post('/', requireJwtAuth, async (req, res) => {
-  const { endpoint, text, parentMessageId, conversationId } = req.body;
+  const { endpoint, text, parentMessageId, conversationId: oldConversationId } = req.body;
   if (text.length === 0) return handleError(res, { text: 'Prompt empty or too short' });
   if (endpoint !== 'google') return handleError(res, { text: 'Illegal request' });
 
@@ -31,6 +32,8 @@ router.post('/', requireJwtAuth, async (req, res) => {
     return handleError(res, { text: `Illegal request: model` });
   }
 
+  const conversationId = oldConversationId || crypto.randomUUID();
+
   // eslint-disable-next-line no-use-before-define
   return await ask({
     text,
@@ -64,6 +67,8 @@ const ask = async ({ text, endpointOption, parentMessageId = null, conversationI
       if (!conversationId) {
         conversationId = data.conversationId;
       }
+
+      sendMessage(res, { message: userMessage, created: true });
     };
 
     const { onProgress: progressCallback } = createOnProgress({

api/server/routes/ask/askOpenAI.js

@@ -190,7 +190,7 @@ const ask = async ({
     console.log('CLIENT RESPONSE', response);
 
     const newConversationId = response.conversationId || conversationId;
-    const newUserMassageId = response.parentMessageId || userMessageId;
+    const newUserMessageId = response.parentMessageId || userMessageId;
     const newResponseMessageId = response.messageId;
 
     // STEP1 generate response message
@@ -200,7 +200,7 @@ const ask = async ({
       conversationId: newConversationId,
       messageId: responseMessageId,
       newMessageId: newResponseMessageId,
-      parentMessageId: overrideParentMessageId || newUserMassageId,
+      parentMessageId: overrideParentMessageId || newUserMessageId,
       text: await handleText(response),
       sender: endpointOption?.chatGptLabel || 'ChatGPT',
       unfinished: false,
@@ -234,16 +234,16 @@ const ask = async ({
 
     // STEP3 update the user message
     userMessage.conversationId = newConversationId;
-    userMessage.messageId = newUserMassageId;
+    userMessage.messageId = newUserMessageId;
 
     // If response has parentMessageId, the fake userMessage.messageId should be updated to the real one.
     if (!overrideParentMessageId)
       await saveMessage({
         ...userMessage,
         messageId: userMessageId,
-        newMessageId: newUserMassageId
+        newMessageId: newUserMessageId
       });
-    userMessageId = newUserMassageId;
+    userMessageId = newUserMessageId;
 
     sendMessage(res, {
       title: await getConvoTitle(req.user.id, conversationId),