@newfold/wp-module-ai-chat 1.0.0

package/src/styles/_typing-indicator.scss

@@ -0,0 +1,162 @@
+/* Typing Indicator */
+.nfd-ai-chat-typing-indicator {
+	display: flex;
+	align-items: center;
+	gap: var(--nfd-ai-chat-spacing-sm);
+	padding: var(--nfd-ai-chat-spacing-xs) 0;
+}
+
+.nfd-ai-chat-typing-indicator__dots {
+	display: flex;
+	align-items: center;
+	gap: var(--nfd-ai-chat-spacing-xs);
+
+	span {
+		width: 6px;
+		height: 6px;
+		border-radius: 50%;
+		background: var(--nfd-ai-chat-color-grey-dark);
+		animation: nfd-ai-chat-typing-bounce 1.4s ease-in-out infinite both;
+
+		&:nth-child(2) {
+			animation-delay: 0.2s;
+		}
+
+		&:nth-child(3) {
+			animation-delay: 0.4s;
+		}
+	}
+}
+
+@keyframes nfd-ai-chat-typing-bounce {
+
+	0%,
+	60%,
+	100% {
+		transform: translateY(0);
+	}
+
+	30% {
+		transform: translateY(-4px);
+	}
+}
+
+.nfd-ai-chat-typing-indicator__text {
+	font-size: var(--nfd-ai-chat-font-size-base);
+	color: var(--nfd-ai-chat-color-grey-dark);
+	min-width: 0;
+}
+
+.nfd-ai-chat-typing-indicator__reasoning {
+	font-size: var(--nfd-ai-chat-font-size-sm);
+	color: var(--nfd-ai-chat-color-grey-medium);
+	font-style: italic;
+	line-height: 1.4;
+	margin-top: 4px;
+}
+
+@keyframes nfd-ai-chat-spin {
+
+	from {
+		transform: rotate(0deg);
+	}
+
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+/* Tool Execution */
+.nfd-ai-chat-tool-execution {
+	width: 100%;
+}
+
+.nfd-ai-chat-tool-execution__header {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	padding: 4px 0;
+	background: none;
+	border: none;
+	cursor: pointer;
+	font-size: var(--nfd-ai-chat-font-size-sm);
+	color: var(--nfd-ai-chat-color-grey-dark);
+	width: 100%;
+	text-align: left;
+
+	&:hover {
+		color: var(--nfd-ai-chat-color-text);
+	}
+}
+
+.nfd-ai-chat-tool-execution__chevron {
+	flex-shrink: 0;
+}
+
+.nfd-ai-chat-tool-execution__header-count {
+	color: var(--nfd-ai-chat-color-grey-medium);
+	margin-left: 4px;
+}
+
+.nfd-ai-chat-tool-execution__list {
+	display: flex;
+	flex-direction: column;
+}
+
+.nfd-ai-chat-tool-execution__item {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	padding: 4px 0;
+}
+
+.nfd-ai-chat-tool-execution__item-header {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+}
+
+.nfd-ai-chat-tool-execution__icon {
+	flex-shrink: 0;
+
+	&--active {
+		color: var(--nfd-ai-chat-color-primary);
+		animation: nfd-ai-chat-spin 1s linear infinite;
+	}
+
+	&--success {
+		color: var(--nfd-ai-chat-color-success);
+	}
+
+	&--error {
+		color: var(--nfd-ai-chat-color-error);
+	}
+
+	&--pending {
+		color: var(--nfd-ai-chat-color-grey-medium);
+	}
+}
+
+.nfd-ai-chat-tool-execution__item-title {
+	font-size: var(--nfd-ai-chat-font-size-sm);
+	color: var(--nfd-ai-chat-color-text);
+}
+
+.nfd-ai-chat-tool-execution__item-params {
+	font-size: var(--nfd-ai-chat-font-size-sm);
+	color: var(--nfd-ai-chat-color-grey-medium);
+	margin-left: 4px;
+}
+
+.nfd-ai-chat-tool-execution__item-progress {
+	font-size: var(--nfd-ai-chat-font-size-sm);
+	color: var(--nfd-ai-chat-color-grey-dark);
+	padding-left: 18px;
+}
+
+.nfd-ai-chat-tool-execution__item-summary {
+	font-size: var(--nfd-ai-chat-font-size-sm);
+	color: var(--nfd-ai-chat-color-grey-medium);
+	padding-left: 18px;
+	margin-top: 2px;
+}

package/src/styles/_ui.scss

@@ -0,0 +1,173 @@
+/* AI Avatar */
+.nfd-ai-chat-avatar {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: var(--nfd-ai-chat-radius-full);
+	background: linear-gradient(135deg, var(--nfd-ai-chat-color-primary) 0%, var(--nfd-ai-chat-color-primary-hover) 100%);
+	color: var(--nfd-ai-chat-color-white);
+	transition: transform 0.2s ease, box-shadow 0.2s ease;
+
+	svg {
+		fill: currentcolor;
+	}
+}
+
+/* Chat header - white background, AILogo + pill + actions */
+.nfd-ai-chat-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 12px;
+	background-color: var(--nfd-ai-chat-color-white);
+	padding: 12px 16px;
+	flex-shrink: 0;
+}
+
+/* Header logo: no background, plain icon (override brand) */
+.nfd-ai-chat-header .nfd-ai-chat-header__brand .nfd-ai-chat-avatar {
+	background: none;
+	color: var(--nfd-ai-chat-color-text, #1e1e1e);
+	box-shadow: none;
+}
+
+.nfd-ai-chat-header__brand {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	color: var(--nfd-ai-chat-color-text, #1e1e1e);
+}
+
+.nfd-ai-chat-header__title {
+	font-size: var(--nfd-ai-chat-font-size-base);
+	font-weight: 600;
+	color: var(--nfd-ai-chat-color-text, #1e1e1e);
+	line-height: 1;
+}
+
+.nfd-ai-chat-header__actions {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.nfd-ai-chat-header__btn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 28px;
+	height: 28px;
+	padding: 0;
+	border: none;
+	background: transparent;
+	color: var(--nfd-ai-chat-color-text, #1e1e1e);
+	cursor: pointer;
+	border-radius: var(--nfd-ai-chat-radius-sm, 4px);
+	transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.nfd-ai-chat-header__btn:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+.nfd-ai-chat-header__btn:hover:not(:disabled) {
+	background-color: var(--nfd-ai-chat-color-background, #f5f5f5);
+}
+
+.nfd-ai-chat-header__btn--new {
+	font-size: 16px;
+	line-height: 1;
+	font-weight: 300;
+}
+
+.nfd-ai-chat-header__btn--close svg {
+	display: block;
+}
+
+/* BETA badge - solid dark blue pill (matches editor-chat sidebar) */
+.nfd-ai-chat-blu-beta-badge {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 10px;
+	font-weight: 600;
+	padding: 4px 8px;
+	border-radius: 4px;
+	background-color: var(--nfd-ai-chat-color-primary);
+	color: var(--nfd-ai-chat-color-white);
+	text-transform: uppercase;
+	letter-spacing: 0.25px;
+	line-height: 1;
+}
+
+/* Error Alert */
+.nfd-ai-chat-error-alert {
+	display: flex;
+	align-items: flex-start;
+	gap: 12px;
+	padding: 12px 16px;
+	background: rgba(214, 54, 56, 0.08);
+	border: 1px solid var(--nfd-ai-chat-color-error);
+	border-radius: 8px;
+	margin: 8px 0;
+}
+
+.nfd-ai-chat-error-alert__icon {
+	flex-shrink: 0;
+	color: var(--nfd-ai-chat-color-error);
+	margin-top: 2px;
+}
+
+.nfd-ai-chat-error-alert__content {
+	flex: 1;
+	min-width: 0;
+	overflow: hidden;
+}
+
+.nfd-ai-chat-error-alert__message {
+	font-size: var(--nfd-ai-chat-font-size-base);
+	color: var(--nfd-ai-chat-color-error);
+	line-height: 1.5;
+	overflow-wrap: break-word;
+	word-break: break-word;
+	min-width: 0;
+}
+
+/* Suggestion Button */
+.components-button.nfd-ai-chat-suggestion {
+	display: flex;
+	align-items: center;
+	gap: var(--nfd-ai-chat-spacing-sm);
+	padding: var(--nfd-ai-chat-spacing-sm) var(--nfd-ai-chat-spacing-md);
+	background: var(--nfd-ai-chat-color-white);
+	border: 1px solid var(--nfd-ai-chat-color-border);
+	border-radius: var(--nfd-ai-chat-radius-full);
+	font-size: var(--nfd-ai-chat-font-size-sm);
+	color: var(--nfd-ai-chat-color-text-secondary);
+	cursor: pointer;
+	transition: all 0.15s ease;
+	box-shadow: var(--nfd-ai-chat-shadow-sm);
+
+	&:hover {
+		background: var(--nfd-ai-chat-color-background);
+		border-color: var(--nfd-ai-chat-color-primary);
+		color: var(--nfd-ai-chat-color-primary);
+		transform: translateY(-1px);
+		box-shadow: var(--nfd-ai-chat-shadow-md);
+	}
+
+	&:active {
+		transform: translateY(0);
+	}
+}
+
+.nfd-ai-chat-suggestion__icon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.nfd-ai-chat-suggestion__text {
+	white-space: nowrap;
+}

package/src/styles/_vars.scss

@@ -0,0 +1,103 @@
+/* -------------------------------------------------------------------------- */
+
+/*                         AI Chat CSS Variables                              */
+
+/* -------------------------------------------------------------------------- */
+
+:root {
+
+	/* Default/Base colors - can be overridden by brand-specific variables */
+	--nfd-ai-chat-color-primary: #2271b1;
+	--nfd-ai-chat-color-primary-hover: #135e96;
+	--nfd-ai-chat-color-primary-active: #0e4b72;
+	--nfd-ai-chat-color-primary-light-8: rgba(34, 113, 177, 0.08);
+	--nfd-ai-chat-color-primary-light-12: rgba(34, 113, 177, 0.12);
+	--nfd-ai-chat-color-primary-light-16: rgba(34, 113, 177, 0.16);
+	--nfd-ai-chat-color-primary-light-20: rgba(34, 113, 177, 0.2);
+
+	/* Grey colors */
+	--nfd-ai-chat-color-grey-dark: #666;
+	--nfd-ai-chat-color-grey-medium: #999;
+	--nfd-ai-chat-color-grey-light: #ddd;
+	--nfd-ai-chat-color-grey-placeholder: #9e9e9e;
+
+	/* Error/Danger colors */
+	--nfd-ai-chat-color-error: #d63638;
+	--nfd-ai-chat-color-error-hover: #b32d2e;
+	--nfd-ai-chat-color-error-active: #8a2424;
+	--nfd-ai-chat-color-error-alpha-10: rgba(214, 54, 56, 0.1);
+	--nfd-ai-chat-color-error-alpha-15: rgba(214, 54, 56, 0.15);
+
+	/* Success colors */
+	--nfd-ai-chat-color-success: #00a32a;
+
+	/* UI colors */
+	--nfd-ai-chat-color-border: #e0e0e0;
+	--nfd-ai-chat-color-background: #f5f5f5;
+	--nfd-ai-chat-color-text: #1e1e1e;
+	--nfd-ai-chat-color-text-secondary: #424242;
+	--nfd-ai-chat-color-white: #fff;
+
+	/* Typography */
+	--nfd-ai-chat-font-size-base: 14px;
+	--nfd-ai-chat-font-size-xl: 22px;
+	--nfd-ai-chat-font-size-lg: 20px;
+	--nfd-ai-chat-font-size-md: 16px;
+	--nfd-ai-chat-font-size-sm: 12px;
+	--nfd-ai-chat-font-size-xs: 10px;
+
+	/* Spacing */
+	--nfd-ai-chat-spacing-xs: 4px;
+	--nfd-ai-chat-spacing-sm: 8px;
+	--nfd-ai-chat-spacing-md: 16px;
+	--nfd-ai-chat-spacing-lg: 24px;
+	--nfd-ai-chat-spacing-xl: 32px;
+
+	/* Border radius */
+	--nfd-ai-chat-radius-sm: 4px;
+	--nfd-ai-chat-radius-md: 8px;
+	--nfd-ai-chat-radius-lg: 12px;
+	--nfd-ai-chat-radius-xl: 16px;
+	--nfd-ai-chat-radius-full: 9999px;
+
+	/* Shadows */
+	--nfd-ai-chat-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+	--nfd-ai-chat-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+	--nfd-ai-chat-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+/* -------------------------------------------------------------------------- */
+
+/*                         Brand-Specific Variables                          */
+
+/* -------------------------------------------------------------------------- */
+
+/* Bluehost Brand */
+.nfd-brand-bluehost,
+[data-brand="bluehost"] {
+
+	/* Primary Bluehost Blue - #0075FA */
+	--nfd-ai-chat-color-primary: #0075fa;
+	--nfd-ai-chat-color-primary-hover: #0066e0;
+	--nfd-ai-chat-color-primary-active: #0055c2;
+	--nfd-ai-chat-color-primary-light-8: rgba(0, 117, 250, 0.08);
+	--nfd-ai-chat-color-primary-light-12: rgba(0, 117, 250, 0.12);
+	--nfd-ai-chat-color-primary-light-16: rgba(0, 117, 250, 0.16);
+	--nfd-ai-chat-color-primary-light-20: rgba(0, 117, 250, 0.2);
+
+	/* Enhanced UI colors for professional look */
+	--nfd-ai-chat-color-background: #f8f9fa;
+	--nfd-ai-chat-color-border: #e5e7eb;
+	--nfd-ai-chat-color-text: #111827;
+	--nfd-ai-chat-color-text-secondary: #6b7280;
+}
+
+/* Add more brands here as needed */
+
+/* Example:
+.nfd-brand-hostgator,
+[data-brand="hostgator"] {
+	--nfd-ai-chat-color-primary: #FF6600;
+	...
+}
+*/

package/src/styles/_welcome.scss

@@ -0,0 +1,81 @@
+.nfd-ai-chat-welcome {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	text-align: center;
+	padding: var(--nfd-ai-chat-spacing-xl) var(--nfd-ai-chat-spacing-md);
+	flex: 1;
+	background: var(--nfd-ai-chat-color-white);
+}
+
+.nfd-ai-chat-welcome__content {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 16px;
+}
+
+.nfd-ai-chat-welcome__avatar {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-bottom: 24px;
+}
+
+/* Purplish gradient logo on welcome — higher specificity to override brand */
+.nfd-ai-chat-welcome .nfd-ai-chat-welcome__avatar .nfd-ai-chat-avatar {
+	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+	color: #fff;
+	box-shadow: none;
+}
+
+.nfd-ai-chat-welcome__message {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.nfd-ai-chat-welcome__title {
+	font-size: var(--nfd-ai-chat-font-size-lg);
+	font-weight: 600;
+	color: var(--nfd-ai-chat-color-text);
+}
+
+.nfd-ai-chat-welcome__subtitle {
+	font-size: var(--nfd-ai-chat-font-size-base);
+	color: var(--nfd-ai-chat-color-text-secondary);
+	line-height: 1.5;
+}
+
+.nfd-ai-chat-welcome__cursor {
+	display: inline-block;
+	width: 2px;
+	height: 1em;
+	margin-left: 2px;
+	vertical-align: text-bottom;
+	background: currentcolor;
+	animation: nfd-ai-chat-cursor-blink 0.8s step-end infinite;
+}
+
+@keyframes nfd-ai-chat-cursor-blink {
+
+	0%,
+	50% {
+		opacity: 1;
+	}
+
+	51%,
+	100% {
+		opacity: 0;
+	}
+}
+
+.nfd-ai-chat-suggestions {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	gap: var(--nfd-ai-chat-spacing-sm);
+	margin-top: var(--nfd-ai-chat-spacing-lg);
+	max-width: 400px;
+}

package/src/styles/app.scss

@@ -0,0 +1,10 @@
+/* AI Chat Core Styles */
+@use "vars";
+@use "mixins";
+@use "messages";
+@use "input";
+@use "welcome";
+@use "ui";
+@use "typing-indicator";
+@use "branding";
+@use "history";

package/src/utils/helpers.js

@@ -0,0 +1,75 @@
+/**
+ * Unescape AI response text so display shows normal quotes instead of \"
+ * Handles JSON-style escaped quotes that can appear in model/tool output.
+ *
+ * @param {string} text - Raw message text that may contain \" or \'
+ * @return {string} Text with escaped quotes replaced for display
+ */
+export const unescapeAiResponse = (text) => {
+	if (!text || typeof text !== "string") {
+		return text;
+	}
+	return text.replace(/\\"/g, '"').replace(/\\'/g, "'");
+};
+
+/**
+ * Simple hash function to create a unique identifier from a string
+ * Uses a variation of the djb2 hash algorithm
+ *
+ * @param {string} str - The string to hash
+ * @return {string} A hexadecimal hash string
+ */
+export const simpleHash = (str) => {
+	// Handle null, undefined, or empty strings
+	if (!str || typeof str !== "string") {
+		return "0";
+	}
+
+	let hash = 5381;
+	for (let i = 0; i < str.length; i++) {
+		// eslint-disable-next-line no-bitwise
+		hash = (hash << 5) + hash + str.charCodeAt(i); // hash * 33 + c
+		// eslint-disable-next-line no-bitwise
+		hash = hash | 0; // Convert to 32-bit integer
+	}
+	// Convert to unsigned and then to hex
+	// eslint-disable-next-line no-bitwise
+	return (hash >>> 0).toString(16);
+};
+
+/**
+ * Generate a unique session ID
+ *
+ * @return {string} New session ID
+ */
+export const generateSessionId = () => {
+	return crypto.randomUUID
+		? crypto.randomUUID()
+		: `${Date.now()}-${Math.random().toString(36).substring(2, 15)}`;
+};
+
+/**
+ * Debounce function
+ *
+ * @param {Function} func - Function to debounce
+ * @param {number}   wait - Wait time in milliseconds
+ * @return {Function} Debounced function
+ */
+export const debounce = (func, wait) => {
+	let timeout;
+	return function executedFunction(...args) {
+		const later = () => {
+			clearTimeout(timeout);
+			func(...args);
+		};
+		clearTimeout(timeout);
+		timeout = setTimeout(later, wait);
+	};
+};
+
+export default {
+	unescapeAiResponse,
+	simpleHash,
+	generateSessionId,
+	debounce,
+};