mirror of
https://github.com/massbug/judge4c.git
synced 2025-05-18 07:16:34 +00:00
refactor(app/problems/[id]): restructure components into features directory with index exports
This commit is contained in:
parent
787f91b743
commit
8d7d88511e
@ -1,15 +0,0 @@
|
|||||||
interface BotLayoutProps {
|
|
||||||
children: React.ReactNode;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function BotLayout({
|
|
||||||
children,
|
|
||||||
}: BotLayoutProps) {
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col h-full">
|
|
||||||
<div className="relative flex-1 border-x border-muted">
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,110 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { toast } from "sonner";
|
|
||||||
import { useCallback } from "react";
|
|
||||||
import { useChat } from "@ai-sdk/react";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { useProblem } from "@/hooks/use-problem";
|
|
||||||
import MdxPreview from "@/components/mdx-preview";
|
|
||||||
import { Textarea } from "@/components/ui/textarea";
|
|
||||||
import { BotIcon, SendHorizonal } from "lucide-react";
|
|
||||||
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
|
|
||||||
import { ChatMessageList } from "@/components/ui/chat/chat-message-list";
|
|
||||||
import { ChatBubble, ChatBubbleMessage } from "@/components/ui/chat/chat-bubble";
|
|
||||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
|
|
||||||
|
|
||||||
export default function AiBotPage() {
|
|
||||||
const { problemId, problem, currentLang, currentValue } = useProblem();
|
|
||||||
const { messages, input, handleInputChange, setMessages, handleSubmit } = useChat({
|
|
||||||
initialMessages: [
|
|
||||||
{
|
|
||||||
id: problemId,
|
|
||||||
role: "system",
|
|
||||||
content: `Problem description:\n${problem.description}`,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
});
|
|
||||||
|
|
||||||
const handleFormSubmit = useCallback(
|
|
||||||
(e: React.FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
if (!input.trim()) {
|
|
||||||
toast.error("Input cannot be empty");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const currentCodeMessage = {
|
|
||||||
id: problemId,
|
|
||||||
role: "system" as const,
|
|
||||||
content: `Current code:\n\`\`\`${currentLang}\n${currentValue}\n\`\`\``,
|
|
||||||
};
|
|
||||||
|
|
||||||
setMessages((prev) => [...prev, currentCodeMessage]);
|
|
||||||
handleSubmit();
|
|
||||||
},
|
|
||||||
[currentLang, currentValue, handleSubmit, input, problemId, setMessages]
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col h-full bg-background">
|
|
||||||
<div className="flex-1 relative">
|
|
||||||
{!messages.some((message) => message.role === "user" || message.role === "assistant") && (
|
|
||||||
<div className="absolute bottom-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-muted-foreground flex flex-col items-center gap-2">
|
|
||||||
<BotIcon />
|
|
||||||
<span>Ask Bot</span>
|
|
||||||
<span className="font-thin text-xs">Powered by Vercel Ai SDK</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-238px)] [&>[data-radix-scroll-area-viewport]>div:min-w-0 [&>[data-radix-scroll-area-viewport]>div]:!block">
|
|
||||||
<ChatMessageList>
|
|
||||||
{messages
|
|
||||||
.filter((message) => message.role === "user" || message.role === "assistant")
|
|
||||||
.map((message) => (
|
|
||||||
<ChatBubble key={message.id} layout="ai" className="border-b pb-4">
|
|
||||||
<ChatBubbleMessage layout="ai">
|
|
||||||
<MdxPreview source={message.content} />
|
|
||||||
</ChatBubbleMessage>
|
|
||||||
</ChatBubble>
|
|
||||||
))}
|
|
||||||
</ChatMessageList>
|
|
||||||
<ScrollBar orientation="horizontal" />
|
|
||||||
</ScrollArea>
|
|
||||||
</div>
|
|
||||||
<footer className="h-36 flex flex-none">
|
|
||||||
<form onSubmit={handleFormSubmit} className="w-full p-4 pt-0 relative">
|
|
||||||
<Textarea
|
|
||||||
value={input}
|
|
||||||
onChange={handleInputChange}
|
|
||||||
onKeyDown={(e) => {
|
|
||||||
if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
|
|
||||||
e.preventDefault();
|
|
||||||
if (input.trim()) {
|
|
||||||
handleFormSubmit(e);
|
|
||||||
} else {
|
|
||||||
toast.error("Input cannot be empty");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
className="h-full bg-muted border-transparent shadow-none rounded-lg"
|
|
||||||
placeholder="Bot will automatically get your current code"
|
|
||||||
/>
|
|
||||||
<TooltipProvider delayDuration={0}>
|
|
||||||
<Tooltip>
|
|
||||||
<TooltipTrigger asChild>
|
|
||||||
<Button
|
|
||||||
type="submit"
|
|
||||||
variant="ghost"
|
|
||||||
className="absolute bottom-6 right-6 h-6 w-auto px-2"
|
|
||||||
aria-label="Send Message"
|
|
||||||
>
|
|
||||||
<SendHorizonal className="size-4" />
|
|
||||||
</Button>
|
|
||||||
</TooltipTrigger>
|
|
||||||
<TooltipContent className="px-2 py-1 text-xs">Ctrl + Enter</TooltipContent>
|
|
||||||
</Tooltip>
|
|
||||||
</TooltipProvider>
|
|
||||||
</form>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,9 +0,0 @@
|
|||||||
import { ProblemEditor } from "@/components/problem-editor";
|
|
||||||
|
|
||||||
export default function CodePage() {
|
|
||||||
return (
|
|
||||||
<div className="absolute w-full h-full">
|
|
||||||
<ProblemEditor />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { notFound } from "next/navigation";
|
|
||||||
import { useProblem } from "@/hooks/use-problem";
|
|
||||||
import ProblemDescriptionFooter from "@/components/features/playground/problem/description/footer";
|
|
||||||
|
|
||||||
interface DescriptionLayoutProps {
|
|
||||||
children: React.ReactNode;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function DescriptionLayout({ children }: DescriptionLayoutProps) {
|
|
||||||
const { problem } = useProblem();
|
|
||||||
|
|
||||||
if (!problem) {
|
|
||||||
notFound();
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col h-full">
|
|
||||||
<main className="relative flex-1 border-x border-muted">
|
|
||||||
{children}
|
|
||||||
</main>
|
|
||||||
<ProblemDescriptionFooter title={problem.title} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,23 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { notFound } from "next/navigation";
|
|
||||||
import { useProblem } from "@/hooks/use-problem";
|
|
||||||
import MdxPreview from "@/components/mdx-preview";
|
|
||||||
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
|
|
||||||
|
|
||||||
export default function DescriptionPage() {
|
|
||||||
const { problem } = useProblem();
|
|
||||||
|
|
||||||
if (!problem) {
|
|
||||||
notFound();
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="absolute h-full w-full">
|
|
||||||
<ScrollArea className="h-full [&>[data-radix-scroll-area-viewport]>div:min-w-0 [&>[data-radix-scroll-area-viewport]>div]:!block bg-background">
|
|
||||||
<MdxPreview source={problem.description} className="p-4 md:p-6" />
|
|
||||||
<ScrollBar orientation="horizontal" />
|
|
||||||
</ScrollArea>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,28 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { notFound } from "next/navigation";
|
|
||||||
import { useProblem } from "@/hooks/use-problem";
|
|
||||||
import ProblemSolutionFooter from "@/components/features/playground/problem/solution/footer";
|
|
||||||
|
|
||||||
interface SolutionsLayoutProps {
|
|
||||||
children: React.ReactNode;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function SolutionsLayout({
|
|
||||||
children,
|
|
||||||
}: SolutionsLayoutProps) {
|
|
||||||
const { problem } = useProblem();
|
|
||||||
|
|
||||||
if (!problem) {
|
|
||||||
notFound();
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col h-full">
|
|
||||||
<div className="relative flex-1 border-x border-muted">
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
<ProblemSolutionFooter title={problem.title} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,23 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { notFound } from "next/navigation";
|
|
||||||
import { useProblem } from "@/hooks/use-problem";
|
|
||||||
import MdxPreview from "@/components/mdx-preview";
|
|
||||||
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
|
|
||||||
|
|
||||||
export default function SolutionsPage() {
|
|
||||||
const { problem } = useProblem();
|
|
||||||
|
|
||||||
if (!problem) {
|
|
||||||
notFound();
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="absolute h-full w-full">
|
|
||||||
<ScrollArea className="h-full [&>[data-radix-scroll-area-viewport]>div:min-w-0 [&>[data-radix-scroll-area-viewport]>div]:!block bg-background">
|
|
||||||
<MdxPreview source={problem.solution} className="p-4 md:p-6" />
|
|
||||||
<ScrollBar orientation="horizontal" />
|
|
||||||
</ScrollArea>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
123
src/app/(app)/problems/[id]/features/bot.tsx
Normal file
123
src/app/(app)/problems/[id]/features/bot.tsx
Normal file
@ -0,0 +1,123 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import {
|
||||||
|
Tooltip,
|
||||||
|
TooltipContent,
|
||||||
|
TooltipProvider,
|
||||||
|
TooltipTrigger,
|
||||||
|
} from "@/components/ui/tooltip";
|
||||||
|
import { useCallback } from "react";
|
||||||
|
import { useChat } from "@ai-sdk/react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { useProblem } from "@/hooks/use-problem";
|
||||||
|
import MdxPreview from "@/components/mdx-preview";
|
||||||
|
import { Textarea } from "@/components/ui/textarea";
|
||||||
|
import { BotIcon, SendHorizonal } from "lucide-react";
|
||||||
|
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
|
||||||
|
import { ChatMessageList } from "@/components/ui/chat/chat-message-list";
|
||||||
|
import { ChatBubble, ChatBubbleMessage } from "@/components/ui/chat/chat-bubble";
|
||||||
|
|
||||||
|
export default function Bot() {
|
||||||
|
const { problemId, problem, currentLang, currentValue } = useProblem();
|
||||||
|
const { messages, input, handleInputChange, setMessages, handleSubmit } = useChat({
|
||||||
|
initialMessages: [
|
||||||
|
{
|
||||||
|
id: problemId,
|
||||||
|
role: "system",
|
||||||
|
content: `Problem description:\n${problem.description}`,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleFormSubmit = useCallback(
|
||||||
|
(e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (!input.trim()) {
|
||||||
|
toast.error("Input cannot be empty");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const currentCodeMessage = {
|
||||||
|
id: problemId,
|
||||||
|
role: "system" as const,
|
||||||
|
content: `Current code:\n\`\`\`${currentLang}\n${currentValue}\n\`\`\``,
|
||||||
|
};
|
||||||
|
|
||||||
|
setMessages((prev) => [...prev, currentCodeMessage]);
|
||||||
|
handleSubmit();
|
||||||
|
},
|
||||||
|
[currentLang, currentValue, handleSubmit, input, problemId, setMessages]
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col h-full">
|
||||||
|
<div className="relative flex-1 border-x border-muted">
|
||||||
|
<div className="flex flex-col h-full bg-background">
|
||||||
|
<div className="flex-1 relative">
|
||||||
|
{!messages.some(
|
||||||
|
(message) => message.role === "user" || message.role === "assistant"
|
||||||
|
) && (
|
||||||
|
<div className="absolute bottom-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-muted-foreground flex flex-col items-center gap-2">
|
||||||
|
<BotIcon />
|
||||||
|
<span>Ask Bot</span>
|
||||||
|
<span className="font-thin text-xs">Powered by Vercel Ai SDK</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-238px)] [&>[data-radix-scroll-area-viewport]>div:min-w-0 [&>[data-radix-scroll-area-viewport]>div]:!block">
|
||||||
|
<ChatMessageList>
|
||||||
|
{messages
|
||||||
|
.filter(
|
||||||
|
(message) => message.role === "user" || message.role === "assistant"
|
||||||
|
)
|
||||||
|
.map((message) => (
|
||||||
|
<ChatBubble key={message.id} layout="ai" className="border-b pb-4">
|
||||||
|
<ChatBubbleMessage layout="ai">
|
||||||
|
<MdxPreview source={message.content} />
|
||||||
|
</ChatBubbleMessage>
|
||||||
|
</ChatBubble>
|
||||||
|
))}
|
||||||
|
</ChatMessageList>
|
||||||
|
<ScrollBar orientation="horizontal" />
|
||||||
|
</ScrollArea>
|
||||||
|
</div>
|
||||||
|
<footer className="h-36 flex flex-none">
|
||||||
|
<form onSubmit={handleFormSubmit} className="w-full p-4 pt-0 relative">
|
||||||
|
<Textarea
|
||||||
|
value={input}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
|
||||||
|
e.preventDefault();
|
||||||
|
if (input.trim()) {
|
||||||
|
handleFormSubmit(e);
|
||||||
|
} else {
|
||||||
|
toast.error("Input cannot be empty");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className="h-full bg-muted border-transparent shadow-none rounded-lg"
|
||||||
|
placeholder="Bot will automatically get your current code"
|
||||||
|
/>
|
||||||
|
<TooltipProvider delayDuration={0}>
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger asChild>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
variant="ghost"
|
||||||
|
className="absolute bottom-6 right-6 h-6 w-auto px-2"
|
||||||
|
aria-label="Send Message"
|
||||||
|
>
|
||||||
|
<SendHorizonal className="size-4" />
|
||||||
|
</Button>
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent className="px-2 py-1 text-xs">Ctrl + Enter</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
</TooltipProvider>
|
||||||
|
</form>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,16 +1,15 @@
|
|||||||
|
import { ProblemEditor } from "@/components/problem-editor";
|
||||||
import { WorkspaceEditorHeader } from "@/components/features/playground/workspace/editor/components/header";
|
import { WorkspaceEditorHeader } from "@/components/features/playground/workspace/editor/components/header";
|
||||||
import { WorkspaceEditorFooter } from "@/components/features/playground/workspace/editor/components/footer";
|
import { WorkspaceEditorFooter } from "@/components/features/playground/workspace/editor/components/footer";
|
||||||
|
|
||||||
interface CodeLayoutProps {
|
export default function Code() {
|
||||||
children: React.ReactNode;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function CodeLayout({ children }: CodeLayoutProps) {
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col h-full">
|
<div className="flex flex-col h-full">
|
||||||
<WorkspaceEditorHeader className="border-b border-x border-muted bg-background" />
|
<WorkspaceEditorHeader className="border-b border-x border-muted bg-background" />
|
||||||
<div className="relative flex-1 border-x border-muted">
|
<div className="relative flex-1 border-x border-muted">
|
||||||
{children}
|
<div className="absolute w-full h-full">
|
||||||
|
<ProblemEditor />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<WorkspaceEditorFooter />
|
<WorkspaceEditorFooter />
|
||||||
</div>
|
</div>
|
||||||
29
src/app/(app)/problems/[id]/features/description.tsx
Normal file
29
src/app/(app)/problems/[id]/features/description.tsx
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { notFound } from "next/navigation";
|
||||||
|
import { useProblem } from "@/hooks/use-problem";
|
||||||
|
import MdxPreview from "@/components/mdx-preview";
|
||||||
|
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
|
||||||
|
import ProblemDescriptionFooter from "@/components/features/playground/problem/description/footer";
|
||||||
|
|
||||||
|
export default function Description() {
|
||||||
|
const { problem } = useProblem();
|
||||||
|
|
||||||
|
if (!problem) {
|
||||||
|
notFound();
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col h-full">
|
||||||
|
<div className="relative flex-1 border-x border-muted">
|
||||||
|
<div className="absolute h-full w-full">
|
||||||
|
<ScrollArea className="h-full [&>[data-radix-scroll-area-viewport]>div:min-w-0 [&>[data-radix-scroll-area-viewport]>div]:!block bg-background">
|
||||||
|
<MdxPreview source={problem.description} className="p-4 md:p-6" />
|
||||||
|
<ScrollBar orientation="horizontal" />
|
||||||
|
</ScrollArea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ProblemDescriptionFooter title={problem.title} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
7
src/app/(app)/problems/[id]/features/index.ts
Normal file
7
src/app/(app)/problems/[id]/features/index.ts
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
export { default as Bot } from "./bot";
|
||||||
|
export { default as Code } from "./code";
|
||||||
|
export { default as Description } from "./description";
|
||||||
|
export { default as Solutions } from "./solutions";
|
||||||
|
export { default as Submissions } from "./submissions";
|
||||||
|
export { default as Testcase } from "./testcase";
|
||||||
|
export { default as TestResult } from "./test-result";
|
||||||
29
src/app/(app)/problems/[id]/features/solutions.tsx
Normal file
29
src/app/(app)/problems/[id]/features/solutions.tsx
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { notFound } from "next/navigation";
|
||||||
|
import { useProblem } from "@/hooks/use-problem";
|
||||||
|
import MdxPreview from "@/components/mdx-preview";
|
||||||
|
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
|
||||||
|
import ProblemSolutionFooter from "@/components/features/playground/problem/solution/footer";
|
||||||
|
|
||||||
|
export default function Solutions() {
|
||||||
|
const { problem } = useProblem();
|
||||||
|
|
||||||
|
if (!problem) {
|
||||||
|
notFound();
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col h-full">
|
||||||
|
<div className="relative flex-1 border-x border-muted">
|
||||||
|
<div className="absolute h-full w-full">
|
||||||
|
<ScrollArea className="h-full [&>[data-radix-scroll-area-viewport]>div:min-w-0 [&>[data-radix-scroll-area-viewport]>div]:!block bg-background">
|
||||||
|
<MdxPreview source={problem.solution} className="p-4 md:p-6" />
|
||||||
|
<ScrollBar orientation="horizontal" />
|
||||||
|
</ScrollArea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ProblemSolutionFooter title={problem.title} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,3 +1,3 @@
|
|||||||
export default function SubmissionsPage() {
|
export default function Submissions() {
|
||||||
return <div className="h-full px-4">Submissions</div>;
|
return <div className="h-full px-4">Submissions</div>;
|
||||||
}
|
}
|
||||||
@ -1,3 +1,3 @@
|
|||||||
export default function TestResultPage() {
|
export default function TestResult() {
|
||||||
return <div className="h-full px-4">Test Result</div>;
|
return <div className="h-full px-4">Test Result</div>;
|
||||||
}
|
}
|
||||||
@ -1,3 +1,3 @@
|
|||||||
export default function TestcasePage() {
|
export default function Testcase() {
|
||||||
return <div className="h-full px-4">Testcase</div>;
|
return <div className="h-full px-4">Testcase</div>;
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue
Block a user