TINYDOC-3528: Added configurable welcome actions to the TinyMCE AI Chat empty state

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: '<p>Welcome to TinyMCE AI. Pick an action below or type your own prompt.</p>',
+  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())

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: '<p>Welcome to TinyMCE AI. Pick an action below or type your own prompt.</p>',
+  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',

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

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+`