@newfold/wp-module-ai-chat 1.0.0

package/src/styles/_history.scss

@@ -0,0 +1,180 @@
+/* Chat history list and dropdown - shared across help center and editor chat */
+
+.nfd-ai-chat-history-dropdown-wrapper {
+	display: flex;
+	align-items: center;
+}
+
+.nfd-ai-chat-history-dropdown-trigger {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 28px;
+	height: 28px;
+	padding: 0;
+	border: none;
+	background: transparent;
+	color: #1e1e1e;
+	cursor: pointer;
+	border-radius: 4px;
+	transition: background-color 0.15s ease, color 0.15s ease;
+
+	&:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	&:hover:not(:disabled) {
+		background-color: #f5f5f5;
+	}
+
+	&.is-open {
+		background-color: #f5f5f5;
+	}
+
+	svg {
+		display: block;
+	}
+}
+
+.nfd-ai-chat-history-dropdown {
+	min-width: 220px;
+	max-width: min(280px, calc(100vw - 16px));
+	max-height: 240px;
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+	background: #fff;
+	border: 1px solid #e5e7eb;
+	border-radius: 6px;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+
+	[dir="rtl"] & {
+		left: auto;
+		right: auto;
+		inset-inline-end: 0;
+	}
+}
+
+.nfd-ai-chat-history-dropdown-inner {
+	overflow-y: auto;
+	max-height: 240px;
+	padding: 4px 0;
+}
+
+.nfd-ai-chat-history-list {
+	margin-top: 20px;
+	padding-top: 20px;
+	border-top: 1px solid #e0e0e0;
+}
+
+.nfd-ai-chat-history-dropdown-inner .nfd-ai-chat-history-list {
+	margin-top: 0;
+	padding-top: 0;
+	border-top: none;
+	padding-left: 8px;
+	padding-right: 8px;
+}
+
+.nfd-ai-chat-history-dropdown-inner .nfd-ai-chat-history-list--empty {
+	padding: 12px 8px;
+	font-size: 12px;
+	color: #6b7280;
+	text-align: center;
+}
+
+.nfd-ai-chat-history-item__title {
+	flex: 1;
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	color: #336ad7;
+}
+
+.nfd-ai-chat-history-item {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	cursor: pointer;
+	color: #374151;
+	font-size: 12px;
+	padding: 6px 4px;
+	transition: background-color 0.12s ease, color 0.12s ease;
+	border-radius: 4px;
+
+	&:hover {
+		background-color: #f3f4f6;
+		color: #1d4ed8;
+
+		.nfd-ai-chat-history-item__title {
+			text-decoration: underline;
+		}
+	}
+
+	&--disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	svg:not(.nfd-ai-chat-history-item__delete-icon) {
+		width: 14px;
+		height: 14px;
+		flex-shrink: 0;
+		stroke: currentcolor;
+	}
+}
+
+.nfd-ai-chat-history-dropdown-inner .nfd-ai-chat-history-item {
+	min-height: 36px;
+	padding: 6px 4px;
+	box-sizing: border-box;
+	gap: 8px;
+}
+
+.nfd-ai-chat-history-item__content {
+	flex: 1;
+	min-width: 0;
+	display: flex;
+	align-items: center;
+	gap: 6px;
+}
+
+.nfd-ai-chat-history-item__meta {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	flex-shrink: 0;
+}
+
+.nfd-ai-chat-history-item__time {
+	font-size: 11px;
+	color: #9ca3af;
+	font-weight: 400;
+}
+
+.nfd-ai-chat-history-item__delete {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 22px;
+	height: 22px;
+	padding: 0;
+	border: none;
+	background: transparent;
+	color: #9ca3af;
+	cursor: pointer;
+	border-radius: 4px;
+	transition: color 0.12s ease, background-color 0.12s ease;
+	flex-shrink: 0;
+
+	&:hover {
+		color: #dc2626;
+		background-color: #fef2f2;
+	}
+
+	&:focus-visible {
+		outline: 1px solid #2563eb;
+		outline-offset: 1px;
+	}
+}

package/src/styles/_input.scss

@@ -0,0 +1,170 @@
+@use "mixins";
+
+.nfd-ai-chat-input {
+	padding: 16px;
+	background: var(--nfd-ai-chat-color-white);
+	z-index: 25;
+	position: relative;
+	border-top: 1px solid var(--nfd-ai-chat-color-border);
+
+	// Optional: remove top border via modifier or showTopBorder={false}
+	&--no-top-border {
+		border-top: none;
+	}
+}
+
+.nfd-ai-chat-input__disclaimer {
+	text-align: center;
+	font-size: 12px;
+	color: var(--nfd-ai-chat-color-grey-medium);
+	margin-top: 8px;
+	line-height: 1.4;
+
+	a {
+		color: var(--nfd-ai-chat-color-grey-dark);
+		text-decoration: none;
+		font-weight: 500;
+
+		&:hover {
+			text-decoration: underline;
+		}
+	}
+}
+
+.nfd-ai-chat-input__container {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	background: var(--nfd-ai-chat-color-white);
+	border-radius: 12px;
+	padding: 12px;
+	border: 1px solid var(--nfd-ai-chat-color-border);
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+	transition: all 0.2s ease;
+
+	&:focus-within {
+		box-shadow: 0 2px 12px rgba(34, 113, 177, 0.25);
+	}
+}
+
+.nfd-ai-chat-input__textarea {
+	width: 100%;
+	border: none;
+	background: transparent;
+	resize: none;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+	font-size: var(--nfd-ai-chat-font-size-base);
+	line-height: 1.5;
+	padding: 4px;
+	color: var(--nfd-ai-chat-color-text);
+	min-height: 24px;
+	max-height: 200px;
+	overflow-y: hidden; // Default to hidden, will be set to auto via JS when content overflows
+
+	&:focus {
+		outline: none;
+		border: none;
+		box-shadow: none;
+	}
+
+	&::placeholder {
+		color: var(--nfd-ai-chat-color-grey-placeholder);
+	}
+
+	&:disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+		box-shadow: none;
+	}
+
+	@include mixins.custom-scrollbar;
+}
+
+.nfd-ai-chat-input__actions {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: 4px;
+	flex-wrap: wrap;
+}
+
+.components-button.nfd-ai-chat-input__submit,
+.components-button.nfd-ai-chat-input__stop {
+	flex-shrink: 0;
+	min-width: auto;
+	width: 28px;
+	height: 28px;
+	padding: 0;
+	stroke: var(--nfd-ai-chat-color-grey-dark);
+	background: var(--nfd-ai-chat-color-background);
+	border: none;
+	border-radius: 50%;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: all 0.15s ease;
+	margin-left: auto;
+
+	svg {
+		display: block;
+		fill: none;
+		width: 16px;
+		height: 16px;
+	}
+}
+
+.components-button.nfd-ai-chat-input__submit {
+
+	&:disabled {
+		opacity: 0.4;
+		stroke: var(--nfd-ai-chat-color-grey-medium);
+		background: var(--nfd-ai-chat-color-background);
+		cursor: not-allowed;
+	}
+
+	&:hover:not(:disabled) {
+		stroke: var(--nfd-ai-chat-color-primary);
+		background: var(--nfd-ai-chat-color-primary-light-12);
+		transform: translateY(-1px);
+		box-shadow: var(--nfd-ai-chat-shadow-sm);
+		transition: all 0.15s ease;
+	}
+
+	&:focus:not(:disabled) {
+		outline: none;
+		stroke: var(--nfd-ai-chat-color-primary);
+		background: var(--nfd-ai-chat-color-primary-light-16);
+	}
+
+	&:active:not(:disabled) {
+		transform: translateY(0);
+		stroke: var(--nfd-ai-chat-color-primary-hover);
+		background: var(--nfd-ai-chat-color-primary-light-20);
+	}
+}
+
+.components-button.nfd-ai-chat-input__stop {
+	stroke: var(--nfd-ai-chat-color-error);
+	color: var(--nfd-ai-chat-color-error);
+
+	&:disabled,
+	&[aria-busy="true"] {
+		opacity: 0.5;
+		cursor: not-allowed;
+		pointer-events: none;
+	}
+
+	&:hover:not(:disabled) {
+		background: var(--nfd-ai-chat-color-error-alpha-10);
+		stroke: var(--nfd-ai-chat-color-error-hover);
+		color: var(--nfd-ai-chat-color-error-hover);
+		transform: translateY(-1px);
+		box-shadow: var(--nfd-ai-chat-shadow-sm);
+	}
+
+	&:active:not(:disabled) {
+		transform: translateY(0);
+		background: var(--nfd-ai-chat-color-error-alpha-15);
+	}
+}

package/src/styles/_messages.scss

@@ -0,0 +1,272 @@
+@use "mixins";
+
+.nfd-ai-chat-messages {
+	display: flex;
+	flex: 1 1 0%; // Use 0% basis to properly fill flex container
+	flex-direction: column;
+	overflow-y: auto;
+	overflow-x: hidden;
+	scroll-behavior: smooth;
+	padding: var(--nfd-ai-chat-spacing-lg) var(--nfd-ai-chat-spacing-lg);
+	gap: var(--nfd-ai-chat-spacing-md);
+	min-height: 0;
+	max-height: 100%; // Don't exceed parent height
+	background: var(--nfd-ai-chat-color-white);
+
+	@include mixins.custom-scrollbar;
+
+	&__retry {
+		margin: 0 0 var(--nfd-ai-chat-spacing-sm);
+	}
+
+	&__retry-button {
+		background: none;
+		border: none;
+		padding: 0;
+		font-size: inherit;
+		font-family: inherit;
+		color: var(--nfd-ai-chat-color-primary);
+		cursor: pointer;
+		text-decoration: underline;
+
+		&:hover {
+			text-decoration: none;
+		}
+	}
+
+	// Minimal style: transparent container; user = grey bubble only; assistant = no background (plain text).
+	&--minimal {
+		background: transparent;
+
+		.nfd-ai-chat-message--assistant .nfd-ai-chat-message__content {
+			background: transparent;
+			border: none;
+			box-shadow: none;
+			padding: 4px 0 0 0;
+		}
+
+		.nfd-ai-chat-message--user .nfd-ai-chat-message__content {
+			background: var(--nfd-ai-chat-color-background);
+			color: var(--nfd-ai-chat-color-text);
+			box-shadow: none;
+		}
+	}
+}
+
+.nfd-ai-chat-message {
+	display: flex;
+	gap: 12px;
+	align-items: flex-start;
+	font-size: var(--nfd-ai-chat-font-size-base);
+
+	.nfd-ai-chat-message__content {
+
+		> * {
+			margin-bottom: 1rem;
+		}
+
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
+			line-height: 1.2;
+			font-weight: 600;
+			margin-top: 1.5rem;
+			margin-bottom: 0.75rem;
+			color: var(--nfd-ai-chat-color-text);
+		}
+
+		h1 {
+			font-size: var(--nfd-ai-chat-font-size-xl);
+			margin-top: 0;
+		}
+
+		h2 {
+			font-size: var(--nfd-ai-chat-font-size-lg);
+		}
+
+		h3 {
+			font-size: var(--nfd-ai-chat-font-size-md);
+			text-transform: initial;
+		}
+
+		h4 {
+			font-size: var(--nfd-ai-chat-font-size-md);
+		}
+
+		h5 {
+			font-size: var(--nfd-ai-chat-font-size-sm);
+		}
+
+		h6 {
+			font-size: var(--nfd-ai-chat-font-size-sm);
+			font-weight: 500;
+		}
+
+		p {
+			font-size: var(--nfd-ai-chat-font-size-base);
+			line-height: 1.6;
+			margin-bottom: 1rem;
+		}
+
+		strong {
+			font-weight: 600;
+		}
+
+		em {
+			font-style: italic;
+		}
+
+		u {
+			text-decoration: underline;
+		}
+
+		s {
+			text-decoration: line-through;
+		}
+
+		mark {
+			background-color: var(--nfd-ai-chat-color-primary-light-20);
+			padding: 0.1em 0.2em;
+			border-radius: 2px;
+		}
+
+		small {
+			font-size: 0.875em;
+		}
+
+		a {
+			color: var(--nfd-ai-chat-color-primary);
+			text-decoration: none;
+
+			&:hover {
+				text-decoration: underline;
+			}
+		}
+
+		code {
+			background-color: var(--nfd-ai-chat-color-border);
+			padding: 0.2em 0.4em;
+			border-radius: 3px;
+			font-family: "Courier New", Courier, monospace;
+			font-size: 0.9em;
+		}
+
+		code.inline-code {
+			background-color: rgba(0, 0, 0, 0.06);
+			color: var(--nfd-ai-chat-color-text);
+			font-weight: 500;
+		}
+
+		ul,
+		ol {
+			margin: 1rem 0;
+			padding-left: 1.5rem;
+		}
+
+		ul {
+			list-style-type: disc;
+		}
+
+		ol {
+			list-style-type: decimal;
+		}
+
+		li {
+			margin-bottom: 0.5rem;
+			line-height: 1.5;
+		}
+
+		blockquote {
+			margin: 1.5rem 0;
+			padding: 1rem 1.5rem;
+			background-color: var(--nfd-ai-chat-color-background);
+			border-left: 4px solid var(--nfd-ai-chat-color-primary);
+			font-style: italic;
+			line-height: 1.6;
+		}
+
+		pre {
+			background-color: var(--nfd-ai-chat-color-background);
+			padding: 1rem;
+			border-radius: 4px;
+			overflow-x: auto;
+			margin: 1rem 0;
+			font-family: "Courier New", Courier, monospace;
+			font-size: 0.9em;
+			line-height: 1.4;
+		}
+
+		pre code {
+			background: none;
+			padding: 0;
+			border-radius: 0;
+		}
+
+		hr {
+			border: none;
+			border-top: 1px solid var(--nfd-ai-chat-color-grey-light);
+			margin: 2rem 0;
+		}
+
+	}
+
+	&--assistant {
+		flex-direction: column;
+		justify-content: flex-start;
+
+		.nfd-ai-chat-message__content {
+			flex: 1;
+			width: 100%;
+			min-width: 0; // Allow flex item to shrink so long text wraps
+			max-width: 85%;
+			line-height: 1.6;
+			color: var(--nfd-ai-chat-color-text);
+			background: var(--nfd-ai-chat-color-background);
+			padding: var(--nfd-ai-chat-spacing-md) var(--nfd-ai-chat-spacing-lg);
+			border-radius: var(--nfd-ai-chat-radius-lg);
+			border: 1px solid var(--nfd-ai-chat-color-border);
+			box-shadow: var(--nfd-ai-chat-shadow-sm);
+			white-space: pre-wrap;
+			overflow-wrap: break-word;
+			word-break: break-word;
+			overflow: hidden; // Prevent content from overflowing dialog
+
+			&--rich {
+				white-space: normal;
+
+				> *:first-child {
+					margin-top: 0;
+				}
+
+				> *:last-child {
+					margin-bottom: 0;
+				}
+			}
+
+			@media (max-width: 480px) {
+				max-width: 95%;
+			}
+		}
+	}
+
+	&--user {
+		justify-content: flex-end;
+
+		.nfd-ai-chat-message__content {
+			background: var(--nfd-ai-chat-color-primary, var(--nfd-ai-chat-color-background));
+			padding: 10px 16px;
+			border-radius: var(--nfd-ai-chat-radius-lg);
+			line-height: 1.5;
+			color: var(--nfd-ai-chat-color-white, var(--nfd-ai-chat-color-text-secondary));
+			max-width: 70%;
+			white-space: pre-wrap;
+			position: relative;
+			overflow-wrap: break-word;
+			box-shadow: var(--nfd-ai-chat-shadow-sm);
+			transition: transform 0.15s ease, box-shadow 0.15s ease;
+		}
+	}
+}

package/src/styles/_mixins.scss

@@ -0,0 +1,21 @@
+// Custom scrollbar mixin
+@mixin custom-scrollbar {
+
+	&::-webkit-scrollbar {
+		width: 8px;
+	}
+
+	&::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background: var(--nfd-ai-chat-color-border);
+		opacity: 0.8;
+		border-radius: 4px;
+
+		&:hover {
+			opacity: 1;
+		}
+	}
+}