Answer
${HISTORY_IMAGE_ACTIONS.includes(item.action)
- ? images && renderImages(images)
+ ? images &&
+ html`
- ${answer ? renderImages(answer) : nothing}
+
`;
}
diff --git a/packages/frontend/core/src/blocksuite/ai/chat-panel/chat-panel-messages.ts b/packages/frontend/core/src/blocksuite/ai/chat-panel/chat-panel-messages.ts
index 1e642c0bd0..9a09d5383e 100644
--- a/packages/frontend/core/src/blocksuite/ai/chat-panel/chat-panel-messages.ts
+++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/chat-panel-messages.ts
@@ -19,6 +19,7 @@ import { AIProvider } from '../provider';
import {
type ChatContextValue,
type ChatMessage,
+ isChatAction,
isChatMessage,
} from './chat-context';
import { HISTORY_IMAGE_ACTIONS } from './const';
@@ -245,20 +246,28 @@ export class ChatPanelMessages extends WithDisposable(ShadowlessElement) {
(_, index) => index,
(item, index) => {
const isLast = index === filteredItems.length - 1;
- return isChatMessage(item) && item.role === 'user'
- ? html` this.retry()}
- > `;
+ if (isChatMessage(item) && item.role === 'user') {
+ return html` this.retry()}
+ > `;
+ } else if (isChatAction(item)) {
+ return html`
diff --git a/packages/frontend/core/src/blocksuite/ai/chat-panel/chat-panel-user-message.ts b/packages/frontend/core/src/blocksuite/ai/chat-panel/chat-panel-user-message.ts
deleted file mode 100644
index 8715bd9041..0000000000
--- a/packages/frontend/core/src/blocksuite/ai/chat-panel/chat-panel-user-message.ts
+++ /dev/null
@@ -1,105 +0,0 @@
-import { ShadowlessElement } from '@blocksuite/affine/block-std';
-import { WithDisposable } from '@blocksuite/affine/global/lit';
-import { css, html, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
-import { repeat } from 'lit/directives/repeat.js';
-
-import { type ChatMessage } from './chat-context';
-
-export class ChatPanelUserMessage extends WithDisposable(ShadowlessElement) {
- static override styles = css`
- .chat-user-message {
- display: flex;
- flex-direction: column;
- align-items: flex-end;
-
- .images {
- display: flex;
- flex-direction: row;
- flex-wrap: nowrap;
- gap: 8px;
- margin-bottom: 8px;
- max-width: 100%;
- overflow-x: auto;
- padding: 4px;
- scrollbar-width: auto;
- }
-
- .images::-webkit-scrollbar {
- height: 4px;
- }
-
- .images::-webkit-scrollbar-thumb {
- background-color: var(--affine-border-color);
- border-radius: 4px;
- }
-
- .images::-webkit-scrollbar-track {
- background: transparent;
- }
-
- img {
- max-width: 180px;
- max-height: 264px;
- object-fit: cover;
- border-radius: 8px;
- flex-shrink: 0;
- }
-
- .text-content {
- display: inline-block;
- text-align: left;
- max-width: 800px;
- max-height: 500px;
- overflow-y: auto;
- background: var(--affine-v2-aI-userTextBackground);
- border-radius: 8px;
- padding: 12px;
- white-space: pre-wrap;
- word-wrap: break-word;
- }
- }
- `;
-
- @property({ attribute: false })
- accessor item!: ChatMessage;
-
- renderImages(images: string[]) {
- return images.length > 0
- ? html`
+ ${answer
+ ? html`
`;
}
diff --git a/packages/frontend/core/src/blocksuite/ai/chat-panel/actions/image.ts b/packages/frontend/core/src/blocksuite/ai/chat-panel/actions/image.ts
index 40e73db4d9..de3cd86202 100644
--- a/packages/frontend/core/src/blocksuite/ai/chat-panel/actions/image.ts
+++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/actions/image.ts
@@ -1,4 +1,5 @@
import './action-wrapper';
+import '../content/images';
import type { EditorHost } from '@blocksuite/affine/block-std';
import { ShadowlessElement } from '@blocksuite/affine/block-std';
@@ -8,7 +9,6 @@ import { property } from 'lit/decorators.js';
import { styleMap } from 'lit/directives/style-map.js';
import type { ChatAction } from '../chat-context';
-import { renderImages } from '../components/images';
export class ActionImage extends WithDisposable(ShadowlessElement) {
@property({ attribute: false })
@@ -18,11 +18,13 @@ export class ActionImage extends WithDisposable(ShadowlessElement) {
accessor host!: EditorHost;
protected override render() {
- const answer = this.item.messages[0].attachments;
+ const images = this.item.messages[0].attachments;
return html`
- ${answer ? renderImages(answer) : nothing}
+ ${images
+ ? html`
- ${repeat(
- images,
- image => image,
- image => {
- return html`
`;
- }
- )}
-
`
- : nothing;
- }
-
- renderText(text: string) {
- return text.length > 0
- ? html`${text}
`
- : nothing;
- }
-
- renderContent() {
- const { item } = this;
-
- const imagesRendered = item.attachments
- ? this.renderImages(item.attachments)
- : nothing;
- return html` ${imagesRendered} ${this.renderText(item.content)} `;
- }
-
- protected override render() {
- return html` `;
- }
-}
-
-declare global {
- interface HTMLElementTagNameMap {
- 'chat-panel-user-message': ChatPanelUserMessage;
- }
-}
diff --git a/packages/frontend/core/src/blocksuite/ai/chat-panel/components/images.ts b/packages/frontend/core/src/blocksuite/ai/chat-panel/components/images.ts
deleted file mode 100644
index 67117233bc..0000000000
--- a/packages/frontend/core/src/blocksuite/ai/chat-panel/components/images.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { html } from 'lit';
-import { repeat } from 'lit/directives/repeat.js';
-
-export const renderImages = (images: string[]) => {
- return html`
-
- ${repeat(
- images,
- image => image,
- image => {
- return html`
`;
-};
diff --git a/packages/frontend/core/src/blocksuite/ai/chat-panel/content/assistant-avatar.ts b/packages/frontend/core/src/blocksuite/ai/chat-panel/content/assistant-avatar.ts
new file mode 100644
index 0000000000..8214c21596
--- /dev/null
+++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/content/assistant-avatar.ts
@@ -0,0 +1,30 @@
+import { ShadowlessElement } from '@blocksuite/affine/block-std';
+import { AiIcon } from '@blocksuite/icons/lit';
+import { css, html } from 'lit';
+
+const AffineAvatarIcon = AiIcon({
+ width: '20px',
+ height: '20px',
+ style: 'color: var(--affine-primary-color)',
+});
+
+export class AssistantAvatar extends ShadowlessElement {
+ static override styles = css`
+ .assistant-avatar {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ }
+ `;
+ protected override render() {
+ return html`${AffineAvatarIcon} AFFiNE AI`;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'chat-assistant-avatar': AssistantAvatar;
+ }
+}
diff --git a/packages/frontend/core/src/blocksuite/ai/chat-panel/content/images.ts b/packages/frontend/core/src/blocksuite/ai/chat-panel/content/images.ts
new file mode 100644
index 0000000000..682f0bb80b
--- /dev/null
+++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/content/images.ts
@@ -0,0 +1,106 @@
+import { ShadowlessElement } from '@blocksuite/affine/block-std';
+import { WithDisposable } from '@blocksuite/affine/global/lit';
+import { css, html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+
+export class ChatContentImages extends WithDisposable(ShadowlessElement) {
+ static override styles = css`
+ .chat-content-images-row {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ gap: 8px;
+ margin-bottom: 8px;
+ max-width: 100%;
+ overflow-x: auto;
+ padding: 4px;
+ scrollbar-width: auto;
+ }
+
+ .chat-content-images-row::-webkit-scrollbar {
+ height: 4px;
+ }
+
+ .chat-content-images-row::-webkit-scrollbar-thumb {
+ background-color: var(--affine-border-color);
+ border-radius: 4px;
+ }
+
+ .chat-content-images-row::-webkit-scrollbar-track {
+ background: transparent;
+ }
+
+ .chat-content-images-row img {
+ max-width: 180px;
+ max-height: 264px;
+ object-fit: cover;
+ border-radius: 8px;
+ flex-shrink: 0;
+ }
+
+ .chat-content-images-column {
+ display: flex;
+ gap: 12px;
+ flex-direction: column;
+ margin-bottom: 8px;
+ }
+
+ .chat-content-images-column .image-container {
+ border-radius: 4px;
+ overflow: hidden;
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 70%;
+ max-width: 320px;
+ }
+
+ .chat-content-images-column .image-container img {
+ max-width: 100%;
+ max-height: 100%;
+ width: auto;
+ height: auto;
+ }
+ `;
+
+ @property({ attribute: false })
+ accessor images: string[] = [];
+
+ @property({ attribute: false })
+ accessor layout: 'row' | 'column' = 'row';
+
+ protected override render() {
+ if (this.images.length === 0) {
+ return nothing;
+ }
+
+ if (this.layout === 'row') {
+ return html`
-
-
`;
- }
- )}
-
+ ${repeat(
+ this.images,
+ image => image,
+ image => html``
+ )}
+
`;
+ } else {
+ return html`
+ ${repeat(
+ this.images,
+ image => image,
+ image =>
+ html`
`;
+ }
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'chat-content-images': ChatContentImages;
+ }
+}
diff --git a/packages/frontend/core/src/blocksuite/ai/chat-panel/content/pure-text.ts b/packages/frontend/core/src/blocksuite/ai/chat-panel/content/pure-text.ts
new file mode 100644
index 0000000000..756dc39b75
--- /dev/null
+++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/content/pure-text.ts
@@ -0,0 +1,35 @@
+import { ShadowlessElement } from '@blocksuite/affine/block-std';
+import { css, html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+
+export class ChatContentPureText extends ShadowlessElement {
+ static override styles = css`
+ .chat-content-pure-text {
+ display: inline-block;
+ text-align: left;
+ max-width: 800px;
+ max-height: 500px;
+ overflow-y: auto;
+ background: var(--affine-v2-aI-userTextBackground);
+ border-radius: 8px;
+ padding: 12px;
+ white-space: pre-wrap;
+ word-wrap: break-word;
+ }
+ `;
+
+ @property({ attribute: false })
+ accessor text: string = '';
+
+ protected override render() {
+ return this.text.length > 0
+ ? html`
+
+
`
+ )}
+ ${this.text}
`
+ : nothing;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'chat-content-pure-text': ChatContentPureText;
+ }
+}
diff --git a/packages/frontend/core/src/blocksuite/ai/chat-panel/actions/chat-text.ts b/packages/frontend/core/src/blocksuite/ai/chat-panel/content/rich-text.ts
similarity index 62%
rename from packages/frontend/core/src/blocksuite/ai/chat-panel/actions/chat-text.ts
rename to packages/frontend/core/src/blocksuite/ai/chat-panel/content/rich-text.ts
index c46f7b8c03..26a111482e 100644
--- a/packages/frontend/core/src/blocksuite/ai/chat-panel/actions/chat-text.ts
+++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/content/rich-text.ts
@@ -1,22 +1,16 @@
-import './action-wrapper';
-
import type { EditorHost } from '@blocksuite/affine/block-std';
import { ShadowlessElement } from '@blocksuite/affine/block-std';
import { WithDisposable } from '@blocksuite/affine/global/lit';
import type { SpecBuilder } from '@blocksuite/affine/shared/utils';
-import { html, nothing } from 'lit';
+import { html } from 'lit';
import { property } from 'lit/decorators.js';
import { createTextRenderer } from '../../components/text-renderer';
-import { renderImages } from '../components/images';
-export class ChatText extends WithDisposable(ShadowlessElement) {
+export class ChatContentRichText extends WithDisposable(ShadowlessElement) {
@property({ attribute: false })
accessor host!: EditorHost;
- @property({ attribute: false })
- accessor attachments: string[] | undefined = undefined;
-
@property({ attribute: false })
accessor text!: string;
@@ -27,18 +21,16 @@ export class ChatText extends WithDisposable(ShadowlessElement) {
accessor previewSpecBuilder!: SpecBuilder;
protected override render() {
- const { attachments, text, host } = this;
- return html`${attachments && attachments.length > 0
- ? renderImages(attachments)
- : nothing}${createTextRenderer(host, {
+ const { text, host } = this;
+ return html`${createTextRenderer(host, {
customHeading: true,
extensions: this.previewSpecBuilder.value,
- })(text, this.state)} `;
+ })(text, this.state)}`;
}
}
declare global {
interface HTMLElementTagNameMap {
- 'chat-text': ChatText;
+ 'chat-content-rich-text': ChatContentRichText;
}
}
diff --git a/packages/frontend/core/src/blocksuite/ai/chat-panel/message/action.ts b/packages/frontend/core/src/blocksuite/ai/chat-panel/message/action.ts
new file mode 100644
index 0000000000..8cd290f2c7
--- /dev/null
+++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/message/action.ts
@@ -0,0 +1,78 @@
+import '../content/assistant-avatar';
+
+import type { EditorHost } from '@blocksuite/affine/block-std';
+import { ShadowlessElement } from '@blocksuite/affine/block-std';
+import { WithDisposable } from '@blocksuite/affine/global/lit';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+
+import { type ChatAction } from '../chat-context';
+import { HISTORY_IMAGE_ACTIONS } from '../const';
+
+export class ChatMessageAction extends WithDisposable(ShadowlessElement) {
+ @property({ attribute: false })
+ accessor host!: EditorHost;
+
+ @property({ attribute: false })
+ accessor item!: ChatAction;
+
+ renderHeader() {
+ return html`
+
+ `;
+ }
+
+ renderContent() {
+ const { host, item } = this;
+
+ switch (item.action) {
+ case 'Create a presentation':
+ return html`