From 814b8e7dec99be17bdadf9d3390f5a6f0cd6a085 Mon Sep 17 00:00:00 2001 From: Alessandro <155005371+3clyp50@users.noreply.github.com> Date: Tue, 14 Jan 2025 12:47:14 +0100 Subject: [PATCH] UI improvements for v0.8.1 (#299) * ui: updated icons New icons for: - memory settings - browser agent model * ui: katex and copy button fix - Fix copy button appending "Copy" when copying user messages - Fix KaTeX math not displaying properly or at all * ui: drag and drop file attachments Drag and drop fullscreen modal for file attachments in the input message * ui: favicon, fullscreen input qol --- .../default/agent.system.behaviour_default.md | 2 +- .../agent.system.main.communication.md | 2 +- python/helpers/settings.py | 20 +++++ webui/css/modals.css | 78 ++++++++++++++++- webui/index.css | 81 ++++++++++++++++-- webui/index.html | 58 ++++++++++++- webui/index.js | 85 ++++++++++++++++++- webui/js/messages.js | 18 ++-- webui/js/modal.js | 56 ++++++++++++ webui/public/browser_model.svg | 1 + webui/public/darkSymbol.svg | 5 ++ webui/public/dragndrop.svg | 1 + webui/public/memory.svg | 1 + 13 files changed, 385 insertions(+), 23 deletions(-) create mode 100644 webui/public/browser_model.svg create mode 100644 webui/public/darkSymbol.svg create mode 100644 webui/public/dragndrop.svg create mode 100644 webui/public/memory.svg diff --git a/prompts/default/agent.system.behaviour_default.md b/prompts/default/agent.system.behaviour_default.md index 0d38d53a5..ab6269c2e 100644 --- a/prompts/default/agent.system.behaviour_default.md +++ b/prompts/default/agent.system.behaviour_default.md @@ -1,2 +1,2 @@ - Favor linux commands for simple tasks where possible instead of python -- Enclose any math with $$...$$ \ No newline at end of file +- Enclose any math with $...$ \ No newline at end of file diff --git a/prompts/reflection/agent.system.main.communication.md b/prompts/reflection/agent.system.main.communication.md index 674af61e8..c277bc524 100644 --- a/prompts/reflection/agent.system.main.communication.md +++ b/prompts/reflection/agent.system.main.communication.md @@ -4,7 +4,7 @@ respond valid json with fields thoughts: decompose ➔ create decision trees ➔ forest of thoughts reflection: question logical frameworks ➔ refine thoughts ➔ perform metareflection -math requires katex $$...$$ delims +math requires katex $...$ delims tool_name: use tool name tool_args: key value pairs tool arguments no other text diff --git a/python/helpers/settings.py b/python/helpers/settings.py index 1ef900a0a..65bcb5b85 100644 --- a/python/helpers/settings.py +++ b/python/helpers/settings.py @@ -437,6 +437,25 @@ def convert_out(settings: Settings) -> SettingsOutput: "fields": browser_model_fields, } + # Memory settings section + memory_fields: list[SettingsField] = [] + memory_fields.append( + { + "id": "memory_settings", + "title": "Memory Settings", + "description": "", + "type": "text", + "value": "", + } + ) + + memory_section: SettingsSection = { + "id": "memory", + "title": "Memory Settings", + "description": "", + "fields": memory_fields, + } + # basic auth section auth_fields: list[SettingsField] = [] @@ -706,6 +725,7 @@ def convert_out(settings: Settings) -> SettingsOutput: util_model_section, embed_model_section, browser_model_section, + memory_section, stt_section, api_keys_section, auth_section, diff --git a/webui/css/modals.css b/webui/css/modals.css index 8c3cf9ef9..c90c6e110 100644 --- a/webui/css/modals.css +++ b/webui/css/modals.css @@ -136,7 +136,7 @@ .full-screen-input-modal .modal-close { position: absolute; - top: 1rem; + top: 1.2rem; right: 1rem; font-size: 1.5rem; padding: 0 0.5rem; @@ -161,7 +161,7 @@ #full-screen-input { width: 100%; - height: 100%; + height: calc(100% - 50px); border: none; background-color: transparent; color: var(--color-text); @@ -375,4 +375,76 @@ h2 { .btn-upload > svg { width: 20px; } -} \ No newline at end of file +} + +/* Editor Toolbar */ +.editor-toolbar { + display: flex; + align-items: center; + gap: 1rem; + padding: 0.5rem 1rem; + border-radius: 6px; + background-color: rgba(30, 30, 30, 0.95); + border-bottom: 1px solid var(--color-border); +} + +.light-mode .editor-toolbar { + background-color: rgba(240, 240, 240, 0.95); +} + +.toolbar-group { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0 0.5rem; + border-right: 1px solid var(--color-border); +} + +.toolbar-group:last-child { + border-right: none; +} + +.toolbar-button { + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + padding: 0.4rem; + background: transparent; + border: 1px solid transparent; + border-radius: 4px; + color: var(--color-text); + opacity: 0.7; + cursor: pointer; + transition: all 0.2s ease; +} + +.toolbar-button svg { + width: 18px; + height: 18px; +} + +.toolbar-button:hover { + opacity: 1; + background-color: rgba(255, 255, 255, 0.1); +} + +.toolbar-button:active { + transform: translateY(1px); +} + +.toolbar-button.active { + background-color: rgba(255, 255, 255, 0.15); + border-color: var(--color-border); + opacity: 1; +} + +.toolbar-button:disabled { + opacity: 0.3; + cursor: not-allowed; +} + +.toolbar-button:disabled:hover { + background-color: transparent; +} diff --git a/webui/index.css b/webui/index.css index 134e26978..247e93026 100644 --- a/webui/index.css +++ b/webui/index.css @@ -771,11 +771,11 @@ pre { font-family: 'Roboto Mono', monospace; font-optical-sizing: auto; -webkit-font-optical-sizing: auto; - font-size: 0.875rem; + font-size: 0.90rem; max-height: 7rem; - min-height: 3rem; + min-height: 3.05rem; width: 100%; - padding: 0.5rem 40px var(--spacing-sm) var(--spacing-sm); + padding: 0.48rem 40px var(--spacing-sm) var(--spacing-sm); margin-right: var(--spacing-xs); overflow-y: auto; scroll-behavior: smooth; @@ -842,7 +842,7 @@ pre { #chat-input:focus { outline: 0.05rem solid rgba(155, 155, 155, 0.5); font-size: 0.955rem; - padding-top: 0.5rem; + padding-top: 0.45rem; background-color: var(--color-input-focus); } @@ -1526,8 +1526,8 @@ input:checked + .slider:before { /* Math (KaTeX) */ .katex { - line-height: 1rem !important; - font-size: 3rem; + line-height: 1.2 !important; + font-size: 1.1em; } /* Animations */ @@ -2003,4 +2003,73 @@ input:checked + .slider:before { 100% { transform: scale(1); } +} + +.dragdrop-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.85); + z-index: 9999; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + gap: 1rem; +} + +.light-mode .dragdrop-overlay { + background: rgba(255, 255, 255, 0.92); +} + +/* Alpine transition classes */ +.transition { + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); +} + +.duration-300 { + transition-duration: 300ms; +} + +.opacity-0 { + opacity: 0; +} + +.opacity-100 { + opacity: 1; +} + +/* Rest of dragdrop styles remain the same */ +.dragdrop-icon { + width: 128px; + height: 128px; + opacity: 0.85; + filter: invert(1); +} + +.light-mode .dragdrop-icon { + filter: none; +} + +.dragdrop-text { + color: var(--color-text); + font-size: 1.2rem; + opacity: 0.85; + text-align: center; + max-width: 80%; + line-height: 1.5; +} + +.dragdrop-subtext { + color: var(--color-text); + font-size: 0.9rem; + opacity: 0.6; +} + +/* Alpine cloak to prevent FOUC */ +[x-cloak] { + display: none !important; } \ No newline at end of file diff --git a/webui/index.html b/webui/index.html index 70899e255..5a2a574f3 100644 --- a/webui/index.html +++ b/webui/index.html @@ -5,6 +5,7 @@ Agent Zero + @@ -665,6 +666,7 @@ + @@ -700,9 +702,46 @@
+ + +
+
+ + +
+
+ + +
+
+ + @keydown.ctrl.enter="handleClose()" + @keydown.ctrl.z.prevent="undo()" + @keydown.ctrl.shift.z.prevent="redo()" + :style="{ 'white-space': wordWrap ? 'pre-wrap' : 'pre' }" + @input="updateHistory()">
@@ -714,6 +753,23 @@
+ +
+ Drop files +
Drop files to attach them to your message
+
Supported formats: Images (JPG, PNG, BMP) and Documents (PDF, TXT, CSV, HTML, JSON, MD)
+
+ \ No newline at end of file diff --git a/webui/index.js b/webui/index.js index d1944caf7..47035fb0f 100644 --- a/webui/index.js +++ b/webui/index.js @@ -869,4 +869,87 @@ async function startPolling() { _doPoll(); } -document.addEventListener("DOMContentLoaded", startPolling); \ No newline at end of file +document.addEventListener("DOMContentLoaded", startPolling); + +document.addEventListener('DOMContentLoaded', () => { + const dragDropOverlay = document.getElementById('dragdrop-overlay'); + const inputSection = document.getElementById('input-section'); + let dragCounter = 0; + + // Prevent default drag behaviors + ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { + document.addEventListener(eventName, (e) => { + e.preventDefault(); + e.stopPropagation(); + }, false); + }); + + // Handle drag enter + document.addEventListener('dragenter', (e) => { + dragCounter++; + if (dragCounter === 1) { + Alpine.$data(dragDropOverlay).isVisible = true; + } + }, false); + + // Handle drag leave + document.addEventListener('dragleave', (e) => { + dragCounter--; + if (dragCounter === 0) { + Alpine.$data(dragDropOverlay).isVisible = false; + } + }, false); + + // Handle drop + dragDropOverlay.addEventListener('drop', (e) => { + dragCounter = 0; + Alpine.$data(dragDropOverlay).isVisible = false; + + const inputAD = Alpine.$data(inputSection); + const files = e.dataTransfer.files; + handleFiles(files, inputAD); + }, false); +}); + +// Separate file handling logic to be used by both drag-drop and file input +function handleFiles(files, inputAD) { + Array.from(files).forEach(file => { + const ext = file.name.split('.').pop().toLowerCase(); + const allowedExts = new Set(['jpg', 'jpeg', 'png', 'bmp', 'md', 'py', 'js', 'sh', + 'html', 'css', 'pdf', 'txt', 'csv', 'json']); + + if (allowedExts.has(ext)) { + const isImage = ['jpg', 'jpeg', 'png', 'bmp'].includes(ext); + + if (isImage) { + const reader = new FileReader(); + reader.onload = e => { + inputAD.attachments.push({ + file: file, + url: e.target.result, + type: 'image', + name: file.name, + extension: ext + }); + inputAD.hasAttachments = true; + }; + reader.readAsDataURL(file); + } else { + inputAD.attachments.push({ + file: file, + type: 'file', + name: file.name, + extension: ext + }); + inputAD.hasAttachments = true; + } + } + }); +} + +// Modify the existing handleFileUpload to use the new handleFiles function +window.handleFileUpload = function(event) { + const files = event.target.files; + const inputAD = Alpine.$data(inputSection); + handleFiles(files, inputAD); +} \ No newline at end of file diff --git a/webui/js/messages.js b/webui/js/messages.js index 0d6357dc3..ef12d0d48 100644 --- a/webui/js/messages.js +++ b/webui/js/messages.js @@ -14,7 +14,7 @@ function createCopyButton() { if (container.classList.contains("kvps-row")) { textToCopy = container.querySelector(".kvps-val").textContent; } else if (container.classList.contains("message-text")) { - textToCopy = container.textContent.replace("copy", ""); + textToCopy = container.querySelector("span").textContent; } else { textToCopy = container.querySelector("span").textContent; } @@ -118,10 +118,7 @@ export function _drawMessage( if (window.renderMathInElement && latex) { renderMathInElement(spanElement, { delimiters: [ - { left: "$", right: "$", display: true }, - { left: "\\$", right: "\\$", display: true }, - { left: "$", right: "$", display: false }, - { left: "\\$", right: "\\$", display: false }, + { left: "$", right: "$", display: true } ], throwOnError: false, }); @@ -254,7 +251,11 @@ export function drawMessageUser( if (content && content.trim().length > 0) { const textDiv = document.createElement("div"); textDiv.classList.add("message-text"); - textDiv.textContent = content; + + // Create a span for the content + const spanElement = document.createElement("span"); + spanElement.textContent = content; + textDiv.appendChild(spanElement); // Add click handler textDiv.addEventListener("click", () => { @@ -548,10 +549,7 @@ function drawKvps(container, kvps, latex) { if (window.renderMathInElement && latex) { renderMathInElement(span, { delimiters: [ - { left: "$$", right: "$$", display: true }, - { left: "$$", right: "$$", display: true }, - { left: "$", right: "$", display: false }, - { left: "$$", right: "$$", display: false }, + { left: "$", right: "$", display: true } ], throwOnError: false, }); diff --git a/webui/js/modal.js b/webui/js/modal.js index 3f58658f8..62438d019 100644 --- a/webui/js/modal.js +++ b/webui/js/modal.js @@ -1,11 +1,19 @@ const fullScreenInputModalProxy = { isOpen: false, inputText: '', + wordWrap: true, + undoStack: [], + redoStack: [], + maxStackSize: 100, + lastSavedState: '', openModal() { const chatInput = document.getElementById('chat-input'); this.inputText = chatInput.value; + this.lastSavedState = this.inputText; this.isOpen = true; + this.undoStack = []; + this.redoStack = []; // Focus the full screen input after a short delay to ensure the modal is rendered setTimeout(() => { @@ -19,6 +27,54 @@ const fullScreenInputModalProxy = { chatInput.value = this.inputText; chatInput.dispatchEvent(new Event('input')); // Trigger input event for textarea auto-resize this.isOpen = false; + }, + + updateHistory() { + // Don't save if the text hasn't changed + if (this.lastSavedState === this.inputText) return; + + this.undoStack.push(this.lastSavedState); + if (this.undoStack.length > this.maxStackSize) { + this.undoStack.shift(); + } + this.redoStack = []; + this.lastSavedState = this.inputText; + }, + + undo() { + if (!this.canUndo) return; + + this.redoStack.push(this.inputText); + this.inputText = this.undoStack.pop(); + this.lastSavedState = this.inputText; + }, + + redo() { + if (!this.canRedo) return; + + this.undoStack.push(this.inputText); + this.inputText = this.redoStack.pop(); + this.lastSavedState = this.inputText; + }, + + clearText() { + if (this.inputText) { + this.updateHistory(); // Save current state before clearing + this.inputText = ''; + this.lastSavedState = ''; + } + }, + + toggleWrap() { + this.wordWrap = !this.wordWrap; + }, + + get canUndo() { + return this.undoStack.length > 0; + }, + + get canRedo() { + return this.redoStack.length > 0; } }; diff --git a/webui/public/browser_model.svg b/webui/public/browser_model.svg new file mode 100644 index 000000000..bc668207f --- /dev/null +++ b/webui/public/browser_model.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/webui/public/darkSymbol.svg b/webui/public/darkSymbol.svg new file mode 100644 index 000000000..f2ff8f5b5 --- /dev/null +++ b/webui/public/darkSymbol.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/webui/public/dragndrop.svg b/webui/public/dragndrop.svg new file mode 100644 index 000000000..de14224cf --- /dev/null +++ b/webui/public/dragndrop.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/webui/public/memory.svg b/webui/public/memory.svg new file mode 100644 index 000000000..82ca61b2f --- /dev/null +++ b/webui/public/memory.svg @@ -0,0 +1 @@ + \ No newline at end of file