mirror of
https://github.com/agent0ai/agent-zero.git
synced 2026-05-19 16:31:30 +00:00
0c08fa65f3
Keep _office focused on document artifacts, Markdown sessions, LibreOffice-compatible file actions, and document persistence. Route binary document editing through explicit Desktop requests instead of cold-opening the live Desktop surface from artifact results.
385 lines
13 KiB
HTML
385 lines
13 KiB
HTML
<html>
|
|
<head>
|
|
<script type="module">
|
|
import { store } from "/plugins/_office/webui/office-store.js";
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div x-data>
|
|
<template x-if="$store.office">
|
|
<div class="office-panel" x-create="$store.office.onMount($el, xAttrs($el) || {})" x-destroy="$store.office.cleanup()">
|
|
<div class="office-shell">
|
|
<div class="office-document-header" x-show="$store.office.hasActiveFile()" style="display: none;">
|
|
<div class="office-document-title" :title="$store.office.tabLabel($store.office.session)">
|
|
<span class="material-symbols-outlined office-document-icon" aria-hidden="true" x-text="$store.office.tabIcon($store.office.session)"></span>
|
|
<span class="office-document-name" x-text="$store.office.tabTitle($store.office.session)"></span>
|
|
<span class="office-document-dirty" x-show="$store.office.dirty" aria-hidden="true">*</span>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
class="office-icon-button office-document-save-button"
|
|
title="Save"
|
|
aria-label="Save"
|
|
:class="{ 'is-primary': $store.office.dirty }"
|
|
:disabled="$store.office.saving"
|
|
@click="$store.office.save()"
|
|
>
|
|
<span class="material-symbols-outlined" :class="{ spinning: $store.office.saving }" x-text="$store.office.saving ? 'progress_activity' : 'save'"></span>
|
|
</button>
|
|
|
|
<div class="office-file-actions" x-data="{ open: false }" @click.outside="open = false" @keydown.escape.window="open = false">
|
|
<button
|
|
type="button"
|
|
class="office-icon-button office-file-menu-button"
|
|
title="File actions"
|
|
aria-label="File actions"
|
|
aria-haspopup="menu"
|
|
:aria-expanded="open.toString()"
|
|
:disabled="$store.office.saving"
|
|
@click.stop="open = !open"
|
|
>
|
|
<span class="material-symbols-outlined">more_vert</span>
|
|
</button>
|
|
<div class="office-new-menu office-file-menu" role="menu" x-show="open" @click.stop>
|
|
<button type="button" class="office-new-menu-item" role="menuitem" :disabled="$store.office.saving" @click="open = false; $store.office.renameActiveFile()">
|
|
<span class="material-symbols-outlined" aria-hidden="true">edit</span>
|
|
<span>Rename</span>
|
|
</button>
|
|
<button type="button" class="office-new-menu-item" role="menuitem" :disabled="$store.office.loading" @click="open = false; $store.office.closeActiveFile()">
|
|
<span class="material-symbols-outlined" aria-hidden="true">close</span>
|
|
<span>Close File</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="office-toolbar" x-show="$store.office.session && $store.office.isMarkdown()" style="display: none;">
|
|
<div class="office-toolbar-row">
|
|
<div class="office-tool-group office-editor-tools">
|
|
<button type="button" class="office-icon-button" title="Undo" aria-label="Undo" :disabled="!$store.office.canUndo()" @click="$store.office.undo()">
|
|
<span class="material-symbols-outlined">undo</span>
|
|
</button>
|
|
<button type="button" class="office-icon-button" title="Redo" aria-label="Redo" :disabled="!$store.office.canRedo()" @click="$store.office.redo()">
|
|
<span class="material-symbols-outlined">redo</span>
|
|
</button>
|
|
<button type="button" class="office-icon-button" title="Bold" aria-label="Bold" @click="$store.office.format('bold')">
|
|
<span class="material-symbols-outlined">format_bold</span>
|
|
</button>
|
|
<button type="button" class="office-icon-button" title="Italic" aria-label="Italic" @click="$store.office.format('italic')">
|
|
<span class="material-symbols-outlined">format_italic</span>
|
|
</button>
|
|
<button type="button" class="office-icon-button" title="List" aria-label="List" @click="$store.office.format('list')">
|
|
<span class="material-symbols-outlined">format_list_bulleted</span>
|
|
</button>
|
|
<button type="button" class="office-icon-button" title="Numbered list" aria-label="Numbered list" @click="$store.office.format('numbered')">
|
|
<span class="material-symbols-outlined">format_list_numbered</span>
|
|
</button>
|
|
<button type="button" class="office-icon-button" title="Table" aria-label="Table" @click="$store.office.format('table')">
|
|
<span class="material-symbols-outlined">table</span>
|
|
</button>
|
|
</div>
|
|
<span class="office-toolbar-spacer"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="office-state-line" x-show="$store.office.message || $store.office.error || $store.office.loading" style="display: none;">
|
|
<span class="material-symbols-outlined" :class="{ spinning: $store.office.loading }" x-text="$store.office.loading ? 'progress_activity' : ($store.office.error ? 'error' : 'check_circle')"></span>
|
|
<span x-text="$store.office.error || $store.office.message || 'Working'"></span>
|
|
</div>
|
|
|
|
<div class="office-body" :class="{ 'is-source': $store.office.isMarkdown() }">
|
|
<div class="office-editor-wrap" x-show="$store.office.session" style="display: none;">
|
|
<div class="office-editor-scroll is-source" @click.self="$store.office.focusEditor()">
|
|
<textarea
|
|
class="office-source-editor"
|
|
data-office-source
|
|
aria-label="Markdown source"
|
|
x-show="$store.office.isMarkdown()"
|
|
x-model="$store.office.editorText"
|
|
@input="$store.office.onSourceInput()"
|
|
@blur="$store.office.flushInput()"
|
|
spellcheck="true"
|
|
style="display: none;"
|
|
></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="office-empty" x-show="!$store.office.session && !$store.office.loading" style="display: none;">
|
|
<div class="office-empty-actions">
|
|
<button type="button" class="office-icon-button office-command-button" @click="$store.office.runNewMenuAction('open')">
|
|
<span class="material-symbols-outlined" aria-hidden="true">folder_open</span>
|
|
<span class="office-button-label">Open</span>
|
|
</button>
|
|
<button type="button" class="office-icon-button office-command-button" @click="$store.office.runNewMenuAction('markdown')">
|
|
<span class="material-symbols-outlined" aria-hidden="true">article</span>
|
|
<span class="office-button-label">Markdown</span>
|
|
</button>
|
|
<button type="button" class="office-icon-button office-command-button" @click="$store.office.runNewMenuAction('writer')">
|
|
<span class="material-symbols-outlined" aria-hidden="true">description</span>
|
|
<span class="office-button-label">Writer</span>
|
|
</button>
|
|
<button type="button" class="office-icon-button office-command-button" @click="$store.office.runNewMenuAction('spreadsheet')">
|
|
<span class="material-symbols-outlined" aria-hidden="true">table_chart</span>
|
|
<span class="office-button-label">Calc</span>
|
|
</button>
|
|
<button type="button" class="office-icon-button office-command-button" @click="$store.office.runNewMenuAction('presentation')">
|
|
<span class="material-symbols-outlined" aria-hidden="true">co_present</span>
|
|
<span class="office-button-label">Impress</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<style>
|
|
.office-panel,
|
|
.office-shell {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
background: var(--color-background);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.office-panel {
|
|
container-type: inline-size;
|
|
}
|
|
|
|
.modal-inner.office-modal {
|
|
box-sizing: border-box;
|
|
width: min(1040px, calc(100vw - 32px));
|
|
height: min(760px, calc(100vh - 32px));
|
|
min-width: min(640px, calc(100vw - 16px));
|
|
min-height: min(460px, calc(100vh - 16px));
|
|
max-width: none;
|
|
max-height: none;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.modal-inner.office-modal .modal-scroll {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
max-height: none;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
}
|
|
|
|
.modal-inner.office-modal .modal-header {
|
|
grid-template-columns: minmax(0, 1fr) auto auto;
|
|
}
|
|
|
|
.office-document-header,
|
|
.office-toolbar,
|
|
.office-state-line {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
border-bottom: 1px solid var(--color-border);
|
|
padding: 8px 10px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.office-document-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
flex: 1 1 auto;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.office-document-name {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.office-document-dirty {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.office-icon-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
height: 32px;
|
|
min-width: 32px;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 6px;
|
|
background: var(--color-background);
|
|
color: var(--color-text);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.office-icon-button:hover:not(:disabled) {
|
|
background: var(--color-surface);
|
|
}
|
|
|
|
.office-icon-button:disabled {
|
|
cursor: default;
|
|
opacity: 0.55;
|
|
}
|
|
|
|
.office-document-save-button.is-primary {
|
|
border-color: var(--color-accent);
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.office-file-actions {
|
|
position: relative;
|
|
}
|
|
|
|
.office-new-menu {
|
|
position: absolute;
|
|
top: calc(100% + 6px);
|
|
right: 0;
|
|
z-index: 15;
|
|
display: grid;
|
|
min-width: 172px;
|
|
padding: 6px;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 6px;
|
|
background: var(--color-background);
|
|
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
|
|
}
|
|
|
|
.office-new-menu-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
width: 100%;
|
|
border: 0;
|
|
border-radius: 5px;
|
|
background: transparent;
|
|
color: var(--color-text);
|
|
padding: 8px;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.office-new-menu-item:hover {
|
|
background: var(--color-surface);
|
|
}
|
|
|
|
.office-toolbar-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.office-tool-group,
|
|
.office-empty-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.office-toolbar-spacer {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.office-state-line {
|
|
font-size: 13px;
|
|
color: var(--color-muted);
|
|
}
|
|
|
|
.office-body {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
}
|
|
|
|
.office-editor-wrap,
|
|
.office-editor-scroll {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
}
|
|
|
|
.office-source-editor {
|
|
flex: 1 1 auto;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
resize: none;
|
|
border: 0;
|
|
outline: none;
|
|
padding: 16px;
|
|
background: var(--color-background);
|
|
color: var(--color-text);
|
|
font: 14px/1.55 var(--font-mono, monospace);
|
|
}
|
|
|
|
.office-empty {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 24px;
|
|
}
|
|
|
|
.office-command-button {
|
|
min-width: 108px;
|
|
justify-content: flex-start;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.office-header-actions {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.office-header-new-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
height: 32px;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 6px;
|
|
background: var(--color-background);
|
|
color: var(--color-text);
|
|
padding: 0 9px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.office-header-actions .office-new-menu {
|
|
right: 0;
|
|
}
|
|
|
|
@container (max-width: 560px) {
|
|
.office-document-header,
|
|
.office-toolbar,
|
|
.office-state-line {
|
|
padding: 7px;
|
|
}
|
|
|
|
.office-button-label,
|
|
.office-header-new-button span:not(.material-symbols-outlined) {
|
|
display: none;
|
|
}
|
|
|
|
.office-command-button {
|
|
min-width: 32px;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
</style>
|
|
</body>
|
|
</html>
|