diff --git a/src/app/(root)/(chat)/_components/chatinput.tsx b/src/app/(root)/(chat)/_components/chatinput.tsx index 89bdeb2..2924b2d 100644 --- a/src/app/(root)/(chat)/_components/chatinput.tsx +++ b/src/app/(root)/(chat)/_components/chatinput.tsx @@ -1,6 +1,6 @@ import React, { useState, useRef, useEffect } from 'react'; import TypewriterPlaceholder from './typewriter'; -import { Upload, Stars, Loader2 } from 'lucide-react'; +import { Upload, Stars, Loader2, MoveUp } from 'lucide-react'; import { getUser } from '@/actions/user_actions'; import { useRouter } from 'next/navigation'; import { useAppDispatch } from '@/redux/hooks'; @@ -155,13 +155,13 @@ const ChatInput = ({ isLoggedIn, onSubmit, setShowResumePopup }: {
{/* Form Container */}
-
+
- + - + - + @@ -205,28 +205,14 @@ const ChatInput = ({ isLoggedIn, onSubmit, setShowResumePopup }: { {/* Action Buttons */}
- -
diff --git a/src/app/(root)/(chat)/_components/heroSection.tsx b/src/app/(root)/(chat)/_components/heroSection.tsx index e12d01e..78a30c8 100644 --- a/src/app/(root)/(chat)/_components/heroSection.tsx +++ b/src/app/(root)/(chat)/_components/heroSection.tsx @@ -1,18 +1,15 @@ +'use client'; + import React, { useRef, useState, useEffect } from 'react'; -import Image from 'next/image'; -import { FaPaperclip, FaUpload, FaGlobe, FaTwitter, FaLinkedin, FaGithub } from 'react-icons/fa'; -import { useGoogleLogin } from '@react-oauth/google'; +import { SparklesIcon, Loader2 } from 'lucide-react'; +import { Button } from '@/components/ui/button'; import { useAppDispatch } from '@/redux/hooks'; -import axios from 'axios'; -import { userData } from '@/redux/slices/userSlice'; import toast from 'react-hot-toast'; -import { Loader2, SparklesIcon } from 'lucide-react'; -import JobSearchResults from './job-result'; -import QueryLimitPopup from './QueryLimitPopup'; -import ResumeUploadPopup from './ResumeUploadPopup'; // Import the new component import ChatInput from './chatinput'; -import { Button } from '@/components/ui/button'; -import { fetchJobs } from "@/actions/chat_actions" +import QueryLimitPopup from './QueryLimitPopup'; +import ResumeUploadPopup from './ResumeUploadPopup'; +import JobSearchResults from './job-result'; +import { fetchJobs } from "@/actions/chat_actions"; const QUERY_LIMIT = 5678; const STORAGE_KEY = 'userQueryCount'; @@ -20,30 +17,26 @@ const STORAGE_KEY = 'userQueryCount'; const HeroSection = ({ isLoggedIn }: { isLoggedIn: boolean }) => { const inputRef = useRef(null); const dispatch = useAppDispatch(); + const [isLoading, setIsLoading] = useState(false); const [query, setQuery] = useState(''); const [showResults, setShowResults] = useState(false); const [queryCount, setQueryCount] = useState(0); - const [showPopup, setShowPopup] = useState(false); // State to control query limit popup - const [showResumePopup, setShowResumePopup] = useState(false); // New state for resume popup - const [jobApiData, setJobApiData] = useState(null) - const [isApiLoading, setIsApiLoading] = useState(false) + const [showPopup, setShowPopup] = useState(false); + const [showResumePopup, setShowResumePopup] = useState(false); + const [jobApiData, setJobApiData] = useState(null); + const [isApiLoading, setIsApiLoading] = useState(false); useEffect(() => { const storedCount = localStorage.getItem(STORAGE_KEY); - if (storedCount) { - setQueryCount(parseInt(storedCount, 10)); - } + if (storedCount) setQueryCount(parseInt(storedCount, 10)); }, []); - - console.log("Results state:", showResults); useEffect(() => { localStorage.setItem(STORAGE_KEY, queryCount.toString()); }, [queryCount]); const handleCloseResults = () => { - console.log("Closing job results"); setShowResults(false); setQuery(''); setJobApiData(null); @@ -58,140 +51,156 @@ const HeroSection = ({ isLoggedIn }: { isLoggedIn: boolean }) => { }; const handleChatSubmit = async (inputText: string) => { - console.log("Chat submit triggered with text:", inputText); setQuery(inputText); setIsApiLoading(true); - try { - console.log("Calling fetchJobs with:", inputText); - // Call the API with the chat input const data = await fetchJobs(inputText); - console.log("Job data received in component:", data); setJobApiData(data); } catch (error) { console.error("Error fetching job data:", error); toast.error("Failed to fetch job results"); } finally { - console.log("API loading completed"); setIsApiLoading(false); setShowResults(true); } - - setQueryCount(prevCount => { - const newCount = prevCount + 1; - console.log("New query count:", newCount); - if (newCount >= QUERY_LIMIT) { - setShowPopup(true); - } + + setQueryCount(prev => { + const newCount = prev + 1; + if (newCount >= QUERY_LIMIT) setShowPopup(true); return newCount; }); }; return (
- {/* Ray Container with multiple light rays */} + {/* Background Light Rays */}
- {/* Light Rays (existing code) */} -
- {/* Other light rays... */} + className="fixed inset-0 pointer-events-none select-none" + style={{ + '--gradient-opacity': '.85', + '--ray-gradient': 'radial-gradient(rgb(83 255 233 / 85%) 0%, rgba(43, 166, 255, 0) 100%)', + transition: 'opacity 0.25s linear', + } as React.CSSProperties} + > + {/* Light Ray 1 */} +
+ {/* Light Ray 2 */} +
+ {/* Light Ray 3 */} +
+ {/* Light Ray 4 */} +
+ {/* Light Ray 5 */} +
- {/* Conditional Rendering for Hero Content or Job Search Results */} - {showResults && queryCount < QUERY_LIMIT ? ( - <> - - {/* Chat input below job results */} -
- + {!showResults || queryCount >= QUERY_LIMIT ? ( + <> +
+ +
+ +

+ Find and apply jobs in seconds. +

+ +

+ Jobflow is your JobGpt. Start for free today. +

+ + ) : ( +
+
- - ) : ( -
- {!showResults || queryCount >= QUERY_LIMIT ? ( - // Show hero content when no results or query limit reached - <> -
- -
-

- Find and apply jobs in seconds. -

-

- Jobflow is your JobGpt. Start for free today. -

- - ) : ( - // Show job results when results should be displayed -
- +
- )} - - {/* Chat input always visible */} -
- -
- - {/* Only show suggestion buttons when no results */} - {(!showResults || queryCount >= QUERY_LIMIT) && ( -
- {['Recharts dashboard', 'Habit tracker', 'Real estate listings', 'Developer portfolio'].map((item) => ( - - ))} -
- )} + + {/* Suggestions buttons shown only when no results */} + {(!showResults || queryCount >= QUERY_LIMIT) && ( +
+ {['Recharts dashboard', 'Habit tracker', 'Real estate listings', 'Developer portfolio'].map((item) => ( + + ))} +
+ )}
- )} - - {/* Query Limit Popup */} + + {/* Popups */} {showPopup && } - - {/* Resume Upload Popup - show only after first signup */} {showResumePopup && } - + {/* Loading overlay */} {isApiLoading && (
@@ -205,4 +214,4 @@ const HeroSection = ({ isLoggedIn }: { isLoggedIn: boolean }) => { ); }; -export default HeroSection; \ No newline at end of file +export default HeroSection; diff --git a/src/app/(root)/(chat)/_components/job-result.tsx b/src/app/(root)/(chat)/_components/job-result.tsx index cb6f724..e536f21 100644 --- a/src/app/(root)/(chat)/_components/job-result.tsx +++ b/src/app/(root)/(chat)/_components/job-result.tsx @@ -84,90 +84,89 @@ const JobSearchResults = ({ query, onClose, apiData, isLoading = false }: JobSea

{job.job_description}

{/* Match Analysis Section */} -
- {/* Match Score Circle */} -
-
-
- - - - -
- - {job.match_analysis.match_percentage}% - + {job.match_analysis && typeof job.match_analysis.match_percentage === 'number' ? ( +
+ {/* Match Score Circle */} +
+
+
+ + + + +
+ + {job.match_analysis.match_percentage}% + +
-
-
-

Match Score

-
- Experience Match - {job.match_analysis.experience_match ? - : - - } +
+

Match Score

+
+ Experience Match + {job.match_analysis.experience_match ? + : + + } +
-
- - {/* Skills Analysis */} -
-
-
Skills Match
-
- {job.match_analysis.matched_skills.map((skill: string, index: number) => ( - - - {skill} - - ))} + {/* Skills Analysis */} +
+
+
Skills Match
+
+ {job.match_analysis.matched_skills.map((skill: string, index: number) => ( + + + {skill} + + ))} +
-
- -
-
Missing Skills
-
- {job.match_analysis.missing_skills.map((skill: string, index: number) => ( - - - {skill} - - ))} +
+
Missing Skills
+
+ {job.match_analysis.missing_skills.map((skill: string, index: number) => ( + + + {skill} + + ))} +
+
+
+
Analysis
+

{job.match_analysis.analysis}

-
- -
-
Analysis
-

{job.match_analysis.analysis}

-
+ ) : null}