From 3455e5f84ccee1a8bd68a9f44d41c2822a0bca32 Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Thu, 9 Jul 2026 13:52:34 +1000 Subject: [PATCH 1/3] Docs: TINYDOC-3528 - Added configurable welcome actions to the TinyMCE AI Chat empty state --- modules/ROOT/pages/8.8.0-release-notes.adoc | 7 ++++ .../configuration/tinymceai_options.adoc | 39 +++++++++++++++++++ 2 files changed, 46 insertions(+) diff --git a/modules/ROOT/pages/8.8.0-release-notes.adoc b/modules/ROOT/pages/8.8.0-release-notes.adoc index 8f2fdad0d0..e3cea6126f 100644 --- a/modules/ROOT/pages/8.8.0-release-notes.adoc +++ b/modules/ROOT/pages/8.8.0-release-notes.adoc @@ -127,6 +127,13 @@ For information on using Enhanced Skins & Icon Packs, see: xref:enhanced-skins-a // CCFR here. +=== Added configurable welcome actions to the TinyMCE AI Chat empty state +// #TINYMCE-14508 + +In {productname} {release-version}, the TinyMCE AI Chat sidebar can display a configurable set of welcome actions in its empty state, giving users suggested starting points instead of a blank prompt. Each item can show descriptive text or a button that runs a Quick Action, sends a chat prompt, or runs another editor command. Welcome actions appear before the first request is sent and are hidden once a conversation begins. + +Welcome actions are configured with the new xref:tinymceai.adoc#tinymceai_chat_welcome_actions[`+tinymceai_chat_welcome_actions+`] option and are disabled by default. + [[changes]] == Changes diff --git a/modules/ROOT/partials/configuration/tinymceai_options.adoc b/modules/ROOT/partials/configuration/tinymceai_options.adoc index 9ab4dcc21f..b342f5afe6 100644 --- a/modules/ROOT/partials/configuration/tinymceai_options.adoc +++ b/modules/ROOT/partials/configuration/tinymceai_options.adoc @@ -276,6 +276,45 @@ tinymce.init({ }); ---- +[[tinymceai_chat_welcome_actions]] +=== `+tinymceai_chat_welcome_actions+` + +Adds a set of suggested welcome actions to the Chat sidebar empty state, shown below the xref:tinymceai.adoc#tinymceai_chat_welcome_message[`+tinymceai_chat_welcome_message+`] when a conversation is empty. Welcome actions give users a set of starting points instead of a blank prompt. The actions are shown only before the first request is sent. They are hidden after the first request and shown again when a new conversation is started. + +*Type:* `+Array+` + +*Default value:* `+[]+` (no welcome actions) + +Each item in the array is one of the following: + +* A `+String+`, or an object with a `+text+` property (`+{ text: 'string' }+`), shown as descriptive text. +* An action object, shown as a clickable button, with the following properties: +** `+title+` (`+String+`): The label shown on the button. +** `+command+` (`+String+`): The editor command run when the button is selected. Selecting the button runs `+editor.execCommand(command, false, value)+`. Use one of the Quick Actions and Chat commands, or the core `+ToggleSidebar+` command, listed in xref:editor-command-identifiers.adoc#tinymceai[TinyMCE AI]. +** `+value+` (optional): The argument passed to the command. The accepted value matches the command, for example a language label for `+TinyMCEAIQuickActionTranslate+` or a `+{ prompt }+` object for `+TinyMCEAIChatPrompt+`. +** `+icon+` (optional `+String+`): The name of the icon shown on the button. When omitted, an icon is selected based on the command. + +.Example +[source,js] +---- +tinymce.init({ + selector: 'textarea', + plugins: 'tinymceai', + toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review', + tinymceai_chat_welcome_actions: [ + 'Try one of these to get started:', + { title: 'Summarize the document', command: 'TinyMCEAIQuickActionsSummarize' }, + { title: 'Continue writing', command: 'TinyMCEAIQuickActionContinueWriting' }, + { title: 'Translate to Swedish', command: 'TinyMCEAIQuickActionTranslate', value: 'swedish' }, + { title: 'Draft a reply', command: 'TinyMCEAIChatPrompt', value: { prompt: 'Draft a reply to this message.' } } + ], + // Required for authentication + tinymceai_token_provider: () => { + return fetch('/api/token').then(r => r.json()); + } +}); +---- + [[tinymceai_tool_data_callback]] === `+tinymceai_tool_data_callback+` From a5b2c8694f9a3a8bbe769396285612a763a8e660 Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Thu, 9 Jul 2026 14:21:42 +1000 Subject: [PATCH 2/3] Docs: TINYDOC-3528 - Expand tinymceai_chat_welcome_actions example with interleaved text, ToggleSidebar, and non-AI command --- .../configuration/tinymceai_options.adoc | 21 +++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/modules/ROOT/partials/configuration/tinymceai_options.adoc b/modules/ROOT/partials/configuration/tinymceai_options.adoc index b342f5afe6..49d736a774 100644 --- a/modules/ROOT/partials/configuration/tinymceai_options.adoc +++ b/modules/ROOT/partials/configuration/tinymceai_options.adoc @@ -290,9 +290,11 @@ Each item in the array is one of the following: * A `+String+`, or an object with a `+text+` property (`+{ text: 'string' }+`), shown as descriptive text. * An action object, shown as a clickable button, with the following properties: ** `+title+` (`+String+`): The label shown on the button. -** `+command+` (`+String+`): The editor command run when the button is selected. Selecting the button runs `+editor.execCommand(command, false, value)+`. Use one of the Quick Actions and Chat commands, or the core `+ToggleSidebar+` command, listed in xref:editor-command-identifiers.adoc#tinymceai[TinyMCE AI]. -** `+value+` (optional): The argument passed to the command. The accepted value matches the command, for example a language label for `+TinyMCEAIQuickActionTranslate+` or a `+{ prompt }+` object for `+TinyMCEAIChatPrompt+`. -** `+icon+` (optional `+String+`): The name of the icon shown on the button. When omitted, an icon is selected based on the command. +** `+command+` (`+String+`): The editor command run when the button is selected, using `+editor.execCommand(command, false, value)+`. This can be a Quick Action or Chat command, the core `+ToggleSidebar+` command, or any other registered editor command, such as `+Bold+`. For the AI command names, see xref:editor-command-identifiers.adoc#tinymceai[TinyMCE AI]. +** `+value+` (optional): The argument passed to the command. The accepted value matches the command, for example a language label for `+TinyMCEAIQuickActionTranslate+`, a `+{ prompt, displayedPrompt }+` object for `+TinyMCEAIChatPrompt+`, or a sidebar name such as `+'tinymceai-review'+` for `+ToggleSidebar+`. +** `+icon+` (optional `+String+`): The name of the icon shown on the button, using any editor icon identifier. When omitted, an icon is selected automatically based on the command. + +Text items and action buttons can be interleaved to group related actions under short headings. .Example [source,js] @@ -302,11 +304,18 @@ tinymce.init({ plugins: 'tinymceai', toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review', tinymceai_chat_welcome_actions: [ - 'Try one of these to get started:', + { text: 'Here are some actions to get started:' }, { title: 'Summarize the document', command: 'TinyMCEAIQuickActionsSummarize' }, { title: 'Continue writing', command: 'TinyMCEAIQuickActionContinueWriting' }, - { title: 'Translate to Swedish', command: 'TinyMCEAIQuickActionTranslate', value: 'swedish' }, - { title: 'Draft a reply', command: 'TinyMCEAIChatPrompt', value: { prompt: 'Draft a reply to this message.' } } + { title: 'Translate to Spanish', command: 'TinyMCEAIQuickActionTranslate', value: 'spanish' }, + { + title: 'Draft a reply', + command: 'TinyMCEAIChatPrompt', + value: { prompt: 'Draft a reply to this message in a professional tone.', displayedPrompt: 'Draft a reply' } + }, + { title: 'Review my document', command: 'ToggleSidebar', value: 'tinymceai-review' }, + { text: 'Other editor commands are also supported:' }, + { title: 'Bold', command: 'Bold', icon: 'bold' } ], // Required for authentication tinymceai_token_provider: () => { From 30b8151cd11e9b29970e51271bfe9407bc60edd2 Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Thu, 9 Jul 2026 14:54:50 +1000 Subject: [PATCH 3/3] Docs: TINYDOC-3528 - Add welcome actions to the TinyMCE AI chat live demo --- modules/ROOT/examples/live-demos/tinymceai/example.js | 8 ++++++++ modules/ROOT/examples/live-demos/tinymceai/index.js | 8 ++++++++ 2 files changed, 16 insertions(+) diff --git a/modules/ROOT/examples/live-demos/tinymceai/example.js b/modules/ROOT/examples/live-demos/tinymceai/example.js index be2e035af6..03786aa8b2 100644 --- a/modules/ROOT/examples/live-demos/tinymceai/example.js +++ b/modules/ROOT/examples/live-demos/tinymceai/example.js @@ -6,6 +6,14 @@ tinymce.init({ plugins: ['tinymceai', 'advlist', 'lists', 'link', 'autolink', 'table', 'wordcount'], toolbar: 'undo redo | tinymceai-chat ai-quickactions-translate tinymceai-review | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link', sidebar_show: 'tinymceai-chat', + tinymceai_chat_welcome_message: '

Welcome to TinyMCE AI. Pick an action below or type your own prompt.

', + tinymceai_chat_welcome_actions: [ + { text: 'Here are some actions to get started:' }, + { title: 'Summarize the document', command: 'TinyMCEAIQuickActionsSummarize' }, + { title: 'Continue writing', command: 'TinyMCEAIQuickActionContinueWriting' }, + { title: 'Translate to Spanish', command: 'TinyMCEAIQuickActionTranslate', value: 'spanish' }, + { title: 'Review my document', command: 'ToggleSidebar', value: 'tinymceai-review' } + ], tinymceai_token_provider: async () => { return fetch('/api/tinymceai-token', { credentials: 'include' }) .then(resp => resp.text()) diff --git a/modules/ROOT/examples/live-demos/tinymceai/index.js b/modules/ROOT/examples/live-demos/tinymceai/index.js index a5b7ebd3a4..c1b12a167a 100644 --- a/modules/ROOT/examples/live-demos/tinymceai/index.js +++ b/modules/ROOT/examples/live-demos/tinymceai/index.js @@ -27,6 +27,14 @@ tinymce.init({ toolbar: 'undo redo | tinymceai-chat tinymceai-review ai-quickactions-translate spellchecker | styles | bold italic underline forecolor backcolor casechange | link uploadcare table addcomment | align bullist numlist checklist removeformat | code fullscreen help', quickbars_selection_toolbar: 'tinymceai-quickactions addcomment', sidebar_show: 'tinymceai-chat', + tinymceai_chat_welcome_message: '

Welcome to TinyMCE AI. Pick an action below or type your own prompt.

', + tinymceai_chat_welcome_actions: [ + { text: 'Here are some actions to get started:' }, + { title: 'Summarize the document', command: 'TinyMCEAIQuickActionsSummarize' }, + { title: 'Continue writing', command: 'TinyMCEAIQuickActionContinueWriting' }, + { title: 'Translate to Spanish', command: 'TinyMCEAIQuickActionTranslate', value: 'spanish' }, + { title: 'Review my document', command: 'ToggleSidebar', value: 'tinymceai-review' } + ], toolbar_mode: 'sliding', visual: false, images_file_types: 'jpeg,jpg,jpe,jfi,jif,jfif,png,gif,bmp,webp,svg',