Skip to content

[AI-101] Add the AI actions dropdown to the full editor toolbar - #131

Open
tangopium wants to merge 3 commits into
masterfrom
feature/ai-101-ai-actions-dropdown
Open

tangopium wants to merge 3 commits into
masterfrom
feature/ai-101-ai-actions-dropdown

Conversation

@tangopium

@tangopium tangopium commented Oct 2, 2026 •

Copy link
Copy Markdown
Collaborator

Ticket

https://community.openproject.org/wp/AI-101

Paired core PR: opf/openproject#25770 (carries the rebuilt bundle; merge both together, never one alone).

What are you trying to accomplish?

Adds an "Assistant" split button at the right end of the full editor toolbar, the entry point for the AI text transform actions of the work package description editor. Ported to the TypeScript and esbuild layout after #135 to #139.

  • src/plugins/op-ai-actions/op-ai-actions.ts: split button built from createDropdown with SplitButtonView and addListToDropdown. It asks the core's aiActions service (reached through the plugin context) for the actions of the current resource and field, adds nothing while the list is empty, and hands the selected action back to the service's run. The main part shows the sparkle icon and the name of the action to run: the one the core's optional defaultAction picks (the action run last, else the first), following every selection from the list. Clicking it runs that action; the arrow opens the list. The button carries an "Assistant" tooltip and is disabled while the editor is read-only or in source mode.
  • The dropdown is appended to the toolbar element itself, outside the item collections, and keeps itself behind the overflow menu, so it stays visible at every editor width; a maxWidth nudge makes CKEditor regroup its items when the dropdown appears and after every label change.
  • src/icons/sparkle.svg is the single sparkle Octicon of the Artificial Intelligence administration section, placed in a 20 unit viewBox like CKEditor's own icons so it renders at their size; registration in op-plugins.ts, aiActions typed in op-types.ts.
  • tests/plugins/op-ai-actions.test.ts covers the absent state, the pinned placement and regrouping, the shown action and its fallbacks, the main button and the list, keyboard reachability, the read-only and source mode states and the lifecycle; tests/stubs/svg.ts and a jest.config.js mapping make the icon import testable.

What approach did you choose and why?

The plugin is kept thin on purpose: it renders labels and reports a selection, nothing more. Which actions exist, whether the assistant is available, and what happens on selection all live in the core, so iterating on the editor behaviour does not need a bundle rebuild. On cores that provide no aiActions service the plugin registers nothing, so older OpenProject versions bundling this build see no change.

The caption js.editor.ai_actions.caption comes from the core's locale, like the other toolbar captions.

@myabc

myabc commented Oct 11, 2026

Copy link
Copy Markdown
Contributor

unfortunately this will now needs some changes (i,e, migration to TS). apologies for the breakage due to #135, #136, #137. Ping me if you need a hand!

Adds an "Assistant" dropdown to the toolbar of the full editor, the entry
point for the AI text transform actions of the work package description
editor. The plugin asks the core's aiActions service for the actions of
the current resource and field, adds nothing while that list is empty,
and hands the selected action back to the service.

The dropdown is appended to the toolbar element outside the item
collections, so CKEditor's overflow grouping never moves it into the
"Show more items" menu; a maxWidth round trip makes the toolbar regroup
its items when the dropdown appears, since grouping is otherwise only
recomputed on resize. The icon is the single sparkle Octicon the
Artificial Intelligence section of the administration uses, shown
without a caption and with a tooltip. The button is reachable with Tab,
its entries carry menu item roles, and it is disabled with its menu
closed while the editor is read-only or in source mode. Actions that
resolve after the plugin was destroyed are dropped, and the plugin
removes its dropdown and listeners on destroy.

Paired with the core pull request that carries the rebuilt bundle.

https://community.openproject.org/work_packages/77784
@tangopium
tangopium force-pushed the feature/ai-101-ai-actions-dropdown branch from b6a5299 to 5c1b3dd Compare October 13, 2026 07:33
@tangopium

Copy link
Copy Markdown
Collaborator Author

Ported to the TypeScript and esbuild layout and rebased on master in 5c1b3dd. The dropdown now sits on the toolbar element outside the grouped items (it has to stay visible at every width) and uses the sparkle Octicon of the AI administration section; the paired core PR opf/openproject#25770 carries the bundle rebuilt from this branch.

At the right end of the toolbar the menu used to grow outwards and was
clipped by the work package pane, since CKEditor only checks the
viewport when it picks a panel side. The panel now opens towards the
toolbar, mirrored for right-to-left languages.

https://community.openproject.org/work_packages/77784
The main part shows the sparkle icon with the name of the action the
user ran last (the first action until then) and runs it on click; the
arrow opens the list of actions. The core service decides which action
to show through the new optional `defaultAction`, so cores without it
still show the first action. The sparkle now sits in a 20 unit viewBox
like CKEditor's own icons, which renders it smaller.

Changing the label can change the button width, so the toolbar is
nudged to regroup after every selection as well.

https://community.openproject.org/wp/AI-101
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

2 participants