diff --git a/src/components/Conversations/Conversation.jsx b/src/components/Conversations/Conversation.jsx index ff74e96a13..17ad16eec7 100644 --- a/src/components/Conversations/Conversation.jsx +++ b/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('')); }; diff --git a/src/components/main/MenuItems.jsx b/src/components/Models/MenuItems.jsx similarity index 62% rename from src/components/main/MenuItems.jsx rename to src/components/Models/MenuItems.jsx index fb8d5cdd3e..399dd9e87f 100644 --- a/src/components/main/MenuItems.jsx +++ b/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) => ( diff --git a/src/components/main/ModelDialog.jsx b/src/components/Models/ModelDialog.jsx similarity index 98% rename from src/components/main/ModelDialog.jsx rename to src/components/Models/ModelDialog.jsx index 26b16d60cf..0379fc1386 100644 --- a/src/components/main/ModelDialog.jsx +++ b/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'; diff --git a/src/components/main/ModelItem.jsx b/src/components/Models/ModelItem.jsx similarity index 100% rename from src/components/main/ModelItem.jsx rename to src/components/Models/ModelItem.jsx diff --git a/src/components/main/ModelMenu.jsx b/src/components/Models/ModelMenu.jsx similarity index 84% rename from src/components/main/ModelMenu.jsx rename to src/components/Models/ModelMenu.jsx index fe621b4f12..69a8c76c68 100644 --- a/src/components/main/ModelMenu.jsx +++ b/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; - - dispatch(setCustomGpt({ chatGptLabel, promptPrefix })); - dispatch(setModel('chatgptCustom')); + 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() { Select a Model diff --git a/src/components/main/TextChat.jsx b/src/components/main/TextChat.jsx index 5aaf0bfe58..34c49750b9 100644 --- a/src/components/main/TextChat.jsx +++ b/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 ( diff --git a/src/store/modelSlice.js b/src/store/modelSlice.js index bb37880d44..473d0dc407 100644 --- a/src/store/modelSlice.js +++ b/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; } } }); diff --git a/src/store/submitSlice.js b/src/store/submitSlice.js index a2f7e77b7a..835c0b2496 100644 --- a/src/store/submitSlice.js +++ b/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; }, diff --git a/src/style.css b/src/style.css index 932291ce12..7fd5ad79b6 100644 --- a/src/style.css +++ b/src/style.css @@ -809,7 +809,7 @@ button { } ::-webkit-scrollbar { - height: 1rem; + height: 0.85em; width: 0.5rem; }