@ckeditor/ckeditor5-ai 47.0.0-alpha.6 → 47.0.0-alpha.7

package/dist/index-editor.css

@@ -452,6 +452,11 @@
 			flex-grow:1;
 		}
 
+.ck.ck-tabs.ck-ai-tabs .ck-tab-panel.ck-tab-panel_disabled{
+			pointer-events:none;
+			opacity:0.5;
+		}
+
 .ck.ck-tabs.ck-ai-tabs.ck-ai-tabs__overlay{
 		position:fixed;
 		height:var(--ck-tabs-overlay-height);
@@ -1549,6 +1554,10 @@
 					padding-bottom:0;
 					margin-bottom:var(--ck-spacing-medium);
 				}
+.ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part .ck-ai-suggestion__body__content-part__content.ck.ck-content:not(:focus){
+					padding:0;
+					border:0;
+				}
 .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part:hover .ck-ai-suggestion__body__content-part__title .ck-toolbar{
 				visibility:visible;
 				opacity:1;
@@ -1619,6 +1628,11 @@
 	bottom:0;
 	transform:translateY(50%);
 }
+.ck.ck-ai-mini-toolbar .ck-ai-interaction-counter{
+		color:var(--ck-ai-chat-color-icon);
+		letter-spacing:2.6px;
+		font-family:var(--ck-ai-balloon-font-family);
+	}
 .ck.ck-ai-mini-toolbar .ck.ck-button{
 		font-size:.9em;
 		font-family:var(--ck-ai-chat-font-family);
@@ -1893,7 +1907,6 @@
 		.ck.ck-button.ck-ai-button-primary.ck-disabled{
 			color:var(--ck-ai-button-primary-disabled-color);
 			background-color:var(--ck-ai-button-primary-disabled-background-color);
-			cursor:not-allowed;
 		}
 .ck.ck-button.ck-ai-button-primary:disabled > .ck.ck-button__label,
 			.ck.ck-button.ck-ai-button-primary.ck-disabled > .ck.ck-button__label,
@@ -1918,7 +1931,6 @@
 			color:var(--ck-ai-button-secondary-disabled-color);
 			background-color:var(--ck-ai-button-secondary-disabled-background-color);
 			border:1px solid var(--ck-ai-button-secondary-disabled-border-color);
-			cursor:not-allowed;
 		}
 .ck.ck-button.ck-ai-button-secondary:disabled > .ck.ck-button__label,
 			.ck.ck-button.ck-ai-button-secondary.ck-disabled > .ck.ck-button__label,
@@ -1937,7 +1949,6 @@
 .ck.ck-button.ck-ai-button-tertiary-text:disabled,
 		.ck.ck-button.ck-ai-button-tertiary-text.ck-disabled{
 			color:var(--ck-ai-button-tertiary-disabled-text-color);
-			cursor:not-allowed;
 		}
 .ck.ck-button.ck-ai-button-tertiary-text:disabled > .ck.ck-button__label,
 			.ck.ck-button.ck-ai-button-tertiary-text.ck-disabled > .ck.ck-button__label,
@@ -1963,7 +1974,6 @@
 		.ck.ck-button.ck-ai-button-tertiary-filled.ck-disabled{
 			color:var(--ck-ai-button-tertiary-filled-disabled-color);
 			background-color:var(--ck-ai-button-tertiary-filled-disabled-background-color);
-			cursor:not-allowed;
 		}
 .ck.ck-button.ck-ai-button-tertiary-filled:disabled > .ck.ck-button__label,
 			.ck.ck-button.ck-ai-button-tertiary-filled.ck-disabled > .ck.ck-button__label,
@@ -2227,17 +2237,30 @@
 			margin:var(--ck-spacing-large) 0;
 		}
 
-.ck .ck-ai-chat-history .ck-ai-chat-history__empty .ck-ai-chat-history__open-chat-button{
-			font-size:0.9em;
-			border:none;
-			padding:0 var(--ck-spacing-standard);
-			min-height:22px;
-			height:22px;
-
-			background-color:var(--ck-ai-background-color-action-button);
-			color:var(--ck-ai-font-color-action-button);
+.ck .ck-ai-chat-history .ck-ai-chat-history__empty .ck-ai-chat__start-conversation{
+			font-size:11.7px;
+			min-height:unset;
+			border:1px solid var(--ck-ai-border-color-button);
+			border-radius:var(--ck-border-radius);
+			gap:var(--ck-spacing-small);
+			color:var(--ck-ai-chat-color-text);
 		}
 
+.ck .ck-ai-chat-history .ck-ai-chat-history__empty .ck-ai-chat__start-conversation:hover{
+				background-color:var(--ck-ai-chat-button-active-background-color);
+			}
+
+.ck .ck-ai-chat-history .ck-ai-chat-history__empty .ck-ai-chat__start-conversation > .ck-button__label{
+				line-height:1.4em;
+			}
+
+.ck .ck-ai-chat-history .ck-ai-chat-history__empty .ck-ai-chat__start-conversation > .ck-button__icon{
+				--ck-icon-font-size:.632em;
+
+				margin-inline-end:0;
+				color:var(--ck-ai-chat-color-text);
+			}
+
 .ck .ck-ai-chat-history .ck-confirm-view{
 		--ck-icon-font-size:.666em;
 		--ck-ui-component-min-height:1.7em;
@@ -2418,7 +2441,6 @@
 .ck.ck-button.ck-ai-button-primary:disabled{
 			color:var(--ck-ai-button-primary-disabled-color);
 			background-color:var(--ck-ai-button-primary-disabled-background-color);
-			cursor:not-allowed;
 		}
 .ck.ck-button.ck-ai-button-secondary{
 		color:var(--ck-ai-button-secondary-color);
@@ -2436,7 +2458,6 @@
 			color:var(--ck-ai-button-secondary-disabled-color);
 			background-color:var(--ck-ai-button-secondary-disabled-background-color);
 			border:1px solid var(--ck-ai-button-secondary-disabled-border-color);
-			cursor:not-allowed;
 		}
 
 .ck-ai-suggestion__container .ck.ck-ai-suggestion__loader{
@@ -2455,6 +2476,20 @@
 .ck-ai-suggestion__container .ck.ck-ai-suggestion__loader .ck-ai-suggestion__loader-text{
 		margin-left:var(--ck-spacing-medium);
 	}
+
+.ck-ai-suggestion__container .ck.ck-ai-suggestion__error{
+	padding:var(--ck-spacing-large) !important;
+	height:150px;
+}
+
+.ck-ai-suggestion__container .ck.ck-ai-suggestion__error .ck-ai-suggestion__error-text{
+		background-color:hsla(15, 100%, 97%, 1);
+		border:1px solid hsla(14, 100%, 68%, 1);
+		color:hsla(0, 0%, 20%, 1);
+		padding:var(--ck-spacing-medium);
+		display:block;
+		border-radius:var(--ck-border-radius);
+	}
 .ck span.ck-fake-ai-selection{
 	background:var(--ck-color-ai-selection);
 }
@@ -2463,8 +2498,8 @@
 	outline-color:var(--ck-color-ai-selection);
 }
 
-.ck.ck-dialog-overlay:has(.ai-balloon){
-	z-index:998;
+.ck.ck-balloon-panel.ck-dropdown-menu__nested-menu__panel.ck-ai-quick-actions-group-panel{
+	max-height:316px;
 }
 
 :root{
@@ -2923,8 +2958,9 @@
 		overflow:hidden;
 	}
 
-.ck-ai-review-mode__check-run-result > .ck-ai-review-mode__check-run-result-response.ck.ck-content{
+.ck-ai-review-mode__check-run-result > .ck-ai-review-mode__check-run-result-response.ck.ck-content:not(:focus){
 			padding:0;
+			border:0;
 		}
 
 .ck-ai-review-mode__check-run-result > .ck-ai-review-mode__check-run-result-response > *{

package/dist/index.css

@@ -575,6 +575,11 @@
 			flex-grow: 1;
 		}
 
+.ck.ck-tabs.ck-ai-tabs .ck-tab-panel.ck-tab-panel_disabled {
+			pointer-events: none;
+			opacity: 0.5;
+		}
+
 .ck.ck-tabs.ck-ai-tabs.ck-ai-tabs__overlay {
 		position: fixed;
 		height: var(--ck-tabs-overlay-height);
@@ -603,6 +608,7 @@
 .ck.ck-tabs.ck-ai-tabs.ck-ai-tabs__overlay.ck-tabs_right {
 			border-right: 0;
 		}
+
 /*
  * What you're currently looking at is the source code of a legally protected, proprietary software.
  * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
@@ -1857,6 +1863,11 @@
 					padding-bottom: 0;
 					margin-bottom: var(--ck-spacing-medium);
 				}
+.ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part .ck-ai-suggestion__body__content-part__content.ck.ck-content:not(:focus) {
+					/* Reset default padding and border of `ck-content` class. */
+					padding: 0;
+					border: 0;
+				}
 .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part:hover .ck-ai-suggestion__body__content-part__title .ck-toolbar {
 				visibility: visible;
 				opacity: 1;
@@ -1940,6 +1951,11 @@
 	bottom: 0;
 	transform: translateY(50%);
 }
+.ck.ck-ai-mini-toolbar .ck-ai-interaction-counter {
+		color: var(--ck-ai-chat-color-icon);
+		letter-spacing: 2.6px;
+		font-family: var(--ck-ai-balloon-font-family);
+	}
 .ck.ck-ai-mini-toolbar .ck.ck-button {
 		font-size: .9em;
 		font-family: var(--ck-ai-chat-font-family);
@@ -2021,6 +2037,7 @@
 			color: var(--ck-ai-chat-color-icon);
 		}
 .ck-ai-header > .ck.ck-button.ck-ai-chat__start-conversation {
+		/* TODO: Extract this to a separate class to avoid duplication (same component and styling in Chat history - empty viewr) */
 		/* Custom value unlike the rest of editor UI (derived from --ck-font-size-base, defaults to 13px). */
 		font-size: 11.7px;
 		min-height: unset;
@@ -2271,7 +2288,6 @@
 		.ck.ck-button.ck-ai-button-primary.ck-disabled {
 			color: var(--ck-ai-button-primary-disabled-color);
 			background-color: var(--ck-ai-button-primary-disabled-background-color);
-			cursor: not-allowed;
 		}
 .ck.ck-button.ck-ai-button-primary:disabled > .ck.ck-button__label,
 			.ck.ck-button.ck-ai-button-primary.ck-disabled > .ck.ck-button__label,
@@ -2296,7 +2312,6 @@
 			color: var(--ck-ai-button-secondary-disabled-color);
 			background-color: var(--ck-ai-button-secondary-disabled-background-color);
 			border: 1px solid var(--ck-ai-button-secondary-disabled-border-color);
-			cursor: not-allowed;
 		}
 .ck.ck-button.ck-ai-button-secondary:disabled > .ck.ck-button__label,
 			.ck.ck-button.ck-ai-button-secondary.ck-disabled > .ck.ck-button__label,
@@ -2315,7 +2330,6 @@
 .ck.ck-button.ck-ai-button-tertiary-text:disabled,
 		.ck.ck-button.ck-ai-button-tertiary-text.ck-disabled {
 			color: var(--ck-ai-button-tertiary-disabled-text-color);
-			cursor: not-allowed;
 		}
 .ck.ck-button.ck-ai-button-tertiary-text:disabled > .ck.ck-button__label,
 			.ck.ck-button.ck-ai-button-tertiary-text.ck-disabled > .ck.ck-button__label,
@@ -2341,7 +2355,6 @@
 		.ck.ck-button.ck-ai-button-tertiary-filled.ck-disabled {
 			color: var(--ck-ai-button-tertiary-filled-disabled-color);
 			background-color: var(--ck-ai-button-tertiary-filled-disabled-background-color);
-			cursor: not-allowed;
 		}
 .ck.ck-button.ck-ai-button-tertiary-filled:disabled > .ck.ck-button__label,
 			.ck.ck-button.ck-ai-button-tertiary-filled.ck-disabled > .ck.ck-button__label,
@@ -2630,17 +2643,34 @@
 			margin: var(--ck-spacing-large) 0;
 		}
 
-.ck .ck-ai-chat-history .ck-ai-chat-history__empty .ck-ai-chat-history__open-chat-button {
-			font-size: 0.9em;
-			border: none;
-			padding: 0 var(--ck-spacing-standard);
-			min-height: 22px;
-			height: 22px;
-
-			background-color: var(--ck-ai-background-color-action-button);
-			color: var(--ck-ai-font-color-action-button);
+.ck .ck-ai-chat-history .ck-ai-chat-history__empty .ck-ai-chat__start-conversation {
+			/* TODO: Extract this to a separate class to avoid duplication (same component and styling in Chat header) */
+			/* Custom value unlike the rest of editor UI (derived from --ck-font-size-base, defaults to 13px). */
+			font-size: 11.7px;
+			min-height: unset;
+			border: 1px solid var(--ck-ai-border-color-button);
+			border-radius: var(--ck-border-radius);
+			gap: var(--ck-spacing-small);
+			color: var(--ck-ai-chat-color-text);
 		}
 
+.ck .ck-ai-chat-history .ck-ai-chat-history__empty .ck-ai-chat__start-conversation:hover {
+				background-color: var(--ck-ai-chat-button-active-background-color);
+			}
+
+.ck .ck-ai-chat-history .ck-ai-chat-history__empty .ck-ai-chat__start-conversation > .ck-button__label {
+				/* Custom value unlike the rest of editor UI. */
+				line-height: 1.4em;
+			}
+
+.ck .ck-ai-chat-history .ck-ai-chat-history__empty .ck-ai-chat__start-conversation > .ck-button__icon {
+				/* Custom value unlike the rest of editor UI (defaults to 14px). See how it's used in the icon.css */
+				--ck-icon-font-size: .632em;
+
+				margin-inline-end: 0;
+				color: var(--ck-ai-chat-color-text);
+			}
+
 .ck .ck-ai-chat-history .ck-confirm-view {
 		--ck-icon-font-size: .666em;
 		--ck-ui-component-min-height: 1.7em;
@@ -2846,7 +2876,6 @@
 .ck.ck-button.ck-ai-button-primary:disabled {
 			color: var(--ck-ai-button-primary-disabled-color);
 			background-color: var(--ck-ai-button-primary-disabled-background-color);
-			cursor: not-allowed;
 		}
 .ck.ck-button.ck-ai-button-secondary {
 		color: var(--ck-ai-button-secondary-color);
@@ -2864,7 +2893,6 @@
 			color: var(--ck-ai-button-secondary-disabled-color);
 			background-color: var(--ck-ai-button-secondary-disabled-background-color);
 			border: 1px solid var(--ck-ai-button-secondary-disabled-border-color);
-			cursor: not-allowed;
 		}
 
 .ck-ai-suggestion__container .ck.ck-ai-suggestion__loader {
@@ -2884,6 +2912,20 @@
 		margin-left: var(--ck-spacing-medium);
 	}
 
+.ck-ai-suggestion__container .ck.ck-ai-suggestion__error {
+	padding: var(--ck-spacing-large) !important;
+	height: 150px;
+}
+
+.ck-ai-suggestion__container .ck.ck-ai-suggestion__error .ck-ai-suggestion__error-text {
+		background-color: hsla(15, 100%, 97%, 1);
+		border: 1px solid hsla(14, 100%, 68%, 1);
+		color: hsla(0, 0%, 20%, 1);
+		padding: var(--ck-spacing-medium);
+		display: block;
+		border-radius: var(--ck-border-radius);
+	}
+
 /*
  * Classes used by the "fake visual selection" displayed in the content
  * when the AI Balloon is open.
@@ -2898,8 +2940,9 @@
 	outline-color: var(--ck-color-ai-selection);
 }
 
-.ck.ck-dialog-overlay:has(.ai-balloon) {
-	z-index: 998;
+.ck.ck-balloon-panel.ck-dropdown-menu__nested-menu__panel.ck-ai-quick-actions-group-panel {
+	/* Override the height of the panel because the default height adds 2px scrollbar. */
+	max-height: 316px;
 }
 /*
  * What you're currently looking at is the source code of a legally protected, proprietary software.
@@ -3408,9 +3451,10 @@
 		overflow: hidden;
 	}
 
-.ck-ai-review-mode__check-run-result > .ck-ai-review-mode__check-run-result-response.ck.ck-content {
-			/* Reset default padding of `ck-content`. */
+.ck-ai-review-mode__check-run-result > .ck-ai-review-mode__check-run-result-response.ck.ck-content:not(:focus) {
+			/* Reset default padding and border of `ck-content` class. */
 			padding: 0;
+			border: 0;
 		}
 
 .ck-ai-review-mode__check-run-result > .ck-ai-review-mode__check-run-result-response > * {
@@ -3484,6 +3528,7 @@
 		}
 
 .ck-ai-header > .ck.ck-button.ck-ai-chat__start-conversation {
+		/* TODO: Extract this to a separate class to avoid duplication (same component and styling in Chat history - empty viewr) */
 		/* Custom value unlike the rest of editor UI (derived from --ck-font-size-base, defaults to 13px). */
 		font-size: 11.7px;
 		min-height: unset;