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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@newfold/wp-module-ai-chat",
-	"version": "1.0.1",
+	"version": "1.0.2",
 	"description": "Reusable AI Chat core for WordPress modules",
 	"license": "GPL-2.0-or-later",
 	"publishConfig": {
@@ -10,17 +10,19 @@
 		"type": "git",
 		"url": "git+https://github.com/newfold-labs/wp-module-ai-chat.git"
 	},
-	"main": "src/index.js",
+	"main": "build/index.js",
+	"style": "build/index.css",
 	"files": [
-		"src"
+		"build"
 	],
 	"exports": {
-		".": "./src/index.js",
-		"./services/*": "./src/services/*.js",
-		"./components/*": "./src/components/*.jsx",
-		"./hooks/*": "./src/hooks/*.js",
-		"./utils/*": "./src/utils/*.js",
-		"./styles/*": "./src/styles/*.scss"
+		".": "./build/index.js",
+		"./style.css": "./build/index.css"
+	},
+	"scripts": {
+		"build": "wp-scripts build ./src/index.js --config ./scripts/webpack.config.js",
+		"lint": "wp-scripts lint-js ./src",
+		"prepublishOnly": "npm run build"
 	},
 	"peerDependencies": {
 		"@wordpress/element": "^6.0.0",

package/src/components/chat/ChatHeader.jsx

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

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

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

package/src/components/chat/ChatInput.jsx

@@ -1,157 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Button } from "@wordpress/components";
-import { useCallback, useEffect, useRef, useState } from "@wordpress/element";
-import { __ } from "@wordpress/i18n";
-
-/**
- * External dependencies
- */
-import classnames from "classnames";
-import { ArrowUp, CircleStop } from "lucide-react";
-import { INPUT } from "../../constants/nfdAgents/input";
-
-/**
- * ChatInput Component
- *
- * Context-agnostic chat input field. Accepts optional contextComponent prop
- * for consumers to inject their own context indicators (e.g., selected block).
- *
- * @param {Object}                    props                    - The component props.
- * @param {Function}                  props.onSendMessage      - Function to call when message is sent.
- * @param {Function}                  props.onStopRequest      - Function to call when stop button is clicked.
- * @param {boolean}                   props.disabled           - Whether the input is disabled.
- * @param {boolean}                   props.showStopButton     - When true, show stop button instead of send (e.g. when generating). When false, show send even if disabled.
- * @param {string}                    props.placeholder        - Input placeholder text.
- * @param {import('react').ReactNode} [props.contextComponent] - Optional context component to render (e.g. selected block).
- * @param {boolean}                   [props.showTopBorder]    - When false, omits the top border. Default true.
- * @return {JSX.Element} The ChatInput component.
- */
-const ChatInput = ({
-	onSendMessage,
-	onStopRequest,
-	disabled = false,
-	showStopButton,
-	placeholder,
-	contextComponent = null,
-	showTopBorder = true,
-}) => {
-	// Show stop button only when explicitly requested (e.g. generating), not when disabled for connecting/failed
-	const showStop = showStopButton === true;
-	const [message, setMessage] = useState("");
-	const [isStopping, setIsStopping] = useState(false);
-	const textareaRef = useRef(null);
-
-	const defaultPlaceholder = __("How can I help you today?", "wp-module-ai-chat");
-
-	// Auto-resize textarea as user types
-	useEffect(() => {
-		if (textareaRef.current) {
-			textareaRef.current.style.height = "auto";
-			const scrollHeight = textareaRef.current.scrollHeight;
-			const newHeight = Math.min(scrollHeight, INPUT.MAX_HEIGHT);
-			textareaRef.current.style.height = `${newHeight}px`;
-
-			// Only show scrollbar when content actually overflows
-			// This prevents the disabled scrollbar from appearing when empty
-			if (scrollHeight > INPUT.MAX_HEIGHT) {
-				textareaRef.current.style.overflowY = "auto";
-			} else {
-				textareaRef.current.style.overflowY = "hidden";
-			}
-		}
-	}, [message]);
-
-	// Focus textarea when it becomes enabled again
-	useEffect(() => {
-		if (!disabled && textareaRef.current) {
-			setTimeout(() => {
-				textareaRef.current.focus();
-			}, INPUT.FOCUS_DELAY);
-		}
-	}, [disabled]);
-
-	const handleSubmit = useCallback(() => {
-		if (message.trim() && !disabled) {
-			onSendMessage(message);
-			setMessage("");
-			if (textareaRef.current) {
-				textareaRef.current.style.height = "auto";
-				textareaRef.current.style.overflowY = "hidden";
-				textareaRef.current.focus();
-			}
-		}
-	}, [message, disabled, onSendMessage]);
-
-	const handleKeyDown = useCallback(
-		(e) => {
-			if (e.key === "Enter" && !e.shiftKey) {
-				e.preventDefault();
-				handleSubmit();
-			}
-		},
-		[handleSubmit]
-	);
-
-	const handleStopRequest = useCallback(() => {
-		if (isStopping) {
-			return;
-		}
-		setIsStopping(true);
-		if (onStopRequest) {
-			onStopRequest();
-		}
-		setTimeout(() => {
-			setIsStopping(false);
-		}, INPUT.STOP_DEBOUNCE);
-	}, [isStopping, onStopRequest]);
-
-	const rootClassName = classnames("nfd-ai-chat-input", {
-		"nfd-ai-chat-input--no-top-border": !showTopBorder,
-	});
-
-	return (
-		<div className={rootClassName}>
-			<div className="nfd-ai-chat-input__container">
-				<textarea
-					name="nfd-ai-chat-input"
-					ref={textareaRef}
-					value={message}
-					onChange={(e) => setMessage(e.target.value)}
-					onKeyDown={handleKeyDown}
-					placeholder={placeholder || defaultPlaceholder}
-					className="nfd-ai-chat-input__textarea"
-					rows={1}
-					disabled={disabled}
-				/>
-				<div className="nfd-ai-chat-input__actions">
-					{contextComponent}
-					{showStop ? (
-						<Button
-							icon={<CircleStop width={16} height={16} />}
-							label={__("Stop generating", "wp-module-ai-chat")}
-							onClick={handleStopRequest}
-							className="nfd-ai-chat-input__stop"
-							disabled={isStopping}
-							aria-busy={isStopping}
-						/>
-					) : (
-						<Button
-							icon={<ArrowUp width={16} height={16} />}
-							label={__("Send message", "wp-module-ai-chat")}
-							onClick={handleSubmit}
-							className="nfd-ai-chat-input__submit"
-							disabled={!message.trim() || disabled}
-						/>
-					)}
-				</div>
-			</div>
-			<div className="nfd-ai-chat-input__disclaimer">
-				{__("AI-generated content is not guaranteed for accuracy.", "wp-module-ai-chat")}
-			</div>
-		</div>
-	);
-};
-
-export default ChatInput;