From 58bbb017a08f840b55e663a5243f78e6b1412c7a Mon Sep 17 00:00:00 2001 From: akumatus Date: Thu, 29 May 2025 02:49:11 +0000 Subject: [PATCH] feat(core): add ai playground components (#12588) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Close [AI-86](https://linear.app/affine-design/issue/AI-86) ![截屏2025-05-28 11.56.18.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/sJGviKxfE3Ap685cl5bj/bdf157ce-150c-407c-877f-24a88e7927b1.png) ## Summary by CodeRabbit - **New Features** - Introduced an AI Playground accessible from the chat panel, allowing users to experiment with AI chat sessions in a dedicated modal interface. - Added a playground icon to the chat panel for quick access to the new playground feature. - Added new interactive components for managing AI chat sessions, including chat panels, session lists, and modal dialogs. - **Improvements** - Enhanced chat panel session management for a smoother experience by simplifying session filtering. - Updated property names in chat input and composer components for improved clarity and consistency. - Made tracking options optional in chat input and composer components to improve flexibility. - **Bug Fixes** - Corrected property bindings in AI chat composer to ensure proper panel sizing. --- .../core/src/blocksuite/ai/actions/types.ts | 4 +- .../src/blocksuite/ai/chat-panel/index.ts | 58 +++- .../ai-chat-composer/ai-chat-composer.ts | 6 +- .../components/ai-chat-input/ai-chat-input.ts | 10 +- .../ai/components/playground/chat.ts | 321 ++++++++++++++++++ .../ai/components/playground/content.ts | 190 +++++++++++ .../ai/components/playground/index.ts | 9 + .../ai/components/playground/modal.ts | 139 ++++++++ .../core/src/blocksuite/ai/effects.ts | 2 + 9 files changed, 717 insertions(+), 22 deletions(-) create mode 100644 packages/frontend/core/src/blocksuite/ai/components/playground/chat.ts create mode 100644 packages/frontend/core/src/blocksuite/ai/components/playground/content.ts create mode 100644 packages/frontend/core/src/blocksuite/ai/components/playground/index.ts create mode 100644 packages/frontend/core/src/blocksuite/ai/components/playground/modal.ts diff --git a/packages/frontend/core/src/blocksuite/ai/actions/types.ts b/packages/frontend/core/src/blocksuite/ai/actions/types.ts index f690489d9d..de8ea85392 100644 --- a/packages/frontend/core/src/blocksuite/ai/actions/types.ts +++ b/packages/frontend/core/src/blocksuite/ai/actions/types.ts @@ -85,8 +85,8 @@ declare global { // internal context host: EditorHost; models?: (BlockModel | GfxModel)[]; - control: TrackerControl; - where: TrackerWhere; + control?: TrackerControl; + where?: TrackerWhere; } interface AIForkChatSessionOptions { 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 33df0497cd..baa72ed316 100644 --- a/packages/frontend/core/src/blocksuite/ai/chat-panel/index.ts +++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/index.ts @@ -3,11 +3,13 @@ import './chat-panel-messages'; import type { FeatureFlagService } from '@affine/core/modules/feature-flag'; import type { ContextEmbedStatus, CopilotSessionType } from '@affine/graphql'; import { SignalWatcher, WithDisposable } from '@blocksuite/affine/global/lit'; +import { unsafeCSSVarV2 } from '@blocksuite/affine/shared/theme'; import type { EditorHost } from '@blocksuite/affine/std'; import { ShadowlessElement } from '@blocksuite/affine/std'; import type { ExtensionType, Store } from '@blocksuite/affine/store'; +import { CenterPeekIcon } from '@blocksuite/icons/lit'; import { type Signal, signal } from '@preact/signals-core'; -import { css, html, type PropertyValues } from 'lit'; +import { css, html, nothing, type PropertyValues } from 'lit'; import { property, state } from 'lit/decorators.js'; import { createRef, type Ref, ref } from 'lit/directives/ref.js'; import { styleMap } from 'lit/directives/style-map.js'; @@ -23,6 +25,7 @@ import type { AIReasoningConfig, } from '../components/ai-chat-input'; import { type HistoryMessage } from '../components/ai-chat-messages'; +import { createPlaygroundModal } from '../components/playground/modal'; import { AIProvider } from '../provider'; import { extractSelectedContent } from '../utils/extract'; import { @@ -104,6 +107,20 @@ export class ChatPanel extends SignalWatcher( .chat-panel-hints :nth-child(2) { color: var(--affine-text-secondary-color); } + + .chat-panel-playground { + cursor: pointer; + padding: 2px; + margin-left: 8px; + margin-right: auto; + display: flex; + justify-content: center; + align-items: center; + } + + .chat-panel-playground:hover svg { + color: ${unsafeCSSVarV2('icon/activated')}; + } `; private readonly _chatMessagesRef: Ref = @@ -165,13 +182,7 @@ export class ChatPanel extends SignalWatcher( this.doc.id, { action: false } )) || [] - ).filter(session => { - if (this.parentSessionId) { - return session.parentSessionId === this.parentSessionId; - } else { - return !session.parentSessionId; - } - }); + ).filter(session => !session.parentSessionId); this.session = sessions.at(-1); return this.session?.id; }; @@ -224,9 +235,6 @@ export class ChatPanel extends SignalWatcher( @property({ attribute: false }) accessor affineFeatureFlagService!: FeatureFlagService; - @property({ attribute: false }) - accessor parentSessionId: string | undefined = undefined; - @state() accessor isLoading = false; @@ -277,6 +285,25 @@ export class ChatPanel extends SignalWatcher( this.embeddingProgress = [0, 0]; }; + private readonly _openPlayground = () => { + const playgroundContent = html` + + `; + + createPlaygroundModal(playgroundContent, 'AI Playground'); + }; + protected override willUpdate(_changedProperties: PropertyValues) { if (_changedProperties.has('doc')) { this._resetPanel(); @@ -404,6 +431,13 @@ export class ChatPanel extends SignalWatcher( >` : 'AFFiNE AI'} + ${this.modelSwitchConfig.visible.value + ? html` +
+ ${CenterPeekIcon()} +
+ ` + : nothing} `; } 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 837d8c7786..a09407aaf1 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 @@ -97,13 +97,13 @@ export class AIChatComposer extends SignalWatcher( accessor onChatSuccess: (() => void) | undefined; @property({ attribute: false }) - accessor trackOptions!: BlockSuitePresets.TrackerOptions; + accessor trackOptions: BlockSuitePresets.TrackerOptions | undefined; @property({ attribute: false }) accessor portalContainer: HTMLElement | null = null; @property({ attribute: false }) - accessor sideBarWidth: Signal = signal(undefined); + accessor panelWidth: Signal = signal(undefined); @state() accessor chips: ChatChip[] = []; @@ -144,7 +144,7 @@ export class AIChatComposer extends SignalWatcher( .docDisplayConfig=${this.docDisplayConfig} .onChatSuccess=${this.onChatSuccess} .trackOptions=${this.trackOptions} - .sideBarWidth=${this.sideBarWidth} + .panelWidth=${this.panelWidth} .addImages=${this.addImages} >
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 3830326871..740a46c888 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 @@ -293,13 +293,13 @@ export class AIChatInput extends SignalWatcher(WithDisposable(LitElement)) { accessor onChatSuccess: (() => void) | undefined; @property({ attribute: false }) - accessor trackOptions!: BlockSuitePresets.TrackerOptions; + accessor trackOptions: BlockSuitePresets.TrackerOptions | undefined; @property({ attribute: 'data-testid', reflect: true }) accessor testId = 'chat-panel-input-container'; @property({ attribute: false }) - accessor sideBarWidth: Signal = signal(undefined); + accessor panelWidth: Signal = signal(undefined); @property({ attribute: false }) accessor addImages!: (images: File[]) => void; @@ -339,7 +339,7 @@ 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; + const showLabel = this.panelWidth.value && this.panelWidth.value > 400; return html`
Promise; + + @state() + accessor isLoading = false; + + @state() + accessor chatContextValue: ChatContextValue = DEFAULT_CHAT_CONTEXT_VALUE; + + @state() + accessor embeddingProgress: [number, number] = [0, 0]; + + private readonly _isVisible: Signal = signal(true); + + private readonly _chatMessagesRef: Ref = + createRef(); + + // request counter to track the latest request + private _updateHistoryCounter = 0; + + private readonly _initPanel = async () => { + const userId = (await AIProvider.userInfo)?.id; + if (!userId) return; + + this.isLoading = true; + await this._updateHistory(); + this.isLoading = false; + }; + + private readonly _getSessionId = async () => { + return this.session?.id; + }; + + private readonly _createSessionId = async () => { + return this.session?.id; + }; + + private readonly _updateHistory = async () => { + const { doc } = this; + + const currentRequest = ++this._updateHistoryCounter; + + const [histories, actions] = await Promise.all([ + AIProvider.histories?.chats(doc.workspace.id, doc.id), + AIProvider.histories?.actions(doc.workspace.id, doc.id), + ]); + + // Check if this is still the latest request + if (currentRequest !== this._updateHistoryCounter) { + return; + } + + const messages: HistoryMessage[] = actions ? [...actions] : []; + + const sessionId = await this._getSessionId(); + const history = histories?.find(history => history.sessionId === sessionId); + if (history) { + messages.push(...history.messages); + } + + this.chatContextValue = { + ...this.chatContextValue, + messages: messages.sort( + (a, b) => + new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime() + ), + }; + + this._scrollToEnd(); + }; + + private readonly _updateEmbeddingProgress = ( + count: Record + ) => { + const total = count.finished + count.processing + count.failed; + this.embeddingProgress = [count.finished, total]; + }; + + private readonly updateContext = (context: Partial) => { + this.chatContextValue = { ...this.chatContextValue, ...context }; + }; + + private readonly _scrollToEnd = () => { + this._chatMessagesRef.value?.scrollToEnd(); + }; + + private readonly _throttledScrollToEnd = throttle(this._scrollToEnd, 600); + + override connectedCallback() { + super.connectedCallback(); + this._initPanel().catch(console.error); + } + + protected override updated(_changedProperties: PropertyValues) { + if ( + _changedProperties.has('chatContextValue') && + (this.chatContextValue.status === 'loading' || + this.chatContextValue.status === 'error' || + this.chatContextValue.status === 'success') + ) { + setTimeout(this._scrollToEnd, 500); + } + + if ( + _changedProperties.has('chatContextValue') && + this.chatContextValue.status === 'transmitting' + ) { + this._throttledScrollToEnd(); + } + } + + override render() { + const [done, total] = this.embeddingProgress; + const isEmbedding = total > 0 && done < total; + + return html`
+
+
+ ${isEmbedding + ? html`Embedding ${done}/${total}` + : 'AFFiNE AI'} +
+
+ ${NewPageIcon()} + Add chat +
+ +
${DeleteIcon()}
+
+ + +
`; + } +} diff --git a/packages/frontend/core/src/blocksuite/ai/components/playground/content.ts b/packages/frontend/core/src/blocksuite/ai/components/playground/content.ts new file mode 100644 index 0000000000..81270af1fe --- /dev/null +++ b/packages/frontend/core/src/blocksuite/ai/components/playground/content.ts @@ -0,0 +1,190 @@ +import type { FeatureFlagService } from '@affine/core/modules/feature-flag'; +import type { CopilotSessionType } from '@affine/graphql'; +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 { css, html } from 'lit'; +import { property, state } from 'lit/decorators.js'; +import { repeat } from 'lit/directives/repeat.js'; + +import type { AppSidebarConfig } from '../../chat-panel/chat-config'; +import { AIProvider } from '../../provider'; +import type { DocDisplayConfig, SearchMenuConfig } from '../ai-chat-chips'; +import type { + AIModelSwitchConfig, + AINetworkSearchConfig, + AIReasoningConfig, +} from '../ai-chat-input'; + +export class PlaygroundContent extends SignalWatcher( + WithDisposable(ShadowlessElement) +) { + static override styles = css` + playground-content { + .playground-content { + display: flex; + gap: 16px; + width: 100%; + height: 100%; + padding: 16px; + box-sizing: border-box; + } + + .playground-chat-item { + flex: 1; + min-width: 0; + border: 1px solid var(--affine-border-color); + border-radius: 8px; + background: var(--affine-background-primary-color); + overflow: hidden; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + transition: box-shadow 0.2s ease; + } + + .playground-chat-item:hover { + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); + } + + .playground-chat-item:only-child { + max-width: 800px; + margin: 0 auto; + } + } + `; + + @property({ attribute: false }) + accessor host!: EditorHost; + + @property({ attribute: false }) + accessor doc!: Store; + + @property({ attribute: false }) + accessor networkSearchConfig!: AINetworkSearchConfig; + + @property({ attribute: false }) + accessor reasoningConfig!: AIReasoningConfig; + + @property({ attribute: false }) + accessor modelSwitchConfig!: AIModelSwitchConfig; + + @property({ attribute: false }) + accessor appSidebarConfig!: AppSidebarConfig; + + @property({ attribute: false }) + accessor searchMenuConfig!: SearchMenuConfig; + + @property({ attribute: false }) + accessor docDisplayConfig!: DocDisplayConfig; + + @property({ attribute: false }) + accessor extensions!: ExtensionType[]; + + @property({ attribute: false }) + accessor affineFeatureFlagService!: FeatureFlagService; + + @state() + accessor sessions: CopilotSessionType[] = []; + + private rootSessionId: string | undefined = undefined; + + private readonly _getSessions = async () => { + const sessions = + (await AIProvider.session?.getSessions( + this.doc.workspace.id, + this.doc.id, + { action: false } + )) || []; + const rootSession = sessions + ?.filter(session => !session.parentSessionId) + .at(-1); + if (!rootSession) { + // Create a new session + const rootSessionId = await AIProvider.session?.createSession({ + docId: this.doc.id, + workspaceId: this.doc.workspace.id, + promptName: 'Chat With AFFiNE AI', + }); + if (rootSessionId) { + this.rootSessionId = rootSessionId; + const forkSession = await this._forkSession(rootSessionId); + if (forkSession) { + this.sessions = [forkSession]; + } + } + } else { + this.rootSessionId = rootSession.id; + const childSessions = sessions.filter( + session => session.parentSessionId === rootSession.id + ); + if (childSessions.length > 0) { + this.sessions = childSessions; + } else { + const forkSession = await this._forkSession(rootSession.id); + if (forkSession) { + this.sessions = [forkSession]; + } + } + } + }; + + private readonly _forkSession = async (parentSessionId: string) => { + const forkSessionId = await AIProvider.forkChat?.({ + workspaceId: this.doc.workspace.id, + docId: this.doc.id, + sessionId: parentSessionId, + latestMessageId: '', + }); + if (!forkSessionId) { + return; + } + return await AIProvider.session?.getSession( + this.doc.workspace.id, + forkSessionId + ); + }; + + private readonly _addChat = async () => { + if (!this.rootSessionId) { + return; + } + const forkSession = await this._forkSession(this.rootSessionId); + if (forkSession) { + this.sessions = [...this.sessions, forkSession]; + } + }; + + override connectedCallback() { + super.connectedCallback(); + this._getSessions().catch(console.error); + } + + override render() { + return html` +
+ ${repeat( + this.sessions, + session => session.id, + session => html` +
+ +
+ ` + )} +
+ `; + } +} diff --git a/packages/frontend/core/src/blocksuite/ai/components/playground/index.ts b/packages/frontend/core/src/blocksuite/ai/components/playground/index.ts new file mode 100644 index 0000000000..469f6c216b --- /dev/null +++ b/packages/frontend/core/src/blocksuite/ai/components/playground/index.ts @@ -0,0 +1,9 @@ +import { PlaygroundChat } from './chat'; +import { PlaygroundContent } from './content'; +import { PlaygroundModal } from './modal'; + +export function effects() { + customElements.define('playground-chat', PlaygroundChat); + customElements.define('playground-content', PlaygroundContent); + customElements.define('playground-modal', PlaygroundModal); +} diff --git a/packages/frontend/core/src/blocksuite/ai/components/playground/modal.ts b/packages/frontend/core/src/blocksuite/ai/components/playground/modal.ts new file mode 100644 index 0000000000..834f1d86a3 --- /dev/null +++ b/packages/frontend/core/src/blocksuite/ai/components/playground/modal.ts @@ -0,0 +1,139 @@ +import { ShadowlessElement } from '@blocksuite/affine/std'; +import { CloseIcon } from '@blocksuite/icons/lit'; +import { css, html, type TemplateResult } from 'lit'; +import { property } from 'lit/decorators.js'; + +/** + * A modal component for AI Playground + */ +export class PlaygroundModal extends ShadowlessElement { + static override styles = css` + playground-modal { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + z-index: 100; + background-color: rgba(0, 0, 0, 0.4); + } + + .playground-modal-container { + position: relative; + width: 90%; + height: 90%; + background-color: var(--affine-background-primary-color); + border-radius: 12px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + display: flex; + flex-direction: column; + overflow: hidden; + } + + .playground-modal-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 16px 20px; + border-bottom: 1px solid var(--affine-border-color); + } + + .playground-modal-title { + font-size: 18px; + font-weight: 600; + color: var(--affine-text-primary-color); + } + + .playground-modal-close { + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; + border-radius: 4px; + } + + .playground-modal-close:hover { + background-color: var(--affine-hover-color); + } + + .playground-modal-content { + flex: 1; + overflow-y: auto; + } + `; + + private _close() { + this.remove(); + this.onClose?.(); + } + + private readonly _handleKeyDown = (e: KeyboardEvent) => { + if (e.key === 'Escape') { + this._close(); + } + }; + + override connectedCallback() { + super.connectedCallback(); + document.addEventListener('keydown', this._handleKeyDown); + } + + override disconnectedCallback() { + super.disconnectedCallback(); + document.removeEventListener('keydown', this._handleKeyDown); + } + + override render() { + return html` +
+
+
${this.modalTitle}
+
+ ${CloseIcon()} +
+
+
${this.content}
+
+ `; + } + + @property({ attribute: false }) + accessor modalTitle: string = ''; + + @property({ attribute: false }) + accessor content: TemplateResult = html` +
Welcome to the AI Playground!
+ `; + + @property({ attribute: false }) + accessor onClose: (() => void) | undefined = undefined; +} + +declare global { + interface HTMLElementTagNameMap { + 'playground-modal': PlaygroundModal; + } +} + +/** + * Creates and displays a modal with the provided content + */ +export const createPlaygroundModal = ( + content: TemplateResult, + title: string +) => { + // Create the modal element + const modal = document.createElement('playground-modal') as PlaygroundModal; + modal.modalTitle = title; + modal.content = content; + + // Add the modal to the document body + document.body.append(modal); + + return modal; +}; diff --git a/packages/frontend/core/src/blocksuite/ai/effects.ts b/packages/frontend/core/src/blocksuite/ai/effects.ts index 0f81ba675e..8832858c25 100644 --- a/packages/frontend/core/src/blocksuite/ai/effects.ts +++ b/packages/frontend/core/src/blocksuite/ai/effects.ts @@ -50,6 +50,7 @@ import { AskAIToolbarButton } from './components/ask-ai-toolbar'; import { ChatActionList } from './components/chat-action-list'; import { ChatCopyMore } from './components/copy-more'; import { ImagePreviewGrid } from './components/image-preview-grid'; +import { effects as componentPlaygroundEffects } from './components/playground'; import { TextRenderer } from './components/text-renderer'; import { AIErrorWrapper } from './messages/error'; import { AISlidesRenderer } from './messages/slides-renderer'; @@ -80,6 +81,7 @@ import { EdgelessCopilotToolbarEntry } from './widgets/edgeless-copilot-panel/to export function registerAIEffects() { registerMiniMindmapBlocks(); componentAiItemEffects(); + componentPlaygroundEffects(); customElements.define('ask-ai-icon', AskAIIcon); customElements.define('ask-ai-button', AskAIButton);