fix(BingAI): show censored message, fix toneStyle UI bug (#644)

* fix(frontend/BingAI): prevent Settings from not showing on new conversation, also prevent showing toneStyle change without jailbreak

* fix(Input/index.jsx): fix typo in comment, change "also prevents toneStyle change without jailbreak" to "also prevents showing toneStyle change without jailbreak"

* fix(BingAI): show message despite censor trigger

api/server/routes/ask/bingAI.js

@@ -108,32 +108,33 @@ const ask = async ({
 
   if (preSendRequest) sendMessage(res, { message: userMessage, created: true });
 
+  let lastSavedTimestamp = 0;
+  const { onProgress: progressCallback, getPartialText } = createOnProgress({
+    onProgress: ({ text }) => {
+      const currentTimestamp = Date.now();
+      if (currentTimestamp - lastSavedTimestamp > 500) {
+        lastSavedTimestamp = currentTimestamp;
+        saveMessage({
+          messageId: responseMessageId,
+          sender: endpointOption?.jailbreak ? 'Sydney' : 'BingAI',
+          conversationId,
+          parentMessageId: overrideParentMessageId || userMessageId,
+          text: text,
+          unfinished: true,
+          cancelled: false,
+          error: false,
+        });
+      }
+    },
+  });
+  const abortController = new AbortController();
+  let bingConversationId = null;
+  if (!isNewConversation) {
+    const convo = await getConvo(req.user.id, conversationId);
+    bingConversationId = convo.bingConversationId;
+  }
+
   try {
-    let lastSavedTimestamp = 0;
-    const { onProgress: progressCallback } = createOnProgress({
-      onProgress: ({ text }) => {
-        const currentTimestamp = Date.now();
-        if (currentTimestamp - lastSavedTimestamp > 500) {
-          lastSavedTimestamp = currentTimestamp;
-          saveMessage({
-            messageId: responseMessageId,
-            sender: endpointOption?.jailbreak ? 'Sydney' : 'BingAI',
-            conversationId,
-            parentMessageId: overrideParentMessageId || userMessageId,
-            text: text,
-            unfinished: true,
-            cancelled: false,
-            error: false,
-          });
-        }
-      },
-    });
-    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,
@@ -160,6 +161,13 @@ const ask = async ({
     response.text =
       response.response || response.details.spokenText || '**Bing refused to answer.**';
 
+    const partialText = getPartialText();
+    let unfinished = false;
+    if (partialText?.length > response.text.length) {
+      response.text = partialText;
+      unfinished = true;
+    }
+
     let responseMessage = {
       conversationId,
       bingConversationId: newConversationId,
@@ -171,7 +179,7 @@ const ask = async ({
       suggestions:
         response.details.suggestedResponses &&
         response.details.suggestedResponses.map((s) => s.text),
-      unfinished: false,
+      unfinished,
       cancelled: false,
       error: false,
     };
@@ -179,7 +187,11 @@ const ask = async ({
     await saveMessage(responseMessage);
     responseMessage.messageId = newResponseMessageId;
 
-    let conversationUpdate = { conversationId, bingConversationId: newConversationId, endpoint: 'bingAI' };
+    let conversationUpdate = {
+      conversationId,
+      bingConversationId: newConversationId,
+      endpoint: 'bingAI',
+    };
 
     if (endpointOption?.jailbreak) {
       conversationUpdate.jailbreak = true;
@@ -224,19 +236,45 @@ const ask = async ({
       });
     }
   } catch (error) {
-    console.log(error);
-    const errorMessage = {
-      messageId: responseMessageId,
-      sender: endpointOption?.jailbreak ? 'Sydney' : 'BingAI',
-      conversationId,
-      parentMessageId: overrideParentMessageId || userMessageId,
-      unfinished: false,
-      cancelled: false,
-      error: true,
-      text: error.message,
-    };
-    await saveMessage(errorMessage);
-    handleError(res, errorMessage);
+    console.error(error);
+    const partialText = getPartialText();
+    if (partialText?.length > 2) {
+      const responseMessage = {
+        messageId: responseMessageId,
+        sender: endpointOption?.jailbreak ? 'Sydney' : 'BingAI',
+        conversationId,
+        parentMessageId: overrideParentMessageId || userMessageId,
+        text: partialText,
+        model: endpointOption.modelOptions.model,
+        unfinished: true,
+        cancelled: false,
+        error: false,
+      };
+
+      saveMessage(responseMessage);
+
+      return {
+        title: await getConvoTitle(req.user.id, conversationId),
+        final: true,
+        conversation: await getConvo(req.user.id, conversationId),
+        requestMessage: userMessage,
+        responseMessage: responseMessage,
+      };
+    } else {
+      console.log(error);
+      const errorMessage = {
+        messageId: responseMessageId,
+        sender: endpointOption?.jailbreak ? 'Sydney' : 'BingAI',
+        conversationId,
+        parentMessageId: overrideParentMessageId || userMessageId,
+        unfinished: false,
+        cancelled: false,
+        error: true,
+        text: error.message,
+      };
+      await saveMessage(errorMessage);
+      handleError(res, errorMessage);
+    }
   }
 };
 

api/server/routes/ask/index.js

@@ -4,7 +4,7 @@ const router = express.Router();
 // const askOpenAI = require('./askOpenAI');
 const openAI = require('./openAI');
 const google = require('./google');
-const askBingAI = require('./askBingAI');
+const bingAI = require('./bingAI');
 const gptPlugins = require('./gptPlugins');
 const askChatGPTBrowser = require('./askChatGPTBrowser');
 const anthropic = require('./anthropic');
@@ -12,7 +12,7 @@ const anthropic = require('./anthropic');
 // router.use('/azureOpenAI', askAzureOpenAI);
 router.use(['/azureOpenAI', '/openAI'], openAI);
 router.use('/google', google);
-router.use('/bingAI', askBingAI);
+router.use('/bingAI', bingAI);
 router.use('/chatGPTBrowser', askChatGPTBrowser);
 router.use('/gptPlugins', gptPlugins);
 router.use('/anthropic', anthropic);

client/src/components/Input/AdjustToneButton.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Settings2 } from 'lucide-react';
-export default function AdjustButton({ onClick }) {
+export default function AdjustToneButton({ onClick }) {
   const clickHandler = (e) => {
     e.preventDefault();
     onClick();

client/src/components/Input/index.jsx

@@ -11,7 +11,7 @@ import NewConversationMenu from './NewConversationMenu';
 import AdjustToneButton from './AdjustToneButton';
 import Footer from './Footer';
 import TextareaAutosize from 'react-textarea-autosize';
-import { useMessageHandler } from '../../utils/handleSubmit';
+import { useMessageHandler } from '~/utils/handleSubmit';
 
 import store from '~/store';
 
@@ -36,8 +36,20 @@ export default function TextChat({ isSearchView = false }) {
 
   // auto focus to input, when enter a conversation.
   useEffect(() => {
-    if (conversation?.conversationId !== 'search') inputRef.current?.focus();
-  }, [conversation?.conversationId]);
+    const { conversationId } = conversation || {};
+    if (!conversationId) {
+      return;
+    }
+
+    // Prevents Settings from not showing on new conversation, also prevents showing toneStyle change without jailbreak
+    if (conversationId === 'new' || !conversation?.jailbreak) {
+      setShowBingToneSetting(false);
+    }
+
+    if (conversationId !== 'search') {
+      inputRef.current?.focus();
+    }
+  }, [conversation]);
 
   useEffect(() => {
     const timeoutId = setTimeout(() => {
@@ -146,7 +158,7 @@ export default function TextChat({ isSearchView = false }) {
               >
                 <NewConversationMenu />
                 <TextareaAutosize
-                // set test id for e2e testing
+                  // set test id for e2e testing
                   data-testid="text-input"
                   tabIndex="0"
                   autoFocus

client/src/components/Messages/Message.jsx

@@ -209,7 +209,9 @@ export default function Message({
                   {!isSubmitting && unfinished ? (
                     <div className="flex flex min-h-[20px] flex-grow flex-col items-start gap-2 gap-4  text-red-500">
                       <div className="rounded-md border border-blue-400 bg-blue-500/10 px-3 py-2 text-sm text-gray-600 dark:text-gray-100">
-                        {'This is an unfinished message. The AI may still be generating a response or it was aborted. Refresh or visit later to see more updates.'}
+                        {
+                          'This is an unfinished message. The AI may still be generating a response, it was aborted, or a censor was triggered. Refresh or visit later to see more updates.'
+                        }
                       </div>
                     </div>
                   ) : null}