@newfold/wp-module-ai-chat 1.0.0

package/README.md

@@ -0,0 +1,98 @@
+# WP Module AI Chat
+
+Reusable AI chat core for WordPress. Provides NFD Agents WebSocket chat, shared UI components, hooks, and utilities for Help Center, Editor Chat, and other Newfold AI interfaces.
+
+## Overview
+
+- **NFD Agents chat**: WebSocket-based chat backed by the Newfold agents gateway (config endpoint, session handling, typing indicators, tool execution display).
+- **Shared UI**: Chat message list, input, header, welcome screen, history list/dropdown, typing indicator, tool execution list.
+- **Optional backends**: MCP (WordPress MCP client) and OpenAI client exports for consumers that need them.
+- **PHP**: REST API config endpoint (`nfd-agents/chat/v1/config`) that returns gateway URL, auth token, and consumer-based capabilities.
+
+The module is consumer-agnostic: the host (e.g. Bluehost plugin) mounts the UI and passes a `consumer` (e.g. `help-center`, `editor-chat`) so the backend can enforce capabilities and branding.
+
+## Installation
+
+- **PHP**: Installed as a Composer dependency in a Newfold plugin (e.g. `wp-plugin-bluehost`). The module registers with the Newfold container via `bootstrap.php` and exposes the REST API.
+- **Frontend**: Consuming plugins/apps depend on `@newfold-labs/wp-module-ai-chat` and use the built entry point and exports (see **Usage**).
+
+## Usage
+
+1. **Config**: Ensure the gateway URL is set (see **Configuration** below). The frontend calls the REST config endpoint with a `consumer` query parameter.
+2. **Mount the chat**: Use the exported components (e.g. `ChatMessages`, `ChatInput`, `ChatHeader`, `WelcomeScreen`, `TypingIndicator`, `ToolExecutionList`) and hook `useNfdAgentsWebSocket` with the same `consumer` and config endpoint (full URL or relative path like `nfd-agents/chat/v1/config`).
+3. **History**: Chat history is keyed by consumer; use `archiveConversation`, `removeConversationFromArchive`, `ChatHistoryList`, and `ChatHistoryDropdown` with the same consumer for consistency.
+
+**Example (conceptual):**
+
+```js
+import {
+  useNfdAgentsWebSocket,
+  ChatMessages,
+  ChatInput,
+  ChatHeader,
+  WelcomeScreen,
+  TypingIndicator,
+  ToolExecutionList,
+} from "@newfold-labs/wp-module-ai-chat";
+
+// In your app: fetch config (e.g. from REST), then:
+// useNfdAgentsWebSocket({ configEndpoint, consumer: "help-center", ... });
+// Render ChatMessages, ChatInput, TypingIndicator, etc.
+```
+
+REST API base URLs are built with `rest_route` (not `/wp-json/`) so the config request works regardless of permalink settings. The module provides `buildRestApiUrl` and `convertWpJsonToRestRoute` in `utils/restApi.js` (used internally by the config fetcher).
+
+## Configuration
+
+### NFD Agents Gateway URL
+
+The chat connects to the NFD Agents backend over WebSocket. The gateway URL must be set; it is not set by default.
+
+- **`NFD_AGENTS_CHAT_GATEWAY_URL`** (in `wp-config.php`): Base URL for the agents gateway, e.g. `https://agents.example.com` or `http://localhost:8080` for local development.
+- **`nfd_agents_chat_gateway_url` filter**: The host or another plugin can provide the URL:
+  ```php
+  add_filter( 'nfd_agents_chat_gateway_url', fn() => 'https://agents.example.com' );
+  ```
+
+If neither is set, the config API returns an error and the chat will not connect.
+
+### Debug token (local / bypass Hiive)
+
+For local development or debugging without Hiive, you can supply a JWT instead of fetching it from Hiive.
+
+- **`NFD_AGENTS_CHAT_DEBUG_TOKEN`** (in `wp-config.php` only): If defined and non-empty, it is used as the `huapi_token` instead of calling Hiive. Set only in `wp-config.php` or a local, uncommitted config; never commit the value.
+
+  ```php
+  define( 'NFD_AGENTS_CHAT_DEBUG_TOKEN', 'eyJ...' );
+  ```
+
+## Development
+
+```bash
+# Install JS dependencies
+npm install
+
+# Build (output is consumed by the host plugin’s build or enqueue)
+npm run build
+
+# Lint
+npm run lint
+```
+
+PHP linting uses the project’s PHPCS config: `composer run lint` (and `composer run clean` to fix).
+
+## Exports (JavaScript)
+
+The package entry point is `src/index.js`. It exports:
+
+- **Hooks**: `useAIChat`, `useNfdAgentsWebSocket`, `CHAT_STATUS`
+- **Components**: Chat (e.g. `ChatMessage`, `ChatMessages`, `ChatInput`, `ChatHeader`, `WelcomeScreen`, `ChatHistoryList`, `ChatHistoryDropdown`), UI (`AILogo`, `BluBetaHeading`, `HeaderBar`, `ErrorAlert`, `SuggestionButton`, `ToolExecutionList`, `TypingIndicator`)
+- **Utils**: `simpleHash`, `generateSessionId`, `debounce`; `containsMarkdown`, `parseMarkdown`; `sanitizeHtml`, `containsHtml`; NFD Agents URL helpers (`convertToWebSocketUrl`, `normalizeUrl`, `buildWebSocketUrl`, `isLocalhost`); `isInitialGreeting`; archive helpers (`archiveConversation`, `removeConversationFromArchive`)
+- **Constants**: `NFD_AGENTS_WEBSOCKET`, `getChatHistoryStorageKeys`, `TYPING_STATUS`, `INPUT`
+- **Services** (optional): `WordPressMCPClient`, `createMCPClient`, `mcpClient`, `MCPError`; `CloudflareOpenAIClient`, `createOpenAIClient`, `openaiClient`, `OpenAIError`
+
+Subpath exports are available for `./services/*`, `./components/*`, `./hooks/*`, and `./utils/*` as defined in `package.json`.
+
+## License
+
+GPL-2.0-or-later

package/package.json

@@ -0,0 +1,51 @@
+{
+	"name": "@newfold/wp-module-ai-chat",
+	"version": "1.0.0",
+	"description": "Reusable AI Chat core for WordPress modules",
+	"license": "GPL-2.0-or-later",
+	"publishConfig": {
+		"access": "public"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/newfold-labs/wp-module-ai-chat.git"
+	},
+	"main": "src/index.js",
+	"files": [
+		"src"
+	],
+	"exports": {
+		".": "./src/index.js",
+		"./services/*": "./src/services/*.js",
+		"./components/*": "./src/components/*.jsx",
+		"./hooks/*": "./src/hooks/*.js",
+		"./utils/*": "./src/utils/*.js",
+		"./styles/*": "./src/styles/*.scss"
+	},
+	"peerDependencies": {
+		"@wordpress/element": "^6.0.0",
+		"@wordpress/data": "^10.0.0",
+		"@wordpress/i18n": "^5.0.0",
+		"@wordpress/components": "^28.0.0",
+		"@wordpress/api-fetch": "^6.0.0",
+		"react": "^18.0.0"
+	},
+	"overrides": {
+		"doctrine": "2.1.0"
+	},
+	"devDependencies": {
+		"@wordpress/eslint-plugin": "^22.18.0",
+		"@wordpress/prettier-config": "^4.32.0",
+		"@wordpress/scripts": "^31.3.0",
+		"eslint": "^8.57.1",
+		"eslint-plugin-prettier": "^5.5.4",
+		"prettier": "^3.6.2"
+	},
+	"dependencies": {
+		"@modelcontextprotocol/sdk": "^1.0.0",
+		"classnames": "^2.5.1",
+		"dompurify": "^3.3.0",
+		"lucide-react": "^0.468.0",
+		"openai": "^4.68.0"
+	}
+}

package/src/components/chat/ChatHeader.jsx

@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from "@wordpress/i18n";
+
+/**
+ * Internal dependencies
+ */
+import { CloseIcon, SparklesOutlineIcon } from "../icons";
+import BluBetaHeading from "../ui/BluBetaHeading";
+import HeaderBar from "../ui/HeaderBar";
+
+/**
+ * ChatHeader Component
+ *
+ * Header for the chat panel: white background; left = outline sparkles icon + title + BETA pill.
+ * New chat (+) and Close (×) on the right. Built on shared HeaderBar layout.
+ *
+ * @param {Object}                    props                   - Component props.
+ * @param {string}                    [props.title]           - Title text next to logo (e.g. "Blu Chat"). Default "Blu Chat".
+ * @param {Function}                  props.onNewChat         - Called when user clicks New chat (+).
+ * @param {Function}                  props.onClose           - Called when user clicks Close (×).
+ * @param {import('react').ReactNode} [props.extraActions]    - Optional node(s) rendered between + and × (e.g. history dropdown trigger).
+ * @param {boolean}                   [props.newChatDisabled] - When true, the New chat (+) button is disabled (e.g. when already on welcome screen).
+ * @return {JSX.Element} The ChatHeader component.
+ */
+const ChatHeader = ({ title, onNewChat, onClose, extraActions, newChatDisabled = false }) => (
+	<HeaderBar
+		logo={<SparklesOutlineIcon width={20} height={20} />}
+		title={title || __("Blu Chat", "wp-module-ai-chat")}
+		badge={<BluBetaHeading />}
+		rightActions={
+			<>
+				{typeof onNewChat === "function" && (
+					<button
+						type="button"
+						className="nfd-ai-chat-header__btn nfd-ai-chat-header__btn--new"
+						onClick={newChatDisabled ? undefined : onNewChat}
+						disabled={newChatDisabled}
+						aria-label={__("New chat", "wp-module-ai-chat")}
+						title={__("New chat", "wp-module-ai-chat")}
+					>
+						+
+					</button>
+				)}
+				{extraActions}
+				{typeof onClose === "function" && (
+					<button
+						type="button"
+						className="nfd-ai-chat-header__btn nfd-ai-chat-header__btn--close"
+						onClick={onClose}
+						aria-label={__("Close", "wp-module-ai-chat")}
+						title={__("Close", "wp-module-ai-chat")}
+					>
+						<CloseIcon />
+					</button>
+				)}
+			</>
+		}
+	/>
+);
+
+export default ChatHeader;

package/src/components/chat/ChatHistoryDropdown.jsx

@@ -0,0 +1,182 @@
+/**
+ * Chat History Dropdown Component
+ *
+ * Clock icon button that toggles a dropdown panel containing ChatHistoryList.
+ * Click outside and Escape close the dropdown.
+ */
+
+import {
+	useState,
+	useRef,
+	useEffect,
+	useLayoutEffect,
+	useCallback,
+	createPortal,
+} from "@wordpress/element";
+import { __ } from "@wordpress/i18n";
+import ChatHistoryList from "./ChatHistoryList";
+
+/**
+ * Clock / history icon - inline SVG
+ *
+ * @param {Object} props - Props to spread onto the SVG element.
+ */
+const ClockIcon = (props) => (
+	<svg
+		width="16"
+		height="16"
+		viewBox="0 0 24 24"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		aria-hidden="true"
+		focusable="false"
+		{...props}
+	>
+		<circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="2" />
+		<path d="M12 7v5l3 3" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+	</svg>
+);
+
+/**
+ * Dropdown trigger and portal-rendered panel with ChatHistoryList.
+ *
+ * @param {Object}   props
+ * @param {string}   props.consumer             - Must match useNfdAgentsWebSocket for same consumer
+ * @param {boolean}  props.open
+ * @param {Function} props.onOpenChange
+ * @param {Function} props.onSelectConversation
+ * @param {number}   [props.refreshTrigger=0]
+ * @param {boolean}  [props.disabled=false]
+ * @param {number}   [props.maxHistoryItems]
+ * @return {JSX.Element} Dropdown trigger and portal-rendered history panel.
+ */
+const ChatHistoryDropdown = ({
+	consumer,
+	open,
+	onOpenChange,
+	onSelectConversation,
+	refreshTrigger = 0,
+	disabled = false,
+	maxHistoryItems,
+}) => {
+	const triggerRef = useRef(null);
+	const panelRef = useRef(null);
+	const [position, setPosition] = useState({ top: 0, left: 0, openUp: false });
+
+	const updatePosition = useCallback(() => {
+		if (!triggerRef.current) {
+			return;
+		}
+		const rect = triggerRef.current.getBoundingClientRect();
+		const panelHeight = 240;
+		const spaceBelow = window.innerHeight - rect.bottom;
+		const openUp = spaceBelow < panelHeight && rect.top > spaceBelow;
+		setPosition({
+			top: openUp ? rect.top : rect.bottom,
+			left: rect.right,
+			openUp,
+		});
+	}, []);
+
+	useLayoutEffect(() => {
+		if (open) {
+			updatePosition();
+		}
+	}, [open, updatePosition]);
+
+	useEffect(() => {
+		if (!open) {
+			return;
+		}
+		const handleResize = () => updatePosition();
+		window.addEventListener("resize", handleResize);
+		return () => window.removeEventListener("resize", handleResize);
+	}, [open, updatePosition]);
+
+	useEffect(() => {
+		if (!open) {
+			return;
+		}
+		const handleClickOutside = (e) => {
+			if (triggerRef.current?.contains(e.target) || panelRef.current?.contains(e.target)) {
+				return;
+			}
+			onOpenChange(false);
+		};
+		const handleEscape = (e) => {
+			if (e.key === "Escape") {
+				onOpenChange(false);
+			}
+		};
+		document.addEventListener("mousedown", handleClickOutside);
+		document.addEventListener("keydown", handleEscape);
+		return () => {
+			document.removeEventListener("mousedown", handleClickOutside);
+			document.removeEventListener("keydown", handleEscape);
+		};
+	}, [open, onOpenChange]);
+
+	const handleSelect = useCallback(
+		(conversation) => {
+			onSelectConversation(conversation);
+			onOpenChange(false);
+		},
+		[onSelectConversation, onOpenChange]
+	);
+
+	const handleTriggerClick = useCallback(() => {
+		if (disabled) {
+			return;
+		}
+		onOpenChange(!open);
+	}, [disabled, open, onOpenChange]);
+
+	const dropdownPanel = (
+		<div
+			ref={panelRef}
+			className="nfd-ai-chat-history-dropdown"
+			role="dialog"
+			aria-label={__("Chat history", "wp-module-ai-chat")}
+			style={{
+				position: "fixed",
+				top: position.openUp ? "auto" : position.top,
+				bottom: position.openUp ? window.innerHeight - position.top : "auto",
+				left: "auto",
+				right: window.innerWidth - position.left,
+				zIndex: 100000,
+			}}
+		>
+			<div className="nfd-ai-chat-history-dropdown-inner">
+				<ChatHistoryList
+					consumer={consumer}
+					onSelectConversation={handleSelect}
+					disabled={disabled}
+					refreshTrigger={open ? refreshTrigger : 0}
+					emptyMessage={__("No conversations yet.", "wp-module-ai-chat")}
+					maxHistoryItems={maxHistoryItems}
+				/>
+			</div>
+		</div>
+	);
+
+	return (
+		<div className="nfd-ai-chat-history-dropdown-wrapper">
+			<button
+				ref={triggerRef}
+				type="button"
+				className={`nfd-ai-chat-history-dropdown-trigger ${open ? "is-open" : ""}`}
+				onClick={handleTriggerClick}
+				disabled={disabled}
+				aria-expanded={open}
+				aria-haspopup="true"
+				aria-label={__("Chat history", "wp-module-ai-chat")}
+				title={__("Chat history", "wp-module-ai-chat")}
+			>
+				<ClockIcon />
+			</button>
+			{open && createPortal(dropdownPanel, document.body)}
+		</div>
+	);
+};
+
+export default ChatHistoryDropdown;

package/src/components/chat/ChatHistoryList.jsx

@@ -0,0 +1,257 @@
+/**
+ * Chat History List Component
+ *
+ * Displays previous chat sessions from localStorage. Shows archived conversations
+ * (from "+" new chat) and falls back to current history key for legacy.
+ * Use consumer that matches useNfdAgentsWebSocket for the same consumer.
+ */
+
+import { useState, useEffect, useCallback } from "@wordpress/element";
+import { __ } from "@wordpress/i18n";
+import { History, Trash2 } from "lucide-react";
+import { getChatHistoryStorageKeys } from "../../constants/nfdAgents/storageKeys";
+import {
+	hasMeaningfulUserMessage,
+	extractConversations,
+	getLatestMessageTime,
+} from "../../utils/nfdAgents/chatHistoryList";
+
+const DEFAULT_MAX_HISTORY_ITEMS = 3;
+
+/**
+ * Human-readable relative time (e.g. 2m, 2h, 2d). Uses i18n for "Just now".
+ *
+ * @param {Date|string} dateOrString - Date or ISO string
+ * @return {string} Relative time string (e.g. "2m", "2h", "Just now").
+ */
+const getRelativeTime = (dateOrString) => {
+	const date = dateOrString instanceof Date ? dateOrString : new Date(dateOrString);
+	const now = Date.now();
+	const diffMs = now - date.getTime();
+	const diffM = Math.floor(diffMs / 60000);
+	if (diffM < 1) {
+		return __("Just now", "wp-module-ai-chat");
+	}
+	if (diffM < 60) {
+		return `${diffM}m`;
+	}
+	const diffH = Math.floor(diffMs / 3600000);
+	if (diffH < 24) {
+		return `${diffH}h`;
+	}
+	const diffD = Math.floor(diffMs / 86400000);
+	if (diffD < 7) {
+		return `${diffD}d`;
+	}
+	return date.toLocaleDateString(undefined, { month: "short", day: "numeric" });
+};
+
+/**
+ * Get the title for a conversation (first user message). Uses i18n for fallback.
+ *
+ * @param {Object} conversation - Conversation with messages
+ * @return {string} Title string (first user message content or fallback).
+ */
+const getConversationTitle = (conversation) => {
+	const messages = conversation.messages || conversation;
+	const firstUserMessage = messages.find((msg) => msg.role === "user" || msg.type === "user");
+
+	if (firstUserMessage && firstUserMessage.content) {
+		const content = firstUserMessage.content;
+		return content.length > 50 ? content.substring(0, 50) + "..." : content;
+	}
+
+	return __("Previous conversation", "wp-module-ai-chat");
+};
+
+/**
+ * Chat history list UI: load from storage, render items, handle select/delete.
+ *
+ * @param {Object}   props
+ * @param {string}   props.consumer             - Must match useNfdAgentsWebSocket for same consumer
+ * @param {Function} props.onSelectConversation
+ * @param {number}   [props.refreshTrigger=0]
+ * @param {boolean}  [props.disabled=false]
+ * @param {string}   [props.emptyMessage]
+ * @param {number}   [props.maxHistoryItems=3]
+ * @return {JSX.Element|null} List of history items or empty state or null.
+ */
+const ChatHistoryList = ({
+	consumer,
+	onSelectConversation,
+	refreshTrigger = 0,
+	disabled = false,
+	emptyMessage = null,
+	maxHistoryItems = DEFAULT_MAX_HISTORY_ITEMS,
+}) => {
+	const [conversations, setConversations] = useState([]);
+	const keys = getChatHistoryStorageKeys(consumer);
+
+	useEffect(() => {
+		try {
+			const rawArchive = window.localStorage.getItem(keys.archive);
+			if (rawArchive) {
+				const archive = JSON.parse(rawArchive);
+				if (Array.isArray(archive) && archive.length > 0) {
+					const trimmed = archive.slice(0, maxHistoryItems);
+					if (trimmed.length < archive.length) {
+						window.localStorage.setItem(keys.archive, JSON.stringify(trimmed));
+					}
+					const list = trimmed
+						.map((entry) => {
+							const messages = (entry.messages || []).map((msg) => ({
+								...msg,
+								timestamp: msg.timestamp ? new Date(msg.timestamp) : new Date(),
+							}));
+							const archivedAt = entry.archivedAt ? new Date(entry.archivedAt) : null;
+							return {
+								sessionId: entry.sessionId ?? null,
+								conversationId: entry.conversationId ?? null,
+								messages,
+								archivedAt,
+							};
+						})
+						.filter(hasMeaningfulUserMessage);
+					setConversations(list);
+					return;
+				}
+			}
+
+			const storedMessages = window.localStorage.getItem(keys.history);
+			if (storedMessages) {
+				const parsedMessages = JSON.parse(storedMessages);
+				if (Array.isArray(parsedMessages) && parsedMessages.length > 0) {
+					const messages = parsedMessages.map((msg) => ({
+						...msg,
+						timestamp: msg.timestamp ? new Date(msg.timestamp) : new Date(),
+					}));
+					const extractedConversations = extractConversations(messages, maxHistoryItems);
+					setConversations(extractedConversations);
+				}
+			}
+		} catch (err) {
+			// eslint-disable-next-line no-console
+			console.warn("[Chat History] Failed to load chat history:", err);
+		}
+	}, [consumer, refreshTrigger, maxHistoryItems, keys.archive, keys.history]);
+
+	const handleHistoryClick = useCallback(
+		(conversation) => {
+			if (disabled) {
+				return;
+			}
+			try {
+				const messages = conversation.messages || conversation;
+				const messagesToStore = messages.map((msg) => ({
+					...msg,
+					timestamp: msg.timestamp instanceof Date ? msg.timestamp.toISOString() : msg.timestamp,
+				}));
+
+				window.localStorage.setItem(keys.history, JSON.stringify(messagesToStore));
+
+				if (conversation.sessionId) {
+					window.localStorage.setItem(keys.sessionId, conversation.sessionId);
+				}
+				if (conversation.conversationId) {
+					window.localStorage.setItem(keys.conversationId, conversation.conversationId);
+				}
+
+				if (onSelectConversation) {
+					onSelectConversation(conversation);
+				}
+			} catch (err) {
+				// eslint-disable-next-line no-console
+				console.warn("[Chat History] Failed to restore conversation:", err);
+			}
+		},
+		[disabled, keys, onSelectConversation]
+	);
+
+	const handleDelete = useCallback(
+		(e, index) => {
+			e.stopPropagation();
+			e.preventDefault();
+			if (disabled) {
+				return;
+			}
+			try {
+				const rawArchive = window.localStorage.getItem(keys.archive);
+				if (rawArchive) {
+					const archive = JSON.parse(rawArchive);
+					const filtered = archive.filter((_, i) => i !== index);
+					window.localStorage.setItem(keys.archive, JSON.stringify(filtered));
+				}
+				setConversations((prev) => prev.filter((_, i) => i !== index));
+			} catch (err) {
+				// eslint-disable-next-line no-console
+				console.warn("[Chat History] Failed to delete conversation:", err);
+			}
+		},
+		[disabled, keys]
+	);
+
+	if (conversations.length === 0) {
+		if (emptyMessage) {
+			return (
+				<div className="nfd-ai-chat-history-list nfd-ai-chat-history-list--empty">
+					{emptyMessage}
+				</div>
+			);
+		}
+		return null;
+	}
+
+	return (
+		<div className="nfd-ai-chat-history-list">
+			{conversations.map((conversation, index) => {
+				const title = getConversationTitle(conversation);
+				const key = conversation.sessionId || `legacy-${index}`;
+				const timeDate = conversation.archivedAt || getLatestMessageTime(conversation) || null;
+				const timeLabel = timeDate ? getRelativeTime(timeDate) : null;
+				return (
+					<div
+						key={key}
+						className={`nfd-ai-chat-history-item${disabled ? " nfd-ai-chat-history-item--disabled" : ""}`}
+						role="button"
+						tabIndex={disabled ? -1 : 0}
+						aria-disabled={disabled}
+						onClick={() => handleHistoryClick(conversation)}
+						onKeyDown={(e) => {
+							if (disabled) {
+								return;
+							}
+							if (e.key === "Enter" || e.key === " ") {
+								e.preventDefault();
+								handleHistoryClick(conversation);
+							}
+						}}
+					>
+						<History width={14} height={14} aria-hidden />
+						<div className="nfd-ai-chat-history-item__content">
+							<span className="nfd-ai-chat-history-item__title">{title}</span>
+							<div className="nfd-ai-chat-history-item__meta">
+								{timeLabel && <span className="nfd-ai-chat-history-item__time">{timeLabel}</span>}
+								<button
+									type="button"
+									className="nfd-ai-chat-history-item__delete"
+									onClick={(e) => handleDelete(e, index)}
+									aria-label={__("Delete conversation", "wp-module-ai-chat")}
+									title={__("Delete", "wp-module-ai-chat")}
+								>
+									<Trash2
+										width={14}
+										height={14}
+										className="nfd-ai-chat-history-item__delete-icon"
+										aria-hidden
+									/>
+								</button>
+							</div>
+						</div>
+					</div>
+				);
+			})}
+		</div>
+	);
+};
+
+export default ChatHistoryList;