@ckeditor/ckeditor5-ai 46.1.1 → 47.0.0-alpha.0

package/theme/aichat/aichat-controls/aichat-controls-loader.css

@@ -0,0 +1,93 @@
+/*
+ * 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-chat-loader-icon-dot-color: hsl(216, 5%, 81%);
+	--ck-ai-chat-loader-icon-dot-active-color: hsl(0, 0%, 20%);
+	--ck-ai-loader-dot-pulse-dot-size: 6px;
+	--ck-ai-loader-dot-pulse-width: 40px;
+	--ck-ai-loader-dot-pulse-height: 20px;
+	--ck-ai-loader-dot-pulse-border-radius: 8px;
+	--ck-ai-loader-dot-pulse-animation-delay: 0.3s;
+}
+
+.ck-ai-chat-controls-loader {
+	display: flex;
+	align-items: center;
+	color: var(--ck-color-input-disabled-text);
+
+	& .ck-ai-chat-controls-loader-icon {
+		box-sizing: border-box;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		width: var(--ck-ai-loader-dot-pulse-width);
+		height: var(--ck-ai-loader-dot-pulse-height);
+		margin-inline-end: var(--ck-spacing-standard);
+		padding: var(--ck-spacing-small) var(--ck-spacing-medium-small);
+		border-radius: var(--ck-ai-loader-dot-pulse-border-radius);
+		background-color: var(--ck-ai-chat-loader-icon-color);
+	}
+
+	& .ck-ai-chat-controls-loader-icon-dot {
+		width: var(--ck-ai-loader-dot-pulse-dot-size);
+		height: var(--ck-ai-loader-dot-pulse-dot-size);
+		border-radius: 50%;
+		background-color: var(--ck-ai-chat-loader-icon-dot-color);
+		flex-shrink: 0;
+
+		animation: ck-ai-loader-dot-pulse var(--ck-ai-chat-loader-animation-duration) infinite;
+
+		&:nth-child(1) {
+			animation-delay: 0s;
+		}
+
+		&:nth-child(2) {
+			animation-delay: var(--ck-ai-loader-dot-pulse-animation-delay);
+		}
+
+		&:nth-child(3) {
+			animation-delay: calc(var(--ck-ai-loader-dot-pulse-animation-delay) * 2);
+		}
+	}
+}
+
+.ck.ck-button.ai-chat-controls-loader__cancel-button {
+	min-height: 22px;
+	padding: 0 var(--ck-spacing-medium) 0 var(--ck-spacing-small);
+	border: var(--ck-ai-chat-border-width) solid var(--ck-ai-border-color-button);
+	border-radius: var(--ck-border-radius);
+	color: var(--ck-ai-chat-color-text);
+
+	.ck.ck-icon.ck-button__icon {
+		color: var(--ck-ai-chat-color-text);
+		height: 14px;
+		width: 14px;
+		margin-right: 4px;
+	}
+
+	&:hover {
+		background-color: var(--ck-ai-chat-button-active-background-color);
+	}
+}
+
+.ck-ai-chat-controls-loader-wrapper {
+	display: flex;
+	justify-content: space-between;
+}
+
+@keyframes ck-ai-loader-dot-pulse {
+	0%, 80%, 100% {
+		background-color: var(--ck-ai-chat-loader-icon-dot-color);
+	}
+
+	40% {
+		background-color: var(--ck-ai-chat-loader-icon-dot-active-color);
+	}
+}

package/theme/aichat/aichat-controls/prompt-capabilities.css

@@ -0,0 +1,46 @@
+/*
+ * 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
+ */
+
+.ck.ck-ai-chat-controls .ck-ai-chat__prompt-capabilities {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding-top: var(--ck-spacing-medium-small);
+	gap: var(--ck-spacing-medium-small);
+	padding-inline-end: calc(var(--ck-ui-component-min-height) + var(--ck-spacing-medium));
+
+	& .ck-ai-chat-controls-button {
+		&:not(.ck-button_with-text) {
+			margin: 0;
+			padding: var(--ck-spacing-tiny);
+		}
+
+		& > .ck-icon {
+			--ck-icon-size: 16px;
+			color: var(--ck-ai-chat-color-icon);
+		}
+	}
+
+	& .ck-ai-chat-controls-button--commands {
+		margin-inline-start: auto;
+		margin-inline-end: 0;
+		margin-block-start: 0;
+		margin-block-end: 0;
+		padding: 0;
+		/*
+		 * TODO: Remove this when the commands button is implemented.
+		 */
+		visibility: hidden;
+		pointer-events: none;
+	}
+
+	& .ck-ai-chat-controls__model-name {
+		color: var(--ck-ai-chat-color-icon);
+	}
+}

package/theme/aichat/aichat-controls/prompt-input.css

@@ -0,0 +1,55 @@
+/*
+ * 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
+ */
+
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
+
+.ck.ck-ai-chat__prompt-input.ck-search {
+	& .ck-labeled-field-view {
+		width: 100%;
+
+		.ck-labeled-field-view__status_error {
+			line-height: 1.4em;
+		}
+	}
+
+	& .ck-labeled-field-view__input-wrapper {
+		.ck.ck-input.ck-textarea {
+			line-height: calc(var(--ck-font-size-base) * 2);
+
+			/* The padding is used to make space for the add context button. */
+			@mixin ck-dir ltr {
+				padding-right: 2.6em;
+			}
+
+			@mixin ck-dir rtl {
+				padding-left: 2.6em;
+			}
+		}
+
+		& > .ck.ck-label {
+			visibility: hidden;
+		}
+	}
+
+	& .ck-ai-chat__prompt-submit-button {
+		height: auto;
+		align-self: flex-end;
+		margin-left: var(--ck-spacing-medium);
+		background-color: var(--ck-ai-background-color-action-button);
+		color: var(--ck-ai-font-color-action-button);
+
+		&.ck-disabled {
+			opacity: var(--ck-disabled-opacity);
+		}
+
+		& > svg {
+			opacity: 1;
+		}
+	}
+}

package/theme/aichat/aichat-controls.css

@@ -0,0 +1,154 @@
+/*
+ * 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
+ */
+
+@import './aichat-controls/prompt-input.css';
+@import './aichat-controls/prompt-capabilities.css';
+@import './aichat-controls/aichat-context-controls.css';
+@import './aichat-controls/aichat-context-chip.css';
+@import './aichat-controls/aichat-controls-button.css';
+@import './aichat-controls/aichat-controls-loader.css';
+@import './aichat-controls/aichat-context-controls-balloon-panels.css';
+
+.ck.ck-ai-chat-controls {
+	padding: var(--ck-spacing-large) var(--ck-spacing-large) var(--ck-spacing-standard);
+	line-height: var(--ck-form-header-height);
+	border-top: var(--ck-ai-chat-border-width) solid var(--ck-color-base-border);
+
+	/* When loader wrapper (second child) is visible, bottom padding should be larger to match the top one. */
+	&:has(>:first-child.ck-hidden) {
+		padding-bottom: var(--ck-spacing-large);
+	}
+
+	& .ck-ai-chat-controls__model-selection {
+		line-height: 0;
+
+		& .ck-dropdown__panel.ck-dropdown__panel_ne {
+			bottom: calc(100% + 10px);
+			top: auto;
+			padding-top: .5em;
+			width: 426px;
+			max-width: max-content;
+			max-height: 600px;
+			overflow-y: scroll;
+
+			&::before,
+			&::after {
+				content: '';
+				position: absolute;
+				left: calc(2 * var(--ck-balloon-arrow-half-width));
+				bottom: calc(-1 * var(--ck-balloon-arrow-height));
+				width: 0;
+				height: 0;
+				border-style: solid;
+				border-width: var(--ck-balloon-arrow-height) var(--ck-balloon-arrow-half-width) 0 var(--ck-balloon-arrow-half-width);
+				border-color: var(--ck-color-panel-border) transparent transparent;
+			}
+
+			&::before {
+				z-index: var(--ck-balloon-panel-arrow-z-index);
+				margin-bottom: calc(-1 * var(--ck-balloon-border-width));
+				filter: drop-shadow(var(--ck-balloon-arrow-drop-shadow));
+			}
+
+			&::after {
+				z-index: calc(var(--ck-balloon-panel-arrow-z-index) + 1);
+				margin-bottom: calc(var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width));
+			}
+		}
+
+		& .ck-button.ck-dropdown__button {
+			border: 0;
+			font-size: .9em;
+			margin-inline-end: 0;
+			color: var(--ck-ai-chat-color-icon);
+			padding-top: 0;
+			padding-bottom: 0;
+			min-height: auto;
+
+			&.ck-on .ck-dropdown__arrow {
+				transform: rotate(180deg);
+			}
+
+			.ck-button__label {
+				width: auto;
+			}
+
+			&:hover,
+			&.ck-on {
+				background-color: var(--ck-ai-chat-button-active-background-color);
+				color: var(--ck-ai-background-color-action-button);
+
+				& .ck-dropdown__arrow {
+					color: var(--ck-ai-background-color-action-button);
+				}
+			}
+		}
+
+		& .ck-list {
+			& > .ck-list__item {
+				&:not(:last-child) {
+					margin-bottom: var(--ck-spacing-medium-small);
+				}
+
+				& > .ck-button {
+					align-items: start;
+
+					& > .ck-list-item-button__check-holder {
+						height: 1.2em;
+
+						& > .ck-list-item-button__check-icon {
+							padding-top: 2px;
+						}
+					}
+
+					& > .ck-button__label {
+						line-height: 1.3;
+
+						& > .ck-ai-chat-controls__model-selection__item-name {
+							line-height: 1.3;
+							font-weight: 500;
+						}
+
+						& > .ck-ai-chat-controls__model-selection__item-description {
+							line-height: 1.3;
+							padding-top: var(--ck-spacing-tiny);
+
+							& > span {
+								color: var(--ck-ai-chat-color-icon);
+								line-height: 1;
+								white-space: normal;
+							}
+						}
+
+						& > .ck-ai-chat-controls__model-selection__item-capabilities {
+							line-height: 1.3;
+							--ck-icon-font-size: .5em;
+
+							& > span {
+								color: var(--ck-ai-chat-color-icon);
+
+								&:nth-of-type(2n) {
+									font-weight: bold;
+									display: inline-block;
+									width: 4ch;
+								}
+							}
+
+							& > .ck-icon {
+								margin-inline-end: var(--ck-spacing-standard);
+								color: var(--ck-ai-chat-color-icon);
+								fill: var(--ck-ai-chat-color-icon);
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}

package/theme/aichat/aichat.css

@@ -0,0 +1,68 @@
+/*
+ * 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
+ */
+
+@import './aichat-controls.css';
+@import './aichatfeed.css';
+@import './aisuggestioncontainer.css';
+@import './aiminitoolbar.css';
+@import '../common/aiheader.css';
+@import '../common/aichaterror.css';
+@import '../common/aiskeleton.css';
+@import '../common/aispinner.css';
+@import '../common/aibutton.css';
+@import '../common/aidisclaimer.css';
+
+:root {
+	--ck-ai-border-color-main: hsla(216, 5%, 81%, 1);
+	--ck-ai-border-color-button: hsla(262, 51%, 80%, 1);
+	--ck-ai-background-color-action-button: hsla(263, 59%, 52%, 1);
+	--ck-ai-font-color-action-button: hsl(0, 0%, 100%);
+
+	--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-button-active-background-color: hsla(262, 100%, 96%, 1);
+	--ck-ai-chat-button-active-color: hsla(263, 59%, 52%, 1);
+	--ck-ai-chat-button-hover-color: hsla(0, 0%, 20%, 1);
+	--ck-ai-chat-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+	--ck-ai-chat-user-context-background: hsla(0, 0%, 98%, 1);
+
+	--ck-ai-chat-flash-color: hsla(263, 59%, 52%, 0.102);
+	--ck-ai-chat-flash-color-text: hsla(263, 59%, 52%, 1);
+	--ck-ai-chat-animation-duration: 0.6s;
+	--ck-ai-chat-animation-timing: ease-out;
+
+	--ck-ai-chat-loader-animation-duration: 1.5s;
+	--ck-ai-chat-loader-icon-color: hsla(0, 0%, 96%, 0.98);
+
+	--ck-ai-chat-feed-loader-icon-color: hsla(0, 0%, 85%, 1);
+
+	--ck-ai-border-radius: calc(var(--ck-border-radius) * 2);
+}
+
+/* Note: This class name is mentioned in the guide and acts like a public API. */
+.ck-ai-ui_theme {
+	/* @TODO: there should be one theme applied on all NextGenAI features */
+}
+
+.ck {
+	&.ck-ai-chat {
+		* {
+			font-family: var(--ck-ai-chat-font-family) !important;
+		}
+
+		width: 100%;
+		min-height: 300px;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+		font-family: var(--ck-ai-chat-font-family) !important;
+	}
+}