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

132
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,72 +54,72 @@ 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-1 relative">
<div className="flex flex-col h-full"> {!messages.some(
<div className="flex-1 relative"> (message) => message.role === "user" || message.role === "assistant"
{!messages.some( ) && (
(message) => message.role === "user" || message.role === "assistant" <div className="h-full flex flex-col items-center justify-center gap-2 text-muted-foreground">
) && ( <BotIcon />
<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"> <span>Ask Bot</span>
<BotIcon /> <span className="font-thin text-xs">Powered by Vercel Ai SDK</span>
<span>Ask Bot</span> </div>
<span className="font-thin text-xs">Powered by Vercel Ai SDK</span> )}
</div>
)} <div className="absolute h-full w-full">
<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"> <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(
(message) => message.role === "user" || message.role === "assistant" (message) => message.role === "user" || message.role === "assistant"
) )
.map((message) => ( .map((message) => (
<ChatBubble key={message.id} layout="ai" className="border-b pb-4"> <ChatBubble key={message.id} layout="ai" className="border-b pb-4">
<ChatBubbleMessage layout="ai"> <ChatBubbleMessage layout="ai">
<MdxPreview source={message.content} /> <MdxPreview source={message.content} />
</ChatBubbleMessage> </ChatBubbleMessage>
</ChatBubble> </ChatBubble>
))} ))}
</ChatMessageList> </ChatMessageList>
<ScrollBar orientation="horizontal" /> </ScrollArea>
</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> </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>
); );
} }