Merge pull request #56 from deepraj21/main

Update UI

README.md

@@ -1,46 +1,31 @@
 # DevHub: Intelligent Matchmaking Platform for Developers 💻🤝
-  <a href="https://discord.gg/he8QHEC8WP" target="_blank"><img src="https://img.shields.io/discord/1259889923129999411?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=ffffff" /></a>
 
-DevHub is an innovative platform designed to connect developers who share similar interests and complementary skills. By leveraging advanced technologies, it facilitates intelligent matchmaking and personalized recommendations, enabling devs to form effective teams and engage in meaningful collaborations. The platform provides a structured and user-friendly environment for networking, learning, and growth, ultimately enhancing the academic and professional experiences of developers.
-
-## Features 🌟
-
-### Advanced Matchmaking System
-DevHub integrates several cutting-edge technologies to create a robust matchmaking experience:
-
-- **Large Language Model (LLM)**: 🧠 Processes natural language inputs to understand user preferences and extract relevant information, enhancing matchmaking accuracy through:
-  - Natural Language Processing (NLP) 💬
-  - Entity Recognition 🔍
-  - Contextual Understanding 📊
-
-- **LangChain**: 🔗 Optimizes workflows by streamlining data integration between components, improving response quality and facilitating connections with external services.
+<center><a href="https://discord.gg/he8QHEC8WP" target="_blank"><img src="https://img.shields.io/discord/1259889923129999411?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=ffffff" /></a>
+</center>
 
-- **Neo4j Database**: 📈 Stores user profiles and project data in a graph format, allowing for complex relationships to be represented and queried effectively. Key features include:
-  - Knowledge Graph Creation 🌐
-  - Advanced Querying with Cypher 🗄️
-  - Integration with External Data Sources 🌍
-
-### User Interaction Features
-- **Chat Functionality**: 💬 Users can interact with the system to find matches or ask questions about potential collaborations using GraphRAG technology.
-- **Visualization Tools**: 📊 Users can visualize their connections within the knowledge graph, aiding in understanding potential collaborations.
+DevHub is an innovative platform designed to connect developers who share similar interests and complementary skills. By leveraging advanced technologies, it facilitates intelligent matchmaking and personalized recommendations, enabling devs to form effective teams and engage in meaningful collaborations. The platform provides a structured and user-friendly environment for networking, learning, and growth, ultimately enhancing the academic and professional experiences of developers.
 
 ## Tech Stacks 🛠️
 
 - **Backend**: Flask 🐍 + LangChain 🔗  
 - **Frontend**: Vite + React (TypeScript) ⚛️  
-- **Database**: Neo4j 🌐  + Sqlite 
+- **Database**: Neo4j + MongoDB 
 
----
 
 ## Features ✨
 
-1. **Create Your Profile**: Set up a personalized profile to showcase your skills and interests.  
-2. **Find Peers**: Connect with fellow students who share similar interests and complementary skills.  
-3. **Chat with Peers**: Engage in real-time conversations to discuss projects and collaborations.  
-4. **Explore Projects**: View projects posted by other users to gain inspiration and insights.  
-5. **Get Development Roadmaps**: Access curated roadmaps tailored for your development journey.  
 
-## Installation 
+- [ ] **OTP Based Authentication**
+- [x] **Signin/Signup** (Unique Username check and follows NIST Guidlines Validation) 
+- [x] **Create Profile**
+- [x] **Add/update/delete projects**
+- [x] **Add Github and Leetcode profiles** (Data in profile will be populated from the given handles)
+- [x] **Convert Profile into Knowledge Graphs** 
+- [x] **Use langchain to Chat with KGs**
+- [x] **Save Chat history**
+- [x] **Typing animation and Markdown response**  
+
+## Local Installation 🧑🏻‍💻
 
 Enter into the root directory.
 ```bash
@@ -58,22 +43,27 @@ SECRET_KEY=
 NEO4J_URI= 
 NEO4J_USER=
 NEO4J_PASSWORD=
+MONGODB_URI=
 
 ## Join our discord server to get Mirror Database Credentials.
 Discord Server Link : https://discord.gg/he8QHEC8WP
-
-## Create Virtual Environment
+```
+```bash
+## Create and activate Virtual Environment
 python -m venv venv
 
-## Activate the virtual Env.
 ./venv/Scripts/activate
+```
 
+```bash
 ## Intall dependencies
 pip install -r requirements.txt
-
+```
+```bash
 ## Run the Server
 flask run or python server.py
 ```
+
 ```bash
 ## 2nd terminal for client
 cd client

client/.gitignore

@@ -10,6 +10,7 @@ lerna-debug.log*
 node_modules
 dist-ssr
 *.local
+dist
 
 # Editor directories and files
 .vscode/*

client/package.json

@@ -13,15 +13,19 @@
     "@hookform/resolvers": "^3.9.0",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-avatar": "^1.1.1",
-    "@radix-ui/react-dialog": "^1.1.1",
+    "@radix-ui/react-collapsible": "^1.1.1",
+    "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-navigation-menu": "^1.2.0",
+    "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-scroll-area": "^1.2.0",
     "@radix-ui/react-select": "^2.1.1",
+    "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-toast": "^1.2.1",
+    "@radix-ui/react-tooltip": "^1.1.3",
     "@reduxjs/toolkit": "^2.2.7",
     "@tabler/icons-react": "^3.11.0",
     "@tsparticles/engine": "^3.5.0",

client/src/components/Auth/user-auth-form-login.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { toast } from "sonner";
-
 import { cn } from "@/lib/utils";
 import { Icons } from "@/components/ui/icons";
 import { Button } from "@/components/ui/button";

client/src/components/Chat/Chat.tsx

@@ -2,11 +2,15 @@ import { useState, useEffect, useRef } from 'react'
 import axios from 'axios'
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { PlaceholdersAndVanishInput } from '@/components/ui/placeholders-and-vanish-input'
-import Sidebar from "@/components/Sidebar/Sidebar"
-import MobileSidebar from "@/components/MobileSidebar/MobileSidebar"
 import { Skeleton } from "@/components/ui/skeleton"
 import Typewriter from 'typewriter-effect'
 import ReactMarkdown from 'react-markdown';
+import {
+	SidebarInset,
+	SidebarProvider,
+	SidebarTrigger,
+} from "@/components/ui/sidebar"
+import { SidebarLeft } from '@/components/Sidebar/Sidebar'
 
 const backendUrl = import.meta.env.VITE_BACKEND_URL || 'http://localhost:5000';
 
@@ -80,7 +84,7 @@ export const Chat: React.FC = () => {
 
 		setMessages((prevMessages) => [
 			...prevMessages,
-			{ query, response: '', isLoading: true, isTypingFinished: false }, // Initialize isTypingFinished for each message
+			{ query, response: '', isLoading: true, isTypingFinished: false },
 		])
 
 		try {
@@ -106,12 +110,14 @@ export const Chat: React.FC = () => {
 	}
 
 	return (
-		<div className="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
-			<Sidebar />
-			<div className="flex flex-col h-screen">
-				<header className="sticky top-0 z-10">
-					<MobileSidebar />
-				</header>
+			<SidebarProvider>
+				<SidebarLeft />
+				<SidebarInset>
+					<header className="sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background">
+						<div className="flex flex-1 items-center gap-2 px-3">
+							<SidebarTrigger />
+						</div>
+					</header>
 				<main className="flex flex-col flex-grow p-4 overflow-hidden">
 					<div className="flex flex-col h-full w-full md:w-[80%] lg:w-[70%] xl:w-[60%] mx-auto flex-grow overflow-y-auto p-1" ref={scrollAreaRef}>
 						<div className="space-y-4">
@@ -165,14 +171,13 @@ export const Chat: React.FC = () => {
 						</div>
 					</div>
 				</main>
-
 				<div className="p-4">
 					<PlaceholdersAndVanishInput
 						placeholders={placeholders}
 						onSubmit={onSubmit}
 					/>
 				</div>
-			</div>
-		</div>
+				</SidebarInset>
+			</SidebarProvider>
 	)
 }