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

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,
@@ -1475,6 +1481,9 @@
 					opacity: 0;
 				}
 			}
+.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-chat__feed__ai-suggestion__actions--no-animation {
+			transition: none;
+		}
 .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-suggestion__header__show-changes-toggle {
 			--ck-color-button-default-hover-background: var(--ck-ai-chat-feed-item-color-show-changes-toggle-hover-background);
 			--ck-color-button-on-hover-background: var(--ck-ai-chat-feed-item-color-show-changes-toggle-hover-background);
@@ -1570,6 +1579,7 @@
 					--ck-focus-ring: 1px solid var(--ck-color-focus-border);
 
 					color: var(--ck-color-base-background);
+					margin-top: 0;
 				}
 .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck-ai-chat__feed__ai-suggestion .ck-ai-chat__feed__ai-suggestion__actions > .ck-button.ck-splitbutton__action {
 						border-radius: 0;
@@ -1626,6 +1636,27 @@
 					/* This is needed to clear the default bottom margin from last HTML element from reply. */
 					margin-bottom: 0;
 				}
+.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__ai-suggestion .ck-ai-suggestion__body .ck-suggestion-marker-insertion:not([data-author-id="$aiSuggestion"]),
+			.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__ai-suggestion .ck-ai-suggestion__body .ck-suggestion-marker-formatInline:not([data-author-id="$aiSuggestion"]),
+			.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__ai-suggestion .ck-ai-suggestion__body .ck-suggestion-marker-deletion:not([data-author-id="$aiSuggestion"]) {
+				border-top: 3px solid var(--ck-ai-suggestion-inactive-color-border);
+				border-bottom: 3px solid var(--ck-ai-suggestion-inactive-color-border);
+				background: var(--ck-ai-suggestion-inactive-color-background);
+			}
+.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__ai-suggestion .ck-ai-suggestion__body .ck-suggestion-marker-insertion.ck-widget:not([data-author-id="$aiSuggestion"]), .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__ai-suggestion .ck-ai-suggestion__body .ck-suggestion-marker-formatInline.ck-widget:not([data-author-id="$aiSuggestion"]), .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__ai-suggestion .ck-ai-suggestion__body .ck-suggestion-marker-deletion.ck-widget:not([data-author-id="$aiSuggestion"]) {
+					border: 3px solid var(--ck-ai-suggestion-inactive-color-border);
+				}
+.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__ai-suggestion .ck-ai-suggestion__body .ck-suggestion-marker-formatBlock:not([data-author-id="$aiSuggestion"]) {
+				box-shadow: -7px 0 0 0 var(--ck-color-base-background), -10px 0 0 0 var(--ck-ai-suggestion-inactive-color-background);
+			}
+.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__ai-suggestion .ck-ai-suggestion__body .ck-suggestion-marker-deletion:not([data-author-id="$aiSuggestion"]) {
+				text-decoration: line-through;
+				text-decoration-thickness: 3px;
+				text-decoration-color: var(--ck-ai-suggestion-inactive-color-border);
+			}
+.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__ai-suggestion .ck-ai-suggestion__body .ck-suggestion-marker-insertion.table > tbody > tr > td {
+				background-color: var(--ck-color-suggestion-widget-insertion-background);
+			}
 .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__ai-suggestion .ck-ai-suggestion__body *,
 		.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__text-item
 		*:not(.ck-ai-chat__feed__context-chips):not(.ck-ai-chat__feed__context-chips *):not(.ck-ai-web-source .ck-button__label) {
@@ -1716,6 +1747,9 @@
 /**
  * This is the balloon panel for the suggestion actions.
  */
+.ck-ai-chat__feed__ai-suggestion__actions__balloon .ck-list__item {
+		min-width: fit-content;
+	}
 .ck-ai-chat__feed__ai-suggestion__actions__balloon .ck-button.ck-list-item-button {
 		padding-top: 0;
 		padding-bottom: 0;
@@ -1857,6 +1891,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 +1979,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 +2065,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;
@@ -2262,7 +2307,7 @@
 .ck.ck-button.ck-ai-button-primary {
 		color: var(--ck-ai-button-primary-color);
 		background-color: var(--ck-ai-button-primary-background-color);
-		border: none;
+		border: 1px solid transparent;
 	}
 .ck.ck-button.ck-ai-button-primary:hover {
 			background-color: var(--ck-ai-button-primary-hover-background-color);
@@ -2271,7 +2316,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 +2340,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 +2358,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 +2383,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,
@@ -2375,6 +2416,18 @@
 		word-break: normal;
 		text-wrap: auto;
 	}
+/*
+ * 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,
+ * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
+ *
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+:root {
+	--ck-ai-suggestion-inactive-color-background: hsla(128, 6%, 93%, 0.35);
+	--ck-ai-suggestion-inactive-color-border: hsla(128, 1%, 73%, 0.35);
+}
 
 :root {
 	--ck-ai-border-color-main: hsla(216, 5%, 81%, 1);
@@ -2435,6 +2488,30 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 
+.ck.ck-button.ck-ai-toggle-button {
+	--ck-color-button-default-hover-background: 				hsl(262.1,100%,96.3%);
+	--ck-color-button-default-active-background:				hsl(262.1,100%,96.3%);
+
+	--ck-color-button-on-background: 							hsl(262.1,100%,96.3%);
+	--ck-color-button-on-hover-background: 						hsl(262.1,100%,96.3%);
+	--ck-color-button-on-active-background:						hsl(262.1,100%,96.3%);
+	--ck-color-button-on-disabled-background: 					hsl(262.1,100%,96.3%);
+	--ck-color-button-on-color:									hsl(263.2,59.2%,52%);
+}
+
+.ck.ck-button.ck-ai-toggle-button:hover {
+		color: var(--ck-color-button-on-color);
+	}
+
+/*
+ * 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,
+ * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
+ *
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
 :root {
 	--ai-active-icon-size: 17px;
 
@@ -2630,17 +2707,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;
@@ -2696,14 +2790,30 @@
 		box-shadow: none;
 	}
 
-:scope .ck-ai-quick-actions-dropdown .ck.ck-button:not(.ck-dropdown__button):focus,:scope .ck-ai-quick-actions-group-panel .ck.ck-button:not(.ck-dropdown__button):focus {
-			background-color: var(--ck-ai-quick-actions-button-background-color);
-		}
-
 :scope .ck-ai-quick-actions-dropdown .ck.ck-button.ck-dropdown__button.ck-on,:scope .ck-ai-quick-actions-group-panel .ck.ck-button.ck-dropdown__button.ck-on {
 		color: var(--ck-ai-quick-actions-button-color);
 	}
 
+.ck-toolbar__items>.ck.ck-button.ck-ai-quick-actions-button,  .ck-toolbar__items>.ck-ai-quick-actions-dropdown > .ck.ck-button {
+		--ck-color-button-default-hover-background: 				hsl(262.1,100%,96.3%);
+		--ck-color-button-default-active-background:				hsl(262.1,100%,96.3%);
+	
+		--ck-color-button-on-background: 							hsl(262.1,100%,96.3%);
+		--ck-color-button-on-hover-background: 						hsl(262.1,100%,96.3%);
+		--ck-color-button-on-active-background:						hsl(262.1,100%,96.3%);
+		--ck-color-button-on-disabled-background: 					hsl(262.1,100%,96.3%);
+		--ck-color-button-on-color:									hsl(263.2,59.2%,52%);
+	}
+
+.ck-toolbar__items>.ck.ck-button.ck-ai-quick-actions-button:hover, .ck-toolbar__items>.ck-ai-quick-actions-dropdown > .ck.ck-button:hover {
+			color: var(--ck-color-button-on-color);
+		}
+
+.ck-ai-quick-actions-dropdown  .ck.ck-button:not(.ck-dropdown__button):focus,
+.ck-ai-quick-actions-group-panel .ck.ck-button:not(.ck-dropdown__button):focus {
+	background-color: var(--ck-ai-quick-actions-button-background-color);
+}
+	
 /*
  * 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,
@@ -2846,7 +2956,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 +2973,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 +2992,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 +3020,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 +3531,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 +3608,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;
@@ -3537,6 +3662,18 @@
 .ck-ai-header .ck-form__header__label:not(:last-child) {
 			margin-inline-end: var(--ck-spacing-small);
 		}
+/*
+ * 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,
+ * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
+ *
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+:root {
+	--ck-ai-suggestion-inactive-color-background: hsla(128, 6%, 93%, 0.35);
+	--ck-ai-suggestion-inactive-color-border: hsla(128, 1%, 73%, 0.35);
+}
 
 .ck {
 	--ck-color-ai-review-mode-suggestion: hsla(263, 59%, 52%, 0.5);
@@ -3594,3 +3731,24 @@
 .ck.ck-ai-review-mode-diff span.ck-ai_review-mode-marker_underline {
 			border: none;
 		}
+
+.ck.ck-ai-review-mode-highlights .ck-suggestion-marker-insertion,
+		.ck.ck-ai-review-mode-diff .ck-suggestion-marker-insertion,
+		.ck.ck-ai-review-mode-highlights .ck-suggestion-marker-formatInline,
+		.ck.ck-ai-review-mode-diff .ck-suggestion-marker-formatInline,
+		.ck.ck-ai-review-mode-highlights .ck-suggestion-marker-deletion,
+		.ck.ck-ai-review-mode-diff .ck-suggestion-marker-deletion {
+			border-top: 3px solid var(--ck-ai-suggestion-inactive-color-border);
+			border-bottom: 3px solid var(--ck-ai-suggestion-inactive-color-border);
+			background: var(--ck-ai-suggestion-inactive-color-background);
+		}
+
+.ck.ck-ai-review-mode-highlights .ck-suggestion-marker-formatBlock, .ck.ck-ai-review-mode-diff .ck-suggestion-marker-formatBlock {
+			box-shadow: -7px 0 0 0 var(--ck-color-base-background), -10px 0 0 0 var(--ck-ai-suggestion-inactive-color-background);
+		}
+
+.ck.ck-ai-review-mode-highlights .ck-suggestion-marker-deletion, .ck.ck-ai-review-mode-diff .ck-suggestion-marker-deletion {
+			text-decoration: line-through;
+			text-decoration-thickness: 3px;
+			text-decoration-color: var(--ck-ai-suggestion-inactive-color-border);
+		}