feat: added chat feature in UI

devhub-ai · Sep 21, 2024 · 555995f · 555995f
1 parent f4ce775
commit 555995f
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 14 deletions.
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -52,7 +52,7 @@ const App: React.FC = () => {
         <Routes>
           <Route path="/" element={authenticated ? <Navigate to="/home" /> : <Landing />} />
           <Route path="/signup" element={<Signup />} />
-          <Route path="/login" element={<Login onLoginSuccess={(username) => { setAuthenticated(true); setUsername(username); }} />} />
+          <Route path="/login" element={<Login onLoginSuccess={(username: string) => { setAuthenticated(true); setUsername(username); }} />} />
           <Route path="/home" element={authenticated ? <Home onLogout={handleLogout} username={username || ''} /> : <Navigate to="/" />} />
           <Route path="/u/:username" element={<Profile onLogout={handleLogout} username={username || ''} />} />
           <Route path="*" element={<Navigate to="/" />} />

diff --git a/client/src/components/chat.tsx b/client/src/components/chat.tsx
@@ -1,8 +1,16 @@
 "use client";
 
 import { PlaceholdersAndVanishInput } from "./ui/placeholders-and-vanish-input";
+import { useState, useEffect } from "react";
+import axios from "axios";
 
 export function PlaceholdersAndVanishInputDemo() {
+    const [messages, setMessages] = useState<Array<{ query: string; response: string }>>([]);
+    const [isLoading, setIsLoading] = useState(false);
+
+    const backendUrl = import.meta.env.VITE_BACKEND_URL || 'http://localhost:5000';
+
+
     const placeholders = [
         "What's the first rule of Fight Club?",
         "Who is Tyler Durden?",
@@ -12,22 +20,58 @@ export function PlaceholdersAndVanishInputDemo() {
     ];
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        console.log(e.target.value);
+        // You can add any additional logic here if needed
     };
-    const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+
+    const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
-        console.log("submitted");
+        const query = e.currentTarget.querySelector('input')?.value;
+        if (!query) return;
+
+        setIsLoading(true);
+        try {
+            const result = await axios.post(`${backendUrl}/chat`, { query });
+            setMessages(prevMessages => [...prevMessages, { query, response: result.data.result }]);
+        } catch (error) {
+            console.error('Error querying the model:', error);
+            setMessages(prevMessages => [...prevMessages, { query, response: "An error occurred while processing your request." }]);
+        } finally {
+            setIsLoading(false);
+        }
     };
+
     return (
-        <div className="h-[40rem] flex flex-col justify-center  items-center px-4">
-            <h2 className="mb-10 sm:mb-20 text-xl text-center sm:text-5xl dark:text-white text-black">
-                Start Collabrating 
+        <div className="h-[50rem] flex flex-col">
+            <h2 className="mb-4 text-xl text-center sm:text-5xl dark:text-white text-black">
+                Start Collaborating
             </h2>
-            <PlaceholdersAndVanishInput
-                placeholders={placeholders}
-                onChange={handleChange}
-                onSubmit={onSubmit}
-            />
+            <div className="flex-grow overflow-y-auto px-4 flex flex-col items-center">
+                {messages.map((message, index) => (
+                    <div key={index} className="mb-4 w-full max-w-[80%]">
+                        <div className="bg-zinc-100 dark:bg-zinc-800 p-2 rounded-lg mb-2">
+                            <p className="font-bold">You:</p>
+                            <p>{message.query}</p>
+                        </div>
+                        <div className="bg-zinc-200 dark:bg-zinc-700 p-2 rounded-lg">
+                            <p className="font-bold">AI:</p>
+                            <p>{message.response}</p>
+                        </div>
+                    </div>
+                ))}
+            </div>
+            {isLoading && (
+                <div className="flex justify-center items-center p-4">
+                    <p>Loading...</p>
+                </div>
+            )}
+            <div className="p-4 mt-4">
+                <PlaceholdersAndVanishInput
+                    placeholders={placeholders}
+
+                    onChange={handleChange}
+                    onSubmit={onSubmit}
+                />
+            </div>
         </div>
     );
 }
diff --git a/client/src/pages/Login.tsx b/client/src/pages/Login.tsx
@@ -5,7 +5,7 @@ import { buttonVariants } from "@/components/ui/button";
 import { UserAuthForm } from "@/components/Auth/user-auth-form-login";
 
 interface LoginProps {
-  onLoginSuccess: () => void;
+  onLoginSuccess: (username: string) => void;
 }
 
 const Login: React.FC<LoginProps> = ({ onLoginSuccess }) => {
@@ -62,7 +62,7 @@ const Login: React.FC<LoginProps> = ({ onLoginSuccess }) => {
                 Enter your details below to Login to your account
               </p>
             </div>
-            <UserAuthForm onLoginSuccess={onLoginSuccess} />
+            <UserAuthForm onLoginSuccess={(username: string) => onLoginSuccess(username)} />
             <p className="px-8 text-center text-sm text-muted-foreground">
               By clicking continue, you agree to our{" "}
               <Link