alex/LocalAGI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

webui, fixes

Browse Source
This commit is contained in:
mudler
2024-04-05 17:14:53 +02:00
parent 32f4e53242
commit 5f29125bbb
13 changed files with 510 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
example/webui/index.html Normal file
View File

@@ -0,0 +1,76 @@
<!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
}
</style>
</head>
<body class="bg-gray-100 p-4">
<div class="chat-container bg-white shadow-lg rounded-lg" hx-ext="sse" sse-connect="/sse">
<!-- Chat Header -->
<div class="border-b border-gray-200 p-4">
<h1 class="text-lg font-semibold">Talk to Smart Agent</h1>
</div>
<!-- Chat Messages -->
<div class="chat-messages p-4">
<!-- Agent Status Box -->
<div class="bg-gray-100 p-4">
<h2 class="text-sm font-semibold">Clients:</h2>
<div id="clients" class="text-sm text-gray-700">
<!-- Status updates dynamically here -->
<div sse-swap="clients" ></div>
</div>
</div>
<div class="bg-gray-100 p-4">
<h2 class="text-sm font-semibold">Status:</h2>
<div id="hud" class="text-sm text-gray-700">
<!-- Status updates dynamically here -->
<div sse-swap="hud" ></div>
</div>
</div>
<!-- https://github.com/bigskysoftware/htmx/issues/1882#issuecomment-1783463192 -->
<div sse-swap="messages" hx-swap="beforeend" id="messages" hx-on:htmx:after-settle="document.getElementById('messages').scrollIntoView(false)"></div>
</div>
<!-- Agent Status Box -->
<div class="bg-gray-100 p-4">
<h2 class="text-sm font-semibold">Agent is currently:</h2>
<div id="agentStatus" class="text-sm text-gray-700" >
<!-- Status updates dynamically here -->
<div sse-swap="status" ></div>
</div>
</div>
<!-- Message Input -->
<div class="p-4 border-t border-gray-200">
<input name="message" type="text" hx-post="/chat" hx-target="#results" hx-indicator=".htmx-indicator"
class="p-2 border rounded w-full" 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>