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

package/theme/aichat/aichatfeed.css

@@ -0,0 +1,376 @@
+/*
+ * 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-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.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;
+
+	/* 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 {
+			--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);
+			--ck-color-button-default-active-background: var(--ck-ai-chat-feed-item-color-show-changes-toggle-active-background);
+			--ck-color-button-on-background: var(--ck-ai-chat-feed-item-color-show-changes-toggle-active-background);
+			--ck-color-focus-border: var(--ck-ai-chat-feed-item-color-show-changes-toggle-active-background);
+			--ck-focus-ring: 1px solid var(--ck-color-focus-border);
+
+			padding: 0 var(--ck-spacing-small);
+			min-height: 22px;
+			font-size: var(--ck-ai-chat-suggestion-container-header-font-size);
+			color: var(--ck-ai-chat-color-icon);
+
+			&:hover {
+				color: var(--ck-ai-chat-feed-item-color-show-changes-toggle-hover-color);
+			}
+
+			&:active {
+				box-shadow: none;
+				color: var(--ck-ai-chat-feed-item-color-show-changes-toggle-on-color);
+			}
+
+			&.ck-on {
+				color: var(--ck-ai-chat-feed-item-color-show-changes-toggle-on-color);
+			}
+
+			&:focus {
+				border: 1px solid transparent;
+			}
+
+			> .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: 8px;
+				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 {
+
+			/*
+			 * Actions for the suggestion.
+			 */
+			& .ck-ai-chat__feed__ai-suggestion__actions {
+				--ck-color-split-button-hover-background: var(--ck-ai-background-color-action-button);
+
+				margin-top: var(--ck-spacing-medium);
+				width: fit-content;
+
+				& > .ck-button {
+					--ck-color-button-default-background: var(--ck-ai-background-color-action-button);
+					--ck-color-button-default-hover-background: var(--ck-ai-chat-feed-item-color-actions-button-hover);
+					--ck-color-button-on-hover-background: var(--ck-ai-chat-feed-item-color-actions-button-hover);
+					--ck-color-button-default-active-background: var(--ck-ai-chat-feed-item-color-actions-button-hover);
+					--ck-color-button-on-background: var(--ck-ai-chat-feed-item-color-actions-button-hover);
+					--ck-color-button-on-active-background: var(--ck-ai-chat-feed-item-color-actions-button-hover);
+					--ck-color-focus-border: var(--ck-color-base-background);
+					--ck-focus-ring: 1px solid var(--ck-color-focus-border);
+
+					color: var(--ck-color-base-background);
+
+					&.ck-splitbutton__action {
+						@mixin ck-rounded-corners {
+							border-top-right-radius: 0;
+							border-bottom-right-radius: 0;
+						}
+					}
+
+					&.ck-splitbutton__arrow {
+						width: 1.9em;
+						color: var(--ck-color-base-background);
+
+						/* Separator always visible */
+						&:after {
+							content: '';
+							position: absolute;
+							width: 1px;
+							height: 100%;
+							left: -1px;
+							background: var(--ck-color-base-background);
+						}
+					}
+
+					&.ck-disabled {
+						background: hsl(263, 59%, 52%, 0.5);
+					}
+				}
+			}
+		}
+
+		/*
+		* 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.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-small) var(--ck-spacing-large) var(--ck-spacing-extra-large) var(--ck-spacing-large);
+
+			& > .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-ai-chat-feed-item-color-background);
+
+				&:focus, &:active {
+					box-shadow: none;
+				}
+
+				& .ck-button__icon {
+					margin-right: var(--ck-spacing-medium);
+					color: var(--ck-ai-button-primary-background-color);
+					width: 16px;
+					height: 16px;
+				}
+
+				& .ck-button__label {
+					/* display: inline-block; */
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					max-width: 80px;
+					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-button.ck-list-item-button {
+		padding-top: 0;
+		padding-bottom: 0;
+	}
+}
+
+@keyframes ck-html-streamer-fade-in {
+	from {
+		opacity: 0;
+	}
+
+	to {
+		opacity: 1;
+	}
+}

package/theme/aichat/aichathistory.css

@@ -0,0 +1,235 @@
+/*
+ * 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;
+
+	--ck-ai-loader-icon-color: hsla(0, 0%, 85%, 1);
+	--ck-ai-loader-icon-dot-color: hsla(0, 0%, 65%, 1);
+	--ck-ai-chat-feed-item-spacing: var(--ck-spacing-extra-large);
+}
+
+.ck .ck-ai-chat-history {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+
+	.ck-ai-chat-history__content,
+	.ck-search {
+		display: flex;
+		flex-direction: column;
+		flex: 1 1 auto;
+		min-height: 0;
+		gap: var(--ck-spacing-medium-small);
+		position: relative;
+	}
+
+	.ck-ai-chat-history__content {
+		.ck-ai-chat-error {
+			margin: var(--ck-spacing-extra-large) var(--ck-spacing-large) var(--ck-spacing-medium) var(--ck-spacing-large);
+		}
+	}
+
+	.ck-search > .ck-labeled-field-view {
+		margin-top: var(--ck-spacing-medium);
+		padding: var(--ck-spacing-large) var(--ck-spacing-large) var(--ck-spacing-tiny);
+	}
+
+	.ck-search__results {
+		min-height: 0;
+		flex: 1 1 auto;
+		overflow-y: auto;
+		overflow-x: hidden;
+	}
+
+	.ck-dropdown .ck-dropdown__arrow {
+		display: none;
+	}
+
+	.ck-ai-chat-history__sections {
+		gap: var(--ck-spacing-medium-small);
+	}
+
+	.ck.ck-dropdown .ck-button.ck-dropdown__button:not(.ck-button_with-text) {
+		padding: 0;
+	}
+
+	.ck-ai-chat-history__section-title {
+		color: var(--ck-ai-chat-color-icon);
+		font-size: 0.85em;
+		font-weight: 700;
+		line-height: 1.85em;
+		padding: 0.48em 0.9em 0 0.9em;
+	}
+
+	.ck-confirm-view .ck-confirm-view-inner, .ck-ai-chat-history__item {
+		padding: var(--ck-spacing-tiny)
+			var(--ck-spacing-extra-large)
+			var(--ck-spacing-tiny)
+			var(--ck-spacing-large);
+	}
+
+	.ck-ai-chat-history__item {
+		display: flex;
+		position: relative;
+		transition: transform 300ms ease;
+
+		@media (prefers-reduced-motion: reduce) {
+			transition: none;
+		}
+
+		&:hover {
+			background-color: var(--ck-ai-chat-button-active-background-color);
+		}
+	}
+
+	.ck-ai-chat-history__item-title {
+		display: inline-block;
+		width: 100%;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.ck-ai-chat-history__item--active {
+		& .ck-ai-chat-history__item-title {
+			font-weight: 700;
+		}
+	}
+
+	.ck-ai-chat-history__item-row {
+		--ck-icon-font-size: .666em;
+		--ck-ui-component-min-height: 1.7em;
+		--ck-ui-component-min-width: 1.7em;
+
+		width: 100%;
+		min-width: 0;
+		margin-left: 0.3em;
+	}
+
+	.ck-ai-chat-history__item-row, .ck-ai-chat-history__item-actions {
+		display: flex;
+		align-items: center;
+		gap: 0.6em;
+	}
+
+	.ck-ai-chat-history__item-actions {
+		height: 100%;
+
+		& > .ck-button,
+		& > .ck-dropdown .ck-dropdown__button {
+			opacity: .7;
+
+			&:hover {
+				opacity: 1;
+				background: none;
+			}
+
+			&.ck-on {
+				background-color: var(--ck-ai-chat-button-active-background-color);
+				color: var(--ck-ai-chat-button-hover-color);
+
+				svg {
+					color: var(--ck-ai-chat-button-active-color);
+				}
+			}
+		}
+	}
+
+	.ck-ai-chat-history__item--edit .ck-input,
+	.ck-ai-chat-history__item--edit .ck-input_focused {
+		width: 100%;
+		padding: 0;
+		border: none;
+		box-shadow: none;
+		background: transparent;
+	}
+
+	.ck-ai-chat-history__item--edit {
+		background: var(--ck-ai-chat-button-active-background-color);
+
+		& .ck-ai-chat-history__item-edit .ck-input {
+			background: var(--ck-ai-chat-button-active-background-color);
+		}
+
+		& .ck-ai-chat-history__item-actions {
+			align-items: center;
+		}
+	}
+
+	.ck-ai-chat-history__item-content {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: flex-start;
+		flex: 1 0 0;
+		overflow: hidden;
+	}
+
+	.ck-ai-chat-history__item-main-content {
+		width: 100%;
+	}
+
+	.ck-ai-chat-history__item-main-content, .ck-ai-chat-history__item-check-container {
+		display: flex;
+		align-items: center;
+		height: 2em;
+	}
+
+	.ck-ai-chat-history__item-check-container {
+		--ck-icon-font-size: .5em;
+
+		min-width: var(--ai-active-icon-size);
+	}
+
+	.ck-ai-chat-history__item-date {
+		line-height: 1.385em;
+		color: var(--ck-ai-chat-color-icon);
+	}
+
+	.ck-ai-chat-history__empty {
+		padding: var(--ck-spacing-tiny) var(--ck-spacing-large) var(--ck-spacing-large) var(--ck-spacing-large);
+
+		.ck-ai-chat-history__empty-message {
+			text-wrap: auto;
+			line-height: 1.85em;
+			margin: var(--ck-spacing-large) 0;
+		}
+
+		.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-confirm-view {
+		--ck-icon-font-size: .666em;
+		--ck-ui-component-min-height: 1.7em;
+		--ck-ui-component-min-width: 1.7em;
+
+		.ck-confirm-view-inner {
+			flex-direction: row;
+			align-items: center;
+			justify-content: space-between;
+			gap: 0.6em;
+			flex: 1 0 0;
+			margin-left: var(--ai-active-icon-size);
+		}
+
+		.ck-confirm-view-actions {
+			display: flex;
+			gap: 0.6em;
+		}
+	}
+}

package/theme/aichat/aiminitoolbar.css

@@ -0,0 +1,94 @@
+/*
+ * 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-mini-toolbar {
+	--ck-color-button-action-background: hsl(263.2, 59.2%, 52%);
+	--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-color-button-action-hover-background: hsl(262.6, 58.9%, 49.6%);
+	--ck-color-button-action-active-background: hsl(262.6, 58.9%, 49.6%);
+	--ck-color-button-action-disabled-background: hsl(263.8, 59.3%, 75.9%);
+
+	position: absolute;
+	right: var(--ck-spacing-large);
+	bottom: 0;
+	transform: translateY(50%);
+
+	& .ck.ck-button {
+		font-size: .9em;
+		font-family: var(--ck-ai-chat-font-family);
+		color: var(--ck-ai-chat-color-icon);
+
+		&.ck-on {
+			color: var(--ck-ai-background-color-action-button);
+		}
+
+		&.ck-button_with-text {
+			min-height: 2.1em;
+			box-sizing: border-box;
+			flex-direction: row-reverse;
+			padding-right: 0.3em;
+			padding-left: 0.3em;
+
+			span {
+				line-height: 1.4em;
+			}
+
+			svg {
+				margin-left: var(--ck-spacing-medium);
+				margin-right: 0;
+				--ck-icon-size: 16px
+			}
+		}
+
+		&.ck-ai-mini-toolbar-copy-button {
+			& .ck-ai-mini-toolbar-copy-button__check-mark {
+				position: absolute;
+				top: 50%;
+				right: 50%;
+				transform: translate(50%, -50%);
+				color: var(--ck-color-base-action);
+				display: none;
+			}
+
+			&.ck-ai-mini-toolbar-copy-button_copied {
+				& .ck-button__icon {
+					display: none;
+				}
+
+				& .ck-ai-mini-toolbar-copy-button__check-mark {
+					display: block;
+					animation-duration: 1s;
+					animation-name: ck-ai-mini-toolbar-copy-animation;
+					animation-iteration-count: 1;
+					animation-timing-function: ease-out;
+				}
+			}
+		}
+	}
+}
+
+@keyframes ck-ai-mini-toolbar-copy-animation {
+	0% {
+		clip-path: inset(0 100% 0 0);
+	}
+
+	50% {
+		clip-path: inset(0 0 0 0);
+	}
+
+	100% {
+		clip-path: inset(0 0 0 0);
+	}
+}