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

package/theme/aiassistant/ai-form.css

@@ -1,262 +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-ui/theme/mixins/_dir.css";
-@import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
-
-:root {
-	--ck-ai-form-view-width: 600px;
-	--ck-ai-form-content-height: 175px;
-	--ck-ai-form-content-background: hsl(0, 0%, 98%);
-	--ck-ai-form-history-font-size: .9em;
-
-	--ck-ai-form-error-background: var(--ck-color-light-red);
-}
-
-/* Note: This class name is mentioned in the guide and acts like a public API. */
-.ck .ck-ai-form {
-	width: var(--ck-ai-form-view-width);
-
-	/* Don't overflow the parent dialog container */
-	max-width: 100%;
-
-	@mixin ck-media-phone {
-		/* Allow the for the layout to be fluid in narrow viewports to avoid breaking it due to limited
-		 * horizontal space (https://github.com/ckeditor/ckeditor5-commercial/issues/5913). */
-		--ck-ai-form-view-width: 100vw;
-	}
-
-	& .ck-ai-form-content {
-		padding: var(--ck-spacing-large);
-		width: 100%;
-
-		& .ck-input {
-			width: 100%;
-		}
-
-		& .ck-ai-form__content-area-wrapper {
-			width: 100%;
-			max-height: var(--ck-ai-form-content-height);
-			overflow-y: auto;
-			border: 1px solid var(--ck-color-base-border);
-			border-radius: 2px;
-
-			&:focus {
-				outline: none;
-				border: var(--ck-focus-ring);
-				box-shadow: var(--ck-focus-outer-shadow), 0 0;
-			}
-		}
-
-		& .ck-ai-form__content-area {
-			display: flex;
-			background-color: var(--ck-ai-form-content-background);
-
-			&.ck-ai-form__content-area--processing {
-				--ck-color-text: var(--ck-color-input-disabled-text);
-				background-color: var(--ck-color-input-disabled-background);
-			}
-
-			/* Note: This class name is mentioned in the guide and acts like a public API */
-			& .ck-ai-form__content-field {
-				width: 100%;
-				white-space: normal;
-				padding: var(--ck-spacing-tiny) var(--ck-spacing-medium);
-				min-height: calc( var(--ck-line-height-base) * var(--ck-font-size-base) );
-				box-sizing: content-box;
-
-				@mixin ck-dir ltr {
-					padding-right: 0;
-				}
-
-				@mixin ck-dir rtl {
-					padding-left: 0;
-				}
-
-				& > * {
-					white-space: normal;
-					color: inherit;
-				}
-			}
-
-			& .ck-spinner-container {
-				@mixin ck-dir ltr {
-					margin-right: var(--ck-spacing-medium);
-				}
-
-				@mixin ck-dir rtl {
-					margin-left: var(--ck-spacing-medium);
-				}
-
-			}
-
-			& .ck-ai-form__copy-button-wrapper {
-				display: flex;
-				flex-direction: column-reverse;
-				padding-left: 2px;
-			}
-
-			& .ck-ai-form__copy-button {
-				position: sticky;
-				right: 1px;
-				bottom: 1px;
-				padding: 4px;
-				min-height: unset;
-				min-width: unset;
-
-				& svg {
-					--ck-icon-size: 16px;
-				}
-
-				&.ck-ai-form__copy-button--copied {
-					color: inherit;
-				}
-			}
-		}
-
-		& .ck-ai-form__toolbar {
-			border: none;
-			padding: 0;
-			margin-top: var(--ck-spacing-medium);
-			margin-bottom: calc( 2 * var(--ck-spacing-medium) );
-		}
-
-		& .ck-ai-form__loader {
-			display: flex;
-			align-items: center;
-
-			& .ck-spinner {
-				box-sizing: border-box;
-			}
-		}
-
-		& .ck-autocomplete {
-			display: flex;
-			justify-content: space-between;
-
-			& > .ck-labeled-field-view {
-				flex-grow: 1;
-			}
-
-			& > .ck.ck-ai-form__submit {
-				@mixin ck-dir ltr {
-					margin-left: var(--ck-spacing-medium);
-				}
-
-				@mixin ck-dir rtl {
-					margin-right: var(--ck-spacing-medium);
-				}
-
-				border-color: var(--ck-ai-form-submit-button-border-color);
-				color: var(--ck-ai-form-submit-button-text-color);
-
-				&.ck-disabled {
-					border-color: var(--ck-ai-form-submit-button-disabled-border-color);
-				}
-			}
-
-			/* Toggle history button */
-			& > .ck-labeled-field-view .ck-ai-form__toggle-history {
-				position: absolute;
-				font-size: var(--ck-font-size-tiny);
-
-				@mixin ck-dir ltr {
-					right: var(--ck-spacing-medium);
-				}
-
-				@mixin ck-dir rtl {
-					left: var(--ck-spacing-medium);
-				}
-
-				bottom: var(--ck-spacing-small);
-				top: var(--ck-spacing-small);
-				padding: 4px;
-				min-height: unset;
-				min-width: unset;
-			}
-
-			& .ck-textarea {
-				/* Give the toggle history button some space */
-				@mixin ck-dir ltr {
-					padding-right: 30px;
-				}
-
-				@mixin ck-dir rtl {
-					padding-left: 30px;
-				}
-
-				/* Squash the textarea horizontally if necessary on narrow layouts
-				 * to avoid breaking the layout even at the cost of the placeholder
-				 * being cut off (https://github.com/ckeditor/ckeditor5-commercial/issues/5913). */
-				@mixin ck-media-phone {
-					--ck-input-width: auto;
-				}
-			}
-
-			/* Prompt history group */
-			& .ck-search__results .ck-list .ck-list__group {
-				display: grid;
-				grid-template-columns: auto 1fr;
-				grid-template-rows: auto;
-				grid-column-gap: 0px;
-				grid-row-gap: 0px;
-
-				/* History group label */
-				& > span {
-					grid-area: 1 / 1 / 2 / 2;
-				}
-
-				/* Clear button in the history */
-				& > .ck-button {
-					padding: 0;
-					min-height: auto;
-					grid-area: 1 / 2 / 2 / 3;
-					font-size: var(--ck-ai-form-history-font-size);
-					justify-self: start;
-					background: none;
-					margin: var(--ck-spacing-medium) 0 0;
-
-					& .ck-button__label {
-						line-height: inherit;
-
-						&:hover {
-							text-decoration: underline;
-						}
-					}
-				}
-
-				& > .ck-list {
-					grid-area: 2 / 1 / 3 / 3;
-
-					/* Prompts can be very long. We need to display them whole. */
-					& .ck-list__item .ck-button .ck-button__label {
-						white-space: nowrap;
-						overflow: hidden;
-						max-width: 100%;
-						text-overflow: ellipsis;
-						font-size: var(--ck-ai-form-history-font-size);
-						line-height: var(--ck-line-height-base);
-					}
-				}
-			}
-		}
-	}
-
-	& .ck-ai-form__error {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		padding: var(--ck-spacing-medium);
-		background-color: var(--ck-ai-form-error-background);
-		color: var(--ck-color-base-text);
-		border-radius: 2px;
-		margin-bottom: var(--ck-spacing-medium);
-	}
-}
-

package/theme/aiassistant/ai.css

@@ -1,120 +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
- */
-
-/*
- * These definitions bring violet accents (tint) across the AI UI.
- */
-:root {
-	--ck-ai-form-submit-button-text-color: 						var(--ck-color-text);
-	--ck-ai-form-submit-button-border-color: 					transparent;
-	--ck-ai-form-submit-button-disabled-border-color: 			transparent;
-	--ck-ai-toolbar-button-hover-color: 						var(--ck-color-text);
-	--ck-color-ai-selection:									hsla(201, 100%, 56%, 0.3);
-}
-
-/* Note: This class name is mentioned in the guide and acts like a public API. */
-.ck-ai-assistant-ui_theme {
-	--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-background: 						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%);
-
-	--ck-color-list-button-hover-background: 					hsl(262.1,100%,96.3%);
-
-	--ck-ai-form-content-background: 							hsl(0,0%,97.6%);
-	--ck-ai-form-submit-button-text-color: 						var(--ck-color-button-on-color);
-	--ck-ai-form-submit-button-border-color: 					var(--ck-color-button-action-background);
-	--ck-ai-form-submit-button-disabled-border-color: 			var(--ck-color-button-action-disabled-background);
-	--ck-ai-toolbar-button-hover-color: 						var(--ck-color-button-on-color);
-
-	--ck-color-ai-selection:									hsl(262.5,60%,90%);
-}
-
-/*
- * Apply the theme colors for specific elements.
- */
-.ck-ai-commands-dropdown > .ck-button:hover,
-.ck-ai-assistant-button:hover {
-	color: var(--ck-ai-toolbar-button-hover-color);
-}
-
-/*
- * Classes used by the "fake visual selection" displayed in the content
- * when the AI dialog is open.
- *
- * Narrow down to <span> to prevent changing background for widgets and nested editables.
- */
-.ck span.ck-fake-ai-selection {
-	background: var(--ck-color-ai-selection);
-}
-
-.ck .ck-widget.ck-fake-ai-selection {
-	outline-color: var(--ck-color-ai-selection);
-}
-
-/*
- * Classes used by the "fake visual candidate selection" displayed in the content when an input
- * in the AI dropdown has focus (the browser does not render the native selection in this state).
- *
- * Narrow down to <span> to prevent changing background for widgets and nested editables.
- */
-.ck span.ck-fake-ai-selection-candidate {
-	background: var(--ck-color-ai-selection);
-}
-
-/* A collapsed fake visual selection. */
-.ck .ck-fake-ai-selection_collapsed {
-	height: 100%;
-	border-right: 1px solid var(--ck-color-base-text);
-	margin-right: -1px;
-	outline: solid 1px hsla(0, 0%, 100%, .5);
-}
-
-/*
- * Styles of the AI response field. The margins, font sizes and line-heights have been reduced
- * to save space.
- *
- * Note: This class name is mentioned in the guide and acts like a public API.
- */
-.ck.ck-content.ck-ai-form__content-field {
-	& h2 {
-		font-size: 1.3em;
-	}
-
-	& h3 {
-		font-size: 1.2em;
-	}
-
-	& h4, & h5, & h6 {
-		font-size: 1.1em;
-	}
-
-	& h2, & h3, & h4, & h5, & h6, & p, & ul, & ol {
-		margin-block-start: .5em;
-		margin-block-end: .5em;
-		line-height: 1.7em;
-	}
-
-	& > :first-child {
-		margin-top: 0;
-	}
-
-	& > :last-child {
-		margin-bottom: 0;
-	}
-}

package/theme/aiballoon/aiballoon.css

@@ -1,58 +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 {
-	/* Taken from old AI Assistant */
-	--ck-color-ai-selection: hsl(262.5, 60%, 90%);
-
-	/* Font family for the balloon. */
-	--ck-ai-balloon-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-
-/**
- * The styles shared by all consumers of the AI Balloon, including: AI Chat Balloon, AI Quick Actions Balloon.
- */
-.ck.ck-ai-balloon {
-	* {
-		font-family: var(--ck-ai-balloon-font-family) !important;
-	}
-
-	/**
-	 * The error view, e.g. when the selection the balloon was opened for was removed.
-	 */
-	& .ck.ck-ai-suggestion__error.ck-ai-balloon-error .ck-ai-suggestion__error-text {
-		--ck-border-radius: 4px;
-
-		background-color: var(--ck-ai-notification-error-color-background);
-		border: 1px solid var(--ck-ai-notification-error-color-border);
-		color: var(--ck-ai-notification-color-text);
-		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.
- *
- * Narrow down to <span> to prevent changing background for widgets and nested editables.
- */
-.ck span.ck-fake-ai-selection {
-	background: var(--ck-color-ai-selection);
-}
-
-.ck .ck-widget.ck-fake-ai-selection {
-	outline-color: var(--ck-color-ai-selection);
-}
-
-.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;
-}

package/theme/aichat/aichat-controls/aichat-context-chip.css

@@ -1,139 +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
- */
-
-
-/* .ck-ai-chat-context-chip {
-
-} */
-
-:root {
-	--ck-ai-chat-context-balloon-width: 290px;
-}
-
-.ck.ck-balloon-panel,
-.ck.ck-ai-chat {
-	& .ck-ai-chat-context-chip {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		flex-shrink: 0;
-
-		max-width: max(calc(33% - var(--ck-spacing-medium-small) - (2 * var(--ck-spacing-large) / 3)), 118px);
-		box-sizing: border-box;
-
-		width: auto;
-
-		padding: var(--ck-spacing-small) var(--ck-spacing-medium-small);
-
-		background-color: var(--ck-ai-chat-user-context-background);
-		border-radius: var(--ck-ai-border-radius);
-		border: var(--ck-ai-chat-border-width) solid var(--ck-ai-border-color-main);
-
-		line-height: 1;
-		color: var(--ck-ai-chat-color-icon);
-
-		&.ck-ai-chat-context-chip_wide {
-			max-width: max(calc(66% - var(--ck-spacing-medium-small)), 240px);
-			width: auto;
-		}
-
-		&.ck-ai-chat-context-chip_document {
-			max-width: unset;
-		}
-
-		&.ck-ai-chat-context-chip_new-chip {
-			animation: ck-ai-new-item-flash var(--ck-ai-chat-animation-duration) var(--ck-ai-chat-animation-timing);
-		}
-
-		& > .ck-ai-chat-context-chip__label {
-			font-size: 0.9em;
-			display: inline-block;
-			margin: 0 var(--ck-spacing-medium-small);
-			text-overflow: ellipsis;
-			overflow: hidden;
-			line-height: 1.25;
-			color: var(--ck-ai-chat-color-icon);
-		}
-
-		& > .ck-icon.ck-ai-chat-context-chip__type-icon {
-			--ck-icon-size: 1em;
-
-			flex-shrink: 0;
-			font-size: 1em;
-			fill: var(--ck-ai-chat-color-icon);
-		}
-
-		& .ck-button {
-			--ck-ui-component-min-height: 1em;
-
-			max-width: var(--ck-ui-component-min-height);
-			max-height: var(--ck-ui-component-min-height);
-			border: none;
-			padding: var(--ck-spacing-tiny);
-
-			& > .ck-icon {
-				--ck-icon-size: 1em;
-
-				font-size: 1em;
-				color: var(--ck-ai-chat-color-icon);
-			}
-		}
-	}
-
-	& .ck-ai-chat-context-chips-wrapper {
-		display: flex;
-		gap: var(--ck-spacing-medium-small);
-		flex-wrap: wrap;
-		align-items: center;
-		justify-content: flex-end;
-
-		width: 100%;
-		margin-bottom: 0;
-		padding: 0;
-	}
-
-	& .ck-ai-chat-context-chips-wrapper-balloon {
-		display: flex;
-		gap: var(--ck-spacing-standard);
-		flex-wrap: wrap;
-		align-items: center;
-		justify-content: flex-start;
-
-		width: var(--ck-ai-chat-context-balloon-width);
-		max-height: 10em;
-		padding: var(--ck-spacing-standard);
-		overflow-y: auto;
-
-		& .ck-ai-chat-context-chip {
-			max-width: max( calc(50% - var(--ck-spacing-standard)), 110px);
-		}
-
-		&.ck-ai-chat-context-chip_wide {
-			max-width: 100%;
-		}
-
-		& .ck-ai-chat-context-chip.ck-ai-chat-context-chip_new-chip {
-			animation: none;
-		}
-	}
-}
-
-@keyframes ck-ai-new-item-flash {
-	0% {
-		background-color: var(--ck-ai-chat-flash-color);
-		color: var(--ck-ai-chat-flash-color-text);
-		border-color: var(--ck-ai-chat-flash-color-text);
-	}
-
-	100% {
-		background-color: var(--ck-ai-chat-user-context-background);
-		color: var(--ck-ai-chat-color-icon);
-		border-color: var(--ck-ai-border-color-main);
-	}
-}