Merge branch 'main'

apps/client/src/App.tsx

@@ -41,6 +41,7 @@ import AuditLogs from "@/ee/audit/pages/audit-logs.tsx";
 import TemplateList from "@/ee/template/pages/template-list";
 import TemplateEditor from "@/ee/template/pages/template-editor";
 import FavoritesPage from "@/pages/favorites/favorites-page";
+import AiChat from "@/ee/ai-chat/pages/ai-chat.tsx";
 import VerifyEmail from "@/ee/pages/verify-email.tsx";
 
 export default function App() {
@@ -84,6 +85,8 @@ export default function App() {
 
         <Route element={<Layout />}>
           <Route path={"/home"} element={<Home />} />
+          <Route path={"/ai"} element={<AiChat />} />
+          <Route path={"/ai/chat/:chatId"} element={<AiChat />} />
           <Route path={"/spaces"} element={<SpacesPage />} />
           <Route path={"/favorites"} element={<FavoritesPage />} />
           <Route path={"/templates"} element={<TemplateList />} />

apps/client/src/components/common/copy.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Tooltip } from "@mantine/core";
+import { ActionIcon, MantineColor, MantineSize, Tooltip } from "@mantine/core";
 import { CopyButton } from "@/components/common/copy-button";
 import { IconCheck, IconCopy } from "@tabler/icons-react";
 import React from "react";
@@ -6,8 +6,10 @@ import { useTranslation } from "react-i18next";
 
 interface CopyProps {
   text: string;
+  size?: MantineSize;
+  color?: MantineColor;
 }
-export default function CopyTextButton({ text }: CopyProps) {
+export default function CopyTextButton({ text, size }: CopyProps) {
   const { t } = useTranslation();
 
   return (
@@ -22,6 +24,7 @@ export default function CopyTextButton({ text }: CopyProps) {
             color={copied ? "teal" : "gray"}
             variant="subtle"
             onClick={copy}
+            size={size}
           >
             {copied ? <IconCheck size={16} /> : <IconCopy size={16} />}
           </ActionIcon>

apps/client/src/components/layouts/global/app-header.module.css

@@ -7,6 +7,19 @@
     padding-right: var(--mantine-spacing-md);
 }
 
+.brand {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    color: inherit;
+    cursor: pointer;
+}
+
+.brandIcon {
+    display: flex;
+    align-items: center;
+}
+
 .link {
     display: block;
     line-height: 1;
@@ -16,6 +29,9 @@
     color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
     font-size: var(--mantine-font-size-sm);
     font-weight: 500;
+    user-select: none;
+    white-space: nowrap;
+    flex-shrink: 0;
 
     @mixin hover {
         background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));

apps/client/src/components/layouts/global/app-header.tsx

@@ -1,8 +1,18 @@
-import { Badge, Group, Text, Tooltip } from "@mantine/core";
+import {
+  ActionIcon,
+  Badge,
+  Box,
+  Group,
+  Text,
+  Tooltip,
+  UnstyledButton,
+} from "@mantine/core";
 import classes from "./app-header.module.css";
 import React from "react";
 import TopMenu from "@/components/layouts/global/top-menu.tsx";
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
+import { IconSparkles } from "@tabler/icons-react";
+import useToggleAside from "@/hooks/use-toggle-aside.tsx";
 import APP_ROUTE from "@/lib/app-route.ts";
 import { useAtom } from "jotai";
 import {
@@ -23,8 +33,11 @@ import {
   shareSearchSpotlight,
 } from "@/features/search/constants.ts";
 import { NotificationPopover } from "@/features/notification/components/notification-popover.tsx";
+import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
 
-const links = [{ link: APP_ROUTE.HOME, label: "Home" }];
+const links = [
+  { link: APP_ROUTE.HOME, label: "Home" },
+];
 
 export function AppHeader() {
   const { t } = useTranslation();
@@ -34,6 +47,15 @@ export function AppHeader() {
   const [desktopOpened] = useAtom(desktopSidebarAtom);
   const toggleDesktop = useToggleSidebar(desktopSidebarAtom);
   const { isTrial, trialDaysLeft } = useTrial();
+  const location = useLocation();
+  const toggleAside = useToggleAside();
+  const [workspace] = useAtom(workspaceAtom);
+  const aiChatEnabled = workspace?.settings?.ai?.chat === true;
+
+  const isHomeRoute = location.pathname.startsWith("/home");
+  const isSpacesRoute = location.pathname === "/spaces";
+  const isPageRoute = location.pathname.includes("/p/");
+  const hideSidebar = isHomeRoute || isSpacesRoute;
 
   const items = links.map((link) => (
     <Link key={link.label} to={link.link} className={classes.link}>
@@ -65,15 +87,24 @@ export function AppHeader() {
             />
           </Tooltip>
 
-          <Text
-            size="lg"
-            fw={600}
-            style={{ cursor: "pointer", userSelect: "none" }}
-            component={Link}
-            to="/home"
-          >
-            Docmost
-          </Text>
+          <Link to="/home" className={classes.brand} aria-label="Docmost">
+            <Box hiddenFrom="sm" className={classes.brandIcon}>
+              <img
+                src="/icons/favicon-32x32.png"
+                alt="Docmost"
+                width={22}
+                height={22}
+              />
+            </Box>
+            <Text
+              size="lg"
+              fw={600}
+              style={{ userSelect: "none" }}
+              visibleFrom="sm"
+            >
+              Docmost
+            </Text>
+          </Link>
 
           <Group ml={50} gap={5} className={classes.links} visibleFrom="sm">
             {items}
@@ -90,6 +121,49 @@ export function AppHeader() {
         </div>
 
         <Group px={"xl"} wrap="nowrap">
+          {aiChatEnabled && (
+            <>
+              <UnstyledButton
+                component={Link}
+                to="/ai"
+                className={classes.link}
+                visibleFrom="sm"
+                onClick={(e: React.MouseEvent) => {
+                  if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) {
+                    return;
+                  }
+                  if (isPageRoute) {
+                    e.preventDefault();
+                    toggleAside("chat");
+                  }
+                }}
+              >
+                {t("AI Chat")}
+              </UnstyledButton>
+              <Tooltip label={t("AI Chat")} openDelay={250} withArrow>
+                <ActionIcon
+                  component={Link}
+                  to="/ai"
+                  variant="subtle"
+                  color="dark"
+                  size="sm"
+                  hiddenFrom="sm"
+                  aria-label={t("AI Chat")}
+                  onClick={(e: React.MouseEvent) => {
+                    if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) {
+                      return;
+                    }
+                    if (isPageRoute) {
+                      e.preventDefault();
+                      toggleAside("chat");
+                    }
+                  }}
+                >
+                  <IconSparkles size={20} stroke={2} />
+                </ActionIcon>
+              </Tooltip>
+            </>
+          )}
           <NotificationPopover />
           {isCloud() && isTrial && trialDaysLeft !== 0 && (
             <Badge

apps/client/src/components/layouts/global/aside.tsx

@@ -7,6 +7,7 @@ import { useTranslation } from "react-i18next";
 import { TableOfContents } from "@/features/editor/components/table-of-contents/table-of-contents.tsx";
 import { useAtomValue } from "jotai";
 import { pageEditorAtom } from "@/features/editor/atoms/editor-atoms.ts";
+import AsideChatPanel from "@/ee/ai-chat/components/aside-chat-panel";
 
 export default function Aside() {
   const [{ tab }] = useAtom(asideStateAtom);
@@ -25,6 +26,10 @@ export default function Aside() {
       component = <TableOfContents editor={pageEditor} />;
       title = "Table of contents";
       break;
+    case "chat":
+      component = <AsideChatPanel />;
+      title = "AI Chat";
+      break;
     default:
       component = null;
       title = null;
@@ -34,12 +39,14 @@ export default function Aside() {
     <Box p="md" style={{ height: "100%", display: "flex", flexDirection: "column" }}>
       {component && (
         <>
-          <Text mb="md" fw={500}>
-            {t(title)}
-          </Text>
+          {tab !== "chat" && (
+            <Text mb="md" fw={500}>
+              {t(title)}
+            </Text>
+          )}
 
-          {tab === "comments" ? (
-            <CommentListWithTabs />
+          {tab === "comments" || tab === "chat" ? (
+            component
           ) : (
             <ScrollArea
               style={{ height: "85vh" }}

apps/client/src/components/layouts/global/global-app-shell.tsx

@@ -10,6 +10,7 @@ import {
   sidebarWidthAtom,
 } from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
 import { SpaceSidebar } from "@/features/space/components/sidebar/space-sidebar.tsx";
+import AiChatSidebar from "@/ee/ai-chat/components/ai-chat-sidebar.tsx";
 import { AppHeader } from "@/components/layouts/global/app-header.tsx";
 import Aside from "@/components/layouts/global/aside.tsx";
 import classes from "./app-shell.module.css";
@@ -73,6 +74,9 @@ export default function GlobalAppShell({
   const location = useLocation();
   const isSettingsRoute = location.pathname.startsWith("/settings");
   const isSpaceRoute = location.pathname.startsWith("/s/");
+  const isAiRoute = location.pathname.startsWith("/ai");
+  const isHomeRoute = location.pathname.startsWith("/home");
+  const isSpacesRoute = location.pathname === "/spaces";
   const isPageRoute = location.pathname.includes("/p/");
   const showGlobalSidebar = !isSpaceRoute && !isSettingsRoute;
 
@@ -99,16 +103,19 @@ export default function GlobalAppShell({
       <AppShell.Header px="md" className={classes.header}>
         <AppHeader />
       </AppShell.Header>
-      <AppShell.Navbar
-        className={classes.navbar}
-        withBorder={false}
-        ref={sidebarRef}
-      >
-        {isSpaceRoute && <div className={classes.resizeHandle} onMouseDown={startResizing} />}
-        {isSpaceRoute && <SpaceSidebar />}
-        {isSettingsRoute && <SettingsSidebar />}
-        {showGlobalSidebar && <GlobalSidebar />}
-      </AppShell.Navbar>
+      {!hideSidebar && (
+        <AppShell.Navbar
+          className={classes.navbar}
+          withBorder={false}
+          ref={sidebarRef}
+        >
+          {!isAiRoute && <div className={classes.resizeHandle} onMouseDown={startResizing} />}
+          {isSpaceRoute && <SpaceSidebar />}
+          {isSettingsRoute && <SettingsSidebar />}
+          {isAiRoute && <AiChatSidebar />}
+          {showGlobalSidebar && <GlobalSidebar />}
+        </AppShell.Navbar>
+      )}
       <AppShell.Main>
         {isSettingsRoute ? (
           <Container size={850}>{children}</Container>

apps/client/src/components/ui/card-carousel.module.css

@@ -0,0 +1,68 @@
+.root {
+  position: relative;
+}
+
+.track {
+  display: flex;
+  gap: var(--mantine-spacing-md);
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  padding: 2px;
+  margin: -2px;
+}
+
+.track::-webkit-scrollbar {
+  display: none;
+}
+
+.track > * {
+  scroll-snap-align: start;
+  flex: 0 0 auto;
+}
+
+.arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  border: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+  background: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+  cursor: pointer;
+  padding: 0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 120ms ease, background-color 120ms ease, transform 120ms ease;
+  z-index: 2;
+}
+
+.root:hover .arrow.visible,
+.arrow.visible:focus-visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.arrow:hover {
+  background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5));
+}
+
+.arrow:active {
+  transform: translateY(-50%) scale(0.95);
+}
+
+.arrowLeft {
+  left: -14px;
+}
+
+.arrowRight {
+  right: -14px;
+}

apps/client/src/components/ui/card-carousel.tsx

@@ -0,0 +1,77 @@
+import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
+import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import classes from "./card-carousel.module.css";
+
+type Props = {
+  children: ReactNode;
+  ariaLabel?: string;
+};
+
+export default function CardCarousel({ children, ariaLabel }: Props) {
+  const { t } = useTranslation();
+  const trackRef = useRef<HTMLDivElement>(null);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+
+  const updateScrollState = useCallback(() => {
+    const el = trackRef.current;
+    if (!el) return;
+    const maxScroll = el.scrollWidth - el.clientWidth;
+    setCanScrollLeft(el.scrollLeft > 1);
+    setCanScrollRight(el.scrollLeft < maxScroll - 1);
+  }, []);
+
+  useEffect(() => {
+    updateScrollState();
+    const el = trackRef.current;
+    if (!el) return;
+
+    const observer = new ResizeObserver(updateScrollState);
+    observer.observe(el);
+    for (const child of Array.from(el.children)) {
+      observer.observe(child);
+    }
+
+    return () => observer.disconnect();
+  }, [updateScrollState, children]);
+
+  const scrollBy = (direction: 1 | -1) => {
+    const el = trackRef.current;
+    if (!el) return;
+    el.scrollBy({ left: direction * el.clientWidth * 0.85, behavior: "smooth" });
+  };
+
+  return (
+    <div className={classes.root}>
+      <div
+        ref={trackRef}
+        className={classes.track}
+        onScroll={updateScrollState}
+        {...(ariaLabel ? { role: "region", "aria-label": ariaLabel } : {})}
+      >
+        {children}
+      </div>
+
+      <button
+        type="button"
+        className={`${classes.arrow} ${classes.arrowLeft} ${canScrollLeft ? classes.visible : ""}`}
+        onClick={() => scrollBy(-1)}
+        aria-label={t("Scroll left")}
+        tabIndex={canScrollLeft ? 0 : -1}
+      >
+        <IconChevronLeft size={18} />
+      </button>
+
+      <button
+        type="button"
+        className={`${classes.arrow} ${classes.arrowRight} ${canScrollRight ? classes.visible : ""}`}
+        onClick={() => scrollBy(1)}
+        aria-label={t("Scroll right")}
+        tabIndex={canScrollRight ? 0 : -1}
+      >
+        <IconChevronRight size={18} />
+      </button>
+    </div>
+  );
+}

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 (
+    <div className={classes.main}>
+      {error && (
+        <div
+          style={{
+            padding: "var(--mantine-spacing-sm) var(--mantine-spacing-lg)",
+            color: "var(--mantine-color-red-6)",
+            fontSize: "var(--mantine-font-size-sm)",
+          }}
+        >
+          {error}
+        </div>
+      )}
+
+      {hasMessages ? (
+        <>
+          <ChatMessageList
+            messages={messages}
+            isStreaming={isStreaming}
+            streamingContent={streamingContent}
+            streamingToolCalls={streamingToolCalls}
+          />
+          <div className={classes.inputArea}>
+            <ChatInput
+              isStreaming={isStreaming}
+              onSend={sendMessage}
+              onStop={stopGeneration}
+              chatId={chatId}
+            />
+          </div>
+        </>
+      ) : (
+        <ChatEmptyState
+          isStreaming={isStreaming}
+          onSend={sendMessage}
+          onStop={stopGeneration}
+        />
+      )}
+    </div>
+  );
+}

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<HTMLInputElement>(null);
+
+  const formattedDate = useMemo(
+    () => formatChatDate(chat.updatedAt, i18n.language),
+    [chat.updatedAt, i18n.language],
+  );
+
+  useEffect(() => {
+    if (renaming) {
+      // Wait for the input to be mounted before selecting.
+      const id = window.setTimeout(() => inputRef.current?.select(), 0);
+      return () => window.clearTimeout(id);
+    }
+  }, [renaming]);
+
+  const startRename = useCallback(() => {
+    setRenameValue(chat.title || "");
+    setRenaming(true);
+  }, [chat.title]);
+
+  const submitRename = useCallback(() => {
+    const trimmed = renameValue.trim();
+    if (trimmed && trimmed !== chat.title) {
+      onRename(chat.id, trimmed);
+    }
+    setRenaming(false);
+  }, [renameValue, chat.id, chat.title, onRename]);
+
+  if (renaming) {
+    return (
+      <div className={classes.chatItem} data-active={isActive || undefined}>
+        <TextInput
+          ref={inputRef}
+          size="xs"
+          variant="unstyled"
+          placeholder={t("Chat name")}
+          value={renameValue}
+          onChange={(e) => 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 }}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <Link
+      to={`/ai/chat/${chat.id}`}
+      className={classes.chatItem}
+      data-active={isActive || undefined}
+    >
+      <span className={classes.chatItemTitle}>
+        {chat.title || t("Untitled chat")}
+      </span>
+      <span className={classes.chatItemDate}>{formattedDate}</span>
+      <div className={classes.chatItemActions}>
+        <Menu position="bottom-end" withinPortal>
+          <Menu.Target>
+            <ActionIcon
+              variant="subtle"
+              size="xs"
+              color="gray"
+              onClick={(e) => e.preventDefault()}
+            >
+              <IconDots size={14} />
+            </ActionIcon>
+          </Menu.Target>
+          <Menu.Dropdown>
+            <Menu.Item
+              leftSection={<IconEdit size={14} />}
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                startRename();
+              }}
+            >
+              {t("Rename")}
+            </Menu.Item>
+            <Menu.Item
+              leftSection={<IconTrash size={14} />}
+              color="red"
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                onDelete(chat.id);
+              }}
+            >
+              {t("Delete")}
+            </Menu.Item>
+          </Menu.Dropdown>
+        </Menu>
+      </div>
+    </Link>
+  );
+}

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<string, ChatGroup> = {
+    today: { key: "today", label: t("Today"), chats: [] },
+    yesterday: { key: "yesterday", label: t("Yesterday"), chats: [] },
+    last7: { key: "last7", label: t("Previous 7 days"), chats: [] },
+    last30: { key: "last30", label: t("Previous 30 days"), chats: [] },
+    older: { key: "older", label: t("Older"), chats: [] },
+  };
+
+  for (const chat of chats) {
+    const ts = new Date(chat.updatedAt).getTime();
+    if (ts >= startOfToday) buckets.today.chats.push(chat);
+    else if (ts >= startOfYesterday) buckets.yesterday.chats.push(chat);
+    else if (ts >= startOfLast7) buckets.last7.chats.push(chat);
+    else if (ts >= startOfLast30) buckets.last30.chats.push(chat);
+    else buckets.older.chats.push(chat);
+  }
+
+  return [
+    buckets.today,
+    buckets.yesterday,
+    buckets.last7,
+    buckets.last30,
+    buckets.older,
+  ].filter((b) => b.chats.length > 0);
+}
+
+export default function AiChatSidebar() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { chatId } = useParams<{ chatId: string }>();
+  const [search, setSearch] = useState("");
+  const [debouncedSearch] = useDebouncedValue(search, 300);
+  const chatsQuery = useChatsQuery();
+  const searchQuery = useSearchChatsQuery(debouncedSearch);
+  const deleteMutation = useDeleteChatMutation();
+  const renameMutation = useUpdateChatTitleMutation();
+
+  const chats = useMemo(() => {
+    if (debouncedSearch) {
+      return searchQuery.data || [];
+    }
+    return chatsQuery.data?.pages.flatMap((p) => p.items) || [];
+  }, [debouncedSearch, searchQuery.data, chatsQuery.data]);
+
+  const groupedChats = useMemo(() => groupChatsByAge(chats, t), [chats, t]);
+
+  const sentinelRef = useRef<HTMLDivElement>(null);
+  const { hasNextPage, fetchNextPage, isFetchingNextPage } = chatsQuery;
+  const isSearching = Boolean(debouncedSearch);
+
+  useEffect(() => {
+    if (isSearching) return;
+    const sentinel = sentinelRef.current;
+    if (!sentinel) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && hasNextPage && !isFetchingNextPage) {
+          fetchNextPage();
+        }
+      },
+      { threshold: 0.1 },
+    );
+
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [isSearching, hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+  const handleNewChat = useCallback(
+    (event: React.MouseEvent<HTMLAnchorElement>) => {
+      if (
+        event.button !== 0 ||
+        event.ctrlKey ||
+        event.metaKey ||
+        event.shiftKey
+      ) {
+        return;
+      }
+      event.preventDefault();
+      navigate("/ai");
+    },
+    [navigate],
+  );
+
+  const handleDelete = useCallback(
+    (id: string) => {
+      deleteMutation.mutate(id, {
+        onSuccess: () => {
+          if (chatId === id) {
+            navigate("/ai");
+          }
+        },
+      });
+    },
+    [deleteMutation, chatId, navigate],
+  );
+
+  const handleRename = useCallback(
+    (chatId: string, title: string) => {
+      renameMutation.mutate({ chatId, title });
+    },
+    [renameMutation],
+  );
+
+  const isLoading = chatsQuery.isLoading || searchQuery.isLoading;
+
+  return (
+    <div className={classes.sidebar}>
+      <div className={classes.header}>
+        <span className={classes.title}>{t("AI Chat")}</span>
+        <Tooltip label={t("New chat")} openDelay={250} withArrow>
+          <ActionIcon
+            component={Link}
+            to="/ai"
+            variant="subtle"
+            color="gray"
+            onClick={handleNewChat}
+            aria-label={t("New chat")}
+          >
+            <IconPlus size={18} />
+          </ActionIcon>
+        </Tooltip>
+      </div>
+
+      <TextInput
+        className={classes.searchInput}
+        placeholder="Search chats..."
+        leftSection={<IconSearch size={14} />}
+        size="xs"
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+
+      <div className={classes.chatList}>
+        {isLoading && <Loader size="xs" mx="auto" mt="md" />}
+        {!isLoading && chats.length === 0 && (
+          <div className={classes.chatListEmpty}>
+            <IconMessageCircle2
+              size={28}
+              stroke={1.5}
+              className={classes.chatListEmptyIcon}
+            />
+            <div className={classes.chatListEmptyTitle}>
+              {isSearching ? t("No chats found") : t("No conversations yet")}
+            </div>
+            <div className={classes.chatListEmptyHint}>
+              {isSearching
+                ? t("Try a different search term.")
+                : t("Start a new chat to see it here.")}
+            </div>
+          </div>
+        )}
+        {isSearching
+          ? chats.map((chat) => (
+              <AiChatSidebarItem
+                key={chat.id}
+                chat={chat}
+                isActive={chat.id === chatId}
+                onDelete={handleDelete}
+                onRename={handleRename}
+              />
+            ))
+          : groupedChats.map((group) => (
+              <div key={group.key} className={classes.chatGroup}>
+                <div className={classes.chatGroupLabel}>{group.label}</div>
+                {group.chats.map((chat) => (
+                  <AiChatSidebarItem
+                    key={chat.id}
+                    chat={chat}
+                    isActive={chat.id === chatId}
+                    onDelete={handleDelete}
+                    onRename={handleRename}
+                  />
+                ))}
+              </div>
+            ))}
+        {!isSearching && (
+          <>
+            <div ref={sentinelRef} style={{ height: 1 }} />
+            {isFetchingNextPage && (
+              <Center py="xs">
+                <Loader size="xs" />
+              </Center>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

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 (
+    <div>
+      <TextInput
+        placeholder={t("Search chats...")}
+        leftSection={<IconSearch size={14} />}
+        size="xs"
+        mb="xs"
+        value={searchValue}
+        onChange={(e) => setSearchValue(e.currentTarget.value)}
+      />
+
+      {isLoading ? (
+        <div style={{ display: "flex", justifyContent: "center", padding: 16 }}>
+          <Loader size="sm" />
+        </div>
+      ) : chats.length === 0 ? (
+        <Text size="sm" c="dimmed" ta="center" py="md">
+          {isSearching ? t("No chats found") : t("No chat history")}
+        </Text>
+      ) : (
+        <ScrollArea.Autosize mah={300} scrollbars="y">
+          <div className={classes.historyList}>
+            {chats.map((chat) => (
+              <div
+                key={chat.id}
+                className={classes.historyItem}
+                data-active={chat.id === activeChatId || undefined}
+                onClick={() => onSelect(chat.id)}
+              >
+                <span className={classes.historyItemTitle}>
+                  {chat.title || t("Untitled chat")}
+                </span>
+              </div>
+            ))}
+          </div>
+        </ScrollArea.Autosize>
+      )}
+    </div>
+  );
+}

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<string | undefined>(undefined);
+  const [historyOpen, setHistoryOpen] = useState(false);
+  const [contextPages, setContextPages] = useState<PageMention[]>([]);
+  const { pageSlug } = useParams();
+  const slugId = extractPageSlugId(pageSlug);
+  const { data: page } = usePageQuery({ pageId: slugId });
+
+  const chatInfoQuery = useChatInfoQuery(chatId);
+  const {
+    messages,
+    streamingContent,
+    streamingToolCalls,
+    isStreaming,
+    error,
+    sendMessage,
+    stopGeneration,
+    hydrateFromServer,
+  } = useChatStream(chatId, {
+    onChatCreated: (newChatId) => {
+      setChatId(newChatId);
+    },
+  });
+
+  useEffect(() => {
+    if (page && !chatId) {
+      setContextPages([{ id: page.id, title: page.title || "", slugId: page.slugId }]);
+    }
+  }, [page, chatId]);
+
+  const handleRemoveContextPage = useCallback((pageId: string) => {
+    setContextPages((prev) => prev.filter((p) => p.id !== pageId));
+  }, []);
+
+  useEffect(() => {
+    if (chatInfoQuery.data?.messages) {
+      hydrateFromServer(chatInfoQuery.data.messages);
+    }
+  }, [chatInfoQuery.data, hydrateFromServer]);
+
+  // Drop the open chatId if the current user lost access to it (404/403 on
+  // the info fetch). Reverts the panel to a fresh chat instead of presenting
+  // an input tied to a chat the user does not own.
+  useEffect(() => {
+    if (chatId && chatInfoQuery.isError) {
+      setChatId(undefined);
+    }
+  }, [chatId, chatInfoQuery.isError]);
+
+  const handleNewChat = useCallback(
+    (event: React.MouseEvent<HTMLAnchorElement>) => {
+      if (
+        event.button !== 0 ||
+        event.ctrlKey ||
+        event.metaKey ||
+        event.shiftKey
+      ) {
+        return;
+      }
+      event.preventDefault();
+      setChatId(undefined);
+      if (page) {
+        setContextPages([
+          { id: page.id, title: page.title || "", slugId: page.slugId },
+        ]);
+      }
+    },
+    [page],
+  );
+
+  const handleSelectChat = useCallback((selectedChatId: string) => {
+    setChatId(selectedChatId);
+    setHistoryOpen(false);
+  }, []);
+
+  const handleExpand = useCallback(() => {
+    if (chatId) {
+      navigate(`/ai/chat/${chatId}`);
+    } else {
+      navigate("/ai");
+    }
+    setAsideState({ tab: "", isAsideOpen: false });
+  }, [chatId, navigate, setAsideState]);
+
+  const handleClose = useCallback(() => {
+    setAsideState({ tab: "", isAsideOpen: false });
+  }, [setAsideState]);
+
+  const handleSend = useCallback(
+    (content: string, mentions: PageMention[], attachments: ChatAttachment[]) => {
+      const contextPageId = contextPages.length > 0 ? contextPages[0].id : undefined;
+      sendMessage(content, mentions, attachments, contextPageId);
+    },
+    [sendMessage, contextPages],
+  );
+
+  const handleQuickAction = useCallback(
+    (prompt: string) => {
+      handleSend(prompt, [], []);
+    },
+    [handleSend],
+  );
+
+  const hasMessages = messages.length > 0 || isStreaming;
+
+  const quickActions: QuickAction[] = [
+    { icon: <IconFileText size={16} />, label: t("Summarize this page"), prompt: "Summarize this page" },
+    { icon: <IconLanguage size={16} />, label: t("Translate this page"), prompt: "Translate this page" },
+    { icon: <IconSearch size={16} />, label: t("Analyze for insights"), prompt: "Analyze this page for insights" },
+  ];
+
+  return (
+    <div className={classes.panel}>
+      <div className={classes.toolbar}>
+        <Popover
+          opened={historyOpen}
+          onChange={setHistoryOpen}
+          position="bottom-start"
+          width={280}
+          shadow="md"
+        >
+          <Popover.Target>
+            <UnstyledButton
+              className={classes.titleButton}
+              onClick={() => setHistoryOpen((o) => !o)}
+            >
+              <span className={classes.titleText}>
+                {chatInfoQuery.data?.chat?.title || t("New chat")}
+              </span>
+              <IconChevronDown size={16} stroke={1.75} />
+            </UnstyledButton>
+          </Popover.Target>
+          <Popover.Dropdown>
+            <AsideChatHistory activeChatId={chatId} onSelect={handleSelectChat} />
+          </Popover.Dropdown>
+        </Popover>
+
+        <div className={classes.toolbarSpacer} />
+
+        <Tooltip label={t("New chat")} openDelay={250}>
+          <ActionIcon
+            component="a"
+            href="/ai"
+            variant="subtle"
+            color="dark"
+            onClick={handleNewChat}
+          >
+            <IconPlus size={20} stroke={1.75} />
+          </ActionIcon>
+        </Tooltip>
+
+        <Tooltip label={t("Open full page")} openDelay={250}>
+          <ActionIcon variant="subtle" color="dark" onClick={handleExpand}>
+            <IconArrowsDiagonal size={18} stroke={1.5} />
+          </ActionIcon>
+        </Tooltip>
+
+        <Tooltip label={t("Close")} openDelay={250}>
+          <ActionIcon variant="subtle" color="dark" onClick={handleClose}>
+            <IconX size={20} stroke={1.75} />
+          </ActionIcon>
+        </Tooltip>
+      </div>
+
+      {error && (
+        <div
+          style={{
+            padding: "var(--mantine-spacing-xs) var(--mantine-spacing-sm)",
+            color: "var(--mantine-color-red-6)",
+            fontSize: "var(--mantine-font-size-xs)",
+          }}
+        >
+          {error}
+        </div>
+      )}
+
+      {hasMessages ? (
+        <>
+          <div className={classes.messages} data-aside-chat>
+            <ChatMessageList
+              messages={messages}
+              isStreaming={isStreaming}
+              streamingContent={streamingContent}
+              streamingToolCalls={streamingToolCalls}
+            />
+          </div>
+        </>
+      ) : (
+        <div className={classes.emptyState}>
+          <IconSparkles size={36} stroke={1.5} className={classes.emptyStateIcon} />
+          <div className={classes.emptyStateTitle}>{t("How can I help you today?")}</div>
+          <div className={classes.quickActions}>
+            {quickActions.map((action) => (
+              <button
+                key={action.label}
+                type="button"
+                className={classes.quickAction}
+                onClick={() => handleQuickAction(action.prompt)}
+              >
+                <span className={classes.quickActionIcon}>{action.icon}</span>
+                {action.label}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      <div className={classes.inputArea}>
+        <ChatInput
+          isStreaming={isStreaming}
+          onSend={handleSend}
+          onStop={stopGeneration}
+          placeholder={t("Ask anything...")}
+          autofocus={false}
+          contextPages={contextPages}
+          onRemoveContextPage={handleRemoveContextPage}
+          variant="flat"
+          chatId={chatId}
+        />
+      </div>
+    </div>
+  );
+}

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: <IconSearch size={16} />,
+    text: "Search across all pages",
+    prompt: "Search for pages about ",
+  },
+  {
+    icon: <IconFilePlus size={16} />,
+    text: "Create a new page",
+    prompt: "Create a new page titled ",
+  },
+  {
+    icon: <IconFileText size={16} />,
+    text: "Summarize a page",
+    prompt: "Summarize the page @",
+  },
+  {
+    icon: <IconEdit size={16} />,
+    text: "Update page content",
+    prompt: "Update the page @",
+  },
+];
+
+type Props = {
+  isStreaming: boolean;
+  onSend: (content: string, mentions: PageMention[], attachments: ChatAttachment[]) => void;
+  onStop: () => void;
+};
+
+export default function ChatEmptyState({ isStreaming, onSend, onStop }: Props) {
+  const { t } = useTranslation();
+
+  const handleSuggestionClick = (prompt: string) => {
+    onSend(prompt, [], []);
+  };
+
+  return (
+    <div className={classes.emptyState}>
+      <IconSparkles size={48} stroke={1.5} className={classes.emptyStateIcon} />
+      <div className={classes.emptyStateBrand}>{t("Docmost AI")}</div>
+      <div className={classes.emptyStateTitle}>
+        {t("What can I help you with?")}
+      </div>
+
+      <div className={classes.emptyStateInput}>
+        <ChatInput
+          isStreaming={isStreaming}
+          onSend={onSend}
+          onStop={onStop}
+          placeholder="Ask anything... Use @ to mention pages"
+          autofocus
+        />
+      </div>
+
+      <div className={classes.suggestionsSection}>
+        <div className={classes.suggestionsLabel}>Get started</div>
+        <div className={classes.suggestionsGrid}>
+          {SUGGESTIONS.map((s) => (
+            <button
+              key={s.text}
+              type="button"
+              className={classes.suggestionCard}
+              onClick={() => handleSuggestionClick(s.prompt)}
+            >
+              <span className={classes.suggestionIcon}>{s.icon}</span>
+              <span className={classes.suggestionText}>{s.text}</span>
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

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<string>();
+
+  function walk(node: any) {
+    if (node.type === "mention" && node.attrs?.entityType === "page" && node.attrs?.entityId) {
+      if (!seen.has(node.attrs.entityId)) {
+        seen.add(node.attrs.entityId);
+        mentions.push({
+          id: node.attrs.entityId,
+          title: node.attrs.label || "",
+          slugId: node.attrs.slugId || "",
+        });
+      }
+    }
+    if (node.content) {
+      for (const child of node.content) {
+        walk(child);
+      }
+    }
+  }
+
+  walk(json);
+  return mentions;
+}
+
+function editorJsonToText(json: any): string {
+  let text = "";
+
+  function walk(node: any) {
+    if (node.type === "text") {
+      text += node.text || "";
+    } else if (node.type === "mention") {
+      text += `@${node.attrs?.label || ""}`;
+    } else if (node.type === "paragraph") {
+      if (text.length > 0) text += "\n";
+      if (node.content) {
+        for (const child of node.content) {
+          walk(child);
+        }
+      }
+      return;
+    }
+    if (node.content) {
+      for (const child of node.content) {
+        walk(child);
+      }
+    }
+  }
+
+  walk(json);
+  return text;
+}
+
+export default function ChatInput({
+  isStreaming,
+  onSend,
+  onStop,
+  placeholder,
+  autofocus = true,
+  contextPages,
+  onRemoveContextPage,
+  variant = "card",
+  showDisclaimer = true,
+  chatId,
+}: Props) {
+  const chatIdRef = useRef(chatId);
+  chatIdRef.current = chatId;
+  const { t } = useTranslation();
+  const [isEmpty, setIsEmpty] = useState(true);
+  const [pendingAttachments, setPendingAttachments] = useState<PendingAttachment[]>([]);
+  const [plusMenuOpen, setPlusMenuOpen] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const onSendRef = useRef(onSend);
+  onSendRef.current = onSend;
+
+  const handleFileSelect = useCallback(async (files: FileList | null) => {
+    if (!files?.length) return;
+
+    const room = MAX_ATTACHMENTS_PER_MESSAGE - pendingAttachments.length;
+    if (room <= 0) {
+      notifications.show({
+        color: "yellow",
+        message: t("You can attach up to {{max}} files per message.", {
+          max: MAX_ATTACHMENTS_PER_MESSAGE,
+        }),
+      });
+      if (fileInputRef.current) fileInputRef.current.value = "";
+      return;
+    }
+
+    const incoming = Array.from(files);
+    const accepted = incoming.slice(0, room);
+
+    if (incoming.length > accepted.length) {
+      notifications.show({
+        color: "yellow",
+        message: t(
+          "Only the first {{n}} file(s) were added (max {{max}} per message).",
+          { n: accepted.length, max: MAX_ATTACHMENTS_PER_MESSAGE },
+        ),
+      });
+    }
+
+    for (const file of accepted) {
+      const tempId = `uploading-${Date.now()}-${Math.random()}`;
+      const ext = file.name.split(".").pop()?.toLowerCase() || "";
+
+      const placeholder: PendingAttachment = {
+        id: tempId,
+        fileName: file.name,
+        fileExt: ext,
+        fileSize: file.size,
+        mimeType: file.type,
+        uploading: true,
+      };
+
+      setPendingAttachments((prev) => [...prev, placeholder]);
+
+      try {
+        const uploaded = await uploadChatFile(file, chatIdRef.current);
+        setPendingAttachments((prev) =>
+          prev.map((a) =>
+            a.id === tempId ? { ...uploaded, uploading: false } : a,
+          ),
+        );
+      } catch {
+        setPendingAttachments((prev) => prev.filter((a) => a.id !== tempId));
+      }
+    }
+
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  }, [pendingAttachments.length, t]);
+
+  const removeAttachment = useCallback((id: string) => {
+    setPendingAttachments((prev) => prev.filter((a) => a.id !== id));
+  }, []);
+
+  const handleSubmit = useCallback(() => {
+    if (!editor || isStreaming) return;
+    const json = editor.getJSON();
+    const text = editorJsonToText(json).trim();
+    const readyAttachments = pendingAttachments.filter((a) => !a.uploading);
+    if (!text && readyAttachments.length === 0) return;
+
+    const mentions = extractMentions(json);
+    onSendRef.current(text, mentions, readyAttachments);
+    editor.commands.clearContent();
+    editor.commands.focus();
+    setPendingAttachments([]);
+  }, [isStreaming, pendingAttachments]);
+
+  const handleSubmitRef = useRef(handleSubmit);
+  handleSubmitRef.current = handleSubmit;
+
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure({
+        gapcursor: false,
+        dropcursor: false,
+        link: false,
+      }),
+      Placeholder.configure({
+        placeholder: placeholder || "Ask anything... Use @ to mention pages",
+      }),
+      CharacterCount.configure({
+        limit: 50000,
+      }),
+      LinkExtension,
+      EmojiCommand,
+      Mention.configure({
+        suggestion: {
+          allowSpaces: true,
+          items: () => [],
+          // @ts-ignore
+          render: mentionRenderItems,
+        },
+        HTMLAttributes: {
+          class: "mention",
+        },
+      }).extend({
+        addNodeView() {
+          this.editor.isInitialized = true;
+          return ReactNodeViewRenderer(MentionView);
+        },
+      }),
+    ],
+    editorProps: {
+      handleDOMEvents: {
+        keydown: (_view, event) => {
+          if (
+            ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Enter"].includes(
+              event.key,
+            )
+          ) {
+            const emojiCommand = document.querySelector("#emoji-command");
+            const mentionPopup = document.querySelector("#mention");
+            if (emojiCommand || mentionPopup) {
+              return true;
+            }
+          }
+
+          if (event.key === "Enter" && !event.shiftKey) {
+            event.preventDefault();
+            handleSubmitRef.current();
+            return true;
+          }
+        },
+      },
+    },
+    content: "",
+    editable: true,
+    immediatelyRender: true,
+    shouldRerenderOnTransaction: false,
+    autofocus: autofocus ? "end" : false,
+    onUpdate: ({ editor: e }) => {
+      setIsEmpty(!e.getText().trim());
+    },
+  });
+
+  useEffect(() => {
+    if (editor && autofocus) {
+      editor.commands.focus();
+    }
+  }, [editor]);
+
+  const hasContent = !isEmpty || pendingAttachments.some((a) => !a.uploading) || (contextPages?.length ?? 0) > 0;
+
+  const wrapperClass = variant === "flat" ? classes.inputWrapperFlat : classes.inputWrapper;
+
+  return (
+    <>
+    <div className={wrapperClass} data-chat-input>
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept={ACCEPTED_FILE_TYPES}
+        multiple
+        style={{ display: "none" }}
+        onChange={(e) => handleFileSelect(e.target.files)}
+      />
+
+      {((contextPages?.length ?? 0) > 0 || pendingAttachments.length > 0) && (
+        <div className={classes.attachmentChips}>
+          {contextPages?.map((page) => (
+            <div key={page.id} className={classes.attachmentChip}>
+              <IconFileText size={14} />
+              <span className={classes.attachmentChipName}>
+                {page.title || "Untitled"}
+              </span>
+              {onRemoveContextPage && (
+                <button
+                  type="button"
+                  className={classes.attachmentChipRemove}
+                  onClick={() => onRemoveContextPage(page.id)}
+                  aria-label={`Remove ${page.title}`}
+                >
+                  <IconX size={12} />
+                </button>
+              )}
+            </div>
+          ))}
+          {pendingAttachments.map((attachment) => (
+            <div
+              key={attachment.id}
+              className={`${classes.attachmentChip} ${attachment.uploading ? classes.attachmentChipUploading : ""}`}
+            >
+              {IMAGE_EXTENSIONS.includes(attachment.fileExt) ? (
+                <IconPhoto size={14} />
+              ) : (
+                <IconFile size={14} />
+              )}
+              <span className={classes.attachmentChipName}>
+                {attachment.fileName}
+              </span>
+              {!attachment.uploading && (
+                <button
+                  type="button"
+                  className={classes.attachmentChipRemove}
+                  onClick={() => removeAttachment(attachment.id)}
+                  aria-label={`Remove ${attachment.fileName}`}
+                >
+                  <IconX size={12} />
+                </button>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+
+      <EditorContent editor={editor} className={classes.editorContent} />
+      <div className={classes.actions}>
+        <Popover opened={plusMenuOpen} onChange={setPlusMenuOpen} position="top-start" width={220} shadow="md">
+          <Popover.Target>
+            <button
+              type="button"
+              className={classes.plusButton}
+              onClick={() => setPlusMenuOpen((o) => !o)}
+              aria-label="Add content"
+            >
+              <IconPlus size={14} />
+            </button>
+          </Popover.Target>
+          <Popover.Dropdown p={4}>
+            <button
+              type="button"
+              className={classes.plusMenuItem}
+              onClick={() => {
+                fileInputRef.current?.click();
+                setPlusMenuOpen(false);
+              }}
+              disabled={pendingAttachments.length >= MAX_ATTACHMENTS_PER_MESSAGE}
+              title={
+                pendingAttachments.length >= MAX_ATTACHMENTS_PER_MESSAGE
+                  ? t("Max {{max}} files per message", {
+                      max: MAX_ATTACHMENTS_PER_MESSAGE,
+                    })
+                  : undefined
+              }
+            >
+              <IconPaperclip size={16} className={classes.plusMenuIcon} />
+              {t("Add files")}
+            </button>
+            <button
+              type="button"
+              className={classes.plusMenuItem}
+              onClick={() => {
+                editor?.commands.insertContent("@");
+                editor?.commands.focus();
+                setPlusMenuOpen(false);
+              }}
+            >
+              <IconAt size={16} className={classes.plusMenuIcon} />
+              Mention a page
+            </button>
+          </Popover.Dropdown>
+        </Popover>
+
+        <div style={{ flex: 1 }} />
+
+        {isStreaming ? (
+          <button
+            type="button"
+            className={classes.stopButton}
+            onClick={onStop}
+            aria-label="Stop generation"
+          >
+            <IconPlayerStopFilled size={14} />
+          </button>
+        ) : (
+          <button
+            type="button"
+            className={classes.sendButton}
+            onClick={handleSubmit}
+            disabled={!hasContent}
+            aria-label="Send message"
+          >
+            <IconArrowUp size={16} stroke={2.5} />
+          </button>
+        )}
+      </div>
+    </div>
+    {showDisclaimer && (
+      <div className={classes.disclaimer}>
+        {t("AI-generated content may not be accurate.")}
+      </div>
+    )}
+    </>
+  );
+}

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 (
+    <div className={classes.messageErrorFallback}>
+      <IconAlertTriangle size={14} />
+      <span>{t("Failed to render this message.")}</span>
+    </div>
+  );
+}
+
+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<HTMLDivElement>(null);
+  const bottomRef = useRef<HTMLDivElement>(null);
+  const isAtBottomRef = useRef(true);
+  const isAutoScrollingRef = useRef(false);
+  const prevScrollTopRef = useRef(0);
+  const [showScrollButton, setShowScrollButton] = useState(false);
+
+  const scrollToBottom = useCallback((behavior: ScrollBehavior = "smooth") => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    isAutoScrollingRef.current = true;
+    const target = container.scrollHeight - container.clientHeight;
+    container.scrollTo({ top: target, behavior });
+    prevScrollTopRef.current = target;
+    isAtBottomRef.current = true;
+    setShowScrollButton(false);
+
+    if (behavior === "smooth") {
+      setTimeout(() => {
+        isAutoScrollingRef.current = false;
+        if (containerRef.current) {
+          prevScrollTopRef.current = containerRef.current.scrollTop;
+        }
+      }, SMOOTH_SCROLL_SETTLE_MS);
+    } else {
+      isAutoScrollingRef.current = false;
+    }
+  }, []);
+
+  const handleScroll = useCallback(() => {
+    if (isAutoScrollingRef.current) return;
+
+    const container = containerRef.current;
+    if (!container) return;
+
+    const currentScrollTop = container.scrollTop;
+    const scrolledUp =
+      currentScrollTop < prevScrollTopRef.current - SCROLL_UP_THRESHOLD_PX;
+    prevScrollTopRef.current = currentScrollTop;
+
+    const distanceFromBottom =
+      container.scrollHeight - currentScrollTop - container.clientHeight;
+    const atBottom = distanceFromBottom <= BOTTOM_THRESHOLD_PX;
+
+    if (scrolledUp) {
+      isAtBottomRef.current = atBottom;
+    } else if (atBottom) {
+      isAtBottomRef.current = true;
+    }
+
+    setShowScrollButton(!atBottom);
+  }, []);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    container.addEventListener("scroll", handleScroll, { passive: true });
+    return () => container.removeEventListener("scroll", handleScroll);
+  }, [handleScroll]);
+
+  // Instant scroll during streaming to keep up with rapid updates
+  useEffect(() => {
+    if (isAtBottomRef.current) {
+      scrollToBottom("instant");
+    }
+  }, [streamingContent, streamingToolCalls.length, scrollToBottom]);
+
+  // Smooth scroll for new messages. Always force-scroll when the latest
+  // message is from the user (they just sent it), even if they were reading
+  // scrollback.
+  useEffect(() => {
+    const lastMessage = messages[messages.length - 1];
+    const lastIsUser = lastMessage?.role === "user";
+    if (lastIsUser || isAtBottomRef.current) {
+      scrollToBottom("smooth");
+      return;
+    }
+
+    // No auto-scroll: recompute from actual layout so that chat switches to
+    // content that doesn't overflow correctly hide the button even when no
+    // scroll event fires.
+    const container = containerRef.current;
+    if (!container) return;
+    const distanceFromBottom =
+      container.scrollHeight - container.scrollTop - container.clientHeight;
+    const atBottom = distanceFromBottom <= BOTTOM_THRESHOLD_PX;
+    isAtBottomRef.current = atBottom;
+    setShowScrollButton(!atBottom);
+  }, [messages, scrollToBottom]);
+
+  return (
+    <div className={classes.messageListWrapper}>
+      <div ref={containerRef} className={classes.messageList}>
+        {messages.map((msg) => (
+          <ErrorBoundary
+            key={msg.id}
+            fallback={<ChatMessageErrorFallback />}
+          >
+            <ChatMessage message={msg} />
+          </ErrorBoundary>
+        ))}
+        {isStreaming && (
+          <ErrorBoundary
+            resetKeys={[streamingContent, streamingToolCalls.length]}
+            fallback={<ChatMessageErrorFallback />}
+          >
+            <ChatMessage
+              message={{
+                id: "streaming",
+                chatId: "",
+                role: "assistant",
+                content: null,
+                toolCalls: null,
+                metadata: null,
+                createdAt: new Date().toISOString(),
+              }}
+              isStreaming
+              streamingContent={streamingContent}
+              streamingToolCalls={streamingToolCalls}
+            />
+          </ErrorBoundary>
+        )}
+        <div ref={bottomRef} />
+      </div>
+      {showScrollButton && (
+        <button
+          type="button"
+          aria-label="Scroll to bottom"
+          className={classes.scrollToBottomButton}
+          onClick={() => scrollToBottom("smooth")}
+        >
+          <IconArrowDown size={16} stroke={2} />
+        </button>
+      )}
+    </div>
+  );
+}

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<HTMLDivElement>) => {
+      const target = e.target as HTMLElement;
+      const anchor = target.closest("a");
+      if (!anchor) return;
+
+      const href = anchor.getAttribute("href");
+      if (href && (href.startsWith("/s/") || href.startsWith("/p/"))) {
+        e.preventDefault();
+        navigate(href);
+      }
+    },
+    [navigate],
+  );
+
+  if (message.role === "tool") return null;
+
+  const isUser = message.role === "user";
+  const content = isStreaming ? streamingContent : message.content;
+  const toolCalls = isStreaming ? streamingToolCalls : message.toolCalls;
+
+  if (isUser) {
+    const displayContent = (content || "").replace(
+      /\n\n<referenced_pages>[\s\S]*<\/referenced_pages>$/,
+      "",
+    );
+    const attachments =
+      (message.metadata?.attachments as {
+        id: string;
+        fileName: string;
+        fileExt: string;
+      }[]) || [];
+
+    return (
+      <div className={classes.userMessage}>
+        <div className={classes.userBubble}>
+          {attachments.length > 0 && (
+            <div className={classes.messageAttachments}>
+              {attachments.map((a) => (
+                <span key={a.id} className={classes.messageAttachmentChip}>
+                  {IMAGE_EXTENSIONS.includes(a.fileExt) ? (
+                    <IconPhoto size={13} />
+                  ) : (
+                    <IconFile size={13} />
+                  )}
+                  {a.fileName}
+                </span>
+              ))}
+            </div>
+          )}
+          {displayContent}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={classes.assistantMessage}>
+      <div className={classes.messageContent}>
+        {toolCalls && toolCalls.length > 0 && (
+          <ChatToolGroup toolCalls={toolCalls} isStreaming={isStreaming} />
+        )}
+        {content && (
+          <div
+            onClick={handleContentClick}
+            dangerouslySetInnerHTML={{
+              __html: chatSanitizer.sanitize(
+                markdownToHtml(content) as string,
+                { ADD_ATTR: ["target", "rel"] },
+              ),
+            }}
+          />
+        )}
+        {isStreaming && (
+          <>
+            {!content && (
+              <span className={classes.processingIndicator}>
+                <IconLoader2 size={16} className={classes.processingSpinner} />
+                Thinking
+              </span>
+            )}
+            <span className={classes.streamingCursor} />
+          </>
+        )}
+      </div>
+      {!isStreaming && message.content && (
+        <div className={classes.messageActions}>
+          <CopyTextButton text={message?.content} />
+        </div>
+      )}
+    </div>
+  );
+}

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 (
+    <div className={classes.toolGroup}>
+      <div
+        className={classes.toolGroupHeader}
+        onClick={() => setExpanded((prev) => !prev)}
+      >
+        {activeLabel ? (
+          <IconLoader2 size={12} className={classes.processingSpinner} />
+        ) : expanded ? (
+          <IconChevronDown size={12} />
+        ) : (
+          <IconChevronRight size={12} />
+        )}
+        <span className={classes.toolGroupLabel}>
+          {activeLabel ? `${activeLabel}…` : `Steps ${toolCalls.length}`}
+        </span>
+      </div>
+      {expanded && (
+        <div className={classes.toolGroupSteps}>
+          {toolCalls.map((tc) => (
+            <ChatToolResult key={tc.id} toolCall={tc} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

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<string, string> = {
+  list_spaces: "Listed spaces",
+  search_pages: "Searched pages",
+  get_page: "Read page",
+  create_page: "Created page",
+  update_page: "Updated page",
+};
+
+type Props = {
+  toolCall: AiChatToolCall;
+};
+
+export default function ChatToolResult({ toolCall }: Props) {
+  const [expanded, setExpanded] = useState(false);
+  const label = TOOL_LABELS[toolCall.name] || toolCall.name;
+
+  return (
+    <div className={classes.toolStep}>
+      <div
+        className={classes.toolStepRow}
+        onClick={() => setExpanded((prev) => !prev)}
+      >
+        <span className={classes.toolStepBullet}>·</span>
+        {expanded ? (
+          <IconChevronDown size={12} />
+        ) : (
+          <IconChevronRight size={12} />
+        )}
+        <span>{label}</span>
+      </div>
+      {expanded && (
+        <div className={classes.toolStepDetails}>
+          <pre style={{ margin: 0, whiteSpace: "pre-wrap" }}>
+            {JSON.stringify(
+              { args: toolCall.args, result: toolCall.result },
+              null,
+              2,
+            )}
+          </pre>
+        </div>
+      )}
+    </div>
+  );
+}

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 (
+    <Group justify="space-between" wrap="nowrap" gap="xl">
+      <div>
+        <Group gap="xs" align="center">
+          <Text size="md">{t("AI Chat")}</Text>
+          <Badge color="gray" variant="light" size="sm" radius="sm">
+            {t("Beta")}
+          </Badge>
+        </Group>
+        <Text size="sm" c="dimmed">
+          {t(
+            "Enable AI Chat to allow users to have multi-turn conversations with AI about your workspace content.",
+          )}
+        </Text>
+      </div>
+
+      <AiChatToggle />
+    </Group>
+  );
+}
+
+function AiChatToggle() {
+  const { t } = useTranslation();
+  const [workspace, setWorkspace] = useAtom(workspaceAtom);
+  const [checked, setChecked] = useState(workspace?.settings?.ai?.chat);
+  const hasAccess = useHasFeature(Feature.AI);
+  const upgradeLabel = useUpgradeLabel();
+
+  const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.currentTarget.checked;
+    try {
+      const updatedWorkspace = await updateWorkspace({ aiChat: value } as any);
+      setChecked(value);
+      setWorkspace(updatedWorkspace);
+    } catch (err: any) {
+      notifications.show({
+        message: err?.response?.data?.message,
+        color: "red",
+      });
+    }
+  };
+
+  return (
+    <Tooltip label={upgradeLabel} disabled={hasAccess} refProp="rootRef">
+      <Switch
+        defaultChecked={checked}
+        onChange={handleChange}
+        disabled={!hasAccess}
+        aria-label={t("Toggle AI Chat")}
+      />
+    </Tooltip>
+  );
+}

apps/client/src/ee/ai-chat/hooks/use-chat-stream.ts

@@ -0,0 +1,227 @@
+import { useState, useCallback, useEffect, useRef } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { useNavigate } from "react-router-dom";
+import { sendChatMessage } from "../services/ai-chat-service";
+import type {
+  AiChatMessage,
+  AiChatStreamEvent,
+  AiChatToolCall,
+  ChatAttachment,
+  PageMention,
+} from "../types/ai-chat.types";
+
+type ChatStreamOptions = {
+  onChatCreated?: (chatId: string) => void;
+};
+
+export function useChatStream(
+  chatId: string | undefined,
+  options?: ChatStreamOptions,
+) {
+  const [messages, setMessages] = useState<AiChatMessage[]>([]);
+  const [streamingContent, setStreamingContent] = useState("");
+  const [streamingToolCalls, setStreamingToolCalls] = useState<AiChatToolCall[]>(
+    [],
+  );
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [errorCode, setErrorCode] = useState<string | null>(null);
+  const [isRetryable, setIsRetryable] = useState(false);
+  const abortRef = useRef<AbortController | null>(null);
+  const queryClient = useQueryClient();
+  const navigate = useNavigate();
+  const currentChatIdRef = useRef(chatId);
+  currentChatIdRef.current = chatId;
+  // Tracks which chatId the local `messages` state currently represents.
+  // Set when we seed from a server fetch AND when we optimistically own a
+  // freshly-created chat after `chat_created`. This is the single authority
+  // marker that keeps server-state effects from clobbering in-flight streams.
+  const hydratedChatIdRef = useRef<string | undefined>(undefined);
+
+  // Reset local state when the consumer switches to a different chat.
+  // Skip the reset if the new chatId is one the hook itself already claimed
+  // during a new-chat flow — in that case our optimistic state is the truth.
+  useEffect(() => {
+    if (chatId && chatId === hydratedChatIdRef.current) return;
+    hydratedChatIdRef.current = undefined;
+    setMessages([]);
+    setError(null);
+    setErrorCode(null);
+    setIsRetryable(false);
+  }, [chatId]);
+
+  const hydrateFromServer = useCallback((msgs: AiChatMessage[]) => {
+    const forId = currentChatIdRef.current;
+    if (!forId) return;
+    if (hydratedChatIdRef.current === forId) return;
+    hydratedChatIdRef.current = forId;
+    setMessages(msgs);
+  }, []);
+
+  const sendMessage = useCallback(
+    (content: string, mentions: PageMention[] = [], attachments: ChatAttachment[] = [], contextPageId?: string) => {
+      if (isStreaming || (!content.trim() && attachments.length === 0)) return;
+
+      setError(null);
+      setErrorCode(null);
+      setIsRetryable(false);
+      setIsStreaming(true);
+      setStreamingContent("");
+      setStreamingToolCalls([]);
+
+      const metadata: Record<string, unknown> = {};
+      if (mentions.length) {
+        metadata.mentionedPageIds = mentions.map((m) => m.id);
+      }
+      if (attachments.length) {
+        metadata.attachments = attachments.map((a) => ({
+          id: a.id,
+          fileName: a.fileName,
+          fileExt: a.fileExt,
+        }));
+      }
+
+      const userMessage: AiChatMessage = {
+        id: `temp-${Date.now()}`,
+        chatId: currentChatIdRef.current || "",
+        role: "user",
+        content,
+        toolCalls: null,
+        metadata: Object.keys(metadata).length ? metadata : null,
+        createdAt: new Date().toISOString(),
+      };
+
+      setMessages((prev) => [...prev, userMessage]);
+
+      const attachmentIds = attachments.map((a) => a.id);
+
+      const abortController = sendChatMessage(
+        {
+          chatId: currentChatIdRef.current,
+          content,
+          mentionedPageIds: mentions.map((m) => m.id),
+          ...(contextPageId && { contextPageId }),
+          ...(attachmentIds.length && { attachmentIds }),
+        },
+        (event: AiChatStreamEvent) => {
+          switch (event.type) {
+            case "chat_created":
+              currentChatIdRef.current = event.chatId;
+              // Claim authority over this new chatId so when the consumer's
+              // prop catches up via navigation/onChatCreated, the reset effect
+              // sees a match and preserves our optimistic messages.
+              hydratedChatIdRef.current = event.chatId;
+              if (options?.onChatCreated) {
+                options.onChatCreated(event.chatId);
+              } else {
+                navigate(`/ai/chat/${event.chatId}`, { replace: true });
+              }
+              queryClient.invalidateQueries({ queryKey: ["ai-chats"] });
+              break;
+            case "content":
+              setStreamingContent((prev) => prev + event.text);
+              break;
+            case "tool_call":
+              setStreamingToolCalls((prev) => [
+                ...prev,
+                {
+                  id: event.id,
+                  name: event.name,
+                  args: event.args,
+                },
+              ]);
+              break;
+            case "tool_result":
+              setStreamingToolCalls((prev) =>
+                prev.map((tc) =>
+                  tc.id === event.id ? { ...tc, result: event.result } : tc,
+                ),
+              );
+              break;
+            case "done": {
+              setStreamingContent((currentContent) => {
+                setStreamingToolCalls((currentToolCalls) => {
+                  const assistantMessage: AiChatMessage = {
+                    id: event.messageId,
+                    chatId: currentChatIdRef.current || "",
+                    role: "assistant",
+                    content: currentContent || null,
+                    toolCalls: currentToolCalls.length
+                      ? currentToolCalls
+                      : null,
+                    metadata: event.usage ? { tokenUsage: event.usage } : null,
+                    createdAt: new Date().toISOString(),
+                  };
+
+                  setMessages((prev) => [...prev, assistantMessage]);
+                  return [];
+                });
+                return "";
+              });
+              setIsStreaming(false);
+              queryClient.invalidateQueries({
+                queryKey: ["ai-chat", currentChatIdRef.current],
+              });
+              break;
+            }
+            case "error":
+              setError(event.message);
+              setErrorCode(event.code || null);
+              setIsRetryable(event.retryable || false);
+              setIsStreaming(false);
+              break;
+          }
+        },
+        (errorMsg) => {
+          setError(errorMsg);
+          setIsStreaming(false);
+        },
+        () => {
+          setIsStreaming(false);
+        },
+      );
+
+      abortRef.current = abortController;
+    },
+    [isStreaming, navigate, queryClient],
+  );
+
+  const stopGeneration = useCallback(() => {
+    abortRef.current?.abort();
+    abortRef.current = null;
+
+    setStreamingContent((currentContent) => {
+      setStreamingToolCalls((currentToolCalls) => {
+        if (currentContent || currentToolCalls.length > 0) {
+          const partialMessage: AiChatMessage = {
+            id: `stopped-${Date.now()}`,
+            chatId: currentChatIdRef.current || "",
+            role: "assistant",
+            content: currentContent || null,
+            toolCalls: currentToolCalls.length ? currentToolCalls : null,
+            metadata: null,
+            createdAt: new Date().toISOString(),
+          };
+          setMessages((prev) => [...prev, partialMessage]);
+        }
+        return [];
+      });
+      return "";
+    });
+
+    setIsStreaming(false);
+  }, []);
+
+  return {
+    messages,
+    streamingContent,
+    streamingToolCalls,
+    isStreaming,
+    error,
+    errorCode,
+    isRetryable,
+    sendMessage,
+    stopGeneration,
+    hydrateFromServer,
+  };
+}

apps/client/src/ee/ai-chat/pages/ai-chat.tsx

@@ -0,0 +1,39 @@
+import { useParams } from "react-router-dom";
+import { ErrorBoundary } from "react-error-boundary";
+import { Button } from "@mantine/core";
+import { IconAlertTriangle } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import AiChatLayout from "../components/ai-chat-layout";
+import { EmptyState } from "@/components/ui/empty-state.tsx";
+import classes from "../styles/ai-chat.module.css";
+
+export default function AiChat() {
+  const { t } = useTranslation();
+  const { chatId } = useParams<{ chatId: string }>();
+
+  return (
+    <div className={classes.layout}>
+      <ErrorBoundary
+        resetKeys={[chatId]}
+        fallbackRender={({ resetErrorBoundary }) => (
+          <EmptyState
+            icon={IconAlertTriangle}
+            title={t("Failed to load chat. An error occurred.")}
+            action={
+              <Button
+                variant="default"
+                size="sm"
+                mt="xs"
+                onClick={resetErrorBoundary}
+              >
+                {t("Try again")}
+              </Button>
+            }
+          />
+        )}
+      >
+        <AiChatLayout />
+      </ErrorBoundary>
+    </div>
+  );
+}

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,
+  });
+}

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<AiChat> {
+  const req = await api.post<AiChat>("/ai/chats/create");
+  return req.data;
+}
+
+export async function listChats(params?: {
+  limit?: number;
+  cursor?: string;
+}): Promise<IPagination<AiChat>> {
+  const req = await api.post("/ai/chats", params);
+  return req.data;
+}
+
+export async function getChatInfo(
+  chatId: string,
+): Promise<{ chat: AiChat; messages: AiChatMessage[] }> {
+  const req = await api.post("/ai/chats/info", { chatId });
+  return req.data;
+}
+
+export async function deleteChat(chatId: string): Promise<void> {
+  await api.post("/ai/chats/delete", { chatId });
+}
+
+export async function updateChatTitle(
+  chatId: string,
+  title: string,
+): Promise<void> {
+  await api.post("/ai/chats/update", { chatId, title });
+}
+
+export async function searchChats(query: string): Promise<AiChat[]> {
+  const req = await api.post("/ai/chats/search", { query });
+  return req.data;
+}
+
+export async function uploadChatFile(
+  file: File,
+  chatId?: string,
+): Promise<ChatAttachment> {
+  const formData = new FormData();
+  formData.append("file", file);
+  if (chatId) {
+    formData.append("chatId", chatId);
+  }
+  return await api.post("/ai/chats/upload", formData, {
+    headers: { "Content-Type": "multipart/form-data" },
+  });
+}
+
+export function sendChatMessage(
+  params: {
+    chatId?: string;
+    content: string;
+    mentionedPageIds?: string[];
+    contextPageId?: string;
+    attachmentIds?: string[];
+  },
+  onEvent: (event: AiChatStreamEvent) => void,
+  onError?: (error: string) => void,
+  onComplete?: () => void,
+): AbortController {
+  const abortController = new AbortController();
+
+  (async () => {
+    try {
+      const response = await fetch("/api/ai/chats/send", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(params),
+        signal: abortController.signal,
+        credentials: "include",
+      });
+
+      if (!response.ok) {
+        const errorBody = await response.text();
+        let errorMessage = `HTTP error ${response.status}`;
+        try {
+          const parsed = JSON.parse(errorBody);
+          errorMessage = parsed.message || errorMessage;
+        } catch {
+          // use default
+        }
+        onError?.(errorMessage);
+        return;
+      }
+
+      const reader = response.body?.getReader();
+      const decoder = new TextDecoder();
+
+      if (!reader) {
+        onError?.("Response body is not readable");
+        return;
+      }
+
+      let buffer = "";
+      try {
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split("\n");
+          buffer = lines.pop() || "";
+
+          for (const line of lines) {
+            if (line.startsWith("data: ")) {
+              const data = line.slice(6);
+              if (data === "[DONE]") {
+                onComplete?.();
+                return;
+              }
+              try {
+                const parsed = JSON.parse(data) as AiChatStreamEvent;
+                onEvent(parsed);
+              } catch {
+                // Skip invalid JSON
+              }
+            }
+          }
+        }
+      } finally {
+        reader.releaseLock();
+      }
+
+      onComplete?.();
+    } catch (error: any) {
+      if (error.name !== "AbortError") {
+        onError?.(error.message);
+      }
+    }
+  })();
+
+  return abortController;
+}

apps/client/src/ee/ai-chat/styles/ai-chat.module.css

@@ -0,0 +1,169 @@
+.layout {
+  display: flex;
+  height: 100%;
+  width: 100%;
+}
+
+.main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 45px - 2 * var(--mantine-spacing-md));
+  max-width: 900px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.messageListWrapper {
+  flex: 1;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.messageList {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--mantine-spacing-md) var(--mantine-spacing-lg);
+}
+
+.messageErrorFallback {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  margin-bottom: var(--mantine-spacing-lg);
+  border-radius: var(--mantine-radius-sm);
+  background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+  font-size: var(--mantine-font-size-xs);
+}
+
+.scrollToBottomButton {
+  position: absolute;
+  bottom: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  border: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+  background: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+  cursor: pointer;
+  padding: 0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
+  z-index: 2;
+}
+
+.scrollToBottomButton:hover {
+  background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5));
+  border-color: light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-3));
+}
+
+.scrollToBottomButton:active {
+  transform: translateX(-50%) scale(0.95);
+}
+
+.inputArea {
+  padding: var(--mantine-spacing-xs) var(--mantine-spacing-lg) var(--mantine-spacing-lg);
+}
+
+/* Empty state - Notion AI style centered layout */
+.emptyState {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--mantine-spacing-xl) var(--mantine-spacing-lg);
+}
+
+.emptyStateIcon {
+  width: 48px;
+  height: 48px;
+  margin-bottom: var(--mantine-spacing-sm);
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+}
+
+.emptyStateBrand {
+  font-size: var(--mantine-font-size-xs);
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+  margin-bottom: var(--mantine-spacing-xs);
+}
+
+.emptyStateTitle {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: light-dark(var(--mantine-color-gray-8), var(--mantine-color-dark-0));
+  margin-bottom: var(--mantine-spacing-xl);
+  text-align: center;
+}
+
+.emptyStateInput {
+  width: 100%;
+  max-width: 600px;
+  margin-bottom: var(--mantine-spacing-xl);
+  padding: 6px 0;
+}
+
+.suggestionsSection {
+  width: 100%;
+  max-width: 600px;
+}
+
+.suggestionsLabel {
+  font-size: var(--mantine-font-size-xs);
+  font-weight: 500;
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: var(--mantine-spacing-sm);
+}
+
+.suggestionsGrid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--mantine-spacing-sm);
+}
+
+.suggestionCard {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--mantine-spacing-sm);
+  padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);
+  border: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
+  border-radius: var(--mantine-radius-md);
+  cursor: pointer;
+  background: transparent;
+  transition: background-color 150ms, border-color 150ms;
+  text-align: left;
+  width: 100%;
+
+  @mixin hover {
+    background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+    border-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+  }
+}
+
+.suggestionIcon {
+  flex-shrink: 0;
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+  margin-top: 1px;
+}
+
+.suggestionText {
+  font-size: var(--mantine-font-size-sm);
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+  line-height: 1.4;
+}

apps/client/src/ee/ai-chat/styles/aside-chat-panel.module.css

@@ -0,0 +1,139 @@
+.panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 0 var(--mantine-spacing-sm) 0;
+  border-bottom: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
+}
+
+.toolbarSpacer {
+  flex: 1;
+}
+
+.titleButton {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  border-radius: var(--mantine-radius-sm);
+  font-size: var(--mantine-font-size-sm);
+  font-weight: 500;
+  color: light-dark(var(--mantine-color-gray-8), var(--mantine-color-dark-0));
+  max-width: 60%;
+  min-width: 0;
+}
+
+.titleButton:hover {
+  background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-6));
+}
+
+.titleText {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--mantine-spacing-sm) 0;
+  scroll-behavior: smooth;
+}
+
+.inputArea {
+  padding-top: var(--mantine-spacing-sm);
+}
+
+.emptyState {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--mantine-spacing-md);
+  padding: var(--mantine-spacing-xl) var(--mantine-spacing-sm);
+}
+
+.emptyStateIcon {
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
+}
+
+.emptyStateTitle {
+  font-size: var(--mantine-font-size-lg);
+  font-weight: 600;
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+  text-align: center;
+}
+
+.quickActions {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 100%;
+}
+
+.quickAction {
+  display: flex;
+  align-items: center;
+  gap: var(--mantine-spacing-sm);
+  padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
+  border: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
+  border-radius: var(--mantine-radius-md);
+  cursor: pointer;
+  background: transparent;
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+  font-size: var(--mantine-font-size-sm);
+  text-align: left;
+  width: 100%;
+  transition: background-color 150ms, border-color 150ms;
+
+  @mixin hover {
+    background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+    border-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+  }
+}
+
+.quickActionIcon {
+  flex-shrink: 0;
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
+}
+
+.historyList {
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.historyItem {
+  display: flex;
+  align-items: center;
+  padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
+  cursor: pointer;
+  border-radius: var(--mantine-radius-sm);
+  font-size: var(--mantine-font-size-sm);
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+  transition: background-color 150ms;
+
+  @mixin hover {
+    background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+  }
+
+  &[data-active] {
+    background: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
+  }
+}
+
+.historyItemTitle {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

apps/client/src/ee/ai-chat/styles/chat-input.module.css

@@ -0,0 +1,242 @@
+.inputWrapper {
+  position: relative;
+  overflow: hidden;
+  border: 1px solid
+    light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
+  border-radius: 16px;
+  background: light-dark(var(--mantine-color-white), var(--mantine-color-dark-7));
+  box-shadow: light-dark(
+    0 2px 40px 4px rgba(0, 0, 0, 0.07),
+    0 2px 40px 4px rgba(0, 0, 0, 0.5)
+  );
+  transition:
+    border-color 150ms,
+    box-shadow 150ms;
+
+  &:focus-within {
+    border-color: light-dark(
+      var(--mantine-color-gray-3),
+      var(--mantine-color-dark-4)
+    );
+    box-shadow: light-dark(
+      0 4px 48px 6px rgba(0, 0, 0, 0.09),
+      0 4px 48px 6px rgba(0, 0, 0, 0.6)
+    );
+  }
+}
+
+.inputWrapperFlat {
+  position: relative;
+  overflow: hidden;
+  border: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
+  border-radius: 12px;
+  background: light-dark(var(--mantine-color-white), var(--mantine-color-dark-7));
+  box-shadow: none;
+  transition: border-color 150ms;
+
+  &:focus-within {
+    border-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+  }
+}
+
+.disclaimer {
+  margin-top: 6px;
+  text-align: center;
+  font-size: var(--mantine-font-size-xs);
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
+}
+
+.attachmentChips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 10px 14px 0;
+}
+
+.attachmentChip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 8px;
+  border-radius: 8px;
+  background: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-6));
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+  font-size: var(--mantine-font-size-xs);
+  max-width: 200px;
+}
+
+.attachmentChipUploading {
+  opacity: 0.55;
+}
+
+.attachmentChipName {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.attachmentChipRemove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: none;
+  cursor: pointer;
+  padding: 0;
+  margin-left: 2px;
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
+  border-radius: 50%;
+
+  @mixin hover {
+    color: light-dark(var(--mantine-color-gray-8), var(--mantine-color-dark-0));
+  }
+}
+
+.editorContent {
+  overflow: hidden;
+
+  :global(.ProseMirror) {
+    outline: none;
+    border: none;
+    background-color: transparent;
+    padding: 14px 18px 8px;
+    font-size: 15px;
+    line-height: 1.6;
+    max-height: 200px;
+    overflow-y: auto;
+    min-height: 24px;
+    color: light-dark(var(--mantine-color-gray-9), var(--mantine-color-dark-0));
+  }
+
+  :global(.ProseMirror p) {
+    margin-block-start: 0;
+    margin-block-end: 0;
+  }
+
+  :global(.ProseMirror p.is-editor-empty:first-child::before) {
+    color: light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-3));
+    content: attr(data-placeholder);
+    float: left;
+    height: 0;
+    pointer-events: none;
+  }
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 4px 12px 10px;
+  gap: var(--mantine-spacing-xs);
+}
+
+.sendButton {
+  width: 28px;
+  height: 28px;
+  min-width: 28px;
+  min-height: 28px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  cursor: pointer;
+  transition: background-color 150ms, opacity 150ms;
+  background: light-dark(var(--mantine-color-dark-9), var(--mantine-color-gray-0));
+  color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-9));
+
+  &:disabled {
+    opacity: 0.25;
+    cursor: default;
+  }
+
+  @mixin hover {
+    &:not(:disabled) {
+      opacity: 0.85;
+    }
+  }
+}
+
+.attachButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: none;
+  cursor: pointer;
+  padding: 2px;
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
+  transition: color 150ms;
+
+  @mixin hover {
+    color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+  }
+}
+
+.plusButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+  background: none;
+  cursor: pointer;
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
+  transition: color 150ms, background-color 150ms;
+
+  @mixin hover {
+    color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+    background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+  }
+}
+
+.plusMenuItem {
+  display: flex;
+  align-items: center;
+  gap: var(--mantine-spacing-sm);
+  padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
+  border: none;
+  background: none;
+  cursor: pointer;
+  width: 100%;
+  font-size: var(--mantine-font-size-sm);
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+  border-radius: var(--mantine-radius-sm);
+  transition: background-color 150ms;
+
+  @mixin hover {
+    background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+  }
+
+  &:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+    background: none;
+  }
+}
+
+.plusMenuIcon {
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
+}
+
+.stopButton {
+  width: 28px;
+  height: 28px;
+  min-width: 28px;
+  min-height: 28px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+  cursor: pointer;
+  transition: background-color 150ms;
+  background: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+
+  @mixin hover {
+    background: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
+  }
+}

apps/client/src/ee/ai-chat/styles/chat-message.module.css

@@ -0,0 +1,286 @@
+.message {
+  margin-bottom: var(--mantine-spacing-lg);
+}
+
+.userMessage {
+  composes: message;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.userBubble {
+  max-width: 75%;
+  padding: 10px 16px;
+  border-radius: 18px;
+  background: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-6));
+  color: light-dark(var(--mantine-color-gray-9), var(--mantine-color-dark-0));
+  font-size: 15px;
+  line-height: 1.6;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+[data-aside-chat] .userBubble {
+  background: light-dark(var(--mantine-color-white), var(--mantine-color-dark-7));
+  border: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
+}
+
+.userBubble p {
+  margin: 0;
+}
+
+.messageAttachments {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-bottom: 6px;
+}
+
+.messageAttachmentChip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: 6px;
+  background: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-2));
+  font-size: var(--mantine-font-size-xs);
+  max-width: 180px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.assistantMessage {
+  composes: message;
+}
+
+.messageContent {
+  font-size: 15px;
+  line-height: 1.7;
+  color: light-dark(var(--mantine-color-gray-8), var(--mantine-color-dark-1));
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.messageContent p {
+  margin: 0 0 0.75em 0;
+}
+
+.messageContent p:last-child {
+  margin-bottom: 0;
+}
+
+.messageContent ul,
+.messageContent ol {
+  margin: 0.5em 0 0.75em 0;
+  padding-left: 1.5em;
+}
+
+.messageContent li {
+  margin-bottom: 0.3em;
+}
+
+.messageContent h1,
+.messageContent h2,
+.messageContent h3 {
+  margin: 1em 0 0.5em 0;
+  font-weight: 600;
+  color: light-dark(var(--mantine-color-gray-9), var(--mantine-color-dark-0));
+}
+
+.messageContent h1 {
+  font-size: 1.4em;
+}
+
+.messageContent h2 {
+  font-size: 1.2em;
+}
+
+.messageContent h3 {
+  font-size: 1.05em;
+}
+
+.messageContent pre {
+  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-7));
+  padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);
+  border-radius: var(--mantine-radius-md);
+  overflow-x: auto;
+  font-size: var(--mantine-font-size-sm);
+  margin: 0.75em 0;
+}
+
+.messageContent code {
+  background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-6));
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 0.88em;
+}
+
+.messageContent pre code {
+  background: none;
+  padding: 0;
+}
+
+.messageContent blockquote {
+  border-left: 3px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+  padding-left: var(--mantine-spacing-md);
+  margin: 0.75em 0;
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-2));
+}
+
+.messageContent a {
+  color: light-dark(var(--mantine-color-blue-7), var(--mantine-color-blue-4));
+  text-decoration: none;
+
+  @mixin hover {
+    text-decoration: underline;
+  }
+}
+
+.messageContent a[href^="/s/"],
+.messageContent a[href^="/p/"] {
+  color: light-dark(var(--mantine-color-dark-4), var(--mantine-color-dark-1));
+  font-weight: 500;
+  text-decoration: none;
+  cursor: pointer;
+
+  @mixin light {
+    border-bottom: 0.05em solid var(--mantine-color-dark-0);
+  }
+
+  @mixin dark {
+    border-bottom: 0.05em solid var(--mantine-color-dark-2);
+  }
+
+  @mixin hover {
+    text-decoration: none;
+    @mixin light {
+      border-bottom-color: var(--mantine-color-dark-2);
+    }
+    @mixin dark {
+      border-bottom-color: var(--mantine-color-dark-0);
+    }
+  }
+}
+
+.messageContent hr {
+  border: none;
+  border-top: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
+  margin: 1em 0;
+}
+
+.toolGroup {
+  margin: 6px 0;
+  font-size: var(--mantine-font-size-xs);
+}
+
+.toolGroupHeader {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  user-select: none;
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+  line-height: 1.4;
+  transition: color 120ms ease;
+}
+
+.toolGroupHeader:hover {
+  color: light-dark(var(--mantine-color-gray-8), var(--mantine-color-dark-0));
+}
+
+.toolGroupLabel {
+  font-weight: 500;
+}
+
+.toolGroupSteps {
+  margin-top: 4px;
+  padding-left: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.toolStep {
+  font-size: var(--mantine-font-size-xs);
+}
+
+.toolStepRow {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+  user-select: none;
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+  line-height: 1.5;
+  transition: color 120ms ease;
+}
+
+.toolStepRow:hover {
+  color: light-dark(var(--mantine-color-gray-8), var(--mantine-color-dark-0));
+}
+
+.toolStepBullet {
+  display: inline-block;
+  width: 8px;
+  text-align: center;
+  opacity: 0.6;
+}
+
+.toolStepDetails {
+  margin-top: 4px;
+  margin-left: 18px;
+  padding: 6px 10px;
+  border-radius: var(--mantine-radius-sm);
+  background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-7));
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+  font-size: 11px;
+  line-height: 1.5;
+  overflow-x: auto;
+}
+
+.messageActions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 4px;
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+}
+
+.processingIndicator {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
+  font-size: var(--mantine-font-size-sm);
+}
+
+.processingSpinner {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.streamingCursor {
+  display: inline-block;
+  width: 2px;
+  height: 1em;
+  background: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
+  animation: blink 1s step-end infinite;
+  vertical-align: text-bottom;
+  margin-left: 1px;
+}
+
+@keyframes blink {
+  50% {
+    opacity: 0;
+  }
+}

apps/client/src/ee/ai-chat/styles/chat-sidebar.module.css

@@ -0,0 +1,138 @@
+.sidebar {
+  height: 100%;
+  width: 100%;
+  padding: var(--mantine-spacing-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--mantine-spacing-xs);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: var(--mantine-spacing-xs);
+}
+
+.title {
+  font-weight: 600;
+  font-size: var(--mantine-font-size-sm);
+}
+
+.searchInput {
+  margin-bottom: var(--mantine-spacing-xs);
+}
+
+.chatList {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.chatGroup + .chatGroup {
+  margin-top: var(--mantine-spacing-sm);
+}
+
+.chatGroupLabel {
+  padding: 4px var(--mantine-spacing-xs);
+  font-size: var(--mantine-font-size-xs);
+  font-weight: 600;
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+  user-select: none;
+}
+
+.chatListEmpty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--mantine-spacing-xl) var(--mantine-spacing-md);
+  text-align: center;
+  gap: 4px;
+  user-select: none;
+}
+
+.chatListEmptyIcon {
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
+  margin-bottom: var(--mantine-spacing-xs);
+}
+
+.chatListEmptyTitle {
+  font-size: var(--mantine-font-size-sm);
+  font-weight: 600;
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+}
+
+.chatListEmptyHint {
+  font-size: var(--mantine-font-size-xs);
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-3));
+  line-height: 1.4;
+}
+
+.chatItem {
+  display: flex;
+  align-items: center;
+  padding: 8px var(--mantine-spacing-xs);
+  border-radius: var(--mantine-radius-sm);
+  cursor: pointer;
+  text-decoration: none;
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+  font-size: var(--mantine-font-size-sm);
+  user-select: none;
+  gap: var(--mantine-spacing-xs);
+
+  @mixin hover {
+    background-color: light-dark(
+      var(--mantine-color-gray-1),
+      var(--mantine-color-dark-6)
+    );
+  }
+
+  &[data-active] {
+    background-color: light-dark(
+      var(--mantine-color-gray-2),
+      var(--mantine-color-dark-6)
+    );
+  }
+}
+
+.chatItemTitle {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chatItemDate {
+  font-size: var(--mantine-font-size-xs);
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
+  white-space: nowrap;
+  transition: opacity 150ms;
+}
+
+.chatItemRenameInput {
+  font-size: var(--mantine-font-size-sm);
+  padding: 0;
+  height: auto;
+  min-height: 0;
+  background: transparent;
+  color: inherit;
+}
+
+.chatItem:hover .chatItemDate {
+  opacity: 0;
+}
+
+.chatItemActions {
+  position: absolute;
+  right: var(--mantine-spacing-xs);
+  opacity: 0;
+  transition: opacity 150ms;
+}
+
+.chatItem {
+  position: relative;
+}
+
+.chatItem:hover .chatItemActions {
+  opacity: 1;
+}

apps/client/src/ee/ai-chat/types/ai-chat.types.ts

@@ -0,0 +1,49 @@
+export type AiChat = {
+  id: string;
+  workspaceId: string;
+  creatorId: string;
+  title: string | null;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export type AiChatToolCall = {
+  id: string;
+  name: string;
+  args: Record<string, unknown>;
+  result?: unknown;
+};
+
+export type AiChatMessage = {
+  id: string;
+  chatId: string;
+  role: 'user' | 'assistant' | 'tool';
+  content: string | null;
+  toolCalls: AiChatToolCall[] | null;
+  metadata: Record<string, unknown> | null;
+  createdAt: string;
+};
+
+export type AiChatStreamEvent =
+  | { type: 'chat_created'; chatId: string }
+  | { type: 'content'; text: string }
+  | { type: 'tool_call'; id: string; name: string; args: Record<string, unknown> }
+  | { type: 'tool_result'; id: string; result: unknown }
+  | { type: 'done'; messageId: string; usage?: Record<string, number> }
+  | { type: 'error'; message: string; code?: string; retryable?: boolean };
+
+export type PageMention = {
+  id: string;
+  title: string;
+  slugId: string;
+  spaceSlug?: string;
+  icon?: string;
+};
+
+export type ChatAttachment = {
+  id: string;
+  fileName: string;
+  fileExt: string;
+  fileSize: number;
+  mimeType: string;
+};

apps/client/src/ee/ai/pages/ai-settings.tsx

@@ -6,6 +6,7 @@ import useUserRole from "@/hooks/use-user-role.tsx";
 import { useTranslation } from "react-i18next";
 import EnableAiSearch from "@/ee/ai/components/enable-ai-search.tsx";
 import EnableGenerativeAi from "@/ee/ai/components/enable-generative-ai.tsx";
+import EnableAiChat from "@/ee/ai-chat/components/enable-ai-chat.tsx";
 import McpSettings from "@/ee/ai/components/mcp-settings.tsx";
 import { Alert, Stack, Tabs } from "@mantine/core";
 import { IconInfoCircle } from "@tabler/icons-react";
@@ -71,6 +72,7 @@ export default function AiSettings() {
           <Stack gap="md">
             {!isCloud() && <EnableAiSearch />}
             <EnableGenerativeAi />
+            <EnableAiChat />
           </Stack>
         </Tabs.Panel>
 

apps/client/src/ee/components/cloud-login-form.tsx

@@ -21,6 +21,7 @@ import { useTranslation } from "react-i18next";
 import JoinedWorkspaces from "@/ee/components/joined-workspaces.tsx";
 import { useJoinedWorkspacesQuery } from "@/ee/cloud/query/cloud-query.ts";
 import { findWorkspacesByEmail } from "@/ee/cloud/service/cloud-service.ts";
+import { AuthLayout } from "@/features/auth/components/auth-layout.tsx";
 
 const formSchema = z.object({
   hostname: z.string().min(1, { message: "subdomain is required" }),
@@ -82,7 +83,7 @@ export function CloudLoginForm() {
   }
 
   return (
-    <div>
+    <AuthLayout>
       <Container size={420} className={classes.container}>
         <Box p="xl" className={classes.containerBox}>
           <Title order={2} ta="center" fw={500} mb="md">
@@ -145,12 +146,12 @@ export function CloudLoginForm() {
         </Box>
       </Container>
 
-      <Text ta="center">
+      <Text ta="center" mb="xl">
         {t("Don't have a workspace?")}{" "}
         <Anchor component={Link} to={APP_ROUTE.AUTH.CREATE_WORKSPACE} fw={500}>
           {t("Create new workspace")}
         </Anchor>
       </Text>
-    </div>
+    </AuthLayout>
   );
 }

apps/client/src/ee/features.ts

@@ -17,4 +17,5 @@ export const Feature = {
   RETENTION: 'retention',
   SHARING_CONTROLS: 'sharing:controls',
   TEMPLATES: 'templates',
+  VIEWER_COMMENTS: 'comment:viewer',
 } as const;

apps/client/src/ee/licence/components/activate-license-modal.tsx

@@ -1,6 +1,6 @@
 import { z } from "zod/v4";
-import React from "react";
-import { Button, Group, Modal, Textarea } from "@mantine/core";
+import React, { useRef } from "react";
+import { Button, Divider, Group, Modal, Stack, Textarea } from "@mantine/core";
 import { useForm } from "@mantine/form";
 import { zod4Resolver } from "mantine-form-zod-resolver";
 import { useTranslation } from "react-i18next";
@@ -49,6 +49,7 @@ interface ActivateLicenseFormProps {
 export function ActivateLicenseForm({ onClose }: ActivateLicenseFormProps) {
   const { t } = useTranslation();
   const activateLicenseMutation = useActivateMutation();
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
   const form = useForm<FormValues>({
     validate: zod4Resolver(formSchema),
@@ -63,29 +64,68 @@ export function ActivateLicenseForm({ onClose }: ActivateLicenseFormProps) {
     onClose?.();
   }
 
+  function handleFileUpload(event: React.ChangeEvent<HTMLInputElement>) {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const content = (e.target?.result as string)?.trim();
+      if (content) {
+        form.setFieldValue("licenseKey", content);
+        handleSubmit({ licenseKey: content });
+      }
+    };
+    reader.readAsText(file);
+
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  }
+
   return (
     <form onSubmit={form.onSubmit(handleSubmit)}>
-      <Textarea
-        label={t("License key")}
-        description="Enter a valid enterprise license key. Contact sales@docmost.com to purchase one."
-        placeholder={t("e.g eyJhb.....")}
-        variant="filled"
-        autosize
-        minRows={3}
-        maxRows={5}
-        data-autofocus
-        {...form.getInputProps("licenseKey")}
+      <input
+        type="file"
+        accept=".txt"
+        ref={fileInputRef}
+        onChange={handleFileUpload}
+        hidden
       />
 
-      <Group justify="flex-end" mt="md">
-        <Button
-          type="submit"
-          disabled={activateLicenseMutation.isPending}
-          loading={activateLicenseMutation.isPending}
-        >
-          {t("Save")}
-        </Button>
-      </Group>
+      <Stack gap="xs">
+        <Textarea
+          label={t("License key")}
+          placeholder={t("e.g eyJhb.....")}
+          variant="filled"
+          autosize
+          minRows={3}
+          maxRows={5}
+          data-autofocus
+          {...form.getInputProps("licenseKey")}
+        />
+
+        <Group justify="flex-end">
+          <Button
+            type="submit"
+            disabled={activateLicenseMutation.isPending}
+            loading={activateLicenseMutation.isPending}
+          >
+            {t("Save")}
+          </Button>
+        </Group>
+
+        <Divider label={t("Or")} labelPosition="center" />
+
+        <Group justify="center">
+          <Button
+            variant="light"
+            onClick={() => fileInputRef.current?.click()}
+          >
+            {t("Upload license file")}
+          </Button>
+        </Group>
+      </Stack>
     </form>
   );
 }

apps/client/src/ee/licence/components/oss-details.tsx

@@ -68,7 +68,11 @@ export default function OssDetails() {
         </List>
 
         <Text size="sm" c="dimmed">
-          Contact <a href="mailto:sales@docmost.com?subject=Enterprise%20License%20Inquiry">sales@docmost.com </a> to purchase an enterprise license.
+          Get an enterprise trial key at <a href="https://customers.docmost.com/" target="_blank" rel="noopener noreferrer">customers.docmost.com</a>.
+        </Text>
+
+        <Text size="sm" c="dimmed">
+          Visit <a href="https://docmost.com/pricing" target="_blank" rel="noopener noreferrer">docmost.com/pricing</a> to purchase an enterprise license.
         </Text>
       </Stack>
     </Stack>

apps/client/src/ee/mfa/components/mfa-challenge.tsx

@@ -22,6 +22,7 @@ import APP_ROUTE, { getPostLoginRedirect } from "@/lib/app-route";
 import { useTranslation } from "react-i18next";
 import { z } from "zod/v4";
 import { MfaBackupCodeInput } from "./mfa-backup-code-input";
+import { AuthLayout } from "@/features/auth/components/auth-layout.tsx";
 
 const formSchema = z.object({
   code: z
@@ -66,6 +67,7 @@ export function MfaChallenge() {
   };
 
   return (
+    <AuthLayout>
     <Container size={420} className={classes.container}>
       <Paper radius="lg" p={40} className={classes.paper}>
         <Stack align="center" gap="xl">
@@ -157,5 +159,6 @@ export function MfaChallenge() {
         </Stack>
       </Paper>
     </Container>
+    </AuthLayout>
   );
 }

apps/client/src/ee/mfa/components/mfa-setup-required.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
 import { MfaSetupModal } from "@/ee/mfa";
 import APP_ROUTE, { getPostLoginRedirect } from "@/lib/app-route.ts";
 import { useNavigate } from "react-router-dom";
+import { AuthLayout } from "@/features/auth/components/auth-layout.tsx";
 
 export default function MfaSetupRequired() {
   const { t } = useTranslation();
@@ -15,6 +16,7 @@ export default function MfaSetupRequired() {
   };
 
   return (
+    <AuthLayout>
     <Container size="sm" py="xl">
       <Paper shadow="sm" p="xl" radius="md" withBorder>
         <Stack>
@@ -44,5 +46,6 @@ export default function MfaSetupRequired() {
         </Stack>
       </Paper>
     </Container>
+    </AuthLayout>
   );
 }

apps/client/src/ee/page-permission/components/page-share-modal.tsx

@@ -71,7 +71,10 @@ export function PageShareModal({ readOnly }: PageShareModalProps) {
           ) : null
         }
         variant="default"
-        onClick={open}
+        onClick={() => {
+          setActiveTab(isPubliclyShared ? "publish" : hasPagePermissions ? "access" : "publish");
+          open();
+        }}
       >
         {t("Share")}
       </Button>

apps/client/src/ee/pages/verify-email.tsx

@@ -9,6 +9,7 @@ import {
 import { notifications } from "@mantine/notifications";
 import APP_ROUTE from "@/lib/app-route.ts";
 import { useTranslation } from "react-i18next";
+import { AuthLayout } from "@/features/auth/components/auth-layout.tsx";
 
 export default function VerifyEmail() {
   const { t } = useTranslation();
@@ -59,20 +60,23 @@ export default function VerifyEmail() {
 
   if (token) {
     return (
-      <Container size={420} className={classes.container}>
-        <Box p="xl" className={classes.containerBox}>
-          <Title order={2} ta="center" fw={500} mb="md">
-            {t("Verifying your email")}
-          </Title>
-          <Text ta="center" c="dimmed">
-            {t("Please wait...")}
-          </Text>
-        </Box>
-      </Container>
+      <AuthLayout>
+        <Container size={420} className={classes.container}>
+          <Box p="xl" className={classes.containerBox}>
+            <Title order={2} ta="center" fw={500} mb="md">
+              {t("Verifying your email")}
+            </Title>
+            <Text ta="center" c="dimmed">
+              {t("Please wait...")}
+            </Text>
+          </Box>
+        </Container>
+      </AuthLayout>
     );
   }
 
   return (
+    <AuthLayout>
     <Container size={420} className={classes.container}>
       <Box p="xl" className={classes.containerBox}>
         <Title order={2} ta="center" fw={500} mb="md">
@@ -103,5 +107,6 @@ export default function VerifyEmail() {
         )}
       </Box>
     </Container>
+    </AuthLayout>
   );
 }

apps/client/src/ee/security/components/space-viewer-comments-toggle.tsx

@@ -0,0 +1,61 @@
+import { Group, Text, Switch, Tooltip } from "@mantine/core";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { ISpace } from "@/features/space/types/space.types.ts";
+import { useUpdateSpaceMutation } from "@/features/space/queries/space-query.ts";
+import { useHasFeature } from "@/ee/hooks/use-feature.ts";
+import { Feature } from "@/ee/features.ts";
+import { useUpgradeLabel } from "@/ee/hooks/use-upgrade-label.ts";
+
+type SpaceViewerCommentsToggleProps = {
+  space: ISpace;
+};
+
+export default function SpaceViewerCommentsToggle({
+  space,
+}: SpaceViewerCommentsToggleProps) {
+  const { t } = useTranslation();
+  const hasViewerComments = useHasFeature(Feature.VIEWER_COMMENTS);
+  const upgradeLabel = useUpgradeLabel();
+  const isDisabled = !hasViewerComments;
+  const [checked, setChecked] = useState(
+    space.settings?.comments?.allowViewerComments === true,
+  );
+  const updateSpaceMutation = useUpdateSpaceMutation();
+
+  const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.currentTarget.checked;
+    try {
+      await updateSpaceMutation.mutateAsync({
+        spaceId: space.id,
+        allowViewerComments: value,
+      });
+      setChecked(value);
+    } catch {
+      // error handled by mutation
+    }
+  };
+
+  return (
+    <Group justify="space-between" wrap="nowrap" gap="xl">
+      <div>
+        <Text size="md">{t("Allow viewers to comment")}</Text>
+        <Text size="sm" c="dimmed">
+          {t("Allow viewers to add comments on pages in this space.")}
+        </Text>
+      </div>
+      <Tooltip
+        label={upgradeLabel}
+        disabled={!isDisabled}
+        refProp="rootRef"
+      >
+        <Switch
+          checked={checked}
+          onChange={handleChange}
+          disabled={isDisabled}
+          aria-label={t("Toggle viewer comments")}
+        />
+      </Tooltip>
+    </Group>
+  );
+}

apps/client/src/features/auth/components/auth-layout.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Group, Text } from "@mantine/core";
+import classes from "./auth.module.css";
+
+type AuthLayoutProps = {
+  children: React.ReactNode;
+};
+
+export function AuthLayout({ children }: AuthLayoutProps) {
+  return (
+    <>
+      <Group justify="center" gap={8} className={classes.logo}>
+        <img
+          src="/icons/favicon-32x32.png"
+          alt="Docmost"
+          width={22}
+          height={22}
+        />
+        <Text size="28px" fw={700} style={{ userSelect: "none" }}>
+          Docmost
+        </Text>
+      </Group>
+      {children}
+    </>
+  );
+}

apps/client/src/features/auth/components/auth.module.css

@@ -1,12 +1,20 @@
+.logo {
+    margin-top: 80px;
+
+    @media (max-width: $mantine-breakpoint-sm) {
+        margin-top: 30px;
+    }
+}
+
 .container {
     box-shadow: rgba(0, 0, 0, 0.07) 0px 2px 45px 4px;
     border-radius: 4px;
     background: light-dark(var(--mantine-color-body), rgba(0, 0, 0, 0.1));
-    margin-top: 150px;
+    margin-top: 40px;
     margin-bottom: 20px;
 
     @media (max-width: $mantine-breakpoint-sm) {
-        margin-top: 50px;
+        margin-top: 20px;
         margin-bottom: 20px;
     }
 }

apps/client/src/features/auth/components/forgot-password-form.tsx

@@ -7,6 +7,7 @@ import { Box, Button, Container, Text, TextInput, Title } from "@mantine/core";
 import classes from "./auth.module.css";
 import { useRedirectIfAuthenticated } from "@/features/auth/hooks/use-redirect-if-authenticated.ts";
 import { useTranslation } from "react-i18next";
+import { AuthLayout } from "./auth-layout.tsx";
 
 const formSchema = z.object({
   email: z
@@ -35,6 +36,7 @@ export function ForgotPasswordForm() {
   }
 
   return (
+    <AuthLayout>
     <Container size={420} className={classes.container}>
       <Box p="xl" className={classes.containerBox}>
         <Title order={2} ta="center" fw={500} mb="md">
@@ -69,5 +71,6 @@ export function ForgotPasswordForm() {
         </form>
       </Box>
     </Container>
+    </AuthLayout>
   );
 }

apps/client/src/features/auth/components/invite-sign-up-form.tsx

@@ -19,6 +19,7 @@ import { useGetInvitationQuery } from "@/features/workspace/queries/workspace-qu
 import { useRedirectIfAuthenticated } from "@/features/auth/hooks/use-redirect-if-authenticated.ts";
 import { useTranslation } from "react-i18next";
 import SsoLogin from "@/ee/components/sso-login.tsx";
+import { AuthLayout } from "./auth-layout.tsx";
 
 const formSchema = z.object({
   name: z.string().trim().min(1),
@@ -66,6 +67,7 @@ export function InviteSignUpForm() {
   }
 
   return (
+    <AuthLayout>
     <Container size={420} className={classes.container}>
       <Box p="xl" className={classes.containerBox}>
         <Title order={2} ta="center" fw={500} mb="md">
@@ -111,5 +113,6 @@ export function InviteSignUpForm() {
         )}
       </Box>
     </Container>
+    </AuthLayout>
   );
 }

apps/client/src/features/auth/components/login-form.tsx

@@ -21,6 +21,7 @@ import SsoLogin from "@/ee/components/sso-login.tsx";
 import { useWorkspacePublicDataQuery } from "@/features/workspace/queries/workspace-query.ts";
 import { Error404 } from "@/components/ui/error-404.tsx";
 import React from "react";
+import { AuthLayout } from "./auth-layout.tsx";
 
 const formSchema = z.object({
   email: z
@@ -62,52 +63,54 @@ export function LoginForm() {
   }
 
   return (
-    <Container size={420} className={classes.container}>
-      <Box p="xl" className={classes.containerBox}>
-        <Title order={2} ta="center" fw={500} mb="md">
-          {t("Login")}
-        </Title>
+    <AuthLayout>
+      <Container size={420} className={classes.container}>
+        <Box p="xl" className={classes.containerBox}>
+          <Title order={2} ta="center" fw={500} mb="md">
+            {t("Login")}
+          </Title>
 
-        <SsoLogin />
+          <SsoLogin />
 
-        {!data?.enforceSso && (
-          <>
-            <form onSubmit={form.onSubmit(onSubmit)}>
-              <TextInput
-                id="email"
-                type="email"
-                label={t("Email")}
-                placeholder="email@example.com"
-                variant="filled"
-                {...form.getInputProps("email")}
-              />
+          {!data?.enforceSso && (
+            <>
+              <form onSubmit={form.onSubmit(onSubmit)}>
+                <TextInput
+                  id="email"
+                  type="email"
+                  label={t("Email")}
+                  placeholder="email@example.com"
+                  variant="filled"
+                  {...form.getInputProps("email")}
+                />
 
-              <PasswordInput
-                label={t("Password")}
-                placeholder={t("Your password")}
-                variant="filled"
-                mt="md"
-                {...form.getInputProps("password")}
-              />
+                <PasswordInput
+                  label={t("Password")}
+                  placeholder={t("Your password")}
+                  variant="filled"
+                  mt="md"
+                  {...form.getInputProps("password")}
+                />
 
-              <Group justify="flex-end" mt="sm">
-                <Anchor
-                  to={APP_ROUTE.AUTH.FORGOT_PASSWORD}
-                  component={Link}
-                  underline="never"
-                  size="sm"
-                >
-                  {t("Forgot your password?")}
-                </Anchor>
-              </Group>
+                <Group justify="flex-end" mt="sm">
+                  <Anchor
+                    to={APP_ROUTE.AUTH.FORGOT_PASSWORD}
+                    component={Link}
+                    underline="never"
+                    size="sm"
+                  >
+                    {t("Forgot your password?")}
+                  </Anchor>
+                </Group>
 
-              <Button type="submit" fullWidth mt="md" loading={isLoading}>
-                {t("Sign In")}
-              </Button>
-            </form>
-          </>
-        )}
-      </Box>
-    </Container>
+                <Button type="submit" fullWidth mt="md" loading={isLoading}>
+                  {t("Sign In")}
+                </Button>
+              </form>
+            </>
+          )}
+        </Box>
+      </Container>
+    </AuthLayout>
   );
 }

apps/client/src/features/auth/components/password-reset-form.tsx

@@ -6,6 +6,7 @@ import { Box, Button, Container, PasswordInput, Title } from "@mantine/core";
 import classes from "./auth.module.css";
 import { useRedirectIfAuthenticated } from "@/features/auth/hooks/use-redirect-if-authenticated.ts";
 import { useTranslation } from "react-i18next";
+import { AuthLayout } from "./auth-layout.tsx";
 
 const formSchema = z.object({
   newPassword: z
@@ -38,6 +39,7 @@ export function PasswordResetForm({ resetToken }: PasswordResetFormProps) {
   }
 
   return (
+    <AuthLayout>
     <Container size={420} className={classes.container}>
       <Box p="xl" className={classes.containerBox}>
         <Title order={2} ta="center" fw={500} mb="md">
@@ -59,5 +61,6 @@ export function PasswordResetForm({ resetToken }: PasswordResetFormProps) {
         </form>
       </Box>
     </Container>
+    </AuthLayout>
   );
 }

apps/client/src/features/auth/components/setup-workspace-form.tsx

@@ -19,6 +19,7 @@ import SsoCloudSignup from "@/ee/components/sso-cloud-signup.tsx";
 import { isCloud } from "@/lib/config.ts";
 import { Link } from "react-router-dom";
 import APP_ROUTE from "@/lib/app-route.ts";
+import { AuthLayout } from "./auth-layout.tsx";
 
 const formSchema = z.object({
   workspaceName: z.string().trim().max(50).optional(),
@@ -50,7 +51,7 @@ export function SetupWorkspaceForm() {
   }
 
   return (
-    <div>
+    <AuthLayout>
       <Container size={420} className={classes.container}>
         <Box p="xl" className={classes.containerBox}>
           <Title order={2} ta="center" fw={500} mb="md">
@@ -117,6 +118,6 @@ export function SetupWorkspaceForm() {
           </Anchor>
         </Text>
       )}
-    </div>
+    </AuthLayout>
   );
 }

apps/client/src/features/comment/atoms/comment-atom.ts

@@ -3,3 +3,15 @@ import { atom } from 'jotai';
 export const showCommentPopupAtom = atom<boolean>(false);
 export const activeCommentIdAtom = atom<string>('');
 export const draftCommentIdAtom = atom<string>('');
+
+// Read-only comment state
+export const showReadOnlyCommentPopupAtom = atom<boolean>(false);
+export type YjsSelection = {
+  anchor: any;
+  head: any;
+};
+export type ReadOnlyCommentData = {
+  yjsSelection: YjsSelection;
+  selectedText: string;
+};
+export const readOnlyCommentDataAtom = atom<ReadOnlyCommentData | null>(null);

apps/client/src/features/comment/components/comment-dialog.tsx

@@ -6,6 +6,8 @@ import {
   activeCommentIdAtom,
   draftCommentIdAtom,
   showCommentPopupAtom,
+  showReadOnlyCommentPopupAtom,
+  readOnlyCommentDataAtom,
 } from "@/features/comment/atoms/comment-atom";
 import CommentEditor from "@/features/comment/components/comment-editor";
 import CommentActions from "@/features/comment/components/comment-actions";
@@ -19,12 +21,15 @@ import { useTranslation } from "react-i18next";
 interface CommentDialogProps {
   editor: ReturnType<typeof useEditor>;
   pageId: string;
+  readOnly?: boolean;
 }
 
-function CommentDialog({ editor, pageId }: CommentDialogProps) {
+function CommentDialog({ editor, pageId, readOnly }: CommentDialogProps) {
   const { t } = useTranslation();
   const [comment, setComment] = useState("");
   const [, setShowCommentPopup] = useAtom(showCommentPopupAtom);
+  const [, setShowReadOnlyCommentPopup] = useAtom(showReadOnlyCommentPopupAtom);
+  const [readOnlyCommentData, setReadOnlyCommentData] = useAtom(readOnlyCommentDataAtom);
   const [, setActiveCommentId] = useAtom(activeCommentIdAtom);
   const [draftCommentId, setDraftCommentId] = useAtom(draftCommentIdAtom);
   const [currentUser] = useAtom(currentUserAtom);
@@ -34,11 +39,17 @@ function CommentDialog({ editor, pageId }: CommentDialogProps) {
     handleDialogClose();
   });
   const createCommentMutation = useCreateCommentMutation();
-  const { isPending } = createCommentMutation;
+  const isPending = createCommentMutation.isPending;
 
   const handleDialogClose = () => {
-    setShowCommentPopup(false);
-    editor.chain().focus().unsetCommentDecoration().run();
+    if (readOnly) {
+      setShowReadOnlyCommentPopup(false);
+      // @ts-ignore
+      setReadOnlyCommentData(null);
+    } else {
+      setShowCommentPopup(false);
+      editor.chain().focus().unsetCommentDecoration().run();
+    }
   };
 
   const getSelectedText = () => {
@@ -47,6 +58,11 @@ function CommentDialog({ editor, pageId }: CommentDialogProps) {
   };
 
   const handleAddComment = async () => {
+    if (readOnly) {
+      await handleAddReadOnlyComment();
+      return;
+    }
+
     try {
       const selectedText = getSelectedText();
       const commentData = {
@@ -65,7 +81,6 @@ function CommentDialog({ editor, pageId }: CommentDialogProps) {
         .run();
       setActiveCommentId(createdComment.id);
 
-      //unselect text to close bubble menu
       editor.commands.setTextSelection({ from: editor.view.state.selection.from, to: editor.view.state.selection.from });
 
       setAsideState({ tab: "comments", isAsideOpen: true });
@@ -85,6 +100,33 @@ function CommentDialog({ editor, pageId }: CommentDialogProps) {
     }
   };
 
+  const handleAddReadOnlyComment = async () => {
+    if (!readOnlyCommentData) return;
+
+    try {
+      const createdComment = await createCommentMutation.mutateAsync({
+        pageId,
+        content: JSON.stringify(comment),
+        selection: readOnlyCommentData.selectedText,
+        type: "inline",
+        yjsSelection: readOnlyCommentData.yjsSelection,
+      });
+
+      setActiveCommentId(createdComment.id);
+      setAsideState({ tab: "comments", isAsideOpen: true });
+
+      setTimeout(() => {
+        const selector = `div[data-comment-id="${createdComment.id}"]`;
+        const commentElement = document.querySelector(selector);
+        commentElement?.scrollIntoView({ behavior: "smooth", block: "center" });
+      }, 400);
+    } finally {
+      setShowReadOnlyCommentPopup(false);
+      // @ts-ignore
+      setReadOnlyCommentData(null);
+    }
+  };
+
   const handleCommentEditorChange = (newContent: any) => {
     setComment(newContent);
   };

apps/client/src/features/comment/components/comment-list-with-tabs.tsx

@@ -44,7 +44,9 @@ function CommentListWithTabs() {
   const [isLoading, setIsLoading] = useState(false);
   const { data: space } = useGetSpaceBySlugQuery(page?.space?.slug);
 
-  const canComment = page?.permissions?.canEdit ?? false;
+  const canComment =
+    (page?.permissions?.canEdit ?? false) ||
+    (space?.settings?.comments?.allowViewerComments === true);
 
   // Separate active and resolved comments
   const { activeComments, resolvedComments } = useMemo(() => {
@@ -153,7 +155,7 @@ function CommentListWithTabs() {
         )}
       </Paper>
     ),
-    [comments, handleAddReply, isLoading, space?.membership?.role],
+    [comments, handleAddReply, isLoading, space?.membership?.role, canComment],
   );
 
   if (isCommentsLoading) {

apps/client/src/features/comment/components/comment-menu.tsx

@@ -75,7 +75,7 @@ function CommentMenu({
               {isResolved ? t("Re-open comment") : t("Resolve comment")}
             </Menu.Item>
           ) : (
-            <Tooltip label={upgradeLabel} position="left">
+            <Tooltip label={upgradeLabel} position="left" withinPortal={false}>
               <Menu.Item disabled leftSection={<IconCircleCheck size={14} />}>
                 {t("Resolve comment")}
               </Menu.Item>

apps/client/src/features/comment/queries/comment-query.ts

@@ -65,6 +65,11 @@ export function useCreateCommentMutation() {
       ) as InfiniteData<IPagination<IComment>> | undefined;
 
       if (cache && cache.pages.length > 0) {
+        const alreadyExists = cache.pages.some((page) =>
+          page.items.some((c) => c.id === newComment.id),
+        );
+        if (alreadyExists) return;
+
         const lastIdx = cache.pages.length - 1;
         queryClient.setQueryData(RQ_KEY(newComment.pageId), {
           ...cache,

apps/client/src/features/comment/types/comment.types.ts

@@ -17,6 +17,10 @@ export interface IComment {
   deletedAt?: Date;
   creator: IUser;
   resolvedBy?: IUser;
+  yjsSelection?: {
+    anchor: any;
+    head: any;
+  };
 }
 
 export interface ICommentData {

apps/client/src/features/editor/components/attachment/attachment-view.tsx

@@ -1,17 +1,43 @@
 import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
-import { Group, Text, Paper, ActionIcon, Loader } from "@mantine/core";
+import { Group, Text, Paper, ActionIcon, Loader, Tooltip } from "@mantine/core";
 import { getFileUrl } from "@/lib/config.ts";
-import { IconDownload, IconPaperclip } from "@tabler/icons-react";
+import { IconDownload, IconFileTypePdf, IconPaperclip } from "@tabler/icons-react";
 import { useHover } from "@mantine/hooks";
 import { formatBytes } from "@/lib";
 import { useTranslation } from "react-i18next";
+import { useCallback } from "react";
 
 export default function AttachmentView(props: NodeViewProps) {
   const { t } = useTranslation();
-  const { node, selected } = props;
-  const { url, name, size } = node.attrs;
+  const { editor, node, getPos, selected } = props;
+  const { url, name, size, mime, attachmentId, placeholder } = node.attrs;
   const { hovered, ref } = useHover();
 
+  const isPdf = mime === "application/pdf" || name?.toLowerCase().endsWith(".pdf");
+
+  const handleEmbedAsPdf = useCallback(() => {
+    const pos = getPos();
+    if (pos === undefined || !url) return;
+
+    const nodeSize = node.nodeSize;
+
+    editor
+      .chain()
+      .insertContentAt(
+        { from: pos, to: pos + nodeSize },
+        {
+          type: "pdf",
+          attrs: {
+            src: url,
+            name,
+            attachmentId,
+            size,
+          },
+        },
+      )
+      .run();
+  }, [editor, getPos, node, url, name, attachmentId]);
+
   return (
     <NodeViewWrapper>
       <Paper withBorder p="4px" ref={ref} data-drag-handle>
@@ -23,14 +49,14 @@ export default function AttachmentView(props: NodeViewProps) {
           h={25}
         >
           <Group wrap="nowrap" gap="sm" style={{ minWidth: 0, flex: 1 }}>
-            {url ? (
-              <IconPaperclip size={20} style={{ flexShrink: 0 }} />
-            ) : (
+            {!url && placeholder ? (
               <Loader size={20} style={{ flexShrink: 0 }} />
+            ) : (
+              <IconPaperclip size={20} style={{ flexShrink: 0 }} />
             )}
 
             <Text component="span" size="md" truncate="end" style={{ minWidth: 0 }}>
-              {url ? name : t("Uploading {{name}}", { name })}
+              {!url && placeholder ? t("Uploading {{name}}", { name }) : name}
             </Text>
 
             <Text component="span" size="sm" c="dimmed" style={{ flexShrink: 0 }}>
@@ -39,11 +65,20 @@ export default function AttachmentView(props: NodeViewProps) {
           </Group>
 
           {url && (selected || hovered) && (
-            <a href={getFileUrl(url)} target="_blank">
-              <ActionIcon variant="default" aria-label="download file">
-                <IconDownload size={18} />
-              </ActionIcon>
-            </a>
+            <Group gap={4} wrap="nowrap" style={{ flexShrink: 0 }}>
+              {isPdf && editor.isEditable && (
+                <Tooltip label={t("Embed as PDF")} position="top" withinPortal={false}>
+                  <ActionIcon variant="default" aria-label={t("Embed as PDF")} onClick={handleEmbedAsPdf}>
+                    <IconFileTypePdf size={18} />
+                  </ActionIcon>
+                </Tooltip>
+              )}
+              <a href={getFileUrl(url)} target="_blank">
+                <ActionIcon variant="default" aria-label="download file">
+                  <IconDownload size={18} />
+                </ActionIcon>
+              </a>
+            </Group>
           )}
         </Group>
       </Paper>

apps/client/src/features/editor/components/audio/audio-menu.tsx

@@ -0,0 +1,123 @@
+import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
+import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
+import { useCallback } from "react";
+import { Node as PMNode } from "@tiptap/pm/model";
+import {
+  EditorMenuProps,
+  ShouldShowProps,
+} from "@/features/editor/components/table/types/types.ts";
+import { ActionIcon, Tooltip } from "@mantine/core";
+import {
+  IconDownload,
+  IconTrash,
+} from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import { getFileUrl } from "@/lib/config.ts";
+import classes from "../common/toolbar-menu.module.css";
+
+export function AudioMenu({ editor }: EditorMenuProps) {
+  const { t } = useTranslation();
+
+  const editorState = useEditorState({
+    editor,
+    selector: (ctx) => {
+      if (!ctx.editor) {
+        return null;
+      }
+
+      const audioAttrs = ctx.editor.getAttributes("audio");
+
+      return {
+        isAudio: ctx.editor.isActive("audio"),
+        src: audioAttrs?.src || null,
+      };
+    },
+  });
+
+  const shouldShow = useCallback(
+    ({ state }: ShouldShowProps) => {
+      if (!state) {
+        return false;
+      }
+
+      return editor.isActive("audio") && editor.getAttributes("audio").src;
+    },
+    [editor],
+  );
+
+  const getReferencedVirtualElement = useCallback(() => {
+    if (!editor) return;
+    const { selection } = editor.state;
+    const predicate = (node: PMNode) => node.type.name === "audio";
+    const parent = findParentNode(predicate)(selection);
+
+    if (parent) {
+      const dom = editor.view.nodeDOM(parent?.pos) as HTMLElement;
+      const domRect = dom.getBoundingClientRect();
+      return {
+        getBoundingClientRect: () => domRect,
+        getClientRects: () => [domRect],
+      };
+    }
+
+    const domRect = posToDOMRect(editor.view, selection.from, selection.to);
+    return {
+      getBoundingClientRect: () => domRect,
+      getClientRects: () => [domRect],
+    };
+  }, [editor]);
+
+  const handleDownload = useCallback(() => {
+    if (!editorState?.src) return;
+    const url = getFileUrl(editorState.src);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "";
+    a.click();
+  }, [editorState?.src]);
+
+  const handleDelete = useCallback(() => {
+    editor.commands.deleteSelection();
+  }, [editor]);
+
+  return (
+    <BaseBubbleMenu
+      editor={editor}
+      pluginKey={`audio-menu`}
+      updateDelay={0}
+      getReferencedVirtualElement={getReferencedVirtualElement}
+      options={{
+        placement: "top",
+        offset: 8,
+        flip: false,
+      }}
+      shouldShow={shouldShow}
+    >
+      <div className={classes.toolbar}>
+        <Tooltip position="top" label={t("Download")} withinPortal={false}>
+          <ActionIcon
+            onClick={handleDownload}
+            size="lg"
+            aria-label={t("Download")}
+            variant="subtle"
+          >
+            <IconDownload size={18} />
+          </ActionIcon>
+        </Tooltip>
+
+        <Tooltip position="top" label={t("Delete")} withinPortal={false}>
+          <ActionIcon
+            onClick={handleDelete}
+            size="lg"
+            aria-label={t("Delete")}
+            variant="subtle"
+          >
+            <IconTrash size={18} />
+          </ActionIcon>
+        </Tooltip>
+      </div>
+    </BaseBubbleMenu>
+  );
+}
+
+export default AudioMenu;

apps/client/src/features/editor/components/audio/audio-view.module.css

@@ -0,0 +1,37 @@
+.audioWrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  max-width: 100%;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.skeleton {
+  animation: pulse 1.2s ease-in-out infinite;
+
+  @mixin light {
+    background: linear-gradient(-90deg, var(--mantine-color-gray-3) 0%, var(--mantine-color-gray-1) 50%, var(--mantine-color-gray-3) 100%);
+    background-size: 400% 400%;
+  }
+
+  @mixin dark {
+    background: linear-gradient(-90deg, var(--mantine-color-dark-6) 0%, var(--mantine-color-dark-5) 50%, var(--mantine-color-dark-6) 100%);
+    background-size: 400% 400%;
+  }
+
+  @keyframes pulse {
+    0% {
+      background-position: 0% 0%;
+    }
+    100% {
+      background-position: -135% 0%;
+    }
+  }
+}
+
+.audio {
+  display: block;
+  width: 100%;
+  border-radius: 8px;
+}

apps/client/src/features/editor/components/audio/audio-view.tsx

@@ -0,0 +1,68 @@
+import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
+import { Group, Loader, Text } from "@mantine/core";
+import { useMemo } from "react";
+import { getFileUrl } from "@/lib/config.ts";
+import { isInternalFileUrl } from "@docmost/editor-ext";
+import classes from "./audio-view.module.css";
+import { useTranslation } from "react-i18next";
+
+export default function AudioView(props: NodeViewProps) {
+  const { t } = useTranslation();
+  const { editor, node } = props;
+  const { src, placeholder } = node.attrs;
+
+  const safeSrc = useMemo(() => {
+    if (!src || !isInternalFileUrl(src)) return null;
+    return getFileUrl(src);
+  }, [src]);
+
+  const previewSrc = useMemo(() => {
+    editor.storage.shared.audioPreviews =
+      editor.storage.shared.audioPreviews || {};
+
+    if (placeholder?.id) {
+      return editor.storage.shared.audioPreviews[placeholder.id];
+    }
+
+    return null;
+  }, [placeholder, editor]);
+
+  return (
+    <NodeViewWrapper data-drag-handle>
+      <div className={`${classes.audioWrapper} ${!safeSrc && placeholder ? classes.skeleton : ''}`}>
+        {safeSrc && (
+          <audio
+            className={classes.audio}
+            preload="metadata"
+            controls
+            src={safeSrc}
+          />
+        )}
+        {!safeSrc && previewSrc && (
+          <Group pos="relative" w="100%">
+            <audio
+              className={classes.audio}
+              preload="metadata"
+              controls
+              src={previewSrc}
+            />
+            <Loader size={20} pos="absolute" top={6} right={6} />
+          </Group>
+        )}
+        {!safeSrc && !previewSrc && placeholder && (
+          <Group justify="center" wrap="nowrap" gap="xs" maw="100%" px="md" h={54}>
+            <Loader size={20} style={{ flexShrink: 0 }} />
+            <Text component="span" size="sm" truncate="end">
+              {placeholder?.name
+                ? t("Uploading {{name}}", { name: placeholder.name })
+                : t("Uploading file")}
+            </Text>
+          </Group>
+        )}
+        {!safeSrc && !previewSrc && !placeholder && (
+          <audio className={classes.audio} controls />
+        )}
+      </div>
+    </NodeViewWrapper>
+  );
+}

apps/client/src/features/editor/components/audio/upload-audio-action.tsx

@@ -0,0 +1,36 @@
+import { handleAudioUpload } from "@docmost/editor-ext";
+import { uploadFile } from "@/features/page/services/page-service.ts";
+import { notifications } from "@mantine/notifications";
+import { getFileUploadSizeLimit } from "@/lib/config.ts";
+import { formatBytes } from "@/lib";
+import i18n from "@/i18n.ts";
+
+export const uploadAudioAction = handleAudioUpload({
+  onUpload: async (file: File, pageId: string): Promise<any> => {
+    try {
+      return await uploadFile(file, pageId);
+    } catch (err) {
+      notifications.show({
+        color: "red",
+        message: err?.response.data.message,
+      });
+      throw err;
+    }
+  },
+  validateFn: (file) => {
+    if (!file.type.includes("audio/")) {
+      return false;
+    }
+
+    if (file.size > getFileUploadSizeLimit()) {
+      notifications.show({
+        color: "red",
+        message: i18n.t("File exceeds the {{limit}} attachment limit", {
+          limit: formatBytes(getFileUploadSizeLimit()),
+        }),
+      });
+      return false;
+    }
+    return true;
+  },
+});

apps/client/src/features/editor/components/bubble-menu/readonly-bubble-menu.tsx

@@ -0,0 +1,159 @@
+import type { Editor } from "@tiptap/react";
+import { TextSelection } from "@tiptap/pm/state";
+import { FC, useCallback, useEffect, useRef, useState } from "react";
+import { IconMessage } from "@tabler/icons-react";
+import classes from "./bubble-menu.module.css";
+import { ActionIcon, Tooltip } from "@mantine/core";
+import { useAtom } from "jotai";
+import {
+  showReadOnlyCommentPopupAtom,
+  readOnlyCommentDataAtom,
+} from "@/features/comment/atoms/comment-atom";
+import { useTranslation } from "react-i18next";
+import { getRelativeSelection, ySyncPluginKey } from "@tiptap/y-tiptap";
+
+type ReadonlyBubbleMenuProps = {
+  editor: Editor;
+};
+
+export const ReadonlyBubbleMenu: FC<ReadonlyBubbleMenuProps> = ({ editor }) => {
+  const { t } = useTranslation();
+  const [showReadOnlyCommentPopup, setShowReadOnlyCommentPopup] = useAtom(
+    showReadOnlyCommentPopupAtom,
+  );
+  const [, setReadOnlyCommentData] = useAtom(readOnlyCommentDataAtom);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const [visible, setVisible] = useState(false);
+  const [position, setPosition] = useState({ top: 0, left: 0 });
+  const isInteractingRef = useRef(false);
+
+  const updateMenuPosition = useCallback(() => {
+    if (isInteractingRef.current) return;
+
+    const pmSelection = editor.state.selection;
+    if (!(pmSelection instanceof TextSelection) || pmSelection.empty) {
+      setVisible(false);
+      return;
+    }
+
+    const selection = window.getSelection();
+    if (
+      !selection ||
+      selection.isCollapsed ||
+      selection.rangeCount === 0 ||
+      showReadOnlyCommentPopup
+    ) {
+      setVisible(false);
+      return;
+    }
+
+    const editorDom = editor.view.dom;
+    if (
+      !editorDom.contains(selection.anchorNode) ||
+      !editorDom.contains(selection.focusNode)
+    ) {
+      setVisible(false);
+      return;
+    }
+
+    const range = selection.getRangeAt(0);
+    const rect = range.getBoundingClientRect();
+
+    if (rect.width === 0) {
+      setVisible(false);
+      return;
+    }
+
+    const editorRect = editorDom
+      .closest(".editor-container")
+      ?.getBoundingClientRect();
+    if (!editorRect) {
+      setVisible(false);
+      return;
+    }
+
+    setPosition({
+      top: rect.top - editorRect.top - 44,
+      left: rect.left - editorRect.left + rect.width / 2,
+    });
+    setVisible(true);
+  }, [editor, showReadOnlyCommentPopup]);
+
+  useEffect(() => {
+    const handleSelectionChange = () => {
+      updateMenuPosition();
+    };
+
+    document.addEventListener("selectionchange", handleSelectionChange);
+    return () => {
+      document.removeEventListener("selectionchange", handleSelectionChange);
+    };
+  }, [updateMenuPosition]);
+
+  useEffect(() => {
+    if (showReadOnlyCommentPopup) {
+      setVisible(false);
+    }
+  }, [showReadOnlyCommentPopup]);
+
+  const handleCommentClick = () => {
+    if (!editor) return;
+
+    const view = editor.view;
+    const ystate = ySyncPluginKey.getState(view.state);
+
+    if (ystate?.binding) {
+      const selection = getRelativeSelection(ystate.binding, view.state);
+      const { from, to } = editor.state.selection;
+      const selectedText = editor.state.doc.textBetween(from, to);
+
+      // @ts-ignore
+      setReadOnlyCommentData({
+        yjsSelection: {
+          anchor: selection.anchor,
+          head: selection.head,
+        },
+        selectedText,
+      });
+
+      setShowReadOnlyCommentPopup(true);
+      setVisible(false);
+    }
+  };
+
+  if (!visible) return null;
+
+  return (
+    <div
+      ref={menuRef}
+      style={{
+        position: "absolute",
+        top: position.top,
+        left: position.left,
+        transform: "translateX(-50%)",
+        zIndex: 199,
+      }}
+    >
+      <div className={classes.bubbleMenu}>
+        <Tooltip label={t("Comment")} withArrow withinPortal={false}>
+          <ActionIcon
+            variant="default"
+            size="lg"
+            radius="6px"
+            aria-label={t("Comment")}
+            style={{ border: "none" }}
+            onMouseDown={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              isInteractingRef.current = true;
+              handleCommentClick();
+              isInteractingRef.current = false;
+            }}
+          >
+            <IconMessage size={16} stroke={2} />
+          </ActionIcon>
+        </Tooltip>
+      </div>
+    </div>
+  );
+};

apps/client/src/features/editor/components/common/editor-paste-handler.tsx

@@ -1,6 +1,7 @@
 import { uploadImageAction } from "@/features/editor/components/image/upload-image-action.tsx";
 import { uploadVideoAction } from "@/features/editor/components/video/upload-video-action.tsx";
 import { uploadAttachmentAction } from "../attachment/upload-attachment-action";
+import { uploadPdfAction } from "../pdf/upload-pdf-action";
 import { createMentionAction } from "@/features/editor/components/link/internal-link-paste.ts";
 import { INTERNAL_LINK_REGEX } from "@/lib/constants.ts";
 import { Editor } from "@tiptap/core";
@@ -12,6 +13,8 @@ import {
 const ATTACHMENT_NODE_TYPES = [
   "image",
   "video",
+  "audio",
+  "pdf",
   "attachment",
   "excalidraw",
   "drawio",
@@ -63,6 +66,7 @@ export const handlePaste = (
       const pos = editor.state.selection.from;
       uploadImageAction(file, editor, pos, pageId);
       uploadVideoAction(file, editor, pos, pageId);
+      uploadPdfAction(file, editor, pos, pageId);
       uploadAttachmentAction(file, editor, pos, pageId);
     }
     return true;
@@ -229,6 +233,7 @@ export const handleFileDrop = (
 
       uploadImageAction(file, editor, coordinates?.pos ?? 0 - 1, pageId);
       uploadVideoAction(file, editor, coordinates?.pos ?? 0 - 1, pageId);
+      uploadPdfAction(file, editor, coordinates?.pos ?? 0 - 1, pageId);
       uploadAttachmentAction(file, editor, coordinates?.pos ?? 0 - 1, pageId);
     }
     return true;

apps/client/src/features/editor/components/common/node-resize-handles.ts

@@ -1,5 +1,5 @@
-import type { ResizableNodeViewDirection } from "@tiptap/core";
 import classes from "./node-resize.module.css";
+import { ResizableNodeViewDirection } from "@docmost/editor-ext";
 
 export function createResizeHandle(
   direction: ResizableNodeViewDirection,

apps/client/src/features/editor/components/common/resizable-wrapper.module.css

@@ -20,8 +20,8 @@
 
 .cornerHandle {
   position: absolute;
-  width: 36px;
-  height: 36px;
+  width: 24px;
+  height: 24px;
   z-index: 2;
   opacity: 0;
   transition: opacity 0.2s ease;
@@ -42,13 +42,13 @@
   }
 
   &::before {
-    width: 28px;
+    width: 20px;
     height: 3px;
   }
 
   &::after {
     width: 3px;
-    height: 28px;
+    height: 20px;
   }
 
   &:hover::before,

apps/client/src/features/editor/components/common/resizable-wrapper.tsx

@@ -74,6 +74,15 @@ export const ResizableWrapper: React.FC<ResizableWrapperProps> = ({
   const constraintsRef = useRef({ minWidth, maxWidth, minHeight, maxHeight });
   constraintsRef.current = { minWidth, maxWidth, minHeight, maxHeight };
 
+  useEffect(() => {
+    if (!dragRef.current && wrapperRef.current) {
+      widthRef.current = initialWidth;
+      heightRef.current = initialHeight;
+      wrapperRef.current.style.width = `${initialWidth}px`;
+      wrapperRef.current.style.height = `${initialHeight}px`;
+    }
+  }, [initialWidth, initialHeight]);
+
   const handleMouseMove = useRef((e: MouseEvent) => {
     const drag = dragRef.current;
     if (!drag || !wrapperRef.current) return;

apps/client/src/features/editor/components/drawio/drawio-menu.tsx

@@ -8,6 +8,7 @@ import {
 } from "@/features/editor/components/table/types/types.ts";
 import {
   ActionIcon,
+  LoadingOverlay,
   Modal,
   Text,
   Tooltip,
@@ -46,6 +47,8 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
   const computedColorScheme = useComputedColorScheme();
   const isDirtyRef = useRef(false);
   const isSavingRef = useRef(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
   const editorState = useEditorState({
     editor,
@@ -140,6 +143,7 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
     if (isSavingRef.current) return;
 
     isSavingRef.current = true;
+    setIsSaving(true);
 
     try {
       const svgString = decodeBase64ToSvgString(svgXml);
@@ -167,6 +171,7 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
       isDirtyRef.current = false;
     } finally {
       isSavingRef.current = false;
+      setIsSaving(false);
     }
   }, [editor, editorState?.attachmentId]);
 
@@ -196,6 +201,7 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
   const handleOpen = useCallback(async () => {
     if (!editorState?.src) return;
 
+    setIsLoading(true);
     try {
       const url = getFileUrl(editorState.src);
       const request = await fetch(url, {
@@ -213,6 +219,7 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
     } catch (err) {
       console.error(err);
     } finally {
+      setIsLoading(false);
       isDirtyRef.current = false;
       open();
     }
@@ -307,6 +314,7 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
               size="lg"
               aria-label={t("Edit")}
               variant="subtle"
+              loading={isLoading}
             >
               <IconEdit size={18} />
             </ActionIcon>
@@ -339,7 +347,8 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
       <Modal.Root opened={opened} onClose={handleClose} fullScreen closeOnEscape={false}>
         <Modal.Overlay />
         <Modal.Content style={{ overflow: "hidden" }}>
-          <Modal.Body>
+          <Modal.Body pos="relative">
+            <LoadingOverlay visible={isSaving} />
             <div style={{ height: "100vh" }}>
               <DrawIoEmbed
                 ref={drawioRef}

apps/client/src/features/editor/components/drawio/drawio-view.tsx

@@ -2,6 +2,7 @@ import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
 import {
   ActionIcon,
   Card,
+  LoadingOverlay,
   Modal,
   Text,
   useComputedColorScheme,
@@ -34,6 +35,7 @@ export default function DrawioView(props: NodeViewProps) {
   const computedColorScheme = useComputedColorScheme();
   const isDirtyRef = useRef(false);
   const isSavingRef = useRef(false);
+  const [isSaving, setIsSaving] = useState(false);
 
   const handleOpen = async () => {
     if (!editor.isEditable) {
@@ -47,6 +49,7 @@ export default function DrawioView(props: NodeViewProps) {
     if (isSavingRef.current) return;
 
     isSavingRef.current = true;
+    setIsSaving(true);
 
     try {
       const svgString = decodeBase64ToSvgString(svgXml);
@@ -79,6 +82,7 @@ export default function DrawioView(props: NodeViewProps) {
       isDirtyRef.current = false;
     } finally {
       isSavingRef.current = false;
+      setIsSaving(false);
     }
   };
 
@@ -136,7 +140,8 @@ export default function DrawioView(props: NodeViewProps) {
       <Modal.Root opened={opened} onClose={handleClose} fullScreen closeOnEscape={false}>
         <Modal.Overlay />
         <Modal.Content style={{ overflow: "hidden" }}>
-          <Modal.Body>
+          <Modal.Body pos="relative">
+            <LoadingOverlay visible={isSaving} />
             <div style={{ height: "100vh" }}>
               <DrawIoEmbed
                 ref={drawioRef}

apps/client/src/features/editor/components/embed/embed-view.tsx

@@ -86,8 +86,8 @@ export default function EmbedView(props: NodeViewProps) {
       {embedUrl ? (
         <div className={classes.embedContainer}>
           <ResizableWrapper
-            initialWidth={nodeWidth || 640}
-            initialHeight={nodeHeight || 480}
+            initialWidth={nodeWidth || 800}
+            initialHeight={nodeHeight || 600}
             minWidth={200}
             maxWidth={1200}
             minHeight={200}
@@ -102,8 +102,9 @@ export default function EmbedView(props: NodeViewProps) {
             <iframe
               className={classes.embedIframe}
               src={sanitizeUrl(embedUrl)}
-              allow="encrypted-media"
-              sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
+              allow="encrypted-media; clipboard-read; clipboard-write; picture-in-picture;"
+              loading="lazy"
+              sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-downloads"
               allowFullScreen
               frameBorder="0"
             />

apps/client/src/features/editor/components/excalidraw/excalidraw-menu.tsx

@@ -56,6 +56,8 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
   const computedColorScheme = useComputedColorScheme();
   const isDirtyRef = useRef(false);
   const isSavingRef = useRef(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
   const isInitialLoadRef = useRef(true);
   const lastFingerprintRef = useRef("");
 
@@ -153,6 +155,7 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
   const handleOpen = useCallback(async () => {
     if (!editorState?.src) return;
 
+    setIsLoading(true);
     try {
       const url = getFileUrl(editorState.src);
       const request = await fetch(url, {
@@ -166,6 +169,7 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
     } catch (err) {
       console.error(err);
     } finally {
+      setIsLoading(false);
       isDirtyRef.current = false;
       isInitialLoadRef.current = true;
       open();
@@ -178,6 +182,7 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
     }
 
     isSavingRef.current = true;
+    setIsSaving(true);
 
     try {
       const { exportToSvg } = await import("@excalidraw/excalidraw");
@@ -223,6 +228,7 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
       isDirtyRef.current = false;
     } finally {
       isSavingRef.current = false;
+      setIsSaving(false);
     }
   }, [editor, excalidrawAPI, editorState?.attachmentId]);
 
@@ -339,6 +345,7 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
               size="lg"
               aria-label={t("Edit")}
               variant="subtle"
+              loading={isLoading}
             >
               <IconEdit size={18} />
             </ActionIcon>
@@ -390,7 +397,7 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
           bg="var(--mantine-color-body)"
           p="xs"
         >
-          <Button onClick={handleSaveAndExit} size={"compact-sm"}>
+          <Button onClick={handleSaveAndExit} size={"compact-sm"} loading={isSaving}>
             {t("Save & Exit")}
           </Button>
           <Button onClick={handleClose} color="red" size={"compact-sm"}>

apps/client/src/features/editor/components/excalidraw/excalidraw-view.tsx

@@ -52,6 +52,7 @@ export default function ExcalidrawView(props: NodeViewProps) {
 
   const isDirtyRef = useRef(false);
   const isSavingRef = useRef(false);
+  const [isSaving, setIsSaving] = useState(false);
   const isInitialLoadRef = useRef(true);
   const lastFingerprintRef = useRef("");
 
@@ -70,6 +71,7 @@ export default function ExcalidrawView(props: NodeViewProps) {
     }
 
     isSavingRef.current = true;
+    setIsSaving(true);
 
     try {
       const { exportToSvg } = await import("@excalidraw/excalidraw");
@@ -120,6 +122,7 @@ export default function ExcalidrawView(props: NodeViewProps) {
       isDirtyRef.current = false;
     } finally {
       isSavingRef.current = false;
+      setIsSaving(false);
     }
   }, [excalidrawAPI, editor, attachmentId, updateAttributes]);
 
@@ -191,7 +194,7 @@ export default function ExcalidrawView(props: NodeViewProps) {
           bg="var(--mantine-color-body)"
           p="xs"
         >
-          <Button onClick={handleSaveAndExit} size={"compact-sm"}>
+          <Button onClick={handleSaveAndExit} size={"compact-sm"} loading={isSaving}>
             {t("Save & Exit")}
           </Button>
           <Button onClick={handleClose} color="red" size={"compact-sm"}>

apps/client/src/features/editor/components/image/image-view.module.css

@@ -5,6 +5,9 @@
   max-width: 100%;
   border-radius: 8px;
   overflow: hidden;
+}
+
+.skeleton {
   animation: pulse 1.2s ease-in-out infinite;
 
   @mixin light {

apps/client/src/features/editor/components/image/image-view.tsx

@@ -33,6 +33,7 @@ export default function ImageView(props: NodeViewProps) {
         className={clsx(
           selected && "ProseMirror-selectednode",
           classes.imageWrapper,
+          !src && placeholder && classes.skeleton,
           alignClass,
         )}
         style={{
@@ -54,7 +55,7 @@ export default function ImageView(props: NodeViewProps) {
             <Loader size={20} pos="absolute" bottom={6} right={6} />
           </Group>
         )}
-        {!src && !previewSrc && (
+        {!src && !previewSrc && placeholder && (
           <Group justify="center" wrap="nowrap" gap="xs" maw="100%" px="md">
             <Loader size={20} style={{ flexShrink: 0 }} />
             <Text component="span" size="sm" truncate="end">

apps/client/src/features/editor/components/link/link-menu.tsx

@@ -5,7 +5,7 @@ import { useAtom } from "jotai";
 import { isTextSelected } from "@docmost/editor-ext";
 import { showLinkMenuAtom } from "@/features/editor/atoms/editor-atoms";
 import { LinkEditorPanel } from "@/features/editor/components/link/link-editor-panel";
-import { normalizeUrl } from "@/features/editor/components/link/link-view";
+import { normalizeUrl } from "@/lib/utils";
 import { TextSelection } from "@tiptap/pm/state";
 import { Paper } from "@mantine/core";
 

apps/client/src/features/editor/components/link/link-view.tsx

@@ -29,12 +29,7 @@ import { useSharePageQuery } from "@/features/share/queries/share-query.ts";
 import { buildSharedPageUrl } from "@/features/page/page.utils.ts";
 import { extractPageSlugId } from "@/lib";
 import { sanitizeUrl, copyToClipboard } from "@docmost/editor-ext";
-
-export const normalizeUrl = (url: string): string => {
-  if (!url) return url;
-  if (url.startsWith("/") || /^(\S+):(\/\/)?\S+$/.test(url)) return url;
-  return `https://${url}`;
-};
+import { normalizeUrl } from "@/lib/utils";
 
 const parseInternalLink = (
   href: string,

apps/client/src/features/editor/components/mention/mention-list.tsx

@@ -62,7 +62,7 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
     query: props.query,
     includeUsers: true,
     includePages: true,
-    spaceId: space.id,
+    spaceId: space?.id,
     limit: props.query ? 10 : 5,
     preload: true,
   });
@@ -294,6 +294,7 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
         w={popupWidth}
         scrollbars={"y"}
         scrollbarSize={6}
+        overscrollBehavior={"contain"}
         styles={{ content: { minWidth: 0 } }}
       >
         {renderItems?.map((item, index) => {

apps/client/src/features/editor/components/mention/mention-suggestion.ts

@@ -53,8 +53,8 @@ const mentionRenderItems = () => {
       const editorDom = props.editor?.view?.dom;
       const asideEl = editorDom?.closest(".mantine-AppShell-aside");
       const dialogEl = editorDom?.closest("[data-comment-dialog]");
-      const isInCommentContext = !!(asideEl || dialogEl);
-     // const isInCommentContext = !!asideEl;
+      const chatInput = editorDom?.closest("[data-chat-input]");
+      const isInCommentContext = !!(asideEl || dialogEl || chatInput);
 
       component = new ReactRenderer(MentionList, {
         props: { ...props, isInCommentContext },

apps/client/src/features/editor/components/pdf/pdf-menu.tsx

@@ -0,0 +1,145 @@
+import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
+import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
+import { useCallback } from "react";
+import { Node as PMNode } from "@tiptap/pm/model";
+import {
+  EditorMenuProps,
+  ShouldShowProps,
+} from "@/features/editor/components/table/types/types.ts";
+import { ActionIcon, Tooltip } from "@mantine/core";
+import {
+  IconPaperclip,
+  IconTrash,
+} from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import classes from "../common/toolbar-menu.module.css";
+
+export function PdfMenu({ editor }: EditorMenuProps) {
+  const { t } = useTranslation();
+
+  const editorState = useEditorState({
+    editor,
+    selector: (ctx) => {
+      if (!ctx.editor) {
+        return null;
+      }
+
+      const pdfAttrs = ctx.editor.getAttributes("pdf");
+
+      return {
+        isPdf: ctx.editor.isActive("pdf"),
+        src: pdfAttrs?.src || null,
+        name: pdfAttrs?.name || null,
+        attachmentId: pdfAttrs?.attachmentId || null,
+      };
+    },
+  });
+
+  const shouldShow = useCallback(
+    ({ state }: ShouldShowProps) => {
+      if (!state || !editor.isActive("pdf")) {
+        return false;
+      }
+
+      const { selection } = state;
+      const dom = editor.view.nodeDOM(selection.from) as HTMLElement | null;
+      if (!dom) return false;
+
+      return !!dom.querySelector("[data-pdf-error]");
+    },
+    [editor],
+  );
+
+  const getReferencedVirtualElement = useCallback(() => {
+    if (!editor) return;
+    const { selection } = editor.state;
+    const predicate = (node: PMNode) => node.type.name === "pdf";
+    const parent = findParentNode(predicate)(selection);
+
+    if (parent) {
+      const dom = editor.view.nodeDOM(parent?.pos) as HTMLElement;
+      const domRect = dom.getBoundingClientRect();
+      return {
+        getBoundingClientRect: () => domRect,
+        getClientRects: () => [domRect],
+      };
+    }
+
+    const domRect = posToDOMRect(editor.view, selection.from, selection.to);
+    return {
+      getBoundingClientRect: () => domRect,
+      getClientRects: () => [domRect],
+    };
+  }, [editor]);
+
+  const handleConvertToAttachment = useCallback(() => {
+    if (!editorState?.src) return;
+
+    const { selection } = editor.state;
+    const { from } = selection;
+    const node = editor.state.doc.nodeAt(from);
+    if (!node || node.type.name !== "pdf") return;
+
+    editor
+      .chain()
+      .insertContentAt(
+        { from, to: from + node.nodeSize },
+        {
+          type: "attachment",
+          attrs: {
+            url: node.attrs.src,
+            name: node.attrs.name,
+            attachmentId: node.attrs.attachmentId,
+            size: node.attrs.size,
+            mime: "application/pdf",
+          },
+        },
+      )
+      .run();
+  }, [editor, editorState]);
+
+  const handleDelete = useCallback(() => {
+    editor.commands.deleteSelection();
+  }, [editor]);
+
+  return (
+    <BaseBubbleMenu
+      editor={editor}
+      pluginKey={`pdf-menu`}
+      updateDelay={0}
+      getReferencedVirtualElement={getReferencedVirtualElement}
+      options={{
+        placement: "top",
+        offset: 8,
+        flip: false,
+      }}
+      shouldShow={shouldShow}
+    >
+      <div className={classes.toolbar}>
+        <Tooltip position="top" label={t("Convert to attachment")} withinPortal={false}>
+          <ActionIcon
+            onClick={handleConvertToAttachment}
+            size="lg"
+            aria-label={t("Convert to attachment")}
+            variant="subtle"
+          >
+            <IconPaperclip size={18} />
+          </ActionIcon>
+        </Tooltip>
+
+        <Tooltip position="top" label={t("Delete")} withinPortal={false}>
+          <ActionIcon
+            onClick={handleDelete}
+            size="lg"
+            aria-label={t("Delete")}
+            variant="subtle"
+          >
+            <IconTrash size={18} />
+          </ActionIcon>
+        </Tooltip>
+      </div>
+    </BaseBubbleMenu>
+  );
+}
+
+export default PdfMenu;

apps/client/src/features/editor/components/pdf/pdf-view.module.css

@@ -0,0 +1,100 @@
+.pdfWrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  max-width: 100%;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.skeleton {
+  animation: pulse 1.2s ease-in-out infinite;
+
+  @mixin light {
+    background: linear-gradient(-90deg, var(--mantine-color-gray-3) 0%, var(--mantine-color-gray-1) 50%, var(--mantine-color-gray-3) 100%);
+    background-size: 400% 400%;
+  }
+
+  @mixin dark {
+    background: linear-gradient(-90deg, var(--mantine-color-dark-6) 0%, var(--mantine-color-dark-5) 50%, var(--mantine-color-dark-6) 100%);
+    background-size: 400% 400%;
+  }
+
+  @keyframes pulse {
+    0% {
+      background-position: 0% 0%;
+    }
+    100% {
+      background-position: -135% 0%;
+    }
+  }
+}
+
+.pdfContainer {
+  display: flex;
+  justify-content: center;
+}
+
+.pdfResizeWrapper {
+  @mixin light {
+    background-color: var(--mantine-color-gray-0);
+  }
+
+  @mixin dark {
+    background-color: var(--mantine-color-dark-7);
+  }
+}
+
+.pdfIframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  border-radius: 8px;
+}
+
+.hoverMenu {
+  position: absolute;
+  top: 56px;
+  right: 8px;
+  z-index: 2;
+  display: flex;
+  gap: 4px;
+  padding: 4px;
+  border-radius: 6px;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.hoverMenu::before {
+  content: "";
+  position: absolute;
+  inset: -12px;
+}
+
+.hoverMenu:hover {
+  opacity: 1;
+}
+
+.pdfResizeWrapper:hover .hoverMenu {
+  opacity: 1;
+}
+
+.pdfError {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px 32px;
+  border-radius: 8px;
+  cursor: pointer;
+
+  @mixin light {
+    background-color: var(--mantine-color-gray-0);
+  }
+
+  @mixin dark {
+    background-color: var(--mantine-color-dark-7);
+  }
+}

apps/client/src/features/editor/components/pdf/pdf-view.tsx

@@ -0,0 +1,170 @@
+import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
+import { ActionIcon, Group, Loader, Text, Tooltip } from "@mantine/core";
+import { useCallback, useMemo, useState } from "react";
+import { getFileUrl } from "@/lib/config.ts";
+import { ResizableWrapper } from "../common/resizable-wrapper";
+import clsx from "clsx";
+import classes from "./pdf-view.module.css";
+import { useTranslation } from "react-i18next";
+import { isInternalFileUrl } from "@docmost/editor-ext";
+import {
+  IconFileTypePdf,
+  IconPaperclip,
+  IconTrash,
+} from "@tabler/icons-react";
+
+export default function PdfView(props: NodeViewProps) {
+  const { t } = useTranslation();
+  const { editor, node, getPos, selected, updateAttributes } = props;
+  const { src, placeholder, width: nodeWidth, height: nodeHeight } = node.attrs;
+  const [hasError, setHasError] = useState(false);
+
+  const safeSrc = useMemo(() => {
+    if (!src || !isInternalFileUrl(src)) return null;
+    return getFileUrl(src);
+  }, [src]);
+
+  const handleSelect = useCallback(() => {
+    const pos = getPos();
+    if (pos !== undefined) {
+      editor.commands.setNodeSelection(pos);
+    }
+  }, [editor, getPos]);
+
+  const handleResize = useCallback(
+    (newWidth: number, newHeight: number) => {
+      updateAttributes({ width: newWidth, height: newHeight });
+    },
+    [updateAttributes],
+  );
+
+  const handleConvertToAttachment = useCallback(() => {
+    if (!src) return;
+    const pos = getPos();
+    if (pos === undefined) return;
+    const currentNode = editor.state.doc.nodeAt(pos);
+    if (!currentNode || currentNode.type.name !== "pdf") return;
+
+    editor
+      .chain()
+      .insertContentAt(
+        { from: pos, to: pos + currentNode.nodeSize },
+        {
+          type: "attachment",
+          attrs: {
+            url: currentNode.attrs.src,
+            name: currentNode.attrs.name,
+            attachmentId: currentNode.attrs.attachmentId,
+            size: currentNode.attrs.size,
+            mime: "application/pdf",
+          },
+        },
+      )
+      .run();
+  }, [editor, src, getPos]);
+
+  const handleDelete = useCallback(() => {
+    const pos = getPos();
+    if (pos === undefined) return;
+    editor.commands.setNodeSelection(pos);
+    editor.commands.deleteSelection();
+  }, [editor, getPos]);
+
+  if (!src || !safeSrc) {
+    return (
+      <NodeViewWrapper data-drag-handle>
+        <div className={`${classes.pdfWrapper} ${placeholder ? classes.skeleton : ''}`} style={{ height: placeholder ? 600 : undefined }}>
+          {placeholder && (
+            <Group justify="center" wrap="nowrap" gap="xs" maw="100%" px="md">
+              <Loader size={20} style={{ flexShrink: 0 }} />
+              <Text component="span" size="sm" truncate="end">
+                {placeholder?.name
+                  ? t("Uploading {{name}}", { name: placeholder.name })
+                  : t("Uploading file")}
+              </Text>
+            </Group>
+          )}
+        </div>
+      </NodeViewWrapper>
+    );
+  }
+
+  if (hasError) {
+    return (
+      <NodeViewWrapper data-drag-handle>
+        <div data-pdf-error className={clsx(classes.pdfError, { "ProseMirror-selectednode": selected })} onClick={handleSelect}>
+          <IconFileTypePdf size={32} stroke={1.5} />
+          <Text size="sm" c="dimmed">
+            {t("Failed to load PDF")}
+          </Text>
+        </div>
+      </NodeViewWrapper>
+    );
+  }
+
+  return (
+    <NodeViewWrapper data-drag-handle className={classes.pdfNodeView}>
+      <div className={classes.pdfContainer}>
+        <ResizableWrapper
+          initialWidth={nodeWidth || 800}
+          initialHeight={nodeHeight || 600}
+          minWidth={200}
+          maxWidth={1200}
+          minHeight={200}
+          maxHeight={1200}
+          onResize={handleResize}
+          isEditable={editor.isEditable}
+          selected={selected}
+          className={clsx(classes.pdfResizeWrapper, {
+            "ProseMirror-selectednode": selected,
+          })}
+        >
+          <iframe
+            className={classes.pdfIframe}
+            src={safeSrc}
+            loading="lazy"
+            frameBorder="0"
+            onError={() => setHasError(true)}
+            onLoad={(e) => {
+              try {
+                const iframe = e.currentTarget;
+                const status = iframe.contentDocument?.querySelector("pre")?.textContent;
+                if (status && status.includes('"statusCode":404')) {
+                  setHasError(true);
+                }
+              } catch {
+                // cross-origin - can't inspect, assume OK
+              }
+            }}
+          />
+          {editor.isEditable && (
+            <div className={classes.hoverMenu}>
+              <Tooltip position="top" label={t("Convert to attachment")} withinPortal>
+                <ActionIcon
+                  size="sm"
+                  variant="filled"
+                  color="dark"
+                  onClick={handleConvertToAttachment}
+                  aria-label={t("Convert to attachment")}
+                >
+                  <IconPaperclip size={14} />
+                </ActionIcon>
+              </Tooltip>
+              <Tooltip position="top" label={t("Delete")} withinPortal>
+                <ActionIcon
+                  size="sm"
+                  variant="filled"
+                  color="dark"
+                  onClick={handleDelete}
+                  aria-label={t("Delete")}
+                >
+                  <IconTrash size={14} />
+                </ActionIcon>
+              </Tooltip>
+            </div>
+          )}
+        </ResizableWrapper>
+      </div>
+    </NodeViewWrapper>
+  );
+}

apps/client/src/features/editor/components/pdf/upload-pdf-action.tsx

@@ -0,0 +1,36 @@
+import { handlePdfUpload } from "@docmost/editor-ext";
+import { uploadFile } from "@/features/page/services/page-service.ts";
+import { notifications } from "@mantine/notifications";
+import { getFileUploadSizeLimit } from "@/lib/config.ts";
+import { formatBytes } from "@/lib";
+import i18n from "@/i18n.ts";
+
+export const uploadPdfAction = handlePdfUpload({
+  onUpload: async (file: File, pageId: string): Promise<any> => {
+    try {
+      return await uploadFile(file, pageId);
+    } catch (err) {
+      notifications.show({
+        color: "red",
+        message: err?.response.data.message,
+      });
+      throw err;
+    }
+  },
+  validateFn: (file) => {
+    if (file.type !== "application/pdf") {
+      return false;
+    }
+
+    if (file.size > getFileUploadSizeLimit()) {
+      notifications.show({
+        color: "red",
+        message: i18n.t("File exceeds the {{limit}} attachment limit", {
+          limit: formatBytes(getFileUploadSizeLimit()),
+        }),
+      });
+      return false;
+    }
+    return true;
+  },
+});

apps/client/src/features/editor/components/slash-menu/command-list.tsx

@@ -87,7 +87,13 @@ const CommandList = ({
 
   return flatItems.length > 0 ? (
     <Paper id="slash-command" shadow="md" p="xs" withBorder>
-      <ScrollArea viewportRef={viewportRef} h={350} w={270} scrollbarSize={8}>
+      <ScrollArea
+        viewportRef={viewportRef}
+        h={350}
+        w={270}
+        scrollbarSize={8}
+        overscrollBehavior="contain"
+      >
         {Object.entries(items).map(([category, categoryItems]) => (
           <div key={category}>
             <Text c="dimmed" mb={4} fw={500} tt="capitalize">
@@ -103,10 +109,7 @@ const CommandList = ({
                 })}
               >
                 <Group>
-                  <ActionIcon
-                    variant="default"
-                    component="div"
-                  >
+                  <ActionIcon variant="default" component="div">
                     <item.icon size={18} />
                   </ActionIcon>
 

apps/client/src/features/editor/components/slash-menu/menu-items.ts

@@ -12,7 +12,9 @@ import {
   IconMath,
   IconMathFunction,
   IconMovie,
+  IconMusic,
   IconPaperclip,
+  IconFileTypePdf,
   IconPhoto,
   IconTable,
   IconTypography,
@@ -30,7 +32,9 @@ import {
 } from "@/features/editor/components/slash-menu/types";
 import { uploadImageAction } from "@/features/editor/components/image/upload-image-action.tsx";
 import { uploadVideoAction } from "@/features/editor/components/video/upload-video-action.tsx";
+import { uploadAudioAction } from "@/features/editor/components/audio/upload-audio-action.tsx";
 import { uploadAttachmentAction } from "@/features/editor/components/attachment/upload-attachment-action.tsx";
+import { uploadPdfAction } from "@/features/editor/components/pdf/upload-pdf-action.tsx";
 import IconExcalidraw from "@/components/icons/icon-excalidraw";
 import IconMermaid from "@/components/icons/icon-mermaid";
 import IconDrawio from "@/components/icons/icon-drawio";
@@ -161,7 +165,7 @@ const CommandGroups: SlashMenuGroupedItemsType = {
     {
       title: "Image",
       description: "Upload any image from your device.",
-      searchTerms: ["photo", "picture", "media"],
+      searchTerms: ["photo", "picture", "media", "file", "attachment"],
       icon: IconPhoto,
       command: ({ editor, range }) => {
         editor.chain().focus().deleteRange(range).run();
@@ -194,7 +198,7 @@ const CommandGroups: SlashMenuGroupedItemsType = {
     {
       title: "Video",
       description: "Upload any video from your device.",
-      searchTerms: ["video", "mp4", "media"],
+      searchTerms: ["video", "mp4", "media", "file", "attachment"],
       icon: IconMovie,
       command: ({ editor, range }) => {
         editor.chain().focus().deleteRange(range).run();
@@ -224,10 +228,74 @@ const CommandGroups: SlashMenuGroupedItemsType = {
         input.click();
       },
     },
+    {
+      title: "Audio",
+      description: "Upload any audio from your device.",
+      searchTerms: ["audio", "music", "sound", "mp3", "media", "file", "attachment"],
+      icon: IconMusic,
+      command: ({ editor, range }) => {
+        editor.chain().focus().deleteRange(range).run();
+
+        // @ts-ignore
+        const pageId = editor.storage?.pageId;
+        if (!pageId) return;
+
+        // upload audio
+        const input = document.createElement("input");
+        input.type = "file";
+        input.accept = "audio/*";
+        input.multiple = true;
+        input.style.display = "none";
+        document.body.appendChild(input);
+        input.onchange = async () => {
+          if (input.files?.length) {
+            for (const file of input.files) {
+              const pos = editor.view.state.selection.from;
+
+              uploadAudioAction(file, editor, pos, pageId);
+            }
+          }
+
+          input.remove();
+        };
+        input.click();
+      },
+    },
+    {
+      title: "Embed PDF",
+      description: "Upload and embed a PDF file.",
+      searchTerms: ["pdf", "document", "embed"],
+      icon: IconFileTypePdf,
+      command: ({ editor, range }) => {
+        editor.chain().focus().deleteRange(range).run();
+
+        // @ts-ignore
+        const pageId = editor.storage?.pageId;
+        if (!pageId) return;
+
+        const input = document.createElement("input");
+        input.type = "file";
+        input.accept = "application/pdf";
+        input.style.display = "none";
+        document.body.appendChild(input);
+        input.onchange = async () => {
+          if (input.files?.length) {
+            for (const file of input.files) {
+              const pos = editor.view.state.selection.from;
+
+              uploadPdfAction(file, editor, pos, pageId);
+            }
+          }
+
+          input.remove();
+        };
+        input.click();
+      },
+    },
     {
       title: "File attachment",
       description: "Upload any file from your device.",
-      searchTerms: ["file", "attachment", "upload", "pdf", "csv", "zip"],
+      searchTerms: ["file", "attachment", "upload", "csv", "zip"],
       icon: IconPaperclip,
       command: ({ editor, range }) => {
         editor.chain().focus().deleteRange(range).run();
@@ -359,7 +427,7 @@ const CommandGroups: SlashMenuGroupedItemsType = {
         editor.chain().focus().deleteRange(range).setDrawio().run(),
     },
     {
-      title: "Excalidraw diagram",
+      title: "Excalidraw (Whiteboard)",
       description: "Draw and sketch excalidraw diagrams",
       searchTerms: ["diagrams", "draw", "sketch", "whiteboard"],
       icon: IconExcalidraw,
@@ -548,7 +616,7 @@ const CommandGroups: SlashMenuGroupedItemsType = {
     {
       title: "YouTube",
       description: "Embed YouTube video",
-      searchTerms: ["youtube", "yt"],
+      searchTerms: ["youtube", "yt", "media", "video"],
       icon: YoutubeIcon,
       command: ({ editor, range }: CommandProps) => {
         editor
@@ -650,7 +718,11 @@ export const getSuggestionItems = ({
     });
 
     if (filteredItems.length) {
-      filteredGroups[group] = filteredItems;
+      filteredGroups[group] = filteredItems.sort((a, b) => {
+        const aTitle = a.title.toLowerCase().includes(search) ? 0 : 1;
+        const bTitle = b.title.toLowerCase().includes(search) ? 0 : 1;
+        return aTitle - bTitle;
+      });
     }
   }
 

apps/client/src/features/editor/components/slash-menu/render-items.ts

@@ -49,7 +49,7 @@ const renderItems = () => {
       getReferenceClientRect = props.clientRect;
 
       popup = document.createElement("div");
-      popup.style.zIndex = "9999";
+      popup.style.zIndex = "199";
       popup.style.position = "absolute";
       popup.style.top = "0";
       popup.style.left = "0";

apps/client/src/features/editor/components/table/table-menu.tsx

@@ -34,7 +34,7 @@ export const TableMenu = React.memo(
         if (isTextSelected(editor)) return false;
         return editor.isActive("table") && !isCellSelection(state.selection);
       },
-      [editor]
+      [editor],
     );
 
     const getReferencedVirtualElement = useCallback(() => {
@@ -121,7 +121,11 @@ export const TableMenu = React.memo(
         shouldShow={shouldShow}
       >
         <div className={classes.toolbar}>
-          <Tooltip position="top" label={t("Add left column")}>
+          <Tooltip
+            position="top"
+            label={t("Add left column")}
+            withinPortal={false}
+          >
             <ActionIcon
               onClick={addColumnLeft}
               variant="subtle"
@@ -132,7 +136,11 @@ export const TableMenu = React.memo(
             </ActionIcon>
           </Tooltip>
 
-          <Tooltip position="top" label={t("Add right column")}>
+          <Tooltip
+            position="top"
+            label={t("Add right column")}
+            withinPortal={false}
+          >
             <ActionIcon
               onClick={addColumnRight}
               variant="subtle"
@@ -143,7 +151,11 @@ export const TableMenu = React.memo(
             </ActionIcon>
           </Tooltip>
 
-          <Tooltip position="top" label={t("Delete column")}>
+          <Tooltip
+            position="top"
+            label={t("Delete column")}
+            withinPortal={false}
+          >
             <ActionIcon
               onClick={deleteColumn}
               variant="subtle"
@@ -156,7 +168,11 @@ export const TableMenu = React.memo(
 
           <div className={classes.divider} />
 
-          <Tooltip position="top" label={t("Add row above")}>
+          <Tooltip
+            position="top"
+            label={t("Add row above")}
+            withinPortal={false}
+          >
             <ActionIcon
               onClick={addRowAbove}
               variant="subtle"
@@ -167,7 +183,11 @@ export const TableMenu = React.memo(
             </ActionIcon>
           </Tooltip>
 
-          <Tooltip position="top" label={t("Add row below")}>
+          <Tooltip
+            position="top"
+            label={t("Add row below")}
+            withinPortal={false}
+          >
             <ActionIcon
               onClick={addRowBelow}
               variant="subtle"
@@ -178,7 +198,7 @@ export const TableMenu = React.memo(
             </ActionIcon>
           </Tooltip>
 
-          <Tooltip position="top" label={t("Delete row")}>
+          <Tooltip position="top" label={t("Delete row")} withinPortal={false}>
             <ActionIcon
               onClick={deleteRow}
               variant="subtle"
@@ -191,7 +211,11 @@ export const TableMenu = React.memo(
 
           <div className={classes.divider} />
 
-          <Tooltip position="top" label={t("Toggle header row")}>
+          <Tooltip
+            position="top"
+            label={t("Toggle header row")}
+            withinPortal={false}
+          >
             <ActionIcon
               onClick={toggleHeaderRow}
               variant="subtle"
@@ -202,7 +226,11 @@ export const TableMenu = React.memo(
             </ActionIcon>
           </Tooltip>
 
-          <Tooltip position="top" label={t("Toggle header column")}>
+          <Tooltip
+            position="top"
+            label={t("Toggle header column")}
+            withinPortal={false}
+          >
             <ActionIcon
               onClick={toggleHeaderColumn}
               variant="subtle"
@@ -215,7 +243,11 @@ export const TableMenu = React.memo(
 
           <div className={classes.divider} />
 
-          <Tooltip position="top" label={t("Delete table")}>
+          <Tooltip
+            position="top"
+            label={t("Delete table")}
+            withinPortal={false}
+          >
             <ActionIcon
               onClick={deleteTable}
               variant="subtle"
@@ -228,7 +260,7 @@ export const TableMenu = React.memo(
         </div>
       </BubbleMenu>
     );
-  }
+  },
 );
 
 export default TableMenu;

apps/client/src/features/editor/components/video/video-view.module.css

@@ -5,6 +5,9 @@
   max-width: 100%;
   border-radius: 8px;
   overflow: hidden;
+}
+
+.skeleton {
   animation: pulse 1.2s ease-in-out infinite;
 
   @mixin light {
@@ -26,6 +29,7 @@
     }
   }
 }
+
 .video {
   display: block;
   width: 100%;

apps/client/src/features/editor/components/video/video-view.tsx

@@ -33,6 +33,7 @@ export default function VideoView(props: NodeViewProps) {
         className={clsx(
           selected && "ProseMirror-selectednode",
           classes.videoWrapper,
+          !src && placeholder && classes.skeleton,
           alignClass,
         )}
         style={{
@@ -59,7 +60,7 @@ export default function VideoView(props: NodeViewProps) {
             <Loader size={20} pos="absolute" top={6} right={6} />
           </Group>
         )}
-        {!src && !previewSrc && (
+        {!src && !previewSrc && placeholder && (
           <Group justify="center" wrap="nowrap" gap="xs" maw="100%" px="md">
             <Loader size={20} style={{ flexShrink: 0 }} />
             <Text component="span" size="sm" truncate="end">
@@ -69,6 +70,9 @@ export default function VideoView(props: NodeViewProps) {
             </Text>
           </Group>
         )}
+        {!src && !previewSrc && !placeholder && (
+          <video className={classes.video} controls />
+        )}
       </div>
     </NodeViewWrapper>
   );

apps/client/src/features/editor/extensions/autojoiner.ts

@@ -0,0 +1,105 @@
+// https://github.com/NiclasDev63/tiptap-extension-auto-joiner - MIT
+import { Extension } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { canJoin } from "@tiptap/pm/transform";
+import { getNodeType } from "@tiptap/react";
+import { NodeType } from "@tiptap/pm/model";
+import { Transaction } from "@tiptap/pm/state";
+
+// https://discuss.prosemirror.net/t/how-to-autojoin-all-the-time/2957/4
+// Adapted from prosemirror-commands wrapDispatchForJoin
+function autoJoin(
+  transactions: readonly Transaction[],
+  newTr: Transaction,
+  nodeTypes: NodeType[]
+) {
+  // Collect changed ranges across all transactions, mapping earlier ranges
+  // forward through later mappings so every position lands in newTr.doc space.
+  let ranges: number[] = [];
+  for (const tr of transactions) {
+    for (let i = 0; i < tr.mapping.maps.length; i++) {
+      let map = tr.mapping.maps[i];
+      if (!map) continue;
+      for (let j = 0; j < ranges.length; j++) ranges[j] = map.map(ranges[j]!);
+      map.forEach((_s, _e, from, to) => ranges.push(from, to));
+    }
+  }
+
+  // Figure out which joinable points exist inside those ranges,
+  // by checking all node boundaries in their parent nodes.
+  // Resolve against newTr.doc — the same document we will join on.
+  let joinable: number[] = [];
+  for (let i = 0; i < ranges.length; i += 2) {
+    let from = ranges[i]!,
+      to = ranges[i + 1]!;
+    let $from = newTr.doc.resolve(from),
+      depth = $from.sharedDepth(to),
+      parent = $from.node(depth);
+    for (
+      let index = $from.indexAfter(depth), pos = $from.after(depth + 1);
+      pos <= to;
+      ++index
+    ) {
+      let after = parent.maybeChild(index);
+      if (!after) break;
+      if (index && joinable.indexOf(pos) == -1) {
+        let before = parent.child(index - 1);
+        if (before.type == after.type && nodeTypes.includes(before.type))
+          joinable.push(pos);
+      }
+      pos += after.nodeSize;
+    }
+  }
+
+  // Join the joinable points (reverse order to preserve earlier positions)
+  let joined = false;
+  joinable.sort((a, b) => a - b);
+  for (let i = joinable.length - 1; i >= 0; i--) {
+    if (canJoin(newTr.doc, joinable[i]!)) {
+      newTr.join(joinable[i]!);
+      joined = true;
+    }
+  }
+
+  return joined;
+}
+
+export interface AutoJoinerOptions {
+  elementsToJoin: string[];
+}
+
+const AutoJoiner = Extension.create<AutoJoinerOptions>({
+  name: "autoJoiner",
+
+  addOptions() {
+    return {
+      elementsToJoin: [],
+    };
+  },
+
+  addProseMirrorPlugins() {
+    const plugin = new PluginKey(this.name);
+    const joinableNodes = [
+      this.editor.schema.nodes.bulletList,
+      this.editor.schema.nodes.orderedList,
+    ];
+    this.options.elementsToJoin.forEach((element) => {
+      const nodeTyp = getNodeType(element, this.editor.schema);
+      joinableNodes.push(nodeTyp);
+    });
+
+    return [
+      new Plugin({
+        key: plugin,
+        appendTransaction(transactions, _, newState) {
+          let newTr = newState.tr;
+          if (autoJoin(transactions, newTr, joinableNodes as NodeType[])) {
+            return newTr;
+          }
+        },
+      }),
+    ];
+  },
+});
+
+export default AutoJoiner;

apps/client/src/features/editor/extensions/extensions.ts

@@ -32,6 +32,7 @@ import {
   TiptapImage,
   Callout,
   TiptapVideo,
+  TiptapAudio,
   LinkExtension,
   Selection,
   Attachment,
@@ -39,6 +40,7 @@ import {
   Drawio,
   Excalidraw,
   Embed,
+  TiptapPdf,
   SearchAndReplace,
   Mention,
   TableDndExtension,
@@ -70,11 +72,13 @@ import ImageView from "@/features/editor/components/image/image-view.tsx";
 import CalloutView from "@/features/editor/components/callout/callout-view.tsx";
 import StatusView from "@/features/editor/components/status/status-view.tsx";
 import VideoView from "@/features/editor/components/video/video-view.tsx";
+import AudioView from "@/features/editor/components/audio/audio-view.tsx";
 import AttachmentView from "@/features/editor/components/attachment/attachment-view.tsx";
 import CodeBlockView from "@/features/editor/components/code-block/code-block-view.tsx";
 import DrawioView from "../components/drawio/drawio-view";
 import ExcalidrawView from "@/features/editor/components/excalidraw/excalidraw-view.tsx";
 import EmbedView from "@/features/editor/components/embed/embed-view.tsx";
+import PdfView from "@/features/editor/components/pdf/pdf-view.tsx";
 import SubpagesView from "@/features/editor/components/subpages/subpages-view.tsx";
 import { common, createLowlight } from "lowlight";
 import plaintext from "highlight.js/lib/languages/plaintext";
@@ -95,6 +99,7 @@ import i18n from "@/i18n.ts";
 import { MarkdownClipboard } from "@/features/editor/extensions/markdown-clipboard.ts";
 import EmojiCommand from "./emoji-command";
 import { countWords } from "alfaaz";
+import AutoJoiner from "@/features/editor/extensions/autojoiner.ts";
 
 const lowlight = createLowlight(common);
 lowlight.register("mermaid", plaintext);
@@ -139,6 +144,25 @@ export const mainExtensions = [
         }),
       ];
     },
+    addKeyboardShortcuts() {
+      return {
+        Enter: ({ editor }) => {
+          const { from, to } = editor.state.selection;
+          if (from !== to) return false;
+          if (!editor.isActive("code")) return false;
+
+          const $from = editor.state.doc.resolve(from);
+          const codeType = editor.state.schema.marks.code;
+          const nodeAfter = $from.nodeAfter;
+
+          if (nodeAfter && codeType.isInSet(nodeAfter.marks)) {
+            return false;
+          }
+
+          return editor.chain().unsetCode().splitBlock().run();
+        },
+      };
+    },
   }),
   SharedStorage,
   Heading,
@@ -250,8 +274,8 @@ export const mainExtensions = [
     resize: {
       enabled: true,
       directions: ["left", "right"],
-      minWidth: 80,
-      minHeight: 40,
+      minWidth: 24,
+      minHeight: 16,
       alwaysPreserveAspectRatio: true,
       //@ts-ignore
       createCustomHandle: createImageHandle,
@@ -263,14 +287,17 @@ export const mainExtensions = [
     resize: {
       enabled: true,
       directions: ["left", "right"],
-      minWidth: 80,
-      minHeight: 40,
+      minWidth: 24,
+      minHeight: 16,
       alwaysPreserveAspectRatio: true,
       //@ts-ignore
       createCustomHandle: createResizeHandle,
       className: buildResizeClasses("node-video"),
     },
   }),
+  TiptapAudio.configure({
+    view: AudioView,
+  }),
   Callout.configure({
     view: CalloutView,
   }),
@@ -291,8 +318,8 @@ export const mainExtensions = [
     resize: {
       enabled: true,
       directions: ["left", "right"],
-      minWidth: 80,
-      minHeight: 40,
+      minWidth: 24,
+      minHeight: 16,
       alwaysPreserveAspectRatio: true,
       //@ts-ignore
       createCustomHandle: createResizeHandle,
@@ -304,8 +331,8 @@ export const mainExtensions = [
     resize: {
       enabled: true,
       directions: ["left", "right"],
-      minWidth: 80,
-      minHeight: 40,
+      minWidth: 24,
+      minHeight: 16,
       alwaysPreserveAspectRatio: true,
       //@ts-ignore
       createCustomHandle: createResizeHandle,
@@ -315,6 +342,9 @@ export const mainExtensions = [
   Embed.configure({
     view: EmbedView,
   }),
+  TiptapPdf.configure({
+    view: PdfView,
+  }),
   Subpages.configure({
     view: SubpagesView,
   }),
@@ -345,6 +375,9 @@ export const mainExtensions = [
   }).configure(),
   Columns,
   Column,
+  AutoJoiner.configure({
+    elementsToJoin: [],
+  }),
 ] as any;
 
 type CollabExtensions = (provider: HocuspocusProvider, user: IUser) => any[];

apps/client/src/features/editor/extensions/markdown-clipboard.ts

@@ -1,9 +1,9 @@
 // adapted from: https://github.com/aguingand/tiptap-markdown/blob/main/src/extensions/tiptap/clipboard.js - MIT
 import { Extension } from "@tiptap/core";
-import { Plugin, PluginKey } from "@tiptap/pm/state";
-import { DOMParser } from "@tiptap/pm/model";
+import { Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
+import { DOMParser, DOMSerializer, Fragment, Slice } from "@tiptap/pm/model";
 import { find } from "linkifyjs";
-import { markdownToHtml } from "@docmost/editor-ext";
+import { markdownToHtml, htmlToMarkdown } from "@docmost/editor-ext";
 
 export const MarkdownClipboard = Extension.create({
   name: "markdownClipboard",
@@ -19,6 +19,27 @@ export const MarkdownClipboard = Extension.create({
       new Plugin({
         key: new PluginKey("markdownClipboard"),
         props: {
+          clipboardTextSerializer: (slice) => {
+            const listTypes = ["bulletList", "orderedList", "taskList"];
+            let topLevelCount = 0;
+            let hasList = false;
+            slice.content.forEach((node) => {
+              if (listTypes.includes(node.type.name)) {
+                hasList = true;
+                topLevelCount += node.childCount;
+              } else {
+                topLevelCount++;
+              }
+            });
+
+            if (!hasList || topLevelCount < 2) return null;
+
+            const div = document.createElement("div");
+            const serializer = DOMSerializer.fromSchema(this.editor.schema);
+            const fragment = serializer.serializeFragment(slice.content);
+            div.appendChild(fragment);
+            return htmlToMarkdown(div.innerHTML);
+          },
           handlePaste: (view, event, slice) => {
             if (!event.clipboardData) {
               return false;
@@ -29,49 +50,80 @@ export const MarkdownClipboard = Extension.create({
             }
 
             const text = event.clipboardData.getData("text/plain");
+            const html = event.clipboardData.getData("text/html");
             const vscode = event.clipboardData.getData("vscode-editor-data");
             const vscodeData = vscode ? JSON.parse(vscode) : undefined;
             const language = vscodeData?.mode;
 
-            if (language !== "markdown") {
+            const isVscodeMarkdown = language === "markdown";
+            const isPlainTextOnly = !html && !vscode && !!text;
+
+            if (!isVscodeMarkdown && !isPlainTextOnly) {
               return false;
             }
 
+            if (isPlainTextOnly) {
+              if ((view as any).input?.shiftKey || !this.options.transformPastedText) {
+                return false;
+              }
+
+              const link = find(text, {
+                defaultProtocol: "http",
+              }).find((item) => item.isLink && item.value === text);
+
+              if (link) {
+                return false;
+              }
+            }
+
             const { tr } = view.state;
             const { from, to } = view.state.selection;
 
-            const html = markdownToHtml(text);
+            const parsed = markdownToHtml(text.replace(/\n+$/, ""));
 
             const contentNodes = DOMParser.fromSchema(
               this.editor.schema,
-            ).parseSlice(elementFromString(html), {
+            ).parseSlice(elementFromString(parsed), {
               preserveWhitespace: true,
             });
 
             tr.replaceRange(from, to, contentNodes);
+            const insertEnd = tr.mapping.map(from, 1);
+            tr.setSelection(TextSelection.near(tr.doc.resolve(Math.max(from, insertEnd - 2)), -1));
             tr.setMeta('paste', true)
             view.dispatch(tr);
             return true;
           },
-          clipboardTextParser: (text, context, plainText) => {
-            const link = find(text, {
-              defaultProtocol: "http",
-            }).find((item) => item.isLink && item.value === text);
+          // Strip trailing whitespace-only paragraphs from pasted content.
+          // Terminals (GNOME Terminal, etc.) often include trailing
+          // whitespace in their HTML clipboard data, which ProseMirror
+          // parses as an extra paragraph. Inside a list item this creates
+          // an orphan empty line that breaks the list structure.
+          transformPasted: (slice) => {
+            let { content, openStart, openEnd } = slice;
 
-            if (plainText || !this.options.transformPastedText || link) {
-              // don't parse plaintext link to allow link paste handler to work
-              // pasting with shift key prevents formatting
-              return null;
+            // Remove trailing paragraphs that contain only whitespace
+            while (content.childCount > 1) {
+              const lastChild = content.lastChild;
+              if (
+                lastChild?.type.name === "paragraph" &&
+                lastChild.textContent.trim() === ""
+              ) {
+                const children = [];
+                for (let i = 0; i < content.childCount - 1; i++) {
+                  children.push(content.child(i));
+                }
+                content = Fragment.from(children);
+              } else {
+                break;
+              }
             }
 
-            const parsed = markdownToHtml(text);
-            return DOMParser.fromSchema(this.editor.schema).parseSlice(
-              elementFromString(parsed),
-              {
-                preserveWhitespace: true,
-                context,
-              },
-            );
+            if (content !== slice.content) {
+              return new Slice(content, openStart, Math.max(openEnd, 1));
+            }
+
+            return slice;
           },
         },
       }),

apps/client/src/features/editor/full-editor.tsx

@@ -16,6 +16,7 @@ export interface FullEditorProps {
   content: string;
   spaceSlug: string;
   editable: boolean;
+  canComment?: boolean;
 }
 
 export function FullEditor({
@@ -25,6 +26,7 @@ export function FullEditor({
   content,
   spaceSlug,
   editable,
+  canComment,
 }: FullEditorProps) {
   const [user] = useAtom(userAtom);
   const fullPageWidth = user.settings?.preferences?.fullPageWidth;
@@ -46,6 +48,7 @@ export function FullEditor({
         pageId={pageId}
         editable={editable}
         content={content}
+        canComment={canComment}
       />
     </Container>
   );

apps/client/src/features/editor/page-editor.tsx

@@ -37,14 +37,17 @@ import { asideStateAtom } from "@/components/layouts/global/hooks/atoms/sidebar-
 import {
   activeCommentIdAtom,
   showCommentPopupAtom,
+  showReadOnlyCommentPopupAtom,
 } from "@/features/comment/atoms/comment-atom";
 import CommentDialog from "@/features/comment/components/comment-dialog";
 import { EditorBubbleMenu } from "@/features/editor/components/bubble-menu/bubble-menu";
+import { ReadonlyBubbleMenu } from "@/features/editor/components/bubble-menu/readonly-bubble-menu";
 import TableCellMenu from "@/features/editor/components/table/table-cell-menu.tsx";
 import TableMenu from "@/features/editor/components/table/table-menu.tsx";
 import ImageMenu from "@/features/editor/components/image/image-menu.tsx";
 import CalloutMenu from "@/features/editor/components/callout/callout-menu.tsx";
 import VideoMenu from "@/features/editor/components/video/video-menu.tsx";
+import PdfMenu from "@/features/editor/components/pdf/pdf-menu.tsx";
 import SubpagesMenu from "@/features/editor/components/subpages/subpages-menu.tsx";
 import {
   handleFileDrop,
@@ -73,12 +76,14 @@ interface PageEditorProps {
   pageId: string;
   editable: boolean;
   content: any;
+  canComment?: boolean;
 }
 
 export default function PageEditor({
   pageId,
   editable,
   content,
+  canComment,
 }: PageEditorProps) {
   const collaborationURL = useCollaborationUrl();
   const isComponentMounted = useRef(false);
@@ -93,6 +98,7 @@ export default function PageEditor({
   const [, setAsideState] = useAtom(asideStateAtom);
   const [, setActiveCommentId] = useAtom(activeCommentIdAtom);
   const [showCommentPopup, setShowCommentPopup] = useAtom(showCommentPopupAtom);
+  const [showReadOnlyCommentPopup] = useAtom(showReadOnlyCommentPopupAtom);
   const [isLocalSynced, setIsLocalSynced] = useState(false);
   const [isRemoteSynced, setIsRemoteSynced] = useState(false);
   const [yjsConnectionStatus, setYjsConnectionStatus] = useAtom(
@@ -414,6 +420,7 @@ export default function PageEditor({
             <TableCellMenu editor={editor} appendTo={menuContainerRef} />
             <ImageMenu editor={editor} />
             <VideoMenu editor={editor} />
+            <PdfMenu editor={editor} />
             <CalloutMenu editor={editor} />
             <SubpagesMenu editor={editor} />
             <ExcalidrawMenu editor={editor} />
@@ -421,7 +428,13 @@ export default function PageEditor({
             <ColumnsMenu editor={editor} />
           </div>
         )}
+        {editor && !editorIsEditable && (editable || canComment) && providersRef.current && (
+          <ReadonlyBubbleMenu editor={editor} />
+        )}
         {showCommentPopup && <CommentDialog editor={editor} pageId={pageId} />}
+        {showReadOnlyCommentPopup && (
+          <CommentDialog editor={editor} pageId={pageId} readOnly />
+        )}
       </div>
       <div
         onClick={() => editor.commands.focus("end")}

apps/client/src/features/editor/styles/core.css

@@ -133,10 +133,18 @@
     border-top: 1px solid #68cef8;
   }
 
+  &[contenteditable="false"] hr.ProseMirror-selectednode {
+    border-top: none;
+  }
+
   .ProseMirror-selectednode {
     outline: 2px solid #70cff8;
   }
 
+  &[contenteditable="false"] .ProseMirror-selectednode {
+    outline: none;
+  }
+
   & > .react-renderer {
     margin-top: var(--mantine-spacing-sm);
     margin-bottom: var(--mantine-spacing-sm);

apps/client/src/features/editor/styles/media.css

@@ -8,7 +8,7 @@
     }
   }
 
-  .node-image, .node-video, .node-excalidraw, .node-drawio {
+  .node-image, .node-video, .node-pdf, .node-excalidraw, .node-drawio {
     &.ProseMirror-selectednode {
       outline: none;
     }
@@ -37,5 +37,28 @@
     font-size: var(--mantine-font-size-md);
     line-height: var(--mantine-line-height-md);
   }
+
+  .media-pulse {
+    animation: media-pulse 1.2s ease-in-out infinite;
+
+    @mixin light {
+      background: linear-gradient(-90deg, var(--mantine-color-gray-3) 0%, var(--mantine-color-gray-1) 50%, var(--mantine-color-gray-3) 100%);
+      background-size: 400% 400%;
+    }
+
+    @mixin dark {
+      background: linear-gradient(-90deg, var(--mantine-color-dark-6) 0%, var(--mantine-color-dark-5) 50%, var(--mantine-color-dark-6) 100%);
+      background-size: 400% 400%;
+    }
+
+    @keyframes media-pulse {
+      0% {
+        background-position: 0% 0%;
+      }
+      100% {
+        background-position: -135% 0%;
+      }
+    }
+  }
 }
 

apps/client/src/features/home/components/home-ai-prompt.module.css

@@ -0,0 +1,28 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: var(--mantine-spacing-xl) var(--mantine-spacing-md) var(--mantine-spacing-lg);
+}
+
+.heading {
+  font-size: 1.75rem;
+  font-weight: 600;
+  color: light-dark(var(--mantine-color-gray-8), var(--mantine-color-dark-0));
+  text-align: center;
+  margin: 0;
+  line-height: 1.2;
+}
+
+.subtitle {
+  font-size: var(--mantine-font-size-sm);
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+  text-align: center;
+  margin-top: 6px;
+  margin-bottom: var(--mantine-spacing-lg);
+}
+
+.inputContainer {
+  width: 100%;
+  max-width: 640px;
+}

apps/client/src/features/home/components/home-ai-prompt.tsx

@@ -0,0 +1,60 @@
+import { useAtomValue } from "jotai";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
+import ChatInput from "@/ee/ai-chat/components/chat-input";
+import type {
+  ChatAttachment,
+  PageMention,
+} from "@/ee/ai-chat/types/ai-chat.types";
+import classes from "./home-ai-prompt.module.css";
+
+export type HomeAiPromptInitialState = {
+  initialContent: string;
+  initialMentions: PageMention[];
+  initialAttachments: ChatAttachment[];
+};
+
+export default function HomeAiPrompt() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const workspace = useAtomValue(workspaceAtom);
+
+  const aiChatEnabled = workspace?.settings?.ai?.chat === true;
+  if (!aiChatEnabled) return null;
+
+  const handleSend = (
+    content: string,
+    mentions: PageMention[],
+    attachments: ChatAttachment[],
+  ) => {
+    if (!content.trim() && attachments.length === 0) return;
+    const state: HomeAiPromptInitialState = {
+      initialContent: content,
+      initialMentions: mentions,
+      initialAttachments: attachments,
+    };
+    navigate("/ai", { state });
+  };
+
+  return (
+    <div className={classes.wrapper}>
+      <h1 className={classes.heading}>
+        {t("Welcome to {{name}}", { name: workspace?.name ?? "Docmost" })}
+      </h1>
+      <div className={classes.subtitle}>
+        {t("Ask anything or search your workspace")}
+      </div>
+
+      <div className={classes.inputContainer}>
+        <ChatInput
+          isStreaming={false}
+          onSend={handleSend}
+          onStop={() => {}}
+          placeholder={t("Ask anything... Use @ to mention pages")}
+          autofocus={false}
+        />
+      </div>
+    </div>
+  );
+}

apps/client/src/features/notification/components/notification-item.tsx

@@ -13,7 +13,7 @@ import {
 import { CustomAvatar } from "@/components/ui/custom-avatar";
 import { INotification } from "../types/notification.types";
 import { Trans, useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 import { useState } from "react";
 import { useMarkReadMutation } from "../queries/notification-query";
 import { buildPageUrl } from "@/features/page/page.utils";
@@ -30,7 +30,6 @@ export function NotificationItem({
   onNavigate,
 }: NotificationItemProps) {
   const { t } = useTranslation();
-  const navigate = useNavigate();
   const markRead = useMarkReadMutation();
   const [hovered, setHovered] = useState(false);
 
@@ -50,37 +49,47 @@ export function NotificationItem({
         return notification.data?.role === "writer"
           ? "<bold>{{name}}</bold> gave you edit access to a page"
           : "<bold>{{name}}</bold> gave you view access to a page";
+      case "page.updated":
+        return "<bold>{{name}}</bold> updated a page";
       default:
         return "";
     }
   };
 
-  const handleClick = () => {
-    if (notification.page && notification.space) {
-      if (isUnread) {
-        markRead.mutate([notification.id]);
-      }
-      navigate(
-        buildPageUrl(
+  const pageUrl =
+    notification.page && notification.space
+      ? buildPageUrl(
           notification.space.slug,
           notification.page.slugId,
           notification.page.title,
-        ),
-      );
-      onNavigate();
-    }
-  };
+        )
+      : undefined;
 
-  const handleMarkRead = (e: React.MouseEvent) => {
-    e.stopPropagation();
+  const markReadIfNeeded = () => {
     if (isUnread) {
       markRead.mutate([notification.id]);
     }
   };
 
+  const handleClick = () => {
+    markReadIfNeeded();
+    onNavigate();
+  };
+
+  const handleMarkRead = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    markReadIfNeeded();
+  };
+
   return (
     <UnstyledButton
+      component={Link}
+      to={pageUrl ?? ""}
       onClick={handleClick}
+      // auxclick fires for all non-primary buttons; guard to middle-click only (button 1)
+      // so that right-click (button 2, context menu) does not mark as read
+      onAuxClick={(e: React.MouseEvent) => e.button === 1 && markReadIfNeeded()}
       onMouseEnter={() => setHovered(true)}
       onMouseLeave={() => setHovered(false)}
       w="100%"

apps/client/src/features/notification/components/notification-list.tsx

@@ -3,17 +3,23 @@ import { IconBellOff } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
 import { useEffect, useRef } from "react";
 import { NotificationItem } from "./notification-item";
-import { INotification, NotificationFilter } from "../types/notification.types";
+import {
+  INotification,
+  NotificationFilter,
+  NotificationTab,
+} from "../types/notification.types";
 import { groupNotificationsByTime } from "../notification.utils";
 import { useNotificationsQuery } from "../queries/notification-query";
 import classes from "../notification.module.css";
 
 type NotificationListProps = {
+  tab: NotificationTab;
   filter: NotificationFilter;
   onNavigate: () => void;
 };
 
 export function NotificationList({
+  tab,
   filter,
   onNavigate,
 }: NotificationListProps) {
@@ -24,7 +30,7 @@ export function NotificationList({
     hasNextPage,
     fetchNextPage,
     isFetchingNextPage,
-  } = useNotificationsQuery();
+  } = useNotificationsQuery(tab as string);
 
   const sentinelRef = useRef<HTMLDivElement>(null);
 

apps/client/src/features/notification/components/notification-popover.tsx

@@ -6,6 +6,7 @@ import {
   Menu,
   Popover,
   ScrollArea,
+  Tabs,
   Text,
   Tooltip,
 } from "@mantine/core";
@@ -18,15 +19,20 @@ import {
 } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
 import { NotificationList } from "./notification-list";
-import { NotificationFilter } from "../types/notification.types";
+import {
+  NotificationFilter,
+  NotificationTab,
+} from "../types/notification.types";
 import {
   useMarkAllReadMutation,
   useUnreadCountQuery,
 } from "../queries/notification-query";
+import classes from "../notification.module.css";
 
 export function NotificationPopover() {
   const { t } = useTranslation();
   const [opened, setOpened] = useState(false);
+  const [tab, setTab] = useState<NotificationTab>("direct");
   const [filter, setFilter] = useState<NotificationFilter>("all");
 
   const { data: unreadData } = useUnreadCountQuery();
@@ -125,13 +131,27 @@ export function NotificationPopover() {
           </Group>
         </Group>
 
+        <Tabs
+          value={tab}
+          onChange={(value) => setTab(value as NotificationTab)}
+          variant="default"
+          color="dark"
+        >
+          <Tabs.List px="md">
+            <Tabs.Tab value="direct">{t("Direct")}</Tabs.Tab>
+            <Tabs.Tab value="updates">{t("Updates")}</Tabs.Tab>
+          </Tabs.List>
+        </Tabs>
+
         <ScrollArea.Autosize
           mah={500}
           type="auto"
           offsetScrollbars
           scrollbarSize={6}
+          style={{ overscrollBehavior: "contain" }}
         >
           <NotificationList
+            tab={tab}
             filter={filter}
             onNavigate={() => setOpened(false)}
           />

apps/client/src/features/notification/notification.module.css

@@ -1,7 +1,9 @@
 .notificationItem {
+  display: block;
   padding: 8px 12px;
   border-radius: 4px;
   cursor: pointer;
+  user-select: none;
 }
 
 .notificationItem:hover {
@@ -11,3 +13,4 @@
 .divider {
   border-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
 }
+

apps/client/src/features/notification/queries/notification-query.ts

@@ -15,10 +15,10 @@ import {
 export const NOTIFICATION_KEY = ["notifications"];
 export const UNREAD_COUNT_KEY = ["notifications", "unread-count"];
 
-export function useNotificationsQuery() {
+export function useNotificationsQuery(type?: string) {
   return useInfiniteQuery({
-    queryKey: NOTIFICATION_KEY,
-    queryFn: ({ pageParam }) => getNotifications({ cursor: pageParam }),
+    queryKey: [...NOTIFICATION_KEY, type],
+    queryFn: ({ pageParam }) => getNotifications({ cursor: pageParam, type }),
     initialPageParam: undefined as string | undefined,
     getNextPageParam: (lastPage) =>
       lastPage.meta.hasNextPage ? lastPage.meta.nextCursor : undefined,

apps/client/src/features/notification/services/notification-service.ts

@@ -5,6 +5,7 @@ import { IPagination } from "@/lib/types";
 export async function getNotifications(params: {
   limit?: number;
   cursor?: string;
+  type?: string;
 }): Promise<IPagination<INotification>> {
   const req = await api.post<IPagination<INotification>>(
     "/notifications",

apps/client/src/features/notification/types/notification.types.ts

@@ -3,7 +3,8 @@ export type NotificationType =
   | "comment.created"
   | "comment.resolved"
   | "page.user_mention"
-  | "page.permission_granted";
+  | "page.permission_granted"
+  | "page.updated";
 
 export type INotification = {
   id: string;
@@ -38,3 +39,5 @@ export type INotification = {
 };
 
 export type NotificationFilter = "all" | "unread";
+
+export type NotificationTab = "direct" | "updates" | "all";