Spaces:
Running
Running
بالتأكيد، إليك برومبت مفصل لتصميم واجهة المستخدم (UI) لتطبيق دردشة متكامل مع نموذج ذكاء اصطناعي ووكيل، مع مراعاة التوافق مع الأجهزة المختلفة وتضمين صفحات تسجيل الدخول، الدردشة، وإدارة المفاتيح البرمجية (API Keys) والمحادثات. البرومبت: تصميم واجهة مستخدم (UI) لتطبيق دردشة متكامل بالذكاء الاصطناعي الهدف العام: قم بتصميم واجهة مستخدم (UI) ويب شاملة، سريعة الاستجابة (responsive)، وبديهية لتطبيق دردشة يعمل بالذكاء الاصطناعي. يجب أن يكون التصميم عصريًا، نظيفًا، وسهل الاستخدام عبر مختلف الأجهزة (سطح المكتب، الأجهزة اللوحية، الهواتف الذكية). الميزات الأساسية المطلوبة: التوافق مع الأجهزة (Responsiveness): يجب أن يتكيف التصميم بسلاسة مع أحجام الشاشات المختلفة دون فقدان الوظائف أو الجمالية. الدردشة مع نموذج ذكاء اصطناعي ووكيل: يجب أن يسمح التطبيق للمستخدم بالتبديل والتفاعل مع نموذج ذكاء اصطناعي عام (مثل GPT) ووكيل ذكاء اصطناعي متخصص (قد يكون له دور محدد أو قاعدة معرفية خاصة). إدارة المفاتيح البرمجية (API Keys): يجب أن يوفر مكانًا آمنًا وفعالًا لإدخال وإدارة مفاتيح API الخاصة بالنماذج المختلفة. حفظ المحادثات (Conversation History): القدرة على عرض وإدارة المحادثات السابقة. هيكل الصفحات المطلوبة (بتفاصيل الواجهة): 1. صفحة تسجيل الدخول (Login/Authentication Page): الهدف: توفير نقطة دخول آمنة للتطبيق. عناصر الواجهة: شعار التطبيق/اسم العلامة التجارية: في مكان بارز. عنوان جذاب: مثل "مرحبًا بك!" أو "تسجيل الدخول إلى DeepSite". نموذج تسجيل الدخول: حقل إدخال للبريد الإلكتروني/اسم المستخدم. حقل إدخال لكلمة المرور (مع خيار إظهار/إخفاء). زر "تسجيل الدخول". خيارات إضافية (إن أمكن): رابط "نسيت كلمة المرور؟". رابط "إنشاء حساب جديد" (إذا كان التطبيق يدعم التسجيل). تصميم جذاب: خلفية نظيفة، استخدام الألوان المميزة للتطبيق، رسوم متحركة بسيطة عند التفاعل. رسائل الخطأ/التحقق: مساحات واضحة لعرض رسائل الأخطاء (مثل "البريد الإلكتروني غير صالح" أو "كلمة المرور خاطئة"). 2. صفحة الدردشة الرئيسية (Main Chat Interface Page): الهدف: توفير بيئة تفاعلية للدردشة مع نماذج ووكلاء الذكاء الاصطناعي. عناصر الواجهة: شريط التنقل العلوي (Header): شعار/اسم التطبيق. أيقونة/زر لملف المستخدم أو الإعدادات العامة (يمكن أن يؤدي إلى صفحة إدارة المفاتيح والمحادثات). زر "محادثة جديدة" لبدء محادثة من الصفر. اللوحة الجانبية (Sidebar) - (اختياري لكن مفضل): قائمة بالمحادثات السابقة (Conversation History) مع إمكانية البحث. زر "محادثة جديدة". أيقونة/مؤشر يوضح الوضع الحالي (متصل/غير متصل بالإنترنت). قد تحتوي على تبديل سريع بين "النموذج العام AI" و "الوكيل AI" إذا لم يكن ذلك جزءًا من منطقة الإدخال. منطقة عرض الدردشة (Chat Display Area): عرض فقاعات الرسائل بشكل واضح ومميز بين المستخدم والذكاء الاصطناعي/الوكيل (مثل ألوان مختلفة، أيقونات). تذييل الرسائل بوقت الإرسال. شريط تمرير سلس لعرض المحادثات الطويلة. مؤشر تحميل واضح عند انتظار رد الذكاء الاصطناعي. زر لنسخ نص الرسالة. حالات فارغة (Empty State) عند بدء محادثة جديدة (مثل "كيف يمكنني مساعدتك اليوم؟"). منطقة إدخال الرسائل (Message Input Area): مربع نص متعدد الأسطر (Textarea) لكتابة الرسائل. زر "إرسال" (Send Button) واضح (أيقونة سهم أو نص "إرسال"). محدد النموذج/الوكيل (Model/Agent Selector): عنصر تحكم (مثل تبديل، أزرار مقسمة، أو قائمة منسدلة) يسمح للمستخدم بالاختيار بين التحدث إلى "النموذج AI العام" أو "الوكيل AI المتخصص". يجب أن يكون هذا العنصر مرئيًا وسهل الاستخدام. أيقونات إضافية (اختياري): مثل مرفقات الملفات، إدخال الصوت، إلخ. التبديل بين النماذج والوكيل: يجب أن يكون واضحًا للمستخدم مع من يتحدث حاليًا. يمكن استخدام لون خلفية مختلف لمنطقة الدردشة، أو علامة في شريط التنقل، أو أيقونة بجانب اسم النموذج. 3. صفحة سجل المحادثات وإدارة المفاتيح (Conversation History & API Key Management Page): الهدف: إدارة المحادثات السابقة وتكوين مفاتيح API للنماذج. عناصر الواجهة: شريط التنقل العلوي (Header): عنوان الصفحة ("الإعدادات" أو "المحادثات والمفاتيح")، وزر للعودة إلى صفحة الدردشة الرئيسية. تخطيط الصفحة: يمكن أن تكون صفحة واحدة مقسمة إلى قسمين رئيسيين، أو علامات تبويب (Tabs) بين "المحادثات" و "إدارة المفاتيح". القسم الأول: سجل المحادثات (Conversation History): قائمة بالمحادثات: عرض كل محادثة سابقة (مع عنوان/أول جملة، وتاريخ، وربما أيقونة للنموذج المستخدم). إمكانية البحث/التصفية: شريط بحث للعثور على محادثات معينة. أيقونة/زر "حذف": لحذف محادثة محددة. زر "تحميل/استئناف": عند النقر على محادثة، يتم تحميلها في صفحة الدردشة الرئيسية. رسائل حالة: "لا توجد محادثات محفوظة بعد" إذا كانت القائمة فارغة. القسم الثاني: إدارة مفاتيح API (API Key Management): عنوان واضح: "إدارة مفاتيح API" أو "تكوين النماذج". قائمة بالنماذج المدعومة: عرض كل نموذج AI يمكن للمستخدم تكوينه (مثل: OpenAI GPT, Google Gemini, Anthropic Claude, إلخ). لكل نموذج: اسم النموذج: (مثل: OpenAI API Key). حقل إدخال مفتاح API: يجب أن يكون النص مخفيًا (masked) افتراضيًا (مثل علامات النجمة ******). زر "إظهار/إخفاء" (eye icon) لرؤية المفتاح. حقل واضح لاستقبال المفتاح الجديد. زر "حفظ/تحديث": لحفظ المفتاح المدخل. زر "اختبار الاتصال": (اختياري لكن مفضل) لإعطاء المستخدم ردود فعل فورية حول ما إذا كان المفتاح صالحًا ويعمل. زر "حذف المفتاح": لإزالة المفتاح المحفوظ. رسائل حالة: "مفتاح صالح"، "مفتاح غير صالح"، "خطأ في الاتصال". زر "إضافة نموذج جديد": (إذا كان التطبيق يدعم إضافة نماذج مخصصة أو غير قياسية). إرشادات المساعدة: نص موجز يوضح للمستخدم من أين يمكنه الحصول على مفاتيح API هذه. ملاحظات أمنية: تذكير بأهمية الحفاظ على المفاتيح سرية. مبادئ التصميم العامة: الجمالية البصرية: تصميم نظيف، حديث، بسيط، وجذاب مع استخدام جيد للمساحات البيضاء. سهولة الاستخدام (Usability): يجب أن تكون جميع العناصر سهلة التحديد والاستخدام. مسارات المستخدم يجب أن تكون واضحة ومنطقية. التغذية الراجعة (Feedback): تقديم ردود فعل واضحة للمستخدم عند إجراء إجراءات (مثل التحميل، الحفظ، الأخطاء). إمكانية الوصول (Accessibility): مراعاة المستخدمين ذوي الاحتياجات الخاصة (مثل التباين الجيد للألوان، دعم التنقل باللوحة المفاتيح). الخطوط والأيقونات: استخدام خطوط مقروءة وأيقونات واضحة ومعبرة. نظام الألوان: لوحة ألوان متناسقة ومريحة للعين، مع استخدام الألوان الجريئة للنقاط المهمة (أزرار الدعوة للإجراء، مؤشرات الحالة). المخرجات المطلوبة: وصف مفصل: لكل صفحة وعناصرها كما هو موضح أعلاه. تصور مرئي (اختياري، لكن مفضل): إذا أمكن، يمكن تضمين اسكتشات سريعة (wireframes) أو mockups بسيطة لتوضيح التخطيط المقترح لكل صفحة وتفاعلاتها الأساسية. وصف موجز لتجربة المستخدم (UX Flow): كيف يتنقل المستخدم بين الصفحات ويتفاعل مع الميزات الرئيسية (مثل تسجيل الدخول، بدء الدردشة، التبديل بين النموذج والوكيل، حفظ API Key). آمل أن يكون هذا البرومبت مفيدًا لتصميم واجهة المستخدم المطلوبة! - Initial Deployment
e29ed80
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Chat App</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* Custom styles */ | |
| .chat-bubble-user { | |
| border-radius: 1.125rem 1.125rem 0 1.125rem; | |
| } | |
| .chat-bubble-ai { | |
| border-radius: 1.125rem 1.125rem 1.125rem 0; | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.3s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .slide-in { | |
| animation: slideIn 0.3s ease-out; | |
| } | |
| @keyframes slideIn { | |
| from { transform: translateX(-100%); } | |
| to { transform: translateX(0); } | |
| } | |
| .input-textarea { | |
| resize: none; | |
| scrollbar-width: thin; | |
| } | |
| .input-textarea::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .input-textarea::-webkit-scrollbar-thumb { | |
| background-color: rgba(156, 163, 175, 0.5); | |
| border-radius: 3px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <!-- Login Page --> | |
| <div id="login-page" class="min-h-screen flex items-center justify-center p-4"> | |
| <div class="w-full max-w-md bg-white rounded-xl shadow-lg overflow-hidden fade-in"> | |
| <div class="bg-gradient-to-r from-blue-600 to-indigo-700 p-6 text-center"> | |
| <h1 class="text-3xl font-bold text-white">DeepSite</h1> | |
| <p class="text-blue-100 mt-2">Your AI Assistant Platform</p> | |
| </div> | |
| <div class="p-6"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-6">Welcome back!</h2> | |
| <form id="login-form" class="space-y-4"> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> | |
| <input type="email" id="email" required | |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition" | |
| placeholder="your@email.com"> | |
| </div> | |
| <div> | |
| <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label> | |
| <div class="relative"> | |
| <input type="password" id="password" required | |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition pr-10" | |
| placeholder="••••••••"> | |
| <button type="button" id="toggle-password" class="absolute right-3 top-2.5 text-gray-500"> | |
| <i class="far fa-eye"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <input id="remember-me" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> | |
| <label for="remember-me" class="ml-2 block text-sm text-gray-700">Remember me</label> | |
| </div> | |
| <a href="#" class="text-sm text-blue-600 hover:text-blue-500">Forgot password?</a> | |
| </div> | |
| <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition duration-300"> | |
| Sign In | |
| </button> | |
| </form> | |
| <div class="mt-6 text-center"> | |
| <p class="text-sm text-gray-600">Don't have an account? | |
| <a href="#" class="text-blue-600 hover:text-blue-500 font-medium">Sign up</a> | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Chat Page (Hidden by default) --> | |
| <div id="chat-page" class="hidden h-screen flex flex-col bg-gray-50"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm py-3 px-4 flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <button id="sidebar-toggle" class="md:hidden text-gray-600 hover:text-gray-900"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| <h1 class="text-xl font-bold text-gray-800">DeepSite</h1> | |
| <div id="model-indicator" class="hidden md:flex items-center space-x-2 ml-4"> | |
| <span class="px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800"> | |
| <i class="fas fa-robot mr-1"></i> AI Model | |
| </span> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button id="new-chat-btn" class="hidden md:flex items-center space-x-1 bg-blue-50 hover:bg-blue-100 text-blue-700 px-3 py-1.5 rounded-lg text-sm font-medium transition"> | |
| <i class="fas fa-plus"></i> | |
| <span>New Chat</span> | |
| </button> | |
| <button id="settings-btn" class="text-gray-600 hover:text-gray-900"> | |
| <i class="fas fa-cog text-xl"></i> | |
| </button> | |
| <div class="w-8 h-8 rounded-full bg-blue-600 text-white flex items-center justify-center font-medium cursor-pointer"> | |
| U | |
| </div> | |
| </div> | |
| </header> | |
| <div class="flex flex-1 overflow-hidden"> | |
| <!-- Sidebar --> | |
| <aside id="sidebar" class="hidden md:block w-64 bg-white border-r border-gray-200 flex flex-col"> | |
| <div class="p-4 border-b border-gray-200"> | |
| <button id="new-chat-btn-sidebar" class="w-full flex items-center justify-center space-x-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition"> | |
| <i class="fas fa-plus"></i> | |
| <span>New Chat</span> | |
| </button> | |
| </div> | |
| <div class="p-4 border-b border-gray-200"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search conversations..." | |
| class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"> | |
| <i class="fas fa-search absolute left-3 top-2.5 text-gray-400"></i> | |
| </div> | |
| </div> | |
| <div class="flex-1 overflow-y-auto"> | |
| <div class="p-2"> | |
| <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider px-2 mb-2">Today</h3> | |
| <ul id="conversation-list" class="space-y-1"> | |
| <li class="p-2 rounded-lg hover:bg-gray-100 cursor-pointer flex items-center justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-comment text-gray-400"></i> | |
| <span class="truncate">How to create a React component?</span> | |
| </div> | |
| <i class="fas fa-ellipsis-v text-gray-400 hover:text-gray-600"></i> | |
| </li> | |
| <li class="p-2 rounded-lg hover:bg-gray-100 cursor-pointer flex items-center justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-comment text-gray-400"></i> | |
| <span class="truncate">Explain quantum computing</span> | |
| </div> | |
| <i class="fas fa-ellipsis-v text-gray-400 hover:text-gray-600"></i> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="p-2"> | |
| <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider px-2 mb-2">Yesterday</h3> | |
| <ul class="space-y-1"> | |
| <li class="p-2 rounded-lg hover:bg-gray-100 cursor-pointer flex items-center justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-comment text-gray-400"></i> | |
| <span class="truncate">Python vs JavaScript comparison</span> | |
| </div> | |
| <i class="fas fa-ellipsis-v text-gray-400 hover:text-gray-600"></i> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-200"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-8 h-8 rounded-full bg-blue-600 text-white flex items-center justify-center font-medium"> | |
| U | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">User Name</p> | |
| <p class="text-xs text-gray-500">user@example.com</p> | |
| </div> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Main Chat Area --> | |
| <main class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Chat Messages --> | |
| <div id="chat-messages" class="flex-1 overflow-y-auto p-4 space-y-4"> | |
| <!-- Empty state --> | |
| <div id="empty-state" class="h-full flex flex-col items-center justify-center text-center px-4"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-robot text-blue-600 text-2xl"></i> | |
| </div> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-2">How can I help you today?</h2> | |
| <p class="text-gray-600 max-w-md">Ask me anything or try one of these examples:</p> | |
| <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-3 max-w-lg"> | |
| <button class="example-prompt bg-white hover:bg-gray-50 border border-gray-200 rounded-lg p-3 text-left text-sm text-gray-700 transition"> | |
| "Explain quantum computing in simple terms" | |
| </button> | |
| <button class="example-prompt bg-white hover:bg-gray-50 border border-gray-200 rounded-lg p-3 text-left text-sm text-gray-700 transition"> | |
| "How do I make an HTTP request in JavaScript?" | |
| </button> | |
| <button class="example-prompt bg-white hover:bg-gray-50 border border-gray-200 rounded-lg p-3 text-left text-sm text-gray-700 transition"> | |
| "Write a Python function to calculate factorial" | |
| </button> | |
| <button class="example-prompt bg-white hover:bg-gray-50 border border-gray-200 rounded-lg p-3 text-left text-sm text-gray-700 transition"> | |
| "Compare React and Vue.js frameworks" | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Chat message examples (hidden by default) --> | |
| <div id="message-container" class="hidden space-y-4"> | |
| <div class="flex justify-end fade-in"> | |
| <div class="max-w-3xl bg-blue-600 text-white chat-bubble-user px-4 py-3"> | |
| <p>How do I create a responsive navbar with Tailwind CSS?</p> | |
| <div class="flex justify-end mt-1"> | |
| <span class="text-xs text-blue-100">10:24 AM</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-start fade-in"> | |
| <div class="max-w-3xl bg-gray-200 text-gray-800 chat-bubble-ai px-4 py-3"> | |
| <p>To create a responsive navbar with Tailwind CSS, you can follow these steps:</p> | |
| <ol class="list-decimal pl-5 space-y-1 mt-2"> | |
| <li>Start with a basic nav element structure</li> | |
| <li>Use flexbox for layout</li> | |
| <li>Add responsive breakpoints</li> | |
| <li>Include a mobile menu toggle</li> | |
| </ol> | |
| <p class="mt-2">Would you like me to show you a complete code example?</p> | |
| <div class="flex justify-between items-center mt-2"> | |
| <div class="flex space-x-2"> | |
| <button class="copy-btn text-xs text-gray-500 hover:text-gray-700"> | |
| <i class="far fa-copy mr-1"></i> Copy | |
| </button> | |
| <button class="feedback-btn text-xs text-gray-500 hover:text-gray-700"> | |
| <i class="far fa-thumbs-up mr-1"></i> Helpful | |
| </button> | |
| </div> | |
| <span class="text-xs text-gray-500">10:25 AM</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Model Selector and Input Area --> | |
| <div class="border-t border-gray-200 bg-white p-4"> | |
| <div class="flex items-center justify-center mb-3"> | |
| <div class="inline-flex rounded-md shadow-sm" role="group"> | |
| <button type="button" id="ai-model-btn" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-l-lg hover:bg-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-500 transition"> | |
| <i class="fas fa-robot mr-2"></i> AI Model | |
| </button> | |
| <button type="button" id="ai-agent-btn" class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border-t border-b border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-500 transition"> | |
| <i class="fas fa-user-tie mr-2"></i> AI Agent | |
| </button> | |
| <button type="button" id="custom-agent-btn" class="px-4 py-2 text-sm font-medium text-gray-900 bg-white rounded-r-md border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-500 transition"> | |
| <i class="fas fa-cog mr-2"></i> Custom | |
| </button> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <textarea id="message-input" rows="1" placeholder="Type your message..." | |
| class="input-textarea w-full px-4 py-3 pr-12 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition" | |
| style="min-height: 50px; max-height: 150px;"></textarea> | |
| <div class="absolute right-2 bottom-2 flex space-x-1"> | |
| <button class="text-gray-500 hover:text-gray-700 p-1"> | |
| <i class="far fa-paperclip"></i> | |
| </button> | |
| <button id="send-btn" class="bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-lg transition disabled:opacity-50" disabled> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <!-- Settings Page (Hidden by default) --> | |
| <div id="settings-page" class="hidden min-h-screen bg-gray-50"> | |
| <div class="max-w-6xl mx-auto px-4 py-6"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <div class="flex items-center space-x-3"> | |
| <button id="back-to-chat-btn" class="text-gray-600 hover:text-gray-900"> | |
| <i class="fas fa-arrow-left text-xl"></i> | |
| </button> | |
| <h1 class="text-2xl font-bold text-gray-800">Settings</h1> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-6"> | |
| <!-- Sidebar Navigation --> | |
| <div class="md:col-span-1"> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden"> | |
| <nav class="space-y-1 p-2"> | |
| <button data-tab="api-keys" class="tab-btn w-full text-left px-4 py-2 text-sm font-medium text-blue-700 bg-blue-50 rounded-md"> | |
| <i class="fas fa-key mr-2"></i> API Keys | |
| </button> | |
| <button data-tab="conversations" class="tab-btn w-full text-left px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-md"> | |
| <i class="fas fa-comments mr-2"></i> Conversations | |
| </button> | |
| <button data-tab="account" class="tab-btn w-full text-left px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-md"> | |
| <i class="fas fa-user mr-2"></i> Account | |
| </button> | |
| <button data-tab="appearance" class="tab-btn w-full text-left px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-md"> | |
| <i class="fas fa-palette mr-2"></i> Appearance | |
| </button> | |
| </nav> | |
| </div> | |
| </div> | |
| <!-- Main Content Area --> | |
| <div class="md:col-span-3"> | |
| <!-- API Keys Tab --> | |
| <div id="api-keys-tab" class="tab-content bg-white rounded-lg shadow-sm p-6"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-6">API Key Management</h2> | |
| <div class="space-y-6"> | |
| <!-- OpenAI API Key --> | |
| <div class="border border-gray-200 rounded-lg p-4"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center space-x-2"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/4/4d/OpenAI_Logo.svg" alt="OpenAI" class="h-6"> | |
| <h3 class="font-medium text-gray-800">OpenAI API</h3> | |
| </div> | |
| <span class="px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800">Connected</span> | |
| </div> | |
| <div class="space-y-3"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">API Key</label> | |
| <div class="relative"> | |
| <input type="password" value="sk_test_1234567890abcdefghijklmnopqrstuvwxyz" | |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 pr-10"> | |
| <button class="toggle-password absolute right-3 top-2.5 text-gray-500 hover:text-gray-700"> | |
| <i class="far fa-eye"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex space-x-3"> | |
| <button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition"> | |
| Update Key | |
| </button> | |
| <button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-medium rounded-lg transition"> | |
| Test Connection | |
| </button> | |
| <button class="px-4 py-2 bg-red-50 hover:bg-red-100 text-red-600 text-sm font-medium rounded-lg transition"> | |
| Remove | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Anthropic API Key --> | |
| <div class="border border-gray-200 rounded-lg p-4"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center space-x-2"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/7/74/Anthropic_logo.svg" alt="Anthropic" class="h-6"> | |
| <h3 class="font-medium text-gray-800">Anthropic API</h3> | |
| </div> | |
| <span class="px-2 py-1 text-xs font-medium rounded-full bg-yellow-100 text-yellow-800">Not configured</span> | |
| </div> | |
| <div class="space-y-3"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">API Key</label> | |
| <input type="text" placeholder="Enter your Anthropic API key" | |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div class="flex space-x-3"> | |
| <button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition"> | |
| Save Key | |
| </button> | |
| <button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-medium rounded-lg transition" disabled> | |
| Test Connection | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Add New API Key --> | |
| <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 hover:border-gray-400 transition cursor-pointer"> | |
| <div class="flex items-center justify-center space-x-2 text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-plus-circle"></i> | |
| <span class="font-medium">Add another API key</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 bg-blue-50 rounded-lg p-4"> | |
| <h3 class="font-medium text-blue-800 mb-2"><i class="fas fa-info-circle mr-2"></i>Where to find your API keys?</h3> | |
| <ul class="list-disc pl-5 space-y-1 text-sm text-blue-700"> | |
| <li>OpenAI: <a href="https://platform.openai.com/account/api-keys" target="_blank" class="underline hover:text-blue-900">platform.openai.com/account/api-keys</a></li> | |
| <li>Anthropic: <a href="https://console.anthropic.com/settings/keys" target="_blank" class="underline hover:text-blue-900">console.anthropic.com/settings/keys</a></li> | |
| <li>Google Gemini: <a href="https://ai.google.dev/" target="_blank" class="underline hover:text-blue-900">ai.google.dev</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Conversations Tab (Hidden by default) --> | |
| <div id="conversations-tab" class="tab-content hidden bg-white rounded-lg shadow-sm p-6"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-xl font-semibold text-gray-800">Conversation History</h2> | |
| <div class="relative w-64"> | |
| <input type="text" placeholder="Search conversations..." | |
| class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"> | |
| <i class="fas fa-search absolute left-3 top-2.5 text-gray-400"></i> | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> | |
| <div class="bg-gray-50 px-4 py-3 border-b border-gray-200 flex items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center space-x-2"> | |
| <input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> | |
| <span class="text-sm font-medium text-gray-700">Select all</span> | |
| </div> | |
| </div> | |
| <button class="text-sm font-medium text-red-600 hover:text-red-700"> | |
| Delete selected | |
| </button> | |
| </div> | |
| <ul class="divide-y divide-gray-200"> | |
| <li class="px-4 py-3 hover:bg-gray-50 flex items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-comment text-blue-600"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-800">How to create a responsive navbar</p> | |
| <p class="text-xs text-gray-500">Today, 10:24 AM</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <button class="text-gray-400 hover:text-gray-600 p-1"> | |
| <i class="far fa-trash-alt"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-gray-600 p-1"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </li> | |
| <li class="px-4 py-3 hover:bg-gray-50 flex items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-comment text-blue-600"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-800">Explain quantum computing</p> | |
| <p class="text-xs text-gray-500">Yesterday, 3:45 PM</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <button class="text-gray-400 hover:text-gray-600 p-1"> | |
| <i class="far fa-trash-alt"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-gray-600 p-1"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </li> | |
| <li class="px-4 py-3 hover:bg-gray-50 flex items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-comment text-blue-600"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-800">Python vs JavaScript comparison</p> | |
| <p class="text-xs text-gray-500">May 12, 2023</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <button class="text-gray-400 hover:text-gray-600 p-1"> | |
| <i class="far fa-trash-alt"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-gray-600 p-1"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Account Tab (Hidden by default) --> | |
| <div id="account-tab" class="tab-content hidden bg-white rounded-lg shadow-sm p-6"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-6">Account Settings</h2> | |
| <div class="space-y-6"> | |
| <div class="flex items-center space-x-6"> | |
| <div class="relative"> | |
| <div class="w-20 h-20 rounded-full bg-blue-600 text-white flex items-center justify-center text-2xl font-medium"> | |
| U | |
| </div> | |
| <button class="absolute -bottom-1 -right-1 bg-white border border-gray-300 rounded-full p-1 shadow-sm hover:bg-gray-50"> | |
| <i class="fas fa-camera text-gray-600 text-xs"></i> | |
| </button> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-medium text-gray-800">User Name</h3> | |
| <p class="text-gray-600">user@example.com</p> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">First Name</label> | |
| <input type="text" value="User" | |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Last Name</label> | |
| <input type="text" value="Name" | |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div class="md:col-span-2"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Email</label> | |
| <input type="email" value="user@example.com" | |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| </div> | |
| <div class="pt-4 border-t border-gray-200"> | |
| <h3 class="text-lg font-medium text-gray-800 mb-4">Change Password</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Current Password</label> | |
| <input type="password" | |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">New Password</label> | |
| <input type="password" | |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Confirm New Password</label> | |
| <input type="password" | |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition"> | |
| Update Password | |
| </button> | |
| </div> | |
| </div> | |
| <div class="pt-4 border-t border-gray-200"> | |
| <h3 class="text-lg font-medium text-gray-800 mb-4">Danger Zone</h3> | |
| <div class="bg-red-50 border border-red-100 rounded-lg p-4"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h4 class="font-medium text-red-800">Delete Account</h4> | |
| <p class="text-sm text-red-700">Once you delete your account, there is no going back. Please be certain.</p> | |
| </div> | |
| <button class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg transition"> | |
| Delete Account | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Appearance Tab (Hidden by default) --> | |
| <div id="appearance-tab" class="tab-content hidden bg-white rounded-lg shadow-sm p-6"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-6">Appearance</h2> | |
| <div class="space-y-6"> | |
| <div> | |
| <h3 class="text-lg font-medium text-gray-800 mb-3">Theme</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <button class="theme-option border-2 border-blue-500 rounded-lg overflow-hidden"> | |
| <div class="h-24 bg-white"></div> | |
| <div class="p-3 bg-gray-50"> | |
| <p class="font-medium">Light</p> | |
| <p class="text-xs text-gray-500">Default light theme</p> | |
| </div> | |
| </button> | |
| <button class="theme-option border border-gray-300 rounded-lg overflow-hidden hover:border-gray-400"> | |
| <div class="h-24 bg-gray-800"></div> | |
| <div class="p-3 bg-gray-50"> | |
| <p class="font-medium">Dark</p> | |
| <p class="text-xs text-gray-500">Dark mode</p> | |
| </div> | |
| </button> | |
| <button class="theme-option border border-gray-300 rounded-lg overflow-hidden hover:border-gray-400"> | |
| <div class="h-24 bg-blue-600"></div> | |
| <div class="p-3 bg-gray-50"> | |
| <p class="font-medium">System</p> | |
| <p class="text-xs text-gray-500">Match system preference</p> | |
| </div> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="pt-4 border-t border-gray-200"> | |
| <h3 class="text-lg font-medium text-gray-800 mb-3">Accent Color</h3> | |
| <div class="flex space-x-4"> | |
| <button class="w-10 h-10 rounded-full bg-blue-600 border-2 border-blue-700"></button> | |
| <button class="w-10 h-10 rounded-full bg-indigo-600 border-2 border-transparent hover:border-indigo-700"></button> | |
| <button class="w-10 h-10 rounded-full bg-purple-600 border-2 border-transparent hover:border-purple-700"></button> | |
| <button class="w-10 h-10 rounded-full bg-pink-600 border-2 border-transparent hover:border-pink-700"></button> | |
| <button class="w-10 h-10 rounded-full bg-red-600 border-2 border-transparent hover:border-red-700"></button> | |
| <button class="w-10 h-10 rounded-full bg-green-600 border-2 border-transparent hover:border-green-700"></button> | |
| </div> | |
| </div> | |
| <div class="pt-4 border-t border-gray-200"> | |
| <h3 class="text-lg font-medium text-gray-800 mb-3">Chat Density</h3> | |
| <div class="flex space-x-4"> | |
| <button class="px-4 py-2 bg-blue-600 text-white font-medium rounded-lg">Compact</button> | |
| <button class="px-4 py-2 bg-white border border-gray-300 font-medium rounded-lg hover:bg-gray-50">Normal</button> | |
| <button class="px-4 py-2 bg-white border border-gray-300 font-medium rounded-lg hover:bg-gray-50">Spacious</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // DOM Elements | |
| const loginPage = document.getElementById('login-page'); | |
| const chatPage = document.getElementById('chat-page'); | |
| const settingsPage = document.getElementById('settings-page'); | |
| const loginForm = document.getElementById('login-form'); | |
| const togglePassword = document.getElementById('toggle-password'); | |
| const passwordInput = document.getElementById('password'); | |
| const sidebarToggle = document.getElementById('sidebar-toggle'); | |
| const sidebar = document.getElementById('sidebar'); | |
| const settingsBtn = document.getElementById('settings-btn'); | |
| const backToChatBtn = document.getElementById('back-to-chat-btn'); | |
| const newChatBtn = document.getElementById('new-chat-btn'); | |
| const newChatBtnSidebar = document.getElementById('new-chat-btn-sidebar'); | |
| const messageInput = document.getElementById('message-input'); | |
| const sendBtn = document.getElementById('send-btn'); | |
| const emptyState = document.getElementById('empty-state'); | |
| const messageContainer = document.getElementById('message-container'); | |
| const examplePrompts = document.querySelectorAll('.example-prompt'); | |
| const modelIndicator = document.getElementById('model-indicator'); | |
| const aiModelBtn = document.getElementById('ai-model-btn'); | |
| const aiAgentBtn = document.getElementById('ai-agent-btn'); | |
| const customAgentBtn = document.getElementById('custom-agent-btn'); | |
| const tabButtons = document.querySelectorAll('.tab-btn'); | |
| const tabContents = document.querySelectorAll('.tab-content'); | |
| const togglePasswordButtons = document.querySelectorAll('.toggle-password'); | |
| // Toggle password visibility | |
| togglePassword.addEventListener('click', () => { | |
| const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password'; | |
| passwordInput.setAttribute('type', type); | |
| togglePassword.innerHTML = type === 'password' ? '<i class="far fa-eye"></i>' : '<i class="far fa-eye-slash"></i>'; | |
| }); | |
| // Toggle password visibility in settings | |
| togglePasswordButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| const input = button.parentElement.querySelector('input'); | |
| const type = input.getAttribute('type') === 'password' ? 'text' : 'password'; | |
| input.setAttribute('type', type); | |
| button.innerHTML = type === 'password' ? '<i class="far fa-eye"></i>' : '<i class="far fa-eye-slash"></i>'; | |
| }); | |
| }); | |
| // Login form submission | |
| loginForm.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| // Simulate login | |
| loginPage.classList.add('hidden'); | |
| chatPage.classList.remove('hidden'); | |
| }); | |
| // Toggle sidebar on mobile | |
| sidebarToggle.addEventListener('click', () => { | |
| sidebar.classList.toggle('hidden'); | |
| sidebar.classList.add('slide-in'); | |
| }); | |
| // Navigate to settings | |
| settingsBtn.addEventListener('click', () => { | |
| chatPage.classList.add('hidden'); | |
| settingsPage.classList.remove('hidden'); | |
| }); | |
| // Back to chat from settings | |
| backToChatBtn.addEventListener('click', () => { | |
| settingsPage.classList.add('hidden'); | |
| chatPage.classList.remove('hidden'); | |
| }); | |
| // New chat button | |
| newChatBtn.addEventListener('click', startNewChat); | |
| newChatBtnSidebar.addEventListener('click', startNewChat); | |
| function startNewChat() { | |
| emptyState.classList.remove('hidden'); | |
| messageContainer.classList.add('hidden'); | |
| messageInput.value = ''; | |
| sendBtn.disabled = true; | |
| } | |
| // Message input handling | |
| messageInput.addEventListener('input', () => { | |
| sendBtn.disabled = messageInput.value.trim() === ''; | |
| // Auto-resize textarea | |
| messageInput.style.height = 'auto'; | |
| messageInput.style.height = (messageInput.scrollHeight) + 'px'; | |
| }); | |
| // Send message | |
| sendBtn.addEventListener('click', sendMessage); | |
| messageInput.addEventListener('keydown', (e) => { | |
| if (e.key === 'Enter' && !e.shiftKey) { | |
| e.preventDefault(); | |
| sendMessage(); | |
| } | |
| }); | |
| function sendMessage() { | |
| const message = messageInput.value.trim(); | |
| if (message === '') return; | |
| // Hide empty state if it's the first message | |
| if (emptyState.classList.contains('hidden') === false) { | |
| emptyState.classList.add('hidden'); | |
| messageContainer.classList.remove('hidden'); | |
| } | |
| // Add user message to chat | |
| const userMessageDiv = document.createElement('div'); | |
| userMessageDiv.className = 'flex justify-end fade-in'; | |
| userMessageDiv.innerHTML = ` | |
| <div class="max-w-3xl bg-blue-600 text-white chat-bubble-user px-4 py-3"> | |
| <p>${message}</p> | |
| <div class="flex justify-end mt-1"> | |
| <span class="text-xs text-blue-100">${new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}</span> | |
| </div> | |
| </div> | |
| `; | |
| messageContainer.appendChild(userMessageDiv); | |
| // Clear input | |
| messageInput.value = ''; | |
| messageInput.style.height = 'auto'; | |
| sendBtn.disabled = true; | |
| // Scroll to bottom | |
| messageContainer.scrollTop = messageContainer.scrollHeight; | |
| // Simulate AI response after a delay | |
| setTimeout(() => { | |
| const aiMessageDiv = document.createElement('div'); | |
| aiMessageDiv.className = 'flex justify-start fade-in'; | |
| aiMessageDiv.innerHTML = ` | |
| <div class="max-w-3xl bg-gray-200 text-gray-800 chat-bubble-ai px-4 py-3"> | |
| <p>I'm your AI assistant. I can help answer questions, explain concepts, and assist with various tasks. What would you like to know more about?</p> | |
| <div class="flex justify-between items-center mt-2"> | |
| <div class="flex space-x-2"> | |
| <button class="copy-btn text-xs text-gray-500 hover:text-gray-700"> | |
| <i class="far fa-copy mr-1"></i> Copy | |
| </button> | |
| <button class="feedback-btn text-xs text-gray-500 hover:text-gray-700"> | |
| <i class="far fa-thumbs-up mr-1"></i> Helpful | |
| </button> | |
| </div> | |
| <span class="text-xs text-gray-500">${new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}</span> | |
| </div> | |
| </div> | |
| `; | |
| messageContainer.appendChild(aiMessageDiv); | |
| // Scroll to bottom | |
| messageContainer.scrollTop = messageContainer.scrollHeight; | |
| // Add event listeners to new buttons | |
| aiMessageDiv.querySelector('.copy-btn').addEventListener('click', () => { | |
| alert('Message copied to clipboard!'); | |
| }); | |
| aiMessageDiv.querySelector('.feedback-btn').addEventListener('click', function() { | |
| this.innerHTML = '<i class="fas fa-thumbs-up mr-1"></i> Helpful'; | |
| this.classList.remove('text-gray-500', 'hover:text-gray-700'); | |
| this.classList.add('text-green-500'); | |
| }); | |
| }, 1000); | |
| } | |
| // Example prompt buttons | |
| examplePrompts.forEach(prompt => { | |
| prompt.addEventListener('click', () => { | |
| messageInput.value = prompt.textContent.trim(); | |
| messageInput.dispatchEvent(new Event('input')); | |
| sendBtn.disabled = false; | |
| }); | |
| }); | |
| // Model selection | |
| aiModelBtn.addEventListener('click', () => { | |
| aiModelBtn.classList.remove('bg-white', 'text-gray-900', 'border-gray-200', 'hover:bg-gray-100', 'hover:text-blue-700'); | |
| aiModelBtn.classList.add('bg-blue-600', 'text-white', 'hover:bg-blue-700'); | |
| aiAgentBtn.classList.remove('bg-blue-600', 'text-white', 'hover:bg-blue-700'); | |
| aiAgentBtn.classList.add('bg-white', 'text-gray-900', 'border-gray-200', 'hover:bg-gray-100', 'hover:text-blue-700'); | |
| customAgentBtn.classList.remove('bg-blue-600', 'text-white', 'hover:bg-blue-700'); | |
| customAgentBtn.classList.add('bg-white', 'text-gray-900', 'border-gray-200', 'hover:bg-gray-100', 'hover:text-blue-700'); | |
| modelIndicator.innerHTML = ` | |
| <span class="px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800"> | |
| <i class="fas fa-robot mr-1"></i> AI Model | |
| </span> | |
| `; | |
| }); | |
| aiAgentBtn.addEventListener('click', () => { | |
| aiAgentBtn.classList.remove('bg-white', 'text-gray-900', 'border-gray-200', 'hover:bg-gray-100', 'hover:text-blue-700'); | |
| aiAgentBtn.classList.add('bg-blue-600', 'text-white', 'hover:bg-blue-700'); | |
| aiModelBtn.classList.remove('bg-blue-600', 'text-white', 'hover:bg-blue-700'); | |
| aiModelBtn.classList.add('bg-white', 'text-gray-900', 'border-gray-200', 'hover:bg-gray-100', 'hover:text-blue-700'); | |
| customAgentBtn.classList.remove('bg-blue-600', 'text-white', 'hover:bg-blue-700'); | |
| customAgentBtn.classList.add('bg-white', 'text-gray-900', 'border-gray-200', 'hover:bg-gray-100', 'hover:text-blue-700'); | |
| modelIndicator.innerHTML = ` | |
| <span class="px-3 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800"> | |
| <i class="fas fa-user-tie mr-1"></i> AI Agent | |
| </span> | |
| `; | |
| }); | |
| customAgentBtn.addEventListener('click', () => { | |
| customAgentBtn.classList.remove('bg-white', 'text-gray-900', 'border-gray-200', 'hover:bg-gray-100', 'hover:text-blue-700'); | |
| customAgentBtn.classList.add('bg-blue-600', 'text-white', 'hover:bg-blue-700'); | |
| aiModelBtn.classList.remove('bg-blue-600', 'text-white', 'hover:bg-blue-700'); | |
| aiModelBtn.classList.add('bg-white', 'text-gray-900', 'border-gray-200', 'hover:bg-gray-100', 'hover:text-blue-700'); | |
| aiAgentBtn.classList.remove('bg-blue-600', 'text-white', 'hover:bg-blue-700'); | |
| aiAgentBtn.classList.add('bg-white', 'text-gray-900', 'border-gray-200', 'hover:bg-gray-100', 'hover:text-blue-700'); | |
| modelIndicator.innerHTML = ` | |
| <span class="px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800"> | |
| <i class="fas fa-cog mr-1"></i> Custom Agent | |
| </span> | |
| `; | |
| }); | |
| // Tab switching in settings | |
| tabButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| const tabId = button.getAttribute('data-tab'); | |
| // Update active tab button | |
| tabButtons.forEach(btn => { | |
| btn.classList.remove('text-blue-700', 'bg-blue-50'); | |
| btn.classList.add('text-gray-600', 'hover:text-gray-900', 'hover:bg-gray-50'); | |
| }); | |
| button.classList.remove('text-gray-600', 'hover:text-gray-900', 'hover:bg-gray-50'); | |
| button.classList.add('text-blue-700', 'bg-blue-50'); | |
| // Show selected tab content | |
| tabContents.forEach(content => { | |
| content.classList.add('hidden'); | |
| }); | |
| document.getElementById(`${tabId}-tab`).classList.remove('hidden'); | |
| }); | |
| }); | |
| // Initialize with AI Model selected | |
| aiModelBtn.click(); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=amrashour3333/agent" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |