@ckeditor/ckeditor5-ai 47.6.1 → 48.0.0-alpha.0

package/theme/aichat/aichat.css

@@ -1,55 +0,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,
- * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
- *
- * Copyright (c) 2003-2026, 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-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-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);
-	--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-controls-loader-animation-duration: 1.5s;
-	--ck-ai-chat-controls-loader-icon-color: hsla(0, 0%, 96%, 0.98);
-
-	--ck-ai-chat-feed-loader-icon-color: hsla(0, 0%, 85%, 1);
-}
-
-/* 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%;
-		display: flex;
-		flex-direction: column;
-		font-family: var(--ck-ai-chat-font-family) !important;
-	}
-}

package/theme/aichat/aichatballoon.css

@@ -1,122 +0,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,
- * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
- *
- * Copyright (c) 2003-2026, 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-balloon-form-row-height: 2.924em;
-}
-
-/*
- * Dialog for browsing AI Chat suggestions.
- */
-.ck.ck-ai-chat-balloon {
-	width: 500px;
-	max-height: 300px;
-	min-height: 170px;
-
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-
-	--ck-border-radius: 4px;
-
-	& .ck.ck-form__header,
-	& .ck-ai-chat-balloon__toolbar-container {
-		--ck-ui-component-min-height: 1.726em;
-		--ck-icon-size: 1.477em;
-	}
-
-	.ck.ck-form__header {
-		--ck-form-header-height: var(--ck-ai-chat-balloon-form-row-height);
-
-		gap: var(--ck-spacing-standard);
-
-		& .ck-form__header__label {
-			--ck-font-size-base: 1em;
-			font-weight: normal;
-
-			color: var(--ck-ai-button-primary-background-color);
-		}
-	}
-
-	& .ck-dialog__content {
-		display: flex;
-		flex-direction: column;
-		justify-content: space-between;
-
-		flex-grow: 1;
-		min-height: 0;
-	}
-
-	/*
-	 * The main view of the balloon.
-	 */
-	& .ck.ck-ai-chat-balloon-main {
-		display: flex;
-		flex-direction: column;
-		justify-content: space-between;
-
-		flex-grow: 1;
-		min-height: 0;
-
-		/*
-		 * The content part preview.
-		 */
-		& .ck-ai-suggestion-streamable-content {
-			padding: var(--ck-spacing-large);
-			overflow-y: auto;
-			flex-grow: 1;
-		}
-
-		/**
-		 * Reduced opacity of the content and the state view when the suggestion is accepted, rejected, or outdated.
-		 */
-		&.ck-ai-chat-balloon-main_state_accepted,
-		&.ck-ai-chat-balloon-main_state_rejected,
-		&.ck-ai-chat-balloon-main_state_outdated {
-			& .ck-ai-suggestion-streamable-content,
-			& .ck-ai-suggestion__content-part-state {
-				opacity: 0.5;
-			}
-		}
-
-		/**
-		 * The error view, e.g. when the selection the balloon was opened for was removed.
-		 */
-		& .ck.ck-ai-suggestion__error.ck-ai-balloon-error {
-			margin: var(--ck-spacing-large);
-
-			/**
-			 * Add a border between the error view and the content.
-			 */
-			&:not(.ck-hidden) + .ck-ai-suggestion-streamable-content {
-				border-top: 1px solid var(--ck-color-toolbar-border);
-			}
-		}
-
-		/*
-		 * The bottom bar with toolbars.
-		 */
-		& .ck-ai-chat-balloon__toolbar-container {
-			display: flex;
-			justify-content: space-between;
-			height: var(--ck-ai-chat-balloon-form-row-height);
-			padding: var(--ck-spacing-large);
-			align-items: center;
-
-			border-top: 1px solid var(--ck-color-toolbar-border);
-
-			& > * {
-				border: 0;
-				margin: 0;
-				padding: 0;
-			}
-		}
-	}
-}
-

package/theme/aichat/aichatfeed.css

@@ -1,430 +0,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,
- * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
- *
- * Copyright (c) 2003-2026, 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-theme-lark/theme/mixins/_rounded.css";
-
-:root {
-	--ck-ai-chat-feed-item-color-text: hsla(0, 0%, 0%, 1);
-	--ck-ai-chat-feed-item-color-background: hsla(0, 0%, 96%, 1);
-	--ck-ai-chat-feed-item-color-background-secondary: hsla(0, 0%, 96%, 1);
-	--ck-ai-chat-feed-item-color-actions-button-hover: hsla(263, 59%, 40%, 1);
-	--ck-ai-chat-feed-item-color-show-changes-toggle-hover-color: hsla(263, 59%, 40%, 1);
-	--ck-ai-chat-feed-item-color-show-changes-toggle-hover-background: hsl(262, 100%, 96%);
-	--ck-ai-chat-feed-item-color-show-changes-toggle-on-color: hsla(263, 59%, 40%, 1);
-	--ck-ai-chat-feed-item-color-show-changes-toggle-on-background: hsl(262, 100%, 96%);
-	--ck-ai-chat-feed-item-color-show-changes-toggle-active-background: hsl(262, 100%, 96%);
-	--ck-ai-chat-feed-loader-icon-color: hsla(0, 0%, 85%, 1);
-	--ck-ai-chat-feed-interaction-header-capabilities-color-text: hsla(0, 0%, 44%, 1);
-	--ck-ai-web-source-tooltip-url-color: hsla(263, 59%, 52%, 1);
-	--ck-ai-web-source-tooltip-title-color: hsla(0, 0%, 20%, 1);
-	--ck-ai-web-source-tooltip-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-
-.ck.ck-ai-chat__feed {
-	flex: 1 1 auto;
-	overflow-y: auto;
-	display: flex;
-	flex-direction: column;
-	justify-content: flex-start;
-	align-items: stretch;
-	flex-wrap: nowrap;
-	padding-bottom: var(--ck-spacing-extra-large);
-	gap: var(--ck-spacing-large);
-	position: relative;
-
-	/*
-	 * Addresses an issue in Chrome where the entire feed gets repainted by the browser's engine when the user
-	 * types in the prompt textarea. See https://github.com/ckeditor/ckeditor5-commercial/issues/8611.
-	 */
-	contain: size;
-
-	/* This is needed to prevent the feed from overflowing when the skeleton is visible. */
-	&:has(.ck-ai-skeleton:not(.ck-hidden)) {
-		overflow: hidden;
-	}
-
-	.ck.ck-ai-chat__feed__items {
-		display: flex;
-		flex-direction: column;
-		gap: var(--ck-spacing-extra-large) 0;
-
-		& > .ck-ai-chat__feed__item {
-			&:first-child {
-				margin-top: var(--ck-spacing-extra-large);
-			}
-		}
-	}
-
-	& .ck.ck-ai-chat__feed__item {
-		margin: 0 var(--ck-spacing-large);
-		scroll-margin: var(--ck-spacing-large);
-
-		/* These controls show up only after the item is done */
-		& .ck-ai-mini-toolbar,
-		& .ck-ai-chat__feed__ai-suggestion__actions,
-		& .ck-ai-suggestion__header__show-changes-toggle {
-			transition: opacity .4s, display .4s allow-discrete;
-
-			@starting-style {
-				& {
-					opacity: 0;
-				}
-			}
-		}
-
-		& .ck-ai-suggestion__header__show-changes-toggle {
-			padding: 0 var(--ck-spacing-small);
-			min-height: 22px;
-			font-size: var(--ck-ai-chat-suggestion-container-header-font-size);
-
-			> .ck-icon {
-				width: 16px;
-				height: 16px;
-				margin-right: 0;
-				margin-left: var(--ck-spacing-medium);
-			}
-		}
-
-		&:not(.ck-ai-chat__feed__item_done) {
-			& .ck-ai-mini-toolbar,
-			& .ck-ai-chat__feed__ai-suggestion__actions,
-			& .ck-ai-suggestion__header__show-changes-toggle {
-				display: none;
-				opacity: 0;
-			}
-		}
-
-		/*
-		 * Any item that contains text (AI replies, suggestions, user messages etc.)
-		 */
-		&.ck.ck-ai-chat__feed__text-item {
-			word-break: normal;
-			text-wrap: auto;
-
-			& pre > code {
-				white-space: pre-wrap;
-			}
-		}
-
-		/*
-		 * User message item with a query to the AI
-		 */
-		&.ck.ck-ai-chat__feed__user-message {
-			&:has(.ck-ai-chat-context-chips-wrapper) {
-				max-width: 100%;
-			}
-
-			& .ck-ai-chat__feed__message-content {
-				max-width: 80%;
-				margin-inline-end: 0;
-				margin-inline-start: auto;
-				text-align: end;
-			}
-
-			p {
-				display: inline-block;
-				background-color: var(--ck-ai-chat-feed-item-color-background-secondary);
-				padding: var(--ck-spacing-standard);
-				border-radius: var(--ck-ai-border-radius);
-			}
-		}
-
-		/*
-		 * Replies from the AI that aren't suggestions.
-		 *
-		 * Also, occasionally used for static notifications.
- 		 */
-		/* &.ck-ai-chat__feed__ai-reply {} */
-
-		/*
-		 * This is the kind of reply from the AI where content changes are suggested.
-		 */
-		&.ck-ai-chat__feed__ai-suggestion {
-			margin: 0 var(--ck-spacing-standard);
-
-			/*
-			 * Actions for the suggestion.
-			 */
-			& .ck-ai-chat__feed__ai-suggestion__actions {
-				--ck-border-radius: 2px;
-
-				display: flex;
-				flex-direction: row;
-				gap: var(--ck-spacing-standard);
-				width: fit-content;
-
-				& .ck-ai-chat__feed__suggestion__actions__info > p {
-					font-size: 0.75em;
-					color: var(--ck-ai-chat-color-icon);
-					line-height: 2.8em !important;
-
-					& button {
-						font-size: 0.8em;
-						padding-left: 0.5em;
-					}
-				}
-			}
-		}
-
-		/*
-		* Interaction header showing capabilities used for the entire interaction.
-		*/
-		&.ck.ck-ai-chat__feed__interaction-header {
-			& .ck-ai-chat__feed__interaction-header__capabilities {
-				display: flex;
-				align-items: center;
-				gap: 4px;
-				color: var(--ck-ai-chat-feed-interaction-header-capabilities-color-text);
-
-				& svg {
-					border-radius: 50%;
-					flex-shrink: 0;
-					background-color: var(--ck-tabs-panels-container-background);
-
-					&:not(:first-child) {
-						margin-left: calc(var(--ck-icon-size) * -0.75)
-					}
-				}
-			}
-
-			& .ck-ai-chat__feed__interaction-header__capabilities__text {
-				color: var(--ck-ai-chat-feed-interaction-header-capabilities-color-text);
-				font-weight: 500;
-			}
-		}
-
-		.ck-ai-chat__feed__ai-reply-container {
-			> * {
-				&:first-child {
-					/* This is needed to clear the default top margin from first HTML element from reply. */
-					margin-top: 0;
-				}
-
-				&:last-child {
-					/* This is needed to clear the default bottom margin from last HTML element from reply. */
-					margin-bottom: 0;
-				}
-			}
-		}
-
-		&.ck.ck-ai-chat__feed__ai-suggestion .ck-ai-suggestion__body {
-			.ck-suggestion-marker-insertion:not([data-author-id="$aiSuggestion"]),
-			.ck-suggestion-marker-formatInline:not([data-author-id="$aiSuggestion"]),
-			.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-widget {
-					border: 3px solid var(--ck-ai-suggestion-inactive-color-border);
-				}
-			}
-
-			.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-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-suggestion-marker-insertion.table > tbody > tr > td {
-				background-color: var(--ck-color-suggestion-widget-insertion-background);
-			}
-		}
-
-		&.ck.ck-ai-chat__feed__ai-suggestion .ck-ai-suggestion__body *,
-		&.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) {
-			white-space: normal;
-			line-height: 1.4em;
-		}
-
-		/* TODO: This CSS class is added twice. */
-		& .ck-ai-chat__feed__context-chips {
-			display: flex;
-			justify-content: flex-end;
-			margin-bottom: var(--ck-spacing-medium-small);
-		}
-
-		/* stylelint-disable-next-line no-descending-specificity */
-		& .ck-ai-web-sources {
-			display: grid;
-			grid-template-columns: repeat(3, 1fr);
-			gap: var(--ck-spacing-standard);
-
-			padding: var(--ck-spacing-medium) 0 0;
-
-			& > .ck-ai-web-sources__header {
-				grid-column-start: span 3;
-
-				font-size: 12px;
-				font-weight: 500;
-				line-height: 1.4em;
-
-				& > .ck-icon {
-					vertical-align: text-bottom;
-					width: 14px;
-					height: 14px;
-					margin-right: var(--ck-spacing-medium-small);
-					color: hsl(0, 0%, 44%);
-				}
-
-				& > span {
-					color: hsl(0, 0%, 44%);
-				}
-			}
-
-			& > .ck-ai-web-source {
-				padding: var(--ck-spacing-medium) var(--ck-spacing-large);
-				border: 0;
-				border-radius: 50px;
-				background-color: var(--ck-color-base-background);
-
-				&:hover {
-					background-color: var(--ck-ai-chat-button-active-background-color);
-				}
-
-				&:focus, &:active {
-					box-shadow: none;
-				}
-
-				& .ck-ai-web-source__image,
-				& .ck-button__icon {
-					margin-right: var(--ck-spacing-medium);
-					color: var(--ck-ai-button-primary-background-color);
-					width: 16px;
-					height: 16px;
-				}
-
-				& .ck-button__label {
-					white-space: nowrap;
-					overflow: hidden;
-					text-overflow: ellipsis;
-					max-width: 75px;
-					font-size: 10px;
-					font-weight: 700;
-					line-height: 1.4em;
-				}
-
-				& .ck-ai-web-source__title {
-					display: flex;
-					align-items: center;
-					gap: var(--ck-spacing-small);
-				}
-			}
-		}
-
-		/* Remove padding if it's directly inside the reply container as the padding is already set. */
-		& > .ck-ai-web-sources {
-			padding: var(--ck-spacing-extra-large) 0 var(--ck-spacing-medium) 0;
-		}
-	}
-
-	& .ck.ck-ai-chat__loader {
-		display: flex;
-		align-items: flex-start;
-
-		& .ck.ck-spinner-container.ck-ai-spinner {
-			/* Designs have 16px but it needs to be aligned with chat feed items */
-			margin: 0 var(--ck-spacing-large);
-		}
-
-		& .ck.ck-ai-chat__loader-text {
-			font-weight: 500;
-			line-height: 1.462em;
-			white-space: normal;
-		}
-	}
-}
-
-/**
- * This is the balloon panel for the suggestion actions.
- */
-.ck-ai-chat__feed__ai-suggestion__actions__balloon {
-	&.ck-balloon-panel {
-		z-index: calc(var(--ck-ai-tabs-overlay-z-index) + 1);
-	}
-
-	& .ck-list__item {
-		min-width: fit-content;
-	}
-
-	& .ck-button.ck-list-item-button {
-		padding-top: 0;
-		padding-bottom: 0;
-
-		&:hover:not(.ck-disabled) {
-			background-color: var(--ck-ai-button-secondary-hover-background-color);
-		}
-	}
-}
-
-.ck-ai-web-source__tooltip-balloon {
-	@mixin ck-rounded-corners;
-
-	& .ck-ai-web-source__tooltip {
-		padding: 0.8em;
-		font-size: var(--ck-font-size-small);
-		line-height: 1.4em;
-		width: 214px;
-
-		& .ck-ai-web-source__tooltip-row {
-			display: flex;
-			align-items: center;
-			gap: 0.4em;
-			margin-bottom: 0.4em;
-
-			&:last-child {
-				margin-bottom: 0;
-			}
-		}
-
-		& .ck-ai-web-source__tooltip-image {
-			width: 1.477em;
-			height: 1.477em;
-			flex-shrink: 0;
-			color: var(--ck-ai-button-primary-background-color);
-		}
-
-		& .ck-ai-web-source__tooltip-url {
-			font-size: var(--ck-font-size-small);
-			color: var(--ck-ai-web-source-tooltip-url-color);
-			font-weight: 500;
-			text-decoration: underline;
-			font-style: var(--ck-ai-web-source-tooltip-font-family);
-			white-space: normal;
-			word-wrap: break-word;
-			overflow-wrap: break-word;
-			word-break: break-all;
-		}
-
-		& .ck-ai-web-source__tooltip-title {
-			font-style: var(--ck-ai-web-source-tooltip-font-family);
-			font-weight: 700;
-			color: var(--ck-ai-web-source-tooltip-title-color);
-			white-space: normal;
-			font-size: 1.026em;
-			line-height: 1.35;
-			vertical-align: middle;
-		}
-	}
-}
-
-@keyframes ck-html-streamer-fade-in {
-	from {
-		opacity: 0;
-	}
-
-	to {
-		opacity: 1;
-	}
-}