mirror of
https://github.com/toeverything/AFFiNE.git
synced 2025-01-05 10:12:22 +03:00
feat: ai onboarding (#7279)
This commit is contained in:
regischen
parent
1a8bbc6951
commit
e0c6d23691
@ -1062,6 +1062,109 @@ export const MoreIcon = html`<svg
|
||||
</defs>
|
||||
</svg> `;
|
||||
|
||||
export const ArticleIcon = html`<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clip-path="url(#clip0_9181_12018)">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M6.00011 1.5C6.27625 1.5 6.50011 1.72386 6.50011 2V2.83333H8.49141C8.49729 2.83323 8.5032 2.83323 8.50912 2.83333H10.0001C10.2763 2.83333 10.5001 3.05719 10.5001 3.33333C10.5001 3.60948 10.2763 3.83333 10.0001 3.83333H8.91664C8.53113 5.73215 7.7155 7.47425 6.57605 8.95378C6.80344 9.19092 7.04564 9.40915 7.30011 9.6C7.52102 9.76569 7.5658 10.0791 7.40011 10.3C7.23443 10.5209 6.92102 10.5657 6.70011 10.4C6.42978 10.1973 6.17292 9.96996 5.93126 9.72506C4.88654 10.8777 3.62976 11.8344 2.22263 12.5337C1.97534 12.6566 1.67525 12.5558 1.55235 12.3085C1.42946 12.0612 1.5303 11.7611 1.77759 11.6382C3.10849 10.9768 4.29295 10.0653 5.26956 8.96521C4.56973 8.05833 4.05689 7.03164 3.795 6.14106C3.71709 5.87614 3.8687 5.59822 4.13363 5.52031C4.39855 5.4424 4.67647 5.59401 4.75438 5.85894C4.96704 6.58212 5.37415 7.4132 5.91912 8.16428C6.85773 6.89511 7.54132 5.42617 7.89438 3.83333H2.33344C2.0573 3.83333 1.83344 3.60948 1.83344 3.33333C1.83344 3.05719 2.0573 2.83333 2.33344 2.83333H5.50011V2C5.50011 1.72386 5.72397 1.5 6.00011 1.5ZM10.6668 6.83333C10.8562 6.83333 11.0293 6.94033 11.114 7.10973L13.4428 11.7674C13.4461 11.7736 13.4492 11.7798 13.4522 11.7861L14.4473 13.7764C14.5708 14.0234 14.4707 14.3237 14.2237 14.4472C13.9767 14.5707 13.6764 14.4706 13.5529 14.2236L12.6911 12.5H8.64246L7.78066 14.2236C7.65716 14.4706 7.35683 14.5707 7.10984 14.4472C6.86285 14.3237 6.76274 14.0234 6.88623 13.7764L7.88139 11.7861C7.88437 11.7798 7.88749 11.7736 7.89072 11.7674L10.2196 7.10973C10.3043 6.94033 10.4774 6.83333 10.6668 6.83333ZM9.14246 11.5H12.1911L10.6668 8.45137L9.14246 11.5Z"
|
||||
fill="#77757D"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_9181_12018">
|
||||
<rect width="16" height="16" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg> `;
|
||||
|
||||
export const MindmapIcon = html`<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clip-path="url(#clip0_9181_2174)">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M6.97267 3.96663H5.66732C5.20708 3.96663 4.83398 4.33973 4.83398 4.79997V6.66667C4.83398 6.96672 4.7619 7.24995 4.6341 7.49996H6.94524C7.18611 6.87594 7.79168 6.43327 8.50065 6.43327H12.1673C13.0878 6.43327 13.834 7.17946 13.834 8.09993C13.834 9.02041 13.0878 9.7666 12.1673 9.7666H8.50065C7.71807 9.7666 7.06147 9.22723 6.8823 8.49996H4.63406C4.76188 8.74999 4.83398 9.03324 4.83398 9.33333V11.2057C4.83398 11.6659 5.20708 12.039 5.66732 12.039H6.94305C7.18243 11.412 7.78953 10.9666 8.50065 10.9666H12.1673C13.0878 10.9666 13.834 11.7128 13.834 12.6333C13.834 13.5538 13.0878 14.3 12.1673 14.3H8.50065C7.72011 14.3 7.0649 13.7634 6.88371 13.039H5.66732C4.6548 13.039 3.83398 12.2182 3.83398 11.2057V9.33333C3.83398 8.8731 3.46089 8.5 3.00065 8.5L1.33398 8.5V8.49996V7.5V7.49996H3.00897C3.46538 7.49549 3.83398 7.12413 3.83398 6.66667V4.79997C3.83398 3.78745 4.6548 2.96663 5.66732 2.96663H6.86732C7.02175 2.20589 7.69433 1.6333 8.50065 1.6333H12.1673C13.0878 1.6333 13.834 2.37949 13.834 3.29997C13.834 4.22044 13.0878 4.96663 12.1673 4.96663H8.50065C7.81721 4.96663 7.22985 4.55527 6.97267 3.96663ZM7.83398 3.29997C7.83398 2.93178 8.13246 2.6333 8.50065 2.6333H12.1673C12.5355 2.6333 12.834 2.93178 12.834 3.29997C12.834 3.66816 12.5355 3.96663 12.1673 3.96663H8.50065C8.13246 3.96663 7.83398 3.66816 7.83398 3.29997ZM7.83398 8.09993C7.83398 7.73175 8.13246 7.43327 8.50065 7.43327H12.1673C12.5355 7.43327 12.834 7.73174 12.834 8.09993C12.834 8.46812 12.5355 8.7666 12.1673 8.7666H8.50065C8.13246 8.7666 7.83398 8.46812 7.83398 8.09993ZM8.50065 11.9666C8.13246 11.9666 7.83398 12.2651 7.83398 12.6333C7.83398 13.0015 8.13246 13.3 8.50065 13.3H12.1673C12.5355 13.3 12.834 13.0015 12.834 12.6333C12.834 12.2651 12.5355 11.9666 12.1673 11.9666H8.50065Z"
|
||||
fill="#77757D"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_9181_2174">
|
||||
<rect width="16" height="16" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg> `;
|
||||
|
||||
export const PreloadImageIcon = html`<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clip-path="url(#clip0_9181_11778)">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M3.99935 2.16675C2.98683 2.16675 2.16602 2.98756 2.16602 4.00008V10.6667V12.0001C2.16602 13.0126 2.98683 13.8334 3.99935 13.8334H11.9993C13.0119 13.8334 13.8327 13.0126 13.8327 12.0001V9.33341V4.00008C13.8327 2.98756 13.0119 2.16675 11.9993 2.16675H3.99935ZM3.16602 12.0001V10.8739L6.07676 7.96311C6.4022 7.63767 6.92983 7.63767 7.25527 7.96311L8.97913 9.68697L10.3125 11.0203C10.5077 11.2156 10.8243 11.2156 11.0196 11.0203C11.2148 10.825 11.2148 10.5085 11.0196 10.3132L10.0398 9.33341L10.7434 8.62978C11.0689 8.30434 11.5965 8.30434 11.9219 8.62978L12.8327 9.54052V12.0001C12.8327 12.4603 12.4596 12.8334 11.9993 12.8334H3.99935C3.53911 12.8334 3.16602 12.4603 3.16602 12.0001ZM7.96238 7.256L9.33268 8.62631L10.0363 7.92267C10.7523 7.20671 11.9131 7.20671 12.629 7.92267L12.8327 8.12631V4.00008C12.8327 3.53984 12.4596 3.16675 11.9993 3.16675H3.99935C3.53911 3.16675 3.16602 3.53984 3.16602 4.00008V9.45964L5.36965 7.256C6.08561 6.54004 7.24642 6.54004 7.96238 7.256ZM9.33268 6.00008C9.70087 6.00008 9.99935 5.7016 9.99935 5.33341C9.99935 4.96522 9.70087 4.66675 9.33268 4.66675C8.96449 4.66675 8.66602 4.96522 8.66602 5.33341C8.66602 5.7016 8.96449 6.00008 9.33268 6.00008Z"
|
||||
fill="#77757D"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_9181_11778">
|
||||
<rect width="16" height="16" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg> `;
|
||||
|
||||
export const PreloadPenIcon = html`<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M12.8531 3.14728C12.4335 2.72857 11.7529 2.72857 11.3334 3.14728L10.7436 3.73597L12.2618 5.25127L12.8531 4.66119C13.2721 4.24302 13.2721 3.56545 12.8531 3.14728ZM11.554 5.95768L10.0357 4.44238L2.83398 11.63V13.1666H4.33088L11.554 5.95768ZM10.627 2.43948C11.4369 1.63118 12.7496 1.63118 13.5595 2.43948C14.3699 3.24833 14.3699 4.56014 13.5595 5.36899L4.8909 14.0205C4.79716 14.1141 4.67013 14.1666 4.53769 14.1666H2.33398C2.05784 14.1666 1.83398 13.9428 1.83398 13.6666V11.4226C1.83398 11.2898 1.8868 11.1625 1.98078 11.0687L10.627 2.43948Z"
|
||||
fill="#77757D"
|
||||
/>
|
||||
</svg> `;
|
||||
|
||||
export const CommunicateIcon = html`<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clip-path="url(#clip0_9181_1783)">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M2.5038 5.27509C1.82751 4.66398 2.23378 3.5 3.17716 3.5H12.6684C13.4552 3.5 13.9202 4.35239 13.5466 5.01833L8.89155 13.3167C8.43479 14.1309 7.23578 13.9415 7.0303 13.0448L5.96697 8.40452L2.5038 5.27509ZM6.98884 8.38683L8.00503 12.8214C8.00639 12.8273 8.00778 12.8305 8.00839 12.8317C8.00918 12.8321 8.01076 12.8328 8.01323 12.8331C8.01418 12.8333 8.01499 12.8333 8.01564 12.8333C8.01657 12.8321 8.01786 12.8302 8.0194 12.8274L12.2084 5.36001L6.98884 8.38683ZM11.698 4.5H3.17716C3.17601 4.5 3.17504 4.50003 3.17425 4.50008C3.17304 4.50171 3.17131 4.50447 3.16974 4.50868C3.16657 4.51717 3.1671 4.5234 3.16746 4.52511C3.16756 4.52559 3.16762 4.52568 3.16774 4.5259L3.16775 4.52592C3.1678 4.526 3.16919 4.52857 3.17425 4.53314L6.48378 7.52374L11.698 4.5Z"
|
||||
fill="#77757D"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_9181_1783">
|
||||
<rect width="16" height="16" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg> `;
|
||||
|
||||
export const CommentIcon = html`<svg
|
||||
width="20"
|
||||
height="20"
|
||||
|
||||
@ -44,6 +44,7 @@ import {
|
||||
} from './actions/actions-handle';
|
||||
import type { ChatContextValue, ChatItem, ChatMessage } from './chat-context';
|
||||
import { HISTORY_IMAGE_ACTIONS } from './const';
|
||||
import { AIPreloadConfig } from './preload-config';
|
||||
|
||||
@customElement('chat-panel-messages')
|
||||
export class ChatPanelMessages extends WithDisposable(ShadowlessElement) {
|
||||
@ -186,6 +187,51 @@ export class ChatPanelMessages extends WithDisposable(ShadowlessElement) {
|
||||
}
|
||||
}
|
||||
|
||||
private _renderAIOnboarding() {
|
||||
return this.isLoading ||
|
||||
!this.host.doc.awarenessStore.getFlag('enable_ai_onboarding')
|
||||
? nothing
|
||||
: html`<div
|
||||
style=${styleMap({
|
||||
display: 'flex',
|
||||
gap: '8px',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
marginTop: '16px',
|
||||
width: '100%',
|
||||
})}
|
||||
>
|
||||
${repeat(
|
||||
AIPreloadConfig,
|
||||
config => config.text,
|
||||
config => {
|
||||
return html`<div
|
||||
@click=${() => config.handler()}
|
||||
style=${styleMap({
|
||||
display: 'flex',
|
||||
height: '28px',
|
||||
gap: '8px',
|
||||
width: '85%',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'start',
|
||||
})}
|
||||
>
|
||||
${config.icon}
|
||||
<div
|
||||
style=${styleMap({
|
||||
fontSize: '12px',
|
||||
fontWeight: '400',
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
})}
|
||||
>
|
||||
${config.text}
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
)}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
protected override render() {
|
||||
const { items } = this.chatContextValue;
|
||||
const { isLoading } = this;
|
||||
@ -229,6 +275,7 @@ export class ChatPanelMessages extends WithDisposable(ShadowlessElement) {
|
||||
? 'AFFiNE AI is loading history...'
|
||||
: 'What can I help you with?'}
|
||||
</div>
|
||||
${this._renderAIOnboarding()}
|
||||
</div>
|
||||
${cache(
|
||||
this.showChatCards
|
||||
|
||||
@ -0,0 +1,35 @@
|
||||
import {
|
||||
ArticleIcon,
|
||||
CommunicateIcon,
|
||||
MindmapIcon,
|
||||
PreloadImageIcon,
|
||||
PreloadPenIcon,
|
||||
} from '../_common/icons.js';
|
||||
|
||||
export const AIPreloadConfig = [
|
||||
{
|
||||
icon: ArticleIcon,
|
||||
text: 'Read a foreign language article with AI',
|
||||
handler: () => {}, //waiting for implementation
|
||||
},
|
||||
{
|
||||
icon: MindmapIcon,
|
||||
text: 'Tidy a article with AI MindMap Action',
|
||||
handler: () => {},
|
||||
},
|
||||
{
|
||||
icon: PreloadImageIcon,
|
||||
text: 'Add illustrations to the article',
|
||||
handler: () => {},
|
||||
},
|
||||
{
|
||||
icon: PreloadPenIcon,
|
||||
text: 'Complete writing with AI',
|
||||
handler: () => {},
|
||||
},
|
||||
{
|
||||
icon: CommunicateIcon,
|
||||
text: 'Freely communicate with AI',
|
||||
handler: () => {},
|
||||
},
|
||||
];
|
||||
@ -127,6 +127,7 @@ const blocksuiteFeatureFlags: Partial<Record<keyof BlockSuiteFlags, string>> = {
|
||||
enable_database_statistics: 'Enable Database Block Statistics',
|
||||
enable_block_query: 'Enable Todo Block Query',
|
||||
enable_edgeless_text: 'Enable New Edgeless Text',
|
||||
enable_ai_onboarding: 'Enable AI Onboarding',
|
||||
};
|
||||
|
||||
const BlocksuiteFeatureFlagSettings = () => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user