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

refactor(bot): simplify layout and improve UI rendering in Bot component

Browse Source
This commit is contained in:
cfngc4594 2025-04-12 13:17:48 +08:00
parent 72a868402c
commit d9d9db16fe
1 changed files with 67 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/app/(app)/problems/[id]/features/bot.tsx
View File

@ -14,12 +14,13 @@ 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 { ScrollArea } 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: [
{
@ -33,6 +34,7 @@ export default function Bot() {
const handleFormSubmit = useCallback(
(e: React.FormEvent) => {
e.preventDefault();
if (!input.trim()) {
toast.error("Input cannot be empty");
return;
@ -52,19 +54,19 @@ export default function Bot() {
return (
<div className="flex flex-col h-full border border-t-0 border-muted rounded-b-3xl bg-background">
<div className="relative flex-1">
<div className="flex flex-col h-full">
<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">
<div className="h-full flex flex-col items-center justify-center gap-2 text-muted-foreground">
<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">
<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">
<ChatMessageList>
{messages
.filter(
@ -78,9 +80,10 @@ export default function Bot() {
</ChatBubble>
))}
</ChatMessageList>
<ScrollBar orientation="horizontal" />
</ScrollArea>
</div>
</div>
<footer className="h-36 flex flex-none">
<form onSubmit={handleFormSubmit} className="w-full p-4 pt-0 relative">
<Textarea
@ -99,6 +102,7 @@ export default function Bot() {
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>
@ -117,7 +121,5 @@ export default function Bot() {
</form>
</footer>
</div>
</div>
</div>
);
}