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

package/src/components/chat/ChatMessage.jsx

@@ -1,157 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useMemo, useState, useEffect, useRef } from "@wordpress/element";
-
-/**
- * Internal dependencies
- */
-import classnames from "classnames";
-import { containsHtml, sanitizeHtml } from "../../utils/sanitizeHtml";
-import { containsMarkdown, parseMarkdown, linkifyUrls } from "../../utils/markdownParser";
-import { unescapeAiResponse } from "../../utils/helpers";
-import ToolExecutionList from "../ui/ToolExecutionList";
-
-/** Typing animation: chars to reveal per tick, tick interval ms */
-const TYPING_CHARS_PER_TICK = 2;
-const TYPING_TICK_MS = 35;
-
-/**
- * ChatMessage Component
- *
- * Displays a single message in the chat with appropriate styling.
- * Supports HTML and Markdown rendering for assistant messages.
- *
- * @param {Object}   props                    - The component props.
- * @param {string}   props.message            - The message content to display.
- * @param {string}   [props.type="assistant"] - The message type ("user" or "assistant").
- * @param {boolean}  [props.animateTyping]    - When true, reveal assistant content with a typing effect.
- * @param {Function} [props.onContentGrow]    - Called when displayed content grows (e.g. for scroll-into-view).
- * @param {Array}    [props.executedTools=[]] - List of executed tools to show inline.
- * @param {Array}    [props.toolResults=[]]   - Results from tool executions.
- * @return {JSX.Element} The ChatMessage component.
- */
-const ChatMessage = ({
-	message,
-	type = "assistant",
-	animateTyping = false,
-	onContentGrow,
-	executedTools = [],
-	toolResults = [],
-}) => {
-	// Treat approval_request as assistant so the thread still displays
-	const displayType = type === "approval_request" ? "assistant" : type;
-	const isUser = displayType === "user";
-
-	const fullLength = (message || "").length;
-	const [displayedLength, setDisplayedLength] = useState(() => (animateTyping ? 0 : fullLength));
-
-	// When not animating, show full message; when animating, drive displayedLength toward fullLength and clear interval when done
-	const intervalRef = useRef(null);
-	useEffect(() => {
-		if (!animateTyping) {
-			setDisplayedLength(fullLength);
-			return;
-		}
-		intervalRef.current = setInterval(() => {
-			setDisplayedLength((prev) => {
-				if (prev >= fullLength) {
-					if (intervalRef.current) {
-						clearInterval(intervalRef.current);
-						intervalRef.current = null;
-					}
-					return prev;
-				}
-				return Math.min(prev + TYPING_CHARS_PER_TICK, fullLength);
-			});
-		}, TYPING_TICK_MS);
-		return () => {
-			if (intervalRef.current) {
-				clearInterval(intervalRef.current);
-				intervalRef.current = null;
-			}
-		};
-	}, [animateTyping, fullLength]);
-
-	// Notify parent when content grows (for auto-scroll), throttled to avoid excessive updates
-	const lastGrowCallRef = useRef(0);
-	useEffect(() => {
-		if (!onContentGrow || !animateTyping || displayedLength === 0) {
-			return;
-		}
-		const now = Date.now();
-		if (now - lastGrowCallRef.current < 80) {
-			return;
-		}
-		lastGrowCallRef.current = now;
-		onContentGrow();
-	}, [displayedLength, animateTyping, onContentGrow]);
-
-	const effectiveMessage = animateTyping
-		? (message || "").slice(0, displayedLength)
-		: message || "";
-
-	// Choose rendering path: plain user text, sanitized HTML, parsed markdown, or linkified plain text.
-	const { content, isRichContent } = useMemo(() => {
-		if (!effectiveMessage) {
-			return { content: "", isRichContent: false };
-		}
-
-		const raw = unescapeAiResponse(effectiveMessage);
-
-		if (isUser) {
-			return { content: raw, isRichContent: false };
-		}
-
-		if (containsHtml(raw)) {
-			return { content: sanitizeHtml(raw), isRichContent: true };
-		}
-
-		if (containsMarkdown(raw)) {
-			const parsed = parseMarkdown(raw);
-			return { content: sanitizeHtml(parsed), isRichContent: true };
-		}
-
-		// Plain text: linkify bare URLs and preserve newlines
-		const linkified = linkifyUrls(raw);
-		if (linkified !== raw) {
-			const withBreaks = linkified.replace(/\n/g, "<br>");
-			return { content: sanitizeHtml(withBreaks), isRichContent: true };
-		}
-		return { content: raw, isRichContent: false };
-	}, [effectiveMessage, isUser]);
-
-	// Don't render if there's no content and no tools.
-	if (!content && (!executedTools || executedTools.length === 0)) {
-		return null;
-	}
-
-	const rootClassName = classnames("nfd-ai-chat-message", `nfd-ai-chat-message--${displayType}`);
-
-	return (
-		<div className={rootClassName}>
-			{content &&
-				(isRichContent ? (
-					<>
-						{/* content is sanitized in the useMemo above (sanitizeHtml) */}
-						<div
-							className="nfd-ai-chat-message__content nfd-ai-chat-message__content--rich"
-							dangerouslySetInnerHTML={{ __html: content }}
-						/>
-					</>
-				) : (
-					<div
-						className="nfd-ai-chat-message__content nfd-ai-chat-message__content--pre-wrap"
-						style={{ whiteSpace: "pre-wrap" }}
-					>
-						{content}
-					</div>
-				))}
-			{executedTools && executedTools.length > 0 && (
-				<ToolExecutionList executedTools={executedTools} toolResults={toolResults} />
-			)}
-		</div>
-	);
-};
-
-export default ChatMessage;

package/src/components/chat/ChatMessages.jsx

@@ -1,137 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useEffect, useRef, useCallback, useState } from "@wordpress/element";
-import { __ } from "@wordpress/i18n";
-
-/**
- * Internal dependencies
- */
-import classnames from "classnames";
-import ErrorAlert from "../ui/ErrorAlert";
-import TypingIndicator from "../ui/TypingIndicator";
-import ChatMessage from "./ChatMessage";
-
-/**
- * ChatMessages Component
- *
- * Scrollable container for all chat messages.
- * Auto-scrolls to bottom when new messages arrive or when the last message content grows (e.g. typing animation).
- *
- * @param {Object}   props                    - The component props.
- * @param {Array}    props.messages           - The messages to display.
- * @param {boolean}  props.isLoading          - Whether the AI is generating a response.
- * @param {string}   props.error              - Error message to display (optional).
- * @param {string}   props.status             - The current status.
- * @param {Object}   props.activeToolCall     - The currently executing tool call (optional).
- * @param {string}   props.toolProgress       - Real-time progress message (optional).
- * @param {Array}    props.executedTools      - List of completed tool executions (optional).
- * @param {Array}    props.pendingTools       - List of pending tools to execute (optional).
- * @param {Function} [props.onRetry]                  - Callback when user clicks Retry (e.g. after connection failed).
- * @param {boolean}  [props.connectionFailed]         - Whether connection has failed (show Retry without red error).
- * @param {boolean}  [props.isConnectingOrReconnecting] - When true, show a single "Connecting...." assistant message.
- * @param {string}   [props.messageBubbleStyle]       - 'bubbles' (default) or 'minimal'. Controls container and message bubble styling.
- * @return {JSX.Element} The ChatMessages component.
- */
-const ChatMessages = ({
-	messages = [],
-	isLoading = false,
-	error = null,
-	status = null,
-	activeToolCall = null,
-	toolProgress = null,
-	executedTools = [],
-	pendingTools = [],
-	onRetry,
-	connectionFailed = false,
-	isConnectingOrReconnecting = false,
-	messageBubbleStyle = "bubbles",
-}) => {
-	const scrollContainerRef = useRef(null);
-	const [scrollTrigger, setScrollTrigger] = useState(0);
-
-	const scrollToBottom = useCallback(() => {
-		const el = scrollContainerRef.current;
-		if (!el) {
-			return;
-		}
-		el.scrollTo({
-			top: el.scrollHeight - el.clientHeight,
-			behavior: "smooth",
-		});
-	}, []);
-
-	useEffect(() => {
-		scrollToBottom();
-	}, [messages, isLoading, toolProgress, scrollTrigger, scrollToBottom]);
-
-	// Bump scroll trigger so the scroll effect runs again when the last message's content grows (e.g. typing).
-	const onContentGrow = useCallback(() => {
-		setScrollTrigger((t) => t + 1);
-	}, []);
-
-	// Only show executed tools in TypingIndicator when there is active or pending tool work.
-	const hasActiveToolExecution =
-		activeToolCall || executedTools.length > 0 || pendingTools.length > 0;
-
-	const messagesClassName = classnames("nfd-ai-chat-messages", {
-		"nfd-ai-chat-messages--minimal": messageBubbleStyle === "minimal",
-	});
-
-	return (
-		<div ref={scrollContainerRef} className={messagesClassName}>
-			{messages.length > 0 &&
-				messages.map((msg, index) => {
-					// Animate typing only for the last assistant message that was received live (not loaded from history/restore)
-					const isLastAssistant =
-						index === messages.length - 1 && (msg.type === "assistant" || msg.role === "assistant");
-					return (
-						<ChatMessage
-							key={msg.id || index}
-							message={msg.content}
-							type={msg.type}
-							animateTyping={isLastAssistant && msg.animateTyping === true}
-							onContentGrow={isLastAssistant ? onContentGrow : undefined}
-							executedTools={msg.executedTools}
-							toolResults={msg.toolResults}
-						/>
-					);
-				})}
-			{isConnectingOrReconnecting && !connectionFailed && (
-				<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">
-								{__("Connecting....", "wp-module-ai-chat")}
-							</span>
-						</div>
-					</div>
-				</div>
-			)}
-			{error && <ErrorAlert message={error} />}
-			{onRetry && (error || connectionFailed) && (
-				<p className="nfd-ai-chat-messages__retry">
-					<button type="button" className="nfd-ai-chat-messages__retry-button" onClick={onRetry}>
-						{__("Retry", "wp-module-ai-chat")}
-					</button>
-				</p>
-			)}
-			{isLoading && (
-				<TypingIndicator
-					status={status}
-					activeToolCall={activeToolCall}
-					toolProgress={toolProgress}
-					executedTools={hasActiveToolExecution ? executedTools : []}
-					pendingTools={pendingTools}
-				/>
-			)}
-		</div>
-	);
-};
-
-export default ChatMessages;

package/src/components/chat/WelcomeScreen.jsx

@@ -1,115 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from "@wordpress/i18n";
-import { useState, useEffect, useRef } from "@wordpress/element";
-
-/**
- * Internal dependencies
- */
-import AILogo from "../ui/AILogo";
-import SuggestionButton from "../ui/SuggestionButton";
-
-const TYPING_SPEED_MS = 40;
-
-/**
- * WelcomeScreen Component
- *
- * Displays the welcome screen with AI avatar, introduction message, and suggestion tags.
- *
- * @param {Object}   props                 - The component props.
- * @param {Function} props.onSendMessage   - Function to call when a suggestion is clicked.
- * @param {string}   props.title           - Custom welcome title (optional).
- * @param {string}   props.subtitle        - Custom welcome subtitle (optional).
- * @param {Array}    props.suggestions     - Custom suggestions array (optional).
- * @param {boolean}  props.showSuggestions - Whether to show suggestions (default: false).
- * @param {boolean}  props.animateWelcome  - Whether to type the welcome text (default: false).
- * @return {JSX.Element} The WelcomeScreen component.
- */
-const WelcomeScreen = ({
-	onSendMessage,
-	title,
-	subtitle,
-	suggestions = [],
-	showSuggestions = false,
-	animateWelcome = false,
-}) => {
-	const defaultTitle = __("Hi, I'm your AI assistant.", "wp-module-ai-chat");
-	const defaultSubtitle = __("How can I help you today?", "wp-module-ai-chat");
-
-	const titleText = title || defaultTitle;
-	const subtitleText = subtitle || defaultSubtitle;
-	const fullText = `${titleText} ${subtitleText}`;
-
-	const [displayedLength, setDisplayedLength] = useState(0);
-	const timeoutRef = useRef(null);
-
-	useEffect(() => {
-		if (!animateWelcome) {
-			setDisplayedLength(fullText.length);
-			return;
-		}
-		setDisplayedLength(0);
-		const animate = () => {
-			setDisplayedLength((prev) => {
-				if (prev >= fullText.length) {
-					return prev;
-				}
-				timeoutRef.current = setTimeout(animate, TYPING_SPEED_MS);
-				return prev + 1;
-			});
-		};
-		timeoutRef.current = setTimeout(animate, TYPING_SPEED_MS);
-		return () => {
-			if (timeoutRef.current) {
-				clearTimeout(timeoutRef.current);
-			}
-		};
-	}, [animateWelcome, fullText]);
-
-	const showTyping = animateWelcome && displayedLength < fullText.length;
-	const displayedTitle =
-		showTyping && displayedLength <= titleText.length
-			? titleText.slice(0, displayedLength)
-			: titleText;
-	// fullText is "title + space + subtitle"; the -1 below accounts for the space when slicing into subtitle.
-	let displayedSubtitle = subtitleText;
-	if (showTyping && displayedLength > titleText.length) {
-		displayedSubtitle = subtitleText.slice(0, displayedLength - titleText.length - 1);
-	} else if (showTyping) {
-		displayedSubtitle = "";
-	}
-
-	return (
-		<div className="nfd-ai-chat-welcome">
-			<div className="nfd-ai-chat-welcome__content">
-				<div className="nfd-ai-chat-welcome__avatar">
-					<AILogo width={64} height={64} />
-				</div>
-				<div className="nfd-ai-chat-welcome__message">
-					<div className="nfd-ai-chat-welcome__title">{displayedTitle}</div>
-					<div className="nfd-ai-chat-welcome__subtitle">
-						{displayedSubtitle}
-						{showTyping && displayedLength < fullText.length && (
-							<span className="nfd-ai-chat-welcome__cursor" aria-hidden="true" />
-						)}
-					</div>
-				</div>
-			</div>
-			{showSuggestions && suggestions.length > 0 && (
-				<div className="nfd-ai-chat-suggestions">
-					{suggestions.map((suggestion, index) => (
-						<SuggestionButton
-							key={suggestion.action ?? suggestion.text ?? index}
-							icon={suggestion.icon}
-							text={suggestion.text}
-							onClick={() => onSendMessage(suggestion.action || suggestion.text)}
-						/>
-					))}
-				</div>
-			)}
-		</div>
-	);
-};
-
-export default WelcomeScreen;

package/src/components/icons/CloseIcon.jsx

@@ -1,27 +0,0 @@
-/**
- * Close (×) icon for actions. Inline SVG for accessibility.
- *
- * @param {Object} props - SVG props (e.g. className, aria-*).
- * @return {JSX.Element} Close icon element.
- */
-const CloseIcon = (props) => (
-	<svg
-		width="16"
-		height="16"
-		viewBox="0 0 24 24"
-		xmlns="http://www.w3.org/2000/svg"
-		aria-hidden="true"
-		focusable="false"
-		{...props}
-	>
-		<path
-			d="M18 6L6 18M6 6l12 12"
-			stroke="currentColor"
-			strokeWidth="2"
-			strokeLinecap="round"
-			strokeLinejoin="round"
-		/>
-	</svg>
-);
-
-export default CloseIcon;

package/src/components/icons/SparklesOutlineIcon.jsx

@@ -1,30 +0,0 @@
-/**
- * Outline sparkles icon (decorative). Inline SVG for accessibility.
- *
- * @param {Object} props - SVG props (e.g. width, height, className).
- * @return {JSX.Element} Sparkles icon element.
- */
-const SparklesOutlineIcon = (props) => (
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		width="24"
-		height="24"
-		viewBox="0 0 24 24"
-		fill="none"
-		stroke="currentColor"
-		strokeWidth="2"
-		strokeLinecap="round"
-		strokeLinejoin="round"
-		aria-hidden="true"
-		focusable="false"
-		{...props}
-	>
-		<path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" />
-		<path d="M5 3v4" />
-		<path d="M19 17v4" />
-		<path d="M3 5h4" />
-		<path d="M17 19h4" />
-	</svg>
-);
-
-export default SparklesOutlineIcon;

package/src/components/icons/index.js

@@ -1,5 +0,0 @@
-/**
- * Icon components. Export individually for tree-shaking and clear imports.
- */
-export { default as CloseIcon } from "./CloseIcon";
-export { default as SparklesOutlineIcon } from "./SparklesOutlineIcon";

package/src/components/ui/AILogo.jsx

@@ -1,47 +0,0 @@
-/**
- * Filled sparks icon (matches editor-chat sparks.svg).
- * Inlined to avoid SVG loader dependency across consuming projects.
- *
- * @param {Object} props             - Props to spread onto the SVG element.
- * @param {number} [props.width=24]  - SVG width in pixels.
- * @param {number} [props.height=24] - SVG height in pixels.
- * @return {JSX.Element} Inline SVG sparks icon.
- */
-const SparksIcon = ({ width = 24, height = 24, ...props }) => (
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		viewBox="0 0 30 30"
-		width={width}
-		height={height}
-		{...props}
-	>
-		<path d="M14.217,19.707l-1.112,2.547c-0.427,0.979-1.782,0.979-2.21,0l-1.112-2.547c-0.99-2.267-2.771-4.071-4.993-5.057L1.73,13.292c-0.973-0.432-0.973-1.848,0-2.28l2.965-1.316C6.974,8.684,8.787,6.813,9.76,4.47l1.126-2.714c0.418-1.007,1.81-1.007,2.228,0L14.24,4.47c0.973,2.344,2.786,4.215,5.065,5.226l2.965,1.316c0.973,0.432,0.973,1.848,0,2.28l-3.061,1.359C16.988,15.637,15.206,17.441,14.217,19.707z" />
-		<path d="M24.481,27.796l-0.339,0.777c-0.248,0.569-1.036,0.569-1.284,0l-0.339-0.777c-0.604-1.385-1.693-2.488-3.051-3.092l-1.044-0.464c-0.565-0.251-0.565-1.072,0-1.323l0.986-0.438c1.393-0.619,2.501-1.763,3.095-3.195l0.348-0.84c0.243-0.585,1.052-0.585,1.294,0l0.348,0.84c0.594,1.432,1.702,2.576,3.095,3.195l0.986,0.438c0.565,0.251,0.565,1.072,0,1.323l-1.044,0.464C26.174,25.308,25.085,26.411,24.481,27.796z" />
-	</svg>
-);
-
-/**
- * AILogo Component
- *
- * Displays the filled sparks icon inside a gradient circle.
- * Used on welcome screens and as the main AI assistant avatar.
- *
- * @param {Object} props        - The component props.
- * @param {number} props.width  - The width of the logo (default: 24).
- * @param {number} props.height - The height of the logo (default: 24).
- * @return {JSX.Element} Avatar wrapper with gradient circle and sparks icon.
- */
-const AILogo = ({ width = 24, height = 24 }) => (
-	<div
-		className="nfd-ai-chat-avatar"
-		style={{
-			width,
-			height,
-		}}
-	>
-		{/* Scale icon to ~62.5% of avatar so it fits inside the gradient circle. */}
-		<SparksIcon width={width * 0.625} height={height * 0.625} />
-	</div>
-);
-
-export default AILogo;

package/src/components/ui/BluBetaHeading.jsx

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

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

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

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