Add AI Toolbar (#2673)

* Add DebugComponent * Add first skeleton of AiToolbar component and its logic * Add Copy Markdown button logic and style and test it on CMS intro page * Improve button styles * Swizzle heading component to include AiToolbar in all h1s * Add LLMs buttons * Fix dark mode * Remove Copy Markdown button from secondary TOC * Remove LLM txt files from footer * Move AiToolbar to left * Add special hook to ensure badges are displayed before AiToolbar * Add missing h1s to some pages so that the AiToolbar is displayed, because it's part of headings * Fix margin around badges container * Add description to hook * Update tip in CMS intro. page

Author: pwizla

docusaurus/docs/cloud/getting-started/cloud-fundamentals.md

@@ -8,7 +8,7 @@ tags:
 - concepts
 ---
 
-# Strapi Cloud fundamentals <UpdatedBadge />
+# Strapi Cloud fundamentals
 
 Before going any further into this Strapi Cloud documentation, we recommend you to acknowledge the main concepts below. They will help you to understand how Strapi Cloud works, and ensure a smooth Strapi Cloud experience.
 

docusaurus/docs/cms/admin-panel-customization/bundlers.md

@@ -13,6 +13,8 @@ tags:
 
 import FeedbackCallout from '/docs/snippets/backend-customization-feedback-cta.md'
 
+# Admin panel bundlers
+
 Strapi's [admin panel](/cms/admin-panel-customization) is a React-based single-page application that encapsulates all the features and installed plugins of a Strapi application. 2 different bundlers can be used with your Strapi 5 application, [Vite](#vite) (the default one) and [webpack](#webpack). Both bundlers can be configured to suit your needs.
 
 :::info

docusaurus/docs/cms/api/document.md

@@ -16,6 +16,8 @@ tags:
 
 <div className="document-concept-page custom-mermaid-layout">
 
+# Documents
+
 A **document** in Strapi 5 is an API-only concept. A document represents all the different variations of content for a given entry of a content-type.
 
 A single type contains a unique document, and a collection type can contain several documents.

docusaurus/docs/cms/backend-customization.md

@@ -19,6 +19,8 @@ tags:
 
 <div className="custom-mermaid-layout">
 
+# Backend customization
+
 :::strapi Disambiguation: Strapi back end
 As a headless CMS, the Strapi software as a whole can be considered as the "back end" of your website or application.
 But the Strapi software itself includes 2 different parts:

docusaurus/docs/cms/intro.md

@@ -12,17 +12,6 @@ tags:
 
 # Welcome to the Strapi CMS Documentation!
 
-<!--
-<SubtleCallout title="Strapi CMS & Strapi Cloud docs" emoji="📍">
-
-There are 2 Strapi documentations, one for each Strapi product:
-
-- <Icon name="feather" /> The **CMS documentation**, that you're currently reading, which contains all the information related to a Strapi 5 project (installation, setup, deployment, content management in admin panel, etc).
-- <Icon name="cloud" /> The **[Cloud documentation](/cloud/intro)**, which is about deploying your Strapi application to Strapi Cloud and managing your Strapi Cloud projects and settings.
-
-</SubtleCallout>
--->
-
 The Strapi CMS documentation focuses on Strapi 5 and will take you through the complete journey of your Strapi 5 project. From the technical information related to the setup, advanced usage, customization and update of your project, to the management of the admin panel and its content and users.
 
 <ThemedImage
@@ -66,7 +55,7 @@ The table of content of the Strapi CMS documentation displays 7 main sections in
 - If you prefer learning more about Strapi while looking at the project code structure, you can use the interactive [project structure](/cms/project-structure) page.
 - If demos are more your thing, feel free to watch the <ExternalLink to="https://youtu.be/zd0_S_FPzKg" text="video demo"/>, or you can request a <ExternalLink to="https://strapi.io/demo" text="live demo"/>.
 - Try our AI assistant: Click or tap the **Ask AI** button and ask your questions using natural language. Watch it answer you in real time, then read recommended sources for more details.
-- To help you integrate Strapi Docs with your favorite AI models, you can use the **Copy Markdown** button or visit the [`llms.txt`](/llms.txt) and [`llms-full.txt`](/llms-full.txt) pages.
+- To help you integrate Strapi Docs with your favorite AI models, you can use the dropdown at the top of each page to **Copy Markdown** or visit the [`llms.txt`](/llms.txt) and [`llms-full.txt`](/llms-full.txt) pages.
 :::
 
 :::strapi Information for beginner developers

docusaurus/docusaurus.config.js

@@ -264,14 +264,6 @@ const config = {
  {
  title: 'Additional resources',
  items: [
- {
- label: 'LLMs.txt',
- href: 'https://docs.strapi.io/llms.txt',
- },
- {
- label: 'LLMs-full.txt',
- href: 'https://docs.strapi.io/llms-full.txt',
- },
  {
  label: 'v4 Docs',
  href: 'https://docs-v4.strapi.io',

docusaurus/src/components/AiToolbar/AiToolbar.jsx

@@ -0,0 +1,154 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { getPrimaryAction, getDropdownActions } from './utils/aiToolsHelpers';
+import { executeAction, getActionDisplay } from './actions/actionRegistry';
+import Icon from '../Icon';
+
+const AiToolbar = () => {
+ const [actionStates, setActionStates] = useState({
+ 'copy-markdown': 'idle'
+ });
+ const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+ const dropdownRef = useRef(null);
+
+ const primaryAction = getPrimaryAction();
+ const dropdownActions = getDropdownActions();
+
+ // Close dropdown when clicking outside
+ useEffect(() => {
+ const handleClickOutside = (event) => {
+ if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+ setIsDropdownOpen(false);
+ }
+ };
+
+ document.addEventListener('mousedown', handleClickOutside);
+ return () => {
+ document.removeEventListener('mousedown', handleClickOutside);
+ };
+ }, []);
+
+ // Function to update action state
+ const updateActionState = (actionId, state) => {
+ setActionStates(prev => ({
+ ...prev,
+ [actionId]: state
+ }));
+ };
+
+ // Function to close dropdown
+ const closeDropdown = () => {
+ setIsDropdownOpen(false);
+ };
+
+ // Handle primary action click
+ const handlePrimaryAction = async () => {
+ if (!primaryAction) {
+ console.error('No primary action configured');
+ return;
+ }
+
+ const context = {
+ updateActionState,
+ closeDropdown,
+ docId: null, // Will be auto-detected by the action
+ docPath: null, // Will be auto-detected by the action
+ };
+
+ await executeAction(primaryAction, context);
+ };
+
+ // Handle dropdown action click
+ const handleDropdownAction = async (action) => {
+ const context = {
+ updateActionState,
+ closeDropdown,
+ url: action.url, // For navigate actions
+ };
+
+ await executeAction(action, context);
+ };
+
+ // Toggle dropdown
+ const toggleDropdown = () => {
+ setIsDropdownOpen(!isDropdownOpen);
+ };
+
+ // Don't render if no primary action
+ if (!primaryAction) {
+ return null;
+ }
+
+ const currentState = actionStates[primaryAction.id] || 'idle';
+ const displayConfig = getActionDisplay(primaryAction.id, currentState);
+ const isDisabled = currentState === 'loading' || currentState === 'success';
+
+ return (
+ <div className="ai-toolbar">
+ <div className="ai-toolbar__container" ref={dropdownRef}>
+ <button
+ onClick={handlePrimaryAction}
+ disabled={isDisabled}
+ className={`ai-toolbar__button ${displayConfig.className}`}
+ title={primaryAction.description}
+ >
+ <Icon 
+ name={displayConfig.icon} 
+ classes={displayConfig.iconClasses}
+ color={currentState === 'success' ? 'var(--strapi-success-700)' : 'inherit'}
+ />
+ <span className="ai-toolbar__button-text">
+ {displayConfig.label}
+ </span>
+ </button>
+ 
+ {/* Dropdown button */}
+ <button
+ onClick={toggleDropdown}
+ className={`ai-toolbar__dropdown-trigger ${isDropdownOpen ? 'ai-toolbar__dropdown-trigger--open' : ''}`}
+ title="More AI options"
+ style={{
+ borderColor: currentState === 'success' ? 'var(--strapi-neutral-200)' : undefined
+ }}
+ >
+ <Icon 
+ name="caret-down" 
+ classes="ph-bold"
+ color="inherit"
+ />
+ </button>
+
+ {/* Dropdown menu */}
+ {isDropdownOpen && (
+ <div className="ai-toolbar__dropdown">
+ {dropdownActions.map((action) => (
+ <button
+ key={action.id}
+ onClick={() => handleDropdownAction(action)}
+ className="ai-toolbar__dropdown-item"
+ title={action.description}
+ >
+ <Icon 
+ name={action.icon} 
+ classes="ph-bold"
+ color="inherit"
+ />
+ <div className="ai-toolbar__dropdown-item-content">
+ <span className="ai-toolbar__dropdown-item-label">
+ {action.label}
+ </span>
+ {action.description && (
+ <span className="ai-toolbar__dropdown-item-description">
+ {action.description}
+ </span>
+ )}
+ </div>
+ </button>
+ ))}
+ </div>
+ )}
+ </div>
+ </div>
+ );
+};
+
+export default AiToolbar;

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

@@ -0,0 +1,74 @@
+import { copyMarkdownAction } from './copyMarkdown';
+import { navigateAction } from './navigate';
+
+// Central registry of all available actions
+export const actionHandlers = {
+ 'copy-markdown': copyMarkdownAction,
+ 'navigate': navigateAction,
+};
+
+// 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) {
+ console.error(`Error executing action ${actionConfig.actionType}:`, error);
+ }
+};
+
+// Utility to get display information based on action state
+export const getActionDisplay = (actionId, currentState = 'idle') => {
+ switch (actionId) {
+ case 'copy-markdown':
+ switch (currentState) {
+ case 'loading':
+ return {
+ icon: 'circle-notch',
+ iconClasses: 'ph-bold spinning',
+ label: 'Copying...',
+ className: 'ai-toolbar-button--loading'
+ };
+ case 'success':
+ return {
+ icon: 'check-circle',
+ iconClasses: 'ph-fill',
+ label: 'Copied!',
+ className: 'ai-toolbar-button--success'
+ };
+ case 'error':
+ return {
+ icon: 'warning-circle',
+ iconClasses: 'ph-fill',
+ label: 'Copy failed',
+ className: 'ai-toolbar-button--error'
+ };
+ default: // 'idle'
+ return {
+ icon: 'copy',
+ iconClasses: 'ph-bold',
+ label: 'Copy Markdown',
+ className: 'ai-toolbar-button--idle'
+ };
+ }
+ default:
+ // For other actions, just return their base configuration
+ return {
+ icon: 'question',
+ iconClasses: 'ph-bold',
+ label: 'Unknown',
+ className: 'ai-toolbar-button--idle'
+ };
+ }
+};

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

@@ -0,0 +1,62 @@
+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) {
+ 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);
+ 
+ } catch (error) {
+ console.error('Error copying markdown:', error);
+ updateActionState('copy-markdown', 'error');
+ setTimeout(() => updateActionState('copy-markdown', 'idle'), 3000);
+ }
+};

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

@@ -0,0 +1,16 @@
+export const navigateAction = (context) => {
+ const { url, closeDropdown } = context;
+ 
+ if (!url) {
+ console.error('Navigate action requires a URL');
+ return;
+ }
+ 
+ // Open URL in new tab
+ window.open(url, '_blank');
+ 
+ // Close dropdown immediately for navigation actions
+ if (closeDropdown) {
+ closeDropdown();
+ }
+};