Add "Open with… [LLM]" buttons (#2794)

* Add new docContet.js util

* Add new openLLM action

* Swap generic icon for ChatGPT with the official OpenAI logo from PhosphorIcons library

* Swap sparkle icon for Claude with a chat bubble icon, since sparkle is used for Kapa

* Add prompt localization for the top 10 most used languages

* Fix Claude incorrectly building translated prompt

* Better fix Claude handling of locales by adding dual English + localized prompt

* Ensure only Claude shows dual prompts

* Hide descriptions for Open with… buttons

* Update icon for Claude

* Fix icon position when no description provided

* Try to accomodate for both description and no desciption scenarii for icons placement

* Revert "Try to accomodate for both description and no desciption scenarii for icons placement"

This reverts commit cdb8d76.

* Simplify icons alignment fix

* Try to fix Claude's issue

* Fix query parameter for Claude

* Remove dual prompt in Claude now that we fixed the query param

* Refactor translation system and add many more locales

* Add aiPromptTemplates.js

* Add script for translated prompt validation

* Added many more languages

* Move docs to a README file

* Replace docs a better README

* Rename prompt validation script

Author: pwizla

docusaurus/scripts/validate-open-with-translated-prompts.js

@@ -0,0 +1,58 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+
+const PROMPT_FILE = path.join(__dirname, '..', 'src', 'components', 'AiToolbar', 'config', 'aiPromptTemplates.js');
+const REQUIRED_PLACEHOLDERS = ['{{url}}'];
+
+function loadPromptMap(filePath) {
+  const content = fs.readFileSync(filePath, 'utf8');
+  const match = content.match(/export const aiPromptTemplates = (\{[\s\S]*?\});/);
+  if (!match) {
+    throw new Error('Unable to locate aiPromptTemplates export.');
+  }
+  // eslint-disable-next-line no-new-func
+  const factory = new Function(`return (${match[1]});`);
+  return factory();
+}
+
+function main() {
+  try {
+    const prompts = loadPromptMap(PROMPT_FILE);
+    const languages = Object.keys(prompts);
+
+    if (languages.length === 0) {
+      throw new Error('No prompt translations found.');
+    }
+
+    for (const lang of languages) {
+      const value = prompts[lang];
+      if (typeof value !== 'string') {
+        throw new Error(`Prompt for language "${lang}" must be a string.`);
+      }
+
+      const trimmed = value.trim();
+      if (trimmed.length === 0) {
+        throw new Error(`Prompt for language "${lang}" is empty.`);
+      }
+
+      if (trimmed !== value) {
+        console.warn(`Warning: prompt for "${lang}" has leading/trailing whitespace.`);
+      }
+
+      for (const placeholder of REQUIRED_PLACEHOLDERS) {
+        if (!value.includes(placeholder)) {
+          throw new Error(`Prompt for "${lang}" is missing placeholder ${placeholder}.`);
+        }
+      }
+    }
+
+    console.log(`Validated ${languages.length} prompt translations.`);
+  } catch (error) {
+    console.error(error.message);
+    process.exit(1);
+  }
+}
+
+main();

docusaurus/src/components/AiToolbar/AiToolbar.jsx

@@ -124,7 +124,7 @@ const AiToolbar = () => {
               <button
                 key={action.id}
                 onClick={() => handleDropdownAction(action)}
-                className="ai-toolbar__dropdown-item"
+                className={`ai-toolbar__dropdown-item ${action.description ? '' : 'ai-toolbar__dropdown-item--no-description'}`}
                 title={action.description}
               >
                 <Icon 
@@ -151,4 +151,4 @@ const AiToolbar = () => {
   );
 };
 
-export default AiToolbar;
+export default AiToolbar;

docusaurus/src/components/AiToolbar/README.md

@@ -0,0 +1,54 @@
+---
+id: ai-toolbar-translations
+title: Update AI Toolbar Prompts
+---
+
+The AI toolbar (ChatGPT and Claude buttons) uses a set of translated prompt strings. If you want to tweak a translation or add a new language, use this guide.
+
+## Location
+
+- Edit `src/components/AiToolbar/config/aiPromptTemplates.js` in this repository.
+- Keys are ISO language tags (use lowercase, include region if needed, e.g. `pt-BR`).
+- Values are plain strings with placeholders like `{{url}}`.
+
+```js
+export const aiPromptTemplates = {
+  'en': 'Read from {{url}} so I can ask questions about it.',
+  'fr': 'Lis {{url}} pour que je puisse poser des questions à son sujet.',
+  // …
+};
+```
+
+## Contribution Rules
+
+1. **Keep placeholders**: `{{url}}` is mandatory so the current page URL is injected.
+2. **Preserve meaning**: Translate the English prompt faithfully; keep a neutral tone.
+3. **Avoid duplicates**: one entry per language tag.
+4. **Use UTF-8 characters** wherever possible; avoid HTML entities.
+
+## Testing Your Translation
+
+1. Override `navigator.language` via DevTools (Chrome Sensors panel or Firefox locale settings).
+2. Reload any docs page with the toolbar.
+3. Click “Open with ChatGPT/Claude” and confirm your translation appears in the prompt or clipboard.
+
+## Validation Script
+
+Before opening a pull request, run the placeholder check:
+
+```bash
+node scripts/validate-prompts.js
+# If Node isn’t available, run:
+python scripts/validate-prompts.py
+```
+
+The script ensures that each translation keeps the required placeholders and isn’t empty.
+
+## Adding a New Language
+
+1. Add your entry in `aiPromptTemplates.js`.
+2. Run the validation script.
+3. Include a screenshot or clip in your PR showing the translation in action (optional but helpful).
+4. Update this doc if you want to note any language-specific tips.
+
+Thanks for helping improve the AI tooling experience! 🙌

docusaurus/src/components/AiToolbar/actions/actionRegistry.js

@@ -1,26 +1,28 @@
 import { copyMarkdownAction } from './copyMarkdown';
 import { navigateAction } from './navigate';
+import { openLLMAction } from './openLLM';
 
 // Central registry of all available actions
 export const actionHandlers = {
   'copy-markdown': copyMarkdownAction,
-  'navigate': navigateAction,
+  navigate: navigateAction,
+  'open-llm': openLLMAction,
 };
 
 // Main function to execute an action
 export const executeAction = async (actionConfig, additionalContext = {}) => {
   const handler = actionHandlers[actionConfig.actionType];
-  
+
   if (!handler) {
     console.warn(`Unknown action type: ${actionConfig.actionType}`);
     return;
   }
-  
+
   const context = {
     ...actionConfig, // url, etc.
     ...additionalContext, // docId, docPath, updateActionState, closeDropdown, etc.
   };
-  
+
   try {
     await handler(context);
   } catch (error) {
@@ -38,28 +40,28 @@ export const getActionDisplay = (actionId, currentState = 'idle') => {
             icon: 'circle-notch',
             iconClasses: 'ph-bold spinning',
             label: 'Copying...',
-            className: 'ai-toolbar-button--loading'
+            className: 'ai-toolbar-button--loading',
           };
         case 'success':
           return {
             icon: 'check-circle',
             iconClasses: 'ph-fill',
             label: 'Copied!',
-            className: 'ai-toolbar-button--success'
+            className: 'ai-toolbar-button--success',
           };
         case 'error':
           return {
             icon: 'warning-circle',
             iconClasses: 'ph-fill',
             label: 'Copy failed',
-            className: 'ai-toolbar-button--error'
+            className: 'ai-toolbar-button--error',
           };
         default: // 'idle'
           return {
             icon: 'copy',
             iconClasses: 'ph-bold',
             label: 'Copy Markdown',
-            className: 'ai-toolbar-button--idle'
+            className: 'ai-toolbar-button--idle',
           };
       }
     default:
@@ -68,7 +70,7 @@ export const getActionDisplay = (actionId, currentState = 'idle') => {
         icon: 'question',
         iconClasses: 'ph-bold',
         label: 'Unknown',
-        className: 'ai-toolbar-button--idle'
+        className: 'ai-toolbar-button--idle',
       };
   }
-};
+};

docusaurus/src/components/AiToolbar/actions/copyMarkdown.js

@@ -1,62 +1,39 @@
+import { resolveDocContext, getRawMarkdownUrl } from '../utils/docContext';
+
 export const copyMarkdownAction = async (context) => {
   const { docId, docPath, updateActionState } = context;
-  
+
   try {
-    updateActionState('copy-markdown', 'loading');
-    
-    // Helper functions to get current document info from URL (reused from CopyMarkdownButton)
-    const getCurrentDocId = () => {
-      if (typeof window === 'undefined') return null;
-      const path = window.location.pathname;
-      // Remove leading/trailing slashes and split
-      const segments = path.replace(/^\/|\/$/g, '').split('/');
-      // For paths like /cms/api/rest or /cloud/getting-started/intro
-      if (segments.length >= 2) {
-        return segments.join('/');
-      }
-      return null;
-    };
-
-    const getCurrentDocPath = () => {
-      if (typeof window === 'undefined') return null;
-      const path = window.location.pathname;
-      // Convert URL path to docs file path
-      const cleanPath = path.replace(/^\/|\/$/g, '');
-      return cleanPath ? `docs/${cleanPath}.md` : null;
-    };
-
-    // Use props or try to get from current URL
-    const currentDocId = docId || getCurrentDocId();
-    const currentDocPath = docPath || getCurrentDocPath();
-    
-    if (!currentDocId && !currentDocPath) {
+    if (updateActionState) {
+      updateActionState('copy-markdown', 'loading');
+    }
+
+    const { docId: resolvedDocId, docPath: resolvedDocPath } = resolveDocContext(docId, docPath);
+    const markdownUrl = getRawMarkdownUrl({ docId: resolvedDocId, docPath: resolvedDocPath });
+
+    if (!markdownUrl) {
       throw new Error('Unable to determine document path');
     }
 
-    // Build the raw markdown URL from GitHub
-    const baseUrl = 'https://raw.githubusercontent.com/strapi/documentation/main/docusaurus';
-    const markdownUrl = currentDocPath 
-      ? `${baseUrl}/${currentDocPath}` 
-      : `${baseUrl}/docs/${currentDocId}.md`;
-    
-    // Fetch the raw markdown content
     const response = await fetch(markdownUrl);
-    
+
     if (!response.ok) {
       throw new Error(`Failed to fetch markdown: ${response.status}`);
     }
-    
+
     const markdownContent = await response.text();
-    
-    // Copy to clipboard
     await navigator.clipboard.writeText(markdownContent);
-    
-    updateActionState('copy-markdown', 'success');
-    setTimeout(() => updateActionState('copy-markdown', 'idle'), 3000);
-    
+
+    if (updateActionState) {
+      updateActionState('copy-markdown', 'success');
+      setTimeout(() => updateActionState('copy-markdown', 'idle'), 3000);
+    }
   } catch (error) {
     console.error('Error copying markdown:', error);
-    updateActionState('copy-markdown', 'error');
-    setTimeout(() => updateActionState('copy-markdown', 'idle'), 3000);
+
+    if (updateActionState) {
+      updateActionState('copy-markdown', 'error');
+      setTimeout(() => updateActionState('copy-markdown', 'idle'), 3000);
+    }
   }
-};
+};

docusaurus/src/components/AiToolbar/actions/openLLM.js

@@ -0,0 +1,55 @@
+import {
+  buildPromptFromTemplate,
+  buildUrlWithPrompt,
+  selectLocalizedTemplate,
+} from '../utils/docContext';
+
+const DEFAULT_PROMPT_TEMPLATE = 'Read from {{url}} so I can ask questions about it.';
+
+const resolveTemplate = (defaultTemplate, selectedTemplate) => {
+  return selectedTemplate || defaultTemplate || DEFAULT_PROMPT_TEMPLATE;
+};
+
+export const openLLMAction = async (context) => {
+  const {
+    targetUrl,
+    promptTemplate = DEFAULT_PROMPT_TEMPLATE,
+    localizedPromptTemplates = {},
+    copyPromptToClipboard = false,
+    promptParam = 'prompt',
+    openIn = '_blank',
+    closeDropdown,
+  } = context;
+
+  if (!targetUrl) {
+    console.error('open-llm action requires a targetUrl');
+    return;
+  }
+
+  const selectedTemplate = selectLocalizedTemplate(promptTemplate, localizedPromptTemplates);
+  const template = resolveTemplate(promptTemplate, selectedTemplate);
+  const prompt = buildPromptFromTemplate(template);
+  const fullUrl = buildUrlWithPrompt({
+    targetUrl,
+    prompt,
+    promptParam,
+  });
+
+  if (
+    copyPromptToClipboard &&
+    typeof navigator !== 'undefined' &&
+    navigator.clipboard?.writeText
+  ) {
+    try {
+      await navigator.clipboard.writeText(prompt);
+    } catch (error) {
+      console.warn('Unable to copy prompt to clipboard:', error);
+    }
+  }
+
+  window.open(fullUrl || targetUrl, openIn);
+
+  if (closeDropdown) {
+    closeDropdown();
+  }
+};