complete customGpt

src/components/Conversations/Conversation.jsx

@@ -3,6 +3,7 @@ import RenameButton from './RenameButton';
 import DeleteButton from './DeleteButton';
 import { useDispatch } from 'react-redux';
 import { setConversation } from '~/store/convoSlice';
+import { setCustomGpt, setModel } from '~/store/submitSlice';
 import { setMessages } from '~/store/messageSlice';
 import { setText } from '~/store/textSlice';
 import manualSWR from '~/utils/fetchers';
@@ -15,7 +16,7 @@ export default function Conversation({
   title = 'New conversation',
   bingData,
   chatGptLabel = null,
-  promptPrefix = null,
+  promptPrefix = null
 }) {
   const [renaming, setRenaming] = useState(false);
   const [titleInput, setTitleInput] = useState(title);
@@ -54,7 +55,15 @@ export default function Conversation({
       );
     }
     const data = await trigger();
+
+    if (chatGptLabel) {
+      dispatch(setModel('chatgptCustom'));
+    } else {
+      dispatch(setModel(data[1].sender));
+    }
+
     dispatch(setMessages(data));
+    dispatch(setCustomGpt(convo));
     dispatch(setText(''));
   };
 

src/components/Models/MenuItems.jsx

@@ -1,7 +1,4 @@
 import React from 'react';
-// import { setModel, setDisabled } from '~/store/submitSlice';
-// import { swr } from '~/utils/fetchers';
-// import { setModels } from '~/store/modelSlice';
 import ModelItem from './ModelItem';
 
 export default function MenuItems({ models }) {
@@ -10,7 +7,6 @@ export default function MenuItems({ models }) {
       {models.map((modelItem, i) => (
         <ModelItem
           key={i}
-          // id={modelItem._id}
           modelName={modelItem.name}
           value={modelItem.value}
         />

src/components/Models/ModelDialog.jsx

@@ -1,4 +1,3 @@
-// import React, { useState, useEffect, useRef } from 'react';
 import React, { useState, useRef } from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
 import { useDispatch } from 'react-redux';

src/components/Models/ModelMenu.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { setModel, setDisabled, setCustomGpt } from '~/store/submitSlice';
 import { setConversation } from '~/store/convoSlice';
@@ -10,8 +10,6 @@ import GPTIcon from '../svg/GPTIcon';
 import BingIcon from '../svg/BingIcon';
 import { Button } from '../ui/Button.tsx';
 
-const initial = new Set(['chatgpt', 'chatgptCustom', 'bingai', 'chatgptBrowser']);
-
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -26,15 +24,8 @@ import { Dialog } from '../ui/Dialog.tsx';
 export default function ModelMenu() {
   const dispatch = useDispatch();
   const { model } = useSelector((state) => state.submit);
-  const { models } = useSelector((state) => state.models);
-  const modelMap = new Map(
-    models
-      .slice(4)
-      .map((modelItem) => [
-        modelItem.value,
-        { chatGptLabel: modelItem.chatGptLabel, promptPrefix: modelItem.promptPrefix }
-      ])
-  );
+  const [customModel, setCustomModel] = useState(false);
+  const { models, modelMap, initial } = useSelector((state) => state.models);
   const { trigger } = manualSWR('http://localhost:3050/customGpts', 'get', (res) => {
     console.log('models data (response)', res);
     if (models.length + res.length === models.length) {
@@ -51,7 +42,7 @@ export default function ModelMenu() {
 
   useEffect(() => {
     const lastSelected = JSON.parse(localStorage.getItem('model'));
-    if (lastSelected && lastSelected !== 'chatgptCustom' && initial.has(lastSelected)) {
+    if (lastSelected && lastSelected !== 'chatgptCustom' && initial[lastSelected]) {
       dispatch(setModel(lastSelected));
     }
 
@@ -75,17 +66,16 @@ export default function ModelMenu() {
       return;
     } else if (value === 'chatgptCustom') {
       // dispatch(setMessages([]));
-    } else {
+    } else if (initial[value]) {
       dispatch(setModel(value));
       dispatch(setDisabled(false));
-    }
-
-    if (!initial.has(value)) {
-    const chatGptLabel = modelMap.get(value)?.chatGptLabel;
-    const promptPrefix = modelMap.get(value)?.promptPrefix;
-
+      setCustomModel(false);
+    } else if (!initial[value]) {
+      const chatGptLabel = modelMap[value]?.chatGptLabel;
+      const promptPrefix = modelMap[value]?.promptPrefix;
       dispatch(setCustomGpt({ chatGptLabel, promptPrefix }));
       dispatch(setModel('chatgptCustom'));
+      setCustomModel(value);
     }
 
     // Set new conversation
@@ -141,7 +131,7 @@ export default function ModelMenu() {
           <DropdownMenuLabel>Select a Model</DropdownMenuLabel>
           <DropdownMenuSeparator />
           <DropdownMenuRadioGroup
-            value={model}
+            value={customModel ? customModel : model}
             onValueChange={onChange}
             className="overflow-y-auto"
           >

src/components/main/TextChat.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import SubmitButton from './SubmitButton';
 import Regenerate from './Regenerate';
-import ModelMenu from './ModelMenu';
+import ModelMenu from '../Models/ModelMenu';
 import Footer from './Footer';
 import TextareaAutosize from 'react-textarea-autosize';
 import handleSubmit from '~/utils/handleSubmit';
@@ -15,9 +15,13 @@ export default function TextChat({ messages }) {
   const [errorMessage, setErrorMessage] = useState('');
   const dispatch = useDispatch();
   const convo = useSelector((state) => state.convo);
-  const { isSubmitting, disabled, model, chatGptLabel, promptPrefix } = useSelector((state) => state.submit);
+  const { initial } = useSelector((state) => state.models);
+  const { isSubmitting, disabled, model, chatGptLabel, promptPrefix } = useSelector(
+    (state) => state.submit
+  );
   const { text } = useSelector((state) => state.text);
   const { error } = convo;
+  const isCustomModel = model === 'chatgptCustom' || !initial[model];
 
   const submitMessage = () => {
     if (error) {
@@ -30,7 +34,7 @@ export default function TextChat({ messages }) {
     dispatch(setSubmitState(true));
     const message = text.trim();
     const currentMsg = { sender: 'User', text: message, current: true };
-    const sender = model === 'chatgptCustom' ? chatGptLabel : model
+    const sender = model === 'chatgptCustom' ? chatGptLabel : model;
     const initialResponse = { sender, text: '' };
     dispatch(setMessages([...messages, currentMsg, initialResponse]));
     dispatch(setText(''));
@@ -39,11 +43,7 @@ export default function TextChat({ messages }) {
     };
     const convoHandler = (data) => {
       dispatch(
-        setMessages([
-          ...messages,
-          currentMsg,
-          { sender, text: data.text || data.response }
-        ])
+        setMessages([...messages, currentMsg, { sender, text: data.text || data.response }])
       );
 
       if (
@@ -60,8 +60,8 @@ export default function TextChat({ messages }) {
             conversationSignature: null,
             clientId: null,
             invocationId: null,
-            chatGptLabel: model === 'chatgptCustom' ? chatGptLabel : null,
-            promptPrefix: model === 'chatgptCustom' ? promptPrefix : null,
+            chatGptLabel: model === isCustomModel ? chatGptLabel : null,
+            promptPrefix: model === isCustomModel ? promptPrefix : null
           })
         );
       } else if (

src/store/modelSlice.js

@@ -22,7 +22,9 @@ const initialState = {
       name: 'ChatGPT',
       value: 'chatgptBrowser'
     }
-  ]
+  ],
+  modelMap: {},
+  initial: { chatgpt: true, chatgptCustom: true, bingai: true, chatgptBrowser: true }
 };
 
 const currentSlice = createSlice({
@@ -31,7 +33,18 @@ const currentSlice = createSlice({
   reducers: {
     setModels: (state, action) => {
       console.log('setModels', action.payload);
-      state.models = [...initialState.models, ...action.payload];
+      const models = [...initialState.models, ...action.payload];
+      state.models = models;
+      const modelMap = {};
+
+      models.slice(4).forEach((modelItem) => {
+        modelMap[modelItem.value] = {
+          chatGptLabel: modelItem.chatGptLabel,
+          promptPrefix: modelItem.promptPrefix
+        };
+      });
+
+      state.modelMap = modelMap;
     }
   }
 });

src/store/submitSlice.js

@@ -22,7 +22,6 @@ const currentSlice = createSlice({
       state.model = action.payload;
     },
     setCustomGpt: (state, action) => {
-      console.log('setCustomGpt', action.payload);
       state.promptPrefix = action.payload.promptPrefix;
       state.chatGptLabel = action.payload.chatGptLabel;
     },

src/style.css

@@ -809,7 +809,7 @@ button {
 }
 
 ::-webkit-scrollbar {
-  height: 1rem;
+  height: 0.85em;
   width: 0.5rem;
 }