UNPKG

@ckeditor/ckeditor5-ai

Version:

AI features for CKEditor 5.

1,388 lines (1,150 loc) • 146 kB
/** * @license 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-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: #1fb0ff4d; } .ck-ai-assistant-ui_theme { --ck-color-button-default-hover-background: #f3ecff; --ck-color-button-default-active-background: #f3ecff; --ck-color-button-on-background: #f3ecff; --ck-color-button-on-hover-background: #f3ecff; --ck-color-button-on-active-background: #f3ecff; --ck-color-button-on-disabled-background: #f3ecff; --ck-color-button-on-color: #743ccd; --ck-color-button-action-background: #743ccd; --ck-color-button-action-hover-background: #6c34c9; --ck-color-button-action-active-background: #6c34c9; --ck-color-button-action-disabled-background: #ba9de6; --ck-color-list-button-hover-background: #f3ecff; --ck-ai-form-content-background: #f9f9f9; --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: #e2d6f5; } .ck-ai-commands-dropdown > .ck-button:hover, .ck-ai-assistant-button:hover { color: var(--ck-ai-toolbar-button-hover-color); } .ck span.ck-fake-ai-selection-candidate { background: var(--ck-color-ai-selection); } .ck .ck-fake-ai-selection_collapsed { border-right: 1px solid var(--ck-color-base-text); outline: 1px solid #ffffff80; height: 100%; margin-right: -1px; } .ck.ck-content.ck-ai-form__content-field h2 { font-size: 1.3em; } .ck.ck-content.ck-ai-form__content-field h3 { font-size: 1.2em; } .ck.ck-content.ck-ai-form__content-field h4, .ck.ck-content.ck-ai-form__content-field h5, .ck.ck-content.ck-ai-form__content-field h6 { font-size: 1.1em; } .ck.ck-content.ck-ai-form__content-field h2, .ck.ck-content.ck-ai-form__content-field h3, .ck.ck-content.ck-ai-form__content-field h4, .ck.ck-content.ck-ai-form__content-field h5, .ck.ck-content.ck-ai-form__content-field h6, .ck.ck-content.ck-ai-form__content-field p, .ck.ck-content.ck-ai-form__content-field ul, .ck.ck-content.ck-ai-form__content-field ol { margin-block: .5em; line-height: 1.7em; } .ck.ck-content.ck-ai-form__content-field > :first-child { margin-top: 0; } .ck.ck-content.ck-ai-form__content-field > :last-child { margin-bottom: 0; } :root { --ck-ai-dropdown-view-width: 250px; --ck-ai-dropdown-view-list-max-height: 250px; } .ck.ck-ai-commands-search { width: var(--ck-ai-dropdown-view-width); } .ck.ck-ai-commands-search > .ck-labeled-field-view { padding: var(--ck-spacing-large); } .ck.ck-ai-commands-search > .ck-labeled-field-view .ck-input { min-width: unset; } .ck.ck-ai-commands-search > .ck-search__results { border-top: 1px solid var(--ck-color-base-border); } .ck.ck-ai-commands-search > .ck-search__results > .ck-list { max-height: var(--ck-ai-dropdown-view-list-max-height); overflow: auto; } :root { --ck-ai-form-view-width: 600px; --ck-ai-form-content-height: 175px; --ck-ai-form-content-background: #fafafa; --ck-ai-form-history-font-size: .9em; --ck-ai-form-error-background: var(--ck-color-light-red); } .ck .ck-ai-form { width: var(--ck-ai-form-view-width); max-width: 100%; } @media screen and (width <= 600px) { .ck .ck-ai-form { --ck-ai-form-view-width: 100vw; } } .ck .ck-ai-form .ck-ai-form-content { padding: var(--ck-spacing-large); width: 100%; } .ck .ck-ai-form .ck-ai-form-content .ck-input { width: 100%; } .ck .ck-ai-form .ck-ai-form-content .ck-ai-form__content-area-wrapper { width: 100%; max-height: var(--ck-ai-form-content-height); border: 1px solid var(--ck-color-base-border); border-radius: 2px; overflow-y: auto; } .ck .ck-ai-form .ck-ai-form-content .ck-ai-form__content-area-wrapper:focus { border: var(--ck-focus-ring); box-shadow: var(--ck-focus-outer-shadow), 0 0; outline: none; } .ck .ck-ai-form .ck-ai-form-content .ck-ai-form__content-area { background-color: var(--ck-ai-form-content-background); display: flex; } .ck .ck-ai-form .ck-ai-form-content .ck-ai-form__content-area.ck-ai-form__content-area--processing { --ck-color-text: var(--ck-color-input-disabled-text); background-color: var(--ck-color-input-disabled-background); } .ck .ck-ai-form .ck-ai-form-content .ck-ai-form__content-area .ck-ai-form__content-field { white-space: normal; width: 100%; 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; } [dir="ltr"] :is(.ck .ck-ai-form .ck-ai-form-content .ck-ai-form__content-area .ck-ai-form__content-field) { padding-right: 0; } [dir="rtl"] :is(.ck .ck-ai-form .ck-ai-form-content .ck-ai-form__content-area .ck-ai-form__content-field) { padding-left: 0; } .ck .ck-ai-form .ck-ai-form-content .ck-ai-form__content-area .ck-ai-form__content-field > * { white-space: normal; color: inherit; } [dir="ltr"] :is(.ck .ck-ai-form .ck-ai-form-content .ck-ai-form__content-area .ck-spinner-container) { margin-right: var(--ck-spacing-medium); } [dir="rtl"] :is(.ck .ck-ai-form .ck-ai-form-content .ck-ai-form__content-area .ck-spinner-container) { margin-left: var(--ck-spacing-medium); } .ck .ck-ai-form .ck-ai-form-content .ck-ai-form__content-area .ck-ai-form__copy-button-wrapper { flex-direction: column-reverse; padding-left: 2px; display: flex; } .ck .ck-ai-form .ck-ai-form-content .ck-ai-form__content-area .ck-ai-form__copy-button { min-height: unset; min-width: unset; padding: 4px; position: sticky; bottom: 1px; right: 1px; } .ck .ck-ai-form .ck-ai-form-content .ck-ai-form__content-area .ck-ai-form__copy-button svg { --ck-icon-size: 16px; } .ck .ck-ai-form .ck-ai-form-content .ck-ai-form__content-area .ck-ai-form__copy-button.ck-ai-form__copy-button--copied { color: inherit; } .ck .ck-ai-form .ck-ai-form-content .ck-ai-form__toolbar { margin-top: var(--ck-spacing-medium); margin-bottom: calc(2 * var(--ck-spacing-medium)); border: none; padding: 0; } .ck .ck-ai-form .ck-ai-form-content .ck-ai-form__loader { align-items: center; display: flex; } .ck .ck-ai-form .ck-ai-form-content .ck-ai-form__loader .ck-spinner { box-sizing: border-box; } .ck .ck-ai-form .ck-ai-form-content .ck-autocomplete { justify-content: space-between; display: flex; } .ck .ck-ai-form .ck-ai-form-content .ck-autocomplete > .ck-labeled-field-view { flex-grow: 1; } [dir="ltr"] :is(.ck .ck-ai-form .ck-ai-form-content .ck-autocomplete > .ck.ck-ai-form__submit) { margin-left: var(--ck-spacing-medium); } [dir="rtl"] :is(.ck .ck-ai-form .ck-ai-form-content .ck-autocomplete > .ck.ck-ai-form__submit) { margin-right: var(--ck-spacing-medium); } .ck .ck-ai-form .ck-ai-form-content .ck-autocomplete > .ck.ck-ai-form__submit { border-color: var(--ck-ai-form-submit-button-border-color); color: var(--ck-ai-form-submit-button-text-color); } .ck .ck-ai-form .ck-ai-form-content .ck-autocomplete > .ck.ck-ai-form__submit.ck-disabled { border-color: var(--ck-ai-form-submit-button-disabled-border-color); } .ck .ck-ai-form .ck-ai-form-content .ck-autocomplete > .ck-labeled-field-view .ck-ai-form__toggle-history { font-size: var(--ck-font-size-tiny); position: absolute; } [dir="ltr"] :is(.ck .ck-ai-form .ck-ai-form-content .ck-autocomplete > .ck-labeled-field-view .ck-ai-form__toggle-history) { right: var(--ck-spacing-medium); } [dir="rtl"] :is(.ck .ck-ai-form .ck-ai-form-content .ck-autocomplete > .ck-labeled-field-view .ck-ai-form__toggle-history) { left: var(--ck-spacing-medium); } .ck .ck-ai-form .ck-ai-form-content .ck-autocomplete > .ck-labeled-field-view .ck-ai-form__toggle-history { bottom: var(--ck-spacing-small); top: var(--ck-spacing-small); min-height: unset; min-width: unset; padding: 4px; } [dir="ltr"] :is(.ck .ck-ai-form .ck-ai-form-content .ck-autocomplete .ck-textarea) { padding-right: 30px; } [dir="rtl"] :is(.ck .ck-ai-form .ck-ai-form-content .ck-autocomplete .ck-textarea) { padding-left: 30px; } @media screen and (width <= 600px) { .ck .ck-ai-form .ck-ai-form-content .ck-autocomplete .ck-textarea { --ck-input-width: auto; } } .ck .ck-ai-form .ck-ai-form-content .ck-autocomplete .ck-search__results .ck-list .ck-list__group { grid-column-gap: 0px; grid-row-gap: 0px; grid-template-rows: auto; grid-template-columns: auto 1fr; display: grid; } .ck .ck-ai-form .ck-ai-form-content .ck-autocomplete .ck-search__results .ck-list .ck-list__group > span { grid-area: 1 / 1 / 2 / 2; } .ck .ck-ai-form .ck-ai-form-content .ck-autocomplete .ck-search__results .ck-list .ck-list__group > .ck-button { min-height: auto; font-size: var(--ck-ai-form-history-font-size); margin: var(--ck-spacing-medium) 0 0; background: none; grid-area: 1 / 2 / 2 / 3; justify-self: start; padding: 0; } .ck .ck-ai-form .ck-ai-form-content .ck-autocomplete .ck-search__results .ck-list .ck-list__group > .ck-button .ck-button__label { line-height: inherit; } .ck .ck-ai-form .ck-ai-form-content .ck-autocomplete .ck-search__results .ck-list .ck-list__group > .ck-button .ck-button__label:hover { text-decoration: underline; } .ck .ck-ai-form .ck-ai-form-content .ck-autocomplete .ck-search__results .ck-list .ck-list__group > .ck-list { grid-area: 2 / 1 / 3 / 3; } .ck .ck-ai-form .ck-ai-form-content .ck-autocomplete .ck-search__results .ck-list .ck-list__group > .ck-list .ck-list__item .ck-button .ck-button__label { white-space: nowrap; text-overflow: ellipsis; max-width: 100%; font-size: var(--ck-ai-form-history-font-size); line-height: var(--ck-line-height-base); overflow: hidden; } .ck .ck-ai-form .ck-ai-form__error { padding: var(--ck-spacing-medium); background-color: var(--ck-ai-form-error-background); color: var(--ck-color-base-text); margin-bottom: var(--ck-spacing-medium); border-radius: 2px; justify-content: center; align-items: center; display: flex; } .ck.ck-button.ck-ai-tabs__resize.ck-on:not(:hover) { background-color: var(--ck-color-ai-button-tertiary-background); } :root { --ck-color-ai-chat-shortcuts-shortcut-border: var(--ck-color-ai-accent-100); --ck-color-ai-chat-shortcuts-shortcut-icon: var(--ck-color-ai-accent-700); --ck-color-ai-chat-shortcuts-shortcut-icon-hover-background: var(--ck-color-ai-accent-50); --ck-color-ai-chat-shortcuts-prompt-highlight-background: var(--ck-color-ai-accent-700-a1); --ck-color-ai-chat-shortcuts-prompt-animation-glow-ring: var(--ck-color-ai-accent-700-a3); --ck-color-ai-chat-shortcuts-prompt-animation-border: var(--ck-color-ai-accent-700); --ck-ai-chat-shortcut-border-radius: .6em; --ck-ai-chat-shortcut-padding: var(--ck-spacing-medium) calc(2 * var(--ck-spacing-standard)); --ck-ai-chat-shortcut-min-height: 3.07em; --ck-ai-chat-shortcut-icon-size: 1.385em; --ck-ai-chat-shortcuts-prompt-input-animation: ck-ai-chat-shortcuts-prompt-input-glow .8s ease-in-out; --ck-ai-chat-shortcuts-prompt-input-animation-box-shadow: 0 0 0 4px var(--ck-color-ai-chat-shortcuts-prompt-animation-glow-ring); --ck-ai-chat-shortcuts-prompt-input-animation-border: 1px solid var(--ck-color-ai-chat-shortcuts-prompt-animation-border); } .ck.ck-ai-chat-shortcuts > .ck-list { gap: var(--ck-spacing-medium); padding: 0; } .ck.ck-ai-chat-shortcuts > .ck-list .ck.ck-button.ck-ai-chat-shortcut { border-radius: var(--ck-ai-chat-shortcut-border-radius); border-color: var(--ck-color-ai-chat-shortcuts-shortcut-border); padding: var(--ck-ai-chat-shortcut-padding); min-height: var(--ck-ai-chat-shortcut-min-height); font-weight: 500; } .ck.ck-ai-chat-shortcuts > .ck-list .ck.ck-button.ck-ai-chat-shortcut .ck-icon { --ck-icon-size: var(--ck-ai-chat-shortcut-icon-size); --ck-icon-font-size: 1em; color: var(--ck-color-ai-chat-shortcuts-shortcut-icon); margin-right: var(--ck-spacing-standard); flex: none; } .ck.ck-ai-chat-shortcuts > .ck-list .ck.ck-button.ck-ai-chat-shortcut:hover { background-color: var(--ck-color-ai-chat-shortcuts-shortcut-icon-hover-background); } .ck.ck-ai-chat__prompt-input.ck-search.ck-ai-chat__prompt-input_highlighted .ck.ck-input.ck-textarea { --ck-color-ai-chat-prompt-input-animation-background: var(--ck-color-ai-chat-shortcuts-prompt-highlight-background); animation: var(--ck-ai-chat-prompt-input-animation), var(--ck-ai-chat-shortcuts-prompt-input-animation); } @keyframes ck-ai-chat-shortcuts-prompt-input-glow { 0% { box-shadow: var(--ck-ai-chat-shortcuts-prompt-input-animation-box-shadow); border: var(--ck-ai-chat-shortcuts-prompt-input-animation-border); } 100% { box-shadow: var(--ck-focus-outer-shadow); border: var(--ck-focus-ring); } } :root { --ck-ai-chat-suggestion-container-header-font-size: .9em; --ck-color-ai-chat-suggestion-container-outdated-icon: var(--ck-color-ai-chat-suggestion-icon-default); --ck-color-ai-chat-suggestion-container-header-shadow: var(--ck-color-ai-shadow); --ck-color-ai-chat-suggestion-container-content-part-title: var(--ck-color-ai-gray-600); --ck-color-ai-chat-suggestion-container-content-part-active-outline: var(--ck-color-ai-accent-400); --ck-color-ai-chat-suggestion-container-content-part-active-shadow: var(--ck-color-ai-accent-700-a2); } .ck.ck-ai-suggestion__container { border-radius: var(--ck-rounded-corners-radius); border: 1px solid var(--ck-color-base-border); --ck-border-radius: 4px; position: relative; } .ck.ck-ai-suggestion__container .ck-ai-suggestion__header { border-radius: var(--ck-rounded-corners-radius); height: 3.23em; padding: 0 var(--ck-spacing-large); border-bottom: 1px solid var(--ck-color-base-border); z-index: 1; border-bottom-right-radius: 0; border-bottom-left-radius: 0; flex-direction: row; justify-content: space-between; align-items: center; display: flex; position: relative; } .ck.ck-ai-suggestion__container .ck-ai-suggestion__header > span { font-size: var(--ck-ai-chat-suggestion-container-header-font-size); color: var(--ck-color-ai-chat-icon); flex-grow: 1; font-weight: bold; } .ck.ck-ai-suggestion__container .ck-ai-suggestion__header > .ck-icon { width: 14px; height: 14px; margin-right: var(--ck-spacing-medium); color: var(--ck-color-ai-chat-icon); } .ck.ck-ai-suggestion__container .ck-ai-suggestion__header > .ck-switchbutton { --ck-switch-button-toggle-width: 2.307em; --ck-switch-button-toggle-inner-size: 1em; --ck-switch-button-translation: calc(var(--ck-switch-button-toggle-width) - var(--ck-switch-button-toggle-inner-size) - 2px); --ck-color-switch-button-off-background: var(--ck-color-ai-chat-icon); } .ck.ck-ai-suggestion__container .ck-ai-suggestion__header > .ck-switchbutton .ck-button__label { font-size: var(--ck-ai-chat-suggestion-container-header-font-size); margin-right: var(--ck-spacing-standard); } .ck.ck-ai-suggestion__container .ck-ai-suggestion__header > .ck-switchbutton .ck-button__toggle { border-radius: var(--ck-switch-button-toggle-inner-size); } .ck.ck-ai-suggestion__container .ck-ai-suggestion__header > .ck-switchbutton .ck-button__toggle .ck-button__toggle__inner { border-radius: 100%; } .ck.ck-ai-suggestion__container .ck-ai-suggestion__body { gap: var(--ck-spacing-large); border-radius: var(--ck-rounded-corners-radius); background: var(--ck-color-ai-chat-feed-item-background); border-top-left-radius: 0; border-top-right-radius: 0; flex-direction: column; display: flex; } .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-parts { gap: var(--ck-spacing-large); flex-direction: column; display: flex; } .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-parts > .ck-ai-skeleton { --ck-ai-skeleton-gap: var(--ck-spacing-standard); padding-top: calc(var(--ck-ai-skeleton-gap) + var(--ck-spacing-large)); padding-bottom: calc(var(--ck-ai-skeleton-gap) + var(--ck-spacing-large)); background-color: var(--ck-color-base-background); border-radius: var(--ck-rounded-corners-radius); align-items: flex-start; transition-delay: 0s; position: static; } .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-parts > .ck-ai-skeleton.ck-hidden { transition-duration: 0s; } .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part { border-radius: var(--ck-rounded-corners-radius); padding: var(--ck-spacing-large); background: var(--ck-color-base-background); opacity: 0; padding-top: 0; animation: .2s ease-out forwards ck-ai-suggestion-content-part-fade-in; position: relative; } .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part .ck-ai-suggestion__body__content-part__title { color: var(--ck-color-ai-chat-suggestion-container-content-part-title); justify-content: space-between; align-items: center; height: 2.93em; display: flex; } .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_active { box-shadow: 0 1px 3px 1.5px var(--ck-color-ai-chat-suggestion-container-content-part-active-shadow); outline: 1px solid var(--ck-color-ai-chat-suggestion-container-content-part-active-outline); } .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_active .ck-ai-suggestion__body__content-part__title, .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_active .ck-ai-suggestion__body__content-part__title .ck-toolbar .ck-icon { color: var(--ck-color-ai-chat-primary-button-background); } :is(.ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_accepted, .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_rejected, .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_outdated) .ck-ai-suggestion-streamable-content, :is(.ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_accepted, .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_rejected, .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_outdated) .ck-ai-suggestion__body__content-part__title { opacity: .5; } .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_pending:hover { box-shadow: 0 1px 3px 1.5px var(--ck-color-ai-chat-suggestion-container-header-shadow); } .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_pending:hover .ck-ai-suggestion__body__content-part__title, .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_pending:hover .ck-toolbar .ck-icon { color: var(--ck-color-ai-chat-primary-button-background); } .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck.ck-ai-chat__feed__item.ck-ai-notification_warning { width: 100%; margin-left: 0; margin-right: 0; } .ck.ck-ai-suggestion__container .ck-ai-suggestion__body, .ck.ck-ai-suggestion__container .ck-ai-suggestion__changes { padding: var(--ck-spacing-standard); } @keyframes ck-ai-suggestion-content-part-fade-in { to { opacity: 1; } } :root { --ck-color-ai-chat-feed-item-background: var(--ck-color-ai-gray-50); --ck-color-ai-chat-feed-item-background-secondary: var(--ck-color-ai-gray-50); --ck-color-ai-chat-feed-interaction-header-capabilities-text: var(--ck-color-ai-gray-600); --ck-color-ai-chat-web-source-tooltip-url: var(--ck-color-ai-accent-700); --ck-color-ai-chat-web-source-tooltip-title: var(--ck-color-ai-gray-900); --ck-color-ai-chat-feed-web-sources-header-icon: var(--ck-color-ai-gray-600); --ck-color-ai-chat-feed-web-sources-header-text: var(--ck-color-ai-gray-600); } .ck.ck-ai-chat__feed { padding-bottom: var(--ck-spacing-extra-large); justify-content: flex-start; align-items: stretch; gap: var(--ck-spacing-large); contain: size; flex-flow: column; flex: auto; display: flex; position: relative; overflow-y: auto; } .ck.ck-ai-chat__feed:has( > .ck-ai-skeleton:not(.ck-hidden)) { overflow: hidden; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__items { gap: var(--ck-spacing-extra-large) 0; flex-direction: column; margin-top: auto; display: flex; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__items > .ck-ai-chat__feed__item:first-child { margin-top: var(--ck-spacing-extra-large); } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item { margin: 0 var(--ck-spacing-large); scroll-margin: var(--ck-spacing-large); } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-mini-toolbar, .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-chat__feed__ai-suggestion__actions, .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-suggestion__header__show-changes-toggle { transition: opacity .4s, display .4s allow-discrete; } @starting-style { :is(.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-mini-toolbar, .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-chat__feed__ai-suggestion__actions, .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-suggestion__header__show-changes-toggle) { opacity: 0; } } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .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.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-suggestion__header__show-changes-toggle > .ck-icon { width: 16px; height: 16px; margin-right: 0; margin-left: var(--ck-spacing-medium); } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item:not(.ck-ai-chat__feed__item_done) .ck-ai-mini-toolbar, .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item:not(.ck-ai-chat__feed__item_done) .ck-ai-chat__feed__ai-suggestion__actions, .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item:not(.ck-ai-chat__feed__item_done) .ck-ai-suggestion__header__show-changes-toggle { opacity: 0; display: none; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__text-item { word-break: normal; text-wrap: auto; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__text-item pre > code { white-space: pre-wrap; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__user-message:has(.ck-ai-chat-context-chips-wrapper) { max-width: 100%; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__user-message .ck-ai-chat__feed__message-content { text-align: end; max-width: 80%; margin-inline: auto 0; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__user-message p { background-color: var(--ck-color-ai-chat-feed-item-background-secondary); padding: var(--ck-spacing-standard); border-radius: var(--ck-ai-border-radius); display: inline-block; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck-ai-chat__feed__ai-suggestion { margin: 0 var(--ck-spacing-standard); } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck-ai-chat__feed__ai-suggestion .ck-ai-chat__feed__ai-suggestion__actions { --ck-rounded-corners-radius: 2px; gap: var(--ck-spacing-standard); flex-direction: row; width: fit-content; display: flex; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck-ai-chat__feed__ai-suggestion .ck-ai-chat__feed__ai-suggestion__actions .ck-ai-chat__feed__suggestion__actions__info > p { color: var(--ck-color-ai-chat-icon); font-size: .75em; line-height: 2.8em !important; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck-ai-chat__feed__ai-suggestion .ck-ai-chat__feed__ai-suggestion__actions .ck-ai-chat__feed__suggestion__actions__info > p button { font-size: .8em; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__interaction-header .ck-ai-chat__feed__interaction-header__capabilities { color: var(--ck-color-ai-chat-feed-interaction-header-capabilities-text); align-items: center; gap: 4px; display: flex; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__interaction-header .ck-ai-chat__feed__interaction-header__capabilities svg { background-color: var(--ck-tabs-panels-container-background); border-radius: 50%; flex-shrink: 0; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__interaction-header .ck-ai-chat__feed__interaction-header__capabilities svg:not(:first-child) { margin-left: calc(var(--ck-icon-size) * -.75); } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__interaction-header .ck-ai-chat__feed__interaction-header__capabilities__text { color: var(--ck-color-ai-chat-feed-interaction-header-capabilities-text); font-weight: 500; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-chat__feed__ai-reply-container > *:first-child { margin-top: 0; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-chat__feed__ai-reply-container > *:last-child { margin-bottom: 0; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__ai-suggestion .ck-ai-suggestion__body .ck-suggestion-marker-insertion:not([data-author-id="$aiSuggestion"]), .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__ai-suggestion .ck-ai-suggestion__body .ck-suggestion-marker-formatInline:not([data-author-id="$aiSuggestion"]), .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__ai-suggestion .ck-ai-suggestion__body .ck-suggestion-marker-deletion:not([data-author-id="$aiSuggestion"]) { border-top: 3px solid var(--ck-color-ai-suggestion-inactive-border); border-bottom: 3px solid var(--ck-color-ai-suggestion-inactive-border); background: var(--ck-color-ai-suggestion-inactive-background); } :is(.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__ai-suggestion .ck-ai-suggestion__body .ck-suggestion-marker-insertion:not([data-author-id="$aiSuggestion"]), .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__ai-suggestion .ck-ai-suggestion__body .ck-suggestion-marker-formatInline:not([data-author-id="$aiSuggestion"]), .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__ai-suggestion .ck-ai-suggestion__body .ck-suggestion-marker-deletion:not([data-author-id="$aiSuggestion"])).ck-widget { border: 3px solid var(--ck-color-ai-suggestion-inactive-border); } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__ai-suggestion .ck-ai-suggestion__body .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-color-ai-suggestion-inactive-background); } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__ai-suggestion .ck-ai-suggestion__body .ck-suggestion-marker-deletion:not([data-author-id="$aiSuggestion"]) { text-decoration: line-through 3px; text-decoration-color: var(--ck-color-ai-suggestion-inactive-border); } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__ai-suggestion .ck-ai-suggestion__body .ck-suggestion-marker-insertion.table > tbody > tr > td { background-color: var(--ck-color-suggestion-widget-insertion-background); } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__text-item :not(.ck-ai-chat__feed__context-chips, .ck-ai-chat__feed__context-chips *, .ck-ai-web-source .ck-button__label, .ck-content.ck-ai-suggestion-streamable-content, .ck-content.ck-ai-suggestion-streamable-content *) { white-space: pre-wrap; line-height: 1.4em; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-chat__feed__context-chips { margin-bottom: var(--ck-spacing-medium-small); justify-content: flex-end; display: flex; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-web-sources { gap: var(--ck-spacing-standard); padding: var(--ck-spacing-medium) 0 0; grid-template-columns: repeat(3, 1fr); display: grid; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-web-sources > .ck-ai-web-sources__header { grid-column-start: span 3; font-size: 12px; font-weight: 500; line-height: 1.4em; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-web-sources > .ck-ai-web-sources__header > .ck-icon { vertical-align: text-bottom; width: 14px; height: 14px; margin-right: var(--ck-spacing-medium-small); color: var(--ck-color-ai-chat-feed-web-sources-header-icon); } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-web-sources > .ck-ai-web-sources__header > span { color: var(--ck-color-ai-chat-feed-web-sources-header-text); } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-web-sources > .ck-ai-web-source { padding: var(--ck-spacing-medium) var(--ck-spacing-large); background-color: var(--ck-color-base-background); border: 0; border-radius: 50px; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-web-sources > .ck-ai-web-source:hover { background-color: var(--ck-color-ai-chat-button-active-background); } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-web-sources > .ck-ai-web-source:focus, .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-web-sources > .ck-ai-web-source:active { box-shadow: none; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-web-sources > .ck-ai-web-source .ck-ai-web-source__image, .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-web-sources > .ck-ai-web-source .ck-button__icon { margin-right: var(--ck-spacing-medium); color: var(--ck-color-ai-button-primary-background); width: 16px; height: 16px; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-web-sources > .ck-ai-web-source .ck-button__label { white-space: nowrap; text-overflow: ellipsis; max-width: 75px; font-size: 10px; font-weight: 700; line-height: 1.4em; overflow: hidden; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-web-sources > .ck-ai-web-source .ck-ai-web-source__title { align-items: center; gap: var(--ck-spacing-small); display: flex; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item > .ck-ai-web-sources { padding: var(--ck-spacing-extra-large) 0 var(--ck-spacing-medium) 0; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__loader { align-items: flex-start; display: flex; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__loader .ck.ck-spinner-container.ck-ai-spinner { margin: 0 var(--ck-spacing-large); } .ck.ck-ai-chat__feed .ck.ck-ai-chat__loader .ck.ck-ai-chat__loader-text { white-space: normal; font-weight: 500; line-height: 1.462em; } .ck-ai-chat__feed__ai-suggestion__actions__balloon.ck-balloon-panel { z-index: calc(var(--ck-ai-tabs-overlay-z-index) + 1); } .ck-ai-chat__feed__ai-suggestion__actions__balloon .ck-list__item { min-width: fit-content; } .ck-ai-chat__feed__ai-suggestion__actions__balloon .ck-button.ck-list-item-button { padding-top: 0; padding-bottom: 0; } .ck-ai-chat__feed__ai-suggestion__actions__balloon .ck-button.ck-list-item-button:hover:not(.ck-disabled) { background-color: var(--ck-color-ai-button-secondary-background-hover); } .ck-ai-web-source__tooltip-balloon { border-radius: var(--ck-rounded-corners-radius); } .ck-ai-web-source__tooltip-balloon .ck-ai-web-source__tooltip { font-size: var(--ck-font-size-small); width: 214px; padding: .8em; line-height: 1.4em; } .ck-ai-web-source__tooltip-balloon .ck-ai-web-source__tooltip .ck-ai-web-source__tooltip-row { align-items: center; gap: .4em; margin-bottom: .4em; display: flex; } .ck-ai-web-source__tooltip-balloon .ck-ai-web-source__tooltip .ck-ai-web-source__tooltip-row:last-child { margin-bottom: 0; } .ck-ai-web-source__tooltip-balloon .ck-ai-web-source__tooltip .ck-ai-web-source__tooltip-image { width: 1.477em; height: 1.477em; color: var(--ck-color-ai-button-primary-background); flex-shrink: 0; } .ck-ai-web-source__tooltip-balloon .ck-ai-web-source__tooltip .ck-ai-web-source__tooltip-url { font-size: var(--ck-font-size-small); color: var(--ck-color-ai-chat-web-source-tooltip-url); white-space: normal; word-wrap: break-word; overflow-wrap: break-word; word-break: break-all; font-weight: 500; text-decoration: underline; } .ck-ai-web-source__tooltip-balloon .ck-ai-web-source__tooltip .ck-ai-web-source__tooltip-title { color: var(--ck-color-ai-chat-web-source-tooltip-title); white-space: normal; vertical-align: middle; font-size: 1.026em; font-weight: 700; line-height: 1.35; } @keyframes ck-html-streamer-fade-in { from { opacity: 0; } to { opacity: 1; } } .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); } .ck.ck-ai-chat-controls:has( > :first-child.ck-hidden) { padding-bottom: var(--ck-spacing-large); } .ck.ck-ai-chat-controls.ck-ai-chat-controls-disabled { opacity: .5; pointer-events: none; cursor: default; } .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection { line-height: 0; } .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-dropdown__panel.ck-dropdown__panel_ne { width: 426px; max-width: max-content; max-height: 600px; padding-top: .5em; top: auto; overflow-y: scroll; } .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-button.ck-dropdown__button { min-height: auto; margin-inline-end: 0; padding-top: 0; padding-bottom: 0; font-size: .9em; } .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-button.ck-dropdown__button.ck-on .ck-dropdown__arrow { transform: rotate(180deg); } .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-button.ck-dropdown__button .ck-button__label { width: auto; } .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-list > .ck-list__item:not(:last-child) { margin-bottom: var(--ck-spacing-medium-small); } .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-list > .ck-list__item > .ck-button { background-color: var(--ck-color-list-background); align-items: start; gap: 0; } .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-list > .ck-list__item > .ck-button:hover:not(.ck-disabled) { background-color: var(--ck-color-ai-button-secondary-background-hover); } .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-list > .ck-list__item > .ck-button > .ck-list-item-button__check-holder { flex-shrink: 0; height: 1.2em; } .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-list > .ck-list__item > .ck-button > .ck-list-item-button__check-holder > .ck-list-item-button__check-icon { padding-top: 2px; } .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-list > .ck-list__item > .ck-button > .ck-button__label { line-height: 1.3; } .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-list > .ck-list__item > .ck-button > .ck-button__label > .ck-ai-chat-controls__model-selection__item-name { font-weight: 500; line-height: 1.3; } .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-list > .ck-list__item > .ck-button > .ck-button__label > .ck-ai-chat-controls__model-selection__item-description { padding-top: var(--ck-spacing-tiny); line-height: 1.3; } .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-list > .ck-list__item > .ck-button > .ck-button__label > .ck-ai-chat-controls__model-selection__item-description > span { color: var(--ck-color-ai-chat-icon); white-space: normal; line-height: 1; } .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-list > .ck-list__item > .ck-button > .ck-button__label > .ck-ai-chat-controls__model-selection__item-capabilities { --ck-icon-font-size: .5em; line-height: 1.3; } .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-list > .ck-list__item > .ck-button > .ck-button__label > .ck-ai-chat-controls__model-selection__item-capabilities > span { color: var(--ck-color-ai-chat-icon); } .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-list > .ck-list__item > .ck-button > .ck-button__label > .ck-ai-chat-controls__model-selection__item-capabilities > span:nth-of-type(2n) { width: 4ch; font-weight: bold; display: inline-block; } .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-list > .ck-list__item > .ck-button > .ck-button__label > .ck-ai-chat-controls__model-selection__item-capabilities > .ck-icon { color: var(--ck-color-ai-chat-icon); fill: var(--ck-color-ai-chat-icon); margin-inline-end: var(--ck-spacing-standard); } :root { --ck-color-ai-chat-prompt-input-animation-background: var(--ck-color-ai-prompt-glow); --ck-ai-chat-prompt-input-animation: ck-ai-chat-prompt-input-glow .8s ease-in-out; --ck-ai-chat-prompt-input-line-height: 1.4em; --ck-ai-chat-prompt-input-padding-vertical: 5px; } .ck.ck-ai-chat__prompt-input.ck-search .ck-labeled-field-view { width: 100%; } .ck.ck-ai-chat__prompt-input.ck-search .ck-labeled-field-view .ck-labeled-field-view__status_error { line-height: 1.4em; } .ck.ck-ai-chat__prompt-input.ck-search .ck-labeled-field-view__input-wrapper .ck.ck-input.ck-textarea { padding-top: var(--ck-ai-chat-prompt-input-padding-vertical); padding-bottom: var(--ck-ai-chat-prompt-input-padding-vertical); line-height: var(--ck-ai-chat-prompt-input-line-height); } [dir="ltr"] :is(.ck.ck-ai-chat__prompt-input.ck-search .ck-labeled-field-view__input-wrapper .ck.ck-input.ck-textarea) { padding-right: 2.6em; } [dir="rtl"] :is(.ck.ck-ai-chat__prompt-input.ck-search .ck-labeled-field-view__input-wrapper .ck.ck-input.ck-textarea) { padding-left: 2.6em; } .ck.ck-ai-chat__prompt-input.ck-search .ck-labeled-field-view__input-wrapper > .ck.ck-label { visibility: hidden; } .ck.ck-ai-chat__prompt-input.ck-search.ck-ai-chat__prompt-input_highlighted .ck.ck-input.ck-textarea { animation: var(--ck-ai-chat-prompt-input-animation); } .ck.ck-ai-chat__prompt-input.ck-search .ck-ai-chat__prompt-submit-button { height: auto; margin-left: var(--ck-spacing-medium); align-self: flex-end; } .ck.ck-ai-chat__prompt-input.ck-search .ck-ai-chat__prompt-submit-button .ck.ck-icon.ck-button__icon { --ck-icon-size: 20px; } @keyframes ck-ai-chat-prompt-input-glow { 0% { background: var(--ck-color-ai-chat-prompt-input-animation-background); } 100% { background: var(--ck-color-input-background); } } .ck.ck-ai-chat-controls .ck-ai-chat__prompt-capabilities { padding-top: var(--ck-spacing-medium-small); justify-content: space-between; align-items: center; gap: var(--ck-spacing-medium-small); padding-inline-end: calc(var(--ck-ui-component-min-height) + var(--ck-spacing-medium)); display: flex; } .ck.ck-ai-chat-controls .ck-ai-chat__prompt-capabilities .ck-ai-chat-controls-button:not(.ck-button_with-text) { padding: var(--ck-spacing-tiny); margin: 0; } .ck.ck-ai-chat-controls .ck-ai-chat__prompt-capabilities .ck-ai-chat-controls-button > .ck-icon { --ck-icon-size: 16px; } .ck.ck-ai-chat-controls .ck-ai-chat__prompt-capabilities .ck-ai-chat-controls-button--commands { visibility: hidden; pointer-events: none; margin-block: 0; margin-inline: auto 0; padding: 0; } .ck.ck-ai-chat-controls .ck-ai-chat__prompt-capabilities .ck-ai-chat-controls__model-name { color: var(--ck-color-ai-chat-icon); } :root { --ck-color-ai-chat-model-unavailable-message-border: var(--ck-color-ai-accent-400); --ck-color-ai-chat-model-unavailable-message-background: var(--ck-color-ai-accent-700-a1); } .ck.ck-ai-chat-controls-model-unavailable-message { border: 1px solid var(--ck-color-ai-chat-model-unavailable-message-border); background-color: var(--ck-color-ai-chat-model-unavailable-message-background); border-radius: 4px; } .ck.ck-ai-chat-controls-model-unavailable-message p { white-space: normal; padding: var(--ck-spacing-large); line-height: 1.4; } .ck.ck-ai-chat-controls-model-unavailable-message p button.ck-ai-chat-controls__start-new-chat-button { cursor: default; vertical-align: baseline; color: var(--ck-color-ai-chat-text); background: none; border: none; padding: 0; text-decoration: underline; } .ck.ck-ai-chat-controls-model-unavailable-message p button.ck-ai-chat-controls__start-new-chat-button:hover { background: none; } .ck.ck-ai-chat-controls-model-unavailable-message p button.ck-ai-chat-controls__start-new-chat-button:active, .ck.ck-ai-chat-controls-model-unavailable-message p button.ck-ai-chat-controls__start-new-chat-button:focus { box-shadow: none; background: none; } :root { --ck-ai-chat-context-controls-balloon-width: 400px; } .ck.ck-ai-chat-controls .ck-ai-chat-context-controls { place-content: center flex-start; align-items: flex-start; gap: var(--ck-spacing-medium-small); padding-top: 0; padding-bottom: var(--ck-spacing-medium-small); flex-wrap: wrap; display: flex; } .ck.ck-ai-chat-controls .ck-ai-chat-context-controls:has(.ck-ai-chat-context-controls__pending-contexts:empty) { padding-bottom: var(--ck-spacing-small); } .ck.ck-ai-chat-controls .ck-ai-chat-context-controls .ck-ai-chat-context-controls__pending-contexts { display: contents; } .ck.ck-ai-chat-controls .ck-button.ck-ai-chat-controls-button.ck-ai-chat-context-controls__add-context-button { margin: 0; position: absolute; bottom: 3px; } .ck.ck-ai-chat-controls .ck-button.ck-ai-chat-controls-button.ck-ai-chat-context-controls__add-context-button:hover, .ck.ck-ai-chat-controls .ck-button.ck-ai-chat-controls-button.ck-ai-chat-context-controls__add-context-button:focus { opacity: 1; } :root { --ck-ai-chat-context-balloon-width: 290px; } :is(.ck.ck-balloon-panel, .ck.ck-ai-chat) .ck-ai-chat-context-chip { 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-color-ai-chat-user-context-background); border-radius: var(--ck-ai-border-radius); border: var(--ck-ai-chat-border-width) solid var(--ck-color-ai-chat-border-main); color: var(--ck-color-ai-chat-icon); flex-shrink: 0; justify-content: center; align-items: center; line-height: 1; display: inline-flex; } :is(.ck.ck-balloon-panel, .ck.ck-ai-chat) .ck-ai-chat-context-chip.ck-ai-chat-context-chip_wide { max-width: max(calc(66% - var(--ck-spacing-medium-small)), 240px); width: auto; } :is(.ck.ck-balloon-panel, .ck.ck-ai-chat) .ck-ai-chat-context-chip.ck-ai-chat-context-chip_document { max-width: unset; } :is(.ck.ck-balloon-panel, .ck.ck-ai-chat) .ck-ai-chat-context-chip.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); } :is(.ck.ck-balloon-panel, .ck.ck-ai-chat) .ck-ai-chat-context-chip > .ck-ai-chat-context-chip__label { margin: 0 var(--ck-spacing-medium-small); text-overflow: ellipsis; color: var(--ck-color-ai-chat-icon); font-size: .9em; line-height: 1.25; display: inline-block; overflow: hidden; } :is(.ck.ck-balloon-panel, .ck.ck-ai-chat) .ck-ai-chat-context-chip > .ck-icon.ck-ai-chat-context-chip__type-icon { --ck-icon-size: 1em; fill: var(--ck-color-ai-chat-icon); flex-shrink: 0; font-size: 1em; } :is(.ck.ck-balloon-panel, .ck.ck-ai-chat) .ck-ai-chat-context-chip .ck-button { --ck-ui-component-min-height: 1em; max-width: var(--ck-ui-component-min-height); max-height: var(--ck-ui-component-min-height); padding: 0; } :is(.ck.ck-balloon-panel, .ck.ck-ai-chat) .ck-ai-chat-context-chip .ck-button > .ck-icon { --ck-icon-size: 1em; color: var(--ck-color-ai-chat-icon); font-size: 1em; } :is(.ck.ck-balloon-panel, .ck.ck-ai-chat) .ck-ai-chat-context-chips-wrapper { gap: var(--ck-spacing-medium-small); flex-wrap: wrap; justify-content: flex-end; align-items: center; width: 100%; margin-bottom: 0; padding: 0; display: flex; } :is(.ck.ck-balloon-panel, .ck.ck-ai-chat) .ck-ai-chat-context-chips-wrapper-balloon { gap: var(--ck-spacing-standard); width: var(--ck-ai-chat-context-balloon-width); max-height: 10em; padding: var(--ck-spacing-standard); flex-wrap: wrap; justify-content: flex-start; align-items: center; display: flex; overflow-y: auto; } :is(.ck.ck-balloon-panel, .ck.ck-ai-chat) .ck-ai-chat-context-chips-wrapper-balloon .ck-ai-chat-context-chip { max-width: max(calc(50% - var(--ck-spacing-standard)), 110px); } :is(.ck.ck-balloon-panel, .ck.ck-ai-chat) .ck-ai-chat-context-chips-wrapper-balloon.ck-ai-chat-context-chip_wide { max-width: 100%; } :is(.ck.ck-balloon-panel, .ck.ck-ai-chat) .ck-ai-chat-context-chips-wrapper-balloon .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-color-ai-chat-flash); color: var(--ck-color-ai-chat-flash-text); border-color: var(--ck-color-ai-chat-flash-text); } 100% { background-color: var(--ck-color-ai-chat-user-context-background); color: var(--ck-color-ai-chat-icon); border-color: var(--ck-color-ai-chat-border-main); } } .ck.ck-button.ck-ai-chat-controls-button { --ck-ui-component-min-height: 1.88em; padding: var(--ck-spacing-tiny); flex-shrink: 0; justify-content: center; align-items: center; display: flex; } .ck.ck-button.ck-ai-chat-controls-button:not(.ck-button_with-text) { margin: 0 0 var(--ck-spacing-tiny) 0; padding: var(--ck-spacing-tiny); } .ck.ck-button.ck-ai-chat-controls-button.ck-button_with-text.ck-ai-chat-controls_context_show-more-button { letter-spacing: -.1em; text-align: center; border-width: 0; padding: 0; display: block; } .ck.ck-button.ck-ai-chat-controls-button > .ck-icon { --ck-icon-size: 16px; } .ck.ck-button.ck-ai-chat-controls-button .ck-dropdown__arrow { display: none; } :root { --ck-color-ai-chat-controls-loader-icon-dot: var(--ck-color-ai-gray-300); --ck-color-ai-chat-controls-loader-icon-dot-active: var(--ck-color-ai-gray-900); --ck-color-ai-chat-controls-loader: var(--ck-color-ai-gray-600); --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: .3s; } .ck-ai-chat-controls .ck-ai-chat-controls-loader { color: var(--ck-color-ai-chat-controls-loader); align-items: center; display: flex; } .ck-ai-chat-controls .ck-ai-chat-controls-loader .ck-ai-chat-controls-loader-icon { box-sizing: border-box; width: var(--ck-ai-loader-dot-pulse-width); height: var(--ck-ai-loader-dot-pulse-height); padding: var(--ck-spacing-small) var(--ck-spacing-medium-small); border-radius: var(--ck-ai-loader-dot-pulse-border-radius); background-color: var(--ck-color-ai-chat-controls-loader-icon); justify-content: space-between; align-items: center; margin-inline-end: var(--ck-spacing-standard); display: flex; } .ck-ai-chat-controls .ck-ai-chat-controls-loader .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); background-color: var(--ck-color-ai-chat-controls-loader-icon-dot); animation: ck-ai-loader-dot-pulse var(--ck-ai-chat-controls-loader-animation-duration) infinite; border-radius: 50%; flex-shrink: 0; } .ck-ai-chat-controls .ck-ai-chat-controls-loader .ck-ai-chat-controls-loader-icon-dot:first-child { animation-delay: 0s; } .ck-ai-chat-controls .ck-ai-chat-controls-loader .ck-ai-chat-controls-loader-icon-dot:nth-child(2) { animation-delay: var(--ck-ai-loader-dot-pulse-animation-delay); } .ck-ai-chat-controls .ck-ai-chat-controls-loader .ck-ai-chat-controls-loader-icon-dot:nth-child(3) { animation-delay: calc(var(--ck-ai-loader-dot-pulse-animation-delay) * 2); } .ck-ai-chat-controls-loader-wrapper { justify-content: space-between; display: flex; } @keyframes ck-ai-loader-dot-pulse { 0%, 80%, 100% { background-color: var(--ck-color-ai-chat-controls-loader-icon-dot); } 40% { background-color: var(--ck-color-ai-chat-controls-loader-icon-dot-active); } } :root { --ck-color-ai-chat-context-balloon-resource-item-in-context: var(--ck-color-ai-gray-900-a5); --ck-color-ai-chat-context-balloon-resource-item-in-context-icon: var(--ck-color-ai-gray-900-a5); } .ck.ck-balloon-panel.ck-ai-chat-context-controls__add-context-balloon-panel { min-width: 157px; max-width: 250px; z-index: calc(var(--ck-ai-tabs-overlay-z-index) + 1); } .ck.ck-balloon-panel.ck-ai-chat-context-controls__add-context-balloon-panel .ck-ai-chat-context-controls__balloon-button { width: 100%; padding-left: var(--ck-spacing-extra-large); padding-right: var(--ck-spacing-extra-large); display: flex; } .ck.ck-balloon-panel.ck-ai-chat-context-controls__add-context-balloon-panel .ck-ai-chat-context-controls__balloon-button:first-child { margin-top: var(--ck-spacing-tiny); } .ck.ck-balloon-panel.ck-ai-chat-context-controls__add-context-balloon-panel .ck-ai-chat-context-controls__balloon-button:last-child { margin-bottom: var(--ck-spacing-tiny); } .ck.ck-balloon-panel.ck-ai-chat-context-controls__add-context-balloon-panel