Skip to content

Commit d13ba56

Browse files
author
Yuriy Bezsonov
committed
refactoring
1 parent 77da8bd commit d13ba56

1 file changed

Lines changed: 26 additions & 53 deletions

File tree

  • samples/spring-ai-te-agent/ai-agent/src/main/resources/templates

‎samples/spring-ai-te-agent/ai-agent/src/main/resources/templates/chat.html‎

Lines changed: 26 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -7,35 +7,8 @@
77
<title>AI Agent</title>
88
<script src="https://cdn.tailwindcss.com"></script>
99
<script src="https://cdn.jsdelivr.net/npm/marked@9.1.2/marked.min.js"></script>
10-
11-
<!-- BASE: Tailwind Configuration -->
1210
<script>
13-
tailwind.config = {
14-
darkMode: 'class',
15-
theme: {
16-
extend: {
17-
colors: {
18-
'dev-dark': '#1a1a1a',
19-
'dev-darker': '#121212',
20-
'dev-accent': '#6366f1',
21-
'dev-accent-hover': '#4f46e5',
22-
'dev-secondary': '#3b82f6',
23-
'dev-text': '#e2e8f0',
24-
'dev-text-muted': '#94a3b8',
25-
'dev-border': '#2d3748',
26-
'dev-message-user': '#1e293b',
27-
'dev-message-ai': '#1e1e2d',
28-
'light-bg': '#ffffff',
29-
'light-bg-secondary': '#f8fafc',
30-
'light-text': '#1f2937',
31-
'light-text-muted': '#6b7280',
32-
'light-border': '#e5e7eb',
33-
'light-message-user': '#f3f4f6',
34-
'light-message-ai': '#ffffff'
35-
}
36-
}
37-
}
38-
}
11+
tailwind.config = { darkMode: 'class' }
3912
</script>
4013

4114
<style>
@@ -89,8 +62,8 @@
8962
border: 1px solid #e5e7eb;
9063
}
9164
.dark .ai-response table {
92-
background: #1e1e2d !important;
93-
border: 1px solid #2d3748 !important;
65+
background: #1e293b !important;
66+
border: 1px solid #374151 !important;
9467
}
9568
.ai-response th {
9669
background: #6366f1 !important;
@@ -107,9 +80,9 @@
10780
font-weight: 600 !important;
10881
}
10982
.dark .ai-response td {
110-
border-bottom: 1px solid #2d3748 !important;
83+
border-bottom: 1px solid #374151 !important;
11184
color: #f9fafb !important;
112-
background: #1e1e2d !important;
85+
background: #1e293b !important;
11386
}
11487
.ai-response tr:last-child td {
11588
border-bottom: none;
@@ -119,7 +92,7 @@
11992
color: #111827 !important;
12093
}
12194
.dark .ai-response tr:nth-child(even) td {
122-
background: #2a2a3a !important;
95+
background: #334155 !important;
12396
color: #f9fafb !important;
12497
}
12598

@@ -157,8 +130,8 @@
157130
position: relative;
158131
}
159132
.dark .message-bubble-ai {
160-
background: #1e1e2d !important;
161-
border: 1px solid #2d3748 !important;
133+
background: #1e293b !important;
134+
border: 1px solid #374151 !important;
162135
color: #e2e8f0 !important;
163136
}
164137
.message-bubble-user {
@@ -169,7 +142,7 @@
169142
}
170143
.dark .message-bubble-user {
171144
background: #1e293b !important;
172-
border: 1px solid #2d3748 !important;
145+
border: 1px solid #374151 !important;
173146
color: #e2e8f0 !important;
174147
}
175148
.message-bubble-ai p, .message-bubble-ai * {
@@ -240,37 +213,37 @@
240213
}
241214
</style>
242215
</head>
243-
<body class="bg-light-bg dark:bg-dev-darker min-h-screen text-light-text dark:text-dev-text transition-colors duration-300">
216+
<body class="bg-white dark:bg-gray-900 min-h-screen text-gray-800 dark:text-slate-200 transition-colors duration-300">
244217
<div class="container mx-auto px-4 py-8">
245218
<!-- ========== BASE: Header ========== -->
246219
<header class="mb-8">
247220
<div class="flex justify-between items-center">
248-
<h1 class="text-3xl font-bold text-dev-accent">🤖 AI Agent</h1>
221+
<h1 class="text-3xl font-bold text-indigo-500">🤖 AI Agent</h1>
249222
<div class="flex items-center gap-2">
250223
<!-- MEMORY: Multi-user Controls -->
251224
<div th:if="${multiUserEnabled}" class="flex items-center gap-2">
252-
<label for="userIdInput" class="text-sm text-light-text-muted dark:text-dev-text-muted">User:</label>
225+
<label for="userIdInput" class="text-sm text-gray-500 dark:text-slate-400">User:</label>
253226
<input type="text" id="userIdInput" value="user1"
254-
class="bg-light-bg dark:bg-dev-darker border border-light-border dark:border-dev-border px-3 py-1 rounded text-sm focus:outline-none focus:ring-2 focus:ring-dev-accent text-light-text dark:text-dev-text w-32">
227+
class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 px-3 py-1 rounded text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 text-gray-800 dark:text-slate-200 w-32">
255228
<button id="summarizeBtn" class="bg-purple-600 text-white px-4 py-2 rounded hover:bg-purple-700 transition">
256229
📝 Summarize
257230
</button>
258231
</div>
259232
<!-- BASE: Dark Mode Toggle -->
260-
<button id="themeToggle" class="bg-dev-accent text-white px-4 py-2 rounded hover:bg-dev-accent-hover transition">
233+
<button id="themeToggle" class="bg-indigo-500 text-white px-4 py-2 rounded hover:bg-indigo-600 transition">
261234
🌙 Dark
262235
</button>
263236
</div>
264237
</div>
265-
<p class="text-light-text-muted dark:text-dev-text-muted mt-2">Chat with our AI Agent to help you with your questions!</p>
238+
<p class="text-gray-500 dark:text-slate-400 mt-2">Chat with our AI Agent to help you with your questions!</p>
266239
</header>
267240

268241
<!-- ========== BASE: Chat Container ========== -->
269-
<div class="bg-light-bg-secondary dark:bg-dev-dark rounded-xl shadow-lg p-6 chat-container border border-light-border dark:border-dev-border flex flex-col">
242+
<div class="bg-slate-50 dark:bg-gray-800 rounded-xl shadow-lg p-6 chat-container border border-gray-200 dark:border-gray-700 flex flex-col">
270243
<!-- BASE: Message Container -->
271-
<div class="message-container flex-grow mb-4 bg-light-bg dark:bg-dev-darker rounded-lg p-4" id="messageContainer">
244+
<div class="message-container flex-grow mb-4 bg-white dark:bg-gray-900 rounded-lg p-4" id="messageContainer">
272245
<div class="flex mb-4">
273-
<div class="w-10 h-10 rounded-full bg-dev-accent bg-opacity-20 flex items-center justify-center mr-3">
246+
<div class="w-10 h-10 rounded-full bg-indigo-500 bg-opacity-20 flex items-center justify-center mr-3">
274247
<span class="text-lg">🤖</span>
275248
</div>
276249
<div class="message-bubble-ai rounded-lg p-3 max-w-3xl">
@@ -280,17 +253,17 @@ <h1 class="text-3xl font-bold text-dev-accent">🤖 AI Agent</h1>
280253
</div>
281254

282255
<!-- BASE: Input Area -->
283-
<div class="border-t border-light-border dark:border-dev-border pt-4 mt-auto">
256+
<div class="border-t border-gray-200 dark:border-gray-700 pt-4 mt-auto">
284257
<form id="chatForm" class="flex w-full">
285258
<!-- UPLOAD: File Input and Button -->
286259
<input type="file" id="fileInput" class="hidden" accept=".jpg,.jpeg,.png">
287-
<button th:if="${multiModalEnabled}" type="button" id="fileButton" class="bg-dev-accent text-white px-4 py-3 rounded-l-lg hover:bg-dev-accent-hover transition flex items-center justify-center">
260+
<button th:if="${multiModalEnabled}" type="button" id="fileButton" class="bg-indigo-500 text-white px-4 py-3 rounded-l-lg hover:bg-indigo-600 transition flex items-center justify-center">
288261
📎
289262
</button>
290263
<!-- BASE: Text Input -->
291-
<input type="text" id="userInput" th:class="${multiModalEnabled} ? 'flex-grow bg-light-bg dark:bg-dev-darker border border-light-border dark:border-dev-border px-4 py-3 focus:outline-none focus:ring-2 focus:ring-dev-accent text-light-text dark:text-dev-text' : 'flex-grow bg-light-bg dark:bg-dev-darker border border-light-border dark:border-dev-border px-4 py-3 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-dev-accent text-light-text dark:text-dev-text'" placeholder="Please ask your question...">
264+
<input type="text" id="userInput" th:class="${multiModalEnabled} ? 'flex-grow bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 px-4 py-3 focus:outline-none focus:ring-2 focus:ring-indigo-500 text-gray-800 dark:text-slate-200' : 'flex-grow bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 px-4 py-3 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 text-gray-800 dark:text-slate-200'" placeholder="Please ask your question...">
292265
<!-- BASE: Send Button -->
293-
<button type="submit" class="bg-dev-accent text-white px-6 py-3 rounded-r-lg hover:bg-dev-accent-hover transition">Send</button>
266+
<button type="submit" class="bg-indigo-500 text-white px-6 py-3 rounded-r-lg hover:bg-indigo-600 transition">Send</button>
294267
</form>
295268
</div>
296269
</div>
@@ -586,14 +559,14 @@ <h1 class="text-3xl font-bold text-dev-accent">🤖 AI Agent</h1>
586559
loadingDiv.id = loadingId;
587560
loadingDiv.className = 'flex mb-4';
588561
loadingDiv.innerHTML = `
589-
<div class="w-10 h-10 rounded-full bg-dev-accent bg-opacity-20 flex items-center justify-center mr-3">
562+
<div class="w-10 h-10 rounded-full bg-indigo-500 bg-opacity-20 flex items-center justify-center mr-3">
590563
<span class="text-lg">🤖</span>
591564
</div>
592565
<div class="message-bubble-ai rounded-lg p-3">
593566
<div class="flex space-x-2">
594-
<div class="w-2 h-2 bg-dev-accent rounded-full animate-bounce"></div>
595-
<div class="w-2 h-2 bg-dev-accent rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
596-
<div class="w-2 h-2 bg-dev-accent rounded-full animate-bounce" style="animation-delay: 0.4s"></div>
567+
<div class="w-2 h-2 bg-indigo-500 rounded-full animate-bounce"></div>
568+
<div class="w-2 h-2 bg-indigo-500 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
569+
<div class="w-2 h-2 bg-indigo-500 rounded-full animate-bounce" style="animation-delay: 0.4s"></div>
597570
</div>
598571
</div>
599572
`;

0 commit comments

Comments
 (0)