Massbug/judge4c
2
0
Fork 0
mirror of https://github.com/massbug/judge4c.git synced 2025-05-18 07:16:34 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor(playground): simplify chat layout and unify scroll area styles

Browse Source
This commit is contained in:
cfngc4594 2025-03-26 22:57:16 +08:00
parent 4ec1943738
commit fbe0ef63d8
3 changed files with 7 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/app/(app)/problems/[id]/@ai/@bot/page.tsx
View File

@ -2,11 +2,6 @@
import { useCallback } from "react"; import { useCallback } from "react";
import { useChat } from "@ai-sdk/react"; import { useChat } from "@ai-sdk/react";
import {
ChatBubble,
ChatBubbleAvatar,
ChatBubbleMessage,
} from "@/components/ui/chat/chat-bubble";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { useProblem } from "@/hooks/use-problem"; import { useProblem } from "@/hooks/use-problem";
import MdxPreview from "@/components/mdx-preview"; import MdxPreview from "@/components/mdx-preview";
@ -14,6 +9,7 @@ import { Textarea } from "@/components/ui/textarea";
import { BotIcon, SendHorizonal } from "lucide-react"; import { BotIcon, SendHorizonal } from "lucide-react";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"; import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
import { ChatMessageList } from "@/components/ui/chat/chat-message-list"; import { ChatMessageList } from "@/components/ui/chat/chat-message-list";
import { ChatBubble, ChatBubbleMessage } from "@/components/ui/chat/chat-bubble";
export default function AiBotPage() { export default function AiBotPage() {
const { problemId, problem, currentLang, currentValue } = useProblem(); const { problemId, problem, currentLang, currentValue } = useProblem();
@ -54,13 +50,12 @@ export default function AiBotPage() {
<span className="font-thin text-xs">Powered by Vercel Ai SDK</span> <span className="font-thin text-xs">Powered by Vercel Ai SDK</span>
</div> </div>
)} )}
<ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-238px)]"> <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> <ChatMessageList>
{messages {messages
.filter((message) => message.role === "user" || message.role === "assistant") .filter((message) => message.role === "user" || message.role === "assistant")
.map((message) => ( .map((message) => (
<ChatBubble key={message.id} layout="ai"> <ChatBubble key={message.id} layout="ai" className="border-b pb-4">
<ChatBubbleAvatar src="" fallback={message.role === "user" ? "US" : "AI"} />
<ChatBubbleMessage layout="ai"> <ChatBubbleMessage layout="ai">
<MdxPreview source={message.content} /> <MdxPreview source={message.content} />
</ChatBubbleMessage> </ChatBubbleMessage>

4
src/app/(app)/problems/[id]/@problem/@description/page.tsx
View File

@ -16,8 +16,8 @@ export default function ProblemDescriptionPage() {
return ( return (
<> <>
<div className="flex-1"> <div className="flex-1">
<ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-130px)]"> <ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-130px)] [&>[data-radix-scroll-area-viewport]>div:min-w-0 [&>[data-radix-scroll-area-viewport]>div]:!block">
<MdxPreview source={problem.description} className="box-border min-w-[200px] max-w-[980px] mx-auto p-4 md:p-6" /> <MdxPreview source={problem.description} className="p-4 md:p-6" />
<ScrollBar orientation="horizontal" /> <ScrollBar orientation="horizontal" />
</ScrollArea> </ScrollArea>
</div> </div>

4
src/app/(app)/problems/[id]/@problem/@solution/page.tsx
View File

@ -11,8 +11,8 @@ export default function ProblemSolutionPage() {
return ( return (
<> <>
<div className="flex-1"> <div className="flex-1">
<ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-130px)]"> <ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-130px)] [&>[data-radix-scroll-area-viewport]>div:min-w-0 [&>[data-radix-scroll-area-viewport]>div]:!block">
<MdxPreview source={problem.solution} className="box-border min-w-[200px] max-w-[980px] mx-auto p-4 md:p-6" /> <MdxPreview source={problem.solution} className="p-4 md:p-6" />
<ScrollBar orientation="horizontal" /> <ScrollBar orientation="horizontal" />
</ScrollArea> </ScrollArea>
</div> </div>