Code Debugging Assistant

${highlighted}

`;\n } catch {\n return `

${content}

`;\n }\n };\n\n // Configure marked for enhanced markdown rendering\n marked.setOptions({\n highlight: function(code, lang) {\n try {\n return hljs.highlight(code, { language: lang || \"plaintext\" }).value;\n } catch {\n return code;\n }\n },\n breaks: true,\n gfm: true,\n });\n\n const formatMarkdown = (content) => {\n try {\n // Convert markdown to HTML with syntax highlighting\n return marked(content);\n } catch {\n return content;\n }\n };\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n if (!input.trim()) return;\n\n const userMessage = {\n role: \"user\",\n content: input,\n type: input.includes(\"```\") ? \"code\" : \"problem\",\n };\n\n setMessages((prevMessages) => [...prevMessages, userMessage]);\n setInput(\"\");\n setIsLoading(true);\n setError(null);\n\n try {\n const response = await fetch(\"/debug\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n messages: [...messages, userMessage],\n context: {\n language: userMessage.type === \"code\"\n ? detectLanguage(input)\n : null,\n },\n }),\n });\n\n if (!response.ok) {\n const errorData = await response.json();\n throw new Error(errorData.error || \"Failed to get response\");\n }\n\n const data = await response.json();\n setMessages((prevMessages) => [...prevMessages, data.message]);\n } catch (error) {\n console.error(\"Error:\", error);\n setError(error.message);\n } finally {\n setIsLoading(false);\n }\n };\n\n return (\n

\n {messages.map((message, index) => (\n \n ))}\n {isLoading &&

Analyzing...

}\n {error &&

{error}

}\n

\n );\n}\n\nfunction client() {\n // Load highlight.js and markdown CSS\n const links = [\n {\n rel: \"stylesheet\",\n href: \"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css\",\n },\n {\n rel: \"stylesheet\",\n href: \"https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.5.1/github-markdown-dark.min.css\",\n },\n ];\n\n links.forEach(linkProps => {\n const link = document.createElement(\"link\");\n Object.entries(linkProps).forEach(([key, value]) => {\n link[key] = value;\n });\n document.head.appendChild(link);\n });\n\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/debug\") {\n const { messages, context } = await request.json();\n const lastUserMessage = messages[messages.length - 1].content;\n\n // Function to search StackOverflow\n async function searchStackOverflow(query: string) {\n try {\n const response = await fetch(\n `https://api.stackexchange.com/2.3/search/advanced?order=desc&sort=relevance&q=${\n encodeURIComponent(query)\n }&site=stackoverflow`,\n {\n headers: {\n \"User-Agent\": \"ValTown Debug Assistant/1.0\",\n },\n },\n );\n\n if (!response.ok) {\n console.error(\"StackOverflow API error:\", response.statusText);\n return null;\n }\n\n const data = await response.json();\n\n // Extract top 3 most relevant results\n const topResults = data.items.slice(0, 3).map(item => ({\n title: item.title,\n link: item.link,\n score: item.score,\n tags: item.tags,\n }));\n\n return topResults;\n } catch (error) {\n console.error(\"Error searching StackOverflow:\", error);\n return null;\n }\n }\n\n // Search StackOverflow for relevant answers\n const stackOverflowResults = await searchStackOverflow(lastUserMessage);\n\n const { OpenAI } = await import(\"https://esm.sh/openai\");\n const client = new OpenAI({\n apiKey: Deno.env.get(\"CEREBRAS_API_KEY\"),\n baseURL: \"https://api.cerebras.ai/v1\",\n });\n\n try {\n const systemPrompt = `\nYou are an **expert programming assistant** specializing in **debugging, optimization, and providing coding solutions**. Your role is to deliver actionable, clear, and concise advice for resolving coding issues.\n\n## Goals\n1. **Identify Issues:** Detect syntax errors, logical flaws, performance bottlenecks, and security vulnerabilities.\n2. **Provide Solutions:** Offer specific and practical recommendations with code examples where necessary.\n3. **Explain Causes:** Describe the underlying reasons for the issues in a way that builds understanding.\n4. **Suggest Best Practices:** Recommend coding standards, optimizations, and preventive measures.\n5. **Reference Documentation:** Share authoritative sources like official documentation, relevant tutorials, or community discussions for further reading.\n\n---\n\n## Context\n### StackOverflow Insights\n${\n stackOverflowResults\n ? `\nHere are **relevant StackOverflow threads** related to the issue:\n${\n stackOverflowResults.map(result =>\n `- [**${result.title}**](${result.link}) \n **Score:** ${result.score} | **Tags:** ${result.tags.join(\", \")}`\n ).join(\"\\n\")\n }\nIncorporate insights from these discussions if applicable.\n`\n : \"No relevant StackOverflow results were provided.\"\n }\n\n### Code Snippet Analysis Focus\n1. **Syntax Errors**: Missing or incorrect syntax.\n2. **Logical Errors**: Misbehaving logic or unexpected behavior.\n3. **Performance Issues**: Slow execution, resource inefficiency, or scalability concerns.\n4. **Security Vulnerabilities**: Flaws that might expose the system to attacks.\n5. **Potential Improvements**: Suggestions for cleaner, more maintainable, or optimized code.\n\n---\n\n### Diagnostic Approach\nWhen analyzing the problem:\n1. Use **step-by-step diagnostic steps** to pinpoint issues.\n2. Provide **actionable solutions** with clear examples and code snippets.\n3. Offer links to **relevant documentation or tutorials** for further understanding.\n\n### Response Formatting\n- **Headings and Bullet Points**: For clarity and logical separation.\n- **Code Blocks**: Include formatted code snippets using markdown (\\`\\`\\`).\n- **Links**: Share relevant and authoritative resources.\n- **Emphasis**: Use bold or italics to highlight key points.\n\n---\n\n### Output Expectations\n- Start with a **summary of the issue**.\n- Break down your response into **clear sections**: Problem, Cause, Solution, and Best Practices.\n- Keep your tone professional, concise, and solution-oriented.\n\n> 💡 Always aim to make the response easy to follow, even for non-experts.\n`;\n\n const enhancedMessages = [\n { role: \"system\", content: systemPrompt },\n ...messages,\n ];\n\n const response = await client.chat.completions.create({\n model: \"llama-3.3-70b\",\n messages: enhancedMessages,\n max_tokens: 1500,\n });\n\n const generatedMessage = response.choices[0].message;\n\n // Append StackOverflow references if available\n if (stackOverflowResults) {\n generatedMessage.content += `\\n\\n### 🔗 Relevant StackOverflow Resources\\n${\n stackOverflowResults.map(result => `- [${result.title}](${result.link}) (Score: ${result.score})`).join(\"\\n\")\n }`;\n }\n\n return Response.json({ message: generatedMessage });\n } catch (error) {\n console.error(\"Error calling Cerebras API:\", error);\n\n if (error.status === 429) {\n return Response.json({ error: \"Debugging service rate limit reached. Please try again later.\" }, {\n status: 429,\n });\n } else {\n return Response.json({ error: `API Error: ${error.message}` }, { status: 500 });\n }\n }\n }\n\n return new Response(\n `\n \n \n \n \n \n Code Debugging Assistant\n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\n// CSS remains unchanged from previous version\nconst css = `\nbody {\n font-family: 'Cascadia Code', 'Fira Code', Consolas, 'Courier New', monospace;\n margin: 0;\n padding: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n background-color: #1e1e1e;\n color: #d4d4d4;\n}\n\n.debug-container {\n width: 100%;\n max-width: 800px;\n height: 90vh;\n display: flex;\n flex-direction: column;\n border: 1px solid #333;\n border-radius: 8px;\n overflow: hidden;\n background-color: #252526;\n}\n\n.chat-messages {\n flex-grow: 1;\n overflow-y: auto;\n padding: 20px;\n background-color: #1e1e1e;\n}\n\n.message {\n margin-bottom: 15px;\n padding: 15px;\n border-radius: 8px;\n max-width: 100%;\n line-height: 1.6;\n}\n\n.message.code {\n background-color: #2d2d2d;\n font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;\n white-space: pre-wrap;\n word-break: break-all;\n}\n\n.message.user {\n background-color: #264f78;\n color: white;\n}\n\n.message.assistant {\n background-color: #1e1e1e;\n color: #9cdcfe;\n border: 1px solid #333;\n}\n\n.message.assistant h1,\n.message.assistant h2,\n.message.assistant h3 {\n color: #4ec9b0;\n margin-top: 15px;\n margin-bottom: 10px;\n border-bottom: 1px solid #333;\n padding-bottom: 5px;\n}\n\n.message.assistant strong {\n color: #569cd6;\n}\n\n.message.assistant blockquote {\n border-left: 4px solid #4ec9b0;\n padding-left: 10px;\n color: #6a9955;\n margin: 10px 0;\n font-style: italic;\n}\n\n.message.assistant code {\n background-color: #2d2d2d;\n padding: 2px 4px;\n border-radius: 3px;\n}\n\n.message.assistant pre {\n background-color: #2d2d2d;\n padding: 10px;\n border-radius: 5px;\n overflow-x: auto;\n}\n\n.error-message {\n background-color: #ff000033;\n color: #f14c4c;\n padding: 10px;\n border-radius: 8px;\n margin-bottom: 10px;\n text-align: center;\n}\n\n.chat-input-form {\n display: flex;\n padding: 10px;\n background-color: #252526;\n border-top: 1px solid #333;\n}\n\ntextarea {\n flex-grow: 1;\n padding: 10px;\n background-color: #1e1e1e;\n color: #d4d4d4;\n border: 1px solid #333;\n border-radius: 4px;\n margin-right: 10px;\n font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;\n resize: vertical;\n}\n\nbutton {\n padding: 10px 20px;\n background-color: #0e639c;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n transition: background-color 0.3s;\n}\n\nbutton:hover {\n background-color: #1f6faf;\n}\n\nbutton:disabled {\n background-color: #555;\n cursor: not-allowed;\n}\n\n.source-link {\n text-align: center;\n padding: 10px;\n font-size: 0.8em;\n background-color: #252526;\n}\n\n.source-link a {\n color: #4ec9b0;\n text-decoration: none;\n}\n\n.source-link a:hover {\n text-decoration: underline;\n}\n\n/* Markdown Specific Styles */\n.markdown-body {\n background-color: transparent !important;\n color: #d4d4d4 !important;\n}\n`;","deleted","label",[99],"permalink","https://www.val.town/x/sakshamkapoor2911/Code_Debugger/code/main.tsx","extension","actionData","errors"]