complete docker setup

.gitignore

@@ -48,5 +48,6 @@ bower_components/
 cache.json
 api/data/
 .eslintrc.js
+docker-compose.yml
 
 src/style - official.css

client/src/components/Conversations/Conversation.jsx

@@ -23,8 +23,8 @@ export default function Conversation({
   const { modelMap } = useSelector((state) => state.models);
   const inputRef = useRef(null);
   const dispatch = useDispatch();
-  const { trigger } = manualSWR(`http://localhost:3080/messages/${id}`, 'get');
+  const { trigger } = manualSWR(`http://api:3080/messages/${id}`, 'get');
-  const rename = manualSWR(`http://localhost:3080/convos/update`, 'post');
+  const rename = manualSWR(`http://api:3080/convos/update`, 'post');
 
   const clickHandler = async () => {
     if (conversationId === id) {

client/src/components/Conversations/DeleteButton.jsx

@@ -9,7 +9,7 @@ import { setMessages } from '~/store/messageSlice';
 export default function DeleteButton({ conversationId, renaming, cancelHandler }) {
   const dispatch = useDispatch();
   const { trigger } = manualSWR(
-    `http://localhost:3080/convos/clear`,
+    `http://api:3080/convos/clear`,
     'post',
     () => {
       dispatch(setMessages([]));

client/src/components/Messages/Message.jsx

@@ -59,13 +59,18 @@ export default function Message({
       'w-full border-b border-black/10 bg-gray-50 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group bg-gray-100 dark:bg-[#444654]';
   }
 
-  if (notUser && backgroundColor || sender === 'bingai') {
+  if ((notUser && backgroundColor) || sender === 'bingai') {
     icon = (
       <div
         style={{ backgroundColor }}
         className="relative flex h-[30px] w-[30px] items-center justify-center rounded-sm p-1 text-white"
       >
         {sender === 'bingai' ? <BingIcon /> : <GPTIcon />}
+        {error && (
+          <span className="absolute right-0 top-[20px] -mr-2 flex h-4 w-4 items-center justify-center rounded-full border border-white bg-red-500 text-[10px] text-white">
+            !
+          </span>
+        )}
       </div>
     );
   }

client/src/components/Models/ModelDialog.jsx

@@ -23,7 +23,7 @@ export default function ModelDialog({ mutate, modelMap }) {
   const [saveText, setSaveText] = useState('Save');
   const [required, setRequired] = useState(false);
   const inputRef = useRef(null);
-  const updateCustomGpt = manualSWR(`http://localhost:3080/customGpts/`, 'post');
+  const updateCustomGpt = manualSWR(`http://api:3080/customGpts/`, 'post');
 
   const submitHandler = (e) => {
     if (chatGptLabel.length === 0) {

client/src/components/Models/ModelMenu.jsx

@@ -25,8 +25,7 @@ export default function ModelMenu() {
   const dispatch = useDispatch();
   const { model, customModel } = useSelector((state) => state.submit);
   const { models, modelMap, initial } = useSelector((state) => state.models);
-  const { trigger } = manualSWR(`http://localhost:3080/customGpts`, 'get', (res) => {
+  const { trigger } = manualSWR(`http://api:3080/customGpts`, 'get', (res) => {
-    console.log('models data (response)', res);
     if (models.length + res.length === models.length) {
       return;
     }

client/src/components/Nav/ClearConvos.jsx

@@ -11,12 +11,12 @@ export default function ClearConvos() {
   const { mutate } = useSWRConfig()
 
   const { trigger } = manualSWR(
-    `http://localhost:3080/convos/clear`,
+    `http://api:3080/convos/clear`,
     'post',
     () => {
       dispatch(setMessages([]));
       dispatch(setConversation({ error: false, title: 'New chat', conversationId: null, parentMessageId: null }));
-      mutate(`http://localhost:3080/convos`);
+      mutate(`http://api:3080/convos`);
     }
   );
 

client/src/components/Nav/index.jsx

@@ -17,7 +17,7 @@ export default function Nav() {
   };
 
   const { data, isLoading, mutate } = swr(
-    `http://localhost:3080/convos?pageNumber=${pageNumber}`
+    `http://api:3080/convos?pageNumber=${pageNumber}`
   , onSuccess);
   const containerRef = useRef(null);
   const scrollPositionRef = useRef(null);

client/src/utils/handleSubmit.js

@@ -11,7 +11,7 @@ export default function handleSubmit({
   chatGptLabel,
   promptPrefix
 }) {
-  const endpoint = `http://localhost:3080/ask`;
+  const endpoint = `http://api:3080/ask`;
   let payload = { model, text, chatGptLabel, promptPrefix };
   if (convo.conversationId && convo.parentMessageId) {
     payload = {

docker-compose.yml copy.example

@@ -5,7 +5,7 @@ services:
         image: react-app
         restart: always
         ports:
-            - "3000:3000"
+            - "3050:80"
         volumes:
             - ./client:/client
             - /client/node_modules
@@ -16,8 +16,14 @@ services:
     api:
         image: node-api
         restart: always
+        environment:
+                - PORT=3080
+                - MONGO_URI=mongodb://mongodb:27017
+                - OPENAI_KEY=
+                - CHATGPT_TOKEN=""
+                - BING_TOKEN=""
         ports:
-            - "9000:9000"
+            - "3080:3080"
         volumes:
             - ./api:/api
             - /api/node_modules
@@ -32,7 +38,7 @@ services:
         volumes:
             - ./data-node:/data/db
         ports:
-            - 27017:27017
+            - 27020:27017
         command: mongod --noauth
         networks:
             - webappnetwork