Update static/index.html
Browse files- static/index.html +136 -7
static/index.html
CHANGED
|
@@ -6,7 +6,6 @@
|
|
| 6 |
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
| 7 |
<title>AI Chat with Gemini</title>
|
| 8 |
<style>
|
| 9 |
-
/* Your existing CSS styles here */
|
| 10 |
:root {
|
| 11 |
--background-color: #212121;
|
| 12 |
--input-area-color: #212121;
|
|
@@ -17,6 +16,10 @@
|
|
| 17 |
--icon-color: #b0b0b0;
|
| 18 |
--send-button-color: #4CAF50;
|
| 19 |
--border-color: #333333;
|
|
|
|
|
|
|
|
|
|
|
|
|
| 20 |
}
|
| 21 |
|
| 22 |
* {
|
|
@@ -37,6 +40,7 @@
|
|
| 37 |
display: flex;
|
| 38 |
flex-direction: column;
|
| 39 |
height: 100%;
|
|
|
|
| 40 |
}
|
| 41 |
|
| 42 |
.chat-container {
|
|
@@ -78,7 +82,7 @@
|
|
| 78 |
border-radius: 18px;
|
| 79 |
margin-bottom: 12px;
|
| 80 |
word-wrap: break-word;
|
| 81 |
-
line-height: 1.
|
| 82 |
font-size: 1rem;
|
| 83 |
}
|
| 84 |
|
|
@@ -93,6 +97,83 @@
|
|
| 93 |
align-self: flex-start;
|
| 94 |
border-bottom-left-radius: 4px;
|
| 95 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 96 |
|
| 97 |
.typing-indicator {
|
| 98 |
display: flex;
|
|
@@ -193,6 +274,16 @@
|
|
| 193 |
width: 24px;
|
| 194 |
height: 24px;
|
| 195 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 196 |
</style>
|
| 197 |
</head>
|
| 198 |
<body>
|
|
@@ -200,15 +291,16 @@
|
|
| 200 |
<main class="chat-area">
|
| 201 |
<div class="welcome-screen">
|
| 202 |
<h2>What can I help with?</h2>
|
|
|
|
| 203 |
</div>
|
| 204 |
</main>
|
| 205 |
|
| 206 |
<footer class="input-area">
|
| 207 |
<form id="chat-form" class="input-wrapper">
|
| 208 |
-
<button type="button" class="icon-button">
|
| 209 |
<svg viewBox="0 0 24 24"><path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5a2.5 2.5 0 0 1 5 0v10.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5V6H10v9.5a2.5 2.5 0 0 0 5 0V5c-1.38 0-2.5 1.12-2.5 2.5v10.5c0 1.38-1.12 2.5-2.5 2.5s-2.5-1.12-2.5-2.5V5a4 4 0 0 1 8 0v11.5c-1.1 0-2-.9-2-2V6h-1.5z"></path></svg>
|
| 210 |
</button>
|
| 211 |
-
<textarea id="message-input" placeholder="Ask anything" rows="1"></textarea>
|
| 212 |
<button type="submit" id="send-button" class="icon-button send-button disabled">
|
| 213 |
<svg viewBox="0 0 24 24"><path d="M2 21l21-9L2 3v7l15 2-15 2v7z"></path></svg>
|
| 214 |
</button>
|
|
@@ -223,6 +315,7 @@
|
|
| 223 |
const chatArea = document.querySelector('.chat-area');
|
| 224 |
const welcomeScreen = document.querySelector('.welcome-screen');
|
| 225 |
const sendButton = document.getElementById('send-button');
|
|
|
|
| 226 |
|
| 227 |
// Auto-resize textarea
|
| 228 |
const adjustTextareaHeight = () => {
|
|
@@ -248,16 +341,26 @@
|
|
| 248 |
};
|
| 249 |
|
| 250 |
// Add message to chat
|
| 251 |
-
const addMessage = (
|
| 252 |
if (!welcomeScreen.classList.contains('hidden')) {
|
| 253 |
welcomeScreen.classList.add('hidden');
|
| 254 |
}
|
| 255 |
|
| 256 |
const messageElement = document.createElement('div');
|
| 257 |
messageElement.classList.add('message', `${sender}-message`);
|
| 258 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 259 |
chatArea.appendChild(messageElement);
|
| 260 |
scrollToBottom();
|
|
|
|
| 261 |
};
|
| 262 |
|
| 263 |
// Show typing indicator
|
|
@@ -290,7 +393,7 @@
|
|
| 290 |
}
|
| 291 |
|
| 292 |
chatArea.removeChild(indicator);
|
| 293 |
-
addMessage(data.response, 'ai');
|
| 294 |
|
| 295 |
} catch (error) {
|
| 296 |
chatArea.removeChild(indicator);
|
|
@@ -324,8 +427,34 @@
|
|
| 324 |
// Textarea input events
|
| 325 |
messageInput.addEventListener('input', adjustTextareaHeight);
|
| 326 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 327 |
// Initial setup
|
| 328 |
updateSendButtonState();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 329 |
});
|
| 330 |
</script>
|
| 331 |
</body>
|
|
|
|
| 6 |
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
| 7 |
<title>AI Chat with Gemini</title>
|
| 8 |
<style>
|
|
|
|
| 9 |
:root {
|
| 10 |
--background-color: #212121;
|
| 11 |
--input-area-color: #212121;
|
|
|
|
| 16 |
--icon-color: #b0b0b0;
|
| 17 |
--send-button-color: #4CAF50;
|
| 18 |
--border-color: #333333;
|
| 19 |
+
--code-bg-color: #1e1e1e;
|
| 20 |
+
--code-text-color: #f8f8f2;
|
| 21 |
+
--link-color: #64b5f6;
|
| 22 |
+
--quote-color: #4CAF50;
|
| 23 |
}
|
| 24 |
|
| 25 |
* {
|
|
|
|
| 40 |
display: flex;
|
| 41 |
flex-direction: column;
|
| 42 |
height: 100%;
|
| 43 |
+
line-height: 1.6;
|
| 44 |
}
|
| 45 |
|
| 46 |
.chat-container {
|
|
|
|
| 82 |
border-radius: 18px;
|
| 83 |
margin-bottom: 12px;
|
| 84 |
word-wrap: break-word;
|
| 85 |
+
line-height: 1.6;
|
| 86 |
font-size: 1rem;
|
| 87 |
}
|
| 88 |
|
|
|
|
| 97 |
align-self: flex-start;
|
| 98 |
border-bottom-left-radius: 4px;
|
| 99 |
}
|
| 100 |
+
|
| 101 |
+
/* Enhanced AI message styling */
|
| 102 |
+
.ai-message-content {
|
| 103 |
+
overflow: hidden;
|
| 104 |
+
}
|
| 105 |
+
|
| 106 |
+
.ai-message-content p {
|
| 107 |
+
margin-bottom: 12px;
|
| 108 |
+
}
|
| 109 |
+
|
| 110 |
+
.ai-message-content p:last-child {
|
| 111 |
+
margin-bottom: 0;
|
| 112 |
+
}
|
| 113 |
+
|
| 114 |
+
.ai-message-content strong {
|
| 115 |
+
color: #ffffff;
|
| 116 |
+
font-weight: 600;
|
| 117 |
+
}
|
| 118 |
+
|
| 119 |
+
.ai-message-content em {
|
| 120 |
+
color: #d1d1d1;
|
| 121 |
+
font-style: italic;
|
| 122 |
+
}
|
| 123 |
+
|
| 124 |
+
.ai-message-content a {
|
| 125 |
+
color: var(--link-color);
|
| 126 |
+
text-decoration: none;
|
| 127 |
+
word-break: break-all;
|
| 128 |
+
}
|
| 129 |
+
|
| 130 |
+
.ai-message-content a:hover {
|
| 131 |
+
text-decoration: underline;
|
| 132 |
+
}
|
| 133 |
+
|
| 134 |
+
.ai-message-content ul,
|
| 135 |
+
.ai-message-content ol {
|
| 136 |
+
padding-left: 24px;
|
| 137 |
+
margin-bottom: 12px;
|
| 138 |
+
}
|
| 139 |
+
|
| 140 |
+
.ai-message-content li {
|
| 141 |
+
margin-bottom: 6px;
|
| 142 |
+
}
|
| 143 |
+
|
| 144 |
+
.ai-message-content blockquote {
|
| 145 |
+
border-left: 3px solid var(--quote-color);
|
| 146 |
+
padding-left: 12px;
|
| 147 |
+
margin-left: 0;
|
| 148 |
+
color: #bdbdbd;
|
| 149 |
+
margin-bottom: 12px;
|
| 150 |
+
}
|
| 151 |
+
|
| 152 |
+
.ai-message-content pre {
|
| 153 |
+
background-color: var(--code-bg-color);
|
| 154 |
+
border-radius: 6px;
|
| 155 |
+
padding: 12px;
|
| 156 |
+
overflow-x: auto;
|
| 157 |
+
margin-bottom: 12px;
|
| 158 |
+
}
|
| 159 |
+
|
| 160 |
+
.ai-message-content code {
|
| 161 |
+
font-family: 'Courier New', Courier, monospace;
|
| 162 |
+
background-color: var(--code-bg-color);
|
| 163 |
+
padding: 2px 4px;
|
| 164 |
+
border-radius: 3px;
|
| 165 |
+
color: var(--code-text-color);
|
| 166 |
+
font-size: 0.9em;
|
| 167 |
+
}
|
| 168 |
+
|
| 169 |
+
.ai-message-content .code-block {
|
| 170 |
+
display: block;
|
| 171 |
+
white-space: pre-wrap;
|
| 172 |
+
padding: 12px;
|
| 173 |
+
border-radius: 6px;
|
| 174 |
+
background-color: var(--code-bg-color);
|
| 175 |
+
margin-bottom: 12px;
|
| 176 |
+
}
|
| 177 |
|
| 178 |
.typing-indicator {
|
| 179 |
display: flex;
|
|
|
|
| 274 |
width: 24px;
|
| 275 |
height: 24px;
|
| 276 |
}
|
| 277 |
+
|
| 278 |
+
/* Animation for new messages */
|
| 279 |
+
@keyframes fadeIn {
|
| 280 |
+
from { opacity: 0; transform: translateY(10px); }
|
| 281 |
+
to { opacity: 1; transform: translateY(0); }
|
| 282 |
+
}
|
| 283 |
+
|
| 284 |
+
.message {
|
| 285 |
+
animation: fadeIn 0.3s ease-out;
|
| 286 |
+
}
|
| 287 |
</style>
|
| 288 |
</head>
|
| 289 |
<body>
|
|
|
|
| 291 |
<main class="chat-area">
|
| 292 |
<div class="welcome-screen">
|
| 293 |
<h2>What can I help with?</h2>
|
| 294 |
+
<p>Ask me anything - I can explain concepts, generate ideas, or help with coding!</p>
|
| 295 |
</div>
|
| 296 |
</main>
|
| 297 |
|
| 298 |
<footer class="input-area">
|
| 299 |
<form id="chat-form" class="input-wrapper">
|
| 300 |
+
<button type="button" class="icon-button" id="attach-button">
|
| 301 |
<svg viewBox="0 0 24 24"><path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5a2.5 2.5 0 0 1 5 0v10.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5V6H10v9.5a2.5 2.5 0 0 0 5 0V5c-1.38 0-2.5 1.12-2.5 2.5v10.5c0 1.38-1.12 2.5-2.5 2.5s-2.5-1.12-2.5-2.5V5a4 4 0 0 1 8 0v11.5c-1.1 0-2-.9-2-2V6h-1.5z"></path></svg>
|
| 302 |
</button>
|
| 303 |
+
<textarea id="message-input" placeholder="Ask anything..." rows="1"></textarea>
|
| 304 |
<button type="submit" id="send-button" class="icon-button send-button disabled">
|
| 305 |
<svg viewBox="0 0 24 24"><path d="M2 21l21-9L2 3v7l15 2-15 2v7z"></path></svg>
|
| 306 |
</button>
|
|
|
|
| 315 |
const chatArea = document.querySelector('.chat-area');
|
| 316 |
const welcomeScreen = document.querySelector('.welcome-screen');
|
| 317 |
const sendButton = document.getElementById('send-button');
|
| 318 |
+
const attachButton = document.getElementById('attach-button');
|
| 319 |
|
| 320 |
// Auto-resize textarea
|
| 321 |
const adjustTextareaHeight = () => {
|
|
|
|
| 341 |
};
|
| 342 |
|
| 343 |
// Add message to chat
|
| 344 |
+
const addMessage = (content, sender, isHTML = false) => {
|
| 345 |
if (!welcomeScreen.classList.contains('hidden')) {
|
| 346 |
welcomeScreen.classList.add('hidden');
|
| 347 |
}
|
| 348 |
|
| 349 |
const messageElement = document.createElement('div');
|
| 350 |
messageElement.classList.add('message', `${sender}-message`);
|
| 351 |
+
|
| 352 |
+
if (isHTML) {
|
| 353 |
+
const contentDiv = document.createElement('div');
|
| 354 |
+
contentDiv.classList.add(`${sender}-message-content`);
|
| 355 |
+
contentDiv.innerHTML = content;
|
| 356 |
+
messageElement.appendChild(contentDiv);
|
| 357 |
+
} else {
|
| 358 |
+
messageElement.textContent = content;
|
| 359 |
+
}
|
| 360 |
+
|
| 361 |
chatArea.appendChild(messageElement);
|
| 362 |
scrollToBottom();
|
| 363 |
+
return messageElement;
|
| 364 |
};
|
| 365 |
|
| 366 |
// Show typing indicator
|
|
|
|
| 393 |
}
|
| 394 |
|
| 395 |
chatArea.removeChild(indicator);
|
| 396 |
+
addMessage(data.response, 'ai', true);
|
| 397 |
|
| 398 |
} catch (error) {
|
| 399 |
chatArea.removeChild(indicator);
|
|
|
|
| 427 |
// Textarea input events
|
| 428 |
messageInput.addEventListener('input', adjustTextareaHeight);
|
| 429 |
|
| 430 |
+
// Attach button placeholder
|
| 431 |
+
attachButton.addEventListener('click', () => {
|
| 432 |
+
// Future implementation for file attachments
|
| 433 |
+
messageInput.focus();
|
| 434 |
+
});
|
| 435 |
+
|
| 436 |
// Initial setup
|
| 437 |
updateSendButtonState();
|
| 438 |
+
messageInput.focus();
|
| 439 |
+
|
| 440 |
+
// Example first message on first load
|
| 441 |
+
const isFirstVisit = !localStorage.getItem('chatVisited');
|
| 442 |
+
if (isFirstVisit) {
|
| 443 |
+
localStorage.setItem('chatVisited', 'true');
|
| 444 |
+
setTimeout(() => {
|
| 445 |
+
const welcomeMessage = `
|
| 446 |
+
<p>Hello! I'm your AI assistant powered by Gemini. I can help with:</p>
|
| 447 |
+
<ul>
|
| 448 |
+
<li>Answering questions</li>
|
| 449 |
+
<li>Explaining concepts</li>
|
| 450 |
+
<li>Generating ideas</li>
|
| 451 |
+
<li>Coding help</li>
|
| 452 |
+
</ul>
|
| 453 |
+
<p>Try asking me something like: <em>"Explain quantum computing in simple terms"</em> or <em>"Help me debug this Python code"</em></p>
|
| 454 |
+
`;
|
| 455 |
+
addMessage(welcomeMessage, 'ai', true);
|
| 456 |
+
}, 1000);
|
| 457 |
+
}
|
| 458 |
});
|
| 459 |
</script>
|
| 460 |
</body>
|