Adjustments for new API

Author: TBHGodPro

src/App.jsx

@@ -1,8 +1,8 @@
 import { useState } from "react";
-import ChatBody from "./components/ChatBody";
-import ChatInput from "./components/ChatInput";
 import { useMutation } from "react-query";
 import { fetchResponse } from "./api";
+import ChatBody from "./components/ChatBody";
+import ChatInput from "./components/ChatInput";
 function App() {
   const [chat, setChat] = useState([]);
 
@@ -13,7 +13,7 @@ function App() {
     onSuccess: (data) =>
       setChat((prev) => [
         ...prev,
-        { sender: "ai", message: data.message.replace(/^\n\n/, "") },
+        { sender: "ai", message: data.text.replace(/^\n\n/, "") },
       ]),
   });
 

src/api.js

@@ -1,19 +1,26 @@
-export const fetchResponse =  async(chat) => {
-    try {
-        // after depoloyment you should change the fetch URL below
-        const response = await fetch('https://localhost:3000', { 
-            method: 'POST',
-            headers: {
-                "Content-Type": "application/json"
-            },
-            body: JSON.stringify({
-                message: chat.map((message)=> message.message).join(" \n ")
-            })
-        })
+let conversationId;
+let lastMessageId;
 
-        const data = await response.json()
-        return data
-    } catch (error) {
-        console.log(error);
-    }
-}
+export const fetchResponse = async chat => {
+	try {
+		// after depoloyment you should change the fetch URL below
+		const response = await fetch('http://localhost:3080', {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json'
+			},
+			body: JSON.stringify({
+				message: chat[chat.length - 1].message,
+				conversationId,
+				lastMessageId
+			})
+		});
+
+		const data = await response.json();
+		conversationId = data.conversationId;
+		lastMessageId = data.id;
+		return data;
+	} catch (error) {
+		console.log(error);
+	}
+};

src/components/ChatBody.jsx

@@ -1,45 +1,46 @@
-import React, { useRef } from "react";
-import autoAnimate from "@formkit/auto-animate";
-import { useEffect } from "react";
-
+import autoAnimate from '@formkit/auto-animate';
+import React, { useEffect, useRef } from 'react';
 
 const ChatBody = ({ chat }) => {
-  const aiStyle =
-    "bg-white bg-opacity-40 backdrop-blur-lg dropshadow-md mr-auto";
-
-    const parent = useRef(null);
-    const bottomRef = useRef(null);
-
-    // only for aut animations
-    useEffect(()=>{
-        parent.current && autoAnimate(parent.current);
-    }, [parent])
-
-    //for scrolling bottom
-    useEffect(()=>{
-        bottomRef.current?.scrollIntoView({behavior: "smooth"})
-    }, [chat])
-
-  return (
-    <div className="flex flex-col gap-4" ref={parent}>
-      {chat.map((message, i) => {
-        return (
-          <div
-            key={i}
-            className={`border-[#999999] break-words border-2 rounded-xl self-end px-3 py-3 max-w-[80%] ${
-              message.sender === "ai" && aiStyle
-            }`}
-          >
-            <pre className="whitespace-pre-wrap">
-              <span>{message.message}</span>
-            </pre>
-          </div>
-        );
-      })}
-
-      <div ref={bottomRef} className="h-3"></div>
-    </div>
-  );
+	const aiStyle = 'bg-white bg-opacity-40 backdrop-blur-lg dropshadow-md mr-auto';
+
+	const parent = useRef(null);
+	const bottomRef = useRef(null);
+
+	// only for aut animations
+	useEffect(() => {
+		parent.current && autoAnimate(parent.current);
+	}, [parent]);
+
+	//for scrolling bottom
+	useEffect(() => {
+		bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+	}, [chat]);
+
+	return (
+		<div
+			className="flex flex-col gap-4"
+			ref={parent}
+		>
+			{chat.map((message, i) => {
+				return (
+					<div
+						key={i}
+						className={`border-[#999999] break-words border-2 rounded-xl self-end px-3 py-3 max-w-[80%] ${message.sender === 'ai' && aiStyle}`}
+					>
+						<pre className="whitespace-pre-wrap">
+							<span>{message.message}</span>
+						</pre>
+					</div>
+				);
+			})}
+
+			<div
+				ref={bottomRef}
+				className="h-3"
+			></div>
+		</div>
+	);
 };
 
 export default ChatBody;

src/components/ChatInput.jsx

@@ -1,5 +1,4 @@
-import React from "react";
-import { useState } from "react";
+import React, { useState } from "react";
 
 const ChatInput = ({ sendMessage, loading }) => {
   const [value, setValue] = useState("");

src/main.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
+import { QueryClient, QueryClientProvider } from "react-query";
 import App from "./App";
-import { QueryClientProvider, QueryClient } from "react-query";
 import "./index.css";
 
 const queryClient = new QueryClient()

vite.config.js

@@ -1,5 +1,5 @@
-import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({