Nafisa's additions

.gitignore

@@ -0,0 +1 @@
+ide/

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "githubPullRequests.ignoredPullRequestBranches": [
+        "master"
+    ]
+}

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: '...'; }
+  }

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;
+}

index.html

@@ -21,6 +21,8 @@
             }
         };
     </script>
+    <script src="https://cdn.jsdelivr.net/npm/openai@4.0.0/browser/openai.min.js"></script>
+    <script src="js/ai.js"></script>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/golden-layout/1.5.9/goldenlayout.min.js" integrity="sha256-NhJAZDfGgv4PiB+GVlSrPdh3uc75XXYSM4su8hgTchI=" crossorigin="anonymous"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/golden-layout/1.5.9/css/goldenlayout-base.css" integrity="sha512-rGtzJyDE8egZ/OScuBNLW1EIhRydcfrZo14oTvZwRLzEZu+s8foCtwi0XhXsKnhuoQAwJ7POFARWdU4fBL7FbQ==" crossorigin="anonymous" referrerpolicy="no-referrer">
@@ -228,5 +230,46 @@
             navigator.serviceWorker.register("sw.js").then(() => console.log("Service Worker Registered"));
         }
     </script>
+
+
+// Here I added the chat interface
+<div id="chat-window">
+    <div id="chat-messages"></div>
+    <input id="chat-input" type="text" placeholder="Ask a question..." />
+</div>
 </body>
 </html>
+<button id="optimize-btn" class="ui primary labeled icon button">
+    <i class="magic icon"></i>
+    Optimize Code
+</button>
+
+<div id="editor-container">
+    <div id="editor"></div>
+  </div>
+  <div id="judge0-chat-container">
+    <div id="judge0-chat-messages"></div>
+    <form id="judge0-chat-form">
+      <input id="judge0-chat-user-input" type="text">
+    </form>
+  </div>
+  <div id="analysis-results"></div>
+
+
+  <div class="ai-chat-container">
+    <div class="chat-header">
+      <h3>AI Assistant</h3>
+      <select id="ai-mode-select" class="ui dropdown">
+        <option value="debug">Debugging Assistant</option>
+        <option value="code">Code Completion</option>
+        <option value="explain">Explanation</option>
+      </select>
+    </div>
+    <div class="chat-messages" id="chat-messages"></div>
+    <div class="chat-input">
+      <textarea id="user-input" placeholder="Ask about your code..."></textarea>
+      <button id="send-btn" class="ui primary button">
+        <i class="paper plane icon"></i>
+      </button>
+    </div>
+  </div>