Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-25 02:13:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(core): adjust ai help island style and behavior, add animation (#7310)

Browse Source 
- Move right-sidebar activeTab state into `RightSidebarService`
- Remove `styled` usage and adjust the UI
- Fix the issue that ai-button clicking not work when sidebar opened
- Add an animation if AI-Chat panel hasn't been opened.

![CleanShot 2024-06-24 at 18.10.27.gif](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/LakojjjzZNf6ogjOVwKE/14c86fbc-ad4c-44bf-93fe-ca3450db908b.gif)
This commit is contained in:
CatsJuice
2024-06-24 14:37:38 +00:00
parent 0918730274
commit b38c46649f
7 changed files with 204 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx
View File

@@ -2,10 +2,7 @@ import { Scrollable } from '@affine/component';
import { PageDetailSkeleton } from '@affine/component/page-detail-skeleton';
import { AIProvider } from '@affine/core/blocksuite/presets/ai';
import { PageAIOnboarding } from '@affine/core/components/affine/ai-onboarding';
import {
AIIsland,
RIGHT_SIDEBAR_TABS_ACTIVE_KEY,
} from '@affine/core/components/pure/ai-island';
import { AIIsland } from '@affine/core/components/pure/ai-island';
import { useAppSettingHelper } from '@affine/core/hooks/affine/use-app-setting-helper';
import { RecentPagesService } from '@affine/core/modules/cmdk';
import type { PageRootService } from '@blocksuite/blocks';
@@ -27,8 +24,6 @@ import {
FrameworkScope,
globalBlockSuiteSchema,
GlobalContextService,
GlobalStateService,
LiveData,
useLiveData,
useService,
WorkspaceService,
@@ -49,7 +44,6 @@ import { useRegisterBlocksuiteEditorCommands } from '../../../hooks/affine/use-r
import { useActiveBlocksuiteEditor } from '../../../hooks/use-block-suite-editor';
import { usePageDocumentTitle } from '../../../hooks/use-global-state';
import { useNavigateHelper } from '../../../hooks/use-navigate-helper';
import type { SidebarTabName } from '../../../modules/multi-tab-sidebar';
import {
MultiTabSidebarBody,
MultiTabSidebarHeaderSwitcher,
@@ -70,19 +64,8 @@ import * as styles from './detail-page.css';
import { DetailPageHeader } from './detail-page-header';
const DetailPageImpl = memo(function DetailPageImpl() {
const globalState = useService(GlobalStateService).globalState;
const activeTabName = useLiveData(
LiveData.from(
globalState.watch<SidebarTabName>(RIGHT_SIDEBAR_TABS_ACTIVE_KEY),
'journal'
)
);
const setActiveTabName = useCallback(
(name: string) => {
globalState.set(RIGHT_SIDEBAR_TABS_ACTIVE_KEY, name);
},
[globalState]
);
const rightSidebar = useService(RightSidebarService).rightSidebar;
const activeTabName = useLiveData(rightSidebar.activeTabName$);
const doc = useService(DocService).doc;
const docRecordList = useService(DocsService).list;
@@ -90,7 +73,6 @@ const DetailPageImpl = memo(function DetailPageImpl() {
const [editor, setEditor] = useState<AffineEditorContainer | null>(null);
const workspace = useService(WorkspaceService).workspace;
const globalContext = useService(GlobalContextService).globalContext;
const rightSidebar = useService(RightSidebarService).rightSidebar;
const docCollection = workspace.docCollection;
const mode = useLiveData(doc.mode$);
const { appSettings } = useAppSettingHelper();
@@ -99,6 +81,12 @@ const DetailPageImpl = memo(function DetailPageImpl() {
// TODO(@eyhn): remove jotai here
const [_, setActiveBlockSuiteEditor] = useActiveBlocksuiteEditor();
const setActiveTabName = useCallback(
(...args: Parameters<typeof rightSidebar.setActiveTabName>) =>
rightSidebar.setActiveTabName(...args),
[rightSidebar]
);
useEffect(() => {
if (isActiveView) {
setActiveBlockSuiteEditor(editor);