96 lines
3.7 KiB
HTML
96 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Smart Agent Interface</title>
|
|
<!-- Include Tailwind CSS from CDN -->
|
|
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
|
<!-- Optional: Include HTMX and SSE Extension for dynamic updates -->
|
|
<script src="https://unpkg.com/htmx.org"></script>
|
|
<script src="https://unpkg.com/htmx.org/dist/ext/sse.js"></script>
|
|
<script src="https://unpkg.com/hyperscript.org@0.9.12"></script>
|
|
<style>
|
|
body { overflow: hidden; }
|
|
.chat-container { height: 100vh; display: flex; flex-direction: column; }
|
|
.chat-messages { overflow-y: auto; flex-grow: 1; }
|
|
.htmx-indicator{
|
|
opacity:0;
|
|
transition: opacity 10ms ease-in;
|
|
}
|
|
.htmx-request .htmx-indicator{
|
|
opacity:1
|
|
}
|
|
/* Loader (https://cssloaders.github.io/) */
|
|
.loader {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
display: block;
|
|
margin:15px auto;
|
|
position: relative;
|
|
color: #FFF;
|
|
box-sizing: border-box;
|
|
animation: animloader 2s linear infinite;
|
|
}
|
|
|
|
@keyframes animloader {
|
|
0% { box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 -2px; }
|
|
25% { box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 2px; }
|
|
50% { box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 2px, -38px 0 0 -2px; }
|
|
75% { box-shadow: 14px 0 0 2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 -2px; }
|
|
100% { box-shadow: 14px 0 0 -2px, 38px 0 0 2px, -14px 0 0 -2px, -38px 0 0 -2px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-900 p-4 text-white">
|
|
<div class="chat-container bg-gray-800 shadow-lg rounded-lg" hx-ext="sse" sse-connect="/sse">
|
|
<!-- Chat Header -->
|
|
<div class="border-b border-gray-700 p-4">
|
|
<h1 class="text-lg font-semibold">Talk to '{{.Character.Name}}'</h1>
|
|
</div>
|
|
|
|
<!-- Chat Messages -->
|
|
<div class="chat-messages p-4">
|
|
<!-- Client Box -->
|
|
<div class="bg-gray-700 p-4">
|
|
<h2 class="text-sm font-semibold">Clients:</h2>
|
|
<div id="clients" class="text-sm text-gray-300">
|
|
<!-- Status updates dynamically here -->
|
|
<div sse-swap="clients"></div>
|
|
</div>
|
|
</div>
|
|
<!-- HUD Box -->
|
|
<div class="bg-gray-700 p-4">
|
|
<h2 class="text-sm font-semibold">Status:</h2>
|
|
<div id="hud" class="text-sm text-gray-300">
|
|
<!-- Status updates dynamically here -->
|
|
<div sse-swap="hud"></div>
|
|
</div>
|
|
</div>
|
|
<div sse-swap="messages" hx-swap="beforeend" id="messages" hx-on:htmx:after-settle="document.getElementById('messages').scrollIntoView(false)"></div>
|
|
<div sse-swap="message_status"></div>
|
|
</div>
|
|
|
|
<!-- Agent Status Box -->
|
|
<div class="bg-gray-700 p-4">
|
|
<h2 class="text-sm font-semibold">Agent:</h2>
|
|
<div id="agentStatus" class="text-sm text-gray-300">
|
|
<!-- Status updates dynamically here -->
|
|
<div sse-swap="status" ></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Message Input -->
|
|
<div class="p-4 border-t border-gray-700">
|
|
<input id="inputMessage" name="message" type="text" hx-post="/chat" hx-target="#results" hx-indicator=".htmx-indicator"
|
|
class="p-2 border rounded w-full bg-gray-600 text-white placeholder-gray-300" placeholder="Type a message..." _="on htmx:afterRequest set my value to ''">
|
|
<div class="my-2 htmx-indicator" >Loading...</div>
|
|
<div id="results" class="flex justify-center"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</body>
|
|
</html>
|