mirror of
https://github.com/PinkSheep27/SBU-Hackathon.git
synced 2026-10-11 00:00:26 -04:00
Merge branch 'main' of https://github.com/PinkSheep27/SBU-Hackathon
This commit is contained in:
Ivan Rudik
+14
-9
@@ -15,26 +15,23 @@ export default function Dashboard() {
|
||||
setProjects(storedProjects);
|
||||
}, []);
|
||||
|
||||
// 5. Sorting logic now uses the state variable
|
||||
const sortedProjects = [...projects].sort((a, b) => {
|
||||
const dateA = new Date(a.id).getTime(); // Use 'id' (timestamp) for sorting
|
||||
const dateA = new Date(a.id).getTime();
|
||||
const dateB = new Date(b.id).getTime();
|
||||
|
||||
if (sortOrder === "newest") {
|
||||
return dateB - dateA; // Newest first
|
||||
return dateB - dateA;
|
||||
} else {
|
||||
return dateA - dateB; // Oldest first
|
||||
return dateA - dateB;
|
||||
}
|
||||
});
|
||||
|
||||
// 6. Filter the sorted projects
|
||||
const filtered = sortedProjects.filter((p) =>
|
||||
p.title.toLowerCase().includes(query.toLowerCase())
|
||||
);
|
||||
|
||||
// 7. Fix the "Create" button link
|
||||
const handleCreateClick = () => {
|
||||
window.location.href = "/formfile"; // Changed from "/dashbaord/create"
|
||||
window.location.href = "/formfile";
|
||||
};
|
||||
|
||||
const toggleSortOrder = () => {
|
||||
@@ -77,6 +74,12 @@ export default function Dashboard() {
|
||||
>
|
||||
Settings
|
||||
</p>
|
||||
<Link
|
||||
href="/auth/logout"
|
||||
className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
|
||||
>
|
||||
Logout
|
||||
</Link>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
@@ -106,7 +109,8 @@ export default function Dashboard() {
|
||||
</header>
|
||||
|
||||
<main className="max-w-7xl w-full mx-auto px-6 py-10">
|
||||
<h1 className="text-2xl font-semibold text-black dark:text-zinc-50 mb-4">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h1 className="text-2xl font-semibold text-black dark:text-zinc-50">
|
||||
Project Names
|
||||
</h1>
|
||||
<button
|
||||
@@ -121,10 +125,11 @@ export default function Dashboard() {
|
||||
>
|
||||
Sort by: {sortOrder === 'newest' ? 'Newest' : 'Oldest'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<ul className="space-y-3">
|
||||
{filtered.map((project, index) => (
|
||||
{filtered.map((project) => (
|
||||
<li
|
||||
key={project.id}
|
||||
className="flex justify-between p-4 bg-white dark:bg-zinc-900 border border-zinc-100 dark:border-zinc-800 rounded-md text-zinc-800 dark:text-zinc-100"
|
||||
|
||||
@@ -8,17 +8,19 @@ export async function POST(request: Request) {
|
||||
const { userMessage, history, settings } = await request.json() as {
|
||||
userMessage: string;
|
||||
history: ChatHistory;
|
||||
settings: ChatSetting;
|
||||
settings?: ChatSetting; // settings is optional from the request
|
||||
};
|
||||
|
||||
const aiResponse = await chatToGemini(userMessage, history, settings);
|
||||
return NextResponse.json({ response: aiResponse });
|
||||
// Call the Gemini helper function
|
||||
const geminiResponse = await chatToGemini(userMessage, history, settings || {});
|
||||
|
||||
return NextResponse.json({ response: geminiResponse });
|
||||
}
|
||||
catch (error) {
|
||||
console.error(error);
|
||||
return NextResponse.json(
|
||||
{ error: "Error with the model response " },
|
||||
{ status: 500 }
|
||||
{error: "Error with the model response " + String(error)},
|
||||
{status : 500}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
+21
-32
@@ -5,17 +5,15 @@ import { motion, useMotionValue, useTransform, useAnimation } from "framer-motio
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import { CardData } from "@/app/exportType/types";
|
||||
|
||||
// 1. Updated ColorWay interface
|
||||
interface ColorWay {
|
||||
card: string;
|
||||
text: string;
|
||||
titleColor: string;
|
||||
}
|
||||
|
||||
// 2. Updated COLOR_WAYS array
|
||||
const COLOR_WAYS: ColorWay[] = [
|
||||
{ card: "#FEEEDF", text: "#173C46", titleColor: "#173C46" },
|
||||
{ card: "#FEEEDF", text: "#EA627F", titleColor: "#173C46" }, // Example: Title is dark, text is pink
|
||||
{ card: "#FEEEDF", text: "#EA627F", titleColor: "#173C46" },
|
||||
{ card: "#DEE5D4", text: "#173C46", titleColor: "#EA627F" },
|
||||
{ card: "#DEE5D4", text: "#EA627F", titleColor: "#173C46" },
|
||||
{ card: "#B8C0AD", text: "#173C46", titleColor: "#173C46" },
|
||||
@@ -29,8 +27,6 @@ const parseAiResponse = (markdownString: string): CardData[] => {
|
||||
ideaBlocks.forEach((block, index) => {
|
||||
const titleMatch = block.match(/^(.*?)\n/);
|
||||
const conceptMatch = block.match(/\*\*Concept:\*\*\s*(.*)/s);
|
||||
|
||||
// Simple track parsing: find all bolded text that isn't a main header
|
||||
const tracksMatch = block.matchAll(/\*\*(?!Concept|Relevance|Core|Team|Bonus)(.*?):\*\*/g);
|
||||
const tracks = [...tracksMatch].map(match => match[1].trim());
|
||||
|
||||
@@ -38,7 +34,7 @@ const parseAiResponse = (markdownString: string): CardData[] => {
|
||||
id: index + 1,
|
||||
title: titleMatch ? titleMatch[1].trim() : `Idea ${index + 1}`,
|
||||
summary: conceptMatch ? conceptMatch[1].trim() : "No concept provided.",
|
||||
tracks: tracks.length > 0 ? tracks : ["General"], // Fallback
|
||||
tracks: tracks.length > 0 ? tracks : ["General"],
|
||||
});
|
||||
});
|
||||
return ideas;
|
||||
@@ -53,20 +49,17 @@ export default function CardsPage() {
|
||||
|
||||
const projectId = searchParams.get('projectId');
|
||||
const projectTitle = searchParams.get('projectTitle');
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window === 'undefined') return;
|
||||
|
||||
// **** MODIFIED THIS SECTION ****
|
||||
// Get the AI response from the form page
|
||||
const aiResponse = localStorage.getItem('temp_aiResponse');
|
||||
if (aiResponse) {
|
||||
localStorage.removeItem('temp_aiResponse'); // Clean up
|
||||
localStorage.removeItem('temp_aiResponse');
|
||||
const parsedCards = parseAiResponse(aiResponse);
|
||||
setCards(parsedCards.reverse());
|
||||
setInitialCards(parsedCards.reverse()); // Save for reset
|
||||
setInitialCards(parsedCards.reverse());
|
||||
} else {
|
||||
// Handle case where user lands here directly
|
||||
// Maybe redirect or show an error
|
||||
console.warn("No AI response found. Using hardcoded cards as fallback.");
|
||||
const hardcodedCards: CardData[] = [
|
||||
{ id: 1, title: "AI Project Idea 1", summary: "A cool project...", tracks: ["AI", "Web"] },
|
||||
@@ -76,7 +69,8 @@ export default function CardsPage() {
|
||||
setInitialCards(hardcodedCards.reverse());
|
||||
}
|
||||
setIsLoading(false);
|
||||
}, []); // Runs once on load
|
||||
}, []);
|
||||
|
||||
if (isLoading) {
|
||||
return <div className="grid h-screen w-full place-items-center bg-orange-100"><p>Loading cards...</p></div>
|
||||
}
|
||||
@@ -123,7 +117,6 @@ const SwipeCards: React.FC<SwipeCardsProps> = ({
|
||||
|
||||
const handleAccept = (cardData: CardData) => {
|
||||
removeCard();
|
||||
// Redirect to chatbot with card data
|
||||
router.push(`/chatbot?projectId=${encodeURIComponent(projectId)}&projectTitle=${encodeURIComponent(projectTitle)}&cardTitle=${encodeURIComponent(cardData.title)}&cardSummary=${encodeURIComponent(cardData.summary)}`);
|
||||
};
|
||||
|
||||
@@ -131,9 +124,7 @@ const SwipeCards: React.FC<SwipeCardsProps> = ({
|
||||
removeCard();
|
||||
};
|
||||
|
||||
// **** FIXED THIS FUNCTION ****
|
||||
const handleReset = () => {
|
||||
// This now resets the deck to the initial set of cards
|
||||
setCards(initialCards);
|
||||
};
|
||||
|
||||
@@ -190,7 +181,7 @@ interface CardProps {
|
||||
|
||||
const Card: React.FC<CardProps> = ({ cardData, colorWay, isFront, onAccept, onReject }) => {
|
||||
const { title, summary, tracks } = cardData;
|
||||
|
||||
const controls = useAnimation();
|
||||
const x = useMotionValue(0);
|
||||
const rotate = useTransform(x, [-250, 250], [-25, 25]);
|
||||
const opacity = useTransform(
|
||||
@@ -198,7 +189,6 @@ const Card: React.FC<CardProps> = ({ cardData, colorWay, isFront, onAccept, onRe
|
||||
[-250, -100, 0, 100, 250],
|
||||
[0, 1, 1, 1, 0],
|
||||
);
|
||||
const controls = useAnimation();
|
||||
|
||||
const acceptOpacity = useTransform(x, [50, 150], [0, 1]);
|
||||
const rejectOpacity = useTransform(x, [-150, -50], [1, 0]);
|
||||
@@ -218,7 +208,7 @@ const Card: React.FC<CardProps> = ({ cardData, colorWay, isFront, onAccept, onRe
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className="absolute flex h-[56rem] w-[42rem] flex-col justify-between overflow-hidden rounded-2xl p-6 shadow-2xl hover:cursor-grab active:cursor-grabbing"
|
||||
className="absolute flex h-[48rem] w-[36rem] flex-col justify-between overflow-hidden rounded-2xl p-6 shadow-2xl hover:cursor-grab active:cursor-grabbing"
|
||||
style={{
|
||||
x,
|
||||
rotate,
|
||||
@@ -228,13 +218,15 @@ const Card: React.FC<CardProps> = ({ cardData, colorWay, isFront, onAccept, onRe
|
||||
zIndex: isFront ? 2 : 1,
|
||||
pointerEvents: isFront ? "auto" : "none",
|
||||
}}
|
||||
animate={controls}
|
||||
animate={{
|
||||
scale: isFront ? 1 : 0.95,
|
||||
y: isFront ? 0 : -40,
|
||||
}}
|
||||
transition={{ type: "spring", stiffness: 300, damping: 30 }}
|
||||
drag={isFront ? "x" : false}
|
||||
dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }}
|
||||
onDragEnd={handleDragEnd}
|
||||
>
|
||||
{/* Accept/Reject Badges */}
|
||||
<motion.div
|
||||
className="absolute left-10 top-10 z-10 rounded-2xl border-8 border-green-500 px-10 py-4"
|
||||
style={{ opacity: acceptOpacity, rotate: badgeRotate }}
|
||||
@@ -245,29 +237,28 @@ const Card: React.FC<CardProps> = ({ cardData, colorWay, isFront, onAccept, onRe
|
||||
className="absolute right-10 top-10 z-10 rounded-2xl border-8 border-red-500 px-10 py-4"
|
||||
style={{ opacity: rejectOpacity, rotate: badgeRotate }}
|
||||
>
|
||||
<h3 className="text-5xl font-bold uppercase text-red-500">Reject</h3>
|
||||
<h3 className="text-s5xl font-bold uppercase text-red-500">Reject</h3>
|
||||
</motion.div>
|
||||
|
||||
{/* Card Content */}
|
||||
<div className="relative z-0">
|
||||
{/* 3. Applied the specific titleColor here */}
|
||||
<h2
|
||||
className="mb-4 text-center text-3xl font-bold"
|
||||
className="mb-4 text-center text-7xl font-bold"
|
||||
style={{ color: colorWay.titleColor }}
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
{/* This summary <p> will inherit colorWay.text from the parent */}
|
||||
<p className="text-center text-xl font-light">{summary}</p>
|
||||
<p className="text-center text-3xl font-light">{summary}</p>
|
||||
</div>
|
||||
|
||||
<div className="relative z-0 flex flex-wrap items-center justify-center gap-2">
|
||||
{tracks.slice(0, 2).map((track, index) => (
|
||||
<h3 className="mb-4 w-full text-center text-4xl font-semibold">
|
||||
Tracks
|
||||
</h3>
|
||||
{tracks.map((track) => (
|
||||
<span
|
||||
key={track}
|
||||
className="flex items-center justify-center rounded-full px-8 py-3 text-sm font-medium"
|
||||
className="flex items-center justify-center rounded-full px-8 py-3 text-2xl font-medium"
|
||||
style={{
|
||||
// This logic now correctly contrasts with the main text color
|
||||
backgroundColor:
|
||||
colorWay.text === "#ffffff"
|
||||
? "rgba(255, 255, 255, 0.2)"
|
||||
@@ -275,11 +266,9 @@ const Card: React.FC<CardProps> = ({ cardData, colorWay, isFront, onAccept, onRe
|
||||
}}
|
||||
>
|
||||
{track}
|
||||
{index === 0 && tracks.length > 1 && ", "}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
|
||||
};
|
||||
+24
-24
@@ -1,13 +1,12 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useRef, useCallback } from "react";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import { useState, useEffect, useRef, useCallback, Suspense } from "react";
|
||||
import { useSearchParams, useRouter } from "next/navigation";
|
||||
import ChatInput from "../utils/component/ui/ChatInput";
|
||||
import MessageWindow from "../utils/component/ui/MessageWindow";
|
||||
import { ChatHistory, ChatSetting, Message, MessageRole } from "@/app/exportType/types";
|
||||
import { getChatSessionByProjectId, saveChatSession } from "../utils/storage";
|
||||
|
||||
|
||||
function getInitialChatState(
|
||||
projectId: string | null,
|
||||
): ChatHistory {
|
||||
@@ -22,7 +21,16 @@ function getInitialChatState(
|
||||
}
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<Suspense fallback={<div>Loading chat...</div>}>
|
||||
<ChatbotContent />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
function ChatbotContent() {
|
||||
const searchParams = useSearchParams();
|
||||
const router = useRouter();
|
||||
const projectId = searchParams.get('projectId');
|
||||
const projectTitle = searchParams.get('projectTitle');
|
||||
const cardTitle = searchParams.get('cardTitle');
|
||||
@@ -30,18 +38,17 @@ export default function Home() {
|
||||
|
||||
const [history, setHistory] = useState<ChatHistory>(() => getInitialChatState(projectId));
|
||||
const [loading, setLoading] = useState(false);
|
||||
const historyRef = useRef<ChatHistory>(history); // Create a ref for history
|
||||
const historyRef = useRef<ChatHistory>(history);
|
||||
const [settings] = useState<ChatSetting>({
|
||||
temperature: 1,
|
||||
model: "gemini-2.5-pro",
|
||||
systemInstructions: "you are a ai helper. Your goal is to expand the project idea and interact with the user on any problem or question they have with the project. You are not allow to code the project for them and stray away from your job"
|
||||
|
||||
});
|
||||
|
||||
const initialMessageSent = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
historyRef.current = history; // Keep the ref updated with the latest history
|
||||
historyRef.current = history;
|
||||
if (history.length > 0 && projectId && projectTitle) {
|
||||
saveChatSession(projectId, projectTitle, history);
|
||||
}
|
||||
@@ -63,7 +70,7 @@ export default function Home() {
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
userMessage: message,
|
||||
history: historyRef.current, // Use the ref for history *before* the new user message
|
||||
history: historyRef.current,
|
||||
settings: settings,
|
||||
}),
|
||||
});
|
||||
@@ -73,7 +80,6 @@ export default function Home() {
|
||||
|
||||
if (data.error) {
|
||||
console.error("AI Error:", data.error);
|
||||
// Add an error message to chat
|
||||
const aiErrorMessage: Message = {
|
||||
role: "model",
|
||||
parts: [{ text: `Error: ${data.error}` }],
|
||||
@@ -87,8 +93,6 @@ export default function Home() {
|
||||
parts: [{ text: data.response }],
|
||||
};
|
||||
|
||||
// Set the final history with the AI response
|
||||
// This will trigger the useEffect to save
|
||||
setHistory(prevHistory => [...prevHistory, aiMessage]);
|
||||
|
||||
} catch (error) {
|
||||
@@ -100,16 +104,11 @@ export default function Home() {
|
||||
};
|
||||
setHistory(prevHistory => [...prevHistory, aiErrorMessage]);
|
||||
}
|
||||
}, [settings, projectId, projectTitle]); // Added projectId and projectTitle
|
||||
}, [settings, projectId, projectTitle]);
|
||||
|
||||
// This effect handles the *very first* message when selecting a card
|
||||
useEffect(() => {
|
||||
// Only run if:
|
||||
// 1. We have a cardTitle (meaning we came from the cards page)
|
||||
// 2. The history is empty (it's a new chat)
|
||||
// 3. We haven't already tried to send this (initialMessageSent ref)
|
||||
if (cardTitle && cardSummary && history.length === 0 && !initialMessageSent.current) {
|
||||
initialMessageSent.current = true; // Mark as "attempted"
|
||||
initialMessageSent.current = true;
|
||||
setLoading(true);
|
||||
|
||||
const message = `Explain the project titled '${cardTitle}' with the summary '${cardSummary}' in detail, and suggest suitable roles for a team working on it.`;
|
||||
@@ -119,8 +118,6 @@ export default function Home() {
|
||||
parts: [{ text: message }],
|
||||
};
|
||||
|
||||
// Add user message to history
|
||||
// The useEffect for 'history' will save this
|
||||
setHistory([newUserMessage]);
|
||||
|
||||
const sendInitialApiRequest = async () => {
|
||||
@@ -130,7 +127,7 @@ export default function Home() {
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
userMessage: message,
|
||||
history: [], // Send empty history for the first message
|
||||
history: [],
|
||||
settings: settings,
|
||||
}),
|
||||
});
|
||||
@@ -140,6 +137,7 @@ export default function Home() {
|
||||
|
||||
if (data.error) {
|
||||
console.error("AI Error:", data.error);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -148,8 +146,6 @@ export default function Home() {
|
||||
parts: [{ text: data.response }],
|
||||
};
|
||||
|
||||
// Add AI response
|
||||
// The useEffect for 'history' will save this new state
|
||||
setHistory((prevHistory) => [...prevHistory, aiMessage]);
|
||||
} catch (error) {
|
||||
console.error("Request Failed:", error);
|
||||
@@ -161,10 +157,14 @@ export default function Home() {
|
||||
}
|
||||
}, [cardTitle, cardSummary, history.length, settings, projectId, projectTitle]);
|
||||
|
||||
|
||||
return (
|
||||
<div className="flex flex-col py-32">
|
||||
{/* Pass loading state to MessageWindow */}
|
||||
<button
|
||||
onClick={() => router.push('/Dashboard')}
|
||||
className="absolute top-4 right-4 bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
|
||||
>
|
||||
Exit
|
||||
</button>
|
||||
<MessageWindow history={history} isLoading={loading} />
|
||||
<ChatInput onSend={handleSend} onOpenSettings={() => { }} />
|
||||
</div>
|
||||
|
||||
+54
-121
@@ -2,6 +2,7 @@
|
||||
|
||||
import React, { useState } from "react";
|
||||
import { motion, useMotionValue, useTransform } from "framer-motion";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
// Removed local fallback JSX declaration — use the official React type definitions instead:
|
||||
// install @types/react and @types/react-dom so JSX.IntrinsicElements is provided by those packages.
|
||||
@@ -29,126 +30,49 @@ interface CardData {
|
||||
tracks: string[];
|
||||
}
|
||||
|
||||
const cardData: CardData[] = [
|
||||
{
|
||||
|
||||
id: 1,
|
||||
|
||||
title: " WEBSITE",
|
||||
interface SwipeCardsProps {
|
||||
initialCards: CardData[];
|
||||
}
|
||||
|
||||
summary:
|
||||
|
||||
"FFind out what makes GoonMAXXER unique.With this innovative website you will be able to explore various features and functionalities that set GoonMAXXER apart from the rest.",
|
||||
|
||||
tracks: ["Gemini", "Auth0", "VibeCODING", "SmellyMaxxing", "shitposting"],
|
||||
|
||||
},
|
||||
|
||||
{
|
||||
|
||||
id: 2,
|
||||
|
||||
title: "Intro to React",
|
||||
|
||||
summary:
|
||||
|
||||
"Learn the fundamentals of React, including components, state, and props.",
|
||||
|
||||
tracks: ["React", "JS", "Frontend"],
|
||||
|
||||
},
|
||||
|
||||
{
|
||||
|
||||
id: 3,
|
||||
|
||||
title: "State Management",
|
||||
|
||||
summary:
|
||||
|
||||
"Explore complex state solutions with Zustand, Redux, and Context API.",
|
||||
|
||||
tracks: ["React", "Zustand", "State"],
|
||||
|
||||
},
|
||||
|
||||
{
|
||||
|
||||
id: 4,
|
||||
|
||||
title: "Next.js 14",
|
||||
|
||||
summary: "Master the app router, server actions, and data fetching.",
|
||||
|
||||
tracks: ["Next.js", "React", "Fullstack"],
|
||||
|
||||
},
|
||||
|
||||
{
|
||||
|
||||
id: 5,
|
||||
|
||||
title: "UI/UX Principles",
|
||||
|
||||
summary:
|
||||
|
||||
"A complete guide to user-centric design, prototyping, and testing.",
|
||||
|
||||
tracks: ["Design", "UI", "UX"],
|
||||
|
||||
},
|
||||
|
||||
{
|
||||
|
||||
id: 6,
|
||||
|
||||
title: "Node.js Essentials",
|
||||
|
||||
summary:
|
||||
|
||||
"Build scalable, high-performance backend applications with Node.js.",
|
||||
|
||||
tracks: ["Node", "Backend", "JS"],
|
||||
|
||||
},
|
||||
|
||||
{
|
||||
|
||||
id: 7,
|
||||
|
||||
title: "TypeScript",
|
||||
|
||||
summary:
|
||||
|
||||
"Add static typing to your JavaScript projects for robust, large-scale apps.",
|
||||
|
||||
tracks: ["TypeScript", "JS", "DevOps"],
|
||||
|
||||
},
|
||||
|
||||
{
|
||||
|
||||
id: 8,
|
||||
|
||||
title: "Framer Motion",
|
||||
|
||||
summary: "Create production-ready animations for your React applications.",
|
||||
|
||||
tracks: ["React", "Animation", "Framer"],
|
||||
|
||||
},
|
||||
|
||||
].reverse();
|
||||
|
||||
const SwipeCards: React.FC = () => {
|
||||
const [cards, setCards] = useState<CardData[]>(cardData);
|
||||
const SwipeCards: React.FC<SwipeCardsProps> = ({ initialCards }) => {
|
||||
const [cards, setCards] = useState<CardData[]>(initialCards);
|
||||
const router = useRouter();
|
||||
|
||||
const onSwipe = () => {
|
||||
setCards((prev) => prev.slice(0, prev.length - 1));
|
||||
};
|
||||
|
||||
const handleRightSwipe = async (card: CardData) => {
|
||||
try {
|
||||
const response = await fetch("/api/chat", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
userMessage: `Explain the project: ${card.title}. Summary: ${card.summary}. Tracks: ${card.tracks.join(", ")}`,
|
||||
history: [], // Provide an empty array for history
|
||||
}),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorBody = await response.text(); // Read the response body
|
||||
throw new Error(`HTTP error! status: ${response.status}, body: ${errorBody}`);
|
||||
}
|
||||
|
||||
// Assuming the chat API handles the message and we can then navigate
|
||||
router.push(`/chatbot?title=${encodeURIComponent(card.title)}&summary=${encodeURIComponent(card.summary)}`);
|
||||
} catch (error) {
|
||||
console.error("Error sending project to chatbot:", error);
|
||||
// Optionally, handle error state or show a message to the user
|
||||
}
|
||||
onSwipe(); // Remove the card after swiping right
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
setCards(cardData);
|
||||
setCards(initialCards);
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -171,6 +95,7 @@ const SwipeCards: React.FC = () => {
|
||||
colorWay={colorWay}
|
||||
isFront={index === cards.length - 1}
|
||||
onSwipe={onSwipe}
|
||||
onRightSwipe={handleRightSwipe}
|
||||
/>
|
||||
);
|
||||
})
|
||||
@@ -199,10 +124,11 @@ interface CardProps {
|
||||
cardData: CardData;
|
||||
colorWay: ColorWay;
|
||||
isFront: boolean;
|
||||
onSwipe: () => void;
|
||||
onSwipe: () => void; // For left swipe (reject)
|
||||
onRightSwipe: (card: CardData) => void; // For right swipe (accept)
|
||||
}
|
||||
|
||||
const Card: React.FC<CardProps> = ({ cardData, colorWay, isFront, onSwipe }) => {
|
||||
const Card: React.FC<CardProps> = ({ cardData, colorWay, isFront, onSwipe, onRightSwipe }) => {
|
||||
const { title, summary, tracks } = cardData;
|
||||
|
||||
const x = useMotionValue(0);
|
||||
@@ -218,14 +144,18 @@ const Card: React.FC<CardProps> = ({ cardData, colorWay, isFront, onSwipe }) =>
|
||||
const badgeRotate = useTransform(x, [-150, 150], [-15, 15]);
|
||||
|
||||
const handleDragEnd = (event: MouseEvent | TouchEvent | PointerEvent, info: { offset: { x: number } }) => {
|
||||
if (Math.abs(info.offset.x) > 100) {
|
||||
if (info.offset.x > 100) {
|
||||
// Swiped right
|
||||
onRightSwipe(cardData);
|
||||
} else if (info.offset.x < -100) {
|
||||
// Swiped left
|
||||
onSwipe();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className="absolute flex h-[48rem] w-[36rem] flex-col justify-between overflow-hidden rounded-2xl p-6 shadow-2xl hover:cursor-grab active:cursor-grabbing"
|
||||
className="absolute flex h-[40rem] w-[30rem] flex-col justify-between overflow-hidden rounded-2xl p-6 shadow-2xl hover:cursor-grab active:cursor-grabbing"
|
||||
style={{
|
||||
x,
|
||||
rotate,
|
||||
@@ -243,43 +173,46 @@ const Card: React.FC<CardProps> = ({ cardData, colorWay, isFront, onSwipe }) =>
|
||||
drag={isFront ? "x" : false}
|
||||
dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }}
|
||||
onDragEnd={handleDragEnd}
|
||||
initial={{ x: 500, opacity: 0 }} // Start off-screen to the right and invisible
|
||||
animate={{ x: 0, opacity: 1 }} // Animate to its natural position and fully visible
|
||||
transition={{ type: "spring", stiffness: 100, damping: 20 }} // Smooth spring animation
|
||||
>
|
||||
{/* Accept/Reject Badges */}
|
||||
<motion.div
|
||||
className="absolute left-10 top-10 z-10 rounded-2xl border-8 border-green-500 px-10 py-4"
|
||||
style={{ opacity: acceptOpacity, rotate: badgeRotate }}
|
||||
>
|
||||
<h3 className="text-5xl font-bold uppercase text-green-500">Accept</h3>
|
||||
<h3 className="text-2xl font-bold uppercase text-green-500">Accept</h3>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
className="absolute right-10 top-10 z-10 rounded-2xl border-8 border-red-500 px-10 py-4"
|
||||
style={{ opacity: rejectOpacity, rotate: badgeRotate }}
|
||||
>
|
||||
<h3 className="text-5xl font-bold uppercase text-red-500">Reject</h3>
|
||||
<h3 className="text-2xl font-bold uppercase text-red-500">Reject</h3>
|
||||
</motion.div>
|
||||
|
||||
{/* Card Content */}
|
||||
<div className="relative z-0">
|
||||
{/* 3. Applied the specific titleColor here */}
|
||||
<h2
|
||||
className="mb-4 text-center text-7xl font-bold"
|
||||
className="mb-4 text-center text-2xl font-bold"
|
||||
style={{ color: colorWay.titleColor }}
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
{/* This summary <p> will inherit colorWay.text from the parent */}
|
||||
<p className="text-center text-3xl font-light">{summary}</p>
|
||||
<p className="text-center text-sm font-light">{summary}</p>
|
||||
</div>
|
||||
|
||||
<div className="relative z-0 flex flex-wrap items-center justify-center gap-2">
|
||||
{/* This <h3> will also inherit colorWay.text */}
|
||||
<h3 className="mb-4 w-full text-center text-4xl font-semibold">
|
||||
<h3 className="mb-4 w-full text-center text-md font-semibold">
|
||||
Tracks
|
||||
</h3>
|
||||
{tracks.map((track) => (
|
||||
<span
|
||||
key={track}
|
||||
className="flex items-center justify-center rounded-full px-8 py-3 text-2xl font-medium"
|
||||
className="flex items-center justify-center rounded-full px-2 py-1 text-xs font-medium"
|
||||
style={{
|
||||
// This logic now correctly contrasts with the main text color
|
||||
backgroundColor:
|
||||
|
||||
@@ -23,7 +23,8 @@ export default async function handler(
|
||||
}
|
||||
|
||||
// Destructure the data sent from the frontend
|
||||
let { prompt, settings } = req.body;
|
||||
let prompt = req.body.prompt;
|
||||
const settings = req.body.settings;
|
||||
|
||||
// Basic validation
|
||||
if (!prompt || typeof prompt !== 'string') {
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import FormPage from './FormPage';
|
||||
import { CardData } from "../exportType/types";
|
||||
import { ChatSetting } from "../exportType/types";
|
||||
import { FormData, PROFICIENCY_LEVELS } from './formTypes';
|
||||
import { saveProject } from '../utils/storage';
|
||||
@@ -41,7 +42,6 @@ const getInitialState = () => {
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
const AI_SETTINGS: ChatSetting = {
|
||||
temperature: 1,
|
||||
model: "gemini-2.5-pro",
|
||||
@@ -56,19 +56,15 @@ const AI_SETTINGS: ChatSetting = {
|
||||
};
|
||||
|
||||
export default function Home() {
|
||||
|
||||
const [initialState] = useState(getInitialState);
|
||||
const [showForm, setShowForm] = useState(initialState.showForm);
|
||||
const [formData, setFormData] = useState<FormData>(initialState.data);
|
||||
const [ideaResponse, setIdeaResponse] = useState<string>("");
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const handleFormSubmitFromFormPage = (submittedData: FormData) => {
|
||||
const savedProject = saveProject(submittedData);
|
||||
|
||||
if (typeof window !== 'undefined') localStorage.removeItem('formData');
|
||||
|
||||
setFormData(submittedData);
|
||||
setShowForm(false);
|
||||
generateIdeas(submittedData, savedProject.id);
|
||||
@@ -96,7 +92,6 @@ export default function Home() {
|
||||
|
||||
Using the SYSTEM INSTRUCTIONS, generate 5 project ideas based on the data above.`;
|
||||
|
||||
// 3. API Call
|
||||
try {
|
||||
setIdeaResponse("Generating ideas... Please wait.");
|
||||
|
||||
@@ -132,14 +127,12 @@ export default function Home() {
|
||||
}
|
||||
}, [router]);
|
||||
|
||||
// Replaced useEffect
|
||||
useEffect(() => {
|
||||
if (initialState.runEffect) {
|
||||
//generateIdeas(initialState.data, "some-resumed-id");
|
||||
// generateIdeas(initialState.data, "some-resumed-id");
|
||||
}
|
||||
}, [initialState, generateIdeas]);
|
||||
|
||||
// --- JSX Rendering ---
|
||||
return (
|
||||
<main className="min-h-screen bg-gray-50 flex items-start justify-center p-4 sm:p-6 font-inter">
|
||||
<div className="w-full max-w-2xl bg-white p-8 shadow-2xl rounded-xl mt-8">
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Concert+One&family=Pixelify+Sans:wght@400;700&display=swap');
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
@@ -28,3 +29,4 @@ body {
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
font-family: var(--font-header);
|
||||
}
|
||||
|
||||
|
||||
+6
-6
@@ -9,9 +9,9 @@ export default function Home() {
|
||||
>
|
||||
<header className="absolute top-6 left-8 right-8 flex items-center justify-between text-sm font-medium text-zinc-700 dark:text-zinc-300">
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/next.svg"
|
||||
alt="Next.js logo"
|
||||
|
||||
src="/logo.svg"
|
||||
alt="logo.js logo"
|
||||
width={100}
|
||||
height={20}
|
||||
priority
|
||||
@@ -20,6 +20,9 @@ export default function Home() {
|
||||
<Link href="/Dashboard" className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
|
||||
Dashboard
|
||||
</Link>
|
||||
<Link href="/cards" className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
|
||||
Cards
|
||||
</Link>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -62,13 +65,10 @@ export default function Home() {
|
||||
style={{ backgroundColor: "#DEE5D4" }}
|
||||
className="w-full rounded-xl mt-32"
|
||||
>
|
||||
{/* <section className="mt-32 w-full flex flex-col items-start gap-12"> */}
|
||||
<section className="px-16 py-18 flex flex-col items-start gap-12 max-w-[1200px] mx-auto">
|
||||
{/* <div> */}
|
||||
<h2 className="text-[28px] font-semibold text-black dark:text-zinc-50 leading-9">
|
||||
Guide:
|
||||
</h2>
|
||||
{/* </div> */}
|
||||
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-8 w-full">
|
||||
<div
|
||||
|
||||
@@ -68,6 +68,20 @@ export default function MessageWindow({ history, isLoading }: MessageWindowProps
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isLoading && (
|
||||
<div className="flex justify-start">
|
||||
<div className="mr-2">
|
||||
<div className="flex items-center justify-center w-8 h-8 rounded-full bg-gray">
|
||||
<Bot size={15} className="text-gray-700" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-4 py-2 shadow-sm rounded-lg bg-white text-gray-800 rounded-bl-none max-w-xs sm:max-w-md">
|
||||
<div className="whitespace-pre-wrap break-words">
|
||||
<span>Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{/* Invisible element to help scroll to bottom */}
|
||||
<div ref={messageEndRef} />
|
||||
</div>
|
||||
|
||||
+14
-10
@@ -10,18 +10,18 @@ if (!apiKey) {
|
||||
const genAI = new GoogleGenerativeAI(apiKey);
|
||||
|
||||
export async function chatToGemini(
|
||||
userMessage: string,
|
||||
history: ChatHistory,
|
||||
settings: ChatSetting
|
||||
): Promise<string> {
|
||||
userMessage:string ,
|
||||
history:ChatHistory,
|
||||
settings:ChatSetting
|
||||
):Promise<string>{
|
||||
const model = genAI.getGenerativeModel({
|
||||
model: settings.model || "gemini-2.5-flash",
|
||||
model:settings.model || "gemini-2.5-flash",
|
||||
systemInstruction: settings.systemInstructions || "you are going to create a project idea, explain it in summery first before going to detail",
|
||||
});
|
||||
|
||||
const generationConfig: GenerateConfig = {
|
||||
temperature: settings.temperature || 1,
|
||||
topP: 0.9,
|
||||
const generationConfig:GenerateConfig = {
|
||||
temperature : settings.temperature || 1,
|
||||
topP : 0.9,
|
||||
responseMimeType: "text/plain",
|
||||
maxOutputTokens: 1900, // Increased to allow for longer responses
|
||||
}
|
||||
@@ -35,8 +35,12 @@ export async function chatToGemini(
|
||||
const result = await chatSession.sendMessage(userMessage);
|
||||
return result.response.text();
|
||||
}
|
||||
catch (error) {
|
||||
console.error("Gemini API Error:", error);
|
||||
catch (error: unknown) {
|
||||
if (error instanceof Error) {
|
||||
console.error("Error in chatToGemini:", error.name, error.message, error);
|
||||
} else {
|
||||
console.error("Unknown error in chatToGemini:", error);
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
Generated
+12
@@ -66,6 +66,7 @@
|
||||
"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz",
|
||||
"integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
|
||||
"dev": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@babel/code-frame": "^7.27.1",
|
||||
"@babel/generator": "^7.28.5",
|
||||
@@ -1470,6 +1471,7 @@
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
|
||||
"integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
|
||||
"dev": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"csstype": "^3.0.2"
|
||||
}
|
||||
@@ -1526,6 +1528,7 @@
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.46.3.tgz",
|
||||
"integrity": "sha512-6m1I5RmHBGTnUGS113G04DMu3CpSdxCAU/UvtjNWL4Nuf3MW9tQhiJqRlHzChIkhy6kZSAQmc+I1bcGjE3yNKg==",
|
||||
"dev": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@typescript-eslint/scope-manager": "8.46.3",
|
||||
"@typescript-eslint/types": "8.46.3",
|
||||
@@ -2023,6 +2026,7 @@
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
|
||||
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
|
||||
"dev": true,
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"acorn": "bin/acorn"
|
||||
},
|
||||
@@ -2341,6 +2345,7 @@
|
||||
"url": "https://github.com/sponsors/ai"
|
||||
}
|
||||
],
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"baseline-browser-mapping": "^2.8.19",
|
||||
"caniuse-lite": "^1.0.30001751",
|
||||
@@ -2870,6 +2875,7 @@
|
||||
"resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.1.tgz",
|
||||
"integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
|
||||
"dev": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@eslint-community/eslint-utils": "^4.8.0",
|
||||
"@eslint-community/regexpp": "^4.12.1",
|
||||
@@ -3047,6 +3053,7 @@
|
||||
"resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.32.0.tgz",
|
||||
"integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
|
||||
"dev": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@rtsao/scc": "^1.1.0",
|
||||
"array-includes": "^3.1.9",
|
||||
@@ -5123,6 +5130,7 @@
|
||||
"version": "19.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
|
||||
"integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
@@ -5131,6 +5139,7 @@
|
||||
"version": "19.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
|
||||
"integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"scheduler": "^0.27.0"
|
||||
},
|
||||
@@ -5776,6 +5785,7 @@
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
|
||||
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
|
||||
"dev": true,
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
@@ -5927,6 +5937,7 @@
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
|
||||
"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
|
||||
"dev": true,
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"tsc": "bin/tsc",
|
||||
"tsserver": "bin/tsserver"
|
||||
@@ -6187,6 +6198,7 @@
|
||||
"resolved": "https://registry.npmjs.org/zod/-/zod-4.1.12.tgz",
|
||||
"integrity": "sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==",
|
||||
"dev": true,
|
||||
"peer": true,
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/colinhacks"
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user