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

ui: redesign email, Telegram, and WhatsApp settings

Browse source 
Redesign the three messaging integration panels with a clearer, more guided
setup flow and polished user experience.

- simplify the email panel by surfacing the essentials first, moving
  advanced scheduling behind Advanced, and making connection checks more
  visible
- redesign Telegram and WhatsApp as step-based setup flows with clearer
  status states, safer access warnings, richer test feedback, and more
  responsive layouts
- add shared plugin-settings wizard footer support, extract WhatsApp state
  into its own store, and align test-connection messages with the new UX

ux: ease Email connector setup and refresh copy

- Redesign the Email connector settings around a guided first-run flow with a clearer empty state, provider presets, and much friendlier copy
- Move server, routing, and scheduling power-user controls into an `Advanced` section while keeping the existing config model compatible
- Improve connection-test messaging, add Exchange inbound validation, and refresh the dashboard Email card copy while keeping the card visible
- Verify the updated setup flow in the browser on desktop and mobile

update and simplify x-data based on established frontend patterns

Update 10_discovery_cards.py

further polishing and first-draft no-click model for email and telegram

update whatsapp

Update telegram-config-store.js
This commit is contained in:
Alessandro 2026-04-10 11:08:29 +02:00
parent c06e13f8c2
commit 2000ba74a3
13 changed files with 3040 additions and 1066 deletions
Download patch file Download diff file Expand all files Collapse all files

99
webui/components/plugins/plugin-settings.html
View file

@ -114,21 +114,42 @@
</div>
<!-- Footer (pinned outside scroll area) -->
<div class="modal-footer" data-modal-footer>
<button class="btn btn-ok"
@click="context.save()"
:disabled="context?.isSaving || context?.isLoading">
Save
</button>
<button class="btn"
@click="context.resetToDefault()"
:disabled="context?.isSaving || context?.isLoading">
Default
</button>
<button class="btn btn-cancel"
@click="window.closeModal?.()">
Cancel
</button>
<div class="modal-footer plugin-settings-footer" data-modal-footer>
<div class="plugin-settings-footer-nav"
x-show="context.wizardFooter?.visible?.()">
<div class="plugin-settings-footer-nav-row">
<button class="btn"
@click="context.wizardFooter?.onBack?.()"
:disabled="!context.wizardFooter?.canGoBack?.()">
<span x-text="context.wizardFooter?.backLabel?.() || 'Back'"></span>
</button>
<div class="plugin-settings-footer-note" x-text="context.wizardFooter?.note?.() || ''"></div>
</div>
</div>
<div class="plugin-settings-footer-actions">
<button class="btn"
@click="context.resetToDefault()"
:disabled="context?.isSaving || context?.isLoading">
Default
</button>
<button class="btn btn-cancel"
@click="window.closeModal?.()">
Cancel
</button>
<button class="btn btn-field"
x-show="context.wizardFooter?.showNext?.()"
@click="context.wizardFooter?.onNext?.()"
:disabled="context.wizardFooter?.nextDisabled?.()">
<span x-text="context.wizardFooter?.nextLabel?.() || 'Next'"></span>
</button>
<button class="btn btn-ok"
x-show="!context.wizardFooter || context.wizardFooter?.showSave?.()"
@click="context.save()"
:disabled="context?.isSaving || context?.isLoading">
Save
</button>
</div>
</div>
</div>
</template>
@ -213,6 +234,39 @@
min-height: 4rem;
}
.plugin-settings-footer {
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.plugin-settings-footer-nav {
flex: 1 1 22rem;
min-width: 18rem;
}
.plugin-settings-footer-nav-row {
display: flex;
align-items: center;
gap: 0.75rem;
width: 100%;
}
.plugin-settings-footer-note {
color: var(--color-text-secondary);
font-size: var(--font-size-small);
line-height: 1.4;
flex: 1 1 auto;
min-width: 0;
}
.plugin-settings-footer-actions {
display: flex;
align-items: center;
gap: 1rem;
margin-left: auto;
}
.spinning {
animation: spin 1s linear infinite;
}
@ -282,6 +336,21 @@
justify-content: flex-start;
white-space: normal;
}
.plugin-settings-footer-nav {
width: 100%;
min-width: 0;
}
.plugin-settings-footer-nav-row {
flex-wrap: wrap;
}
.plugin-settings-footer-actions {
width: 100%;
justify-content: flex-end;
margin-left: 0;
}
}
</style>
</body>