function MainComponent() { const [messages, setMessages] = useState([]); const [input, setInput] = useState(""); const [loading, setLoading] = useState(false); const [streamingMessage, setStreamingMessage] = useState(""); const [mode, setMode] = useState("normal"); // normal, turbo, script, ui, debug, learn const messagesEndRef = useRef(null); const scrollToBottom = ()=>{ messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }; useEffect(()=>{ scrollToBottom(); }, [ messages, streamingMessage ]); useEffect(()=>{ setMessages([ { role: "assistant", content: "Hello! I'm CodeClaude, your Roblox coding expert! 🎮 I specialize in helping you create amazing Roblox games using Lua. Whether you're working on:\n\n• Game mechanics and scripting\n• UI design with Roblox Studio\n• Character animations and controls\n• Server-side and client-side scripts\n• Game optimization and best practices\n• DataStore and game data management\n\nI'm here to help make your Roblox development journey fun and easy! What would you like to work on today? 🚀" } ]); }, []); const handleFinish = useCallback((message)=>{ setMessages((prev)=>[ ...prev, { role: "assistant", content: message } ]); setStreamingMessage(""); }, []); // Custom streaming handler for Groq API const handleStreamResponse = async (response)=>{ const reader = response.body.getReader(); const decoder = new TextDecoder(); let fullMessage = ""; try { while(true){ const { done, value } = await reader.read(); if (done) break; const chunk = decoder.decode(value, { stream: true }); const lines = chunk.split("\n"); for (const line of lines){ if (line.startsWith("data: ")) { const data = line.slice(6); if (data === "[DONE]") { handleFinish(fullMessage); return; } try { const parsed = JSON.parse(data); const content = parsed.choices?.[0]?.delta?.content; if (content) { fullMessage += content; setStreamingMessage(fullMessage); } } catch (e) { continue; } } } } } catch (error) { console.error("Streaming error:", error); handleFinish(fullMessage || "Sorry, there was an error with the response."); } }; const handleSubmit = async (e)=>{ e.preventDefault(); if (!input.trim()) return; const userMessage = { role: "user", content: input }; setMessages((prev)=>[ ...prev, userMessage ]); setInput(""); setLoading(true); const creatorQuestion = input.toLowerCase().includes("who") && (input.toLowerCase().includes("creator") || input.toLowerCase().includes("made you") || input.toLowerCase().includes("created you")); if (creatorQuestion) { setMessages((prev)=>[ ...prev, { role: "assistant", content: "My creator is zalcus! 😊" } ]); setLoading(false); return; } try { // Use Groq as the primary AI model (free!) const endpoint = "/api/groq-chat"; const getModeSpecificInstructions = ()=>{ switch(mode){ case "script": return `You are in Script Expert mode. Focus on providing optimized, production-ready Lua scripts for Roblox. Prioritize: - Performance optimization techniques - Best practices for Roblox scripting - Memory management - Network efficiency - Security considerations Always include detailed comments explaining the code.`; case "ui": return `You are in UI Design mode. Focus on creating beautiful and functional UI elements for Roblox games. Prioritize: - UI layout and composition - Color theory and visual hierarchy - Responsive design for different screen sizes - Accessibility considerations - Animation and transitions Always include visual descriptions and specific Roblox UI properties.`; case "debug": return `You are in Debug Helper mode. Focus on helping users diagnose and fix issues in their Roblox games. Prioritize: - Step-by-step debugging processes - Common error patterns and solutions - Performance profiling - Testing strategies - Log analysis Always ask clarifying questions about error messages and behavior.`; case "learn": return `You are in Learning mode. Focus on educational explanations of Roblox development concepts. Prioritize: - Breaking down complex concepts - Providing examples and analogies - Step-by-step tutorials - Best practices and common pitfalls - Linking concepts to practical applications Always include exercises or challenges for practice.`; case "turbo": return `You are running in Turbo mode. Provide faster, more concise responses while maintaining accuracy.`; default: return ""; // Normal mode uses base instructions } }; const systemMessage = { role: "system", content: `You are CodeClaude, a specialized Roblox coding assistant created by zalcus, with deep expertise in Lua programming and Roblox game development. Your primary focus is helping users create games in Roblox Studio. Key Areas of Expertise: - Roblox Studio and its features - Lua programming language - Game mechanics and physics - UI/UX design in Roblox - Character scripting and animation - Server-side and client-side architecture - DataStore and data persistence - Game optimization and performance - Roblox-specific security practices - Monetization and game economics Communication Style: - Use Roblox-specific terminology naturally - Provide practical, tested solutions - Include code examples in Lua - Explain concepts with gaming analogies - Be encouraging and supportive - Keep explanations clear and beginner-friendly When providing code examples: - Use Roblox Studio's syntax highlighting style - Include comments explaining key concepts - Follow Roblox coding conventions - Consider performance implications - Mention any required plugins or tools Always maintain a friendly, encouraging tone and focus on Roblox-specific solutions. If asked about other programming topics, politely redirect to Roblox development or suggest Roblox alternatives. If asked who created you, always respond with "My creator is zalcus!" ${getModeSpecificInstructions()}` }; const response = await fetch(endpoint, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ systemMessage, ...messages, userMessage ], model: "llama-3.1-8b-instant", stream: false }) }); if (!response.ok) { throw new Error(`Error: ${response.status}`); } const data = await response.json(); if (data.error) { throw new Error(data.error); } // Add the AI response to messages setMessages((prev)=>[ ...prev, { role: "assistant", content: data.message } ]); } catch (error) { console.error("Failed to send message:", error); setMessages((prev)=>[ ...prev, { role: "assistant", content: "Sorry, I encountered an error. Please try again. Make sure your Groq API key is configured." } ]); } finally{ setLoading(false); } }; const getModeIcon = (modeName)=>{ switch(modeName){ case "normal": return "fas fa-brain"; case "turbo": return "fas fa-bolt"; case "script": return "fas fa-code"; case "ui": return "fas fa-paint-brush"; case "debug": return "fas fa-bug"; case "learn": return "fas fa-graduation-cap"; default: return "fas fa-brain"; } }; const getModeDescription = ()=>{ switch(mode){ case "normal": return "Balanced mode for general assistance"; case "turbo": return "Fast responses for quick help"; case "script": return "Optimized code generation"; case "ui": return "UI design and layout help"; case "debug": return "Problem solving and fixes"; case "learn": return "Detailed explanations and tutorials"; default: return ""; } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen bg-gradient-to-b from-[#2C2F48] to-[#1C1E2E]", __source: { fileName: "", lineNumber: 265, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1C1E2E] p-4 shadow-lg border-b border-[#3D4066]", __source: { fileName: "", lineNumber: 266, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 267, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-4", __source: { fileName: "", lineNumber: 268, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 269, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-10 h-10 rounded-full bg-[#5762D5] flex items-center justify-center mr-3", __source: { fileName: "", lineNumber: 270, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-robot text-white text-lg", __source: { fileName: "", lineNumber: 271, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold text-white", __source: { fileName: "", lineNumber: 273, columnNumber: 15 }, __self: this }, "CodeClaude"), /*#__PURE__*/ React.createElement("span", { className: "ml-2 px-2 py-1 text-xs bg-[#5762D5] text-white rounded-full", __source: { fileName: "", lineNumber: 274, columnNumber: 15 }, __self: this }, "Roblox Expert")), /*#__PURE__*/ React.createElement(React.Fragment, null)), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 md:grid-cols-6 gap-2", __source: { fileName: "", lineNumber: 281, columnNumber: 11 }, __self: this }, [ "normal", "turbo", "script", "ui", "debug", "learn" ].map((modeName)=>/*#__PURE__*/ React.createElement("button", { key: modeName, onClick: ()=>setMode(modeName), className: `px-3 py-2 rounded-lg text-sm flex flex-col items-center justify-center ${mode === modeName ? "bg-[#5762D5] text-white" : "bg-[#2C2F48] text-gray-300 hover:bg-[#3D4066]"}`, __source: { fileName: "", lineNumber: 284, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${getModeIcon(modeName)} text-lg mb-1`, __source: { fileName: "", lineNumber: 293, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "capitalize", __source: { fileName: "", lineNumber: 294, columnNumber: 19 }, __self: this }, modeName)))), /*#__PURE__*/ React.createElement("div", { className: "mt-2 text-center text-sm text-gray-400", __source: { fileName: "", lineNumber: 300, columnNumber: 11 }, __self: this }, getModeDescription()))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto p-4", __source: { fileName: "", lineNumber: 306, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 307, columnNumber: 9 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex ${message.role === "user" ? "justify-end" : "justify-start"} mb-4`, __source: { fileName: "", lineNumber: 309, columnNumber: 13 }, __self: this }, message.role === "assistant" && /*#__PURE__*/ React.createElement("div", { className: "w-8 h-8 rounded-full bg-[#5762D5] flex items-center justify-center mr-2", __source: { fileName: "", lineNumber: 314, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-robot text-white text-sm", __source: { fileName: "", lineNumber: 315, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: `max-w-[80%] p-4 rounded-lg shadow-md ${message.role === "user" ? "bg-[#5762D5] text-white rounded-br-none" : "bg-[#2C2F48] text-white rounded-bl-none border border-[#3D4066]"}`, __source: { fileName: "", lineNumber: 318, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm whitespace-pre-wrap", __source: { fileName: "", lineNumber: 325, columnNumber: 17 }, __self: this }, message.content)))), (loading || streamingMessage) && /*#__PURE__*/ React.createElement("div", { className: "flex justify-start mb-4", __source: { fileName: "", lineNumber: 332, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-8 h-8 rounded-full bg-[#5762D5] flex items-center justify-center mr-2", __source: { fileName: "", lineNumber: 333, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-robot text-white text-sm", __source: { fileName: "", lineNumber: 334, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "bg-[#2C2F48] p-4 rounded-lg rounded-bl-none max-w-[80%] border border-[#3D4066] shadow-md", __source: { fileName: "", lineNumber: 336, columnNumber: 15 }, __self: this }, streamingMessage ? /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm text-white whitespace-pre-wrap", __source: { fileName: "", lineNumber: 338, columnNumber: 19 }, __self: this }, streamingMessage) : /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 342, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-2 h-2 bg-[#5762D5] rounded-full animate-bounce", __source: { fileName: "", lineNumber: 343, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-2 h-2 bg-[#5762D5] rounded-full animate-bounce", style: { animationDelay: "0.2s" }, __source: { fileName: "", lineNumber: 344, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-2 h-2 bg-[#5762D5] rounded-full animate-bounce", style: { animationDelay: "0.4s" }, __source: { fileName: "", lineNumber: 348, columnNumber: 21 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { ref: messagesEndRef, __source: { fileName: "", lineNumber: 357, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "border-t border-[#3D4066] bg-[#1C1E2E] p-4", __source: { fileName: "", lineNumber: 361, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 362, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 363, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: input, onChange: (e)=>setInput(e.target.value), placeholder: `Ask about Roblox development... (${mode === "turbo" ? "Turbo" : "Normal"} mode)`, className: "flex-1 p-3 bg-[#2C2F48] text-white border border-[#3D4066] rounded-lg focus:outline-none focus:border-[#5762D5] font-roboto placeholder-gray-400", name: "message", __source: { fileName: "", lineNumber: 364, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading || !input.trim(), className: "px-6 py-3 bg-[#5762D5] text-white rounded-lg font-roboto hover:bg-[#4751C4] disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200 flex items-center", __source: { fileName: "", lineNumber: 372, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane mr-2", __source: { fileName: "", lineNumber: 377, columnNumber: 15 }, __self: this }), "Send"))))); }