@newfold/wp-module-ai-chat 1.0.1 → 1.0.2

package/src/components/ui/ToolExecutionList.jsx

@@ -1,264 +0,0 @@
-/**
- * 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

@@ -1,268 +0,0 @@
-/**
- * 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

@@ -1,13 +0,0 @@
-/**
- * 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)
-};

package/src/constants/nfdAgents/storageKeys.js

@@ -1,102 +0,0 @@
-/**
- * NFD Agents Storage Key Constants
- *
- * Site-scoped localStorage key construction and site ID management.
- * Used by useNfdAgentsWebSocket, archiveConversation, and ChatHistoryList.
- * Key format: nfd-ai-chat-{siteId}-{consumer}-{suffix} (or nfd-ai-chat-{consumer}-{suffix} when siteId is empty).
- */
-
-/* global localStorage */
-
-const SITE_ID_KEY = "nfd-ai-chat-site-id";
-
-/** Suffixes for consumer-scoped keys. Single source of truth for migrateStorageKeys and getChatHistoryStorageKeys. */
-const STORAGE_KEY_SUFFIXES = {
-	history: "history",
-	conversationId: "conversation-id",
-	sessionId: "session-id",
-	archive: "archive",
-};
-
-/**
- * Get the cached site ID from localStorage.
- * Returns '' if not yet cached (backwards compatible with pre-migration keys).
- *
- * @return {string} Cached site ID or empty string
- */
-export const getSiteId = () => {
-	try {
-		return localStorage.getItem(SITE_ID_KEY) || "";
-	} catch {
-		return "";
-	}
-};
-
-/**
- * Cache the site ID in localStorage.
- *
- * @param {string} id Site ID to cache
- */
-export const setSiteId = (id) => {
-	try {
-		localStorage.setItem(SITE_ID_KEY, id);
-	} catch {
-		// Ignore storage errors (e.g. private mode, quota).
-	}
-};
-
-/**
- * Build key prefix for a consumer (with or without site ID).
- *
- * @param {string} siteId   Site ID or '' for pre-migration keys
- * @param {string} consumer Consumer identifier
- * @return {string} Key prefix for consumer-scoped keys (e.g. nfd-ai-chat-{siteId}-{consumer}).
- */
-const getKeyPrefix = (siteId, consumer) =>
-	siteId ? `nfd-ai-chat-${siteId}-${consumer}` : `nfd-ai-chat-${consumer}`;
-
-/**
- * Migrate localStorage data from old-prefix keys to new-prefix keys.
- * Only copies when the new key has no data; then removes the old key.
- *
- * @param {string} oldSiteId Previous site ID ('' for pre-migration keys)
- * @param {string} newSiteId New site ID from config
- * @param {string} consumer  Consumer identifier (must match useNfdAgentsWebSocket for same surface)
- */
-export const migrateStorageKeys = (oldSiteId, newSiteId, consumer) => {
-	const oldPrefix = getKeyPrefix(oldSiteId, consumer);
-	const newPrefix = getKeyPrefix(newSiteId, consumer);
-
-	try {
-		for (const suffix of Object.values(STORAGE_KEY_SUFFIXES)) {
-			const oldKey = `${oldPrefix}-${suffix}`;
-			const newKey = `${newPrefix}-${suffix}`;
-			const oldData = localStorage.getItem(oldKey);
-			if (oldData && !localStorage.getItem(newKey)) {
-				localStorage.setItem(newKey, oldData);
-			}
-			if (oldData) {
-				localStorage.removeItem(oldKey);
-			}
-		}
-	} catch {
-		// Ignore storage errors.
-	}
-};
-
-/**
- * Get localStorage keys for chat history and related data for a given consumer.
- * Includes the cached site ID in the key prefix for multisite isolation.
- * Must match the keys used in useNfdAgentsWebSocket for the same consumer.
- *
- * @param {string} consumer Consumer identifier (must match useNfdAgentsWebSocket for same surface)
- * @return {{ history: string, conversationId: string, sessionId: string, archive: string }} Object with localStorage key strings for history, conversationId, sessionId, and archive.
- */
-export const getChatHistoryStorageKeys = (consumer) => {
-	const prefix = getKeyPrefix(getSiteId(), consumer);
-	const keys = {};
-	for (const [name, suffix] of Object.entries(STORAGE_KEY_SUFFIXES)) {
-		keys[name] = `${prefix}-${suffix}`;
-	}
-	return keys;
-};

package/src/constants/nfdAgents/typingStatus.js

@@ -1,40 +0,0 @@
-/**
- * Typing indicator status keys and event mapping.
- * Single source of truth for status values shown between typing_start and typing_stop.
- * Hook maps WebSocket event types to these keys; UI maps keys to display strings.
- */
-
-/** Status keys for the typing indicator (no UI copy here) */
-export const TYPING_STATUS = {
-	PROCESSING: "processing",
-	CONNECTING: "connecting",
-	WS_CONNECTING: "ws_connecting",
-	TOOL_CALL: "tool_call",
-	WORKING: "working",
-	// Existing keys used elsewhere
-	RECEIVED: "received",
-	GENERATING: "generating",
-	SUMMARIZING: "summarizing",
-	COMPLETED: "completed",
-	FAILED: "failed",
-};
-
-/**
- * Map WebSocket message type to typing status key.
- * Add new event types here to drive status without scattering branches.
- * Returns null for typing_stop (and unknown types) to clear the indicator.
- *
- * @param {string} eventType data.type from WebSocket message
- * @return {string|null} TYPING_STATUS key, or null to clear the typing indicator
- */
-export function getStatusForEventType(eventType) {
-	const map = {
-		typing_start: TYPING_STATUS.PROCESSING,
-		handoff_request: TYPING_STATUS.CONNECTING,
-		handoff_accept: TYPING_STATUS.CONNECTING,
-		tool_call: TYPING_STATUS.TOOL_CALL,
-		tool_result: TYPING_STATUS.WORKING,
-		typing_stop: null,
-	};
-	return map[eventType] ?? null;
-}