front and backend logic for model switching

src/components/main/Messages.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useRef } from 'react';
-import Message from './Message';
-import ScrollToBottom from './ScrollToBottom';
 import { CSSTransition } from 'react-transition-group';
+import ScrollToBottom from './ScrollToBottom';
+import Message from './Message';
 
 const Messages = ({ messages }) => {
   const [showScrollButton, setShowScrollButton] = useState(false);
@@ -13,7 +13,7 @@ const Messages = ({ messages }) => {
       const scrollable = scrollableRef.current;
       const hasScrollbar = scrollable.scrollHeight > scrollable.clientHeight;
       setShowScrollButton(hasScrollbar);
-    }, 850);
+    }, 650);
 
     return () => {
       clearTimeout(timeoutId);
@@ -69,7 +69,7 @@ const Messages = ({ messages }) => {
           ))}
           <CSSTransition
             in={showScrollButton}
-            timeout={650}
+            timeout={400}
             classNames="scroll-down"
             unmountOnExit={false}
             appear

src/components/main/ModelMenu.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { setConversation, setError } from '~/store/convoSlice';
+import { setModel } from '~/store/submitSlice';
 import GPTIcon from '../svg/GPTIcon';
 import { DropdownMenuCheckboxItemProps } from '@radix-ui/react-dropdown-menu';
 
@@ -17,7 +17,11 @@ import {
 } from '../ui/DropdownMenu.tsx';
 
 export default function ModelMenu() {
-  const [model, setModel] = useState('chatgpt');
+  const dispatch = useDispatch();
+  const { model } = useSelector((state) => state.submit);
+  const onChange = (value) => {
+    dispatch(setModel(value));
+  };
 
   const defaultColorProps = [
     'text-gray-500',
@@ -57,7 +61,7 @@ export default function ModelMenu() {
         <DropdownMenuSeparator />
         <DropdownMenuRadioGroup
           value={model}
-          onValueChange={setModel}
+          onValueChange={onChange}
         >
           <DropdownMenuRadioItem value="chatgpt">ChatGPT</DropdownMenuRadioItem>
           <DropdownMenuRadioItem value="davinci">Davinci</DropdownMenuRadioItem>

src/components/main/TextChat.jsx

@@ -15,7 +15,7 @@ export default function TextChat({ messages }) {
   const [errorMessage, setErrorMessage] = useState('');
   const dispatch = useDispatch();
   const convo = useSelector((state) => state.convo);
-  const { isSubmitting } = useSelector((state) => state.submit);
+  const { isSubmitting, model } = useSelector((state) => state.submit);
   const { text } = useSelector((state) => state.text);
   const { error } = convo;
 
@@ -28,8 +28,8 @@ export default function TextChat({ messages }) {
       return;
     }
     dispatch(setSubmitState(true));
-    const payload = text.trim();
-    const currentMsg = { sender: 'User', text: payload, current: true };
+    const message = text.trim();
+    const currentMsg = { sender: 'User', text: message, current: true };
     const initialResponse = { sender: 'GPT', text: '' };
     dispatch(setMessages([...messages, currentMsg, initialResponse]));
     dispatch(setText(''));
@@ -59,12 +59,20 @@ export default function TextChat({ messages }) {
       setErrorMessage(event.data);
       dispatch(setSubmitState(false));
       dispatch(setMessages([...messages.slice(0, -2), currentMsg, errorResponse]));
-      dispatch(setText(payload));
+      dispatch(setText(message));
       dispatch(setError(true));
       return;
     };
-    console.log('User Input:', payload);
-    handleSubmit({ text: payload, messageHandler, convo, convoHandler, errorHandler });
+    const submission = {
+      model,
+      text: message,
+      convo,
+      messageHandler,
+      convoHandler,
+      errorHandler
+    };
+    console.log('User Input:', message);
+    handleSubmit(submission);
   };
 
   const handleKeyDown = (e) => {

src/store/convoSlice.js

@@ -19,7 +19,6 @@ const currentSlice = createSlice({
     },
   }
 });
-//
 
 export const { setConversation, setError } = currentSlice.actions;
 

src/store/submitSlice.js

@@ -2,6 +2,7 @@ import { createSlice } from '@reduxjs/toolkit';
 
 const initialState = {
   isSubmitting: false,
+  model: 'chatgpt'
 };
 
 const currentSlice = createSlice({
@@ -11,9 +12,12 @@ const currentSlice = createSlice({
     setSubmitState: (state, action) => {
       state.isSubmitting = action.payload;
     },
+    setModel: (state, action) => {
+      state.model = action.payload;
+    },
   }
 });
 
-export const { setSubmitState } = currentSlice.actions;
+export const { setSubmitState, setModel } = currentSlice.actions;
 
 export default currentSlice.reducer;

src/utils/handleSubmit.js

@@ -1,13 +1,14 @@
 import { SSE } from '../../app/sse';
 
 export default function handleSubmit({
+  model,
   text,
   convo,
   messageHandler,
   convoHandler,
   errorHandler
 }) {
-  let payload = { text };
+  let payload = { model, text };
   if (convo.conversationId && convo.parentMessageId) {
     payload = {
       ...payload,