Merge pull request #124 from danny-avila/bing-styles

Bing styles

Author: danny-avila

api/app/clients/bingai.js

@@ -2,7 +2,7 @@ require('dotenv').config();
 const { KeyvFile } = require('keyv-file');
 
 const askBing = async ({ text, onProgress, convo }) => {
-  const { BingAIClient } = (await import('@waylaidwanderer/chatgpt-api'));
+  const { BingAIClient } = await import('@waylaidwanderer/chatgpt-api');
 
   const bingAIClient = new BingAIClient({
     // "_U" cookie from bing.com
@@ -11,16 +11,23 @@ const askBing = async ({ text, onProgress, convo }) => {
     // cookies: '',
     debug: false,
     cache: { store: new KeyvFile({ filename: './data/cache.json' }) },
-    proxy: process.env.PROXY || null,
+    proxy: process.env.PROXY || null
   });
 
   let options = { onProgress };
   if (convo) {
     options = { ...options, ...convo };
   }
 
-  if (options?.jailbreakConversationId == 'false')
-    options.jailbreakConversationId = false
+  if (options?.jailbreakConversationId == 'false') {
+    options.jailbreakConversationId = false;
+  }
+
+  if (convo.toneStyle) {
+    options.toneStyle = convo.toneStyle;
+  }
+
+  console.log('bing options', options);
 
   const res = await bingAIClient.sendMessage(text, options);
 

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/package-lock.json

@@ -23,7 +23,7 @@
     "@radix-ui/react-dialog": "^1.0.2",
     "@radix-ui/react-dropdown-menu": "^2.0.2",
     "@radix-ui/react-label": "^2.0.0",
-    "@radix-ui/react-tabs": "^1.0.2",
+    "@radix-ui/react-tabs": "^1.0.3",
     "@reduxjs/toolkit": "^1.9.2",
     "axios": "^1.3.4",
     "class-variance-authority": "^0.4.0",
@@ -51,6 +51,7 @@
     "swr": "^2.0.3",
     "tailwind-merge": "^1.9.1",
     "tailwindcss-animate": "^1.0.5",
+    "tailwindcss-radix": "^2.8.0",
     "url": "^0.11.0",
     "uuidv4": "^6.2.13"
   },

client/package.json

@@ -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/Conversation.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/Conversations/index.jsx

@@ -0,0 +1,61 @@
+import React, { useState, useEffect, forwardRef } from 'react';
+import { Tabs, TabsList, TabsTrigger } from '../ui/Tabs.tsx';
+import { useDispatch, useSelector } from 'react-redux';
+import { setConversation } from '~/store/convoSlice';
+
+function BingStyles(props, ref) {
+  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';
+  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] dark:bg-gray-700 text-black';
+  const defaultSelected = defaultClasses + 'font-medium data-[state=active]:text-white';
+
+  const selectedClass = (val) => val + '-tab ' + defaultSelected;
+
+  const changeHandler = value => {
+    setValue(value);
+    dispatch(setConversation({ toneStyle: value }));
+  };
+  return (
+    <Tabs
+      defaultValue={value}
+      className={`shadow-md mb-1 bing-styles ${show ? 'show' : ''}`}
+      onValueChange={changeHandler}
+      ref={ref}
+    >
+      <TabsList className="bg-white/[.60] dark:bg-gray-700">
+        <TabsTrigger
+          value="creative"
+          className={`${value === 'creative' ? selectedClass(value) : defaultClasses}`}
+        >
+          {'Creative'}
+        </TabsTrigger>
+        <TabsTrigger
+          value="fast"
+          className={`${value === 'fast' ? selectedClass(value) : defaultClasses}`}
+        >
+          {'Balanced'}
+        </TabsTrigger>
+        <TabsTrigger
+          value="precise"
+          className={`${value === 'precise' ? selectedClass(value) : defaultClasses}`}
+        >
+          {'Precise'}
+        </TabsTrigger>
+      </TabsList>
+    </Tabs>
+  );
+}
+
+export default forwardRef(BingStyles);

client/src/components/Main/BingStyles.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+export default function RowButton({ onClick, children, text, className }) {
+  return (
+    <button
+      onClick={onClick}
+      className={`input-panel-button btn btn-neutral flex justify-center gap-2 border-0 md:border ${className}`}
+      type="button"
+    >
+      {children}
+      <span className="hidden md:block">{text}</span> 
+      {/* <RegenerateIcon />
+<span className="hidden md:block">Regenerate response</span> */}
+    </button>
+  );
+}