Skip to content

Redesign assistant editor and file-connector UX#377

Merged
philmerrell merged 2 commits into
developfrom
feature/assistant-editor-redesign
May 22, 2026
Merged

Redesign assistant editor and file-connector UX#377
philmerrell merged 2 commits into
developfrom
feature/assistant-editor-redesign

Conversation

@philmerrell
Copy link
Copy Markdown
Contributor

Summary

Restyles the assistant editor and the file-source browser modal to the rounded-2xl list/form design language used by the redesigned admin pages (manage-models, tools), and reworks how documents are added to an assistant.

Editor restyle

  • Form column restyled to convention tokens: rounded-2xl inputs/buttons, text-sm/6 body text, blue accent, flat <section> blocks divided by border-t (no boxed cards).
  • Uploaded documents rendered as a single divide-y bordered list instead of separate cards.
  • Form column given a bg-gray-50 / dark:bg-gray-900 surface so the white inputs read as raised.

File-connector UX

  • Available file-source connectors are surfaced as buttons above the drop zone instead of being buried behind a generic "Import from a connector" button that opened a modal source-list.
  • Clicking a connector opens the browser dialog targeted at that connector — straight into its folder browser (or an inline Connect prompt), skipping the in-modal source picker. Opening the dialog without a connector still works as before.
  • The full drop zone collapses to a compact "Add files" control once a document exists or is uploading; both device and connector uploads remain available.

Modal restyle

  • File-source browser modal restyled to the same conventions: rounded-2xl panel, divide-y bordered lists, convention button variants.

Skill doc

  • New tailwind-ui skill reference references/app-conventions.md documenting the list/form design tokens.

Test plan

  • /assistants/new — connector buttons appear above the drop zone (none if the file-source feature isn't configured).
  • Click a connected connector → modal opens straight into its folders, no source-picker step, no "All sources" link.
  • Click a not-connected connector → modal opens with the inline Connect prompt.
  • Upload or import a file → drop zone collapses to a compact "Add files" control; can still add more via device and connector.
  • Edit an assistant with existing documents → compact "Add files" shown from the start.
  • Verify rounded-2xl styling, list dividers, and button styles on the editor and modal in both light and dark mode.

Notes

  • Verified with ng build (development) — compiles clean. The assistants component specs were not run: they fail on unmodified develop with a pre-existing TestBed compileTestModule error. assistant-form.page.spec.ts gained a FileSourceService mock so it will pass once that environment issue is resolved.

🤖 Generated with Claude Code

philmerrell and others added 2 commits May 22, 2026 14:00
Add references/app-conventions.md documenting the rounded-2xl list and
form page design language (border radius, list style, form sections,
button variants) so future list/form work in frontend/ai.client matches
the redesigned admin pages instead of the older boxed-card style.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Restyle the assistant editor and the file-source browser modal to the
rounded-2xl list/form design language used by the redesigned admin
pages (manage-models, tools), and rework how documents are added:

- Editor form column restyled (rounded-2xl, text-sm/6, blue accent,
  flat border-t sections); uploaded documents rendered as a divide-y
  list; form column given a bg-gray-50 surface so inputs read clearly.
- File-source connectors are surfaced as buttons directly above the
  drop zone instead of behind a generic "Import from a connector"
  button — clicking one opens the browser dialog targeted at that
  connector, skipping the in-modal source picker.
- The drop zone collapses to a compact "Add files" control once a
  document exists or is uploading; device and connector uploads stay
  available.
- File-source browser modal restyled to the same conventions
  (rounded-2xl panel, divide-y lists, convention button variants).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
@philmerrell philmerrell merged commit 5a88c1c into develop May 22, 2026
10 checks passed
@philmerrell philmerrell deleted the feature/assistant-editor-redesign branch May 22, 2026 20:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant