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): enhance AI chat with code integration and optimizations

Browse Source
This commit is contained in:
cfngc4594 2025-03-25 00:27:56 +08:00
parent ef37451313
commit 7d73118759
1 changed files with 28 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,12 @@
"use client"; "use client";
import { useCallback } from "react";
import { useChat } from "@ai-sdk/react"; import { useChat } from "@ai-sdk/react";
import {
ChatBubble,
ChatBubbleAvatar,
ChatBubbleMessage,
} from "@/components/ui/chat/chat-bubble";
import { SendHorizonal } from "lucide-react"; 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";
@ -8,11 +14,10 @@ import MdxPreview from "@/components/mdx-preview";
import { Textarea } from "@/components/ui/textarea"; import { Textarea } from "@/components/ui/textarea";
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";
import { ChatBubble, ChatBubbleAvatar, ChatBubbleMessage } from "@/components/ui/chat/chat-bubble";
export default function AiBotPage() { export default function AiBotPage() {
const { problemId, problem } = useProblem(); const { problemId, problem, currentLang, currentValue } = useProblem();
const { messages, input, handleInputChange, handleSubmit } = useChat({ const { messages, input, handleInputChange, setMessages, handleSubmit } = useChat({
initialMessages: [ initialMessages: [
{ {
id: problemId, id: problemId,
@ -22,6 +27,23 @@ export default function AiBotPage() {
], ],
}); });
const handleFormSubmit = useCallback(
(e: React.FormEvent) => {
e.preventDefault();
if (!input.trim()) return;
const currentCodeMessage = {
id: problemId,
role: "system" as const,
content: `Current code:\n\`\`\`${currentLang}\n${currentValue}\n\`\`\``,
};
setMessages([...messages, currentCodeMessage]);
handleSubmit();
},
[currentLang, currentValue, handleSubmit, input, messages, 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">
@ -29,8 +51,8 @@ export default function AiBotPage() {
<ChatMessageList> <ChatMessageList>
{messages {messages
.filter((message) => message.role === "user" || message.role === "assistant") .filter((message) => message.role === "user" || message.role === "assistant")
.map((message, index) => ( .map((message) => (
<ChatBubble key={index} layout="ai"> <ChatBubble key={message.id} layout="ai">
<ChatBubbleAvatar src="" fallback={message.role === "user" ? "US" : "AI"} /> <ChatBubbleAvatar src="" fallback={message.role === "user" ? "US" : "AI"} />
<ChatBubbleMessage layout="ai"> <ChatBubbleMessage layout="ai">
<MdxPreview source={message.content} /> <MdxPreview source={message.content} />
@ -42,7 +64,7 @@ export default function AiBotPage() {
</ScrollArea> </ScrollArea>
</div> </div>
<footer className="h-36 flex flex-none"> <footer className="h-36 flex flex-none">
<form onSubmit={handleSubmit} className="w-full p-4 pt-0 relative"> <form onSubmit={handleFormSubmit} className="w-full p-4 pt-0 relative">
<Textarea <Textarea
value={input} value={input}
onChange={handleInputChange} onChange={handleInputChange}