CodeSandBox/monaco-editor-lsp-next
2
0
Fork 0
mirror of https://github.com/cfngc4594/monaco-editor-lsp-next.git synced 2025-05-18 15:26:36 +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 { 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>
);
}