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(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 MdxPreview from "@/components/mdx-preview";
import { Textarea } from "@/components/ui/textarea"; 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 } 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"; import { ChatBubble, ChatBubbleMessage } from "@/components/ui/chat/chat-bubble";
export default function Bot() { export default function Bot() {
const { problemId, problem, currentLang, currentValue } = useProblem(); const { problemId, problem, currentLang, currentValue } = useProblem();
const { messages, input, handleInputChange, setMessages, handleSubmit } = useChat({ const { messages, input, handleInputChange, setMessages, handleSubmit } = useChat({
initialMessages: [ initialMessages: [
{ {
@ -33,6 +34,7 @@ export default function Bot() {
const handleFormSubmit = useCallback( const handleFormSubmit = useCallback(
(e: React.FormEvent) => { (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault();
if (!input.trim()) { if (!input.trim()) {
toast.error("Input cannot be empty"); toast.error("Input cannot be empty");
return; return;
@ -52,19 +54,19 @@ export default function Bot() {
return ( return (
<div className="flex flex-col h-full border border-t-0 border-muted rounded-b-3xl bg-background"> <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"> <div className="flex-1 relative">
{!messages.some( {!messages.some(
(message) => message.role === "user" || message.role === "assistant" (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 /> <BotIcon />
<span>Ask Bot</span> <span>Ask Bot</span>
<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)] [&>[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> <ChatMessageList>
{messages {messages
.filter( .filter(
@ -78,9 +80,10 @@ export default function Bot() {
</ChatBubble> </ChatBubble>
))} ))}
</ChatMessageList> </ChatMessageList>
<ScrollBar orientation="horizontal" />
</ScrollArea> </ScrollArea>
</div> </div>
</div>
<footer className="h-36 flex flex-none"> <footer className="h-36 flex flex-none">
<form onSubmit={handleFormSubmit} className="w-full p-4 pt-0 relative"> <form onSubmit={handleFormSubmit} className="w-full p-4 pt-0 relative">
<Textarea <Textarea
@ -99,6 +102,7 @@ export default function Bot() {
className="h-full bg-muted border-transparent shadow-none rounded-lg" className="h-full bg-muted border-transparent shadow-none rounded-lg"
placeholder="Bot will automatically get your current code" placeholder="Bot will automatically get your current code"
/> />
<TooltipProvider delayDuration={0}> <TooltipProvider delayDuration={0}>
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
@ -117,7 +121,5 @@ export default function Bot() {
</form> </form>
</footer> </footer>
</div> </div>
</div>
</div>
); );
} }