@@ -204,9 +218,14 @@ export function SpaceSidebar() {
interface SpaceMenuProps {
spaceId: string;
+ canManagePages: boolean;
onSpaceSettings: () => void;
}
-function SpaceMenu({ spaceId, onSpaceSettings }: SpaceMenuProps) {
+function SpaceMenu({
+ spaceId,
+ canManagePages,
+ onSpaceSettings,
+}: SpaceMenuProps) {
const { t } = useTranslation();
const { spaceSlug } = useParams();
const [importOpened, { open: openImportModal, close: closeImportModal }] =
@@ -214,15 +233,24 @@ function SpaceMenu({ spaceId, onSpaceSettings }: SpaceMenuProps) {
const [exportOpened, { open: openExportModal, close: closeExportModal }] =
useDisclosure(false);
+ const { data: watchStatus } = useSpaceWatchStatusQuery(spaceId);
+ const watchMutation = useWatchSpaceMutation();
+ const unwatchMutation = useUnwatchSpaceMutation();
+ const isWatching = watchStatus?.watching ?? false;
+
+ const handleToggleWatch = () => {
+ if (isWatching) {
+ unwatchMutation.mutate(spaceId);
+ } else {
+ watchMutation.mutate(spaceId);
+ }
+ };
+
return (
<>
- {
return this.watcherRepo.isWatching(userId, pageId);
}
+ async watchSpace(
+ userId: string,
+ spaceId: string,
+ workspaceId: string,
+ trx?: KyselyTransaction,
+ ) {
+ const watcher: InsertableWatcher = {
+ userId,
+ pageId: null,
+ spaceId,
+ workspaceId,
+ type: WatcherType.SPACE,
+ addedById: userId,
+ };
+ return this.watcherRepo.upsertSpace(watcher, trx);
+ }
+
+ async unwatchSpace(userId: string, spaceId: string) {
+ return this.watcherRepo.deleteSpaceWatch(userId, spaceId);
+ }
+
+ async isWatchingSpace(userId: string, spaceId: string): Promise {
+ return this.watcherRepo.isWatchingSpace(userId, spaceId);
+ }
+
async getPageWatchers(pageId: string, pagination: PaginationOptions) {
return this.watcherRepo.findPageWatchers(pageId, pagination);
}
diff --git a/apps/server/src/database/repos/watcher/watcher.repo.ts b/apps/server/src/database/repos/watcher/watcher.repo.ts
index 9739b4deb6..f1506ff928 100644
--- a/apps/server/src/database/repos/watcher/watcher.repo.ts
+++ b/apps/server/src/database/repos/watcher/watcher.repo.ts
@@ -20,18 +20,6 @@ export type WatcherType = (typeof WatcherType)[keyof typeof WatcherType];
export class WatcherRepo {
constructor(@InjectKysely() private readonly db: KyselyDB) {}
- async findByUserAndPage(
- userId: string,
- pageId: string,
- ): Promise {
- return this.db
- .selectFrom('watchers')
- .selectAll()
- .where('userId', '=', userId)
- .where('pageId', '=', pageId)
- .executeTakeFirst();
- }
-
async findPageWatchers(pageId: string, pagination: PaginationOptions) {
const query = this.db
.selectFrom('watchers')
@@ -66,6 +54,53 @@ export class WatcherRepo {
return watchers.map((w) => w.userId);
}
+ /**
+ * Recipients for a `page.updated` notification, combining:
+ * - Active page watchers on this page, AND
+ * - Active space watchers on this space, EXCLUDING any user who has a
+ * muted page watcher row for this page (per-page mute always wins).
+ *
+ * Deduplicated at the SQL level — a user watching both the page and the
+ * containing space appears once.
+ */
+ async getPageUpdateRecipientIds(
+ pageId: string,
+ spaceId: string,
+ trx?: KyselyTransaction,
+ ): Promise {
+ const db = dbOrTx(this.db, trx);
+
+ const pageWatchers = db
+ .selectFrom('watchers')
+ .select('userId')
+ .where('pageId', '=', pageId)
+ .where('type', '=', WatcherType.PAGE)
+ .where('mutedAt', 'is', null);
+
+ const spaceWatchers = db
+ .selectFrom('watchers as sw')
+ .select('sw.userId')
+ .where('sw.spaceId', '=', spaceId)
+ .where('sw.pageId', 'is', null)
+ .where('sw.type', '=', WatcherType.SPACE)
+ .where((eb) =>
+ eb.not(
+ eb.exists(
+ eb
+ .selectFrom('watchers as pw')
+ .select('pw.id')
+ .whereRef('pw.userId', '=', 'sw.userId')
+ .where('pw.pageId', '=', pageId)
+ .where('pw.type', '=', WatcherType.PAGE)
+ .where('pw.mutedAt', 'is not', null),
+ ),
+ ),
+ );
+
+ const rows = await pageWatchers.union(spaceWatchers).execute();
+ return [...new Set(rows.map((r) => r.userId))];
+ }
+
async insert(
watcher: InsertableWatcher,
trx?: KyselyTransaction,
@@ -110,20 +145,81 @@ export class WatcherRepo {
.executeTakeFirst();
}
+ async upsertSpace(
+ watcher: InsertableWatcher,
+ trx?: KyselyTransaction,
+ ): Promise {
+ const db = dbOrTx(this.db, trx);
+ return db
+ .insertInto('watchers')
+ .values(watcher)
+ .onConflict((oc) =>
+ oc
+ .columns(['userId', 'spaceId'])
+ .where('pageId', 'is', null)
+ .doNothing(),
+ )
+ .returningAll()
+ .executeTakeFirst();
+ }
+
async mute(
userId: string,
pageId: string,
+ spaceId: string,
+ workspaceId: string,
trx?: KyselyTransaction,
): Promise {
const db = dbOrTx(this.db, trx);
+ const mutedAt = new Date();
await db
- .updateTable('watchers')
- .set({ mutedAt: new Date() })
+ .insertInto('watchers')
+ .values({
+ userId,
+ pageId,
+ spaceId,
+ workspaceId,
+ type: WatcherType.PAGE,
+ addedById: userId,
+ mutedAt,
+ })
+ .onConflict((oc) =>
+ oc
+ .columns(['userId', 'pageId'])
+ .where('pageId', 'is not', null)
+ .doUpdateSet({ mutedAt }),
+ )
+ .execute();
+ }
+
+ async deleteSpaceWatch(
+ userId: string,
+ spaceId: string,
+ trx?: KyselyTransaction,
+ ): Promise {
+ const db = dbOrTx(this.db, trx);
+ await db
+ .deleteFrom('watchers')
.where('userId', '=', userId)
- .where('pageId', '=', pageId)
+ .where('spaceId', '=', spaceId)
+ .where('pageId', 'is', null)
+ .where('type', '=', WatcherType.SPACE)
.execute();
}
+ async isWatchingSpace(userId: string, spaceId: string): Promise {
+ const watcher = await this.db
+ .selectFrom('watchers')
+ .select('id')
+ .where('userId', '=', userId)
+ .where('spaceId', '=', spaceId)
+ .where('pageId', 'is', null)
+ .where('type', '=', WatcherType.SPACE)
+ .executeTakeFirst();
+
+ return !!watcher;
+ }
+
async isWatching(userId: string, pageId: string): Promise {
const watcher = await this.db
.selectFrom('watchers')
@@ -164,14 +260,14 @@ export class WatcherRepo {
.where('spaceId', '=', spaceId)
.where('userId', 'is not', null)
.union(
- this.db
+ db
.selectFrom('spaceMembers')
.innerJoin('groupUsers', 'groupUsers.groupId', 'spaceMembers.groupId')
.select('groupUsers.userId')
.where('spaceMembers.spaceId', '=', spaceId),
);
- await this.db
+ await db
.deleteFrom('watchers')
.where('userId', 'in', userIds)
.where('spaceId', '=', spaceId)
diff --git a/apps/server/src/integrations/transactional/emails/page-update-email.tsx b/apps/server/src/integrations/transactional/emails/page-update-email.tsx
index 188d8a3415..c4c8576905 100644
--- a/apps/server/src/integrations/transactional/emails/page-update-email.tsx
+++ b/apps/server/src/integrations/transactional/emails/page-update-email.tsx
@@ -8,6 +8,7 @@ interface Props {
actorName: string;
pageTitle: string;
pageUrl: string;
+ spaceName: string;
}
export const PageUpdateEmail = ({
@@ -15,6 +16,7 @@ export const PageUpdateEmail = ({
actorName,
pageTitle,
pageUrl,
+ spaceName,
}: Props) => {
return (
@@ -24,8 +26,8 @@ export const PageUpdateEmail = ({
{actorName} updated{' '}
{pageTitle}
-
- .
+ {' '}
+ in {spaceName}.
View page
From 57efb91bd3ad626bcbc360f344be796018c10572 Mon Sep 17 00:00:00 2001
From: Philip Okugbe <16838612+Philipinho@users.noreply.github.com>
Date: Fri, 10 Apr 2026 19:23:47 +0100
Subject: [PATCH 05/22] feat(ee): ai chat (#2098)
* feat: ai chat
* feat: ai chat
* sync
* cleanup
* view space button
---
.../public/locales/en-US/translation.json | 30 +-
apps/client/src/App.tsx | 3 +
apps/client/src/components/common/copy.tsx | 7 +-
.../layouts/global/app-header.module.css | 16 +
.../components/layouts/global/app-header.tsx | 94 +++-
.../src/components/layouts/global/aside.tsx | 17 +-
.../layouts/global/global-app-shell.tsx | 5 +-
.../components/ui/card-carousel.module.css | 68 +++
.../src/components/ui/card-carousel.tsx | 77 ++++
.../ee/ai-chat/components/ai-chat-layout.tsx | 106 +++++
.../components/ai-chat-sidebar-item.tsx | 166 +++++++
.../ee/ai-chat/components/ai-chat-sidebar.tsx | 224 ++++++++++
.../ai-chat/components/aside-chat-history.tsx | 67 +++
.../ai-chat/components/aside-chat-panel.tsx | 258 +++++++++++
.../ai-chat/components/chat-empty-state.tsx | 91 ++++
.../src/ee/ai-chat/components/chat-input.tsx | 409 ++++++++++++++++++
.../ai-chat/components/chat-message-list.tsx | 174 ++++++++
.../ee/ai-chat/components/chat-message.tsx | 139 ++++++
.../ee/ai-chat/components/chat-tool-group.tsx | 56 +++
.../ai-chat/components/chat-tool-result.tsx | 49 +++
.../ee/ai-chat/components/enable-ai-chat.tsx | 67 +++
.../src/ee/ai-chat/hooks/use-chat-stream.ts | 227 ++++++++++
apps/client/src/ee/ai-chat/pages/ai-chat.tsx | 39 ++
.../src/ee/ai-chat/queries/ai-chat-query.ts | 61 +++
.../ee/ai-chat/services/ai-chat-service.ts | 144 ++++++
.../src/ee/ai-chat/styles/ai-chat.module.css | 169 ++++++++
.../styles/aside-chat-panel.module.css | 139 ++++++
.../ee/ai-chat/styles/chat-input.module.css | 242 +++++++++++
.../ee/ai-chat/styles/chat-message.module.css | 286 ++++++++++++
.../ee/ai-chat/styles/chat-sidebar.module.css | 138 ++++++
.../src/ee/ai-chat/types/ai-chat.types.ts | 49 +++
apps/client/src/ee/ai/pages/ai-settings.tsx | 2 +
.../components/mention/mention-list.tsx | 2 +-
.../components/mention/mention-suggestion.ts | 4 +-
.../home/components/home-ai-prompt.module.css | 28 ++
.../home/components/home-ai-prompt.tsx | 60 +++
.../components/search-control.module.css | 2 +
.../components/space-carousel.module.css | 22 +
.../space/components/space-carousel.tsx | 77 ++++
.../workspace/types/workspace.types.ts | 1 +
apps/client/src/pages/dashboard/home.tsx | 9 +-
apps/server/package.json | 2 +
.../core/attachment/attachment.constants.ts | 1 +
.../core/attachment/attachment.controller.ts | 30 +-
.../src/core/attachment/attachment.utils.ts | 2 +
.../processors/attachment.processor.ts | 5 +
.../attachment/services/attachment.service.ts | 25 ++
apps/server/src/core/auth/auth.controller.ts | 11 +-
.../workspace/dto/update-workspace.dto.ts | 4 +
.../workspace/services/workspace.service.ts | 17 +-
.../migrations/20260409T132415-ai-chat.ts | 118 +++++
.../repos/attachment/attachment.repo.ts | 51 +++
apps/server/src/database/types/db.d.ts | 28 ++
.../server/src/database/types/entity.types.ts | 17 +
apps/server/src/ee | 2 +-
.../environment/environment.service.ts | 7 +
.../src/integrations/export/export.service.ts | 2 +-
.../queue/constants/queue.constants.ts | 1 +
.../integrations/throttle/throttle.module.ts | 6 +-
.../integrations/throttle/throttler-names.ts | 2 +
.../throttle/user-throttler.guard.ts | 13 +
.../src/lib/markdown/utils/marked.utils.ts | 7 +-
pnpm-lock.yaml | 22 +
63 files changed, 4149 insertions(+), 48 deletions(-)
create mode 100644 apps/client/src/components/ui/card-carousel.module.css
create mode 100644 apps/client/src/components/ui/card-carousel.tsx
create mode 100644 apps/client/src/ee/ai-chat/components/ai-chat-layout.tsx
create mode 100644 apps/client/src/ee/ai-chat/components/ai-chat-sidebar-item.tsx
create mode 100644 apps/client/src/ee/ai-chat/components/ai-chat-sidebar.tsx
create mode 100644 apps/client/src/ee/ai-chat/components/aside-chat-history.tsx
create mode 100644 apps/client/src/ee/ai-chat/components/aside-chat-panel.tsx
create mode 100644 apps/client/src/ee/ai-chat/components/chat-empty-state.tsx
create mode 100644 apps/client/src/ee/ai-chat/components/chat-input.tsx
create mode 100644 apps/client/src/ee/ai-chat/components/chat-message-list.tsx
create mode 100644 apps/client/src/ee/ai-chat/components/chat-message.tsx
create mode 100644 apps/client/src/ee/ai-chat/components/chat-tool-group.tsx
create mode 100644 apps/client/src/ee/ai-chat/components/chat-tool-result.tsx
create mode 100644 apps/client/src/ee/ai-chat/components/enable-ai-chat.tsx
create mode 100644 apps/client/src/ee/ai-chat/hooks/use-chat-stream.ts
create mode 100644 apps/client/src/ee/ai-chat/pages/ai-chat.tsx
create mode 100644 apps/client/src/ee/ai-chat/queries/ai-chat-query.ts
create mode 100644 apps/client/src/ee/ai-chat/services/ai-chat-service.ts
create mode 100644 apps/client/src/ee/ai-chat/styles/ai-chat.module.css
create mode 100644 apps/client/src/ee/ai-chat/styles/aside-chat-panel.module.css
create mode 100644 apps/client/src/ee/ai-chat/styles/chat-input.module.css
create mode 100644 apps/client/src/ee/ai-chat/styles/chat-message.module.css
create mode 100644 apps/client/src/ee/ai-chat/styles/chat-sidebar.module.css
create mode 100644 apps/client/src/ee/ai-chat/types/ai-chat.types.ts
create mode 100644 apps/client/src/features/home/components/home-ai-prompt.module.css
create mode 100644 apps/client/src/features/home/components/home-ai-prompt.tsx
create mode 100644 apps/client/src/features/space/components/space-carousel.module.css
create mode 100644 apps/client/src/features/space/components/space-carousel.tsx
create mode 100644 apps/server/src/database/migrations/20260409T132415-ai-chat.ts
create mode 100644 apps/server/src/integrations/throttle/throttler-names.ts
create mode 100644 apps/server/src/integrations/throttle/user-throttler.guard.ts
diff --git a/apps/client/public/locales/en-US/translation.json b/apps/client/public/locales/en-US/translation.json
index 5db91598f7..b83b3548bb 100644
--- a/apps/client/public/locales/en-US/translation.json
+++ b/apps/client/public/locales/en-US/translation.json
@@ -627,6 +627,7 @@
"AI Answer": "AI Answer",
"Ask AI": "Ask AI",
"AI is thinking...": "AI is thinking...",
+ "Thinking": "Thinking",
"Ask a question...": "Ask a question...",
"AI Answers": "AI Answers",
"AI-powered search (AI Answers)": "AI-powered search (AI Answers)",
@@ -755,5 +756,32 @@
"Publish": "Publish",
"Security": "Security",
"Enforce SSO": "Enforce SSO",
- "Once enforced, members will not be able to login with email and password.": "Once enforced, members will not be able to login with email and password."
+ "Once enforced, members will not be able to login with email and password.": "Once enforced, members will not be able to login with email and password.",
+ "AI-generated content may not be accurate.": "AI-generated content may not be accurate.",
+ "AI Chat": "AI Chat",
+ "Analyze for insights": "Analyze for insights",
+ "Ask anything...": "Ask anything...",
+ "Chat history": "Chat history",
+ "Chat name": "Chat name",
+ "Close": "Close",
+ "Docmost AI": "Docmost AI",
+ "Failed to load chat. An error occurred.": "Failed to load chat. An error occurred.",
+ "Failed to render this message.": "Failed to render this message.",
+ "How can I help you today?": "How can I help you today?",
+ "New chat": "New chat",
+ "No chat history": "No chat history",
+ "No chats found": "No chats found",
+ "No conversations yet": "No conversations yet",
+ "Open full page": "Open full page",
+ "Previous 7 days": "Previous 7 days",
+ "Previous 30 days": "Previous 30 days",
+ "Search chats...": "Search chats...",
+ "Start a new chat to see it here.": "Start a new chat to see it here.",
+ "Summarize this page": "Summarize this page",
+ "Toggle AI Chat": "Toggle AI Chat",
+ "Translate this page": "Translate this page",
+ "Try a different search term.": "Try a different search term.",
+ "Try again": "Try again",
+ "Untitled chat": "Untitled chat",
+ "What can I help you with?": "What can I help you with?"
}
diff --git a/apps/client/src/App.tsx b/apps/client/src/App.tsx
index b99e63b373..382660c750 100644
--- a/apps/client/src/App.tsx
+++ b/apps/client/src/App.tsx
@@ -38,6 +38,7 @@ import UserApiKeys from "@/ee/api-key/pages/user-api-keys";
import WorkspaceApiKeys from "@/ee/api-key/pages/workspace-api-keys";
import AiSettings from "@/ee/ai/pages/ai-settings.tsx";
import AuditLogs from "@/ee/audit/pages/audit-logs.tsx";
+import AiChat from "@/ee/ai-chat/pages/ai-chat.tsx";
import VerifyEmail from "@/ee/pages/verify-email.tsx";
export default function App() {
@@ -81,6 +82,8 @@ export default function App() {
- Docmost
-
+
+
+ 
+
+
+ Docmost
+
+
{items}
@@ -98,6 +125,49 @@ export function AppHeader() {
+
+
+ );
+}
diff --git a/apps/client/src/ee/ai-chat/components/ai-chat-layout.tsx b/apps/client/src/ee/ai-chat/components/ai-chat-layout.tsx
new file mode 100644
index 0000000000..f0fe30356d
--- /dev/null
+++ b/apps/client/src/ee/ai-chat/components/ai-chat-layout.tsx
@@ -0,0 +1,106 @@
+import { useEffect, useRef } from "react";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
+import { useChatInfoQuery } from "../queries/ai-chat-query";
+import { useChatStream } from "../hooks/use-chat-stream";
+import ChatMessageList from "./chat-message-list";
+import ChatEmptyState from "./chat-empty-state";
+import ChatInput from "./chat-input";
+import type { HomeAiPromptInitialState } from "@/features/home/components/home-ai-prompt";
+import classes from "../styles/ai-chat.module.css";
+
+export default function AiChatLayout() {
+ const { chatId } = useParams<{ chatId: string }>();
+ const location = useLocation();
+ const navigate = useNavigate();
+ const chatInfoQuery = useChatInfoQuery(chatId);
+
+ // If the URL points at a chat the user does not own, the info fetch 404s.
+ // Bounce them back to /ai so they cannot interact with any chat UI (including
+ // kicking off orphan uploads) tied to a chat they have no access to.
+ useEffect(() => {
+ if (chatId && chatInfoQuery.isError) {
+ navigate("/ai", { replace: true });
+ }
+ }, [chatId, chatInfoQuery.isError, navigate]);
+ const {
+ messages,
+ streamingContent,
+ streamingToolCalls,
+ isStreaming,
+ error,
+ sendMessage,
+ stopGeneration,
+ hydrateFromServer,
+ } = useChatStream(chatId);
+
+ const autoSentRef = useRef(false);
+
+ useEffect(() => {
+ if (chatInfoQuery.data?.messages) {
+ hydrateFromServer(chatInfoQuery.data.messages);
+ }
+ }, [chatInfoQuery.data, hydrateFromServer]);
+
+ useEffect(() => {
+ if (autoSentRef.current || chatId) return;
+ const state = location.state as HomeAiPromptInitialState | null;
+ if (!state?.initialContent && !state?.initialAttachments?.length) return;
+
+ autoSentRef.current = true;
+ sendMessage(
+ state.initialContent ?? "",
+ state.initialMentions ?? [],
+ state.initialAttachments ?? [],
+ );
+ navigate(location.pathname, { replace: true, state: null });
+ }, [chatId, location, navigate, sendMessage]);
+
+ const hasMessages = messages.length > 0 || isStreaming;
+
+ // While the redirect effect is running (or if the user is still on this
+ // component for any reason) never render the chat UI for a forbidden chat.
+ if (chatId && chatInfoQuery.isError) {
+ return null;
+ }
+
+ return (
+
+ {children}
+
+
+
+
+
+
+ {error && (
+
+ );
+}
diff --git a/apps/client/src/ee/ai-chat/components/ai-chat-sidebar-item.tsx b/apps/client/src/ee/ai-chat/components/ai-chat-sidebar-item.tsx
new file mode 100644
index 0000000000..f59b740e29
--- /dev/null
+++ b/apps/client/src/ee/ai-chat/components/ai-chat-sidebar-item.tsx
@@ -0,0 +1,166 @@
+import { useState, useRef, useEffect, useMemo, useCallback } from "react";
+import { ActionIcon, Menu, TextInput } from "@mantine/core";
+import { IconDots, IconTrash, IconEdit } from "@tabler/icons-react";
+import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import type { AiChat } from "../types/ai-chat.types";
+import classes from "../styles/chat-sidebar.module.css";
+
+type Props = {
+ chat: AiChat;
+ isActive: boolean;
+ onDelete: (chatId: string) => void;
+ onRename: (chatId: string, title: string) => void;
+};
+
+function formatChatDate(
+ isoString: string | Date,
+ locale: string | undefined,
+): string {
+ const date = new Date(isoString);
+ if (Number.isNaN(date.getTime())) return "";
+
+ const now = new Date();
+ const startOfToday = new Date(
+ now.getFullYear(),
+ now.getMonth(),
+ now.getDate(),
+ ).getTime();
+ const ts = date.getTime();
+ const sameYear = date.getFullYear() === now.getFullYear();
+
+ if (ts >= startOfToday) {
+ return date.toLocaleTimeString(locale, {
+ hour: "numeric",
+ minute: "2-digit",
+ });
+ }
+
+ if (sameYear) {
+ return date.toLocaleDateString(locale, {
+ month: "short",
+ day: "numeric",
+ });
+ }
+
+ return date.toLocaleDateString(locale, {
+ month: "short",
+ day: "numeric",
+ year: "numeric",
+ });
+}
+
+export default function AiChatSidebarItem({
+ chat,
+ isActive,
+ onDelete,
+ onRename,
+}: Props) {
+ const { t, i18n } = useTranslation();
+ const [renaming, setRenaming] = useState(false);
+ const [renameValue, setRenameValue] = useState("");
+ const inputRef = useRef
+ {error}
+
+ )}
+
+ {hasMessages ? (
+ <>
+
+
+
+ ) : (
+
+ setRenameValue(e.currentTarget.value)}
+ onKeyDown={(e) => {
+ if (e.key === "Enter") {
+ e.preventDefault();
+ submitRename();
+ } else if (e.key === "Escape") {
+ e.preventDefault();
+ setRenaming(false);
+ }
+ }}
+ onBlur={submitRename}
+ classNames={{ input: classes.chatItemRenameInput }}
+ style={{ flex: 1 }}
+ />
+
+ );
+ }
+
+ return (
+
+
+ {chat.title || t("Untitled chat")}
+
+ {formattedDate}
+
+
+
+
+ );
+}
diff --git a/apps/client/src/ee/ai-chat/components/ai-chat-sidebar.tsx b/apps/client/src/ee/ai-chat/components/ai-chat-sidebar.tsx
new file mode 100644
index 0000000000..e3df3e52b8
--- /dev/null
+++ b/apps/client/src/ee/ai-chat/components/ai-chat-sidebar.tsx
@@ -0,0 +1,224 @@
+import { useState, useCallback, useEffect, useMemo, useRef } from "react";
+import { Link, useNavigate, useParams } from "react-router-dom";
+import { ActionIcon, Center, TextInput, Loader, Tooltip } from "@mantine/core";
+import { useDebouncedValue } from "@mantine/hooks";
+import { IconPlus, IconSearch, IconMessageCircle2 } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import {
+ useChatsQuery,
+ useDeleteChatMutation,
+ useUpdateChatTitleMutation,
+ useSearchChatsQuery,
+} from "../queries/ai-chat-query";
+import AiChatSidebarItem from "./ai-chat-sidebar-item";
+import type { AiChat } from "../types/ai-chat.types";
+import classes from "../styles/chat-sidebar.module.css";
+
+type ChatGroup = { key: string; label: string; chats: AiChat[] };
+
+function groupChatsByAge(
+ chats: AiChat[],
+ t: (key: string) => string,
+): ChatGroup[] {
+ if (chats.length === 0) return [];
+
+ const now = new Date();
+ const startOfToday = new Date(
+ now.getFullYear(),
+ now.getMonth(),
+ now.getDate(),
+ ).getTime();
+ const startOfYesterday = startOfToday - 24 * 60 * 60 * 1000;
+ const startOfLast7 = startOfToday - 7 * 24 * 60 * 60 * 1000;
+ const startOfLast30 = startOfToday - 30 * 24 * 60 * 60 * 1000;
+
+ const buckets: Record
+
+ );
+}
diff --git a/apps/client/src/ee/ai-chat/components/aside-chat-history.tsx b/apps/client/src/ee/ai-chat/components/aside-chat-history.tsx
new file mode 100644
index 0000000000..c31e5b104a
--- /dev/null
+++ b/apps/client/src/ee/ai-chat/components/aside-chat-history.tsx
@@ -0,0 +1,67 @@
+import { useState } from "react";
+import { TextInput, Loader, Text, ScrollArea } from "@mantine/core";
+import { IconSearch } from "@tabler/icons-react";
+import { useChatsQuery, useSearchChatsQuery } from "../queries/ai-chat-query";
+import { useDebouncedValue } from "@mantine/hooks";
+import { useTranslation } from "react-i18next";
+import classes from "../styles/aside-chat-panel.module.css";
+
+type Props = {
+ activeChatId: string | undefined;
+ onSelect: (chatId: string) => void;
+};
+
+export default function AsideChatHistory({ activeChatId, onSelect }: Props) {
+ const { t } = useTranslation();
+ const [searchValue, setSearchValue] = useState("");
+ const [debouncedSearch] = useDebouncedValue(searchValue, 300);
+
+ const chatsQuery = useChatsQuery();
+ const searchQuery = useSearchChatsQuery(debouncedSearch);
+
+ const isSearching = debouncedSearch.length > 0;
+ const chats = isSearching
+ ? (searchQuery.data ?? [])
+ : (chatsQuery.data?.pages.flatMap((p) => p.items) ?? []);
+ const isLoading = isSearching ? searchQuery.isLoading : chatsQuery.isLoading;
+
+ return (
+
+ {t("AI Chat")}
+
+
+
+
+
+
+
+ {isLoading &&
+
+ )}
+
+ )}
+
+
+
+ )}
+ {isSearching
+ ? chats.map((chat) => (
+
+ {isSearching ? t("No chats found") : t("No conversations yet")}
+
+
+ {isSearching
+ ? t("Try a different search term.")
+ : t("Start a new chat to see it here.")}
+
+
+
+ ))}
+ {!isSearching && (
+ <>
+
+ {isFetchingNextPage && (
+ {group.label}
+ {group.chats.map((chat) => (
+
+
+ {isSearching ? t("No chats found") : t("No chat history")}
+
+ ) : (
+
+
+ )}
+
+ );
+}
diff --git a/apps/client/src/ee/ai-chat/components/aside-chat-panel.tsx b/apps/client/src/ee/ai-chat/components/aside-chat-panel.tsx
new file mode 100644
index 0000000000..bd2b95697c
--- /dev/null
+++ b/apps/client/src/ee/ai-chat/components/aside-chat-panel.tsx
@@ -0,0 +1,258 @@
+import { useState, useEffect, useCallback } from "react";
+import { ActionIcon, Popover, Tooltip, UnstyledButton } from "@mantine/core";
+import {
+ IconPlus,
+ IconChevronDown,
+ IconArrowsDiagonal,
+ IconX,
+ IconSparkles,
+ IconFileText,
+ IconLanguage,
+ IconSearch,
+} from "@tabler/icons-react";
+import { useAtom } from "jotai";
+import { useNavigate, useParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { asideStateAtom } from "@/components/layouts/global/hooks/atoms/sidebar-atom";
+import { usePageQuery } from "@/features/page/queries/page-query";
+import { extractPageSlugId } from "@/lib";
+import { useChatStream } from "../hooks/use-chat-stream";
+import { useChatInfoQuery } from "../queries/ai-chat-query";
+import ChatMessageList from "./chat-message-list";
+import ChatInput from "./chat-input";
+import AsideChatHistory from "./aside-chat-history";
+import type { ChatAttachment, PageMention } from "../types/ai-chat.types";
+import classes from "../styles/aside-chat-panel.module.css";
+
+type QuickAction = {
+ icon: React.ReactNode;
+ label: string;
+ prompt: string;
+};
+
+export default function AsideChatPanel() {
+ const { t } = useTranslation();
+ const navigate = useNavigate();
+ const [, setAsideState] = useAtom(asideStateAtom);
+ const [chatId, setChatId] = useState
+
+ ) : chats.length === 0 ? (
+
+ {chats.map((chat) => (
+
+ onSelect(chat.id)}
+ >
+
+ {chat.title || t("Untitled chat")}
+
+
+ ))}
+
+
+ );
+}
diff --git a/apps/client/src/ee/ai-chat/components/chat-empty-state.tsx b/apps/client/src/ee/ai-chat/components/chat-empty-state.tsx
new file mode 100644
index 0000000000..d7bacf1874
--- /dev/null
+++ b/apps/client/src/ee/ai-chat/components/chat-empty-state.tsx
@@ -0,0 +1,91 @@
+import {
+ IconSparkles,
+ IconSearch,
+ IconFilePlus,
+ IconEdit,
+ IconFileText,
+} from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import ChatInput from "./chat-input";
+import type { ChatAttachment, PageMention } from "../types/ai-chat.types";
+import classes from "../styles/ai-chat.module.css";
+
+type Suggestion = {
+ icon: React.ReactNode;
+ text: string;
+ prompt: string;
+};
+
+const SUGGESTIONS: Suggestion[] = [
+ {
+ icon:
+
+
+ setHistoryOpen((o) => !o)}
+ >
+
+ {chatInfoQuery.data?.chat?.title || t("New chat")}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {error && (
+
+ {error}
+
+ )}
+
+ {hasMessages ? (
+ <>
+
+
+
+ ) : (
+
+
+ )}
+
+ {t("How can I help you today?")}
+
+ {quickActions.map((action) => (
+
+ ))}
+
+
+
+
+
+ );
+}
diff --git a/apps/client/src/ee/ai-chat/components/chat-input.tsx b/apps/client/src/ee/ai-chat/components/chat-input.tsx
new file mode 100644
index 0000000000..d003adfb47
--- /dev/null
+++ b/apps/client/src/ee/ai-chat/components/chat-input.tsx
@@ -0,0 +1,409 @@
+import { useCallback, useRef, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { IconArrowUp, IconPaperclip, IconPlayerStopFilled, IconX, IconFile, IconPhoto, IconPlus, IconAt, IconFileText } from "@tabler/icons-react";
+import { Popover } from "@mantine/core";
+import { notifications } from "@mantine/notifications";
+import { EditorContent, ReactNodeViewRenderer, useEditor } from "@tiptap/react";
+import { Placeholder } from "@tiptap/extension-placeholder";
+import { CharacterCount } from "@tiptap/extensions";
+import { StarterKit } from "@tiptap/starter-kit";
+import { Mention, LinkExtension } from "@docmost/editor-ext";
+import EmojiCommand from "@/features/editor/extensions/emoji-command";
+import mentionRenderItems from "@/features/editor/components/mention/mention-suggestion";
+import MentionView from "@/features/editor/components/mention/mention-view";
+import { uploadChatFile } from "../services/ai-chat-service";
+import type { ChatAttachment, PageMention } from "../types/ai-chat.types";
+import classes from "../styles/chat-input.module.css";
+
+type PendingAttachment = ChatAttachment & { uploading: boolean };
+
+const IMAGE_EXTENSIONS = ["png", "jpg", "jpeg", "webp", "gif"];
+const ACCEPTED_FILE_TYPES = ".pdf,.docx,.txt,.csv,.md,.png,.jpg,.jpeg,.webp";
+// Kept in sync with MAX_ATTACHMENTS_PER_MESSAGE in apps/server/src/ee/ai-chat/ai-chat-limits.ts
+const MAX_ATTACHMENTS_PER_MESSAGE = 5;
+
+type Props = {
+ isStreaming: boolean;
+ onSend: (content: string, mentions: PageMention[], attachments: ChatAttachment[]) => void;
+ onStop: () => void;
+ placeholder?: string;
+ autofocus?: boolean;
+ contextPages?: PageMention[];
+ onRemoveContextPage?: (pageId: string) => void;
+ variant?: "card" | "flat";
+ showDisclaimer?: boolean;
+ chatId?: string;
+};
+
+function extractMentions(json: any): PageMention[] {
+ const mentions: PageMention[] = [];
+ const seen = new Set{t("Docmost AI")}
+
+ {t("What can I help you with?")}
+
+
+
+
+
+
+
+ Get started
+
+ {SUGGESTIONS.map((s) => (
+
+ ))}
+
+
+ handleFileSelect(e.target.files)}
+ />
+
+ {((contextPages?.length ?? 0) > 0 || pendingAttachments.length > 0) && (
+
+ {showDisclaimer && (
+
+ {contextPages?.map((page) => (
+
+ )}
+
+
+
+ ))}
+ {pendingAttachments.map((attachment) => (
+
+ {IMAGE_EXTENSIONS.includes(attachment.fileExt) ? (
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {isStreaming ? (
+
+ ) : (
+
+ )}
+
+
+ {t("AI-generated content may not be accurate.")}
+
+ )}
+
+ );
+}
diff --git a/apps/client/src/ee/ai-chat/components/chat-message-list.tsx b/apps/client/src/ee/ai-chat/components/chat-message-list.tsx
new file mode 100644
index 0000000000..3a6fffef7d
--- /dev/null
+++ b/apps/client/src/ee/ai-chat/components/chat-message-list.tsx
@@ -0,0 +1,174 @@
+import { useEffect, useRef, useCallback, useState } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import { IconArrowDown, IconAlertTriangle } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import type { AiChatMessage, AiChatToolCall } from "../types/ai-chat.types";
+import ChatMessage from "./chat-message";
+import classes from "../styles/ai-chat.module.css";
+
+function ChatMessageErrorFallback() {
+ const { t } = useTranslation();
+ return (
+
+
+ );
+}
+
+type Props = {
+ messages: AiChatMessage[];
+ isStreaming: boolean;
+ streamingContent: string;
+ streamingToolCalls: AiChatToolCall[];
+};
+
+const BOTTOM_THRESHOLD_PX = 32;
+const SCROLL_UP_THRESHOLD_PX = 5;
+const SMOOTH_SCROLL_SETTLE_MS = 600;
+
+export default function ChatMessageList({
+ messages,
+ isStreaming,
+ streamingContent,
+ streamingToolCalls,
+}: Props) {
+ const containerRef = useRef
+
+ );
+}
diff --git a/apps/client/src/ee/ai-chat/components/chat-message.tsx b/apps/client/src/ee/ai-chat/components/chat-message.tsx
new file mode 100644
index 0000000000..d0e9443a72
--- /dev/null
+++ b/apps/client/src/ee/ai-chat/components/chat-message.tsx
@@ -0,0 +1,139 @@
+import { useCallback } from "react";
+import { useNavigate } from "react-router";
+import DOMPurify from "dompurify";
+import { ActionIcon, Tooltip } from "@mantine/core";
+import {
+ IconCheck,
+ IconCopy,
+ IconFile,
+ IconLoader2,
+ IconPhoto,
+} from "@tabler/icons-react";
+import { markdownToHtml } from "@docmost/editor-ext";
+import { CopyButton } from "@/components/common/copy-button";
+import type { AiChatMessage, AiChatToolCall } from "../types/ai-chat.types";
+import ChatToolGroup from "./chat-tool-group";
+import classes from "../styles/chat-message.module.css";
+import CopyTextButton from "@/components/common/copy.tsx";
+
+const chatSanitizer = DOMPurify();
+chatSanitizer.addHook("afterSanitizeAttributes", (node) => {
+ if (node.tagName === "A") {
+ const href = node.getAttribute("href") || "";
+ if (href.startsWith("http://") || href.startsWith("https://")) {
+ node.setAttribute("target", "_blank");
+ node.setAttribute("rel", "noopener noreferrer");
+ }
+ }
+});
+
+const IMAGE_EXTENSIONS = ["png", "jpg", "jpeg", "webp", "gif"];
+
+type Props = {
+ message: AiChatMessage;
+ isStreaming?: boolean;
+ streamingContent?: string;
+ streamingToolCalls?: AiChatToolCall[];
+};
+
+export default function ChatMessage({
+ message,
+ isStreaming,
+ streamingContent,
+ streamingToolCalls,
+}: Props) {
+ const navigate = useNavigate();
+
+ const handleContentClick = useCallback(
+ (e: React.MouseEvent
+ {messages.map((msg) => (
+
+ {showScrollButton && (
+
+ )}
+
+
+ );
+ }
+
+ return (
+
+ {attachments.length > 0 && (
+
+
+ {attachments.map((a) => (
+
+ {IMAGE_EXTENSIONS.includes(a.fileExt) ? (
+
+ )}
+ {displayContent}
+
+
+ );
+}
diff --git a/apps/client/src/ee/ai-chat/components/chat-tool-group.tsx b/apps/client/src/ee/ai-chat/components/chat-tool-group.tsx
new file mode 100644
index 0000000000..b4e002f6b8
--- /dev/null
+++ b/apps/client/src/ee/ai-chat/components/chat-tool-group.tsx
@@ -0,0 +1,56 @@
+import { useState } from "react";
+import {
+ IconChevronRight,
+ IconChevronDown,
+ IconLoader2,
+} from "@tabler/icons-react";
+import type { AiChatToolCall } from "../types/ai-chat.types";
+import ChatToolResult, { TOOL_LABELS } from "./chat-tool-result";
+import classes from "../styles/chat-message.module.css";
+
+type Props = {
+ toolCalls: AiChatToolCall[];
+ isStreaming?: boolean;
+};
+
+export default function ChatToolGroup({ toolCalls, isStreaming }: Props) {
+ const [expanded, setExpanded] = useState(false);
+
+ if (!toolCalls || toolCalls.length === 0) return null;
+
+ const activeCall =
+ isStreaming && toolCalls.length > 0
+ ? [...toolCalls].reverse().find((tc) => tc.result === undefined)
+ : undefined;
+
+ const activeLabel = activeCall
+ ? TOOL_LABELS[activeCall.name] || activeCall.name
+ : null;
+
+ return (
+
+ {toolCalls && toolCalls.length > 0 && (
+
+ {!isStreaming && message.content && (
+
+
+ )}
+
+
+ );
+}
diff --git a/apps/client/src/ee/ai-chat/components/chat-tool-result.tsx b/apps/client/src/ee/ai-chat/components/chat-tool-result.tsx
new file mode 100644
index 0000000000..55f20f9130
--- /dev/null
+++ b/apps/client/src/ee/ai-chat/components/chat-tool-result.tsx
@@ -0,0 +1,49 @@
+import { useState } from "react";
+import { IconChevronRight, IconChevronDown } from "@tabler/icons-react";
+import type { AiChatToolCall } from "../types/ai-chat.types";
+import classes from "../styles/chat-message.module.css";
+
+export const TOOL_LABELS: Record setExpanded((prev) => !prev)}
+ >
+ {activeLabel ? (
+
+ {expanded && (
+
+ {toolCalls.map((tc) => (
+
+ )}
+
+
+ );
+}
diff --git a/apps/client/src/ee/ai-chat/components/enable-ai-chat.tsx b/apps/client/src/ee/ai-chat/components/enable-ai-chat.tsx
new file mode 100644
index 0000000000..f4200e5bc0
--- /dev/null
+++ b/apps/client/src/ee/ai-chat/components/enable-ai-chat.tsx
@@ -0,0 +1,67 @@
+import { Badge, Group, Text, Switch, Tooltip } from "@mantine/core";
+import { useAtom } from "jotai";
+import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { updateWorkspace } from "@/features/workspace/services/workspace-service.ts";
+import { notifications } from "@mantine/notifications";
+import { useHasFeature } from "@/ee/hooks/use-feature";
+import { Feature } from "@/ee/features";
+import { useUpgradeLabel } from "@/ee/hooks/use-upgrade-label";
+
+export default function EnableAiChat() {
+ const { t } = useTranslation();
+
+ return (
+ setExpanded((prev) => !prev)}
+ >
+ ·
+ {expanded ? (
+
+ {expanded && (
+
+
+ )}
+
+ {JSON.stringify(
+ { args: toolCall.args, result: toolCall.result },
+ null,
+ 2,
+ )}
+
+
+
+ {t("AI Chat")}
+
+ {t("Beta")}
+
+
+
+ {t(
+ "Enable AI Chat to allow users to have multi-turn conversations with AI about your workspace content.",
+ )}
+
+
+
+
+ (
+
+ {t("Try again")}
+
+ }
+ />
+ )}
+ >
+
+
+ );
+}
diff --git a/apps/client/src/ee/ai-chat/queries/ai-chat-query.ts b/apps/client/src/ee/ai-chat/queries/ai-chat-query.ts
new file mode 100644
index 0000000000..8992a11595
--- /dev/null
+++ b/apps/client/src/ee/ai-chat/queries/ai-chat-query.ts
@@ -0,0 +1,61 @@
+import {
+ useQuery,
+ useMutation,
+ useQueryClient,
+ useInfiniteQuery,
+} from "@tanstack/react-query";
+import {
+ listChats,
+ getChatInfo,
+ deleteChat,
+ updateChatTitle,
+ searchChats,
+} from "../services/ai-chat-service";
+
+export function useChatsQuery() {
+ return useInfiniteQuery({
+ queryKey: ["ai-chats"],
+ queryFn: ({ pageParam }) =>
+ listChats({ cursor: pageParam, limit: 30 }),
+ initialPageParam: undefined as string | undefined,
+ getNextPageParam: (lastPage) =>
+ lastPage.meta.hasNextPage ? lastPage.meta.nextCursor : undefined,
+ });
+}
+
+export function useChatInfoQuery(chatId: string | undefined) {
+ return useQuery({
+ queryKey: ["ai-chat", chatId],
+ queryFn: () => getChatInfo(chatId!),
+ enabled: !!chatId,
+ });
+}
+
+export function useDeleteChatMutation() {
+ const queryClient = useQueryClient();
+ return useMutation({
+ mutationFn: (chatId: string) => deleteChat(chatId),
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ["ai-chats"] });
+ },
+ });
+}
+
+export function useUpdateChatTitleMutation() {
+ const queryClient = useQueryClient();
+ return useMutation({
+ mutationFn: ({ chatId, title }: { chatId: string; title: string }) =>
+ updateChatTitle(chatId, title),
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ["ai-chats"] });
+ },
+ });
+}
+
+export function useSearchChatsQuery(query: string) {
+ return useQuery({
+ queryKey: ["ai-chats-search", query],
+ queryFn: () => searchChats(query),
+ enabled: query.length > 0,
+ });
+}
diff --git a/apps/client/src/ee/ai-chat/services/ai-chat-service.ts b/apps/client/src/ee/ai-chat/services/ai-chat-service.ts
new file mode 100644
index 0000000000..2932372e05
--- /dev/null
+++ b/apps/client/src/ee/ai-chat/services/ai-chat-service.ts
@@ -0,0 +1,144 @@
+import api from "@/lib/api-client.ts";
+import type {
+ AiChat,
+ AiChatMessage,
+ AiChatStreamEvent,
+ ChatAttachment,
+} from "../types/ai-chat.types";
+import { IPagination } from "@/lib/types.ts";
+
+export async function createChat(): Promise
+
+ );
+}
diff --git a/apps/client/src/features/search/components/search-control.module.css b/apps/client/src/features/search/components/search-control.module.css
index 5e5a9c2697..80be81d9c7 100644
--- a/apps/client/src/features/search/components/search-control.module.css
+++ b/apps/client/src/features/search/components/search-control.module.css
@@ -29,6 +29,8 @@
border-radius: var(--mantine-radius-sm);
border: 1px solid;
font-weight: bold;
+ white-space: nowrap;
+ flex-shrink: 0;
@mixin light {
color: var(--mantine-color-gray-7);
diff --git a/apps/client/src/features/space/components/space-carousel.module.css b/apps/client/src/features/space/components/space-carousel.module.css
new file mode 100644
index 0000000000..87b9f1de7d
--- /dev/null
+++ b/apps/client/src/features/space/components/space-carousel.module.css
@@ -0,0 +1,22 @@
+.card {
+ background-color: var(--mantine-color-body);
+ width: 220px;
+
+ @mixin hover {
+ box-shadow: var(--mantine-shadow-xs);
+ transform: scale(1.02);
+ }
+}
+
+.cardSection {
+ background: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-6));
+}
+
+.title {
+ font-family:
+ Greycliff CF,
+ var(--mantine-font-family);
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+}
diff --git a/apps/client/src/features/space/components/space-carousel.tsx b/apps/client/src/features/space/components/space-carousel.tsx
new file mode 100644
index 0000000000..e8c4eada0f
--- /dev/null
+++ b/apps/client/src/features/space/components/space-carousel.tsx
@@ -0,0 +1,77 @@
+import { Text, Card, rem, Group, Button } from "@mantine/core";
+import {
+ prefetchSpace,
+ useGetSpacesQuery,
+} from "@/features/space/queries/space-query.ts";
+import { getSpaceUrl } from "@/lib/config.ts";
+import { Link } from "react-router-dom";
+import classes from "./space-carousel.module.css";
+import { formatMemberCount } from "@/lib";
+import { useTranslation } from "react-i18next";
+import { IconArrowRight } from "@tabler/icons-react";
+import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
+import { AvatarIconType } from "@/features/attachments/types/attachment.types.ts";
+import CardCarousel from "@/components/ui/card-carousel";
+
+export default function SpaceCarousel() {
+ const { t } = useTranslation();
+ const { data } = useGetSpacesQuery({ limit: 20 });
+
+ const cards = data?.items.map((space) => (
+ + {t("Welcome to {{name}}", { name: workspace?.name ?? "Docmost" })} +
+
+ {t("Ask anything or search your workspace")}
+
+
+
+ {}}
+ placeholder={t("Ask anything... Use @ to mention pages")}
+ autofocus={false}
+ />
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/client/src/components/ui/destination-picker/destination-picker-modal.tsx b/apps/client/src/components/ui/destination-picker/destination-picker-modal.tsx
new file mode 100644
index 0000000000..04e9ef7dd9
--- /dev/null
+++ b/apps/client/src/components/ui/destination-picker/destination-picker-modal.tsx
@@ -0,0 +1,67 @@
+import { useState, useEffect } from "react";
+import { Modal, Button, Group } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { DestinationPicker } from "./destination-picker";
+import {
+ DestinationPickerModalProps,
+ DestinationSelection,
+} from "./destination-picker.types";
+
+export function DestinationPickerModal({
+ opened,
+ onClose,
+ title,
+ actionLabel,
+ onSelect,
+ loading,
+ excludePageId,
+ pageLimit,
+}: DestinationPickerModalProps) {
+ const { t } = useTranslation();
+ const [selection, setSelection] = useState
+ {mainNavItems.map((item) => (
+
+
+
+
+ {t("Favorite spaces")}
+ {sortedFavoriteSpaces.length === 0 ? (
+
+ {t("Favorite spaces appear here")}
+
+ ) : (
+ <>
+ {sortedFavoriteSpaces.slice(0, 10).map((fav) => (
+
+
+ {fav.space!.name}
+
+
+ ))}
+ {sortedFavoriteSpaces.length > 10 && (
+
+
+ {t("View all")}
+
+
+ )}
+
+ )}
+
+
+
+ {
+ e.preventDefault();
+ openInvite();
+ }}
+ href="#"
+ >
+
+
+
+
+ ) : searchData?.pages && searchData.pages.length > 0 ? (
+ searchData.pages.map(
+ (page) =>
+ page && (
+ handleSearchResultClick(page)}
+ >
+
+ ),
+ )
+ ) : (
+
+ {page.icon ? (
+ page.icon
+ ) : (
+
+
+ {page.title || t("Untitled")}
+
+ {page.space && (
+
+ {page.space.name}
+
+ )}
+ {t("No results found")}
+ )
+ ) : spacesLoading ? (
+
+
+ ) : (
+ spacesData?.items?.map((space) => (
+
+ {selection.type === "space"
+ ? selection.space.name
+ : `${selection.space.name} / ${selection.page.title || t("Untitled")}`}
+
+ )}
+
+ );
+}
diff --git a/apps/client/src/components/ui/destination-picker/destination-picker.types.ts b/apps/client/src/components/ui/destination-picker/destination-picker.types.ts
new file mode 100644
index 0000000000..005259b3a9
--- /dev/null
+++ b/apps/client/src/components/ui/destination-picker/destination-picker.types.ts
@@ -0,0 +1,23 @@
+import { ISpace } from "@/features/space/types/space.types";
+import { IPage } from "@/features/page/types/page.types";
+
+export type DestinationSelection =
+ | { type: "space"; spaceId: string; space: ISpace }
+ | {
+ type: "page";
+ spaceId: string;
+ pageId: string;
+ page: Partial
+
+ );
+ }
+
+ if (pages.length === 0) {
+ return (
+
+ {pageId ? t("No pages inside") : t("No pages in this space")}
+
+ );
+ }
+
+ return (
+ <>
+ {pages.map((page) => (
+ fetchNextPage()}>
+ {t("Load more")}
+
+ )}
+
+ );
+}
diff --git a/apps/client/src/components/ui/destination-picker/page-row.tsx b/apps/client/src/components/ui/destination-picker/page-row.tsx
new file mode 100644
index 0000000000..58c7a0a87e
--- /dev/null
+++ b/apps/client/src/components/ui/destination-picker/page-row.tsx
@@ -0,0 +1,89 @@
+import { useState } from "react";
+import { IconChevronRight, IconFile } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import { IPage } from "@/features/page/types/page.types";
+import { PageChildren } from "./page-children";
+import classes from "./destination-picker.module.css";
+
+type PageRowProps = {
+ page: Partial !isExcluded && onSelect(page)}
+ >
+ {page.hasChildren ? (
+
+
+ {expanded && page.hasChildren && (
+ {
+ e.stopPropagation();
+ setExpanded(!expanded);
+ }}
+ >
+
+ ) : (
+
+ )}
+
+
+ {page.icon ? (
+ page.icon
+ ) : (
+
+
+
+ {page.title || t("Untitled")}
+
+ writable && onSelectSpace(space)}
+ >
+ {writable ? (
+
+ );
+
+ return (
+ <>
+ {writable ? (
+ rowContent
+ ) : (
+ {
+ e.stopPropagation();
+ setExpanded(!expanded);
+ }}
+ >
+
+ ) : (
+
+ )}
+
+ {space.name}
+
+ {!writable && (
+ {rowContent}
+
+ {t("Allow members to create templates")}
+
+ {t(
+ "Allow non-admin members to create and manage templates in their spaces.",
+ )}
+
+
+
+
+
+ {template.title || "Untitled"}
+
+
+
+
+
+
+ {template.icon ? (
+
+ {canManage && (
+
+ )}
+
+
+
+
+ {template.icon}
+ ) : (
+
+
+ )}
+
+ {template.title}
+
+
+
+ {template.spaceId ? (spaceName || t("Space")) : t("Global")}
+
+
+
+
+
+
+
+ {saveStatus === "saving" && (
+
+ {t("Saving...")}
+
+ )}
+ {saveStatus === "saved" && (
+
+
+ {t("Saved")}
+
+
+ )}
+ {saveStatus === "error" && (
+
+ {t("Save failed. Retry")}
+
+ )}
+
+
+
+ {
+ setDraftSpaceId(spaceId);
+ openSettings();
+ }}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ handleIconChange(emoji.native)
+ }
+ icon={
+ icon ? (
+ {icon}
+ ) : (
+
+
+ handleTitleChange(e.currentTarget.value)
+ }
+ onKeyDown={(e) => {
+ if (e.key === "Enter") {
+ e.preventDefault();
+ editor?.commands.focus("start");
+ }
+ }}
+ />
+ {existingTemplate && (
+