feat: show model based on configured Keys

api/server/index.js

@@ -28,6 +28,14 @@ app.use('/api/convos', routes.convos);
 app.use('/api/customGpts', routes.customGpts);
 app.use('/api/prompts', routes.prompts);
 
+app.get('/api/models', function (req, res) {
+  const hasOpenAI = !!process.env.OPENAI_KEY;
+  const hasChatGpt = !!process.env.CHATGPT_TOKEN;
+  const hasBing = !!process.env.BING_TOKEN;
+
+  res.send(JSON.stringify({ hasOpenAI, hasChatGpt, hasBing }));
+});
+
 app.listen(port, host,  () => {
   if (host=='0.0.0.0')
     console.log(`Server listening on all interface at port ${port}. Use http://localhost:${port} to access it`);

client/src/App.jsx

@@ -5,7 +5,7 @@ import TextChat from './components/Main/TextChat';
 import Nav from './components/Nav';
 import MobileNav from './components/Nav/MobileNav';
 import useDocumentTitle from '~/hooks/useDocumentTitle';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
 const App = () => {
   const { messages, messageTree } = useSelector((state) => state.messages);

client/src/components/Models/ModelItem.jsx

@@ -30,6 +30,8 @@ export default function ModelItem({ modelName, value, model, onSelect, id, chatG
 
   const icon = getIconOfModel({ size: 16, sender: modelName, isCreatedByUser: false, model, chatGptLabel, promptPrefix, error: false, className: "mr-2" });
 
+  if (!initial[model]) return null
+
   if (value === 'chatgptCustom') {
     return (
       <DialogTrigger className="w-full">
@@ -43,9 +45,9 @@ export default function ModelItem({ modelName, value, model, onSelect, id, chatG
         </DropdownMenuRadioItem>
       </DialogTrigger>
     );
-  }
+  } 
 
-  if (initial[value]) {
+  if (initial[value])
     return (
       <DropdownMenuRadioItem
         value={value}
@@ -56,8 +58,8 @@ export default function ModelItem({ modelName, value, model, onSelect, id, chatG
         {value === 'chatgpt' && <sup>$</sup>}
       </DropdownMenuRadioItem>
     );
-  }
 
+  
   const handleMouseOver = () => {
     setIsHovering(true);
   };

client/src/components/Models/ModelMenu.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import axios from 'axios';
 import { useSelector, useDispatch } from 'react-redux';
 import {
   setSubmission,
@@ -11,7 +12,7 @@ import { setNewConvo } from '~/store/convoSlice';
 import ModelDialog from './ModelDialog';
 import MenuItems from './MenuItems';
 import { swr } from '~/utils/fetchers';
-import { setModels } from '~/store/modelSlice';
+import { setModels, setInitial } from '~/store/modelSlice';
 import { setMessages } from '~/store/messageSlice';
 import { setText } from '~/store/textSlice';
 import GPTIcon from '../svg/GPTIcon';
@@ -61,6 +62,23 @@ export default function ModelMenu() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    axios.get('/api/models', {
+      timeout: 1000,
+      withCredentials: true
+    }).then((res) => {
+      return res.data
+    }).then((data) => {
+      const initial = {chatgpt: data?.hasOpenAI, chatgptCustom: data?.hasOpenAI, bingai: data?.hasBing, sydney: data?.hasBing, chatgptBrowser: data?.hasChatGpt}
+      dispatch(setInitial(initial))
+      // TODO, auto reset default model
+    }).catch((error) => {
+      console.error(error)
+      console.log('Not login!')
+      window.location.href = "/auth/login";
+    })
+  }, [])
+
   useEffect(() => {
     localStorage.setItem('model', JSON.stringify(model));
   }, [model]);

client/src/store/modelSlice.js

@@ -34,7 +34,7 @@ const initialState = {
     },
   ],
   modelMap: {},
-  initial: { chatgpt: true, chatgptCustom: true, bingai: true, sydney: true, chatgptBrowser: true }
+  initial: { chatgpt: false, chatgptCustom: false, bingai: false, sydney: false, chatgptBrowser: false }
   // initial: { chatgpt: true, chatgptCustom: true, bingai: true, }
 };
 
@@ -56,10 +56,13 @@ const currentSlice = createSlice({
       });
 
       state.modelMap = modelMap;
+    },
+    setInitial: (state, action) => {
+      state.initial = action.payload;
     }
   }
 });
 
-export const { setModels } = currentSlice.actions;
+export const { setModels, setInitial } = currentSlice.actions;
 
 export default currentSlice.reducer;