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

package/ckeditor5-metadata.json

@@ -39,6 +39,20 @@
 			"description": "Provides quick access to common AI-powered actions like improve writing, change tone, translate, and custom commands",
 			"docs": "features/ai/ckeditor-ai-overview.html",
 			"path": "src/aiquickactions/aiquickactions.js"
+		},
+		{
+			"name": "AI Editor Integration",
+			"className": "AIEditorIntegration",
+			"description": "Provides integration between AI-powered features and the editor",
+			"docs": "features/ai/ckeditor-ai-overview.html",
+			"path": "src/aieditorintegration/aieditorintegration.js",
+			"uiComponents": [
+				{
+					"type": "Button",
+					"name": "toggleAi",
+					"iconPath": "@ckeditor/ckeditor5-icons/theme/icons/ai-ask-ai.svg"
+				}
+			]
 		}
 	]
 }

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);
@@ -1041,6 +1046,12 @@
 		padding-bottom:var(--ck-spacing-large);
 	}
 
+.ck.ck-ai-chat-controls.ck-ai-chat-controls-disabled{
+		opacity:0.5;
+		pointer-events:none;
+		cursor:default;
+	}
+
 .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection{
 		line-height:0;
 	}
@@ -1537,12 +1548,16 @@
 				}
 .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part .ck-ai-suggestion__body__content-part__title .ck-toolbar .ck-button{
 						margin:0;
-						opacity:.6;
+						color:var(--ck-ai-chat-suggestion-icon-default-color);
 					}
 .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part .ck-ai-suggestion__body__content-part__content :last-child{
 					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;
@@ -1554,13 +1569,16 @@
 				display:block;
 				clear:both;
 			}
+.ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_pending:hover .ck-toolbar .ck-icon{
+				color:var(--ck-ai-background-color-action-button);
+			}
 .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_active:hover::before{
 			content:'';
 			position:absolute;
 			left:calc((-1 * var(--ck-spacing-large)) - 1px);
 			top:5px;
 			height:100%;
-			border-left:2px solid hsl( 262, 51%, 80%);
+			border-left:3px solid var(--ck-ai-chat-suggestion-border-hover-color);
 		}
 .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_active:last-child::before{
 			height:calc(100% - 10px);
@@ -1610,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);
@@ -1884,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,
@@ -1909,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,
@@ -1928,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,
@@ -1954,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,
@@ -1990,6 +2009,8 @@
 	--ck-ai-chat-color-text:hsla(263, 59%, 52%, 1);
 	--ck-ai-chat-color-icon:hsla(0, 0%, 44%, 1);
 	--ck-ai-chat-border-width:1px;
+	--ck-ai-chat-suggestion-icon-default-color:hsl(0, 0%, 44%);
+	--ck-ai-chat-suggestion-border-hover-color:hsl(262, 64%, 78%);
 
 	--ck-ai-chat-button-active-background-color:hsla(262, 100%, 96%, 1);
 	--ck-ai-chat-button-active-color:hsla(263, 59%, 52%, 1);
@@ -2216,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;
@@ -2407,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);
@@ -2425,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{
@@ -2444,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);
 }
@@ -2452,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{
@@ -2912,6 +2958,11 @@
 		overflow:hidden;
 	}
 
+.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 > *{
 			white-space:normal;
 		}

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,
@@ -1272,6 +1278,12 @@
 		padding-bottom: var(--ck-spacing-large);
 	}
 
+.ck.ck-ai-chat-controls.ck-ai-chat-controls-disabled {
+		opacity: 0.5;
+		pointer-events: none;
+		cursor: default;
+	}
+
 .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection {
 		line-height: 0;
 	}
@@ -1845,12 +1857,17 @@
 				}
 .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part .ck-ai-suggestion__body__content-part__title .ck-toolbar .ck-button {
 						margin: 0;
-						opacity: .6;
+						color: var(--ck-ai-chat-suggestion-icon-default-color);
 					}
 .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part .ck-ai-suggestion__body__content-part__content :last-child {
 					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;
@@ -1862,6 +1879,9 @@
 				display: block;
 				clear: both;
 			}
+.ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_pending:hover .ck-toolbar .ck-icon {
+				color: var(--ck-ai-background-color-action-button);
+			}
 /* TODO: This is only a temporary implementation for preview demo purposes. Make it nice. */
 .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_active:hover::before {
 			content: '';
@@ -1869,7 +1889,7 @@
 			left: calc((-1 * var(--ck-spacing-large)) - 1px);
 			top: 5px;
 			height: 100%;
-			border-left: 2px solid hsl( 262, 51%, 80% );
+			border-left: 3px solid var(--ck-ai-chat-suggestion-border-hover-color);
 		}
 .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_active:last-child::before {
 			height: calc(100% - 10px);
@@ -1931,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);
@@ -2012,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;
@@ -2262,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,
@@ -2287,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,
@@ -2306,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,
@@ -2332,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,
@@ -2376,6 +2398,8 @@
 	--ck-ai-chat-color-text: hsla(263, 59%, 52%, 1);
 	--ck-ai-chat-color-icon: hsla(0, 0%, 44%, 1);
 	--ck-ai-chat-border-width: 1px;
+	--ck-ai-chat-suggestion-icon-default-color: hsl(0, 0%, 44%);
+	--ck-ai-chat-suggestion-border-hover-color: hsl(262, 64%, 78%);
 
 	--ck-ai-chat-button-active-background-color: hsla(262, 100%, 96%, 1);
 	--ck-ai-chat-button-active-color: hsla(263, 59%, 52%, 1);
@@ -2619,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;
@@ -2835,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);
@@ -2853,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 {
@@ -2873,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.
@@ -2887,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.
@@ -3397,6 +3451,12 @@
 		overflow: hidden;
 	}
 
+.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 > * {
 			white-space: normal;
 		}
@@ -3468,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;