@newfold/wp-module-ai-chat 1.0.0

package/src/components/chat/ChatInput.jsx

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

package/src/components/chat/ChatMessage.jsx

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

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

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

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

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

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

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