add a chat with ai option in this, so the user can use the ai to write codes

components/ai-agent.js

@@ -4,13 +4,13 @@ class AIAgent extends HTMLElement {
     super();
     this.attachShadow({ mode: 'open' });
     this.isOpen = false;
-    this.conversation = [
-      {
-        role: 'assistant',
-        content: 'Hello! I\'m your AI coding assistant. I can help you:\n\n1. Write code\n2. Debug issues\n3. Create new projects\n4. Explain concepts\n\nWhat would you like to work on today?'
-      }
-    ];
-    this.projectContext = {
+        this.conversation = [
+            {
+                role: 'assistant',
+                content: '👋 Hello! I\'m your AI coding assistant.\n\nI can help you with:\n\n💻 Writing and debugging code\n📚 Explaining programming concepts\n🚀 Setting up new projects\n⚡ Optimizing your existing code\n\nJust tell me what you need help with! For example:\n\n- "Write a Python function to calculate factorial"\n- "Explain how React hooks work"\n- "Help me debug this Node.js error"\n- "Create a React component for a login form"'
+            }
+        ];
+this.projectContext = {
       currentFile: null,
       projectType: null,
       language: null

components/navbar.js

@@ -172,14 +172,18 @@ class CustomNavbar extends HTMLElement {
               <i data-feather="book" style="width: 16px; height: 16px;"></i>
               Docs
             </button>
-            <button class="btn btn-primary">
-              <i data-feather="plus" style="width: 16px; height: 16px;"></i>
-              Create
-            </button>
-            <div class="user-menu">
-              <div class="avatar">U</div>
-            </div>
-          </div>
+                            <button class="btn btn-primary">
+                                <i data-feather="plus" style="width: 16px; height: 16px;"></i>
+                                Create
+                            </button>
+                            <button class="btn btn-outline" onclick="window.dispatchEvent(new CustomEvent('toggleAIChat'))">
+                                <i data-feather="message-square" style="width: 16px; height: 16px;"></i>
+                                AI Chat
+                            </button>
+                            <div class="user-menu">
+                                <div class="avatar">U</div>
+                            </div>
+</div>
         </div>
       </nav>
     `;

editor.html

@@ -121,10 +121,14 @@
         </div>
     </div>
     <custom-footer></custom-footer>
-    
     <ai-agent></ai-agent>
-    
-    <script src="components/navbar.js"></script>
+    <div class="fixed bottom-4 right-20 z-50">
+        <button class="bg-primary hover:bg-blue-600 text-white p-3 rounded-full shadow-lg flex items-center justify-center" 
+                onclick="window.dispatchEvent(new CustomEvent('toggleAIChat'))">
+            <i data-feather="message-square"></i>
+        </button>
+    </div>
+<script src="components/navbar.js"></script>
     <script src="components/footer.js"></script>
     <script src="components/ai-agent.js"></script>
     <script src="script.js"></script>

script.js

@@ -22,6 +22,13 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     });
 });
+// AI Chat toggle functionality
+document.addEventListener('toggleAIChat', function() {
+    const aiAgent = document.querySelector('ai-agent');
+    if (aiAgent) {
+        aiAgent.shadowRoot.querySelector('#agentButton').click();
+    }
+});
 
 // Theme toggle functionality
 function toggleTheme() {

style.css

@@ -54,6 +54,14 @@ button:hover {
     transform: translateY(-3px);
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
 }
+/* AI Chat button styles */
+.fixed.bottom-4 {
+    transition: all 0.2s ease;
+}
+
+.fixed.bottom-4:hover {
+    transform: scale(1.1);
+}
 
 /* Feather icons alignment */
 i[data-feather] {