vrr/agent-zero
2
0
Fork 0
mirror of https://github.com/agent0ai/agent-zero.git synced 2026-04-29 04:00:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

ui: plus menu for additional chat actions

Browse source 
Replace the paperclip and the separate bottom action row with a single + control that opens an upward panel next to the chat input box. Menu content stays in bottom-actions.html so chat-input-bottom-actions-start / end extension points are unchanged for plugins using these slots.

Added Files to the left sidebar dropdown for easy nav.

polish plus menu for extra chat actions
This commit is contained in:
Alessandro 2026-03-25 22:12:30 +01:00
parent ec4de76561
commit 8333f5b276
7 changed files with 300 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

80
webui/components/chat/input/chat-bar-input.html
View file

@ -2,7 +2,6 @@
<head>
<script type="module">
import { store as speechStore } from "/components/chat/speech/speech-store.js";
import { store as attachmentsStore } from "/components/chat/attachments/attachmentsStore.js";
import { store as fullScreenStore } from "/components/modals/full-screen-input/full-screen-store.js";
import { store as messageQueueStore } from "/components/chat/message-queue/message-queue-store.js";
import { store as chatInputStore } from "/components/chat/input/input-store.js";
@ -12,14 +11,29 @@
<div x-data>
<x-extension id="chat-input-box-start"></x-extension>
<div class="input-row">
<!-- Attachment icon with tooltip -->
<div class="attachment-wrapper">
<label for="file-input" class="attachment-icon" title="Add attachments to the message" data-bs-placement="top" data-bs-trigger="hover">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z" />
</svg>
</label>
<input type="file" id="file-input" accept="*" multiple style="display: none" @change="$store.chatAttachments.handleFileUpload($event)">
<!-- More actions (+): opens upward; content lives in bottom-actions.html -->
<div
class="attachment-wrapper chat-more-dropdown"
@click.outside="$store.chatInput.closeChatMoreMenu()"
@keydown.escape.window="$store.chatInput.closeChatMoreMenu()"
>
<button
type="button"
class="chat-more-trigger"
@click.stop="$store.chatInput.toggleChatMoreMenu()"
:aria-expanded="$store.chatInput.chatMoreMenuOpen.toString()"
aria-label="More actions"
>
<span class="material-symbols-outlined" aria-hidden="true">add</span>
</button>
<div
class="chat-more-panel"
x-show="$store.chatInput.chatMoreMenuOpen"
x-transition
style="display: none;"
>
<x-component path="chat/input/bottom-actions.html"></x-component>
</div>
</div>
<!-- Container for textarea and expand button -->
@ -62,11 +76,51 @@
/* Layout rows */
.input-row { display: flex; align-items: center; gap: var(--spacing-xs); width: 100%; white-space: nowrap; }
/* Attachments icon + tooltip */
.attachment-wrapper { position: relative; flex-shrink: 0; }
.attachment-icon { cursor: pointer; color: var(--color-text); opacity: 0.7; transition: opacity 0.2s ease; display: flex; align-items: center; }
.attachment-icon:hover { opacity: 1; }
.attachment-icon:active { opacity: 0.5; }
/* Composer + menu: custom panel (edit here; not shared with file-browser dropdown) */
.chat-more-dropdown { z-index: 1; }
.chat-more-trigger {
cursor: pointer;
color: var(--color-text);
opacity: 0.75;
transition: opacity 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
padding: 0;
border: none;
border-radius: 50%;
background: transparent;
}
.chat-more-trigger:hover { opacity: 1; }
.chat-more-trigger:active { opacity: 0.5; }
.chat-more-trigger .material-symbols-outlined {
font-size: 1.5rem;
line-height: 1;
}
.chat-more-panel {
position: absolute;
left: 0;
bottom: 100%;
margin-bottom: 0.25rem;
min-width: 11rem;
max-width: min(18rem, 92vw);
max-height: min(70vh, 20rem);
overflow-x: hidden;
overflow-y: auto;
background-color: var(--color-panel);
border: 1px solid var(--color-border);
border-radius: 0.4rem;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
z-index: 1050;
padding: 0.2rem 0;
}
.light-mode .chat-more-panel {
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
/* Text input */
#chat-input-container {
position: relative;