diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..79a46d15 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +ide/ diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6c2ff60b --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,5 @@ +{ + "githubPullRequests.ignoredPullRequestBranches": [ + "master" + ] +} \ No newline at end of file diff --git a/css/ide.css b/css/ide.css index f6432a7b..c2006812 100755 --- a/css/ide.css +++ b/css/ide.css @@ -1,50 +1,103 @@ -.judge0-file-menu { - min-width: 15rem !important; +.ai-chat-container { + background: var(--bg-color); + border-left: 1px solid #ddd; + height: 100vh; + width: 350px; + display: flex; + flex-direction: column; } -#judge0-chat-container { - display: flex; - flex-direction: column; - height: 100%; - padding: 0; +.chat-messages { + flex: 1; + overflow-y: auto; + padding: 1rem; } -#judge0-chat-container > .ui.menu { - border-bottom: none; +.chat-input { + padding: 1rem; + border-top: 1px solid #eee; + display: flex; + gap: 0.5rem; } -#judge0-chat-messages { - flex-grow: 1; - overflow-y: auto; +.ai-message, .user-message { + padding: 0.8rem; + margin: 0.5rem 0; + border-radius: 8px; + max-width: 80%; } -#judge0-chat-messages pre { - overflow-x: auto; +.user-message { + background: #007bff; + color: white; + margin-left: auto; } -.judge0-user-message { - margin-left: auto !important; - margin-right: 1em !important; - margin-top: 1em !important; - max-width: 66%; - overflow-wrap: break-word; - width: fit-content; +.ai-message { + background: #f0f0f0; + color: #333; } -#judge0-chat-input-container { - margin-top: 0; +.loading-dots::after { + content: '...'; + animation: dots 1s infinite; } -#judge0-status-line:empty { - display: none; +@keyframes dots { + 0%, 20% { content: '.'; } + 40% { content: '..'; } + 60% { content: '...'; } } -.judge0-hidden, .judge0-style-hidden { - display: none !important; -} -@media (display-mode: standalone) { - .judge0-standalone-hidden { - display: none !important; - } -} + +.ai-chat-container { + background: var(--bg-color); + border-left: 1px solid #ddd; + height: 100vh; + width: 350px; + display: flex; + flex-direction: column; + } + + .chat-messages { + flex: 1; + overflow-y: auto; + padding: 1rem; + } + + .chat-input { + padding: 1rem; + border-top: 1px solid #eee; + display: flex; + gap: 0.5rem; + } + + .ai-message, .user-message { + padding: 0.8rem; + margin: 0.5rem 0; + border-radius: 8px; + max-width: 80%; + } + + .user-message { + background: #007bff; + color: white; + margin-left: auto; + } + + .ai-message { + background: #f0f0f0; + color: #333; + } + + .loading-dots::after { + content: '...'; + animation: dots 1s infinite; + } + + @keyframes dots { + 0%, 20% { content: '.'; } + 40% { content: '..'; } + 60% { content: '...'; } + } \ No newline at end of file diff --git a/css/site.css b/css/site.css index 8e94d43f..7477f8fe 100644 --- a/css/site.css +++ b/css/site.css @@ -5,3 +5,55 @@ html, body { padding: 0; overflow: hidden; } + + +#chat-window { + position: fixed; + bottom: 20px; + right: 20px; + width: 300px; + background: #f1f1f1; + border: 1px solid #ccc; + padding: 10px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +#chat-messages { + height: 200px; + overflow-y: auto; + margin-bottom: 10px; +} + +#chat-input { + width: 100%; + padding: 5px; + box-sizing: border-box; +} + + +/* Light Theme */ +#chat-window { + background: #f1f1f1; + border: 1px solid #ccc; + color: #000; +} + +/* Dark Theme */ +.dark-theme #chat-window { + background: #333; + border: 1px solid #555; + color: #fff; +} + +/* Inline Chat Window */ +#inline-chat-window { + background: #fff; + border: 1px solid #ccc; + color: #000; +} + +.dark-theme #inline-chat-window { + background: #444; + border: 1px solid #666; + color: #fff; +} \ No newline at end of file diff --git a/index.html b/index.html index faf35a96..349d0f30 100644 --- a/index.html +++ b/index.html @@ -21,6 +21,8 @@ } }; + + @@ -228,5 +230,46 @@ navigator.serviceWorker.register("sw.js").then(() => console.log("Service Worker Registered")); } + + +// Here I added the chat interface +
+
+ +
+ + +
+
+
+
+
+
+ +
+
+
+ + +
+
+

AI Assistant

+ +
+
+
+ + +
+
\ No newline at end of file diff --git a/js/ai.js b/js/ai.js index 7e9fe58f..ae1860f8 100644 --- a/js/ai.js +++ b/js/ai.js @@ -1,136 +1,233 @@ -"use strict"; -import theme from "./theme.js"; -import configuration from "./configuration.js"; -import { sourceEditor } from "./ide.js"; - -const THREAD = [ - { - role: "system", - content: ` -You are an AI assistant integrated into an online code editor. -Your main job is to help users with their code, but you should also be able to engage in casual conversation. - -The following are your guidelines: -1. **If the user asks for coding help**: - - Always consider the user's provided code. - - Analyze the code and provide relevant help (debugging, optimization, explanation, etc.). - - Make sure to be specific and clear when explaining things about their code. - -2. **If the user asks a casual question or makes a casual statement**: - - Engage in friendly, natural conversation. - - Do not reference the user's code unless they bring it up or ask for help. - - Be conversational and polite. - -3. **If the user's message is ambiguous or unclear**: - - Politely ask for clarification or more details to better understand the user's needs. - - If the user seems confused about something, help guide them toward what they need. - -4. **General Behavior**: - - Always respond in a helpful, friendly, and professional tone. - - Never assume the user's intent. If unsure, ask clarifying questions. - - Keep the conversation flowing naturally, even if the user hasn't directly asked about their code. - -You will always have access to the user's latest code. -Use this context only when relevant to the user's message. -If their message is unrelated to the code, focus solely on their conversational intent. - `.trim() +// Chat interface component +class AIChat { + constructor() { + this.setupEventListeners(); } -]; -document.addEventListener("DOMContentLoaded", function () { - document.getElementById("judge0-chat-form").addEventListener("submit", async function (event) { - event.preventDefault(); - - const userInput = document.getElementById("judge0-chat-user-input"); - const userInputValue = userInput.value.trim(); - if (userInputValue === "") { - return; - } - - const sendButton = document.getElementById("judge0-chat-send-button"); - - sendButton.classList.add("loading"); - userInput.disabled = true; - - const userMessage = document.createElement("div"); - userMessage.innerText = userInputValue; - userMessage.classList.add("ui", "message", "judge0-message", "judge0-user-message"); - if (!theme.isLight()) { - userMessage.classList.add("inverted"); - } - - const messages = document.getElementById("judge0-chat-messages"); - messages.appendChild(userMessage); - - userInput.value = ""; - messages.scrollTop = messages.scrollHeight; - - THREAD.push({ - role: "user", - content: ` -User's code: -${sourceEditor.getValue()} + setupEventListeners() { + document.getElementById("judge0-chat-form").addEventListener("submit", async (event) => { + event.preventDefault(); + + const userInput = document.getElementById("judge0-chat-user-input"); + const userInputValue = userInput.value.trim(); + if (userInputValue === "") { + return; + } + + const sendButton = document.getElementById("judge0-chat-send-button"); + const messages = document.getElementById("judge0-chat-messages"); + + // Disable input and show loading state + sendButton.classList.add("loading"); + userInput.disabled = true; + + // Display user message + const userMessage = document.createElement("div"); + userMessage.innerText = userInputValue; + userMessage.classList.add("ui", "message", "judge0-message", "judge0-user-message"); + if (!theme.isLight()) { + userMessage.classList.add("inverted"); + } + messages.appendChild(userMessage); + + // Clear input and scroll + userInput.value = ""; + messages.scrollTop = messages.scrollHeight; + + // Create AI message placeholder + const aiMessage = document.createElement("div"); + aiMessage.classList.add("ui", "basic", "segment", "judge0-message", "loading"); + if (!theme.isLight()) { + aiMessage.classList.add("inverted"); + } + messages.appendChild(aiMessage); + messages.scrollTop = messages.scrollHeight; + + try { + // Get current code context + const currentCode = sourceEditor.getValue(); + + // Create context-aware prompt + const prompt = `Current code:\n${currentCode}\n\nUser message: ${userInputValue}`; + + // Use Puter AI API + const aiResponse = await puter.ai.chat([{ + role: "user", + content: prompt + }], { + model: document.getElementById("judge0-chat-model-select").value, + }); + + // Process response + let aiResponseValue = typeof aiResponse === "string" ? aiResponse : aiResponse.map(v => v.text).join("\n"); + + // Display response with markdown formatting + aiMessage.innerHTML = DOMPurify.sanitize(marked.parse(aiResponseValue)); + + // Render any math expressions + renderMathInElement(aiMessage, { + delimiters: [ + { left: "\\(", right: "\\)", display: false }, + { left: "\\[", right: "\\]", display: true } + ] + }); + } catch (error) { + console.error('Chat error:', error); + aiMessage.innerText = "I encountered an error processing your request. Please try again."; + } finally { + // Reset UI state + aiMessage.classList.remove("loading"); + messages.scrollTop = messages.scrollHeight; + userInput.disabled = false; + sendButton.classList.remove("loading"); + userInput.focus(); + } + }); + } -User's message: -${userInputValue} -`.trim() + // Add keyboard shortcut for chat focus + setupKeyboardShortcuts() { + document.addEventListener("keydown", function(e) { + if ((e.metaKey || e.ctrlKey) && e.key === "p") { + if (configuration.get("appOptions.showAIAssistant")) { + e.preventDefault(); + document.getElementById("judge0-chat-user-input").focus(); + } + } }); + } +} +// Initialize chat when document is ready +document.addEventListener("DOMContentLoaded", () => { + const chat = new AIChat(); + chat.setupKeyboardShortcuts(); +}); - const aiMessage = document.createElement("div"); - aiMessage.classList.add("ui", "basic", "segment", "judge0-message", "loading"); - if (!theme.isLight()) { - aiMessage.classList.add("inverted"); - } - messages.appendChild(aiMessage); - messages.scrollTop = messages.scrollHeight; - const aiResponse = await puter.ai.chat(THREAD, { - model: document.getElementById("judge0-chat-model-select").value, - }); - let aiResponseValue = aiResponse.toString(); - if (typeof aiResponseValue !== "string") { - aiResponseValue = aiResponseValue.map(v => v.text).join("\n"); - } - - THREAD.push({ - role: "assistant", - content: aiResponseValue - }); - - aiMessage.innerHTML = DOMPurify.sanitize(aiResponseValue); - renderMathInElement(aiMessage, { - delimiters: [ - { left: "\\(", right: "\\)", display: false }, - { left: "\\[", right: "\\]", display: true } - ] - }); - aiMessage.innerHTML = marked.parse(aiMessage.innerHTML); +// Configure Monaco Editor with inline suggestions +require(["vs/editor/editor.main"], function() { + // Register inline suggestions provider for all languages + monaco.languages.registerInlineCompletionsProvider('*', { + provideInlineCompletions: async (model, position, context) => { + if (!puter.auth.isSignedIn() || + !document.getElementById("judge0-inline-suggestions").checked || + !configuration.get("appOptions.showAIAssistant")) { + return; + } + + // Get text before and after cursor for context + const textBeforeCursor = model.getValueInRange({ + startLineNumber: 1, + startColumn: 1, + endLineNumber: position.lineNumber, + endColumn: position.column + }); + + const textAfterCursor = model.getValueInRange({ + startLineNumber: position.lineNumber, + startColumn: position.column, + endLineNumber: model.getLineCount(), + endColumn: model.getLineMaxColumn(model.getLineCount()) + }); + + try { + // Get AI suggestion using Puter API + const aiResponse = await puter.ai.chat([{ + role: "user", + content: `You are a code completion assistant. Given the following context, generate the most likely code completion. + + ### Code Before Cursor: + ${textBeforeCursor} + + ### Code After Cursor: + ${textAfterCursor} + + ### Instructions: + - Predict the next logical code segment + - Ensure the suggestion is syntactically and contextually correct + - Keep the completion concise and relevant + - Do not repeat existing code + - Provide only the missing code + - **Respond with only the code, without markdown formatting** + - **Do not include triple backticks (\`\`\`) or additional explanations** + + ### Completion:`.trim() + }], { + model: document.getElementById("judge0-chat-model-select").value, + }); + + // Process the response + let aiResponseValue = aiResponse?.toString().trim() || ""; + if (Array.isArray(aiResponseValue)) { + aiResponseValue = aiResponseValue.map(v => v.text).join("\n").trim(); + } - aiMessage.classList.remove("loading"); - messages.scrollTop = messages.scrollHeight; + if (!aiResponseValue || aiResponseValue.length === 0) { + return; + } - userInput.disabled = false; - sendButton.classList.remove("loading"); - userInput.focus(); + // Return the suggestion + return { + items: [{ + insertText: aiResponseValue, + range: { + startLineNumber: position.lineNumber, + startColumn: position.column, + endLineNumber: position.lineNumber, + endColumn: position.column + } + }] + }; + } catch (error) { + console.error('Inline suggestion error:', error); + return null; + } + }, + + // Required but can be empty for basic implementation + handleItemDidShow: () => {}, + handleItemDidHide: () => {}, + freeInlineCompletions: () => {} }); - document.getElementById("judge0-chat-model-select").addEventListener("change", function () { - const userInput = document.getElementById("judge0-chat-user-input"); - userInput.placeholder = `Message ${this.value}`; - }); + // Add UI toggle for inline suggestions + const settingsContainer = document.querySelector('.settings-container'); + if (settingsContainer) { + const toggleDiv = document.createElement('div'); + toggleDiv.className = 'ui toggle checkbox'; + toggleDiv.innerHTML = ` + + + `; + settingsContainer.appendChild(toggleDiv); + } }); -document.addEventListener("keydown", function (e) { - if (e.metaKey || e.ctrlKey) { - switch (e.key) { - case "p": - if (!configuration.get("appOptions.showAIAssistant")) { - break; - } - e.preventDefault(); - document.getElementById("judge0-chat-user-input").focus(); - break; - } +// Update the editor configuration with inline suggestions enabled +const editorConfig = { + value: '// Start coding here...', + language: 'javascript', + theme: 'vs-dark', + automaticLayout: true, + inlineSuggest: { + enabled: true, + mode: 'subword' + }, + // Other existing editor options... + minimap: { + enabled: true } -}); +}; + +// Create editor with updated configuration +sourceEditor = monaco.editor.create(container.getElement()[0], editorConfig); + +// Add keyboard shortcut for accepting suggestions +sourceEditor.addCommand(monaco.KeyMod.Alt | monaco.KeyCode.Tab, () => { + // Accept the current inline suggestion if present + const controller = sourceEditor.getContribution('editor.contrib.inlineSuggestionController'); + if (controller) { + controller.accept(); + } +}); \ No newline at end of file diff --git a/js/ide.js b/js/ide.js index 448f9def..8044dc89 100755 --- a/js/ide.js +++ b/js/ide.js @@ -181,6 +181,17 @@ async function getSelectedLanguage() { return getLanguage(getSelectedLanguageFlavor(), getSelectedLanguageId()) } +// addded error handling here: + +async function handleCompilationError(errorMessage) { + const prompt = `The following code has an error: ${errorMessage}. Suggest a fix.`; + const fix = await sendChatMessage(prompt); + document.getElementById('chat-messages').innerHTML += `
AI: ${fix}
`; +} + + + + function getSelectedLanguageId() { return parseInt($selectLanguage.val()); } @@ -941,3 +952,34 @@ const EXTENSIONS_TABLE = { function getLanguageForExtension(extension) { return EXTENSIONS_TABLE[extension] || { "flavor": CE, "language_id": 43 }; // Plain Text (https://ce.judge0.com/languages/43) } + + + +require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs' }}); +require(['vs/editor/editor.main'], function() { + const editor = monaco.editor.create(document.getElementById('editor'), { + value: '// Start coding here...', + language: 'javascript', + theme: 'vs-dark', + automaticLayout: true, + suggest: { + showWords: true, + showSnippets: true, + showClasses: true, + showFunctions: true + } + }); + + // Example: Add AI-driven autocomplete + editor.addAction({ + id: 'ai-autocomplete', + label: 'AI Autocomplete', + keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.Space], + run: async function(editor) { + const code = editor.getValue(); + const prompt = `Complete the following code:\n${code}`; + const completion = await sendChatMessage(prompt); + editor.setValue(code + '\n' + completion); + } + }); +}); \ No newline at end of file