merge latest

api/models/schema/convoSchema.js

@@ -9,10 +9,6 @@ const convoSchema = mongoose.Schema(
       index: true,
       meiliIndex: true
     },
-    parentMessageId: {
-      type: String,
-      required: true
-    },
     title: {
       type: String,
       default: 'New Chat',

client/package.json

@@ -33,6 +33,7 @@
     "axios": "^1.3.4",
     "class-variance-authority": "^0.4.0",
     "clsx": "^1.2.1",
+    "copy-to-clipboard": "^3.3.3",
     "crypto-browserify": "^3.12.0",
     "lodash": "^4.17.21",
     "lucide-react": "^0.113.0",

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

@@ -0,0 +1,69 @@
+import React from 'react';
+import { useRecoilValue, useRecoilState } from 'recoil';
+import { cn } from '~/utils';
+import { Tabs, TabsList, TabsTrigger } from '../../ui/Tabs.tsx';
+
+import store from '~/store';
+
+function BingAIOptions() {
+  const [conversation, setConversation] = useRecoilState(store.conversation) || {};
+  const { endpoint, conversationId } = conversation;
+
+  if (endpoint !== 'bingAI') return null;
+  if (conversationId !== 'new') return null;
+
+  const changeHandler = value => {
+    setConversation(prevState => ({ ...prevState, toneStyle: value }));
+  };
+
+  const { toneStyle } = conversation;
+
+  const cardStyle =
+    'shadow-md rounded-md min-w-[75px] font-normal bg-white border-black/10 border dark:bg-gray-700 text-black dark:text-white';
+  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;
+
+  return (
+    <div className={' flex w-full items-center justify-center gap-2'}>
+      <Tabs
+        value={toneStyle}
+        className={
+          cardStyle +
+          ' flex h-[40px] items-center justify-center px-0 hover:bg-slate-50 dark:hover:bg-gray-600'
+        }
+        onValueChange={changeHandler}
+      >
+        <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>
+    </div>
+  );
+}
+
+export default BingAIOptions;

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

@@ -1,15 +1,15 @@
 import React, { useEffect, useState } from 'react';
-import { useSetRecoilState } from 'recoil';
+import { useRecoilState } from 'recoil';
 import ModelSelect from './ModelSelect';
 import { Button } from '../../ui/Button.tsx';
 import Settings from './Settings.jsx';
 
 import store from '~/store';
 
-function OpenAIOptions({ conversation = {} }) {
+function OpenAIOptions() {
-  const { endpoint } = conversation;
   const [advancedMode, setAdvancedMode] = useState(false);
-  const setConversation = useSetRecoilState(store.conversation);
+  const [conversation, setConversation] = useRecoilState(store.conversation) || {};
+  const { endpoint, conversationId } = conversation;
 
   const triggerAdvancedMode = () => setAdvancedMode(prev => !prev);
 
@@ -48,6 +48,7 @@ function OpenAIOptions({ conversation = {} }) {
   }, [conversation, advancedMode]);
 
   if (endpoint !== 'openAI') return null;
+  if (conversationId !== 'new') return null;
 
   const { model } = conversation;
 
@@ -84,12 +85,17 @@ function OpenAIOptions({ conversation = {} }) {
       </div>
       <div
         className={
-          cardStyle +
+          ' openAIOptions-advanced-container absolute bottom-[-10px] flex w-full flex-col items-center justify-center px-4' +
-          ' p-b-[40px] openAIOptions-advanced-container absolute left-4 right-4 bottom-[40px] flex flex-col overflow-hidden rounded-md bg-slate-100 bg-white px-0' +
           (advancedMode ? ' show' : '')
         }
       >
-        <div className="flex w-full items-center justify-between bg-slate-100 px-4 py-2 dark:bg-white/10">
+        <div
+          className={
+            cardStyle +
+            ' flex w-full flex-col overflow-hidden rounded-md border bg-slate-200 px-0 pb-[10px] dark:border-white/10 lg:w-[736px]'
+          }
+        >
+          <div className="flex w-full items-center justify-between bg-slate-100 px-4 py-2 dark:bg-gray-800/60">
             <span className="text-xs font-medium font-normal">Advanced settings for OpenAI endpoint</span>
             <Button
               type="button"
@@ -101,6 +107,7 @@ function OpenAIOptions({ conversation = {} }) {
           </div>
           <div className="h-[375px] p-5"><Settings/></div>
         </div>
+      </div>
     </>
   );
 }

client/src/components/Input/SubmitButton.jsx

@@ -1,35 +1,48 @@
 import React from 'react';
+import StopGeneratingIcon from '../svg/StopGeneratingIcon';
 
-export default function SubmitButton({ submitMessage, disabled, isSubmitting }) {
+export default function SubmitButton({ submitMessage, handleStopGenerating, disabled, isSubmitting }) {
   const clickHandler = e => {
     e.preventDefault();
     submitMessage();
   };
 
-  if (isSubmitting) {
+  if (isSubmitting)
     return (
       <button
-        className="absolute bottom-0 right-1 h-[100%] w-[40px] rounded-md p-1 text-gray-500 hover:bg-gray-100 disabled:hover:bg-transparent dark:hover:bg-gray-900 dark:hover:text-gray-400 dark:disabled:hover:bg-transparent md:right-2"
+        onClick={handleStopGenerating}
-        disabled
+        type="button"
+        className="group absolute bottom-0 right-0 flex h-[100%] w-[50px] items-center justify-center bg-transparent p-1 text-gray-500"
       >
-        <div className="text-2xl">
+        <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">
-          <span style={{ maxWidth: 5.5, display: 'inline-grid' }}>·</span>
+          <StopGeneratingIcon />
-          <span
-            className="blink"
-            style={{ maxWidth: 5.5, display: 'inline-grid' }}
-          >
-            ·
-          </span>
-          <span
-            className="blink2"
-            style={{ maxWidth: 5.5, display: 'inline-grid' }}
-          >
-            ·
-          </span>
         </div>
       </button>
     );
-  }
+  // // previous three dot animation
+  // return (
+  //   <button
+  //     className="absolute bottom-0 right-1 h-[100%] w-[40px] rounded-md p-1 text-gray-500 hover:bg-gray-100 disabled:hover:bg-transparent dark:hover:bg-gray-900 dark:hover:text-gray-400 dark:disabled:hover:bg-transparent md:right-2"
+  //     disabled
+  //   >
+  //     <div className="text-2xl">
+  //       <span style={{ maxWidth: 5.5, display: 'inline-grid' }}>·</span>
+  //       <span
+  //         className="blink"
+  //         style={{ maxWidth: 5.5, display: 'inline-grid' }}
+  //       >
+  //         ·
+  //       </span>
+  //       <span
+  //         className="blink2"
+  //         style={{ maxWidth: 5.5, display: 'inline-grid' }}
+  //       >
+  //         ·
+  //       </span>
+  //     </div>
+  //   </button>
+  // );
+  else
     return (
       <button
         onClick={clickHandler}

client/src/components/Input/index.jsx

@@ -3,12 +3,11 @@ import { useRecoilValue, useRecoilState } from 'recoil';
 import SubmitButton from './SubmitButton';
 import AdjustToneButton from './AdjustToneButton';
 import OpenAIOptions from './OpenAIOptions';
-import BingStyles from './BingStyles';
+import BingAIOptions from './BingAIOptions';
+// import BingStyles from './BingStyles';
 import EndpointMenu from './Endpoints/EndpointMenu';
 import Footer from './Footer';
 import TextareaAutosize from 'react-textarea-autosize';
-import RegenerateIcon from '../svg/RegenerateIcon';
-import StopGeneratingIcon from '../svg/StopGeneratingIcon';
 import { useMessageHandler } from '../../utils/handleSubmit';
 
 import store from '~/store';
@@ -28,10 +27,10 @@ export default function TextChat({ isSearchView = false }) {
   // TODO: do we need this?
   const disabled = false;
 
-  const { ask, regenerate, stopGenerating } = useMessageHandler();
+  const { ask, stopGenerating } = useMessageHandler();
 
-  const bingStylesRef = useRef(null);
+  // const bingStylesRef = useRef(null);
-  const [showBingToneSetting, setShowBingToneSetting] = useState(false);
+  // const [showBingToneSetting, setShowBingToneSetting] = useState(false);
 
   const isNotAppendable = latestMessage?.cancelled || latestMessage?.error;
 
@@ -41,32 +40,28 @@ export default function TextChat({ isSearchView = false }) {
     setText('');
   }, [conversation?.conversationId]);
 
-  // controls the height of Bing tone style tabs
+  // // controls the height of Bing tone style tabs
-  useEffect(() => {
+  // useEffect(() => {
-    if (!inputRef.current) {
+  //   if (!inputRef.current) {
-      return; // wait for the ref to be available
+  //     return; // wait for the ref to be available
-    }
+  //   }
 
-    const resizeObserver = new ResizeObserver(() => {
+  //   const resizeObserver = new ResizeObserver(() => {
-      const newHeight = inputRef.current.clientHeight;
+  //     const newHeight = inputRef.current.clientHeight;
-      if (newHeight >= 24) {
+  //     if (newHeight >= 24) {
-        // 24 is the default height of the input
+  //       // 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);
+  //   resizeObserver.observe(inputRef.current);
-    return () => resizeObserver.disconnect();
+  //   return () => resizeObserver.disconnect();
-  }, [inputRef]);
+  // }, [inputRef]);
 
   const submitMessage = () => {
     ask({ text });
     setText('');
   };
 
-  const handleRegenerate = () => {
-    if (latestMessage && !latestMessage?.isCreatedByUser) regenerate(latestMessage);
-  };
-
   const handleStopGenerating = () => {
     stopGenerating();
   };
@@ -125,43 +120,24 @@ export default function TextChat({ isSearchView = false }) {
     return '';
   };
 
-  const handleBingToneSetting = () => {
+  // const handleBingToneSetting = () => {
-    setShowBingToneSetting(show => !show);
+  //   setShowBingToneSetting(show => !show);
-  };
+  // };
 
   if (isSearchView) return <></>;
 
   return (
     <>
-      <div className="input-panel md:bg-vert-light-gradient dark:md:bg-vert-dark-gradient fixed bottom-0 left-0 w-full border-t bg-white py-2 dark:border-white/20 dark:bg-gray-800 md:absolute md:border-t-0 md:border-transparent md:bg-transparent md:dark:border-transparent md:dark:bg-transparent">
+      <div className="fixed bottom-0 left-0 w-full md:absolute">
+        <div className="relative py-2 md:mb-[-16px] md:py-4 lg:mb-[-32px]">
+          <span className="ml-1 flex flex-col items-center justify-center gap-0 md:order-none md:m-auto md:w-full md:gap-2">
+            <OpenAIOptions />
+            <BingAIOptions />
+          </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">
           <form className="stretch mx-2 flex flex-row gap-3 last:mb-2 md:pt-2 md:last:mb-6 lg:mx-auto lg:max-w-3xl lg:pt-6">
             <div className="relative flex h-full flex-1 md:flex-col">
-            <span className="order-last ml-1 flex flex-col items-center justify-center gap-0 md:order-none md:m-auto md:mb-2 md:w-full md:gap-2">
-              {isSubmitting ? (
-                <button
-                  onClick={handleStopGenerating}
-                  className="input-panel-button btn btn-neutral flex w-fit justify-center gap-2 border-0 md:border"
-                  type="button"
-                >
-                  <StopGeneratingIcon />
-                  <span className="hidden md:block">Stop generating</span>
-                </button>
-              ) : latestMessage && !latestMessage?.isCreatedByUser ? (
-                <button
-                  onClick={handleRegenerate}
-                  className="input-panel-button btn btn-neutral flex w-fit justify-center gap-2 border-0 md:border"
-                  type="button"
-                >
-                  <RegenerateIcon />
-                  <span className="hidden md:block">Regenerate response</span>
-                </button>
-              ) : null}
-              <OpenAIOptions conversation={conversation} />
-              <BingStyles
-                ref={bingStylesRef}
-                show={showBingToneSetting}
-              />
-            </span>
               <div
                 className={`relative flex flex-grow flex-col rounded-md border border-black/10 ${
                   disabled ? 'bg-gray-100' : 'bg-white'
@@ -188,16 +164,19 @@ export default function TextChat({ isSearchView = false }) {
                 />
                 <SubmitButton
                   submitMessage={submitMessage}
+                  handleStopGenerating={handleStopGenerating}
                   disabled={disabled || isNotAppendable}
+                  isSubmitting={isSubmitting}
                 />
-              {messages?.length && conversation?.model === 'sydney' ? (
+                {/* {messages?.length && conversation?.model === 'sydney' ? (
                   <AdjustToneButton onClick={handleBingToneSetting} />
-              ) : null}
+                ) : null} */}
               </div>
             </div>
           </form>
           <Footer />
         </div>
+      </div>
     </>
   );
 }

client/src/components/Messages/HoverButtons.jsx

@@ -1,26 +1,74 @@
 import React from 'react';
-// import Clipboard from '../svg/Clipboard';
+import Clipboard from '../svg/Clipboard';
 import EditIcon from '../svg/EditIcon';
+import RegenerateIcon from '../svg/RegenerateIcon';
+
+export default function HoverButtons({
+  isEditting,
+  enterEdit,
+  copyToClipboard,
+  conversation,
+  isSubmitting,
+  message,
+  regenerate
+}) {
+  const { endpoint, jailbreak = false } = conversation;
+
+  const branchingSupported =
+    // azureOpenAI, openAI, chatGPTBrowser support branching, so edit enabled
+    !!['azureOpenAI', 'openAI', 'chatGPTBrowser'].find(e => e === endpoint) ||
+    // Sydney in bingAI supports branching, so edit enabled
+    (endpoint === 'bingAI' && jailbreak);
+
+  const editEnabled =
+    !message?.error &&
+    message?.isCreatedByUser &&
+    !message?.searchResult &&
+    !isEditting &&
+    branchingSupported;
+
+  // for now, once branching is supported, regerate will be enabled
+  const regenerateEnabled =
+    !message?.error &&
+    !message?.isCreatedByUser &&
+    !message?.searchResult &&
+    !isEditting &&
+    !isSubmitting &&
+    branchingSupported;
 
-export default function HoverButtons({ visible, onClick, endpoint }) {
-  const enabled = !!['azureOpenAI', 'openAI', 'chatGPTBrowser'].find(e => e === endpoint);
-  console.log(enabled);
   return (
     <div className="visible mt-2 flex justify-center gap-3 self-end text-gray-400 md:gap-4 lg:absolute lg:top-0 lg:right-0 lg:mt-0 lg:translate-x-full lg:gap-1 lg:self-center lg:pl-2">
-      {visible && enabled ? (
+      {editEnabled ? (
-        <>
         <button
-            className="resubmit-edit-button rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible"
+          className="hover-button rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible"
-            onClick={onClick}
+          onClick={enterEdit}
+          type="button"
+          title="edit"
         >
           {/* <button className="rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400"> */}
           <EditIcon />
         </button>
-        </>
       ) : null}
-      {/* <button className="rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400">
+      {regenerateEnabled ? (
+        <button
+          className="hover-button rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible"
+          onClick={regenerate}
+          type="button"
+          title="regenerate"
+        >
+          {/* <button className="rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400"> */}
+          <RegenerateIcon />
+        </button>
+      ) : null}
+
+      <button
+        className="hover-button rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible"
+        onClick={copyToClipboard}
+        type="button"
+        title="copy to clipboard"
+      >
         <Clipboard />
-        </button> */}
+      </button>
     </div>
   );
 }

client/src/components/Messages/Message.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { useRecoilValue, useSetRecoilState, useResetRecoilState } from 'recoil';
+import copy from 'copy-to-clipboard';
 import SubRow from './Content/SubRow';
 import Content from './Content/Content';
 import MultiMessage from './MultiMessage';
@@ -29,7 +30,7 @@ export default function Message({
   const textEditor = useRef(null);
   const last = !message?.children?.length;
   const edit = message.messageId == currentEditId;
-  const { ask } = useMessageHandler();
+  const { ask, regenerate } = useMessageHandler();
   const { switchToConversation } = store.useConversation();
   const blinker = submitting && isSubmitting;
 
@@ -87,6 +88,14 @@ export default function Message({
     enterEdit(true);
   };
 
+  const regenerateMessage = () => {
+    if (!isSubmitting && !message?.isCreatedByUser) regenerate(message);
+  };
+
+  const copyToClipboard = () => {
+    copy(message?.text);
+  };
+
   const clickSearchResult = async () => {
     if (!searchResult) return;
     const convoResponse = await fetchById('convos', message.conversationId);
@@ -177,9 +186,13 @@ export default function Message({
               )}
             </div>
             <HoverButtons
-              endpoint={conversation?.endpoint}
+              isEditting={edit}
-              visible={!error && isCreatedByUser && !edit && !searchResult}
+              isSubmitting={isSubmitting}
-              onClick={() => enterEdit()}
+              message={message}
+              conversation={conversation}
+              enterEdit={() => enterEdit()}
+              regenerate={() => regenerateMessage()}
+              copyToClipboard={() => copyToClipboard()}
             />
             <SubRow subclasses="switch-container">
               <SiblingSwitch

client/src/components/svg/RegenerateIcon.jsx

@@ -5,11 +5,11 @@ export default function Regenerate() {
     <svg
       stroke="currentColor"
       fill="none"
-    strokeWidth="1.5"
+      strokeWidth="2"
       viewBox="0 0 24 24"
       strokeLinecap="round"
       strokeLinejoin="round"
-    className="h-3 w-3"
+      className="h-4 w-4"
       height="1em"
       width="1em"
       xmlns="http://www.w3.org/2000/svg"

client/src/components/svg/StopGeneratingIcon.jsx

@@ -2,6 +2,26 @@ import React from 'react';
 
 export default function StopGeneratingIcon() {
   return (
-    <svg stroke="currentColor" fill="none" strokeWidth="1.5" viewBox="0 0 24 24" strokeLinecap="round" strokeLinejoin="round" className="h-3 w-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect></svg>
+    <svg
+      stroke="currentColor"
+      fill="none"
+      strokeWidth="2.5"
+      viewBox="0 0 24 24"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="h-3 w-3"
+      height="1em"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        x="3"
+        y="3"
+        width="18"
+        height="18"
+        rx="2"
+        ry="2"
+      ></rect>
+    </svg>
   );
 }

client/src/mobile.css

@@ -45,7 +45,7 @@
     display: none;
   }
 
-  .resubmit-edit-button {
+  .hover-button {
     display: block;
     visibility: visible;
   }