Spaces:

Mrdips
/

undefined

Running

App Files Files Community

Mrdips commited on 17 days ago

Commit

cf9ada6

verified ·

1 Parent(s): 81b4f93

создай лусгий чат для ИИ ассистена по фонкцииям

Browse files

Files changed (5) hide show

chat.html +8 -133
components/ai-chat.js +222 -0
index.html +1 -0
style.css +0 -24
tools.html +2 -1

chat.html CHANGED Viewed

@@ -1,3 +1,4 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -9,139 +10,13 @@
     <script src="https://unpkg.com/feather-icons"></script>
 </head>
 <body>
-    <div class="card">
-        <h1>AI Development Assistant</h1>
-        <div class="flex mb-4 space-x-2">
-            <button onclick="setContext('hacking')" class="px-3 py-1 bg-gray-800 text-white rounded hover:bg-gray-700">Hacking</button>
-            <button onclick="setContext('integration')" class="px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700">Integration</button>
-            <button onclick="setContext('debugging')" class="px-3 py-1 bg-green-600 text-white rounded hover:bg-green-700">Debugging</button>
-            <button onclick="setContext('automation')" class="px-3 py-1 bg-purple-600 text-white rounded hover:bg-purple-700">Automation</button>
-        </div>
-        <div id="chat-container" class="mb-4 p-4 border rounded-lg bg-gray-50 h-96 overflow-y-auto">
-            <!-- Chat messages will appear here -->
-        </div>
-        <div class="flex">
-            <input type="text" id="user-input" placeholder="Type your message or command..." class="flex-1 p-2 border rounded-l-lg">
-            <button onclick="sendMessage()" class="bg-blue-500 text-white p-2 rounded-r-lg hover:bg-blue-600">Send</button>
-        </div>
-        <div class="mt-4 grid grid-cols-2 gap-2">
-            <button onclick="insertCommand('/explain')" class="px-2 py-1 bg-gray-200 rounded text-sm hover:bg-gray-300">/explain</button>
-            <button onclick="insertCommand('/code')" class="px-2 py-1 bg-gray-200 rounded text-sm hover:bg-gray-300">/code</button>
-            <button onclick="insertCommand('/api')" class="px-2 py-1 bg-gray-200 rounded text-sm hover:bg-gray-300">/api</button>
-            <button onclick="insertCommand('/fix')" class="px-2 py-1 bg-gray-200 rounded text-sm hover:bg-gray-300">/fix</button>
-        </div>
-<div class="mt-4">
-            <a href="tools.html" class="text-blue-500 hover:underline">Explore Development Tools & SDKs</a>
         </div>
     </div>
-<script>
-        // Function to add a message to the chat
-        function addMessage(sender, text) {
-            const chatContainer = document.getElementById('chat-container');
-            const messageDiv = document.createElement('div');
-            messageDiv.classList.add('mb-2');
-            if (sender === 'user') {
-                messageDiv.classList.add('text-right');
-                messageDiv.innerHTML = `<div class="inline-block bg-blue-100 p-2 rounded-lg">${text}</div>`;
-            } else {
-                messageDiv.classList.add('text-left');
-                messageDiv.innerHTML = `<div class="inline-block bg-gray-100 p-2 rounded-lg">${text}</div>`;
-            }
-            chatContainer.appendChild(messageDiv);
-            chatContainer.scrollTop = chatContainer.scrollHeight;
-        }
-        // Function to send message to AI
-        async function sendMessage() {
-            const userInput = document.getElementById('user-input');
-            const message = userInput.value.trim();
-            if (message) {
-                // Add user message to chat
-                addMessage('user', message);
-                userInput.value = '';
-                try {
-                    // Show typing indicator
-                    const typingDiv = document.createElement('div');
-                    typingDiv.id = 'typing-indicator';
-                    typingDiv.classList.add('text-left', 'mb-2');
-                    typingDiv.innerHTML = '<div class="inline-block bg-gray-100 p-2 rounded-lg">Thinking...</div>';
-                    document.getElementById('chat-container').appendChild(typingDiv);
-                    document.getElementById('chat-container').scrollTop = document.getElementById('chat-container').scrollHeight;
-                    // Call AI API (using OpenAI-compatible API)
-                    const response = await fetch('https://api.openai.com/v1/chat/completions', {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                            'Authorization': 'Bearer YOUR_API_KEY_HERE' // Replace with your actual API key
-                        },
-                        body: JSON.stringify({
-                            model: "gpt-3.5-turbo",
-                            messages: [{role: "user", content: message}],
-                            temperature: 0.7
-                        })
-                    });
-                    // Remove typing indicator
-                    document.getElementById('typing-indicator').remove();
-                    if (response.ok) {
-                        const data = await response.json();
-                        const aiResponse = data.choices[0].message.content.trim();
-                        addMessage('ai', aiResponse);
-                    } else {
-                        addMessage('ai', 'Sorry, I encountered an error. Please try again.');
-                    }
-                } catch (error) {
-                    // Remove typing indicator
-                    if (document.getElementById('typing-indicator')) {
-                        document.getElementById('typing-indicator').remove();
-                    }
-                    addMessage('ai', 'Sorry, I encountered an error. Please try again.');
-                }
-            }
-        }
-        // Allow sending message with Enter key
-        document.getElementById('user-input').addEventListener('keypress', function(e) {
-            if (e.key === 'Enter') {
-                sendMessage();
-            }
-        });
-        let currentContext = 'general';
-        function setContext(context) {
-            currentContext = context;
-            addMessage('system', `Context set to ${context} mode`);
-        }
-        function insertCommand(command) {
-            const input = document.getElementById('user-input');
-            input.value = command + ' ';
-            input.focus();
-        }
-        // Initial welcome message with references
-        window.onload = function() {
-            addMessage('ai', `👋 Welcome to DevAssistant!
-I can help with:
-- API Integrations (REST, GraphQL, WebSockets)
-- Debugging (Chrome DevTools, Wireshark)
-- Security (Burp Suite, OWASP ZAP)
-- Automation (Selenium, Puppeteer)
-Try commands like:
-• /explain [concept] - Get detailed explanations
-• /code [language] - Generate code samples
-• /api [service] - Get API integration help
-• /fix [error] - Debug and fix issues
-Or click the context buttons above!`);
-        };
-</script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <script src="https://unpkg.com/feather-icons"></script>
 </head>
 <body>
+    <ai-chat></ai-chat>
+    <div class="card mt-4 text-center">
+        <a href="tools.html" class="text-blue-500 hover:underline">Explore Development Tools & SDKs</a>
+        <div class="mt-2">
+            <a href="index.html" class="text-blue-500 hover:underline">&larr; Back to Home</a>
         </div>
     </div>
+    <script src="components/ai-chat.js"></script>
 </body>
+</html>

components/ai-chat.js ADDED Viewed

	@@ -0,0 +1,222 @@

+class AiChat extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          max-width: 720px;
+          margin: 0 auto;
+          padding: 20px;
+          border: 1px solid #e5e7eb;
+          border-radius: 12px;
+          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+          font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+        }
+        .header {
+          font-size: 16px;
+          margin-top: 0;
+          margin-bottom: 10px;
+        }
+        .description {
+          color: rgb(107, 114, 128);
+          font-size: 15px;
+          margin-bottom: 20px;
+        }
+        .context-buttons {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 8px;
+          margin-bottom: 16px;
+        }
+        .context-button {
+          padding: 6px 12px;
+          border: none;
+          border-radius: 6px;
+          font-size: 14px;
+          font-weight: 500;
+          cursor: pointer;
+          transition: all 0.2s;
+        }
+        .context-button:hover {
+          opacity: 0.9;
+        }
+        .chat-container {
+          margin-bottom: 16px;
+          padding: 16px;
+          border: 1px solid #e5e7eb;
+          border-radius: 8px;
+          background: #f9fafb;
+          height: 384px;
+          overflow-y: auto;
+          font-family: 'SF Mono', 'Roboto Mono', monospace;
+          font-size: 14px;
+        }
+        .message {
+          margin-bottom: 8px;
+          max-width: 80%;
+        }
+        .user-message {
+          margin-left: auto;
+          text-align: right;
+        }
+        .ai-message {
+          margin-right: auto;
+          text-align: left;
+        }
+        .message-content {
+          display: inline-block;
+          padding: 10px 12px;
+          border-radius: 8px;
+        }
+        .user-message .message-content {
+          background: #ebf5ff;
+          border-right: 3px solid #2563eb;
+        }
+        .ai-message .message-content {
+          background: #f3f4f6;
+          border-left: 3px solid #3b82f6;
+        }
+        .input-area {
+          display: flex;
+        }
+        .message-input {
+          flex: 1;
+          padding: 8px 12px;
+          border: 1px solid #e5e7eb;
+          border-radius: 8px 0 0 8px;
+          font-size: 14px;
+        }
+        .send-button {
+          padding: 8px 16px;
+          background: #3b82f6;
+          color: white;
+          border: none;
+          border-radius: 0 8px 8px 0;
+          cursor: pointer;
+        }
+        .send-button:hover {
+          background: #2563eb;
+        }
+        .command-buttons {
+          display: grid;
+          grid-template-columns: repeat(2, 1fr);
+          gap: 8px;
+          margin-top: 16px;
+        }
+        .command-button {
+          padding: 8px 12px;
+          background: #f3f4f6;
+          border: none;
+          border-radius: 6px;
+          font-size: 14px;
+          cursor: pointer;
+        }
+        .command-button:hover {
+          background: #e5e7eb;
+        }
+        .typing-indicator {
+          text-align: left;
+          margin-bottom: 8px;
+        }
+        .typing-indicator .message-content {
+          background: #f3f4f6;
+          border-left: 3px solid #3b82f6;
+        }
+      </style>
+      <h1 class="header">AI Development Assistant</h1>
+      <p class="description">Smart coding help and automation</p>
+      <div class="context-buttons">
+        <button class="context-button" style="background: #374151; color: white;" data-context="hacking">Hacking</button>
+        <button class="context-button" style="background: #3b82f6; color: white;" data-context="integration">Integration</button>
+        <button class="context-button" style="background: #10b981; color: white;" data-context="debugging">Debugging</button>
+        <button class="context-button" style="background: #8b5cf6; color: white;" data-context="automation">Automation</button>
+      </div>
+      <div class="chat-container" id="chatContainer">
+        <!-- Messages will be added here -->
+      </div>
+      <div class="input-area">
+        <input type="text" class="message-input" id="messageInput" placeholder="Type your message or command...">
+        <button class="send-button" id="sendButton">Send</button>
+      </div>
+      <div class="command-buttons">
+        <button class="command-button" data-command="/explain">/explain</button>
+        <button class="command-button" data-command="/code">/code</button>
+        <button class="command-button" data-command="/api">/api</button>
+        <button class="command-button" data-command="/fix">/fix</button>
+      </div>
+    `;
+    this.initializeChat();
+  }
+  initializeChat() {
+    this.currentContext = 'general';
+    this.chatContainer = this.shadowRoot.getElementById('chatContainer');
+    this.messageInput = this.shadowRoot.getElementById('messageInput');
+    this.sendButton = this.shadowRoot.getElementById('sendButton');
+    // Add event listeners
+    this.sendButton.addEventListener('click', () => this.sendMessage());
+    this.messageInput.addEventListener('keypress', (e) => {
+      if (e.key === 'Enter') {
+        this.sendMessage();
+      }
+    });
+    // Context buttons
+    const contextButtons = this.shadowRoot.querySelectorAll('.context-button');
+    contextButtons.forEach(button => {
+      button.addEventListener('click', () => {
+        this.setContext(button.dataset.context);
+      });
+    });
+    // Command buttons
+    const commandButtons = this.shadowRoot.querySelectorAll('.command-button');
+    commandButtons.forEach(button => {
+      button.addEventListener('click', () => {
+        this.insertCommand(button.dataset.command);
+      });
+    });
+    // Initial welcome message
+    this.addMessage('ai', `👋 Welcome to DevAssistant!
+I can help with:
+- API Integrations (REST, GraphQL, WebSockets)
+- Debugging (Chrome DevTools, Wireshark)
+- Security (Burp Suite, OWASP ZAP)
+- Automation (Selenium, Puppeteer)
+Try commands like:
+• /explain [concept] - Get detailed explanations
+• /code [language] - Generate code samples
+• /api [service] - Get API integration help
+• /fix [error] - Debug and fix issues
+Or click the context buttons above!`);
+  }
+  addMessage(sender, text) {
+    const messageDiv = document.createElement('div');
+    messageDiv.classList.add('message');
+    if (sender === 'user') {
+      messageDiv.classList.add('user-message');
+      messageDiv.innerHTML = `<div class="message-content">${this.escapeHtml(text)}</div>`;
+    } else {
+      messageDiv.classList.add('ai-message');
+      messageDiv.innerHTML = `<div class="message-content">${this.formatMessage(text)}</div>`;
+    }
+    this.chatContainer.appendChild(messageDiv);
+    this.chatContainer.scrollTop = this.chatContainer.scrollHeight;
+  }
+  formatMessage(text) {
+    // Simple formatting for code blocks
+    return text.replace(/

index.html CHANGED Viewed

@@ -24,5 +24,6 @@
             </a>
         </div>
     </div>
 </body>
 </html>

             </a>
         </div>
     </div>
+    <script src="components/ai-chat.js"></script>
 </body>
 </html>

style.css CHANGED Viewed

@@ -24,25 +24,6 @@ p {
 	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
 }
-#chat-container {
-	background: #f9fafb;
-	font-family: 'SF Mono', 'Roboto Mono', monospace;
-	font-size: 14px;
-}
-#chat-container div[class*="bg-gray-100"] {
-	max-width: 80%;
-	background: #f3f4f6;
-	border-left: 3px solid #3b82f6;
-	padding: 10px 12px;
-}
-#chat-container div[class*="bg-blue-100"] {
-	max-width: 80%;
-	background: #ebf5ff;
-	border-right: 3px solid #2563eb;
-	padding: 10px 12px;
-}
 /* IDE Cards */
 ide-card {
     margin-bottom: 1.5rem;
@@ -69,11 +50,6 @@ ide-card {
     margin-right: 0.5rem;
     margin-bottom: 0.5rem;
 }
-button[onclick^="setContext"] {
-	font-size: 14px;
-	font-weight: 500;
-	transition: all 0.2s;
-}
 .card p:last-child {
 	margin-bottom: 0;
 }

 	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
 }
 /* IDE Cards */
 ide-card {
     margin-bottom: 1.5rem;
     margin-right: 0.5rem;
     margin-bottom: 0.5rem;
 }
 .card p:last-child {
 	margin-bottom: 0;
 }

tools.html CHANGED Viewed

@@ -161,5 +161,6 @@
     </div>
     <script src="components/api-connector.js"></script>
     <script src="components/ide-card.js"></script>
 </body>
-</html>

     </div>
     <script src="components/api-connector.js"></script>
     <script src="components/ide-card.js"></script>
+    <script src="components/ai-chat.js"></script>
 </body>
+</html>