129 lines
4.6 KiB
TypeScript
129 lines
4.6 KiB
TypeScript
import { useState } from 'react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { ScrollArea } from '@/components/ui/scroll-area';
|
|
import { Textarea } from '@/components/ui/textarea';
|
|
import { Sparkle, PaperPlaneRight } from '@phosphor-icons/react';
|
|
import { toast } from 'sonner';
|
|
|
|
interface Message {
|
|
role: 'user' | 'assistant';
|
|
content: string;
|
|
}
|
|
|
|
interface AIChatProps {
|
|
currentCode: string;
|
|
}
|
|
|
|
export function AIChat({ currentCode }: AIChatProps) {
|
|
const [messages, setMessages] = useState<Message[]>([
|
|
{
|
|
role: 'assistant',
|
|
content: 'Hi! I\'m your AI assistant for Roblox Lua development. Ask me anything about your code, Roblox scripting, or game development!',
|
|
},
|
|
]);
|
|
const [input, setInput] = useState('');
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
const handleSend = async () => {
|
|
if (!input.trim() || isLoading) return;
|
|
|
|
const userMessage = input.trim();
|
|
setInput('');
|
|
setMessages((prev) => [...prev, { role: 'user', content: userMessage }]);
|
|
setIsLoading(true);
|
|
|
|
try {
|
|
const promptText = `You are an expert Roblox Lua developer helping a user with their code. The user is working on this code:
|
|
|
|
\`\`\`lua
|
|
${currentCode}
|
|
\`\`\`
|
|
|
|
User question: ${userMessage}
|
|
|
|
Provide helpful, concise answers. Include code examples when relevant. Keep responses friendly and encouraging.`;
|
|
|
|
const response = await window.spark.llm(promptText, 'gpt-4o-mini');
|
|
setMessages((prev) => [...prev, { role: 'assistant', content: response }]);
|
|
} catch (error) {
|
|
console.error('AI Error:', error);
|
|
toast.error('Failed to get AI response. Please try again.');
|
|
setMessages((prev) => [...prev, { role: 'assistant', content: 'Sorry, I encountered an error. Please try asking again.' }]);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleKeyDown = (e: React.KeyboardEvent) => {
|
|
if (e.key === 'Enter' && !e.shiftKey) {
|
|
e.preventDefault();
|
|
handleSend();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col h-full bg-card border-l border-border min-w-[260px] max-w-[340px]">
|
|
<div className="flex items-center gap-2 px-3 py-2 border-b border-border bg-card/80">
|
|
<Sparkle className="text-accent" weight="fill" />
|
|
<h2 className="font-semibold text-xs tracking-wide uppercase text-muted-foreground">AI Assistant</h2>
|
|
</div>
|
|
|
|
<ScrollArea className="flex-1 px-2 py-2">
|
|
<div className="space-y-2">
|
|
{messages.map((message, index) => (
|
|
<div
|
|
key={index}
|
|
className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}
|
|
>
|
|
<div
|
|
className={`max-w-[85%] rounded-md px-3 py-1.5 text-xs shadow-sm ${
|
|
message.role === 'user'
|
|
? 'bg-primary text-primary-foreground'
|
|
: 'bg-muted text-foreground'
|
|
}`}
|
|
>
|
|
<p className="whitespace-pre-wrap leading-relaxed">{message.content}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
{isLoading && (
|
|
<div className="flex justify-start">
|
|
<div className="bg-muted rounded-md px-3 py-1.5">
|
|
<div className="flex gap-1">
|
|
<div className="w-2 h-2 bg-accent rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
|
|
<div className="w-2 h-2 bg-accent rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
|
|
<div className="w-2 h-2 bg-accent rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</ScrollArea>
|
|
|
|
<div className="px-2 py-2 border-t border-border bg-card/80">
|
|
<div className="flex gap-2">
|
|
<Textarea
|
|
value={input}
|
|
onChange={(e) => setInput(e.target.value)}
|
|
onKeyDown={handleKeyDown}
|
|
placeholder="Ask about your code..."
|
|
className="resize-none min-h-[36px] max-h-24 bg-background text-xs px-2 py-1"
|
|
disabled={isLoading}
|
|
/>
|
|
<Button
|
|
onClick={handleSend}
|
|
disabled={!input.trim() || isLoading}
|
|
className="bg-accent text-accent-foreground hover:bg-accent/90 btn-accent-hover self-end h-8 w-8 p-0"
|
|
tabIndex={-1}
|
|
title="Send"
|
|
>
|
|
<PaperPlaneRight weight="fill" size={16} />
|
|
</Button>
|
|
</div>
|
|
<p className="text-[10px] text-muted-foreground mt-1">
|
|
Press Enter to send, Shift+Enter for new line
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|