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', 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..49d736a774 100644 --- a/modules/ROOT/partials/configuration/tinymceai_options.adoc +++ b/modules/ROOT/partials/configuration/tinymceai_options.adoc @@ -276,6 +276,54 @@ 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, 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] +---- +tinymce.init({ + selector: 'textarea', + plugins: 'tinymceai', + toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review', + 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: '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: () => { + return fetch('/api/token').then(r => r.json()); + } +}); +---- + [[tinymceai_tool_data_callback]] === `+tinymceai_tool_data_callback+`