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

feat(ai-bot): add empty state UI and improve message handling

Browse Source
This commit is contained in:
cfngc4594 2025-03-25 10:29:01 +08:00
parent d560904779
commit 99f8407e2a
1 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/app/(app)/problems/[id]/@ai/@bot/page.tsx
View File

@ -7,11 +7,11 @@ import {
ChatBubbleAvatar, ChatBubbleAvatar,
ChatBubbleMessage, ChatBubbleMessage,
} from "@/components/ui/chat/chat-bubble"; } from "@/components/ui/chat/chat-bubble";
import { SendHorizonal } from "lucide-react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { useProblem } from "@/hooks/use-problem"; 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 { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"; import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
import { ChatMessageList } from "@/components/ui/chat/chat-message-list"; import { ChatMessageList } from "@/components/ui/chat/chat-message-list";
@ -38,15 +38,22 @@ export default function AiBotPage() {
content: `Current code:\n\`\`\`${currentLang}\n${currentValue}\n\`\`\``, content: `Current code:\n\`\`\`${currentLang}\n${currentValue}\n\`\`\``,
}; };
setMessages([...messages, currentCodeMessage]); setMessages((prev) => [...prev, currentCodeMessage]);
handleSubmit(); handleSubmit();
}, },
[currentLang, currentValue, handleSubmit, input, messages, problemId, setMessages] [currentLang, currentValue, handleSubmit, input, problemId, setMessages]
); );
return ( return (
<div className="h-full flex flex-col"> <div className="h-full flex flex-col">
<div className="flex-1"> <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>Asi 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)]"> <ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-238px)]">
<ChatMessageList> <ChatMessageList>
{messages {messages
@ -71,7 +78,7 @@ export default function AiBotPage() {
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"
/> />
<Button type="submit" variant="ghost" className="absolute bottom-6 right-6 h-6 w-auto px-2"> <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" /> <SendHorizonal className="size-4" />
</Button> </Button>
</form> </form>