Spaces:

TarSh8654
/

AI_tool

Sleeping

App Files Files Community

TarSh8654 commited on Jul 15, 2025

Commit

145e34f

verified ·

1 Parent(s): 190c0a6

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +160 -75

templates/index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AI Multi-Modal Chat</title>
     <!-- Tailwind CSS CDN -->
     <script src="https://cdn.tailwindcss.com"></script>
     <!-- Inter font from Google Fonts -->
@@ -11,85 +11,111 @@
     <style>
         body {
             font-family: 'Inter', sans-serif;
-            background-color: #1a202c; /* Dark background */
             display: flex;
             justify-content: center;
             align-items: center;
             min-height: 100vh;
             margin: 0;
-            color: #e2e8f0; /* Light text color */
         }
         .chat-container {
             display: flex;
             flex-direction: column;
             width: 100%;
             max-width: 800px;
-            height: 90vh; /* Make it take up most of the viewport height */
-            background-color: #2d3748; /* Darker container background */
-            border-radius: 1rem;
-            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* Stronger shadow */
-            overflow: hidden; /* Ensure content doesn't spill */
         }
         .chat-header {
-            padding: 1.5rem;
-            border-bottom: 1px solid #4a5568; /* Darker border */
             text-align: center;
-            font-size: 1.75rem; /* Larger title */
             font-weight: 700;
-            color: #e2e8f0; /* Light text */
         }
         .messages-area {
-            flex-grow: 1; /* Takes up available space */
-            overflow-y: auto; /* Scrollable */
             padding: 1.5rem;
             display: flex;
             flex-direction: column;
-            gap: 1rem; /* Space between messages */
         }
         .message-bubble {
-            max-width: 80%;
-            padding: 0.75rem 1rem;
-            border-radius: 0.75rem;
-            line-height: 1.5;
-            word-wrap: break-word; /* Ensure long words wrap */
         }
         .user-message {
             background-color: #4299e1; /* Blue-400 */
             color: white;
-            align-self: flex-end; /* Align to right */
-            border-bottom-right-radius: 0.25rem; /* Sharpen one corner for bubble effect */
         }
         .ai-message {
-            background-color: #4a5568; /* Gray-700 */
-            color: #e2e8f0; /* Light text */
-            align-self: flex-start; /* Align to left */
-            border-bottom-left-radius: 0.25rem; /* Sharpen one corner for bubble effect */
         }
         .input-area {
             padding: 1.5rem;
-            border-top: 1px solid #4a5568; /* Light gray border */
             display: flex;
             gap: 0.75rem;
-            align-items: center;
         }
         textarea {
-            resize: none; /* Prevent manual resizing */
             flex-grow: 1;
-            min-height: 2.5rem;
             max-height: 8rem;
             overflow-y: auto;
-            background-color: #2d3748; /* Same as container */
-            color: #e2e8f0; /* Light text */
-            border: 1px solid #4a5568; /* Darker border */
         }
         textarea:focus {
-            border-color: #4299e1; /* Blue-400 on focus */
-            box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.5); /* Blue shadow */
         }
         /* Custom spinner for loading */
         .spinner {
-            border: 3px solid rgba(255, 255, 255, 0.2); /* Lighter border for dark mode */
-            border-left-color: #4299e1; /* Blue-400 */
             border-radius: 50%;
             width: 20px;
             height: 20px;
@@ -101,75 +127,113 @@
         }
         .loading-message {
             align-self: flex-start;
-            background-color: #4a5568;
             color: #e2e8f0;
             padding: 0.75rem 1rem;
             border-radius: 0.75rem;
             display: flex;
             align-items: center;
             gap: 0.5rem;
         }
         .file-input-group {
             display: flex;
-            gap: 0.5rem;
-            margin-bottom: 0.75rem;
         }
         .file-input-group label {
             cursor: pointer;
-            background-color: #4a5568; /* Dark gray */
-            color: #e2e8f0; /* Light text */
-            padding: 0.5rem 0.75rem;
-            border-radius: 0.5rem;
-            transition: background-color 0.2s;
-            font-size: 0.875rem;
             display: inline-flex;
             align-items: center;
-            gap: 0.25rem;
         }
         .file-input-group label:hover {
-            background-color: #616e80; /* Slightly lighter on hover */
         }
         .file-input-group input[type="file"] {
-            display: none; /* Hide actual file input */
-        }
-        .uploaded-file-preview {
-            max-width: 100%;
-            height: auto;
-            border-radius: 0.5rem;
-            margin-top: 0.5rem;
-            border: 1px solid #4a5568;
-        }
-        .message-image-preview {
-            max-width: 100%;
-            height: auto;
-            border-radius: 0.5rem;
-            margin-top: 0.5rem;
-            border: 1px solid #616e80; /* Border for image in message bubble */
         }
         .clear-file-button {
-            background-color: #e53e3e; /* Red-500 */
             color: white;
-            padding: 0.25rem 0.5rem;
-            border-radius: 0.5rem;
-            font-size: 0.75rem;
             margin-left: 0.5rem;
             cursor: pointer;
-            transition: background-color 0.2s;
         }
         .clear-file-button:hover {
-            background-color: #c53030; /* Darker red */
         }
         .file-name-display {
             font-size: 0.875rem;
-            color: #a0aec0; /* Gray-400 */
             margin-left: 0.5rem;
         }
     </style>
 </head>
 <body class="p-4">
     <div class="chat-container">
         <div class="chat-header">
-            AI Multi-Modal Assistant
         </div>
         <div id="messagesArea" class="messages-area">
             <!-- Chat messages will be appended here -->
@@ -209,7 +273,7 @@
                 ></textarea>
                 <button
                     id="sendButton"
-                    class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg flex items-center justify-center transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
                 >
                     Send
                 </button>
@@ -217,7 +281,7 @@
         </div>
         <!-- Message Box for alerts -->
-        <div id="messageBox" class="fixed inset-0 bg-gray-600 bg-opacity50 flex items-center justify-center hidden">
             <div class="bg-white p-6 rounded-lg shadow-xl max-w-sm w-full text-gray-800">
                 <h3 class="text-lg font-bold mb-4" id="messageBoxTitle"></h3>
                 <p class="text-gray-700 mb-6" id="messageBoxContent"></p>
@@ -242,6 +306,7 @@
         const messageBoxTitle = document.getElementById('messageBoxTitle');
         const messageBoxContent = document.getElementById('messageBoxContent');
         const messageBoxClose = document.getElementById('messageBoxClose');
         let sessionId = localStorage.getItem('aiChatSessionId');
         if (!sessionId) {
@@ -288,7 +353,8 @@
             } else if (typeof content === 'string') {
                 messageDiv.innerHTML = marked.parse(content); // Render Markdown for text
             } else if (typeof content === 'object' && content.type === 'image') {
-                // Display image in message bubble (if AI sends image back, or if re-introduced)
                 const img = document.createElement('img');
                 img.src = content.src;
                 img.alt = "Uploaded image";
@@ -300,7 +366,7 @@
                     messageDiv.appendChild(textDiv);
                 }
             } else if (typeof content === 'object' && content.type === 'document') {
-                // Display document info in message bubble (if AI sends document back, or if re-introduced)
                 const docInfoDiv = document.createElement('div');
                 docInfoDiv.innerHTML = `<strong>Document Uploaded:</strong> ${content.name}<br>`;
                 if (content.textPreview) {
@@ -568,6 +634,25 @@
             }
         });
         // Marked.js for Markdown rendering (simple CDN inclusion)
         const script = document.createElement('script');
         script.src = 'https://cdn.jsdelivr.net/npm/marked/marked.min.js';

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Own AI Assistant</title> <!-- Changed title -->
     <!-- Tailwind CSS CDN -->
     <script src="https://cdn.tailwindcss.com"></script>
     <!-- Inter font from Google Fonts -->
     <style>
         body {
             font-family: 'Inter', sans-serif;
+            background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%); /* Subtle gradient background */
             display: flex;
             justify-content: center;
             align-items: center;
             min-height: 100vh;
             margin: 0;
+            color: #e2e8f0;
         }
         .chat-container {
             display: flex;
             flex-direction: column;
             width: 100%;
             max-width: 800px;
+            height: 90vh;
+            background-color: #202a36; /* Slightly darker than body for depth */
+            border-radius: 1.5rem; /* More rounded corners */
+            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5); /* Deeper shadow */
+            overflow: hidden;
+            border: 1px solid rgba(74, 85, 104, 0.3); /* Subtle border */
         }
         .chat-header {
+            padding: 1.5rem 2rem; /* More padding */
+            border-bottom: 1px solid #3a4759; /* Darker border */
             text-align: center;
+            font-size: 2rem; /* Larger title */
             font-weight: 700;
+            color: #e2e8f0;
+            background: linear-gradient(90deg, #2d3748, #3a4759); /* Header gradient */
+            position: relative;
+            z-index: 10; /* Ensure header is above messages */
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
         }
         .messages-area {
+            flex-grow: 1;
+            overflow-y: auto;
             padding: 1.5rem;
             display: flex;
             flex-direction: column;
+            gap: 0.75rem; /* Slightly less gap */
+            scroll-behavior: smooth; /* Smooth scrolling */
         }
         .message-bubble {
+            max-width: 85%; /* Slightly wider bubbles */
+            padding: 0.85rem 1.2rem; /* More padding */
+            border-radius: 1.2rem; /* More rounded */
+            line-height: 1.6;
+            word-wrap: break-word;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle bubble shadow */
+            opacity: 0; /* For animation */
+            transform: translateY(10px); /* For animation */
+            animation: fadeInSlideUp 0.3s ease-out forwards; /* Animation */
         }
         .user-message {
             background-color: #4299e1; /* Blue-400 */
             color: white;
+            align-self: flex-end;
+            border-bottom-right-radius: 0.4rem; /* Sharpen one corner for bubble effect */
         }
         .ai-message {
+            background-color: #3a4759; /* Darker gray for AI */
+            color: #e2e8f0;
+            align-self: flex-start;
+            border-bottom-left-radius: 0.4rem; /* Sharpen one corner for bubble effect */
+        }
+        @keyframes fadeInSlideUp {
+            from {
+                opacity: 0;
+                transform: translateY(10px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
         }
         .input-area {
             padding: 1.5rem;
+            border-top: 1px solid #3a4759;
+            background-color: #2d3748; /* Matches body gradient start */
             display: flex;
+            flex-direction: column; /* Stack file inputs above text input */
             gap: 0.75rem;
         }
         textarea {
+            resize: none;
             flex-grow: 1;
+            min-height: 2.75rem; /* Slightly taller */
             max-height: 8rem;
             overflow-y: auto;
+            background-color: #202a36; /* Matches chat container */
+            color: #e2e8f0;
+            border: 1px solid #4a5568;
+            border-radius: 0.75rem; /* More rounded */
+            padding: 0.75rem 1rem;
         }
         textarea:focus {
+            border-color: #4299e1;
+            box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.4); /* Stronger shadow */
+            outline: none;
         }
         /* Custom spinner for loading */
         .spinner {
+            border: 3px solid rgba(255, 255, 255, 0.2);
+            border-left-color: #4299e1;
             border-radius: 50%;
             width: 20px;
             height: 20px;
         }
         .loading-message {
             align-self: flex-start;
+            background-color: #3a4759;
             color: #e2e8f0;
             padding: 0.75rem 1rem;
             border-radius: 0.75rem;
             display: flex;
             align-items: center;
             gap: 0.5rem;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
         }
         .file-input-group {
             display: flex;
+            gap: 0.75rem; /* Increased gap */
+            width: 100%;
         }
         .file-input-group label {
             cursor: pointer;
+            background-color: #4a5568;
+            color: #e2e8f0;
+            padding: 0.6rem 1rem; /* More padding */
+            border-radius: 0.75rem; /* More rounded */
+            transition: background-color 0.2s, transform 0.1s;
+            font-size: 0.9rem; /* Slightly larger font */
             display: inline-flex;
             align-items: center;
+            gap: 0.35rem;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
         }
         .file-input-group label:hover {
+            background-color: #5a6a7e;
+            transform: translateY(-1px); /* Subtle lift */
         }
         .file-input-group input[type="file"] {
+            display: none;
         }
         .clear-file-button {
+            background-color: #e53e3e;
             color: white;
+            padding: 0.4rem 0.75rem; /* Adjusted padding */
+            border-radius: 0.75rem;
+            font-size: 0.8rem;
             margin-left: 0.5rem;
             cursor: pointer;
+            transition: background-color 0.2s, transform 0.1s;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
         }
         .clear-file-button:hover {
+            background-color: #c53030;
+            transform: translateY(-1px);
         }
         .file-name-display {
             font-size: 0.875rem;
+            color: #a0aec0;
             margin-left: 0.5rem;
+            display: flex;
+            align-items: center;
+            flex-grow: 1; /* Allow it to take available space */
+            white-space: nowrap; /* Prevent wrapping */
+            overflow: hidden; /* Hide overflow */
+            text-overflow: ellipsis; /* Add ellipsis */
+        }
+        .send-button {
+            background: linear-gradient(90deg, #4299e1, #3182ce); /* Gradient button */
+            color: white;
+            font-weight: 600;
+            padding: 0.75rem 1.5rem;
+            border-radius: 0.75rem;
+            transition: transform 0.2s, box-shadow 0.2s;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+        }
+        .send-button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
+        }
+        .send-button:disabled {
+            background: #4a5568;
+            cursor: not-allowed;
+            transform: none;
+            box-shadow: none;
+            opacity: 0.7;
+        }
+        .new-chat-button {
+            background-color: #63b3ed; /* Light blue for new chat */
+            color: #1a202c; /* Dark text */
+            padding: 0.5rem 1rem;
+            border-radius: 0.75rem;
+            font-size: 0.9rem;
+            font-weight: 600;
+            transition: background-color 0.2s, transform 0.1s;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+            display: flex;
+            align-items: center;
+            gap: 0.25rem;
+        }
+        .new-chat-button:hover {
+            background-color: #4299e1;
+            transform: translateY(-1px);
         }
     </style>
 </head>
 <body class="p-4">
     <div class="chat-container">
         <div class="chat-header">
+            <span>Own AI Assistant</span> <!-- Changed header text -->
+            <button id="newChatButton" class="new-chat-button">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
+                New Chat
+            </button>
         </div>
         <div id="messagesArea" class="messages-area">
             <!-- Chat messages will be appended here -->
                 ></textarea>
                 <button
                     id="sendButton"
+                    class="send-button flex items-center justify-center"
                 >
                     Send
                 </button>
         </div>
         <!-- Message Box for alerts -->
+        <div id="messageBox" class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center hidden">
             <div class="bg-white p-6 rounded-lg shadow-xl max-w-sm w-full text-gray-800">
                 <h3 class="text-lg font-bold mb-4" id="messageBoxTitle"></h3>
                 <p class="text-gray-700 mb-6" id="messageBoxContent"></p>
         const messageBoxTitle = document.getElementById('messageBoxTitle');
         const messageBoxContent = document.getElementById('messageBoxContent');
         const messageBoxClose = document.getElementById('messageBoxClose');
+        const newChatButton = document.getElementById('newChatButton'); // New button
         let sessionId = localStorage.getItem('aiChatSessionId');
         if (!sessionId) {
             } else if (typeof content === 'string') {
                 messageDiv.innerHTML = marked.parse(content); // Render Markdown for text
             } else if (typeof content === 'object' && content.type === 'image') {
+                // This block is now effectively unused for user messages as displayContent will be a string
+                // But keeping it here for potential future use or if AI sends image back
                 const img = document.createElement('img');
                 img.src = content.src;
                 img.alt = "Uploaded image";
                     messageDiv.appendChild(textDiv);
                 }
             } else if (typeof content === 'object' && content.type === 'document') {
+                // This block is now effectively unused for user messages as displayContent will be a string
                 const docInfoDiv = document.createElement('div');
                 docInfoDiv.innerHTML = `<strong>Document Uploaded:</strong> ${content.name}<br>`;
                 if (content.textPreview) {
             }
         });
+        // New Chat Button functionality
+        newChatButton.addEventListener('click', () => {
+            if (confirm("Are you sure you want to start a new chat? This will clear the current conversation history.")) {
+                localStorage.removeItem('aiChatSessionId'); // Clear session ID
+                sessionId = crypto.randomUUID(); // Generate new one
+                localStorage.setItem('aiChatSessionId', sessionId);
+                messagesArea.innerHTML = `
+                    <div class="ai-message message-bubble">
+                        Hello! How can I assist you today? You can type a message, or upload an image, a text document, or a PDF.
+                    </div>
+                `; // Clear chat display
+                clearFileSelection(); // Clear any pending file uploads
+                messageInput.value = ''; // Clear text input
+                messageInput.style.height = 'auto'; // Reset textarea height
+                messageInput.focus();
+                console.log("New chat started. New session ID:", sessionId);
+            }
+        });
         // Marked.js for Markdown rendering (simple CDN inclusion)
         const script = document.createElement('script');
         script.src = 'https://cdn.jsdelivr.net/npm/marked/marked.min.js';