Merge pull request #160 from HyunggyuJang/sydney/tone-adjustable

Make sydney tone adjustable during conversation

client/src/components/Input/AdjustToneButton.jsx

@@ -7,7 +7,7 @@ export default function AdjustButton({ onClick }) {
   return (
     <button
       onClick={clickHandler}
-      className="group absolute bottom-11 -right-11 flex h-[100%] w-[50px] items-center justify-center bg-transparent p-1 text-gray-500 md:bottom-0"
+      className="group absolute bottom-11 right-0 flex h-[100%] w-[50px] items-center justify-center bg-transparent p-1 text-gray-500 lg:bottom-0 lg:-right-11"
     >
       <div className="m-1 mr-0 rounded-md p-2 pt-[10px] pb-[10px] group-hover:bg-gray-100 group-disabled:hover:bg-transparent dark:group-hover:bg-gray-900 dark:group-hover:text-gray-400 dark:group-disabled:hover:bg-transparent">
         <svg

client/src/components/Input/BingAIOptions/index.jsx

@@ -11,7 +11,7 @@ import SaveAsPresetDialog from '../../Endpoints/SaveAsPresetDialog';
 
 import store from '~/store';
 
-function BingAIOptions() {
+function BingAIOptions({ show }) {
   const [conversation, setConversation] = useRecoilState(store.conversation) || {};
   const [advancedMode, setAdvancedMode] = useState(false);
   const [saveAsDialogShow, setSaveAsDialogShow] = useState(false);
@@ -19,7 +19,7 @@ function BingAIOptions() {
   const { toneStyle, context, systemMessage, jailbreak } = conversation;
 
   if (endpoint !== 'bingAI') return null;
-  if (conversationId !== 'new') return null;
+  if (conversationId !== 'new' && !show) return null;
 
   const triggerAdvancedMode = () => setAdvancedMode(prev => !prev);
 
@@ -64,7 +64,8 @@ function BingAIOptions() {
           showLabel={false}
           className={cn(
             cardStyle,
-            'min-w-36 z-50 flex h-[40px] w-36 flex-none items-center justify-center px-4 ring-0 hover:cursor-pointer hover:bg-slate-50 focus:ring-0 focus:ring-offset-0 data-[state=open]:bg-slate-50 dark:bg-gray-700 dark:hover:bg-gray-600 dark:data-[state=open]:bg-gray-600'
+            'min-w-36 z-50 flex h-[40px] w-36 flex-none items-center justify-center px-4 ring-0 hover:cursor-pointer hover:bg-slate-50 focus:ring-0 focus:ring-offset-0 data-[state=open]:bg-slate-50 dark:bg-gray-700 dark:hover:bg-gray-600 dark:data-[state=open]:bg-gray-600',
+            show ? 'hidden' : null
           )}
         />
 
@@ -107,7 +108,8 @@ function BingAIOptions() {
           type="button"
           className={cn(
             cardStyle,
-            'min-w-4 z-50 flex h-[40px] flex-none items-center justify-center px-4 hover:bg-slate-50 focus:ring-0 focus:ring-offset-0 dark:hover:bg-gray-600'
+            'min-w-4 z-50 flex h-[40px] flex-none items-center justify-center px-4 hover:bg-slate-50 focus:ring-0 focus:ring-offset-0 dark:hover:bg-gray-600',
+            show ? 'hidden' : null
           )}
           onClick={triggerAdvancedMode}
         >

client/src/components/Input/BingStyles.jsx

@@ -1,63 +0,0 @@
-import React, { useState, useEffect, forwardRef } from 'react';
-import { Tabs, TabsList, TabsTrigger } from '../ui/Tabs.tsx';
-import { useRecoilValue, useRecoilState } from 'recoil';
-import { cn } from '../../utils';
-
-import store from '~/store';
-
-function BingStyles(props, ref) {
-  const [conversation, setConversation] = useRecoilState(store.conversation) || {};
-  const { endpoint, conversationId, jailbreak, toneStyle } = conversation;
-  const messages = useRecoilValue(store.messages);
-
-  const isBing = endpoint === 'bingAI';
-
-  const show = isBing && (!conversationId || messages?.length === 0 || props.show);
-  const defaultClasses =
-    'p-2 rounded-md min-w-[75px] font-normal bg-white/[.60] dark:bg-gray-700 text-black text-xs';
-  const defaultSelected = cn(defaultClasses, 'font-medium data-[state=active]:text-white text-xs text-white');
-
-  const selectedClass = val => val + '-tab ' + defaultSelected;
-
-  const changeHandler = value => {
-    setConversation(prevState => ({ ...prevState, toneStyle: value }));
-  };
-
-  return (
-    <Tabs
-      value={toneStyle}
-      className={`bing-styles mb-1 shadow-md ${show ? 'show' : ''}`}
-      onValueChange={changeHandler}
-      ref={ref}
-    >
-      <TabsList className="bg-white/[.60] dark:bg-gray-700">
-        <TabsTrigger
-          value="creative"
-          className={`${toneStyle === 'creative' ? selectedClass('creative') : defaultClasses}`}
-        >
-          {'Creative'}
-        </TabsTrigger>
-        <TabsTrigger
-          value="fast"
-          className={`${toneStyle === 'fast' ? selectedClass('fast') : defaultClasses}`}
-        >
-          {'Fast'}
-        </TabsTrigger>
-        <TabsTrigger
-          value="balanced"
-          className={`${toneStyle === 'balanced' ? selectedClass('balanced') : defaultClasses}`}
-        >
-          {'Balanced'}
-        </TabsTrigger>
-        <TabsTrigger
-          value="precise"
-          className={`${toneStyle === 'precise' ? selectedClass('precise') : defaultClasses}`}
-        >
-          {'Precise'}
-        </TabsTrigger>
-      </TabsList>
-    </Tabs>
-  );
-}
-
-export default forwardRef(BingStyles);

client/src/components/Input/index.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useRecoilValue, useRecoilState } from 'recoil';
 import SubmitButton from './SubmitButton';
 import OpenAIOptions from './OpenAIOptions';
@@ -6,6 +6,7 @@ import ChatGPTOptions from './ChatGPTOptions';
 import BingAIOptions from './BingAIOptions';
 // import BingStyles from './BingStyles';
 import NewConversationMenu from './NewConversationMenu';
+import AdjustToneButton from './AdjustToneButton';
 import Footer from './Footer';
 import TextareaAutosize from 'react-textarea-autosize';
 import { useMessageHandler } from '../../utils/handleSubmit';
@@ -29,7 +30,7 @@ export default function TextChat({ isSearchView = false }) {
   const { ask, stopGenerating } = useMessageHandler();
 
   // const bingStylesRef = useRef(null);
-  // const [showBingToneSetting, setShowBingToneSetting] = useState(false);
+  const [showBingToneSetting, setShowBingToneSetting] = useState(false);
 
   const isNotAppendable = latestMessage?.cancelled || latestMessage?.error;
 
@@ -49,7 +50,7 @@ export default function TextChat({ isSearchView = false }) {
   //     const newHeight = inputRef.current.clientHeight;
   //     if (newHeight >= 24) {
   //       // 24 is the default height of the input
-  //       // bingStylesRef.current.style.bottom = 15 + newHeight + 'px';
+  //       bingStylesRef.current.style.bottom = 15 + newHeight + 'px';
   //     }
   //   });
   //   resizeObserver.observe(inputRef.current);
@@ -119,9 +120,9 @@ export default function TextChat({ isSearchView = false }) {
     return '';
   };
 
-  // const handleBingToneSetting = () => {
-  //   setShowBingToneSetting(show => !show);
-  // };
+  const handleBingToneSetting = () => {
+    setShowBingToneSetting(show => !show);
+  };
 
   if (isSearchView) return <></>;
 
@@ -132,7 +133,7 @@ export default function TextChat({ isSearchView = false }) {
           <span className="flex w-full flex-col items-center justify-center gap-0 md:order-none md:m-auto md:gap-2">
             <OpenAIOptions />
             <ChatGPTOptions />
-            <BingAIOptions />
+            <BingAIOptions show={showBingToneSetting} />
           </span>
         </div>
         <div className="input-panel md:bg-vert-light-gradient dark:md:bg-vert-dark-gradient relative w-full border-t bg-white py-2 dark:border-white/20 dark:bg-gray-800 md:border-t-0 md:border-transparent md:bg-transparent md:dark:border-transparent md:dark:bg-transparent">
@@ -168,9 +169,9 @@ export default function TextChat({ isSearchView = false }) {
                   disabled={disabled || isNotAppendable}
                   isSubmitting={isSubmitting}
                 />
-                {/* {messages?.length && conversation?.model === 'sydney' ? (
+                {latestMessage && conversation?.jailbreak && conversation.endpoint === 'bingAI' ? (
                   <AdjustToneButton onClick={handleBingToneSetting} />
-                ) : null} */}
+                ) : null}
               </div>
             </div>
           </form>