feat: redesign chat interface with a dark theme and modernized message layout

index.html

@@ -16,16 +16,14 @@
     </script>
     <style>
         :root {
-            --bg-color: #0b0f19;
-            --chat-bg: #151a2a;
-            --user-msg: #3b82f6;
-            --bot-msg: #1e293b;
-            --text-color: #e2e8f0;
-            --text-muted: #94a3b8;
-            --border-color: #334155;
-            --input-bg: #0f172a;
-            --glow: 0 0 20px rgba(59, 130, 246, 0.15);
-            --gradient: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+            --bg-color: #212121;
+            --text-color: #ececec;
+            --text-muted: #b4b4b4;
+            --input-bg: #2f2f2f;
+            --border-color: #424242;
+            --btn-bg: #ececec;
+            --btn-color: #212121;
+            --code-bg: #000000;
         }
 
         * {
@@ -35,52 +33,65 @@
         }
 
         body {
-            font-family: 'Inter', sans-serif;
+            font-family: 'Inter', system-ui, sans-serif;
             background-color: var(--bg-color);
             color: var(--text-color);
             display: flex;
             justify-content: center;
             height: 100vh;
             overflow: hidden;
+            font-size: 16px;
         }
 
         #app {
             width: 100%;
-            max-width: 1000px;
             display: flex;
             flex-direction: column;
             height: 100vh;
             position: relative;
         }
 
-        /* Glassmorphism Header */
+        /* Header */
         header {
-            padding: 20px 30px;
-            background: rgba(15, 23, 42, 0.7);
-            backdrop-filter: blur(12px);
-            border-bottom: 1px solid var(--border-color);
+            padding: 12px 16px;
             display: flex;
             align-items: center;
+            position: absolute;
+            top: 0;
+            width: 100%;
             z-index: 10;
         }
 
         .title {
-            font-size: 1.25rem;
+            font-size: 1.1rem;
             font-weight: 600;
-            background: var(--gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            letter-spacing: -0.02em;
+            color: var(--text-muted);
+            cursor: pointer;
+            padding: 8px 12px;
+            border-radius: 8px;
+            transition: background 0.2s;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .title span {
+            font-size: 0.7em;
+            color: #888;
+        }
+
+        .title:hover {
+            background: rgba(255,255,255,0.1);
         }
 
         /* Chat Container */
         #chat-container {
             flex: 1;
             overflow-y: auto;
-            padding: 30px;
+            padding-top: 60px;
+            padding-bottom: 120px;
             display: flex;
             flex-direction: column;
-            gap: 24px;
             scroll-behavior: smooth;
         }
 
@@ -92,101 +103,112 @@
             background: transparent;
         }
         #chat-container::-webkit-scrollbar-thumb {
-            background: var(--border-color);
+            background: #555;
             border-radius: 4px;
         }
 
         /* Messages */
+        .message-wrapper {
+            width: 100%;
+            padding: 24px 16px;
+        }
+
         .message {
+            max-width: 768px;
+            margin: 0 auto;
             display: flex;
-            flex-direction: column;
-            max-width: 85%;
-            animation: fadeIn 0.3s ease-out forwards;
+            gap: 16px;
         }
 
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(10px); }
-            to { opacity: 1; transform: translateY(0); }
+        .avatar {
+            width: 30px;
+            height: 30px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 14px;
+            font-weight: 600;
+            flex-shrink: 0;
         }
 
-        .message.user {
-            align-self: flex-end;
+        .user .avatar {
+            background: #3b82f6;
+            color: white;
         }
 
-        .message.bot {
-            align-self: flex-start;
+        .bot .avatar {
+            background: #10a37f;
+            color: white;
+        }
+        
+        .bot .avatar svg {
+            width: 20px;
+            height: 20px;
+            fill: white;
         }
 
         .message-content {
-            padding: 16px 20px;
-            border-radius: 20px;
-            font-size: 0.95rem;
+            flex: 1;
             line-height: 1.6;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-        }
-
-        .message.user .message-content {
-            background: var(--user-msg);
-            color: white;
-            border-bottom-right-radius: 4px;
-        }
-
-        .message.bot .message-content {
-            background: var(--bot-msg);
-            border: 1px solid var(--border-color);
-            border-bottom-left-radius: 4px;
-            overflow-x: auto;
+            word-wrap: break-word;
+            min-width: 0;
+            color: #ececec;
         }
 
         /* Markdown Styles in Bot Message */
-        .message.bot .message-content p {
-            margin-bottom: 0.75em;
+        .message-content p {
+            margin-bottom: 1em;
         }
-        .message.bot .message-content p:last-child {
+        .message-content p:last-child {
             margin-bottom: 0;
         }
-        .message.bot .message-content pre {
-            background: #0f172a;
-            padding: 12px;
+        .message-content pre {
+            background: var(--code-bg);
+            padding: 12px 16px;
             border-radius: 8px;
             overflow-x: auto;
-            margin: 10px 0;
+            margin: 16px 0;
             border: 1px solid var(--border-color);
         }
-        .message.bot .message-content code {
+        .message-content code {
             font-family: 'JetBrains Mono', monospace;
-            font-size: 0.85em;
-            background: rgba(0, 0, 0, 0.2);
+            font-size: 0.9em;
+            background: rgba(255, 255, 255, 0.1);
             padding: 2px 4px;
             border-radius: 4px;
         }
-        .message.bot .message-content pre code {
+        .message-content pre code {
             background: transparent;
             padding: 0;
+            font-size: 0.85em;
         }
 
         /* Input Area */
         #input-container {
-            padding: 24px 30px;
-            background: var(--chat-bg);
-            border-top: 1px solid var(--border-color);
-            box-shadow: 0 -10px 40px rgba(0,0,0,0.2);
-            position: relative;
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            background: linear-gradient(180deg, rgba(33,33,33,0) 0%, rgba(33,33,33,1) 30%);
+            padding: 24px 16px;
+            display: flex;
+            justify-content: center;
         }
 
         .input-wrapper {
             display: flex;
             align-items: flex-end;
             background: var(--input-bg);
-            border: 1px solid var(--border-color);
             border-radius: 24px;
-            padding: 8px 16px;
-            transition: border-color 0.2s, box-shadow 0.2s;
+            padding: 8px 12px;
+            width: 100%;
+            max-width: 768px;
+            position: relative;
+            box-shadow: 0 0 15px rgba(0,0,0,0.1);
         }
 
         .input-wrapper:focus-within {
-            border-color: #3b82f6;
-            box-shadow: var(--glow);
+            background: #333333;
         }
 
         #user-input {
@@ -197,8 +219,8 @@
             font-size: 1rem;
             font-family: 'Inter', sans-serif;
             resize: none;
-            padding: 10px 0;
-            max-height: 150px;
+            padding: 10px 48px 10px 12px;
+            max-height: 200px;
             min-height: 24px;
             outline: none;
             line-height: 1.5;
@@ -209,52 +231,45 @@
         }
 
         #send-btn {
-            background: var(--gradient);
+            position: absolute;
+            right: 12px;
+            bottom: 12px;
+            background: var(--btn-bg);
+            color: var(--btn-color);
             border: none;
-            width: 40px;
-            height: 40px;
+            width: 32px;
+            height: 32px;
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
             cursor: pointer;
-            margin-bottom: 4px;
-            margin-left: 12px;
-            transition: transform 0.2s, box-shadow 0.2s;
-            color: white;
-            flex-shrink: 0;
+            transition: opacity 0.2s;
         }
 
         #send-btn:hover {
-            transform: scale(1.05);
-            box-shadow: 0 0 15px rgba(139, 92, 246, 0.5);
+            opacity: 0.8;
         }
 
         #send-btn:disabled {
-            opacity: 0.5;
+            background: #424242;
+            color: #666;
             cursor: not-allowed;
-            transform: none;
-            box-shadow: none;
         }
 
         #send-btn svg {
-            width: 18px;
-            height: 18px;
+            width: 16px;
+            height: 16px;
             fill: currentColor;
-            margin-left: 2px;
         }
 
         /* Loading Indicator */
         .typing-indicator {
-            display: none;
+            display: flex;
             align-items: center;
             gap: 4px;
-            padding: 12px 16px;
-            background: var(--bot-msg);
-            border-radius: 16px;
-            border-bottom-left-radius: 4px;
+            padding: 8px 0;
             width: fit-content;
-            border: 1px solid var(--border-color);
         }
 
         .dot {
@@ -269,8 +284,8 @@
         .dot:nth-child(2) { animation-delay: -0.16s; }
 
         @keyframes bounce {
-            0%, 80%, 100% { transform: scale(0); }
-            40% { transform: scale(1); }
+            0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
+            40% { transform: scale(1); opacity: 1; }
         }
         
         .empty-state {
@@ -281,17 +296,31 @@
             height: 100%;
             color: var(--text-muted);
             text-align: center;
+            padding: 0 20px;
+            margin-top: 40px;
+        }
+        
+        .empty-state .logo {
+            width: 64px;
+            height: 64px;
+            background: white;
+            border-radius: 50%;
+            margin-bottom: 24px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .empty-state .logo svg {
+            width: 40px;
+            height: 40px;
+            fill: #212121;
         }
+
         .empty-state h2 {
-            font-size: 2rem;
-            margin-bottom: 12px;
-            background: var(--gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-        }
-        .empty-state p {
-            max-width: 400px;
-            line-height: 1.6;
+            font-size: 1.5rem;
+            font-weight: 500;
+            color: #ececec;
         }
     </style>
 </head>
@@ -299,32 +328,38 @@
 
     <div id="app">
         <header>
-            <div class="title">DeepSeek-V4-Pro</div>
+            <div class="title">DeepSeek V4 Pro <span>▼</span></div>
         </header>
 
         <div id="chat-container">
             <div class="empty-state" id="empty-state">
-                <h2>What can I help you with?</h2>
-                <p>Experience the power of DeepSeek V4 Pro, ready to answer your questions and assist with complex tasks.</p>
+                <div class="logo">
+                    <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/></svg>
+                </div>
+                <h2>How can I help you today?</h2>
             </div>
             
-            <div class="message bot" style="display:none;" id="typing-indicator-wrapper">
-                <div class="typing-indicator" id="typing-indicator">
-                    <div class="dot"></div>
-                    <div class="dot"></div>
-                    <div class="dot"></div>
+            <div class="message-wrapper" style="display:none;" id="typing-indicator-wrapper">
+                <div class="message bot">
+                    <div class="avatar">
+                        <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/></svg>
+                    </div>
+                    <div class="message-content">
+                        <div class="typing-indicator" id="typing-indicator">
+                            <div class="dot"></div>
+                            <div class="dot"></div>
+                            <div class="dot"></div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
-        
 
         <div id="input-container">
             <div class="input-wrapper">
-                <textarea id="user-input" rows="1" placeholder="Type a message..."></textarea>
+                <textarea id="user-input" rows="1" placeholder="Message DeepSeek V4 Pro..."></textarea>
                 <button id="send-btn" disabled>
-                    <svg viewBox="0 0 24 24">
-                        <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"></path>
-                    </svg>
+                    <svg viewBox="0 0 24 24"><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg>
                 </button>
             </div>
         </div>
@@ -346,7 +381,7 @@
             try {
                 client = await window.GradioClient.connect(window.location.origin);
                 console.log("Connected to Gradio Server");
-                userInput.placeholder = "Message DeepSeek-V4-Pro...";
+                userInput.placeholder = "Message DeepSeek V4 Pro...";
             } catch (err) {
                 console.error("Failed to connect to Gradio Server:", err);
                 userInput.placeholder = "Failed to connect to server.";
@@ -356,7 +391,7 @@
         // Auto-resize textarea
         userInput.addEventListener('input', function() {
             this.style.height = 'auto';
-            this.style.height = Math.min(this.scrollHeight, 150) + 'px';
+            this.style.height = Math.min(this.scrollHeight, 200) + 'px';
             sendBtn.disabled = this.value.trim().length === 0;
         });
 
@@ -377,9 +412,20 @@
                 emptyState.style.display = 'none';
             }
 
+            const wrapperDiv = document.createElement('div');
+            wrapperDiv.className = 'message-wrapper';
+
             const messageDiv = document.createElement('div');
             messageDiv.className = `message ${role}`;
             
+            const avatarDiv = document.createElement('div');
+            avatarDiv.className = 'avatar';
+            if (role === 'user') {
+                avatarDiv.textContent = 'U';
+            } else {
+                avatarDiv.innerHTML = '<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/></svg>';
+            }
+
             const contentDiv = document.createElement('div');
             contentDiv.className = 'message-content';
             
@@ -389,10 +435,12 @@
                 contentDiv.textContent = content;
             }
             
+            messageDiv.appendChild(avatarDiv);
             messageDiv.appendChild(contentDiv);
+            wrapperDiv.appendChild(messageDiv);
             
             // Insert before typing indicator wrapper if it's there
-            chatContainer.insertBefore(messageDiv, typingIndicatorWrapper);
+            chatContainer.insertBefore(wrapperDiv, typingIndicatorWrapper);
             
             scrollToBottom();
             
@@ -417,7 +465,7 @@
             addMessage('user', text);
             
             // Show typing indicator
-            typingIndicatorWrapper.style.display = 'flex';
+            typingIndicatorWrapper.style.display = 'block';
             typingIndicator.style.display = 'flex';
             scrollToBottom();