@newfold/wp-module-ai-chat 1.0.0

package/src/components/ui/BluBetaHeading.jsx

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from "@wordpress/i18n";
+
+/**
+ * BluBetaHeading Component
+ *
+ * Single solid dark blue BETA badge for the chat header (matches screenshot and
+ * editor-chat: AILogo + "Blu Chat" plain text + this BETA pill).
+ *
+ * @return {JSX.Element} BETA badge span for the chat header.
+ */
+const BluBetaHeading = () => (
+	<span className="nfd-ai-chat-blu-beta-badge">{__("BETA", "wp-module-ai-chat")}</span>
+);
+
+export default BluBetaHeading;

package/src/components/ui/ErrorAlert.jsx

@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import { CircleX } from "lucide-react";
+
+/**
+ * ErrorAlert Component
+ *
+ * A reusable error alert component that displays error messages
+ * in a red box with an exclamation mark icon.
+ *
+ * @param {Object} props           - The component props.
+ * @param {string} props.message   - The error message to display.
+ * @param {string} props.className - Additional CSS classes (optional).
+ * @return {JSX.Element} The ErrorAlert component.
+ */
+const ErrorAlert = ({ message, className = "" }) => {
+	return (
+		<div className={`nfd-ai-chat-error-alert ${className}`}>
+			<div className="nfd-ai-chat-error-alert__icon">
+				<CircleX width={16} height={16} />
+			</div>
+			<div className="nfd-ai-chat-error-alert__content">
+				<div className="nfd-ai-chat-error-alert__message">{message}</div>
+			</div>
+		</div>
+	);
+};
+
+export default ErrorAlert;

package/src/components/ui/HeaderBar.jsx

@@ -0,0 +1,34 @@
+/**
+ * HeaderBar Component
+ *
+ * Shared header bar layout with configurable title, badge, and action slots.
+ * Used by ChatHeader (help center / modal) and SidebarHeader (editor chat).
+ *
+ * @param {Object}                           props                - Component props.
+ * @param {string|import('react').ReactNode} [props.title]        - Title content (e.g. "Blu Chat").
+ * @param {import('react').ReactNode}        [props.badge]        - Badge node (e.g. BETA pill).
+ * @param {import('react').ReactNode}        [props.logo]         - Optional logo/icon left of title.
+ * @param {import('react').ReactNode}        [props.leftActions]  - Optional actions on the left side of the actions area.
+ * @param {import('react').ReactNode}        [props.rightActions] - Actions on the right (e.g. New chat, Close).
+ * @param {string}                           [props.className]    - Optional extra class for the root.
+ * @return {JSX.Element} Shared header bar with configurable title, badge, and action slots.
+ */
+const HeaderBar = ({ title, badge, logo, leftActions, rightActions, className = "" }) => (
+	<div className={`nfd-ai-chat-header ${className}`.trim()} role="banner">
+		<div className="nfd-ai-chat-header__brand">
+			{logo}
+			{title !== undefined && title !== null && (
+				<span className="nfd-ai-chat-header__title">{title}</span>
+			)}
+			{badge}
+		</div>
+		{(leftActions || rightActions) && (
+			<div className="nfd-ai-chat-header__actions">
+				{leftActions}
+				{rightActions}
+			</div>
+		)}
+	</div>
+);
+
+export default HeaderBar;

package/src/components/ui/SuggestionButton.jsx

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import { Button } from "@wordpress/components";
+
+/**
+ * SuggestionButton Component
+ *
+ * A reusable suggestion button component that can be used in various contexts.
+ * Takes an icon, text, and onClick action as parameters.
+ *
+ * @param {Object}      props           - The component props.
+ * @param {JSX.Element} props.icon      - The icon element to display.
+ * @param {string}      props.text      - The text to display.
+ * @param {Function}    props.onClick   - The function to call when clicked.
+ * @param {string}      props.className - Additional CSS classes (optional).
+ * @return {JSX.Element} The SuggestionButton component.
+ */
+const SuggestionButton = ({ icon, text, onClick, className = "" }) => {
+	return (
+		<Button className={`nfd-ai-chat-suggestion ${className}`} onClick={onClick}>
+			<div className="nfd-ai-chat-suggestion__icon">{icon}</div>
+			<div className="nfd-ai-chat-suggestion__text">{text}</div>
+		</Button>
+	);
+};
+
+export default SuggestionButton;

package/src/components/ui/ToolExecutionList.jsx

@@ -0,0 +1,264 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from "@wordpress/element";
+import { __ } from "@wordpress/i18n";
+
+/**
+ * External dependencies
+ */
+import { CheckCircle, ChevronDown, ChevronRight, XCircle } from "lucide-react";
+import classnames from "classnames";
+
+/**
+ * Internal dependencies
+ */
+import { getToolDetails } from "../../utils/nfdAgents/typingIndicatorToolDisplay";
+
+/**
+ * Safely convert a value to a string for display
+ *
+ * @param {*} value The value to convert
+ * @return {string|null} String representation or null
+ */
+const safeString = (value) => {
+	if (value === null || value === undefined) {
+		return null;
+	}
+	if (typeof value === "string") {
+		return value;
+	}
+	if (typeof value === "number" || typeof value === "boolean") {
+		return String(value);
+	}
+	// Don't render objects - return null instead
+	return null;
+};
+
+/**
+ * Parse tool result to get a human-readable summary
+ *
+ * @param {Object} result   The tool result object
+ * @param {string} toolName The tool name
+ * @return {string|null} Summary string or null
+ */
+const getResultSummary = (result, toolName) => {
+	if (!result || result.isError) {
+		return safeString(result?.error);
+	}
+
+	try {
+		// Result is typically an array with { type: "text", text: "..." }
+		let data = result.result;
+		if (Array.isArray(data) && data.length > 0 && data[0].text) {
+			data = JSON.parse(data[0].text);
+		} else if (typeof data === "string") {
+			data = JSON.parse(data);
+		}
+
+		// If data is not an object at this point, we can't process it
+		if (!data || typeof data !== "object") {
+			return null;
+		}
+
+		// Handle update results
+		if (toolName?.includes("update")) {
+			if (data.updatedColors && Array.isArray(data.updatedColors)) {
+				const colors = data.updatedColors;
+				if (colors.length <= 3) {
+					return colors.map((c) => `${c.name || c.slug}: ${c.color}`).join(", ");
+				}
+				return `${colors.length} colors updated`;
+			}
+			if (data.message && typeof data.message === "string") {
+				return data.message;
+			}
+		}
+
+		// Handle block editor tool results
+		if (toolName?.includes("edit-block") || toolName?.includes("edit_block")) {
+			if (data.message && typeof data.message === "string") {
+				return data.message;
+			}
+			return data.success ? "Block updated" : "Update failed";
+		}
+
+		if (toolName?.includes("add-section") || toolName?.includes("add_section")) {
+			if (data.message && typeof data.message === "string") {
+				return data.message;
+			}
+			return data.success ? "Section added" : "Add failed";
+		}
+
+		if (toolName?.includes("delete-block") || toolName?.includes("delete_block")) {
+			if (data.message && typeof data.message === "string") {
+				return data.message;
+			}
+			return data.success ? "Block removed" : "Delete failed";
+		}
+
+		if (toolName?.includes("move-block") || toolName?.includes("move_block")) {
+			if (data.message && typeof data.message === "string") {
+				return data.message;
+			}
+			return data.success ? "Block moved" : "Move failed";
+		}
+
+		// Handle get/read results
+		if (toolName?.includes("get") || toolName?.includes("read")) {
+			// Check for palette data
+			if (data.color?.palette) {
+				const palette = data.color.palette;
+				const customCount = palette.custom?.length || 0;
+				const themeCount = palette.theme?.length || 0;
+				if (customCount || themeCount) {
+					return `Found ${customCount + themeCount} colors`;
+				}
+			}
+			// Check for typography
+			if (data.typography) {
+				const fontFamilies = data.typography.fontFamilies?.length || 0;
+				const fontSizes = data.typography.fontSizes?.length || 0;
+				const parts = [];
+				if (fontFamilies) {
+					parts.push(`${fontFamilies} font families`);
+				}
+				if (fontSizes) {
+					parts.push(`${fontSizes} sizes`);
+				}
+				if (parts.length) {
+					return parts.join(", ");
+				}
+			}
+			// Generic message - only if it's a string
+			if (data.message && typeof data.message === "string") {
+				return data.message;
+			}
+		}
+
+		// Fallback for styles ID
+		if (data.id && toolName?.includes("id")) {
+			return `ID: ${data.id}`;
+		}
+
+		return null;
+	} catch {
+		return null;
+	}
+};
+
+/**
+ * Single tool execution item
+ *
+ * @param {Object}      props         - The component props.
+ * @param {Object}      props.tool    - The tool object.
+ * @param {boolean}     props.isError - Whether the tool had an error.
+ * @param {Object|null} props.result  - The tool result.
+ * @return {JSX.Element} The item component.
+ */
+const ToolExecutionItem = ({ tool, isError, result }) => {
+	const details = getToolDetails(tool.name, tool.arguments);
+	const summary = getResultSummary(result, tool.name);
+
+	return (
+		<div
+			className={classnames("nfd-ai-chat-tool-execution__item", {
+				"nfd-ai-chat-tool-execution__item--complete": !isError,
+				"nfd-ai-chat-tool-execution__item--error": isError,
+			})}
+		>
+			<div className="nfd-ai-chat-tool-execution__item-header">
+				{isError ? (
+					<XCircle
+						className="nfd-ai-chat-tool-execution__icon nfd-ai-chat-tool-execution__icon--error"
+						size={12}
+					/>
+				) : (
+					<CheckCircle
+						className="nfd-ai-chat-tool-execution__icon nfd-ai-chat-tool-execution__icon--success"
+						size={12}
+					/>
+				)}
+				<span className="nfd-ai-chat-tool-execution__item-title">{details.title}</span>
+				{details.params && (
+					<span className="nfd-ai-chat-tool-execution__item-params">{details.params}</span>
+				)}
+			</div>
+			{summary && <div className="nfd-ai-chat-tool-execution__item-summary">{summary}</div>}
+		</div>
+	);
+};
+
+/**
+ * ToolExecutionList Component
+ *
+ * Displays a collapsible list of executed tools using the same styling
+ * as the typing indicator's tool execution view.
+ *
+ * @param {Object} props               - The component props.
+ * @param {Array}  props.executedTools - List of executed tools.
+ * @param {Array}  props.toolResults   - Results from tool executions.
+ * @return {JSX.Element} The ToolExecutionList component.
+ */
+const ToolExecutionList = ({ executedTools = [], toolResults = [] }) => {
+	const [isExpanded, setIsExpanded] = useState(false);
+
+	if (!executedTools || executedTools.length === 0) {
+		return null;
+	}
+
+	// Create a map of results by tool ID for quick lookup
+	const resultsMap = new Map();
+	if (toolResults && Array.isArray(toolResults)) {
+		toolResults.forEach((result) => {
+			if (result.id) {
+				resultsMap.set(result.id, result);
+			}
+		});
+	}
+
+	const hasErrors = executedTools.some((tool) => tool.isError);
+	const totalTools = executedTools.length;
+
+	return (
+		<div
+			className={classnames("nfd-ai-chat-tool-execution", {
+				"nfd-ai-chat-tool-execution--collapsed": !isExpanded,
+			})}
+		>
+			<button
+				type="button"
+				className="nfd-ai-chat-tool-execution__header"
+				onClick={() => setIsExpanded(!isExpanded)}
+				aria-expanded={isExpanded ? "true" : "false"}
+			>
+				{isExpanded ? (
+					<ChevronDown className="nfd-ai-chat-tool-execution__chevron" size={12} />
+				) : (
+					<ChevronRight className="nfd-ai-chat-tool-execution__chevron" size={12} />
+				)}
+				<span>
+					{hasErrors
+						? __("Some actions failed", "wp-module-ai-chat")
+						: __("Actions completed", "wp-module-ai-chat")}
+				</span>
+				<span className="nfd-ai-chat-tool-execution__header-count">({totalTools})</span>
+			</button>
+
+			{isExpanded && (
+				<div className="nfd-ai-chat-tool-execution__list">
+					{executedTools.map((tool, index) => (
+						<ToolExecutionItem
+							key={tool.id || `tool-${index}`}
+							tool={tool}
+							isError={tool.isError}
+							result={resultsMap.get(tool.id)}
+						/>
+					))}
+				</div>
+			)}
+		</div>
+	);
+};
+
+export default ToolExecutionList;

package/src/components/ui/TypingIndicator.jsx

@@ -0,0 +1,268 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from "@wordpress/element";
+import { __ } from "@wordpress/i18n";
+import { TYPING_STATUS } from "../../constants/nfdAgents/typingStatus";
+
+/**
+ * Internal dependencies
+ */
+import { getToolDetails } from "../../utils/nfdAgents/typingIndicatorToolDisplay";
+
+/**
+ * External dependencies
+ */
+import { Loader2, CheckCircle, XCircle, Sparkles, ChevronDown, ChevronRight } from "lucide-react";
+import classnames from "classnames";
+
+/** Status key → user-facing label for the simple typing state (single place for copy; i18n-ready). */
+const STATUS_LABELS = {
+	[TYPING_STATUS.PROCESSING]: __("Processing…", "wp-module-ai-chat"),
+	[TYPING_STATUS.CONNECTING]: __("Getting your site ready…", "wp-module-ai-chat"),
+	[TYPING_STATUS.WS_CONNECTING]: __("Connecting…", "wp-module-ai-chat"),
+	[TYPING_STATUS.TOOL_CALL]: __("Looking this up…", "wp-module-ai-chat"),
+	[TYPING_STATUS.WORKING]: __("Almost there…", "wp-module-ai-chat"),
+	[TYPING_STATUS.RECEIVED]: __("Message received", "wp-module-ai-chat"),
+	[TYPING_STATUS.GENERATING]: __("Thinking…", "wp-module-ai-chat"),
+	[TYPING_STATUS.SUMMARIZING]: __("Summarizing results", "wp-module-ai-chat"),
+	[TYPING_STATUS.COMPLETED]: __("Processing", "wp-module-ai-chat"),
+	[TYPING_STATUS.FAILED]: __("Error occurred", "wp-module-ai-chat"),
+};
+
+/**
+ * Single tool execution item in the list
+ *
+ * @param {Object}  props            - The component props.
+ * @param {Object}  props.tool       - The tool object with name and arguments.
+ * @param {boolean} props.isActive   - Whether the tool is active.
+ * @param {string}  props.progress   - The progress message.
+ * @param {boolean} props.isComplete - Whether the tool is complete.
+ * @param {boolean} props.isError    - Whether the tool is in error.
+ * @return {JSX.Element} The ToolExecutionItem component.
+ */
+const ToolExecutionItem = ({ tool, isActive, progress, isComplete, isError }) => {
+	const details = getToolDetails(tool.name, tool.arguments);
+
+	const getIcon = () => {
+		if (isError) {
+			return (
+				<XCircle
+					className="nfd-ai-chat-tool-execution__icon nfd-ai-chat-tool-execution__icon--error"
+					size={12}
+				/>
+			);
+		}
+		if (isComplete) {
+			return (
+				<CheckCircle
+					className="nfd-ai-chat-tool-execution__icon nfd-ai-chat-tool-execution__icon--success"
+					size={12}
+				/>
+			);
+		}
+		if (isActive) {
+			return (
+				<Loader2
+					className="nfd-ai-chat-tool-execution__icon nfd-ai-chat-tool-execution__icon--active"
+					size={12}
+				/>
+			);
+		}
+		return (
+			<Sparkles
+				className="nfd-ai-chat-tool-execution__icon nfd-ai-chat-tool-execution__icon--pending"
+				size={12}
+			/>
+		);
+	};
+
+	return (
+		<div
+			className={classnames("nfd-ai-chat-tool-execution__item", {
+				"nfd-ai-chat-tool-execution__item--active": isActive,
+				"nfd-ai-chat-tool-execution__item--complete": isComplete,
+				"nfd-ai-chat-tool-execution__item--error": isError,
+			})}
+		>
+			<div className="nfd-ai-chat-tool-execution__item-header">
+				{getIcon()}
+				<span className="nfd-ai-chat-tool-execution__item-title">{details.title}</span>
+				{details.params && (
+					<span className="nfd-ai-chat-tool-execution__item-params">{details.params}</span>
+				)}
+			</div>
+			{isActive && progress && (
+				<div className="nfd-ai-chat-tool-execution__item-progress">{progress}</div>
+			)}
+		</div>
+	);
+};
+
+/**
+ * TypingIndicator Component
+ *
+ * Displays an animated typing indicator with spinner and real-time progress.
+ *
+ * @param {Object} props                - The component props.
+ * @param {string} props.status         - The current status.
+ * @param {Object} props.activeToolCall - The currently executing tool call.
+ * @param {string} props.toolProgress   - Real-time progress message.
+ * @param {Array}  props.executedTools  - List of already executed tools.
+ * @param {Array}  props.pendingTools   - List of pending tools to execute.
+ * @return {JSX.Element} The TypingIndicator component.
+ */
+const TypingIndicator = ({
+	status = null,
+	activeToolCall = null,
+	toolProgress = null,
+	executedTools = [],
+	pendingTools = [],
+}) => {
+	const [isExpanded, setIsExpanded] = useState(true);
+	const isExecuting = !!activeToolCall;
+	// Show "summarizing" state when waiting between tool batch and final response.
+	const isBetweenBatches =
+		!isExecuting && status === TYPING_STATUS.SUMMARIZING && executedTools.length > 0;
+
+	useEffect(() => {
+		if (isExecuting || isBetweenBatches) {
+			setIsExpanded(true);
+		}
+	}, [isExecuting, isBetweenBatches]);
+
+	const getStatusText = () => {
+		return STATUS_LABELS[status] ?? __("Thinking…", "wp-module-ai-chat");
+	};
+
+	// Show expandable tool list when any tools are active, done, or queued.
+	const hasToolActivity = activeToolCall || executedTools.length > 0 || pendingTools.length > 0;
+	const totalTools = executedTools.length + (activeToolCall ? 1 : 0) + pendingTools.length;
+
+	const renderHeaderLabel = () => {
+		if (isExecuting) {
+			return (
+				<>
+					<span>{__("Executing actions", "wp-module-ai-chat")}</span>
+					{activeToolCall.total > 1 && (
+						<span className="nfd-ai-chat-tool-execution__header-count">
+							({activeToolCall.index}/{activeToolCall.total})
+						</span>
+					)}
+				</>
+			);
+		}
+		if (isBetweenBatches) {
+			return (
+				<>
+					<Loader2
+						className="nfd-ai-chat-tool-execution__icon nfd-ai-chat-tool-execution__icon--active"
+						size={12}
+					/>
+					<span>{__("Processing", "wp-module-ai-chat")}</span>
+					<span className="nfd-ai-chat-tool-execution__header-count">({executedTools.length})</span>
+				</>
+			);
+		}
+		return (
+			<>
+				<span>{__("Actions completed", "wp-module-ai-chat")}</span>
+				<span className="nfd-ai-chat-tool-execution__header-count">({totalTools})</span>
+			</>
+		);
+	};
+
+	if (hasToolActivity) {
+		return (
+			<div className="nfd-ai-chat-message nfd-ai-chat-message--assistant">
+				<div className="nfd-ai-chat-message__content">
+					<div
+						className={classnames("nfd-ai-chat-tool-execution", {
+							"nfd-ai-chat-tool-execution--collapsed": !isExpanded,
+						})}
+					>
+						<button
+							type="button"
+							className="nfd-ai-chat-tool-execution__header"
+							onClick={() => setIsExpanded(!isExpanded)}
+							aria-expanded={isExpanded ? "true" : "false"}
+						>
+							{isExpanded ? (
+								<ChevronDown className="nfd-ai-chat-tool-execution__chevron" size={12} />
+							) : (
+								<ChevronRight className="nfd-ai-chat-tool-execution__chevron" size={12} />
+							)}
+
+							{renderHeaderLabel()}
+						</button>
+
+						{isExpanded && (
+							<div className="nfd-ai-chat-tool-execution__list">
+								{executedTools.map((tool, index) => (
+									<ToolExecutionItem
+										key={tool.id || `executed-${index}`}
+										tool={tool}
+										isActive={false}
+										isComplete={!tool.isError}
+										isError={tool.isError}
+										progress={null}
+									/>
+								))}
+
+								{activeToolCall && (
+									<ToolExecutionItem
+										key={activeToolCall.id || "active"}
+										tool={activeToolCall}
+										isActive={true}
+										isComplete={false}
+										isError={false}
+										progress={toolProgress}
+									/>
+								)}
+
+								{isBetweenBatches && (
+									<ToolExecutionItem
+										key="preparing"
+										tool={{ name: "preparing-changes" }}
+										isActive={true}
+										isComplete={false}
+										isError={false}
+										progress={null}
+									/>
+								)}
+
+								{pendingTools.map((tool, index) => (
+									<ToolExecutionItem
+										key={tool.id || `pending-${index}`}
+										tool={tool}
+										isActive={false}
+										isComplete={false}
+										isError={false}
+										progress={null}
+									/>
+								))}
+							</div>
+						)}
+					</div>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="nfd-ai-chat-message nfd-ai-chat-message--assistant">
+			<div className="nfd-ai-chat-message__content">
+				<div className="nfd-ai-chat-typing-indicator">
+					<span className="nfd-ai-chat-typing-indicator__dots" aria-hidden="true">
+						<span></span>
+						<span></span>
+						<span></span>
+					</span>
+					<span className="nfd-ai-chat-typing-indicator__text">{getStatusText()}</span>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default TypingIndicator;

package/src/constants/nfdAgents/input.js

@@ -0,0 +1,13 @@
+/**
+ * NFD Agents chat input constants.
+ *
+ * Central place for textarea and input behavior used by the chat UI (e.g. ChatInput).
+ * Add timeouts and dimension limits here to avoid magic numbers in components.
+ */
+
+/** Chat input configuration: dimensions, focus delay, and debounce timings. */
+export const INPUT = {
+	MAX_HEIGHT: 200, // Textarea max height (px) before scrolling
+	FOCUS_DELAY: 100, // Delay before focusing input after mount or panel open (ms)
+	STOP_DEBOUNCE: 500, // Debounce for stop-generation button to avoid double-firing (ms)
+};