Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Student Coding Assistant - Chat</title> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='css/chat.css') }}"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" media="(prefers-color-scheme: dark)"> | |
| </head> | |
| <body> | |
| <div class="chat-container"> | |
| <!-- Header --> | |
| <div class="chat-header"> | |
| <div class="header-left"> | |
| <h1>Student Coding Assistant</h1> | |
| <div class="connection-status" id="connectionStatus"> | |
| <span class="status-indicator" id="statusIndicator"></span> | |
| <span class="status-text" id="statusText">Connecting...</span> | |
| </div> | |
| </div> | |
| <div class="header-right"> | |
| <div class="language-selector"> | |
| <label for="languageSelect">Language:</label> | |
| <select id="languageSelect" class="language-dropdown"> | |
| <option value="python" selected>Python</option> | |
| <option value="javascript">JavaScript</option> | |
| <option value="java">Java</option> | |
| <option value="cpp">C++</option> | |
| <option value="csharp">C#</option> | |
| <option value="go">Go</option> | |
| <option value="rust">Rust</option> | |
| <option value="typescript">TypeScript</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Chat Messages Area --> | |
| <div class="chat-messages" id="chatMessages"> | |
| <div class="welcome-message"> | |
| <div class="message assistant-message"> | |
| <div class="message-content"> | |
| <p>👋 Welcome to the Student Coding Assistant! I'm here to help you learn programming.</p> | |
| <p>I can help you with:</p> | |
| <ul> | |
| <li>Explaining programming concepts</li> | |
| <li>Debugging code errors</li> | |
| <li>Code review and improvements</li> | |
| <li>Best practices and examples</li> | |
| </ul> | |
| <p>Currently set to <strong>Python</strong>. You can change the language using the dropdown above.</p> | |
| <p><em>Note: This is a demo interface. The full AI-powered assistant will be available once all backend services are implemented.</em></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Typing Indicator --> | |
| <div class="typing-indicator" id="typingIndicator" style="display: none;"> | |
| <div class="message assistant-message"> | |
| <div class="message-content"> | |
| <div class="typing-animation"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| <span class="typing-text">Assistant is typing...</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Chat Input Area --> | |
| <div class="chat-input-container"> | |
| <div class="error-message" id="errorMessage" style="display: none;"> | |
| <span class="error-text" id="errorText"></span> | |
| <button class="error-close" id="errorClose">×</button> | |
| </div> | |
| <div class="chat-input-wrapper"> | |
| <textarea | |
| id="messageInput" | |
| class="message-input" | |
| placeholder="Ask me anything about programming..." | |
| rows="1" | |
| maxlength="2000" | |
| ></textarea> | |
| <button id="sendButton" class="send-button" disabled> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <line x1="22" y1="2" x2="11" y2="13"></line> | |
| <polygon points="22,2 15,22 11,13 2,9"></polygon> | |
| </svg> | |
| </button> | |
| </div> | |
| <div class="input-footer"> | |
| <span class="character-count" id="characterCount">0/2000</span> | |
| <span class="input-hint">Press Enter to send, Shift+Enter for new line</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Notification Toast --> | |
| <div class="notification-toast" id="notificationToast" style="display: none;"> | |
| <span class="notification-text" id="notificationText"></span> | |
| </div> | |
| <!-- Scripts --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> | |
| <script src="{{ url_for('static', filename='js/chat.js') }}"></script> | |
| </body> | |
| </html>"" |