diff --git a/.eslintrc.json b/.eslintrc.json index 3722418..b423f38 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,3 +1,6 @@ { - "extends": ["next/core-web-vitals", "next/typescript"] -} + "extends": [ + "next/core-web-vitals", + "next/typescript" + ] +} \ No newline at end of file diff --git a/README.md b/README.md index 8ea42fe..5e93b0c 100644 --- a/README.md +++ b/README.md @@ -25,7 +25,7 @@ Codehive is a web-based platform designed to provide a **collaborative coding en - Provides assistance in: - Generating code. - Debugging and optimizing code. -- Powered by **Llama 3.1** via the **Groq AI Cloud**. +- Powered by **Llama 3.3** via the **Groq AI Cloud**. ### πŸ“¦ **In-Built Compiler** ⚑ - Run and test your code directly within the platform. @@ -35,17 +35,14 @@ Codehive is a web-based platform designed to provide a **collaborative coding en ## πŸ“Έ Screenshots -### 🌟 Collaborative Editor -![Collaborative Editor](https://github.com/codehiveofficial/codehive/blob/main/public/img2.png?raw=true) +### 🌟 Overall Platform +![Overall Platform](https://github.com/user-attachments/assets/c741c786-b858-45f8-94be-d5c0e1b46c33) -### 🌟 Codehive Genie in Action -![Codehive Genie](https://github.com/codehiveofficial/codehive/blob/main/public/img3.png?raw=true) +### 🌟 Audio/Video/Text Communication +![Audio/Video/Text Communication](https://github.com/user-attachments/assets/8a7c8f80-7a4b-4b26-a528-3874f28b06b6) -### 🌟 Video Calling and Chat -![Video Calling](https://github.com/codehiveofficial/codehive/blob/main/public/Screenshot%202024-12-01%20015641.png) - -### 🌟 Generate Beautiful Code Snippets -![Code Snippets](https://github.com/codehiveofficial/codehive/blob/main/public/codehive_snippet%20(4).png) +### 🌟 Integrated AI Assistant +![Integrated AI Assistant](https://github.com/user-attachments/assets/9f19b19a-af74-47db-ad6b-f74c638a69f1) ## πŸ› οΈ **Tech Stack** @@ -59,7 +56,7 @@ Codehive is a web-based platform designed to provide a **collaborative coding en ### Backend - **Codehive Genie** ([Repo](https://github.com/codehiveofficial/codehive-genie)): - - Python-based **Flask API** utilizing **Llama 3.1** for AI-driven coding assistance. + - Python-based **Flask API** utilizing **Llama 3.3** for AI-driven coding assistance. - Integrated with **Groq AI Cloud** for LLM parameterization. - **Codehive Server** ([Repo](https://github.com/codehiveofficial/codehive-server)): diff --git a/package-lock.json b/package-lock.json index d94f3cc..1de1690 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8093,4 +8093,4 @@ } } } -} +} \ No newline at end of file diff --git a/package.json b/package.json index 7c03546..6f4abc8 100644 --- a/package.json +++ b/package.json @@ -46,4 +46,4 @@ "tailwindcss": "^3.4.1", "typescript": "^5" } -} +} \ No newline at end of file diff --git a/public/AICodehive.png b/public/AICodehive.png new file mode 100644 index 0000000..686e7f2 Binary files /dev/null and b/public/AICodehive.png differ diff --git a/public/CommunicationCodehive.png b/public/CommunicationCodehive.png new file mode 100644 index 0000000..1b3077f Binary files /dev/null and b/public/CommunicationCodehive.png differ diff --git a/public/EditorCodehive.png b/public/EditorCodehive.png new file mode 100644 index 0000000..647efcf Binary files /dev/null and b/public/EditorCodehive.png differ diff --git a/public/OverallPlatformCodehive.png b/public/OverallPlatformCodehive.png new file mode 100644 index 0000000..b3e1c16 Binary files /dev/null and b/public/OverallPlatformCodehive.png differ diff --git a/public/codehive_snippet (4).png b/public/codehive_snippet (4).png index fa07503..93ac750 100644 Binary files a/public/codehive_snippet (4).png and b/public/codehive_snippet (4).png differ diff --git a/src/app/combined/ChatModal.tsx b/src/app/combined/ChatModal.tsx index 0ff1a44..4da5dac 100644 --- a/src/app/combined/ChatModal.tsx +++ b/src/app/combined/ChatModal.tsx @@ -1,5 +1,4 @@ import React, { useState, useEffect } from "react"; -import { io, Socket } from "socket.io-client"; import { Send, X, MessageCircle } from "lucide-react"; interface ChatMessage { @@ -8,15 +7,10 @@ interface ChatMessage { message: string; } -interface ChatModalProps { - socket: Socket; - userName: string; -} - -export default function ChatModal ({ socket, userName }:any) { +export default function ChatModal({ socket, userName }: any) { const [messages, setMessages] = useState([]); const [newMessage, setNewMessage] = useState(""); - const [isOpen, setIsOpen] = useState(false); // Controls visibility of chat modal + const [isOpen, setIsOpen] = useState(false); useEffect(() => { socket.on("receive_message", (data: ChatMessage) => { @@ -45,21 +39,20 @@ export default function ChatModal ({ socket, userName }:any) {
{isOpen && ( -
+
- {/* Header */} -
-

Chat Room

+
+

Chat Room

-
- Online +
+ Online
@@ -68,28 +61,26 @@ export default function ChatModal ({ socket, userName }:any) { {messages.map((message, index) => (
-

+

{message.userName}

-

{message.message}

+

{message.message}

))}
{/* Input Area */} -
+
diff --git a/src/app/combined/GenieModal.tsx b/src/app/combined/GenieModal.tsx index f721550..17d41d8 100644 --- a/src/app/combined/GenieModal.tsx +++ b/src/app/combined/GenieModal.tsx @@ -45,14 +45,14 @@ const CodeBlock = ({ {/* Floating Controls */}
{/* Language Tag */} -
+
{language.toUpperCase()}
{/* Copy Button */} + + {isOpen && ( +
+
+ {languageOptions.map((option, index) => ( + + ))} +
+
+ )} +
+ ); +} \ No newline at end of file diff --git a/src/app/editor/CustomThemeDropdown.tsx b/src/app/editor/CustomThemeDropdown.tsx new file mode 100644 index 0000000..6b36288 --- /dev/null +++ b/src/app/editor/CustomThemeDropdown.tsx @@ -0,0 +1,73 @@ +"use client"; +import React, { useState, useRef, useEffect } from "react"; +import monacoThemes from "monaco-themes/themes/themelist.json"; +import { ChevronDown } from "lucide-react"; + +interface CustomThemeDropdownProps { + handleThemeChange: (selectedOption: { label: string; value: string }) => void; + theme: { label: string; value: string }; +} + +export default function CustomThemeDropdown({ handleThemeChange, theme }: CustomThemeDropdownProps) { + const [isOpen, setIsOpen] = useState(false); + const dropdownRef = useRef(null); + + const themeOptions = Object.entries(monacoThemes).map(([themeId, themeName]) => ({ + label: themeName, + value: themeId, + })); + + const currentTheme = theme.value ? theme : { label: "Brilliance Black", value: "brilliance-black" }; + + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) { + setIsOpen(false); + } + }; + + document.addEventListener("mousedown", handleClickOutside); + return () => document.removeEventListener("mousedown", handleClickOutside); + }, []); + + const handleSelect = (option: { label: string; value: string }) => { + handleThemeChange(option); + setIsOpen(false); + }; + + return ( +
+ {/* Dropdown Button */} + + + {/* Dropdown Menu */} + {isOpen && ( +
+
+ {themeOptions.map((option, index) => ( + + ))} +
+
+ )} +
+ ); +} \ No newline at end of file diff --git a/src/app/editor/LanguageDropdown.tsx b/src/app/editor/LanguageDropdown.tsx index 4014ddc..639b89d 100644 --- a/src/app/editor/LanguageDropdown.tsx +++ b/src/app/editor/LanguageDropdown.tsx @@ -17,13 +17,17 @@ const modifiedCustomStyles = { export default function LanguageDropdown({ onSelectChange }: any) { return ( - onSelectChange(selectedOption)} + isSearchable={false} + menuPosition="fixed" + /> +
); }; diff --git a/src/app/editor/OutputWindow.tsx b/src/app/editor/OutputWindow.tsx index 1911900..50505f4 100644 --- a/src/app/editor/OutputWindow.tsx +++ b/src/app/editor/OutputWindow.tsx @@ -1,4 +1,5 @@ import React from "react"; +import { CheckCircle, XCircle, Clock, Cpu, Terminal } from "lucide-react"; interface OutputDetails { stdout?: string; @@ -9,41 +10,76 @@ interface OutputDetails { } export default function OutputWindow({ outputDetails }: any) { + const hasOutput = outputDetails?.stdout || outputDetails?.stderr; + const isSuccess = outputDetails?.status && outputDetails?.status !== "Error"; + return ( -
-

- Output -

-
- 
-          {outputDetails?.stdout || ""}
-          {outputDetails?.stderr || ""}
-
+
+
+ + Output + {outputDetails?.status && ( +
+ {isSuccess ? ( + + ) : ( + + )} + + {outputDetails.status} + +
+ )}
-
-

- Status: - - {outputDetails?.status || "N/A"} - -

-

- Memory:{" "} - - {outputDetails?.memory || "N/A"} - -

-

- Time:{" "} - - {outputDetails?.time || "N/A"}s - -

+ + {/* Output Content */} +
+
+ {hasOutput ? ( + 
+              {outputDetails?.stdout || ""}
+              {outputDetails?.stderr || ""}
+
+ ) : ( +
+
+ +

+ No output yet +

+

+ Run your code to see the results here +

+
+
+ )} +
+ + {(outputDetails?.memory || outputDetails?.time) && ( +
+
+
+ {outputDetails?.time && ( +
+ + + {outputDetails.time}s + +
+ )} + {outputDetails?.memory && ( +
+ + + {outputDetails.memory} + +
+ )} +
+
+
+ )}
); } diff --git a/src/app/editor/ThemeDropdown.tsx b/src/app/editor/ThemeDropdown.tsx index 0fe04ba..2bb0810 100644 --- a/src/app/editor/ThemeDropdown.tsx +++ b/src/app/editor/ThemeDropdown.tsx @@ -18,20 +18,23 @@ const modifiedCustomStyles = { }), }; -export default function ThemeDropdown({ handleThemeChange, theme }: any){ +export default function ThemeDropdown({ handleThemeChange, theme }: any) { return ( - ({ + label: themeName, + value: themeId, + key: themeId, + }))} + value={theme} + styles={modifiedCustomStyles} + className="text-sm" + onChange={handleThemeChange} + isSearchable={false} + menuPosition="fixed" + /> +
); }; - diff --git a/src/app/editor/page.tsx b/src/app/editor/page.tsx index 17bb2d1..bb98395 100644 --- a/src/app/editor/page.tsx +++ b/src/app/editor/page.tsx @@ -1,5 +1,5 @@ "use client"; -import React, { useEffect, useState } from "react"; +import React, { useEffect, useRef, useState } from "react"; import CodeEditor from "./CodeEditor"; import { languageOptions } from "@/constants/languageOptions"; import { defineTheme } from "@/lib/defineTheme"; @@ -31,22 +31,23 @@ const defaultCodeTemplates: Record = { typescript: "// Write your TypeScript code here\nconsole.log('Hello, World!');", }; -export default function Landing(props:any){ +export default function Landing(props: any) { const [roomId, setRoomId] = useState(""); const [code, setCode] = useState( props.code || defaultCodeTemplates[languageOptions[0].value] || "// Write your code here" ); const [customInput, setCustomInput] = useState(""); const [outputDetails, setOutputDetails] = useState(null); - const [theme, setTheme] = useState({ value: "oceanic-next", label: "Oceanic Next" }); + const [theme, setTheme] = useState({ value: "brilliance-black", label: "Brilliance Black" }); const [language, setLanguage] = useState(languageOptions[0]); - const [fontSize, setFontSize] = useState(18); + const [fontSize, setFontSize] = useState(16); const [isLoading, setIsLoading] = useState(false); const [remoteCursorPosition, setRemoteCursorPosition] = useState<{ lineNumber: number; column: number } | null>(null); + const outputWindowRef = useRef(null); useEffect(() => { - defineTheme("oceanic-next").then(() => { - setTheme({ value: "oceanic-next", label: "Oceanic Next" }); + defineTheme("brilliance-black").then(() => { + setTheme({ value: "brilliance-black", label: "Brilliance Black" }); }); // Listen for incoming code and cursor changes @@ -129,39 +130,59 @@ export default function Landing(props:any){ }; setOutputDetails(outputData); + + setTimeout(() => { + if (outputWindowRef.current) { + outputWindowRef.current.scrollIntoView({ + behavior: 'smooth', + block: 'nearest' + }); + } + }, 100); + } catch (error) { console.error("Error executing code:", error); setOutputDetails({ stdout: "", stderr: "Execution failed", status: "Failed" }); + + setTimeout(() => { + if (outputWindowRef.current) { + outputWindowRef.current.scrollIntoView({ + behavior: 'smooth', + block: 'nearest' + }); + } + }, 100); + } finally { setIsLoading(false); } }; return ( -
+
setRoomId(e.target.value)} - className="border text-black rounded-md p-2" + className="border border-border rounded-md p-2 bg-muted text-foreground font-spacegroteskregular focus:outline-none focus:ring-2 focus:ring-info" />
-
+
@@ -169,29 +190,27 @@ export default function Landing(props:any){
-
- +
+ setFontSize(Number(e.target.value))} - className="border border-black mr-1 rounded px-2 custom-input" + className="border border-border mr-1 rounded px-2 custom-input bg-input text-foreground font-spacegroteskregular focus:outline-none focus:ring-2 focus:ring-info" min="10" max="40" style={{ - color: "#000", fontSize: "0.8rem", lineHeight: "1.75rem", width: "100%", - background: "#fff", }} />
-
-
+
+
-
+
); } diff --git a/src/app/temp/page.tsx b/src/app/temp/page.tsx index 03fab1c..a24046e 100644 --- a/src/app/temp/page.tsx +++ b/src/app/temp/page.tsx @@ -18,7 +18,7 @@ interface VideoCallProps { userName: string; } -export default function VideoCall({ userName }:any){ +export default function VideoCall({ userName }: any) { const [roomId, setRoomId] = useState(""); const [peers, setPeers] = useState<{ [key: string]: PeerConnection }>({}); const [isVideoEnabled, setIsVideoEnabled] = useState(true); @@ -294,17 +294,15 @@ export default function VideoCall({ userName }:any){
diff --git a/src/components/About.tsx b/src/components/About.tsx index 81c76fc..458e760 100644 --- a/src/components/About.tsx +++ b/src/components/About.tsx @@ -3,45 +3,45 @@ import aboutImg from "../../public/rb_2035.png"; import Image from "next/image"; export default function About() { return ( -
+
{/* Content Section */}
- +
-

+

About Codehive

-

- At Codehive, our mission is to make coding a shared and - accessible experience for everyone. We envision a world where - developers, learners, and innovators connect seamlessly, breaking - barriers to creativity and productivity. +

+ At Codehive, our mission is to make coding a shared and + accessible experience for everyone. We envision a world where + developers, learners, and innovators connect seamlessly, breaking + barriers to creativity and productivity.

-

- As a team of passionate developers, we believe that innovation - thrives in collaboration. Our platform is designed to bring people - together, empowering them to code, communicate, and create in real-time. - Whether you're brainstorming with a team or learning with peers, +

+ As a team of passionate developers, we believe that innovation + thrives in collaboration. Our platform is designed to bring people + together, empowering them to code, communicate, and create in real-time. + Whether you're brainstorming with a team or learning with peers, Codehive provides the tools to turn ideas into reality.

-

- With every feature, we aim to bridge gaps in communication, enhance - productivity, and create a supportive environment for developers of all levels. - Codehive is not just about writing codeβ€”it's about writing stories +

+ With every feature, we aim to bridge gaps in communication, enhance + productivity, and create a supportive environment for developers of all levels. + Codehive is not just about writing codeβ€”it's about writing stories of growth, connection, and innovation.

-
diff --git a/src/components/AboutCard.tsx b/src/components/AboutCard.tsx index a2cf1e5..18648ff 100644 --- a/src/components/AboutCard.tsx +++ b/src/components/AboutCard.tsx @@ -1,6 +1,5 @@ "use client"; import { cn } from "@/lib/utils"; -import Image from "next/image"; import React, { createContext, useState, diff --git a/src/components/Aboutus.tsx b/src/components/Aboutus.tsx index 0a15f59..003a03d 100644 --- a/src/components/Aboutus.tsx +++ b/src/components/Aboutus.tsx @@ -8,16 +8,16 @@ import Link from "next/link"; const Aboutus = () => { return ( -
+
- - + + Khagesh Sharma A Full-Stack Web Developer and DevOps Engineer @@ -36,7 +36,7 @@ const Aboutus = () => { as={Link} href="https://www.linkedin.com/in/khageshsharma/" target="__blank" - className="px-4 py-2 rounded-xl text-xs font-normal bg-blue-700" + className="px-4 py-2 rounded-xl text-xs font-spacegroteskmedium bg-info hover:bg-info/90 transition-colors" > { strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" - className="lucide lucide-linkedin w-6 h-6 text-white transition-colors" + className="lucide lucide-linkedin w-6 h-6 text-info-foreground transition-colors" > @@ -58,7 +58,7 @@ const Aboutus = () => { { strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" - className="lucide lucide-github w-6 h-6 text-gray-900 hover:text-black transition-colors" + className="lucide lucide-github w-6 h-6 text-background transition-colors" > @@ -81,14 +81,14 @@ const Aboutus = () => { - - + + Abhay Dixit A Full-Stack Web Developer and AI/ML Developer @@ -107,7 +107,7 @@ const Aboutus = () => { as={Link} href="https://www.linkedin.com/in/abhay-dixit-546b85254/" target="__blank" - className="px-4 py-2 rounded-xl text-xs font-normal text-white bg-blue-700" + className="px-4 py-2 rounded-xl text-xs font-spacegroteskmedium text-info-foreground bg-info hover:bg-info/90 transition-colors" > { strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" - className="lucide lucide-linkedin w-6 h-6 text-white transition-colors" + className="lucide lucide-linkedin w-6 h-6 text-info-foreground transition-colors" > @@ -129,7 +129,7 @@ const Aboutus = () => { { strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" - className="lucide lucide-github w-6 h-6 text-gray-900 hover:text-black transition-colors" + className="lucide lucide-github w-6 h-6 text-background transition-colors" > diff --git a/src/components/Contact.tsx b/src/components/Contact.tsx index 1663cec..2b63594 100644 --- a/src/components/Contact.tsx +++ b/src/components/Contact.tsx @@ -68,17 +68,17 @@ export default function Contact() { }; return ( -
+
-

+

Contact Us

-
-
-
diff --git a/src/components/FeaturesSection.tsx b/src/components/FeaturesSection.tsx index f8275ec..5152ad4 100644 --- a/src/components/FeaturesSection.tsx +++ b/src/components/FeaturesSection.tsx @@ -1,9 +1,9 @@ "use client"; import { motion } from "framer-motion"; import Image from "next/image"; -import Feature1 from "../../public/img2.png"; -import Feature2 from "../../public/Screenshot 2024-12-01 015641.png"; -import Feature3 from "../../public/img3.png"; +import Feature1 from "../../public/CommunicationCodehive.png"; +import Feature2 from "../../public/OverallPlatformCodehive.png"; +import Feature3 from "../../public/AICodehive.png"; const FeaturesSection = () => { const features = [ @@ -13,7 +13,7 @@ const FeaturesSection = () => { description: "Codehive offers a real-time collaborative coding playground, enabling seamless teamwork. With support for 5+ programming languages and 20+ color themes, it's designed to cater to diverse developer preferences.", image: Feature1, - color: "bg-black", + color: "bg-muted", }, { icon: "πŸ’‘", @@ -21,7 +21,7 @@ const FeaturesSection = () => { description: "Stay connected with inbuilt video calling and chat features, making collaboration smooth and efficient. Download your code as styled snippets or files, simplifying project sharing and documentation.", image: Feature2, - color: "bg-black", + color: "bg-muted", }, { icon: "🌟", @@ -29,7 +29,7 @@ const FeaturesSection = () => { description: "Genie, our fine-tuned AI chatbot, provides smart code suggestions and instant corrections, empowering developers to write cleaner, more efficient code.", image: Feature3, - color: "bg-black", + color: "bg-muted", }, ]; @@ -60,7 +60,7 @@ const FeaturesSection = () => { return ( { {features.map((feature, index) => ( {
{feature.icon}
-

+

{feature.title}

-

+

{feature.description}

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index ac6cdb6..c5665b2 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -12,14 +12,14 @@ const Footer = () => { } }; return ( -