@ckeditor/ckeditor5-ai/theme/aichat/aichat-controls/aichat-context-chip.css

AI features for CKEditor 5.

/*
 * 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-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);
	}
}