mirror of
https://github.com/agent0ai/agent-zero.git
synced 2026-04-28 11:40:47 +00:00
a2547f12a1
- Add model switcher component for chat input with progress display - Enhance model config store with active preset/model retrieval - Show agent progress as ghost text in chat input placeholder - Add agent artifact patterns to .gitignore
56 lines
3.2 KiB
HTML
56 lines
3.2 KiB
HTML
<html>
|
|
<head>
|
|
<script type="module">
|
|
import { store as speechStore } from "/components/chat/speech/speech-store.js";
|
|
import { store as chatNavStore } from "/components/chat/navigation/chat-navigation-store.js";
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="progress-bar-box" x-data>
|
|
<x-extension id="chat-input-progress-start"></x-extension>
|
|
|
|
<!-- Hidden legacy progress-bar element (keeps JS updater happy, not displayed) -->
|
|
<span id="progress-bar" style="display:none;"></span>
|
|
|
|
<div id="progress-bar-right">
|
|
<h4 id="progress-bar-stop-speech" x-data x-cloak x-show="$store.speech.isSpeaking">
|
|
<span id="stop-speech" @click="$store.speech.stop()" style="cursor: pointer" title="Stop Speech" aria-label="Stop Speech">
|
|
<span class="icon material-symbols-outlined">volume_off</span>
|
|
</span>
|
|
</h4>
|
|
<div id="chat-nav-buttons" aria-label="Chat navigation">
|
|
<button class="btn-icon-action" title="Scroll to top" x-on:click="$store.chatNavigation.scrollToTop()">
|
|
<span class="material-symbols-outlined">vertical_align_top</span>
|
|
</button>
|
|
<button class="btn-icon-action" title="Previous user message" x-on:click="$store.chatNavigation.scrollToPrevUserMessage()">
|
|
<span class="material-symbols-outlined">keyboard_arrow_up</span>
|
|
</button>
|
|
<button class="btn-icon-action" title="Next user message" x-on:click="$store.chatNavigation.scrollToNextUserMessage()">
|
|
<span class="material-symbols-outlined">keyboard_arrow_down</span>
|
|
</button>
|
|
<button class="btn-icon-action" title="Scroll to bottom" x-on:click="$store.chatNavigation.scrollToBottom()">
|
|
<span class="material-symbols-outlined">vertical_align_bottom</span>
|
|
</button>
|
|
</div>
|
|
<x-extension id="chat-nav-after"></x-extension>
|
|
</div>
|
|
<x-extension id="chat-input-progress-end"></x-extension>
|
|
</div>
|
|
|
|
|
|
<style>
|
|
#progress-bar-box { background-color: var(--color-panel); padding: var(--spacing-xs) var(--spacing-md) 0 var(--spacing-md); display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: center; z-index: 1001; gap: var(--spacing-sm); min-height: 0; }
|
|
#progress-bar-box > x-extension { display: contents; }
|
|
#progress-bar-box h4 { margin: 0; }
|
|
#progress-bar-right { display: flex; align-items: center; gap: var(--spacing-sm); flex-shrink: 0; margin-left: auto; margin-right: calc(5.5rem + var(--spacing-xs)); }
|
|
#progress-bar-right > x-extension { display: contents; }
|
|
#chat-nav-buttons { display: flex; align-items: center; gap: 2px; opacity: 0.85; }
|
|
#chat-nav-buttons .btn-icon-action { padding: var(--spacing-xs); }
|
|
#chat-nav-buttons .btn-icon-action {
|
|
border: none !important;
|
|
}
|
|
.shiny-text { background: linear-gradient(to right, var(--color-primary-dark) 20%, var(--color-text) 40%, var(--color-text) 60%, var(--color-primary-dark) 60%); background-size: 200% auto; color: transparent; -webkit-background-clip: text; background-clip: text; animation: shine 1s linear infinite; }
|
|
@keyframes shine { to { background-position: -200% center; } }
|
|
</style>
|
|
</body>
|
|
</html>
|