@newfold/wp-module-ai-chat 1.0.0

package/src/index.js

@@ -0,0 +1,66 @@
+/**
+ * AI Chat Module - Main Entry Point
+ *
+ * This module provides reusable AI chat functionality for WordPress.
+ * Use this as a foundation for editor chat, help center chat, and other AI interfaces.
+ */
+
+import "./styles/app.scss";
+
+// Services
+export { WordPressMCPClient, createMCPClient, mcpClient, MCPError } from "./services/mcpClient";
+
+export {
+	CloudflareOpenAIClient,
+	createOpenAIClient,
+	openaiClient,
+	OpenAIError,
+} from "./services/openaiClient";
+
+// Hooks
+export { useAIChat, CHAT_STATUS } from "./hooks/useAIChat";
+export { default as useNfdAgentsWebSocket } from "./hooks/useNfdAgentsWebSocket";
+
+// Utils
+export { simpleHash, generateSessionId, debounce } from "./utils/helpers";
+export { containsMarkdown, parseMarkdown } from "./utils/markdownParser";
+export { sanitizeHtml, containsHtml } from "./utils/sanitizeHtml";
+
+// NFD Agents Utilities
+export {
+	convertToWebSocketUrl,
+	normalizeUrl,
+	isLocalhost,
+	buildWebSocketUrl,
+} from "./utils/nfdAgents/url";
+export { isInitialGreeting } from "./utils/nfdAgents/greeting";
+
+// Constants
+export { NFD_AGENTS_WEBSOCKET } from "./constants/nfdAgents/websocket";
+export { getChatHistoryStorageKeys } from "./constants/nfdAgents/storageKeys";
+export { TYPING_STATUS } from "./constants/nfdAgents/typingStatus";
+export { INPUT } from "./constants/nfdAgents/input";
+
+// Chat Components
+export { default as ChatMessage } from "./components/chat/ChatMessage";
+export { default as ChatMessages } from "./components/chat/ChatMessages";
+export { default as ChatInput } from "./components/chat/ChatInput";
+export { default as ChatHeader } from "./components/chat/ChatHeader";
+export { default as WelcomeScreen } from "./components/chat/WelcomeScreen";
+
+// Chat history (consumer must match useNfdAgentsWebSocket for same consumer)
+export {
+	archiveConversation,
+	removeConversationFromArchive,
+} from "./utils/nfdAgents/archiveConversation";
+export { default as ChatHistoryList } from "./components/chat/ChatHistoryList";
+export { default as ChatHistoryDropdown } from "./components/chat/ChatHistoryDropdown";
+
+// UI Components
+export { default as AILogo } from "./components/ui/AILogo";
+export { default as BluBetaHeading } from "./components/ui/BluBetaHeading";
+export { default as HeaderBar } from "./components/ui/HeaderBar";
+export { default as ErrorAlert } from "./components/ui/ErrorAlert";
+export { default as SuggestionButton } from "./components/ui/SuggestionButton";
+export { default as ToolExecutionList } from "./components/ui/ToolExecutionList";
+export { default as TypingIndicator } from "./components/ui/TypingIndicator";

package/src/services/mcpClient.js

@@ -0,0 +1,433 @@
+/**
+ * WordPress MCP Client
+ *
+ * MCP client implementation using the official TypeScript SDK
+ * for WordPress integration with nonce-based authentication.
+ * Configurable for use across different modules.
+ */
+
+/* eslint-disable no-undef, no-console */
+
+import { Client } from "@modelcontextprotocol/sdk/client/index.js";
+import { StreamableHTTPClientTransport } from "@modelcontextprotocol/sdk/client/streamableHttp.js";
+
+/**
+ * Custom error class for MCP operations
+ */
+export class MCPError extends Error {
+	constructor(message, code = null, details = null) {
+		super(message);
+		this.name = "MCPError";
+		this.code = code;
+		this.details = details;
+	}
+}
+
+/**
+ * WordPress MCP Client class
+ *
+ * @param {Object} options           Configuration options
+ * @param {string} options.configKey - Window config object name (default: 'nfdAIChat')
+ */
+export class WordPressMCPClient {
+	constructor(options = {}) {
+		this.configKey = options.configKey || "nfdAIChat";
+		this.client = null;
+		this.transport = null;
+		this.connected = false;
+		this.tools = [];
+		this.resources = [];
+		this.eventListeners = new Map();
+	}
+
+	/**
+	 * Get WordPress configuration from global variable
+	 *
+	 * @return {Object} WordPress config
+	 */
+	getConfig() {
+		const config = (typeof window !== "undefined" && window[this.configKey]) || {};
+		return {
+			nonce: config.nonce || "",
+			restUrl: config.restUrl || "/wp-json/",
+			mcpUrl: config.mcpUrl || `${config.restUrl || "/wp-json/"}mcp/mcp-adapter-default-server`,
+			homeUrl: config.homeUrl || "",
+		};
+	}
+
+	/**
+	 * Add event listener
+	 *
+	 * @param {string}   event    Event name
+	 * @param {Function} listener Callback function
+	 */
+	on(event, listener) {
+		if (!this.eventListeners.has(event)) {
+			this.eventListeners.set(event, new Set());
+		}
+		this.eventListeners.get(event).add(listener);
+	}
+
+	/**
+	 * Remove event listener
+	 *
+	 * @param {string}   event    Event name
+	 * @param {Function} listener Callback function
+	 */
+	off(event, listener) {
+		const listeners = this.eventListeners.get(event);
+		if (listeners) {
+			listeners.delete(listener);
+		}
+	}
+
+	/**
+	 * Emit event to listeners
+	 *
+	 * @param {Object} event Event object with type and optional data
+	 */
+	emit(event) {
+		const listeners = this.eventListeners.get(event.type);
+		if (listeners) {
+			listeners.forEach((listener) => {
+				try {
+					listener(event);
+				} catch (error) {
+					console.error("Error in MCP event listener:", error);
+				}
+			});
+		}
+	}
+
+	/**
+	 * Connect to the MCP server
+	 *
+	 * @param {string} serverUrl Optional server URL override
+	 * @return {Promise<void>}
+	 */
+	async connect(serverUrl = null) {
+		try {
+			const config = this.getConfig();
+			const mcpEndpoint = serverUrl || config.mcpUrl;
+
+			if (!mcpEndpoint) {
+				throw new MCPError("MCP endpoint URL not configured");
+			}
+
+			// Initialize the MCP Client
+			this.client = new Client(
+				{
+					name: "nfd-ai-chat-client",
+					version: "1.0.0",
+				},
+				{
+					capabilities: {},
+				}
+			);
+
+			// Create HTTP transport with WordPress authentication headers
+			this.transport = new StreamableHTTPClientTransport(new URL(mcpEndpoint), {
+				requestInit: {
+					headers: {
+						"X-WP-Nonce": config.nonce,
+						"Content-Type": "application/json",
+					},
+				},
+			});
+
+			// Connect using the SDK
+			await this.client.connect(this.transport);
+
+			this.connected = true;
+			this.emit({ type: "connected" });
+		} catch (error) {
+			const mcpError =
+				error instanceof MCPError ? error : new MCPError(`Connection failed: ${error.message}`);
+			this.emit({ type: "error", data: mcpError });
+			throw mcpError;
+		}
+	}
+
+	/**
+	 * Initialize the MCP session and load tools/resources
+	 *
+	 * @return {Promise<Object>} Initialization result
+	 */
+	async initialize() {
+		if (!this.connected) {
+			throw new MCPError("Not connected to MCP server");
+		}
+
+		try {
+			// Load tools and resources
+			await Promise.all([this.loadTools(), this.loadResources()]);
+
+			const initResult = {
+				protocolVersion: "2025-06-18",
+				capabilities: {
+					tools: {},
+					resources: {},
+					prompts: {},
+				},
+				serverInfo: {
+					name: "WordPress MCP Server",
+					version: "1.0.0",
+				},
+			};
+
+			this.emit({ type: "initialized", data: initResult });
+
+			return initResult;
+		} catch (error) {
+			const mcpError =
+				error instanceof MCPError ? error : new MCPError(`Initialization failed: ${error.message}`);
+			this.emit({ type: "error", data: mcpError });
+			throw mcpError;
+		}
+	}
+
+	/**
+	 * Normalize input schema to valid JSON Schema object
+	 *
+	 * @param {any} schema Raw input schema from MCP
+	 * @return {Object} Valid JSON Schema object
+	 */
+	normalizeInputSchema(schema) {
+		if (
+			!schema ||
+			Array.isArray(schema) ||
+			typeof schema !== "object" ||
+			Object.keys(schema).length === 0
+		) {
+			return {
+				type: "object",
+				properties: {},
+				required: [],
+			};
+		}
+
+		return {
+			type: schema.type || "object",
+			properties: schema.properties || {},
+			required: Array.isArray(schema.required) ? schema.required : [],
+		};
+	}
+
+	/**
+	 * Load available tools from the MCP server
+	 *
+	 * @return {Promise<void>}
+	 */
+	async loadTools() {
+		try {
+			const result = await this.client.listTools();
+
+			this.tools = result.tools.map((tool) => ({
+				name: tool.name,
+				description: tool.description || "",
+				inputSchema: this.normalizeInputSchema(tool.inputSchema),
+				annotations: tool.annotations || {},
+			}));
+
+			this.emit({ type: "tools_updated", data: this.tools });
+		} catch (error) {
+			console.error("Failed to load tools via SDK:", error);
+			this.tools = [];
+		}
+	}
+
+	/**
+	 * Load available resources from the MCP server
+	 *
+	 * @return {Promise<void>}
+	 */
+	async loadResources() {
+		try {
+			const result = await this.client.listResources();
+
+			this.resources = result.resources.map((resource) => ({
+				uri: resource.uri,
+				name: resource.name || "",
+				description: resource.description,
+				mimeType: resource.mimeType,
+			}));
+
+			this.emit({ type: "resources_updated", data: this.resources });
+		} catch (error) {
+			console.error("Failed to load resources via SDK:", error);
+			this.resources = [];
+		}
+	}
+
+	/**
+	 * List available tools
+	 *
+	 * @return {Promise<Array>} List of tools
+	 */
+	async listTools() {
+		if (!this.connected) {
+			throw new MCPError("Not connected to MCP server");
+		}
+		return this.tools;
+	}
+
+	/**
+	 * Call a tool on the MCP server
+	 *
+	 * @param {string} name Tool name
+	 * @param {Object} args Tool arguments
+	 * @return {Promise<Object>} Tool result
+	 */
+	async callTool(name, args = {}) {
+		if (!this.connected) {
+			throw new MCPError("Not connected to MCP server");
+		}
+
+		try {
+			const result = await this.client.callTool({ name, arguments: args });
+
+			return {
+				content: Array.isArray(result.content) ? result.content : [],
+				isError: Boolean(result.isError),
+				meta: result.meta || {},
+			};
+		} catch (error) {
+			console.error(`Tool "${name}" call failed:`, error);
+			const mcpError =
+				error instanceof MCPError ? error : new MCPError(`Tool call failed: ${error.message}`);
+			this.emit({ type: "error", data: mcpError });
+			throw mcpError;
+		}
+	}
+
+	/**
+	 * List available resources
+	 *
+	 * @return {Promise<Array>} List of resources
+	 */
+	async listResources() {
+		if (!this.connected) {
+			throw new MCPError("Not connected to MCP server");
+		}
+		return this.resources;
+	}
+
+	/**
+	 * Read a resource from the MCP server
+	 *
+	 * @param {string} uri Resource URI
+	 * @return {Promise<Object>} Resource content
+	 */
+	async readResource(uri) {
+		if (!this.connected) {
+			throw new MCPError("Not connected to MCP server");
+		}
+
+		try {
+			return await this.client.readResource({ uri });
+		} catch (error) {
+			console.error(`Resource "${uri}" read failed:`, error);
+			const mcpError =
+				error instanceof MCPError ? error : new MCPError(`Resource read failed: ${error.message}`);
+			this.emit({ type: "error", data: mcpError });
+			throw mcpError;
+		}
+	}
+
+	/**
+	 * Disconnect from the MCP server
+	 *
+	 * @return {Promise<void>}
+	 */
+	async disconnect() {
+		try {
+			if (this.transport) {
+				await this.client.close();
+				this.transport = null;
+			}
+
+			this.connected = false;
+			this.tools = [];
+			this.resources = [];
+			this.emit({ type: "disconnected" });
+		} catch (error) {
+			console.error("Error during SDK disconnect:", error);
+		}
+	}
+
+	/**
+	 * Check if connected to MCP server
+	 *
+	 * @return {boolean} Connection status
+	 */
+	isConnected() {
+		return this.connected;
+	}
+
+	/**
+	 * Get cached tools
+	 *
+	 * @return {Array} List of tools
+	 */
+	getTools() {
+		return [...this.tools];
+	}
+
+	/**
+	 * Get cached resources
+	 *
+	 * @return {Array} List of resources
+	 */
+	getResources() {
+		return [...this.resources];
+	}
+
+	/**
+	 * Check if a tool is read-only
+	 *
+	 * @param {string} toolName Tool name to check
+	 * @return {boolean} True if read-only
+	 */
+	isToolReadOnly(toolName) {
+		const tool = this.tools.find((t) => t.name === toolName);
+		if (!tool) {
+			return true;
+		}
+		return tool.annotations?.readonly === true || tool.annotations?.readOnlyHint === true;
+	}
+
+	/**
+	 * Convert all tools to OpenAI functions format
+	 *
+	 * @return {Array} OpenAI tools array
+	 */
+	getToolsForOpenAI() {
+		return this.tools.map((tool) => {
+			const parameters = this.normalizeInputSchema(tool.inputSchema);
+
+			return {
+				type: "function",
+				function: {
+					name: tool.name,
+					description: tool.description || "",
+					parameters,
+				},
+			};
+		});
+	}
+}
+
+/**
+ * Create a new MCP client instance
+ *
+ * @param {Object} options Configuration options
+ * @return {WordPressMCPClient} New client instance
+ */
+export const createMCPClient = (options = {}) => {
+	return new WordPressMCPClient(options);
+};
+
+// Default singleton instance for backwards compatibility
+export const mcpClient = new WordPressMCPClient();
+
+export default mcpClient;