feat: complete frontend/backend tone handling

api/app/clients/sydney.js

@@ -22,6 +22,10 @@ const askSydney = async ({ text, onProgress, convo }) => {
     options = { ...options, jailbreakConversationId: convo.jailbreakConversationId, parentMessageId: convo.parentMessageId };
   }
 
+  if (convo.toneStyle) {
+    options.toneStyle = convo.toneStyle;
+  }
+
   console.log('sydney options', options);
 
   const res = await sydneyClient.sendMessage(text, options

api/models/schema/convoSchema.js

@@ -32,6 +32,10 @@ const convoSchema = mongoose.Schema(
     invocationId: {
       type: String
     },
+    toneStyle: {
+      type: String,
+      default: null
+    },
     chatGptLabel: {
       type: String,
       default: null

client/src/components/Conversations/Conversation.jsx

@@ -23,7 +23,6 @@ export default function Conversation({
 }) {
   const [renaming, setRenaming] = useState(false);
   const [titleInput, setTitleInput] = useState(title);
-  const { modelMap } = useSelector((state) => state.models);
   const { stopStream } = useSelector((state) => state.submit);
   const inputRef = useRef(null);
   const dispatch = useDispatch();
@@ -49,7 +48,8 @@ export default function Conversation({
         conversationSignature,
         jailbreakConversationId,
         clientId,
-        invocationId
+        invocationId,
+        toneStyle,
       } = bingData;
       dispatch(
         setConversation({
@@ -59,6 +59,7 @@ export default function Conversation({
           conversationSignature,
           clientId,
           invocationId,
+          toneStyle,
           latestMessage: null
         })
       );
@@ -71,6 +72,7 @@ export default function Conversation({
           conversationSignature: null,
           clientId: null,
           invocationId: null,
+          toneStyle: null,
           latestMessage: null
         })
       );
@@ -85,13 +87,6 @@ export default function Conversation({
       dispatch(setCustomModel(null));
     }
 
-    // if (modelMap[chatGptLabel.toLowerCase()]) {
-    //   console.log('custom model', chatGptLabel);
-    //   dispatch(setCustomModel(chatGptLabel.toLowerCase()));
-    // } else {
-    //   dispatch(setCustomModel(null));
-    // }
-
     dispatch(setMessages(data));
     dispatch(setCustomGpt(convo));
     dispatch(setText(''));

client/src/components/Conversations/index.jsx

@@ -14,7 +14,8 @@ export default function Conversations({ conversations, conversationId, moveToTop
                 conversationSignature: convo.conversationSignature,
                 parentMessageId: convo.parentMessageId || null,
                 clientId: convo.clientId,
-                invocationId: convo.invocationId
+                invocationId: convo.invocationId,
+                toneStyle: convo.toneStyle,
               }
             : null;
 

client/src/components/Main/BingStyles.jsx

@@ -1,14 +1,23 @@
-import React, { useState } from 'react';
-// import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/Tabs";
+import React, { useState, useEffect } from 'react';
 import { Tabs, TabsList, TabsTrigger } from '../ui/Tabs.tsx';
-import { useSelector } from 'react-redux';
-// import RowButton from './RowButton';
+import { useDispatch, useSelector } from 'react-redux';
+import { setConversation } from '~/store/convoSlice';
 
 export default function BingStyles() {
+  const dispatch = useDispatch();
   const [value, setValue] = useState('fast');
   const { model } = useSelector((state) => state.submit);
+  const { conversationId } = useSelector((state) => state.convo);
+  const { messages } = useSelector((state) => state.messages);
+  const isBing = model === 'bingai' || model === 'sydney';
 
-  const show = model === 'bingai' || model === 'sydney';
+  useEffect(() => {
+    if (isBing && !conversationId) {
+      dispatch(setConversation({ toneStyle: value }));
+    }
+  }, [isBing, conversationId, model, value, dispatch]);
+
+  const show = isBing && (!conversationId || messages?.length === 0);
   const defaultClasses = 'p-2 rounded-md font-normal bg-white/[.60] text-black';
   const defaultSelected = defaultClasses + 'font-medium data-[state=active]:text-white';
 
@@ -16,9 +25,9 @@ export default function BingStyles() {
 
   const changeHandler = value => {
     setValue(value);
+    dispatch(setConversation({ toneStyle: value }));
   };
   return (
-    // <div className='styles-container w-full'>
     <Tabs
       defaultValue={value}
       className={`shadow-md mb-1 bing-styles ${show ? 'show' : ''}`}
@@ -29,7 +38,6 @@ export default function BingStyles() {
           value="creative"
           className={`${value === 'creative' ? selectedClass(value) : defaultClasses}`}
         >
-          {/* <RowButton text="creative" /> */}
           {'Creative'}
         </TabsTrigger>
         <TabsTrigger
@@ -46,6 +54,5 @@ export default function BingStyles() {
         </TabsTrigger>
       </TabsList>
     </Tabs>
-    // </div>
   );
 }

client/src/store/convoSlice.js

@@ -9,6 +9,7 @@ const initialState = {
   conversationSignature: null,
   clientId: null,
   invocationId: null,
+  toneStyle: null,
   chatGptLabel: null,
   promptPrefix: null,
   convosLoading: false,
@@ -58,6 +59,7 @@ const currentSlice = createSlice({
       state.conversationSignature = null;
       state.clientId = null;
       state.invocationId = null;
+      state.toneStyle = null;
       state.chatGptLabel = null;
       state.promptPrefix = null;
       state.convosLoading = false;

client/src/utils/createPayload.js

@@ -13,6 +13,10 @@ export default function createPayload({ convo, message }) {
     }
 
   const isBing = model === 'bingai' || model === 'sydney';
+  if (isBing && !convo?.conversationId) {
+    payload.toneStyle = convo.toneStyle || 'fast';
+  }
+  
   if (isBing && convo?.conversationId) {
     payload = {
       ...payload,
@@ -20,7 +24,8 @@ export default function createPayload({ convo, message }) {
       conversationId: convo.conversationId,
       conversationSignature: convo.conversationSignature,
       clientId: convo.clientId,
-      invocationId: convo.invocationId
+      invocationId: convo.invocationId,
+      toneStyle: convo.toneStyle,
     };
   }
 
@@ -28,4 +33,4 @@ export default function createPayload({ convo, message }) {
   server = model === 'bingai' ? server + '/bing' : server;
   server = model === 'sydney' ? server + '/sydney' : server;
   return { server, payload };
-};
+}

client/src/utils/handleSubmit.js

@@ -1,4 +1,3 @@
-import { SSE } from './sse';
 import resetConvo from './resetConvo';
 import { useSelector, useDispatch } from 'react-redux';
 import { setNewConvo } from '~/store/convoSlice';
@@ -14,7 +13,6 @@ const useMessageHandler = () => {
   const { initial } = useSelector((state) => state.models);
   const { messages } = useSelector((state) => state.messages);
   const { model, chatGptLabel, promptPrefix, isSubmitting } = useSelector((state) => state.submit);
-  const { text } = useSelector((state) => state.text);
   const { latestMessage, error } = convo;
 
   const ask = ({ text, parentMessageId=null, conversationId=null, messageId=null}, { isRegenerate=false }={}) => {
@@ -76,7 +74,7 @@ const useMessageHandler = () => {
     if (parentMessage && parentMessage.isCreatedByUser)
       ask({ ...parentMessage }, { isRegenerate: true })
     else
-      console.error('Failed to regenerate the message: parentMessage not found or not created by user.', message);
+      console.error('Failed to regenerate the message: parentMessage not found or not created by user.');
   }
 
   const stopGenerating = () => {
@@ -88,78 +86,79 @@ const useMessageHandler = () => {
 
 export { useMessageHandler };
 
-export default function handleSubmit({
-  model,
-  text,
-  convo,
-  messageHandler,
-  convoHandler,
-  errorHandler,
-  chatGptLabel,
-  promptPrefix
-}) {
-  const endpoint = `/api/ask`;
-  let payload = { model, text, chatGptLabel, promptPrefix };
-  if (convo.conversationId && convo.parentMessageId) {
-    payload = {
-      ...payload,
-      conversationId: convo.conversationId,
-      parentMessageId: convo.parentMessageId
-    };
-  }
+// deprecated
+// export default function handleSubmit({
+//   model,
+//   text,
+//   convo,
+//   messageHandler,
+//   convoHandler,
+//   errorHandler,
+//   chatGptLabel,
+//   promptPrefix
+// }) {
+//   const endpoint = `/api/ask`;
+//   let payload = { model, text, chatGptLabel, promptPrefix };
+//   if (convo.conversationId && convo.parentMessageId) {
+//     payload = {
+//       ...payload,
+//       conversationId: convo.conversationId,
+//       parentMessageId: convo.parentMessageId
+//     };
+//   }
 
-  const isBing = model === 'bingai' || model === 'sydney';
-  if (isBing && convo.conversationId) {
+//   const isBing = model === 'bingai' || model === 'sydney';
+//   if (isBing && convo.conversationId) {
 
-    payload = {
-      ...payload,
-      jailbreakConversationId: convo.jailbreakConversationId,
-      conversationId: convo.conversationId,
-      conversationSignature: convo.conversationSignature,
-      clientId: convo.clientId,
-      invocationId: convo.invocationId,
-    };
-  }
+//     payload = {
+//       ...payload,
+//       jailbreakConversationId: convo.jailbreakConversationId,
+//       conversationId: convo.conversationId,
+//       conversationSignature: convo.conversationSignature,
+//       clientId: convo.clientId,
+//       invocationId: convo.invocationId,
+//     };
+//   }
 
-  let server = endpoint;
-  server = model === 'bingai' ? server + '/bing' : server;
-  server = model === 'sydney' ? server + '/sydney' : server;
+//   let server = endpoint;
+//   server = model === 'bingai' ? server + '/bing' : server;
+//   server = model === 'sydney' ? server + '/sydney' : server;
   
-  const events = new SSE(server, {
-    payload: JSON.stringify(payload),
-    headers: { 'Content-Type': 'application/json' }
-  });
+//   const events = new SSE(server, {
+//     payload: JSON.stringify(payload),
+//     headers: { 'Content-Type': 'application/json' }
+//   });
 
-  events.onopen = function () {
-    console.log('connection is opened');
-  };
+//   events.onopen = function () {
+//     console.log('connection is opened');
+//   };
 
-  events.onmessage = function (e) {
-    const data = JSON.parse(e.data);
-    let text = data.text || data.response;
-    if (data.message) {
-      messageHandler(text, events);
-    }
+//   events.onmessage = function (e) {
+//     const data = JSON.parse(e.data);
+//     let text = data.text || data.response;
+//     if (data.message) {
+//       messageHandler(text, events);
+//     }
 
-    if (data.final) {
-      convoHandler(data);
-      console.log('final', data);
-    } else {
-      // console.log('dataStream', data);
-    }
-  };
+//     if (data.final) {
+//       convoHandler(data);
+//       console.log('final', data);
+//     } else {
+//       // console.log('dataStream', data);
+//     }
+//   };
 
-  events.onerror = function (e) {
-    console.log('error in opening conn.');
-    events.close();
-    errorHandler(e);
-  };
+//   events.onerror = function (e) {
+//     console.log('error in opening conn.');
+//     events.close();
+//     errorHandler(e);
+//   };
 
-  events.addEventListener('stop', () => {
-    // Close the SSE stream
-    console.log('stop event received');
-    events.close();
-  });
+//   events.addEventListener('stop', () => {
+//     // Close the SSE stream
+//     console.log('stop event received');
+//     events.close();
+//   });
 
-  events.stream();
-}
+//   events.stream();
+// }