From d9d9db16fe16cac62384c819aa70a9eda228c816 Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Sat, 12 Apr 2025 13:17:48 +0800
Subject: [PATCH] refactor(bot): simplify layout and improve UI rendering in
 Bot component

---
 src/app/(app)/problems/[id]/features/bot.tsx | 132 ++++++++++---------
 1 file changed, 67 insertions(+), 65 deletions(-)

diff --git a/src/app/(app)/problems/[id]/features/bot.tsx b/src/app/(app)/problems/[id]/features/bot.tsx
index 70f7f02..c81eb25 100644
--- a/src/app/(app)/problems/[id]/features/bot.tsx
+++ b/src/app/(app)/problems/[id]/features/bot.tsx
@@ -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,72 +54,72 @@ 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">
-                <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 className="flex-1 relative">
+        {!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 />
+              <span>Ask Bot</span>
+              <span className="font-thin text-xs">Powered by Vercel Ai SDK</span>
+            </div>
+          )}
+
+        <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(
+                  (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>
+          </ScrollArea>
         </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>
   );
 }