feat: new endpoint-style structure in client side

NOT FINISHED. model menu and icon and send message not work.

client/src/components/Messages/HoverButtons.jsx

@@ -2,21 +2,22 @@ import React from 'react';
 // import Clipboard from '../svg/Clipboard';
 import EditIcon from '../svg/EditIcon';
 
-export default function HoverButtons({ visible, onClick, model }) {
-  const isBing = model === 'bingai';
-  const enabled = !isBing;
+export default function HoverButtons({ visible, onClick, endpoint }) {
+  const enabled = endpoint in ['azureOpenAI', 'openAI', 'chatGPTBrowser'];
 
   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)?(
+      {visible && enabled ? (
         <>
-          <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" 
-            onClick={onClick}>
+          <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"
+            onClick={onClick}
+          >
             {/* <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}
+      ) : 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">
           <Clipboard />
         </button> */}

client/src/components/Messages/Message.jsx

@@ -6,7 +6,7 @@ import MultiMessage from './MultiMessage';
 import HoverButtons from './HoverButtons';
 import SiblingSwitch from './SiblingSwitch';
 import { fetchById } from '~/utils/fetchers';
-import { getIconOfModel } from '~/utils';
+import { getIconOfAi } from '~/utils';
 import { useMessageHandler } from '~/utils/handleSubmit';
 
 import store from '~/store';
@@ -23,32 +23,15 @@ export default function Message({
 }) {
   const isSubmitting = useRecoilValue(store.isSubmitting);
   const setLatestMessage = useSetRecoilState(store.latestMessage);
-  const { model, chatGptLabel, promptPrefix } = conversation;
+  // const { model, chatGptLabel, promptPrefix } = conversation;
   const [abortScroll, setAbort] = useState(false);
-  const {
-    sender,
-    text,
-    searchResult,
-    isCreatedByUser,
-    error,
-    submitting,
-    model: messageModel,
-    chatGptLabel: messageChatGptLabel,
-    searchResult: isSearchResult
-  } = message;
+  const { text, searchResult, isCreatedByUser, error, submitting } = message;
   const textEditor = useRef(null);
   const last = !message?.children?.length;
   const edit = message.messageId == currentEditId;
   const { ask } = useMessageHandler();
   const { switchToConversation } = store.useConversation();
   const blinker = submitting && isSubmitting;
-  const generateCursor = useCallback(() => {
-    if (!blinker) {
-      return '';
-    }
-
-    return <span className="result-streaming">█</span>;
-  }, [blinker]);
 
   useEffect(() => {
     if (blinker && !abortScroll) {
@@ -77,14 +60,9 @@ export default function Message({
       'w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 bg-white dark:text-gray-100 group dark:bg-gray-800'
   };
 
-  const icon = getIconOfModel({
-    sender,
-    isCreatedByUser,
-    model: isSearchResult ? messageModel : model,
-    searchResult,
-    chatGptLabel: isSearchResult ? messageChatGptLabel : chatGptLabel,
-    promptPrefix,
-    error
+  const icon = getIconOfAi({
+    ...conversation,
+    ...message
   });
 
   if (!isCreatedByUser)
@@ -199,7 +177,7 @@ export default function Message({
               )}
             </div>
             <HoverButtons
-              model={model}
+              endpoint={conversation?.endpoint}
               visible={!error && isCreatedByUser && !edit && !searchResult}
               onClick={() => enterEdit()}
             />

client/src/components/Messages/MessageBar.jsx

@@ -1,38 +0,0 @@
-import React, { useRef, useEffect, useState } from 'react';
-
-const MessageBar = ({ children, dynamicProps, handleWheel, clickSearchResult }) => {
-  const ref = useRef(null);
-  const [isVisible, setIsVisible] = useState(false);
-
-  useEffect(() => {
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) {
-          setIsVisible(true);
-          observer.unobserve(ref.current);
-        }
-      },
-      { threshold: 0.1 }
-    );
-
-    observer.observe(ref.current);
-
-    return () => {
-      observer.unobserve(ref.current);
-    };
-  }, []);
-
-  return (
-    <div
-      {...dynamicProps}
-      onWheel={handleWheel}
-      // onClick={clickSearchResult}
-
-      ref={ref}
-    >
-      {isVisible ? children : null}
-    </div>
-  );
-};
-
-export default MessageBar;

client/src/components/Messages/index.jsx

@@ -20,10 +20,10 @@ export default function Messages({ isSearchView = false }) {
   const _messagesTree = isSearchView ? searchResultMessagesTree : messagesTree;
 
   const conversation = useRecoilValue(store.conversation) || {};
-  const { conversationId, model, chatGptLabel, toneStyle } = conversation;
+  const { conversationId, endpoint } = conversation;
 
-  const models = useRecoilValue(store.models) || [];
-  const modelName = models.find(element => element.model == model)?.name;
+  // const models = useRecoilValue(store.models) || [];
+  // const modelName = models.find(element => element.model == model)?.name;
 
   const searchQuery = useRecoilValue(store.searchQuery);
 
@@ -82,9 +82,22 @@ export default function Messages({ isSearchView = false }) {
   const getConversationTitle = () => {
     if (isSearchView) return `Search: ${searchQuery}`;
     else {
-      let _title = `Model: ${modelName}`;
-      if (chatGptLabel) _title += ` of ${chatGptLabel}`;
-      if (toneStyle) _title += ` (${toneStyle})`;
+      let _title = `${endpoint}`;
+
+      if (endpoint === 'azureOpenAI' || endpoint === 'openAI') {
+        const { chatGptLabel, model } = conversation;
+        if (model) _title += `: ${model}`;
+        if (chatGptLabel) _title += ` as ${chatGptLabel}`;
+      } else if (endpoint === 'bingAI') {
+        const { jailbreak, toneStyle } = conversation;
+        if (toneStyle) _title += `: ${toneStyle}`;
+        if (jailbreak) _title += ` as Sydney`;
+      } else if (endpoint === 'chatGPTBrowser') {
+        const { model } = conversation;
+        if (model) _title += `: ${model}`;
+      } else if (endpoint === null) {
+        null;
+      }
       return _title;
     }
   };