Files
AFFiNE-Mirror/packages/frontend/track/src/events.ts
T
Adarsh Singh 440ff0c342 fix(editor): resolve UX inconsistencies in the AI chat interface (#14850)
# Closes #14189.

Fixes the three UX issues reported in the original bug report, plus one
small
adjacent polish on the right-sidebar toggle that was requested during
review.

Each concern in the issue is addressed end-to-end, with the same
treatment
applied to both places the AI chat panel lives: the **sidebar chat
panel**
(right panel on a doc page) and the **standalone `/chat` page**.

---

## 1. `+` button → persistent multi-session tabs (issue point 1)

**Before:** clicking `+` called `createFreshSession()` (standalone) or
`newSession()` (sidebar), both of which tore down the current chat
content
and replaced it in place. There was no way to keep two chats open at
once.

**After:** a browser/IDE-style tab strip lives above the chat content.
Each
open session gets its own tab with a close `×`; the active tab is
highlighted; `+` now adds a tab rather than replacing the chat.

### Details
- New Lit component `ai-chat-tabs`
([packages/frontend/core/src/blocksuite/ai/components/ai-chat-toolbar/ai-chat-tabs.ts](packages/frontend/core/src/blocksuite/ai/components/ai-chat-toolbar/ai-chat-tabs.ts)).
- Tab title is derived from `session.title` → first user message → `"New
chat"`.
- Horizontal scroll when tabs overflow, with a `wheel` handler that
converts
    mouse wheel / trackpad vertical swipe into horizontal scroll (native
horizontal trackpad swipes also work natively via `overflow-x: auto`).
- Auto `scrollIntoView({ inline: 'nearest' })` on active tab change, so
a
newly created or newly selected tab slides into view instead of staying
    hidden behind the toolbar.
- Close `×` removes the tab from the strip but leaves the session on the
server (matches the existing **Chat history** dropdown semantics — the
session is still reachable there). Closing the active tab switches to an
    adjacent one; closing the last tab starts a fresh session.
- Persistence: open session IDs are saved per-workspace in
`localStorage`
under `ai-chat-open-tabs:{workspaceId}`. On mount, the React pages
hydrate
  those IDs via `AIProvider.session.getSession` /
  `CopilotClient.getSession` — no new backend or schema work.
- Wiring: identical effects on both variants
([chat.tsx
(sidebar)](packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/chat.tsx)
and
[chat/index.tsx
(standalone)](packages/frontend/core/src/desktop/pages/workspace/chat/index.tsx))
  — hydrate → sync active session into tabs → persist.
- The tab strip sits on the same row as the existing toolbar icons
  (pin / history / `+`), separated by `flex: 1` + `min-width: 0` so the
  tabs scroll cleanly up to the toolbar boundary.
- The `ShadowlessElement` base class injects its static CSS globally,
and the
`:host` selector does not match in a React-rooted DOM — the component
uses
  tag-selector CSS (`ai-chat-tabs { display: flex; … }`) instead.

## 2. Drag-and-drop attachments (issue point 2)

**Before:** the chat input accepted no DnD. Attaching anything required
the
`+` → file-picker flow.

**After:** the chat input accepts OS files via native HTML5 DnD and
AFFiNE
documents via the repo's existing pragmatic-drag-and-drop
infrastructure.

### Details
- Native handlers (`dragenter/over/leave/drop`) on

[ai-chat-input.ts](packages/frontend/core/src/blocksuite/ai/components/ai-chat-input/ai-chat-input.ts)
accept OS files: images go into the image preview grid, other files
become
  attachment chips, with the same 50 MB per-file cap as the `+` picker.
- Internal AFFiNE document drags from the nav panel land as doc chips,
  handled via `dropTargetForElements` from
  `@atlaskit/pragmatic-drag-and-drop` (same library the rest of the app
  already uses for internal DnD).
- A "Drop to attach" overlay appears during drag, reusing the existing
focused-border token (`--affine-v2-layer-insideBorder-primaryBorder`)
for
  visual consistency with the focused state.
- The image/file routing logic that previously lived inline in
  `add-popover.ts` was factored into a shared helper

[attachment-utils.ts](packages/frontend/core/src/blocksuite/ai/components/ai-chat-chips/attachment-utils.ts)
  (`addFilesToChat`), so the `+` picker and the drop handler stay in
  lockstep.
- Analytics: extended the `addEmbeddingDoc.control` union in
[events.ts](packages/frontend/track/src/events.ts) with `'dragDrop'` so
  drag-originated attachments are distinguishable from button-initiated
  ones in telemetry.
- `@atlaskit/pragmatic-drag-and-drop` is promoted from a transitive
  dependency (via `@affine/component`) to a direct dependency of
  `@affine/core` and `yarn.lock` is refreshed accordingly.

## 3. Chat-history tooltip + icon (issue point 3)

**Before:** hovering the chat-history button showed a tooltip whose
background did not invert for dark theme (`--affine-tooltip` is not
theme-aware), and the icon was `ArrowDownSmallIcon` — a chevron that
does
not convey "history."

**After:** the tooltip primitive itself is theme-aware (every tooltip in
the app benefits, not just the chat one), and the icon is the
semantically-clear `HistoryIcon`.

### Details
- [tooltip.ts](blocksuite/affine/components/src/tooltip/tooltip.ts) now
uses
  `var(--affine-v2-tooltips-background, var(--affine-tooltip))` and
  `var(--affine-v2-tooltips-foreground, var(--affine-white))`. The V2
  tokens auto-invert with theme; the old vars remain as fallbacks so
  components that override via the existing `tooltipStyle` escape hatch
  continue to work.
- Triangle arrow colors updated to use the same V2 token.
-
[ai-chat-toolbar.ts](packages/frontend/core/src/blocksuite/ai/components/ai-chat-toolbar/ai-chat-toolbar.ts):
  `ArrowDownSmallIcon` → `HistoryIcon`; added
  `data-testid="ai-panel-chat-history"` for future e2e coverage.

## 4. Right-sidebar toggle: tooltips + open-state icon *(adjacent
polish)*

Not part of the original issue, but surfaced while testing the tab strip
—
neither of the two right-sidebar toggle buttons had hover affordance,
and
both used the same icon regardless of the sidebar's state.

- Added `tooltip="Open sidebar"` on the route-container button shown
when
  the sidebar is hidden.
- Added `tooltip="Close sidebar"` on the sidebar-header button shown
when
  the sidebar is expanded.
- The close button now renders a small inline `RightSidebarOpenIcon`
  variant: same outline as `RightSidebarIcon`, but with the right panel
  filled in the AFFiNE accent color to convey the open state. Icon shape
  change is self-contained — no new icon asset added to
  `@blocksuite/icons`.

---

## Commits

- `2adc0c7` — fix(ai-chat): theme-aware tooltip + semantic chat-history
icon *(2 files)*
- `bf26974` — feat(ai-chat): drag-and-drop file and doc attachments in
chat input *(7 files)*
- `fca29c8` — feat(ai-chat): persistent multi-session tab strip *(8
files)*
- `7d5dffe` — feat(workbench): tooltips and open-state icon for the
right-sidebar toggle *(2 files)*

Kept ordered smallest → largest blast radius so the history is easy to
bisect.

---

## Test plan

Verified locally against a fresh server stack (postgres / redis /
mailpit via
compose, migrations run) signed in as `dev@affine.pro`, in both `/chat`
and
the sidebar chat on a doc page, in light and dark themes:

- [x] Tooltip: hover the chat-history icon in dark mode → tooltip is
dark-on-light; toggle to light mode → tooltip is light-on-dark. Existing
tooltips on other surfaces (slash menu, edgeless, linked-doc) still
render correctly.
- [x] Icon: chat-history button renders the history glyph (clock), not a
chevron.
- [x] Drag-and-drop (OS file): drop a PDF / PNG / TXT onto the input →
overlay shows → chips/images appear; file > 50 MB → rejected silently
(same as `+` picker).
- [x] Drag-and-drop (internal doc): drag an AFFiNE doc from the nav
panel → becomes a doc chip.
- [x] Pin-picker, `+` picker, paste-image — all unchanged.
- [x] Tab strip: first chat auto-becomes a tab on first message; `+`
adds tab; click tab switches chat; `×` removes tab and switches to
adjacent; close last tab → new fresh tab spawns.
- [x] Reload browser → tab strip rehydrates from localStorage with the
same sessions.
- [x] Tab overflow: 12+ tabs → horizontal scroll via trackpad vertical
swipe, trackpad horizontal swipe, and mouse wheel; active tab
auto-scrolls into view on `+` click.
- [x] Right-sidebar: hover both toggle buttons → tooltips appear; open
the sidebar → close button shows the filled right-panel icon.
- [x] `yarn lint:ox` and lint-staged both clean on every commit.

Not verified locally (no local model key configured): the assistant
actually
streams a response. Drop/chip flow is independent of that path.

## Out of scope / follow-ups

- No new unit or Playwright tests — the fixes are visually verifiable
and
  reuse existing reducer / state paths. Happy to add tests if reviewers
  prefer.
- `@affine/native` is not required for the web dev stack; I only built
  `@affine/server-native`. Irrelevant to the PR diff.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Multi-tab chat UI with a tabs component, open/close/switch actions,
and per-workspace persistence/restoration.
  * Drag-and-drop attachments into chat input (files and docs).

* **UI/UX**
  * Tooltip theming moved to v2 variables (includes arrow color).
  * Sidebar toggle/close buttons now show tooltips.
  * “Drop to attach” overlay and updated history icon.

* **Behavior**
  * Unified attachment handling with 50MB validation and toast notices.

* **Analytics**
  * Attachment events record drag-and-drop as a control method.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: DarkSky <25152247+darkskygit@users.noreply.github.com>
2026-05-07 04:04:43 +08:00

873 lines
21 KiB
TypeScript
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
// let '$' stands for unspecific matrix
/* eslint-disable rxjs/finnish */
// SECTION: app events
type GeneralEvents = 'openMigrationDataHelp';
type CmdkEvents = 'quickSearch' | 'recentDocs' | 'searchResultsDocs';
type AppEvents =
| 'checkUpdates'
| 'downloadUpdate'
| 'downloadApp'
| 'quitAndInstall'
| 'openChangelog'
| 'dismissChangelog'
| 'contactUs'
| 'findInPage';
type NavigationEvents =
| 'openInNewTab'
| 'openInSplitView'
| 'openInPeekView'
| 'switchTab'
| 'switchSplitView'
| 'tabAction'
| 'splitViewAction'
| 'navigate'
| 'goBack'
| 'goForward'
| 'toggle' // toggle navigation panel
| 'open'
| 'close'; // openclose modal/diaglog
// END SECTIONalias
// SECTION: doc events
type WorkspaceEvents =
| 'createWorkspace'
| 'upgradeWorkspace'
| 'enableCloudWorkspace'
| 'import'
| 'export'
| 'openWorkspaceList';
type DocEvents =
| 'openDoc'
| 'createDoc'
| 'quickStart'
| 'renameDoc'
| 'linkDoc'
| 'deleteDoc'
| 'restoreDoc'
| 'switchPageMode'
| 'openDocOptionsMenu'
| 'openDocInfo'
| 'copyBlockToLink'
| 'loadDoc'
| 'bookmark'
| 'editProperty'
| 'editPropertyMeta'
| 'addProperty'
| 'editDisplayMenu'
| 'navigateAllDocsRouter'
| 'navigatePinedCollectionRouter'
| 'htmlBlockPreviewFailed';
type EditorEvents =
| 'bold'
| 'italic'
| 'underline'
| 'strikeThrough'
| 'foldEdgelessNote';
// END SECTION
// SECTION: setting events
type SettingEvents =
| 'openSettings'
| 'changeAppSetting'
| 'changeEditorSetting'
| 'recoverArchivedWorkspace'
| 'deleteArchivedWorkspace'
| 'deleteUnusedBlob';
// END SECTION
// SECTION: organize events
type CollectionEvents =
| 'createCollection'
| 'deleteCollection'
| 'renameCollection'
| 'addDocToCollection'
| 'editCollection'
| 'addPinnedCollection';
type FolderEvents =
| 'createFolder'
| 'renameFolder'
| 'moveFolder'
| 'deleteFolder';
type TagEvents = 'createTag' | 'deleteTag' | 'renameTag' | 'tagDoc';
type FavoriteEvents = 'toggleFavorite';
type OrganizeItemEvents = // doc, link, folder, collection, tag
| 'createOrganizeItem'
| 'renameOrganizeItem'
| 'moveOrganizeItem'
| 'deleteOrganizeItem'
| 'orderOrganizeItem'
| 'removeOrganizeItem';
type OrganizeEvents =
| OrganizeItemEvents
| CollectionEvents
| FolderEvents
| TagEvents
| FavoriteEvents;
type DNDEvents = 'dragStart' | 'drag' | 'drop';
// END SECTION
// SECTION: cloud events
type ShareEvents =
| 'createShareLink'
| 'copyShareLink'
| 'openShareMenu'
| 'share';
type DocRoleEvents =
| 'modifyDocDefaultRole'
| 'modifyUserDocRole'
| 'inviteUserDocRole';
type AuthEvents =
| 'requestSignIn'
| 'signIn'
| 'signInFail'
| 'signedIn'
| 'signOut'
| 'deleteAccount';
type AccountEvents = 'uploadAvatar' | 'removeAvatar' | 'updateUserName';
type PaymentEvents =
| 'viewPlans'
| 'bookDemo'
| 'checkout'
| 'subscribe'
| 'changeSubscriptionRecurring'
| 'confirmChangingSubscriptionRecurring'
| 'cancelSubscription'
| 'confirmCancelingSubscription'
| 'resumeSubscription'
| 'confirmResumingSubscription';
// END SECTION
// SECTION: ai
type AIEvents = 'addEmbeddingDoc';
// END SECTION
// SECTION: attachment
type AttachmentEvents =
| 'openAttachmentInFullscreen'
| 'openAttachmentInNewTab'
| 'openAttachmentInPeekView'
| 'openAttachmentInSplitView'
| 'openPDFRendererFail';
// END SECTION
// SECTION: template
type TemplateEvents = 'openTemplateListMenu';
// END SECTION
// SECTION: notification
type NotificationEvents = 'openInbox' | 'clickNotification';
// END SECTION
// SECTION: Integration
type IntegrationEvents =
| 'connectIntegration'
| 'disconnectIntegration'
| 'modifyIntegrationSettings'
| 'startIntegrationImport'
| 'selectIntegrationImport'
| 'confirmIntegrationImport'
| 'abortIntegrationImport'
| 'completeIntegrationImport'
| 'createCalendarDocEvent';
// END SECTION
// SECTION: journal
type MeetingEvents =
| 'toggleRecordingBar'
| 'startRecording'
| 'dismissRecording'
| 'finishRecording'
| 'transcribeRecording'
| 'openTranscribeNotes'
| 'toggleMeetingFeatureFlag'
| 'activeMenubarAppItem';
// END SECTION
// SECTION: mention
type MentionEvents = 'mentionMember' | 'noAccessPrompted';
// END SECTION
// SECTION: workspace embedding
type WorkspaceEmbeddingEvents =
| 'toggleWorkspaceEmbedding'
| 'addAdditionalDocs'
| 'addIgnoredDocs';
// END SECTION
// SECTION: comment events
// Add events for comment actions
type CommentEvents =
| 'createComment'
| 'editComment'
| 'deleteComment'
| 'resolveComment';
// END SECTION
// SECTION: apply model
type ApplyModelEvents =
| 'acceptAll'
| 'rejectAll'
| 'accept'
| 'reject'
| 'apply'
| 'copy';
// END SECTION
type UserEvents =
| GeneralEvents
| AppEvents
| NavigationEvents
| WorkspaceEvents
| DocEvents
| EditorEvents
| SettingEvents
| CmdkEvents
| OrganizeEvents
| ShareEvents
| DocRoleEvents
| AuthEvents
| AccountEvents
| PaymentEvents
| DNDEvents
| AIEvents
| CommentEvents
| AttachmentEvents
| TemplateEvents
| NotificationEvents
| IntegrationEvents
| MeetingEvents
| MentionEvents
| WorkspaceEmbeddingEvents
| ApplyModelEvents;
interface PageDivision {
[page: string]: {
[segment: string]: {
[module: string]: UserEvents[];
};
};
}
interface PageEvents extends PageDivision {
// page: {
// $: {}
// ^ if empty
// segment: {
// module: ['event1', 'event2']
// },
// },
// to: page.$.segment.module.event1()
$: {
$: {
$: ['createWorkspace', 'checkout'];
auth: [
'requestSignIn',
'signIn',
'signedIn',
'signInFail',
'signOut',
'deleteAccount',
];
};
sharePanel: {
$: [
'createShareLink',
'copyShareLink',
'export',
'open',
'modifyDocDefaultRole',
'modifyUserDocRole',
'inviteUserDocRole',
];
};
docInfoPanel: {
$: ['open'];
property: ['editProperty', 'addProperty', 'editPropertyMeta'];
databaseProperty: ['editProperty'];
};
settingsPanel: {
menu: ['openSettings'];
workspace: [
'viewPlans',
'export',
'addProperty',
'editPropertyMeta',
'deleteUnusedBlob',
];
archivedWorkspaces: [
'recoverArchivedWorkspace',
'deleteArchivedWorkspace',
];
profileAndBadge: ['viewPlans'];
accountUsage: ['viewPlans'];
accountSettings: ['uploadAvatar', 'removeAvatar', 'updateUserName'];
plans: [
'checkout',
'subscribe',
'changeSubscriptionRecurring',
'confirmChangingSubscriptionRecurring',
'cancelSubscription',
'confirmCancelingSubscription',
'resumeSubscription',
'confirmResumingSubscription',
];
billing: ['viewPlans', 'bookDemo'];
about: ['checkUpdates', 'downloadUpdate', 'changeAppSetting'];
integrationList: [
'connectIntegration',
'disconnectIntegration',
'modifyIntegrationSettings',
'startIntegrationImport',
'selectIntegrationImport',
'confirmIntegrationImport',
'abortIntegrationImport',
'completeIntegrationImport',
];
meetings: ['toggleMeetingFeatureFlag'];
indexerEmbedding: [
'toggleWorkspaceEmbedding',
'addAdditionalDocs',
'addIgnoredDocs',
];
};
cmdk: {
recent: ['recentDocs'];
results: ['searchResultsDocs'];
general: ['copyShareLink', 'goBack', 'goForward', 'findInPage'];
creation: ['createDoc'];
workspace: ['createWorkspace'];
settings: ['openSettings', 'changeAppSetting'];
navigation: ['navigate'];
editor: [
'toggleFavorite',
'switchPageMode',
'createDoc',
'export',
'deleteDoc',
'restoreDoc',
];
docInfo: ['open'];
docHistory: ['open'];
updates: ['quitAndInstall'];
help: ['contactUs', 'openChangelog'];
};
navigationPanel: {
$: ['quickSearch', 'createDoc', 'navigate', 'openSettings', 'toggle'];
organize: [
'createOrganizeItem',
'renameOrganizeItem',
'moveOrganizeItem',
'deleteOrganizeItem',
'orderOrganizeItem',
'openInNewTab',
'openInSplitView',
'toggleFavorite',
'drop',
];
docs: ['createDoc', 'deleteDoc', 'linkDoc', 'drop', 'openDoc'];
collections: [
'createDoc',
'addDocToCollection',
'removeOrganizeItem',
'drop',
'editCollection',
];
folders: ['createDoc', 'drop'];
tags: ['createDoc', 'tagDoc', 'drop'];
favorites: ['createDoc', 'drop'];
migrationData: ['openMigrationDataHelp'];
bottomButtons: [
'downloadApp',
'quitAndInstall',
'openChangelog',
'dismissChangelog',
];
others: ['navigate'];
importModal: ['open'];
workspaceList: [
'requestSignIn',
'open',
'createWorkspace',
'createDoc',
'openSettings',
];
profileAndBadge: ['openSettings'];
journal: ['navigate'];
};
aiOnboarding: {
dialog: ['viewPlans'];
};
docHistory: {
$: ['open', 'close', 'switchPageMode', 'viewPlans'];
};
importModal: {
$: ['open', 'import', 'createDoc'];
};
paywall: {
storage: ['viewPlans'];
aiAction: ['viewPlans'];
};
appTabsHeader: {
$: ['tabAction', 'dragStart'];
};
header: {
$: ['dragStart'];
actions: [
'createDoc',
'createWorkspace',
'switchPageMode',
'toggleFavorite',
'openDocInfo',
'renameDoc',
];
docOptions: [
'open',
'deleteDoc',
'renameDoc',
'switchPageMode',
'createDoc',
'import',
'toggleFavorite',
'export',
];
history: ['open'];
pageInfo: ['open'];
importModal: ['open'];
snapshot: ['import', 'export'];
};
chatPanel: {
chatPanelInput: ['addEmbeddingDoc'];
};
intelligence: {
chatPanelInput: ['addEmbeddingDoc'];
};
commentPanel: {
$: ['createComment', 'editComment', 'deleteComment', 'resolveComment'];
};
attachment: {
$: [
'openAttachmentInFullscreen',
'openAttachmentInNewTab',
'openAttachmentInPeekView',
'openAttachmentInSplitView',
'openPDFRendererFail',
];
};
sidebar: {
newDoc: ['quickStart'];
template: ['openTemplateListMenu', 'quickStart'];
notifications: ['openInbox', 'clickNotification'];
};
splitViewIndicator: {
$: ['splitViewAction', 'openInSplitView', 'openInPeekView'];
};
};
doc: {
$: {
$: ['loadDoc'];
};
editor: {
slashMenu: ['linkDoc', 'createDoc', 'bookmark'];
atMenu: [
'linkDoc',
'import',
'createDoc',
'mentionMember',
'noAccessPrompted',
];
quickSearch: ['createDoc'];
formatToolbar: ['bold'];
pageRef: ['navigate'];
toolbar: [
'copyBlockToLink',
'openInSplitView',
'openInNewTab',
'openInPeekView',
];
aiActions: ['requestSignIn'];
starterBar: ['quickStart', 'openTemplateListMenu'];
audioBlock: ['transcribeRecording', 'openTranscribeNotes'];
codeBlock: ['htmlBlockPreviewFailed'];
};
inlineDocInfo: {
$: ['toggle'];
property: ['editProperty', 'editPropertyMeta', 'addProperty'];
databaseProperty: ['editProperty'];
};
sidepanel: {
property: ['addProperty', 'editPropertyMeta'];
journal: ['createCalendarDocEvent'];
};
biDirectionalLinksPanel: {
$: ['toggle'];
backlinkTitle: ['toggle', 'navigate'];
backlinkPreview: ['navigate'];
};
};
edgeless: {
pageBlock: {
headerToolbar: [
'toggle',
'openDocInfo',
'copyBlockToLink',
'switchPageMode',
];
};
};
workspace: {
$: {
$: ['upgradeWorkspace'];
};
};
allDocs: {
header: {
navigation: ['navigateAllDocsRouter', 'navigatePinedCollectionRouter'];
actions: ['createDoc', 'createWorkspace'];
displayMenu: ['editDisplayMenu'];
viewMode: ['editDisplayMenu'];
collection: ['editCollection', 'addPinnedCollection'];
};
list: {
doc: ['openDoc'];
docMenu: [
'createDoc',
'deleteDoc',
'openInSplitView',
'toggleFavorite',
'openInNewTab',
'openDocInfo',
];
};
};
collection: {
docList: {
docMenu: ['removeOrganizeItem'];
};
collection: {
$: ['editCollection'];
};
};
tag: {};
trash: {};
subscriptionLanding: {
$: {
$: ['checkout'];
};
};
menubarApp: {
menubarActionsMenu: {
menubarActionsList: ['activeMenubarAppItem', 'startRecording'];
};
};
popup: {
$: {
recordingBar: [
'toggleRecordingBar',
'startRecording',
'dismissRecording',
'finishRecording',
];
};
};
clipper: {
$: {
$: ['createDoc'];
};
};
applyModel: {
widget: {
page: ['acceptAll', 'rejectAll'];
block: ['accept', 'reject'];
};
chat: {
$: ['apply', 'accept', 'reject', 'copy'];
};
};
}
type OrganizeItemType = 'doc' | 'folder' | 'collection' | 'tag' | 'favorite';
type OrganizeItemArgs =
| {
type: 'link';
target: OrganizeItemType;
}
| {
type: OrganizeItemType;
};
type PaymentEventArgs = {
plan: string;
recurring: string;
};
type AttachmentEventArgs = {
type: string; // file type
};
type TabActionControlType =
| 'click'
| 'dnd'
| 'midClick'
| 'xButton'
| 'contextMenu';
type TabActionType =
| 'pin'
| 'unpin'
| 'close'
| 'refresh'
| 'moveTab'
| 'openInSplitView'
| 'openInNewTab'
| 'switchSplitView'
| 'switchTab'
| 'separateTabs';
type SplitViewActionControlType = 'menu' | 'indicator';
type SplitViewActionType = 'open' | 'close' | 'move' | 'closeOthers';
type AuthArgs = {
method: 'password' | 'magic-link' | 'oauth' | 'otp';
provider?: string;
};
type ImportStatus = 'importing' | 'failed' | 'success';
type ImportArgs = {
type: string;
status?: ImportStatus;
error?: string;
result?: {
docCount: number;
};
};
type IntegrationArgs<T extends Record<string, any>> = {
type: string;
control:
| 'Readwise Card'
| 'Readwise settings'
| 'Readwise import list'
| 'Calendar Setting';
} & T;
type RecordingEventArgs = {
type: 'Meeting record';
method?: string;
option?: 'Auto transcribing' | 'handle transcribing' | 'on' | 'off';
};
type ApplyModelArgs = {
/* User's complete instruction */
instruction?: string;
/* Split individual semantic change requests */
operation?: string;
};
export type EventArgs = {
createWorkspace: { flavour: string };
signIn: AuthArgs;
signedIn: AuthArgs;
signInFail: AuthArgs & { reason: string };
viewPlans: PaymentEventArgs;
checkout: PaymentEventArgs;
subscribe: PaymentEventArgs;
cancelSubscription: PaymentEventArgs;
confirmCancelingSubscription: PaymentEventArgs;
resumeSubscription: PaymentEventArgs;
confirmResumingSubscription: PaymentEventArgs;
changeSubscriptionRecurring: PaymentEventArgs;
confirmChangingSubscriptionRecurring: PaymentEventArgs;
navigate: { to: string };
openSettings: { to: string };
changeAppSetting: { key: string; value: string | boolean | number };
changeEditorSetting: { key: string; value: string | boolean | number };
createOrganizeItem: OrganizeItemArgs;
renameOrganizeItem: OrganizeItemArgs;
moveOrganizeItem: OrganizeItemArgs;
removeOrganizeItem: OrganizeItemArgs;
deleteOrganizeItem: OrganizeItemArgs;
orderOrganizeItem: OrganizeItemArgs;
openInNewTab: { type: OrganizeItemType };
openInSplitView: { type: OrganizeItemType; route?: string };
tabAction: {
type?: OrganizeItemType;
control: TabActionControlType;
action: TabActionType;
};
splitViewAction: {
control: SplitViewActionControlType;
action: SplitViewActionType;
};
toggleFavorite: OrganizeItemArgs & { on: boolean };
toggle: { type: 'collapse' | 'expand' };
createDoc: { mode?: 'edgeless' | 'page' };
quickStart: { with: 'page' | 'edgeless' | 'template' | 'ai' };
switchPageMode: { mode: 'edgeless' | 'page' };
createShareLink: { mode: 'edgeless' | 'page' };
copyShareLink: {
type: 'default' | 'doc' | 'whiteboard' | 'block' | 'element';
};
import: ImportArgs;
export: { type: string };
copyBlockToLink: {
type: string;
};
editProperty: { type: string };
editPropertyMeta: { type: string; field: string };
addProperty: { type: string; control: 'at menu' | 'property list' };
linkDoc: { type: string; journal: boolean };
drop: { type: string };
dragStart: { type: string };
addEmbeddingDoc: {
type?: 'page' | 'edgeless';
control: 'addButton' | 'atMenu' | 'dragDrop';
method: 'doc' | 'cur-doc' | 'file' | 'tags' | 'collections' | 'suggestion';
};
openAttachmentInFullscreen: AttachmentEventArgs;
openAttachmentInNewTab: AttachmentEventArgs;
openAttachmentInPeekView: AttachmentEventArgs;
openAttachmentInSplitView: AttachmentEventArgs;
modifyUserDocRole: { role: string };
modifyDocDefaultRole: { role: string };
inviteUserDocRole: {
control: 'member list';
role: string;
};
openInbox: { unreadCount: number };
clickNotification: {
type: string;
item: 'read' | 'button' | 'dismiss';
button?: string;
};
connectIntegration: IntegrationArgs<{ result: 'success' | 'failed' }>;
disconnectIntegration: IntegrationArgs<{ method: 'keep' | 'delete' }>;
modifyIntegrationSettings: IntegrationArgs<{
item: string;
option: any;
method: any;
}>;
startIntegrationImport: IntegrationArgs<{
method: 'new' | 'withtimestamp' | 'cleartimestamp';
}>;
selectIntegrationImport: IntegrationArgs<{
method: 'single' | 'all';
option: 'on' | 'off';
}>;
confirmIntegrationImport: IntegrationArgs<{
method: 'new' | 'withtimestamp';
}>;
abortIntegrationImport: IntegrationArgs<{
time: number;
done: number;
total: number;
}>;
completeIntegrationImport: IntegrationArgs<{
time: number;
done: number;
total: number;
}>;
toggleRecordingBar: RecordingEventArgs & {
method: string;
appName: string;
};
startRecording: RecordingEventArgs & {
method: string;
appName: string;
};
dismissRecording: RecordingEventArgs & {
method: string;
appName: string;
};
finishRecording: RecordingEventArgs & {
method: 'fail' | 'success';
appName: string;
};
transcribeRecording: RecordingEventArgs & {
method: 'fail' | 'success';
option: 'Auto transcribing' | 'handle transcribing';
};
openTranscribeNotes: RecordingEventArgs & {
method: 'success' | 'reach limit' | 'not signed in' | 'not owner';
option: 'on' | 'off';
};
toggleMeetingFeatureFlag: RecordingEventArgs & {
option: 'on' | 'off';
};
activeMenubarAppItem: RecordingEventArgs & {
control:
| 'Open Journal'
| 'New Page'
| 'New Edgeless'
| 'Start recording meeting'
| 'Stop recording'
| 'Open AFFiNE'
| 'About AFFiNE'
| 'Meeting Settings'
| 'Quit AFFiNE Completely';
};
mentionMember: {
type: 'member' | 'invite' | 'more';
};
htmlBlockPreviewFailed: {
type: string;
};
noAccessPrompted: {};
loadDoc: {
workspaceId: string;
docId: string;
time: number;
success: boolean;
};
toggleWorkspaceEmbedding: {
type: 'Embedding';
control: 'Workspace embedding';
option: 'on' | 'off';
};
addAdditionalDocs: {
type: 'Embedding';
control: 'Select doc';
docType: string;
};
addIgnoredDocs: {
type: 'Embedding';
control: 'Additional docs';
result: 'success' | 'failure';
};
editDisplayMenu: {
control:
| 'groupBy'
| 'orderBy'
| 'displayProperties'
| 'listViewOptions'
| 'quickActions';
type: string;
};
navigateAllDocsRouter: {
control: string;
};
navigatePinedCollectionRouter: {
control: 'all' | 'user-custom-collection';
};
resolveComment: { type: 'on' | 'off' };
createComment: {
type: 'root' | 'node';
withAttachment: boolean;
withMention: boolean;
category: string;
};
editComment: { type: 'root' | 'node' };
deleteComment: { type: 'root' | 'node' };
accept: ApplyModelArgs;
reject: ApplyModelArgs;
apply: ApplyModelArgs;
};
// for type checking
// if it complains, check the definition of [EventArgs] to make sure it's key is a subset of [UserEvents]
export const YOU_MUST_DEFINE_ARGS_WITH_WRONG_EVENT_NAME: keyof EventArgs extends UserEvents
? true
: false = true;
export type Events = PageEvents;