From 3d2f0e7b5b8eef3992c6803ebe09ea8ca31eea3b Mon Sep 17 00:00:00 2001 From: akumatus Date: Thu, 24 Apr 2025 14:32:54 +0000 Subject: [PATCH] feat(core): chat-panel buttons ui (#11942) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Close [AI-7](https://linear.app/affine-design/issue/AI-7). ![截屏2025-04-23 23.29.32.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/sJGviKxfE3Ap685cl5bj/a984a28f-0ccf-4e8d-ba2d-239ad03f2998.png) --- .../src/blocksuite/ai/chat-panel/index.ts | 30 ++--- .../ai-chat-composer/ai-chat-composer.ts | 39 +----- .../components/ai-chat-input/ai-chat-input.ts | 122 +++++++++--------- .../ai-history-clear/ai-history-clear.ts | 93 +++++++++++++ .../ai/components/ai-history-clear/index.ts | 1 + .../core/src/blocksuite/ai/effects.ts | 4 +- .../ai/peek-view/chat-block-peek-view.ts | 10 +- .../src/blocksuite/ai/peek-view/styles.ts | 7 + .../e2e/chat-with/reasoning.spec.ts | 30 +++++ .../e2e/utils/chat-panel-utils.ts | 14 ++ 10 files changed, 235 insertions(+), 115 deletions(-) create mode 100644 packages/frontend/core/src/blocksuite/ai/components/ai-history-clear/ai-history-clear.ts create mode 100644 packages/frontend/core/src/blocksuite/ai/components/ai-history-clear/index.ts create mode 100644 tests/affine-cloud-copilot/e2e/chat-with/reasoning.spec.ts diff --git a/packages/frontend/core/src/blocksuite/ai/chat-panel/index.ts b/packages/frontend/core/src/blocksuite/ai/chat-panel/index.ts index ad1105a94e..0e4abc86c0 100644 --- a/packages/frontend/core/src/blocksuite/ai/chat-panel/index.ts +++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/index.ts @@ -5,7 +5,6 @@ import { SignalWatcher, WithDisposable } from '@blocksuite/affine/global/lit'; import type { EditorHost } from '@blocksuite/affine/std'; import { ShadowlessElement } from '@blocksuite/affine/std'; import type { ExtensionType, Store } from '@blocksuite/affine/store'; -import { HelpIcon } from '@blocksuite/icons/lit'; import { type Signal, signal } from '@preact/signals-core'; import { css, html, type PropertyValues } from 'lit'; import { property, state } from 'lit/decorators.js'; @@ -68,21 +67,12 @@ export class ChatPanel extends SignalWatcher( align-items: center; z-index: 1; - div:first-child { + .chat-panel-title-text { font-size: 14px; font-weight: 500; color: var(--affine-text-secondary-color); } - div:last-child { - width: 24px; - height: 24px; - display: flex; - justify-content: center; - align-items: center; - cursor: pointer; - } - svg { width: 18px; height: 18px; @@ -385,20 +375,20 @@ export class ChatPanel extends SignalWatcher( return html`
-
+
${isEmbedding ? html`Embedding ${done}/${total}` : 'AFFiNE AI'}
-
{ - AIProvider.toggleGeneralAIOnboarding?.(true); - }} - > - ${HelpIcon()} -
+
`; } diff --git a/packages/frontend/core/src/blocksuite/ai/components/ai-chat-composer/ai-chat-composer.ts b/packages/frontend/core/src/blocksuite/ai/components/ai-chat-composer/ai-chat-composer.ts index 1536cdae3e..a8690e3c2b 100644 --- a/packages/frontend/core/src/blocksuite/ai/components/ai-chat-composer/ai-chat-composer.ts +++ b/packages/frontend/core/src/blocksuite/ai/components/ai-chat-composer/ai-chat-composer.ts @@ -5,7 +5,6 @@ import type { CopilotDocType, } from '@affine/graphql'; import { SignalWatcher, WithDisposable } from '@blocksuite/affine/global/lit'; -import { NotificationProvider } from '@blocksuite/affine/shared/services'; import type { EditorHost } from '@blocksuite/affine/std'; import { ShadowlessElement } from '@blocksuite/affine/std'; import type { Store } from '@blocksuite/affine/store'; @@ -65,9 +64,6 @@ export class AIChatComposer extends SignalWatcher( @property({ attribute: false }) accessor updateContext!: (context: Partial) => void; - @property({ attribute: false }) - accessor onHistoryCleared: (() => void) | undefined; - @property({ attribute: false }) accessor isVisible: Signal = signal(false); @@ -97,6 +93,9 @@ export class AIChatComposer extends SignalWatcher( @property({ attribute: false }) accessor portalContainer: HTMLElement | null = null; + @property({ attribute: false }) + accessor sideBarWidth: Signal = signal(undefined); + @state() accessor chips: ChatChip[] = []; @@ -131,9 +130,9 @@ export class AIChatComposer extends SignalWatcher( .networkSearchConfig=${this.networkSearchConfig} .reasoningConfig=${this.reasoningConfig} .docDisplayConfig=${this.docDisplayConfig} - .cleanupHistories=${this._cleanupHistories} .onChatSuccess=${this.onChatSuccess} .trackOptions=${this.trackOptions} + .sideBarWidth=${this.sideBarWidth} >
${InformationIcon()} @@ -354,36 +353,6 @@ export class AIChatComposer extends SignalWatcher( this._pollAbortController = null; }; - private readonly _cleanupHistories = async () => { - const sessionId = await this.getSessionId(); - const notification = this.host.std.getOptional(NotificationProvider); - if (!notification) return; - try { - if ( - await notification.confirm({ - title: 'Clear History', - message: - 'Are you sure you want to clear all history? This action will permanently delete all content, including all chat logs and data, and cannot be undone.', - confirmText: 'Confirm', - cancelText: 'Cancel', - }) - ) { - const actionIds = this.chatContextValue.messages - .filter(item => 'sessionId' in item) - .map(item => item.sessionId); - await AIProvider.histories?.cleanup( - this.doc.workspace.id, - this.doc.id, - [...(sessionId ? [sessionId] : []), ...(actionIds || [])] - ); - notification.toast('History cleared'); - this.onHistoryCleared?.(); - } - } catch { - notification.toast('Failed to clear history'); - } - }; - private readonly _initComposer = async () => { if (!this.isVisible.value) return; if (this._isLoading) return; diff --git a/packages/frontend/core/src/blocksuite/ai/components/ai-chat-input/ai-chat-input.ts b/packages/frontend/core/src/blocksuite/ai/components/ai-chat-input/ai-chat-input.ts index 7783648f05..b7a3334784 100644 --- a/packages/frontend/core/src/blocksuite/ai/components/ai-chat-input/ai-chat-input.ts +++ b/packages/frontend/core/src/blocksuite/ai/components/ai-chat-input/ai-chat-input.ts @@ -4,12 +4,12 @@ import { unsafeCSSVarV2 } from '@blocksuite/affine/shared/theme'; import { openFileOrFiles } from '@blocksuite/affine/shared/utils'; import type { EditorHost } from '@blocksuite/affine/std'; import { - BroomIcon, CloseIcon, ImageIcon, PublishIcon, ThinkingIcon, } from '@blocksuite/icons/lit'; +import { type Signal, signal } from '@preact/signals-core'; import { css, html, LitElement, nothing } from 'lit'; import { property, query, state } from 'lit/decorators.js'; import { repeat } from 'lit/directives/repeat.js'; @@ -118,46 +118,55 @@ export class AIChatInput extends SignalWatcher(WithDisposable(LitElement)) { gap: 8px; align-items: center; - div { - width: 24px; - height: 24px; + .chat-input-icon { cursor: pointer; - } - - div:nth-child(2) { - margin-left: auto; - } - - .image-upload, - .chat-history-clear, - .chat-network-search { + padding: 2px; display: flex; justify-content: center; align-items: center; + border-radius: 4px; + svg { width: 20px; height: 20px; color: ${unsafeCSSVarV2('icon/primary')}; } + + .chat-input-icon-label { + font-size: 14px; + line-height: 22px; + font-weight: 500; + color: ${unsafeCSSVarV2('icon/primary')}; + margin: 0 4px 0 4px; + } } - .chat-history-clear svg { - color: var(--affine-text-secondary-color); - } - .chat-network-search[data-active='true'] svg { - color: ${unsafeCSSVarV2('icon/activated')}; + .chat-input-icon:nth-child(2) { + margin-left: auto; } - .chat-history-clear[aria-disabled='true'], - .image-upload[aria-disabled='true'], - .chat-network-search[aria-disabled='true'] { + .chat-input-icon:hover { + background-color: ${unsafeCSSVarV2('layer/background/hoverOverlay')}; + } + + .chat-input-icon[data-active='true'] { + background-color: #1e96eb14; + + svg { + color: ${unsafeCSSVarV2('icon/activated')}; + } + + .chat-input-icon-label { + color: ${unsafeCSSVarV2('icon/activated')}; + } + } + + .chat-input-icon[aria-disabled='true'] { cursor: not-allowed; - } - .chat-history-clear[aria-disabled='true'] svg, - .image-upload[aria-disabled='true'] svg, - .chat-network-search[aria-disabled='true'] svg { - color: var(--affine-text-disable-color) !important; + svg { + color: ${unsafeCSSVarV2('icon/secondary')} !important; + } } } @@ -240,9 +249,6 @@ export class AIChatInput extends SignalWatcher(WithDisposable(LitElement)) { @property({ attribute: false }) accessor updateContext!: (context: Partial) => void; - @property({ attribute: false }) - accessor cleanupHistories!: () => Promise; - @property({ attribute: false }) accessor networkSearchConfig!: AINetworkSearchConfig; @@ -264,6 +270,9 @@ export class AIChatInput extends SignalWatcher(WithDisposable(LitElement)) { @property({ attribute: 'data-testid', reflect: true }) accessor testId = 'chat-panel-input-container'; + @property({ attribute: false }) + accessor sideBarWidth: Signal = signal(undefined); + private get _isNetworkActive() { return ( !!this.networkSearchConfig.visible.value && @@ -275,12 +284,8 @@ export class AIChatInput extends SignalWatcher(WithDisposable(LitElement)) { return !!this.reasoningConfig.enabled.value; } - private get _isClearDisabled() { - return ( - this.chatContextValue.status === 'loading' || - this.chatContextValue.status === 'transmitting' || - !this.chatContextValue.messages.length - ); + private get _isImageUploadDisabled() { + return this.chatContextValue.images.length >= MaximumImageCount; } override connectedCallback() { @@ -303,6 +308,8 @@ export class AIChatInput extends SignalWatcher(WithDisposable(LitElement)) { const { images, status } = this.chatContextValue; const hasImages = images.length > 0; const maxHeight = hasImages ? 272 + 2 : 200 + 2; + const showLabel = this.sideBarWidth.value && this.sideBarWidth.value > 400; + return html`
- ${BroomIcon()} + ${ImageIcon()} + Upload
${this.networkSearchConfig.visible.value ? html`
${PublishIcon()} + ${!showLabel + ? html`Search` + : nothing} + ${showLabel + ? html`Search` + : nothing}
` : nothing}
${ThinkingIcon()} + ${!showLabel + ? html`Reason` + : nothing} + ${showLabel + ? html`Reason` + : nothing}
- ${images.length < MaximumImageCount - ? html`
- ${ImageIcon()} -
` - : nothing} ${status === 'transmitting' ? html`
${ChatAbortIcon} @@ -456,13 +467,6 @@ export class AIChatInput extends SignalWatcher(WithDisposable(LitElement)) { reportResponse('aborted:stop'); }; - private readonly _handleClear = async () => { - if (this._isClearDisabled) { - return; - } - await this.cleanupHistories(); - }; - private readonly _toggleNetworkSearch = (e: MouseEvent) => { e.preventDefault(); e.stopPropagation(); @@ -493,6 +497,8 @@ export class AIChatInput extends SignalWatcher(WithDisposable(LitElement)) { }; private readonly _uploadImageFiles = async (_e: MouseEvent) => { + if (this._isImageUploadDisabled) return; + const images = await openFileOrFiles({ acceptType: 'Images', multiple: true, diff --git a/packages/frontend/core/src/blocksuite/ai/components/ai-history-clear/ai-history-clear.ts b/packages/frontend/core/src/blocksuite/ai/components/ai-history-clear/ai-history-clear.ts new file mode 100644 index 0000000000..184fdd7ae2 --- /dev/null +++ b/packages/frontend/core/src/blocksuite/ai/components/ai-history-clear/ai-history-clear.ts @@ -0,0 +1,93 @@ +import { WithDisposable } from '@blocksuite/affine/global/lit'; +import { NotificationProvider } from '@blocksuite/affine/shared/services'; +import { unsafeCSSVarV2 } from '@blocksuite/affine/shared/theme'; +import type { EditorHost } from '@blocksuite/affine/std'; +import { ShadowlessElement } from '@blocksuite/affine/std'; +import type { Store } from '@blocksuite/affine/store'; +import { css, html } from 'lit'; +import { property } from 'lit/decorators.js'; + +import type { ChatContextValue } from '../../chat-panel/chat-context'; +import { AIProvider } from '../../provider'; + +export class AIHistoryClear extends WithDisposable(ShadowlessElement) { + @property({ attribute: false }) + accessor chatContextValue!: ChatContextValue; + + @property({ attribute: false }) + accessor getSessionId!: () => Promise; + + @property({ attribute: false }) + accessor host!: EditorHost; + + @property({ attribute: false }) + accessor doc!: Store; + + @property({ attribute: false }) + accessor onHistoryCleared!: () => void; + + static override styles = css` + .chat-history-clear { + cursor: pointer; + color: ${unsafeCSSVarV2('icon/primary')}; + } + .chat-history-clear[aria-disabled='true'] { + cursor: not-allowed; + color: ${unsafeCSSVarV2('icon/secondary')}; + } + `; + + private get _isHistoryClearDisabled() { + return ( + this.chatContextValue.status === 'loading' || + this.chatContextValue.status === 'transmitting' || + !this.chatContextValue.messages.length + ); + } + + private readonly _cleanupHistories = async () => { + if (this._isHistoryClearDisabled) { + return; + } + const sessionId = await this.getSessionId(); + const notification = this.host.std.getOptional(NotificationProvider); + if (!notification) return; + try { + if ( + await notification.confirm({ + title: 'Clear History', + message: + 'Are you sure you want to clear all history? This action will permanently delete all content, including all chat logs and data, and cannot be undone.', + confirmText: 'Confirm', + cancelText: 'Cancel', + }) + ) { + const actionIds = this.chatContextValue.messages + .filter(item => 'sessionId' in item) + .map(item => item.sessionId); + await AIProvider.histories?.cleanup( + this.doc.workspace.id, + this.doc.id, + [...(sessionId ? [sessionId] : []), ...(actionIds || [])] + ); + notification.toast('History cleared'); + this.onHistoryCleared?.(); + } + } catch { + notification.toast('Failed to clear history'); + } + }; + + override render() { + return html` +
+ Clear +
+ `; + } +} diff --git a/packages/frontend/core/src/blocksuite/ai/components/ai-history-clear/index.ts b/packages/frontend/core/src/blocksuite/ai/components/ai-history-clear/index.ts new file mode 100644 index 0000000000..3ee1326ece --- /dev/null +++ b/packages/frontend/core/src/blocksuite/ai/components/ai-history-clear/index.ts @@ -0,0 +1 @@ +export * from './ai-history-clear'; diff --git a/packages/frontend/core/src/blocksuite/ai/effects.ts b/packages/frontend/core/src/blocksuite/ai/effects.ts index 34ba44bc3d..2b4c9bd847 100644 --- a/packages/frontend/core/src/blocksuite/ai/effects.ts +++ b/packages/frontend/core/src/blocksuite/ai/effects.ts @@ -37,7 +37,8 @@ import { ChatPanelDocChip } from './components/ai-chat-chips/doc-chip'; import { ChatPanelFileChip } from './components/ai-chat-chips/file-chip'; import { ChatPanelTagChip } from './components/ai-chat-chips/tag-chip'; import { AIChatComposer } from './components/ai-chat-composer'; -import { AIChatInput } from './components/ai-chat-input/ai-chat-input'; +import { AIChatInput } from './components/ai-chat-input'; +import { AIHistoryClear } from './components/ai-history-clear'; import { effects as componentAiItemEffects } from './components/ai-item'; import { AIScrollableTextRenderer } from './components/ai-scrollable-text-renderer'; import { AskAIButton } from './components/ask-ai-button'; @@ -98,6 +99,7 @@ export function registerAIEffects() { customElements.define('ai-chat-input', AIChatInput); customElements.define('ai-chat-composer', AIChatComposer); customElements.define('chat-panel-chips', ChatPanelChips); + customElements.define('ai-history-clear', AIHistoryClear); customElements.define('chat-panel-add-popover', ChatPanelAddPopover); customElements.define( 'chat-panel-candidates-popover', diff --git a/packages/frontend/core/src/blocksuite/ai/peek-view/chat-block-peek-view.ts b/packages/frontend/core/src/blocksuite/ai/peek-view/chat-block-peek-view.ts index 5c1b8bf52b..7576a48fc0 100644 --- a/packages/frontend/core/src/blocksuite/ai/peek-view/chat-block-peek-view.ts +++ b/packages/frontend/core/src/blocksuite/ai/peek-view/chat-block-peek-view.ts @@ -502,6 +502,15 @@ export class AIChatBlockPeekView extends LitElement {
${this.CurrentMessages(currentChatMessages)}
+
+ +
{ + test.beforeEach(async ({ loggedInPage: page, utils }) => { + await utils.testUtils.setupTestEnvironment(page); + await utils.chatPanel.openChatPanel(page); + }); + + test('should support chat with reasoning', async ({ + loggedInPage: page, + utils, + }) => { + await utils.chatPanel.enableReasoning(page); + await utils.chatPanel.makeChat( + page, + 'How do you measure exactly 4 liters of water using a jug that only holds 3 and 5 liters?' + ); + await utils.chatPanel.waitForHistory(page, [ + { + role: 'user', + content: + 'How do you measure exactly 4 liters of water using a jug that only holds 3 and 5 liters?', + }, + { + role: 'assistant', + status: 'success', + }, + ]); + }); +}); diff --git a/tests/affine-cloud-copilot/e2e/utils/chat-panel-utils.ts b/tests/affine-cloud-copilot/e2e/utils/chat-panel-utils.ts index a6c11b9498..b8c50ebff6 100644 --- a/tests/affine-cloud-copilot/e2e/utils/chat-panel-utils.ts +++ b/tests/affine-cloud-copilot/e2e/utils/chat-panel-utils.ts @@ -305,6 +305,20 @@ export class ChatPanelUtils { } } + public static async enableReasoning(page: Page) { + const reasoning = page.getByTestId('chat-reasoning'); + if ((await reasoning.getAttribute('data-active')) === 'false') { + await reasoning.click(); + } + } + + public static async disableReasoning(page: Page) { + const reasoning = page.getByTestId('chat-reasoning'); + if ((await reasoning.getAttribute('data-active')) === 'true') { + await reasoning.click(); + } + } + public static async isNetworkSearchEnabled(page: Page) { const networkSearch = await page.getByTestId('chat-network-search'); return (await networkSearch.getAttribute('aria-disabled')) === 'false';