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

package/src/styles/_history.scss

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

@@ -1,170 +0,0 @@
-@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

@@ -1,272 +0,0 @@
-@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

@@ -1,21 +0,0 @@
-// 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;
-		}
-	}
-}