namespace

smart scene sync
ignore ts error
2026-05-07 06:23:06 +08:00 · 2026-01-17 14:51:56 +00:00 · 2026-01-17 14:39:27 +00:00 · 2026-01-17 13:44:04 +00:00 · 2026-01-17 13:42:58 +00:00 · 2026-01-17 13:36:35 +00:00
213 changed files with 11542 additions and 3164 deletions
@@ -1,5 +1,6 @@
 node_modules
 .git
-.gitignore
 dist
-data
+/data
+.env*
+.nx
@@ -1,19 +1,22 @@
-FROM node:22-alpine AS base
+FROM node:22-slim AS base
 LABEL org.opencontainers.image.source="https://github.com/docmost/docmost"

+RUN npm install -g pnpm@10.4.0
+
 FROM base AS builder

 WORKDIR /app

 COPY . .

-RUN npm install -g pnpm@10.4.0
 RUN pnpm install --frozen-lockfile
 RUN pnpm build

 FROM base AS installer

-RUN apk add --no-cache curl bash
+RUN apt-get update \
+  && apt-get install -y --no-install-recommends curl bash \
+  && rm -rf /var/lib/apt/lists/*

 WORKDIR /app

@@ -29,12 +32,11 @@ COPY --from=builder /app/packages/editor-ext/package.json /app/packages/editor-e
 # Copy root package files
 COPY --from=builder /app/package.json /app/package.json
 COPY --from=builder /app/pnpm*.yaml /app/
+COPY --from=builder /app/.npmrc /app/.npmrc

 # Copy patches
 COPY --from=builder /app/patches /app/patches

-RUN npm install -g pnpm@10.4.0
-
 RUN chown -R node:node /app

 USER node
@@ -1,7 +1,7 @@
 {
  "name": "client",
  "private": true,
-  "version": "0.23.0",
+  "version": "0.24.1",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
@@ -10,53 +10,53 @@
    "format": "prettier --write \"src/**/*.tsx\" \"src/**/*.ts\""
  },
  "dependencies": {
-    "@casl/ability": "^6.7.2",
    "@casl/react": "^4.0.0",
    "@docmost/editor-ext": "workspace:*",
    "@emoji-mart/data": "^1.2.1",
    "@emoji-mart/react": "^1.1.1",
-    "@excalidraw/excalidraw": "0.18.0-864353b",
-    "@mantine/core": "^8.1.3",
-    "@mantine/form": "^8.1.3",
-    "@mantine/hooks": "^8.1.3",
-    "@mantine/modals": "^8.1.3",
-    "@mantine/notifications": "^8.1.3",
-    "@mantine/spotlight": "^8.1.3",
-    "@tabler/icons-react": "^3.34.0",
-    "@tanstack/react-query": "^5.80.6",
-    "@tiptap/extension-character-count": "^2.10.3",
+    "@excalidraw/excalidraw": "0.18.0-c158187",
+    "@mantine/core": "^8.3.12",
+    "@mantine/dates": "^8.3.12",
+    "@mantine/form": "^8.3.12",
+    "@mantine/hooks": "^8.3.12",
+    "@mantine/modals": "^8.3.12",
+    "@mantine/notifications": "^8.3.12",
+    "@mantine/spotlight": "^8.3.12",
+    "@tabler/icons-react": "^3.36.1",
+    "@tanstack/react-query": "^5.90.17",
+    "@tiptap/extension-character-count": "^2.27.1",
    "alfaaz": "^1.1.0",
-    "axios": "^1.9.0",
+    "axios": "^1.13.2",
    "clsx": "^2.1.1",
    "emoji-mart": "^5.6.0",
    "file-saver": "^2.0.5",
    "highlightjs-sap-abap": "^0.3.0",
-    "i18next": "^23.14.0",
-    "i18next-http-backend": "^2.6.1",
-    "jotai": "^2.12.5",
+    "i18next": "^23.16.8",
+    "i18next-http-backend": "^2.7.3",
+    "jotai": "^2.16.2",
    "jotai-optics": "^0.4.0",
    "js-cookie": "^3.0.5",
    "jwt-decode": "^4.0.0",
-    "katex": "0.16.22",
+    "katex": "0.16.27",
    "lowlight": "^3.3.0",
    "mantine-form-zod-resolver": "^1.3.0",
-    "mermaid": "^11.11.0",
+    "mermaid": "^11.12.2",
    "mitt": "^3.0.1",
    "posthog-js": "^1.255.1",
    "react": "^18.3.1",
    "react-arborist": "3.4.0",
-    "react-clear-modal": "^2.0.15",
+    "react-clear-modal": "^2.0.17",
    "react-dom": "^18.3.1",
-    "react-drawio": "^1.0.1",
+    "react-drawio": "^1.0.7",
    "react-error-boundary": "^4.1.2",
    "react-helmet-async": "^2.0.5",
    "react-i18next": "^15.0.1",
-    "react-router-dom": "^7.0.1",
-    "semver": "^7.7.2",
-    "socket.io-client": "^4.8.1",
+    "react-router-dom": "^7.12.0",
+    "semver": "^7.7.3",
+    "socket.io-client": "^4.8.3",
    "tippy.js": "^6.3.7",
    "tiptap-extension-global-drag-handle": "^0.1.18",
-    "zod": "^3.25.56"
+    "zod": "^3.25.76"
  },
  "devDependencies": {
    "@eslint/js": "^9.16.0",
@@ -64,10 +64,10 @@
    "@types/file-saver": "^2.0.7",
    "@types/js-cookie": "^3.0.6",
    "@types/katex": "^0.16.7",
-    "@types/node": "22.10.0",
+    "@types/node": "22.19.1",
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
-    "@vitejs/plugin-react": "^4.4.1",
+    "@vitejs/plugin-react": "^5.1.1",
    "eslint": "^9.15.0",
    "eslint-plugin-react": "^7.37.2",
    "eslint-plugin-react-hooks": "^5.1.0",
@@ -80,6 +80,6 @@
    "prettier": "^3.4.1",
    "typescript": "^5.7.2",
    "typescript-eslint": "^8.17.0",
-    "vite": "^6.3.5"
+    "vite": "^7.2.4"
  }
 }
@@ -42,7 +42,7 @@
  "Delete group": "Gruppe löschen",
  "Are you sure you want to delete this page? This will delete its children and page history. This action is irreversible.": "Sind Sie sicher, dass Sie diese Seite löschen möchten? Dadurch werden ihre Unterseiten und die Seitengeschichte gelöscht. Diese Aktion ist unwiderruflich.",
  "Description": "Beschreibung",
-  "Details": "Einzelheiten",
+  "Details": "Details",
  "e.g ACME": "z.B. ACME",
  "e.g ACME Inc": "z.B. ACME Inc.",
  "e.g Developers": "z.B. Entwickler",
@@ -234,9 +234,7 @@
  "Anyone with this link can join this workspace.": "Jeder mit diesem Link kann dem Arbeitsbereich beitreten.",
  "Invite link": "Einladungslink",
  "Copy": "Kopieren",
-  "Copy to space": "In Raum kopieren",
  "Copied": "Kopiert",
-  "Duplicate": "Duplizieren",
  "Select a user": "Benutzer auswählen",
  "Select a group": "Gruppe auswählen",
  "Export all pages and attachments in this space.": "Alle Seiten und Anhänge in diesem Bereich exportieren.",
@@ -527,5 +525,47 @@
  "Delete SSO provider": "SSO-Anbieter löschen",
  "Are you sure you want to delete this SSO provider?": "Sind Sie sicher, dass Sie diesen SSO-Anbieter löschen möchten?",
  "Action": "Aktion",
-  "{{ssoProviderType}} configuration": "{{ssoProviderType}}-Konfiguration"
+  "{{ssoProviderType}} configuration": "{{ssoProviderType}}-Konfiguration",
+  "Icon": "Icon",
+  "Upload image": "Bild hochladen",
+  "Remove image": "Bild entfernen",
+  "Failed to remove image": "Fehler beim Entfernen des Bildes",
+  "Image exceeds 10MB limit.": "Bild überschreitet das Limit von 10 MB.",
+  "Image removed successfully": "Bild erfolgreich entfernt",
+  "API key": "API-Schlüssel",
+  "API key created successfully": "API-Schlüssel erfolgreich erstellt",
+  "API keys": "API-Schlüssel",
+  "API management": "API-Verwaltung",
+  "Are you sure you want to revoke this API key": "Sind Sie sicher, dass Sie diesen API-Schlüssel widerrufen möchten?",
+  "Create API Key": "API-Schlüssel erstellen",
+  "Custom expiration date": "Benutzerdefiniertes Ablaufdatum",
+  "Enter a descriptive token name": "Geben Sie einen beschreibenden Token-Namen ein",
+  "Expiration": "Ablauf",
+  "Expired": "Abgelaufen",
+  "Expires": "Läuft ab",
+  "I've saved my API key": "Ich habe meinen API-Schlüssel gespeichert",
+  "Last use": "Zuletzt verwendet",
+  "No API keys found": "Keine API-Schlüssel gefunden",
+  "No expiration": "Kein Ablauf",
+  "Revoke API key": "API-Schlüssel widerrufen",
+  "Revoked successfully": "Erfolgreich widerrufen",
+  "Select expiration date": "Ablaufdatum wählen",
+  "This action cannot be undone. Any applications using this API key will stop working.": "Diese Aktion kann nicht rückgängig gemacht werden. Alle Anwendungen, die diesen API-Schlüssel verwenden, werden nicht mehr funktionieren.",
+  "Update API key": "API-Schlüssel aktualisieren",
+  "Manage API keys for all users in the workspace": "Verwalten Sie API-Schlüssel für alle Benutzer im Arbeitsbereich",
+  "AI settings": "KI-Einstellungen",
+  "AI search": "KI-Suche",
+  "AI Answer": "KI-Antwort",
+  "Ask AI": "KI fragen",
+  "AI is thinking...": "Die KI überlegt...",
+  "Ask a question...": "Fragen stellen...",
+  "AI-powered search (Ask AI)": "KI-gestützte Suche (KI fragen)",
+  "AI search uses vector embeddings to provide semantic search capabilities across your workspace content.": "Die KI-Suche verwendet Vektor-Einbettungen, um semantische Suchfunktionen in Ihrem Arbeitsbereich bereitzustellen.",
+  "Toggle AI search": "KI-Suche umschalten",
+  "Sources": "Quellen",
+  "Ask AI not available for attachments": "KI fragen nicht für Anhänge verfügbar",
+  "No answer available": "Keine Antwort verfügbar",
+  "Background color": "Hintergrundfarbe",
+  "Highlight color": "Hervorhebungsfarbe",
+  "Remove color": "Farbe entfernen"
 }
@@ -527,5 +527,47 @@
  "Delete SSO provider": "Delete SSO provider",
  "Are you sure you want to delete this SSO provider?": "Are you sure you want to delete this SSO provider?",
  "Action": "Action",
-  "{{ssoProviderType}} configuration": "{{ssoProviderType}} configuration"
+  "{{ssoProviderType}} configuration": "{{ssoProviderType}} configuration",
+  "Icon": "Icon",
+  "Upload image": "Upload image",
+  "Remove image": "Remove image",
+  "Failed to remove image": "Failed to remove image",
+  "Image exceeds 10MB limit.": "Image exceeds 10MB limit.",
+  "Image removed successfully": "Image removed successfully",
+  "API key": "API key",
+  "API key created successfully": "API key created successfully",
+  "API keys": "API keys",
+  "API management": "API management",
+  "Are you sure you want to revoke this API key": "Are you sure you want to revoke this API key",
+  "Create API Key": "Create API Key",
+  "Custom expiration date": "Custom expiration date",
+  "Enter a descriptive token name": "Enter a descriptive token name",
+  "Expiration": "Expiration",
+  "Expired": "Expired",
+  "Expires": "Expires",
+  "I've saved my API key": "I've saved my API key",
+  "Last use": "Last Used",
+  "No API keys found": "No API keys found",
+  "No expiration": "No expiration",
+  "Revoke API key": "Revoke API key",
+  "Revoked successfully": "Revoked successfully",
+  "Select expiration date": "Select expiration date",
+  "This action cannot be undone. Any applications using this API key will stop working.": "This action cannot be undone. Any applications using this API key will stop working.",
+  "Update API key": "Update API key",
+  "Manage API keys for all users in the workspace": "Manage API keys for all users in the workspace",
+  "AI settings": "AI settings",
+  "AI search": "AI search",
+  "AI Answer": "AI Answer",
+  "Ask AI": "Ask AI",
+  "AI is thinking...": "AI is thinking...",
+  "Ask a question...": "Ask a question...",
+  "AI-powered search (Ask AI)": "AI-powered search (Ask AI)",
+  "AI search uses vector embeddings to provide semantic search capabilities across your workspace content.": "AI search uses vector embeddings to provide semantic search capabilities across your workspace content.",
+  "Toggle AI search": "Toggle AI search",
+  "Sources": "Sources",
+  "Ask AI not available for attachments": "Ask AI not available for attachments",
+  "No answer available": "No answer available",
+  "Background color": "Background color",
+  "Highlight color": "Highlight color",
+  "Remove color": "Remove color"
 }
@@ -527,5 +527,47 @@
  "Delete SSO provider": "Eliminar proveedor de SSO",
  "Are you sure you want to delete this SSO provider?": "¿Está seguro de que desea eliminar este proveedor de SSO?",
  "Action": "Acción",
-  "{{ssoProviderType}} configuration": "Configuración de {{ssoProviderType}}"
+  "{{ssoProviderType}} configuration": "Configuración de {{ssoProviderType}}",
+  "Icon": "Icono",
+  "Upload image": "Subir imagen",
+  "Remove image": "Eliminar imagen",
+  "Failed to remove image": "No se ha podido eliminar la imagen",
+  "Image exceeds 10MB limit.": "La imagen excede del límite de 10 MB",
+  "Image removed successfully": "Imagen eliminada correctamente",
+  "API key": "Clave API",
+  "API key created successfully": "Clave API creada correctamente",
+  "API keys": "Claves API",
+  "API management": "Gestión de API",
+  "Are you sure you want to revoke this API key": "¿Está seguro de que desea revocar esta clave API? ",
+  "Create API Key": "Crear clave API",
+  "Custom expiration date": "Fecha de vencimiento personalizada",
+  "Enter a descriptive token name": "Introduce un nombre descriptivo del token",
+  "Expiration": "Vencimiento",
+  "Expired": "Vencido",
+  "Expires": "Vence",
+  "I've saved my API key": "He guardado mi clave API",
+  "Last use": "Último uso",
+  "No API keys found": "No se han encontrado claves API",
+  "No expiration": "Sin vencimiento",
+  "Revoke API key": "Revocar clave API",
+  "Revoked successfully": "Revocada correctamente",
+  "Select expiration date": "Seleccionar fecha de vencimiento",
+  "This action cannot be undone. Any applications using this API key will stop working.": "Esta acción no se puede deshacer. Las aplicaciones que utilicen esta clave API dejarán de funcionar.",
+  "Update API key": "Actualizar clave API",
+  "Manage API keys for all users in the workspace": "Gestionar claves API para todos los usuarios en el espacio de trabajo",
+  "AI settings": "Configuración de IA",
+  "AI search": "Búsqueda de IA",
+  "AI Answer": "Respuesta de IA",
+  "Ask AI": "Preguntar a IA",
+  "AI is thinking...": "IA está pensando...",
+  "Ask a question...": "Haz una pregunta...",
+  "AI-powered search (Ask AI)": "Búsqueda impulsada por IA (Preguntar a IA)",
+  "AI search uses vector embeddings to provide semantic search capabilities across your workspace content.": "La búsqueda de IA utiliza incrustaciones vectoriales para proporcionar capacidades de búsqueda semántica en todo el contenido de su espacio de trabajo.",
+  "Toggle AI search": "Alternar búsqueda de IA",
+  "Sources": "Fuentes",
+  "Ask AI not available for attachments": "Preguntar a IA no está disponible para adjuntos",
+  "No answer available": "No hay respuesta disponible",
+  "Background color": "Color de fondo",
+  "Highlight color": "Color de resaltado",
+  "Remove color": "Eliminar color"
 }
@@ -527,5 +527,47 @@
  "Delete SSO provider": "Supprimer le fournisseur SSO",
  "Are you sure you want to delete this SSO provider?": "Êtes-vous sûr de vouloir supprimer ce fournisseur SSO ?",
  "Action": "Action",
-  "{{ssoProviderType}} configuration": "Configuration {{ssoProviderType}}"
+  "{{ssoProviderType}} configuration": "Configuration {{ssoProviderType}}",
+  "Icon": "Icône",
+  "Upload image": "Téléverser une image",
+  "Remove image": "Supprimer l'image",
+  "Failed to remove image": "Échec de la suppression de l'image",
+  "Image exceeds 10MB limit.": "L'image dépasse la limite de 10 Mo.",
+  "Image removed successfully": "Image supprimée avec succès",
+  "API key": "Clé API",
+  "API key created successfully": "Clé API créée avec succès",
+  "API keys": "Clés API",
+  "API management": "Gestion des API",
+  "Are you sure you want to revoke this API key": "Êtes-vous sûr de vouloir révoquer cette clé API",
+  "Create API Key": "Créer une clé API",
+  "Custom expiration date": "Date d'expiration personnalisée",
+  "Enter a descriptive token name": "Entrez un nom descriptif pour le jeton",
+  "Expiration": "Expiration",
+  "Expired": "Expiré(e)",
+  "Expires": "Expire",
+  "I've saved my API key": "J'ai enregistré ma clé API",
+  "Last use": "Dernière utilisation",
+  "No API keys found": "Aucune clé API trouvée",
+  "No expiration": "Pas d'expiration",
+  "Revoke API key": "Révoquer la clé API",
+  "Revoked successfully": "Révoqué(e) avec succès",
+  "Select expiration date": "Sélectionnez la date d'expiration",
+  "This action cannot be undone. Any applications using this API key will stop working.": "Cette action ne peut pas être annulée. Toutes les applications utilisant cette clé API cesseront de fonctionner.",
+  "Update API key": "Mettre à jour la clé API",
+  "Manage API keys for all users in the workspace": "Gérer les clés API pour tous les utilisateurs dans l'espace de travail",
+  "AI settings": "Paramètres de l'IA",
+  "AI search": "Recherche IA",
+  "AI Answer": "Réponse IA",
+  "Ask AI": "Demander à l'IA",
+  "AI is thinking...": "L'IA réfléchit...",
+  "Ask a question...": "Posez une question...",
+  "AI-powered search (Ask AI)": "Recherche assistée par l'IA (Demander à l'IA)",
+  "AI search uses vector embeddings to provide semantic search capabilities across your workspace content.": "La recherche IA utilise des incorporations vectorielles pour fournir des capacités de recherche sémantique à travers le contenu de votre espace de travail.",
+  "Toggle AI search": "Basculer la recherche IA",
+  "Sources": "Sources",
+  "Ask AI not available for attachments": "Demande à l'IA non disponible pour les pièces jointes",
+  "No answer available": "Pas de réponse disponible",
+  "Background color": "Couleur de fond",
+  "Highlight color": "Couleur de surbrillance",
+  "Remove color": "Supprimer la couleur"
 }
@@ -527,5 +527,47 @@
  "Delete SSO provider": "Elimina provider SSO",
  "Are you sure you want to delete this SSO provider?": "Sei sicuro di voler eliminare questo provider SSO?",
  "Action": "Azione",
-  "{{ssoProviderType}} configuration": "Configurazione {{ssoProviderType}}"
+  "{{ssoProviderType}} configuration": "Configurazione {{ssoProviderType}}",
+  "Icon": "Icona",
+  "Upload image": "Carica immagine",
+  "Remove image": "Rimuovi immagine",
+  "Failed to remove image": "Rimozione immagine fallita",
+  "Image exceeds 10MB limit.": "L'immagine supera il limite di 10MB.",
+  "Image removed successfully": "Immagine rimossa con successo",
+  "API key": "Chiave API",
+  "API key created successfully": "Chiave API creata con successo",
+  "API keys": "Chiavi API",
+  "API management": "Gestione API",
+  "Are you sure you want to revoke this API key": "Sei sicuro di voler revocare questa chiave API",
+  "Create API Key": "Crea Chiave API",
+  "Custom expiration date": "Data di scadenza personalizzata",
+  "Enter a descriptive token name": "Inserisci un nome descrittivo del token",
+  "Expiration": "Scadenza",
+  "Expired": "Scaduto",
+  "Expires": "Scade",
+  "I've saved my API key": "Ho salvato la mia chiave API",
+  "Last use": "Ultimo utilizzo",
+  "No API keys found": "Nessuna chiave API trovata",
+  "No expiration": "Nessuna scadenza",
+  "Revoke API key": "Revoca chiave API",
+  "Revoked successfully": "Revocata con successo",
+  "Select expiration date": "Seleziona la data di scadenza",
+  "This action cannot be undone. Any applications using this API key will stop working.": "Questa azione non può essere annullata. Qualsiasi applicazione che utilizza questa chiave API smetterà di funzionare.",
+  "Update API key": "Aggiorna chiave API",
+  "Manage API keys for all users in the workspace": "Gestisci le chiavi API per tutti gli utenti nell'area di lavoro",
+  "AI settings": "Impostazioni AI",
+  "AI search": "Ricerca AI",
+  "AI Answer": "Risposta AI",
+  "Ask AI": "Chiedi all'AI",
+  "AI is thinking...": "L'AI sta pensando...",
+  "Ask a question...": "Fai una domanda...",
+  "AI-powered search (Ask AI)": "Ricerca potenziata dall'AI (Chiedi all'AI)",
+  "AI search uses vector embeddings to provide semantic search capabilities across your workspace content.": "La ricerca AI utilizza embeddings vettoriali per fornire capacità di ricerca semantica nel contenuto della tua area di lavoro.",
+  "Toggle AI search": "Attiva/disattiva ricerca AI",
+  "Sources": "Fonti",
+  "Ask AI not available for attachments": "Chiedere all'AI non è disponibile per gli allegati",
+  "No answer available": "Nessuna risposta disponibile",
+  "Background color": "Colore di sfondo",
+  "Highlight color": "Colore evidenziato",
+  "Remove color": "Rimuovi colore"
 }
@@ -13,21 +13,21 @@
  "Are you sure you want to remove this user from the group? The user will lose access to resources this group has access to.": "このユーザをグループから削除してもよろしいですか? ユーザはこのグループがアクセス権を持つリソースにアクセスできなくなります。",
  "Are you sure you want to remove this user from the space? The user will lose all access to this space.": "このユーザをスペースから削除してもよろしいですか? ユーザはこのスペースへのアクセス権をすべて失います。",
  "Are you sure you want to restore this version? Any changes not versioned will be lost.": "このバージョンを復元してもよろしいですか? バージョン管理されていない変更は失われます。",
-  "Can become members of groups and spaces in workspace": "ワークスペース内のグループやスペースのメンバーになることができます",
-  "Can create and edit pages in space.": "スペース内のページを作成および編集できます。",
+  "Can become members of groups and spaces in workspace": "ワークスペース内のグループやスペースのメンバーになれます",
+  "Can create and edit pages in space.": "スペース内のページを作成・編集できます",
  "Can edit": "編集可能",
  "Can manage workspace": "ワークスペースを管理できます",
-  "Can manage workspace but cannot delete it": "ワークスペースを管理できますが、削除はできません",
+  "Can manage workspace but cannot delete it": "ワークスペースを管理できますが削除はできません",
  "Can view": "閲覧可能",
-  "Can view pages in space but not edit.": "スペース内のページを閲覧できますが、編集はできません。",
+  "Can view pages in space but not edit.": "スペース内のページを閲覧できますが編集はできません",
  "Cancel": "キャンセル",
  "Change email": "メールアドレスの変更",
  "Change password": "パスワードの変更",
  "Change photo": "画像の変更",
  "Choose a role": "ロールを選んでください",
-  "Choose your preferred color scheme.": "お好みのカラースキームを選択してください。",
-  "Choose your preferred interface language.": "お好みのインターフェース言語を選択してください。",
-  "Choose your preferred page width.": "左右の余白を縮小する場合はオンにしてください。",
+  "Choose your preferred color scheme.": "お好みのカラースキームを選択してください",
+  "Choose your preferred interface language.": "お好みの言語を選択してください",
+  "Choose your preferred page width.": "お好みのページ幅を選択してください",
  "Confirm": "確認",
  "Copy link": "リンクをコピー",
  "Create": "新規作成",
@@ -40,24 +40,24 @@
  "Date": "日付",
  "Delete": "削除",
  "Delete group": "グループを削除",
-  "Are you sure you want to delete this page? This will delete its children and page history. This action is irreversible.": "このページを削除してもよろしいですか？この操作により、子ページおよびページ履歴が削除されます。この操作は元に戻せません。",
+  "Are you sure you want to delete this page? This will delete its children and page history. This action is irreversible.": "このページを削除してもよろしいですか？子ページとページ履歴も削除されます。この操作は取り消せません。",
  "Description": "説明",
  "Details": "詳細",
  "e.g ACME": "例: 山田太郎",
  "e.g ACME Inc": "例: 株式会社サンプル",
  "e.g Developers": "例: エンジニア",
-  "e.g Group for developers": "例: エンジニアグループ",
+  "e.g Group for developers": "例: 開発チーム",
  "e.g product": "例: product",
-  "e.g Product Team": "例: 製品チーム",
-  "e.g Sales": "例: 営業",
-  "e.g Space for product team": "例: 製品チームのスペース",
-  "e.g Space for sales team to collaborate": "例: 営業チーム連携用スペース",
+  "e.g Product Team": "例: プロダクトチーム",
+  "e.g Sales": "例: 営業部",
+  "e.g Space for product team": "例: プロダクトチーム用スペース",
+  "e.g Space for sales team to collaborate": "例: 営業チーム用スペース",
  "Edit": "編集",
-  "Read": "読む",
+  "Read": "閲覧",
  "Edit group": "グループを編集",
  "Email": "メールアドレス",
  "Enter a strong password": "強力なパスワードを入力してください",
-  "Enter valid email addresses separated by comma or space max_50": "有効なメールアドレスをカンマまたはスペースで区切って入力してください（最大 50 個）",
+  "Enter valid email addresses separated by comma or space max_50": "メールアドレスをカンマまたはスペース区切りで入力（最大50件）",
  "enter valid emails addresses": "有効なメールアドレスを入力してください",
  "Enter your current password": "現在のパスワードを入力してください",
  "enter your full name": "氏名を入力してください",
@@ -81,18 +81,18 @@
  "Group description": "グループ説明",
  "Group name": "グループ名",
  "Groups": "グループ",
-  "Has full access to space settings and pages.": "スペース設定とページにフルアクセスできます。",
+  "Has full access to space settings and pages.": "スペース設定とページにフルアクセスできます",
  "Home": "ホーム",
  "Import pages": "ページをインポート",
  "Import pages & space settings": "ページとスペース設定をインポート",
  "Importing pages": "ページをインポートしています",
-  "invalid invitation link": "招待リンクが間違っています",
+  "invalid invitation link": "無効な招待リンクです",
  "Invitation signup": "招待登録",
  "Invite by email": "メールアドレスで招待する",
  "Invite members": "メンバーを招待する",
  "Invite new members": "新しいメンバーを招待する",
-  "Invited members who are yet to accept their invitation will appear here.": "招待をまだ承諾していないメンバーはここに表示されます。",
-  "Invited members will be granted access to spaces the groups can access": "招待されたメンバーは、グループがアクセスできるスペースにアクセス権が付与されます",
+  "Invited members who are yet to accept their invitation will appear here.": "招待を承諾していないメンバーがここに表示されます",
+  "Invited members will be granted access to spaces the groups can access": "招待されたメンバーはグループがアクセスできるスペースにアクセスできます",
  "Join the workspace": "ワークスペースに参加",
  "Language": "言語",
  "Light": "ライト",
@@ -113,20 +113,20 @@
  "New page": "新規ページ",
  "New password": "新しいパスワード",
  "No group found": "グループが見つかりません",
-  "No page history saved yet.": "まだページの履歴が保存されていません。",
+  "No page history saved yet.": "ページ履歴がありません",
  "No pages yet": "ページがありません",
-  "No results found...": "結果が見つかりませんでした...",
-  "No user found": "ユーザがいません",
+  "No results found...": "結果が見つかりません",
+  "No user found": "ユーザーが見つかりません",
  "Overview": "概要",
  "Owner": "所有者",
  "page": "ページ",
-  "Page deleted successfully": "ページが正常に削除されました",
-  "Page history": "ページの履歴",
-  "Page import is in progress. Please do not close this tab.": "ページのインポートが進行中です。このタブを閉じないでください。",
+  "Page deleted successfully": "ページを削除しました",
+  "Page history": "ページ履歴",
+  "Page import is in progress. Please do not close this tab.": "ページをインポート中です。このタブを閉じないでください",
  "Pages": "ページ",
  "pages": "ページ",
  "Password": "パスワード",
-  "Password changed successfully": "パスワードが正常に変更されました",
+  "Password changed successfully": "パスワードを変更しました",
  "Pending": "保留中",
  "Please confirm your action": "アクションを確認してください",
  "Preferences": "設定",
@@ -143,95 +143,95 @@
  "Search for groups": "グループを検索",
  "Search for users": "ユーザーを検索",
  "Search for users and groups": "ユーザーとグループを検索",
-  "Search...": "検索する語句を入力",
+  "Search...": "検索",
  "Select language": "言語を選択",
  "Select role": "ロールを選択",
-  "Select role to assign to all invited members": "招待されたすべてのメンバーに割り当てるロールを選択してください",
+  "Select role to assign to all invited members": "招待するメンバーに割り当てるロールを選択",
  "Select theme": "テーマを選択",
  "Send invitation": "招待を送る",
-  "Invitation sent": "招待が送信されました",
+  "Invitation sent": "招待を送信しました",
  "Settings": "設定",
  "Setup workspace": "ワークスペースを設定する",
  "Sign In": "サインイン",
-  "Sign Up": "アカウント登録",
-  "Slug": "Slug (URL用文字列)",
+  "Sign Up": "新規登録",
+  "Slug": "スラッグ（URL識別子）",
  "Space": "スペース",
  "Space description": "スペース説明",
  "Space menu": "スペースメニュー",
  "Space name": "スペース名",
  "Space settings": "スペース設定",
-  "Space slug": "スペースのSlug (URL用文字列)",
+  "Space slug": "スペースのスラッグ（URL識別子）",
  "Spaces": "スペース",
  "Spaces you belong to": "所属しているスペース",
  "No space found": "スペースが見つかりません",
  "Search for spaces": "スペースを検索",
-  "Start typing to search...": "検索を開始するには入力してください...",
+  "Start typing to search...": "入力して検索",
  "Status": "ステータス",
-  "Successfully imported": "インポートに成功しました",
-  "Successfully restored": "正常に復元されました",
+  "Successfully imported": "インポートしました",
+  "Successfully restored": "復元しました",
  "System settings": "システム設定",
  "Theme": "テーマ",
-  "To change your email, you have to enter your password and new email.": "メールアドレスを変更するには、パスワードと新しいメールアドレスを入力する必要があります。",
-  "Toggle full page width": "ページ幅を切り替える",
-  "Unable to import pages. Please try again.": "ページをインポートできません。もう一度お試しください。",
+  "To change your email, you have to enter your password and new email.": "メールアドレスを変更するには、パスワードと新しいメールアドレスを入力してください",
+  "Toggle full page width": "ページ幅を切り替え",
+  "Unable to import pages. Please try again.": "ページをインポートできませんでした。もう一度お試しください",
  "untitled": "無題",
  "Untitled": "無題",
-  "Updated successfully": "正常に更新されました",
+  "Updated successfully": "更新しました",
  "User": "ユーザー",
  "Workspace": "ワークスペース",
  "Workspace Name": "ワークスペース名",
  "Workspace settings": "ワークスペース設定",
-  "You can change your password here.": "パスワードを変更できます。",
+  "You can change your password here.": "パスワードを変更できます",
  "Your Email": "メールアドレス",
-  "Your import is complete.": "インポートが完了しました。",
+  "Your import is complete.": "インポートが完了しました",
  "Your name": "名前",
  "Your Name": "名前",
  "Your password": "パスワード",
-  "Your password must be a minimum of 8 characters.": "パスワードは最低 8 文字必要です。",
+  "Your password must be a minimum of 8 characters.": "パスワードは8文字以上にしてください",
  "Sidebar toggle": "サイドバー切り替え",
  "Comments": "コメント",
  "404 page not found": "404 ページが見つかりません",
-  "Sorry, we can't find the page you are looking for.": "お探しのページが見つかりません。",
+  "Sorry, we can't find the page you are looking for.": "お探しのページが見つかりません",
  "Take me back to homepage": "ホームに戻る",
  "Forgot password": "パスワードを忘れた",
  "Forgot your password?": "パスワードを忘れましたか?",
-  "A password reset link has been sent to your email. Please check your inbox.": "パスワードリセットリンクがあなたのメールアドレスに送信されました。受信箱を確認してください。",
-  "Send reset link": "リセットリンクを送る",
+  "A password reset link has been sent to your email. Please check your inbox.": "パスワードリセット用のリンクをメールに送信しました。受信トレイを確認してください",
+  "Send reset link": "リセットリンクを送信",
  "Password reset": "パスワードリセット",
  "Your new password": "新しいパスワード",
  "Set password": "パスワードを設定",
  "Write a comment": "コメントを書く",
  "Reply...": "返信...",
-  "Error loading comments.": "コメントの読み込み中にエラーが発生しました。",
-  "No comments yet.": "コメントがありません。",
+  "Error loading comments.": "コメントの読み込みに失敗しました",
+  "No comments yet.": "コメントがありません",
  "Edit comment": "コメントを編集する",
  "Delete comment": "コメントを削除する",
  "Are you sure you want to delete this comment?": "このコメントを削除してもよろしいですか?",
-  "Comment created successfully": "コメントが作成されました",
-  "Error creating comment": "コメントの作成中にエラーが発生しました",
-  "Comment updated successfully": "コメントが更新されました",
+  "Comment created successfully": "コメントを作成しました",
+  "Error creating comment": "コメントの作成に失敗しました",
+  "Comment updated successfully": "コメントを更新しました",
  "Failed to update comment": "コメントの更新に失敗しました",
-  "Comment deleted successfully": "コメントが削除されました",
+  "Comment deleted successfully": "コメントを削除しました",
  "Failed to delete comment": "コメントの削除に失敗しました",
-  "Comment resolved successfully": "コメントが解決されました",
-  "Comment re-opened successfully": "コメントが再開されました",
-  "Comment unresolved successfully": "コメントが再解決されました",
+  "Comment resolved successfully": "コメントを解決しました",
+  "Comment re-opened successfully": "コメントを再開しました",
+  "Comment unresolved successfully": "コメントを未解決に戻しました",
  "Failed to resolve comment": "コメントの解決に失敗しました",
  "Resolve comment": "コメントを解決",
-  "Unresolve comment": "コメントを再解決",
+  "Unresolve comment": "コメントを未解決に戻す",
  "Resolve Comment Thread": "コメントスレッドを解決",
-  "Unresolve Comment Thread": "コメントスレッドを再解決",
-  "Are you sure you want to resolve this comment thread? This will mark it as completed.": "このコメントスレッドを解決しますか? これにより完了としてマークされます。",
-  "Are you sure you want to unresolve this comment thread?": "このコメントスレッドを再解決しますか?",
+  "Unresolve Comment Thread": "コメントスレッドを未解決に戻す",
+  "Are you sure you want to resolve this comment thread? This will mark it as completed.": "このコメントスレッドを解決しますか？完了としてマークされます",
+  "Are you sure you want to unresolve this comment thread?": "このコメントスレッドを未解決に戻しますか?",
  "Resolved": "解決済",
-  "No active comments.": "アクティブなコメントはありません。",
-  "No resolved comments.": "解決されたコメントはありません。",
+  "No active comments.": "アクティブなコメントはありません",
+  "No resolved comments.": "解決済みのコメントはありません",
  "Revoke invitation": "招待を取り消す",
  "Revoke": "取り消す",
  "Don't": "取り消さない",
-  "Are you sure you want to revoke this invitation? The user will not be able to join the workspace.": "この招待を取り消してもよろしいですか? ユーザはワークスペースに参加できなくなります。",
+  "Are you sure you want to revoke this invitation? The user will not be able to join the workspace.": "この招待を取り消してもよろしいですか？ユーザーはワークスペースに参加できなくなります",
  "Resend invitation": "招待を再度送る",
-  "Anyone with this link can join this workspace.": "このリンクを持っている人は誰でもこのワークスペースに参加できます。",
+  "Anyone with this link can join this workspace.": "このリンクを知っている人は誰でもワークスペースに参加できます",
  "Invite link": "招待リンク",
  "Copy": "コピー",
  "Copy to space": "スペースにコピー",
@@ -239,13 +239,13 @@
  "Duplicate": "複製",
  "Select a user": "ユーザを選択",
  "Select a group": "グループを選択",
-  "Export all pages and attachments in this space.": "このスペースのすべてのページと添付ファイルをエクスポートします。",
+  "Export all pages and attachments in this space.": "このスペースのすべてのページと添付ファイルをエクスポートします",
  "Delete space": "スペースを削除",
  "Are you sure you want to delete this space?": "このスペースを削除してもよろしいですか？",
-  "Delete this space with all its pages and data.": "このスペースおよびスペース内のすべてのページとデータを削除します。",
-  "All pages, comments, attachments and permissions in this space will be deleted irreversibly.": "このスペース内のすべてのページ、コメント、添付ファイル、および権限は完全に削除されます。",
+  "Delete this space with all its pages and data.": "このスペースとすべてのページ、データを削除します",
+  "All pages, comments, attachments and permissions in this space will be deleted irreversibly.": "スペース内のすべてのページ、コメント、添付ファイル、権限が完全に削除されます",
  "Confirm space name": "スペース名を確認する",
-  "Type the space name <b>{{spaceName}}</b> to confirm your action.": "アクションを確認するためにスペース名 <b>{{spaceName}}</b> を入力してください。",
+  "Type the space name <b>{{spaceName}}</b> to confirm your action.": "確認のためスペース名 <b>{{spaceName}}</b> を入力してください",
  "Format": "フォーマット",
  "Include subpages": "サブページを含める",
  "Include attachments": "添付ファイルを含める",
@@ -273,12 +273,12 @@
  "Success": "成功",
  "Warning": "警告",
  "Danger": "危険",
-  "Mermaid diagram error:": "Mermaid コードエラー",
-  "Invalid Mermaid diagram": "無効な Mermaid コードです",
-  "Double-click to edit Draw.io diagram": "ダブルクリックしてDraw.ioの図を編集",
+  "Mermaid diagram error:": "Mermaid ダイアグラムエラー:",
+  "Invalid Mermaid diagram": "無効な Mermaid ダイアグラムです",
+  "Double-click to edit Draw.io diagram": "ダブルクリックして Draw.io 図を編集",
  "Exit": "終了",
  "Save & Exit": "保存して終了",
-  "Double-click to edit Excalidraw diagram": "ダブルクリックしてExcalidraw図を編集",
+  "Double-click to edit Excalidraw diagram": "ダブルクリックして Excalidraw 図を編集",
  "Paste link": "リンクを貼り付け",
  "Edit link": "リンクを編集",
  "Remove link": "リンクを削除",
@@ -315,22 +315,22 @@
  "Bullet List": "箇条書きリスト",
  "Numbered List": "番号付きリスト",
  "Blockquote": "引用",
-  "Just start typing with plain text.": "すぐに文章を書き始められます。",
-  "Track tasks with a to-do list.": "Todoリストでタスクを追跡します。",
-  "Big section heading.": "大きいフォントのセクション見出しです。",
-  "Medium section heading.": "中くらいのフォントのセクション見出しです。",
-  "Small section heading.": "小さいフォントのセクション見出しです。",
-  "Create a simple bullet list.": "シンプルな箇条書きのリストを作成します。",
-  "Create a list with numbering.": "番号付きのリストを作成します。",
-  "Create block quote.": "引用文を作成します。",
-  "Insert code snippet.": "コードスニペットを入力します。",
-  "Insert horizontal rule divider": "水平線を挿入します。",
-  "Upload any image from your device.": "画像をアップロードします。",
-  "Upload any video from your device.": "動画をアップロードします。",
-  "Upload any file from your device.": "ファイルをアップロードします。",
+  "Just start typing with plain text.": "プレーンテキストを入力します",
+  "Track tasks with a to-do list.": "Todo リストでタスクを管理します",
+  "Big section heading.": "大見出し",
+  "Medium section heading.": "中見出し",
+  "Small section heading.": "小見出し",
+  "Create a simple bullet list.": "箇条書きリストを作成します",
+  "Create a list with numbering.": "番号付きリストを作成します",
+  "Create block quote.": "引用ブロックを作成します",
+  "Insert code snippet.": "コードスニペットを挿入します",
+  "Insert horizontal rule divider": "区切り線を挿入します",
+  "Upload any image from your device.": "デバイスから画像をアップロードします",
+  "Upload any video from your device.": "デバイスから動画をアップロードします",
+  "Upload any file from your device.": "デバイスからファイルをアップロードします",
  "Table": "テーブル",
-  "Insert a table.": "表を挿入します。",
-  "Insert collapsible block.": "折りたたみ可能なブロックを挿入します。",
+  "Insert a table.": "テーブルを挿入します",
+  "Insert collapsible block.": "折りたたみブロックを挿入します",
  "Video": "動画",
  "Divider": "区切り線",
  "Quote": "引用",
@@ -338,16 +338,16 @@
  "File attachment": "ファイル添付",
  "Toggle block": "ブロックを切り替える",
  "Callout": "コールアウト",
-  "Insert callout notice.": "コールアウトブロックを挿入します。",
+  "Insert callout notice.": "コールアウトを挿入します",
  "Math inline": "インライン数式",
-  "Insert inline math equation.": "インライン数式を挿入します。",
+  "Insert inline math equation.": "インライン数式を挿入します",
  "Math block": "数式ブロック",
  "Insert math equation": "数式を挿入します",
-  "Mermaid diagram": "Mermaidコード",
-  "Insert mermaid diagram": "Mermaidコードを記述して図を挿入します",
-  "Insert and design Drawio diagrams": "Drawioの図を挿入してデザインします",
-  "Insert current date": "今日の日付を挿入します",
-  "Draw and sketch excalidraw diagrams": "Excalidrawの図を埋め込みます",
+  "Mermaid diagram": "Mermaid ダイアグラム",
+  "Insert mermaid diagram": "Mermaid ダイアグラムを挿入します",
+  "Insert and design Drawio diagrams": "Draw.io 図を挿入・編集します",
+  "Insert current date": "現在の日付を挿入します",
+  "Draw and sketch excalidraw diagrams": "Excalidraw 図を挿入します",
  "Multiple": "複数",
  "Heading {{level}}": "見出し {{level}}",
  "Toggle title": "タイトルの表示/非表示を切り替える",
@@ -357,29 +357,29 @@
  "Yesterday, {{time}}": "昨日、{{time}}",
  "Space created successfully": "スペースを作成しました",
  "Space updated successfully": "スペースを更新しました",
-  "Space deleted successfully": "スペースが削除されました",
+  "Space deleted successfully": "スペースを削除しました",
  "Members added successfully": "メンバーを追加しました",
-  "Member removed successfully": "メンバーが削除されました",
+  "Member removed successfully": "メンバーを削除しました",
  "Member role updated successfully": "メンバーのロールを更新しました",
  "Created by: <b>{{creatorName}}</b>": "作成者: <b>{{creatorName}}</b>",
-  "Created at: {{time}}": "が作成しました：{{time}}",
+  "Created at: {{time}}": "作成日: {{time}}",
  "Edited by {{name}} {{time}}": "最終編集: {{name}} {{time}}",
-  "Word count: {{wordCount}}": "ワード数: {{wordCount}}",
+  "Word count: {{wordCount}}": "単語数: {{wordCount}}",
  "Character count: {{characterCount}}": "文字数: {{characterCount}}",
  "New update": "新規更新",
-  "{{latestVersion}} is available": "{{latestVersion}}は利用可能です",
+  "{{latestVersion}} is available": "{{latestVersion}} が利用可能です",
  "Default page edit mode": "デフォルトのページ編集モード",
-  "Choose your preferred page edit mode. Avoid accidental edits.": "希望のページ編集モードを選択してください。誤って編集を防ぎます。",
+  "Choose your preferred page edit mode. Avoid accidental edits.": "お好みのページ編集モードを選択してください（誤編集を防止します）",
  "Reading": "読み取り",
  "Delete member": "メンバーを削除する",
-  "Member deleted successfully": "メンバーが削除されました",
-  "Are you sure you want to delete this workspace member? This action is irreversible.": "ワークスペースメンバーを削除してもよろしいですか？この操作は元に戻せません。",
+  "Member deleted successfully": "メンバーを削除しました",
+  "Are you sure you want to delete this workspace member? This action is irreversible.": "このメンバーを削除してもよろしいですか？この操作は取り消せません",
  "Move": "移動",
  "Move page": "ページを移動",
-  "Move page to a different space.": "ページを別のスペースに移動します。",
-  "Real-time editor connection lost. Retrying...": "リアルタイムエディターの接続が失われました。再試行しています…",
+  "Move page to a different space.": "ページを別のスペースに移動します",
+  "Real-time editor connection lost. Retrying...": "リアルタイム編集の接続が切断されました。再接続中...",
  "Table of contents": "目次",
-  "Add headings (H1, H2, H3) to generate a table of contents.": "見出し（H1、H2、H3）を追加して目次を生成します。",
+  "Add headings (H1, H2, H3) to generate a table of contents.": "見出し（H1、H2、H3）を追加すると目次が生成されます",
  "Share": "共有",
  "Public sharing": "公開共有",
  "Shared by": "共有者",
@@ -398,13 +398,13 @@
  "Delete share": "共有を削除",
  "Are you sure you want to delete this shared link?": "この共有リンクを削除してもよろしいですか?",
  "Publicly shared pages from spaces you are a member of will appear here": "メンバーであるスペースからの公開ページがここに表示されます",
-  "Share deleted successfully": "共有が正常に削除されました",
+  "Share deleted successfully": "共有を削除しました",
  "Share not found": "共有が見つかりません",
  "Failed to share page": "ページの共有に失敗しました",
  "Copy page": "ページをコピー",
-  "Copy page to a different space.": "ページを別のスペースにコピーします。",
-  "Page copied successfully": "ページのコピーに成功しました",
-  "Page duplicated successfully": "ページが正常に複製されました",
+  "Copy page to a different space.": "ページを別のスペースにコピーします",
+  "Page copied successfully": "ページをコピーしました",
+  "Page duplicated successfully": "ページを複製しました",
  "Find": "検索",
  "Not found": "見つかりません",
  "Previous Match (Shift+Enter)": "前の一致 (Shift+Enter)",
@@ -419,26 +419,26 @@
  "Error": "エラー",
  "Failed to disable MFA": "MFAの無効化に失敗しました",
  "Disable two-factor authentication": "二要素認証を無効化",
-  "Disabling two-factor authentication will make your account less secure. You'll only need your password to sign in.": "二要素認証を無効化すると、アカウントのセキュリティが低下します。サインインにはパスワードのみが必要になります。",
-  "Please enter your password to disable two-factor authentication:": "二要素認証を無効化するにはパスワードを入力してください:",
-  "Two-factor authentication has been enabled": "二要素認証が有効になりました",
-  "Two-factor authentication has been disabled": "二要素認証が無効になりました",
-  "2-step verification": "2段階確認",
-  "Protect your account with an additional verification layer when signing in.": "サインイン時に追加の認証レイヤーでアカウントを保護します。",
-  "Two-factor authentication is active on your account.": "二要素認証がアカウントで有効です。",
+  "Disabling two-factor authentication will make your account less secure. You'll only need your password to sign in.": "二要素認証を無効にすると、アカウントのセキュリティが低下します。サインインにはパスワードのみが必要になります",
+  "Please enter your password to disable two-factor authentication:": "二要素認証を無効にするにはパスワードを入力してください",
+  "Two-factor authentication has been enabled": "二要素認証を有効にしました",
+  "Two-factor authentication has been disabled": "二要素認証を無効にしました",
+  "2-step verification": "2段階認証",
+  "Protect your account with an additional verification layer when signing in.": "サインイン時に追加の認証でアカウントを保護します",
+  "Two-factor authentication is active on your account.": "二要素認証が有効です",
  "Add 2FA method": "2FAメソッドを追加",
  "Backup codes": "バックアップコード",
  "Disable": "無効にする",
  "Invalid verification code": "無効な認証コード",
-  "New backup codes have been generated": "新しいバックアップコードが生成されました",
+  "New backup codes have been generated": "新しいバックアップコードを生成しました",
  "Failed to regenerate backup codes": "バックアップコードの再生成に失敗しました",
  "About backup codes": "バックアップコードについて",
-  "Backup codes can be used to access your account if you lose access to your authenticator app. Each code can only be used once.": "バックアップコードは、認証アプリへのアクセスを失った場合にアカウントにアクセスするために使用できます。各コードは一度しか使用できません。",
-  "You can regenerate new backup codes at any time. This will invalidate all existing codes.": "いつでも新しいバックアップコードを再生成できます。これにより、既存のすべてのコードが無効になります。",
+  "Backup codes can be used to access your account if you lose access to your authenticator app. Each code can only be used once.": "認証アプリにアクセスできない場合、バックアップコードでアカウントにアクセスできます。各コードは1回のみ使用可能です",
+  "You can regenerate new backup codes at any time. This will invalidate all existing codes.": "新しいバックアップコードはいつでも再生成できます。既存のコードはすべて無効になります",
  "Confirm password": "パスワードを確認",
  "Generate new backup codes": "新しいバックアップコードを生成",
  "Save your new backup codes": "新しいバックアップコードを保存",
-  "Make sure to save these codes in a secure place. Your old backup codes are no longer valid.": "これらのコードを安全な場所に保存してください。古いバックアップコードは無効です。",
+  "Make sure to save these codes in a secure place. Your old backup codes are no longer valid.": "これらのコードを安全な場所に保存してください。古いバックアップコードは無効になりました",
  "Your new backup codes": "新しいバックアップコード",
  "I've saved my backup codes": "バックアップコードを保存しました",
  "Failed to setup MFA": "MFAの設定に失敗しました",
@@ -449,51 +449,51 @@
  "Enter this code manually in your authenticator app:": "このコードを認証アプリに手動で入力してください:",
  "2. Enter the 6-digit code from your authenticator": "2. 認証アプリからの6桁のコードを入力してください",
  "Verify and enable": "確認と有効化",
-  "Failed to generate QR code. Please try again.": "QRコードの生成に失敗しました。再試行してください。",
+  "Failed to generate QR code. Please try again.": "QRコードの生成に失敗しました。もう一度お試しください",
  "Backup": "バックアップ",
  "Save codes": "コードを保存",
  "Save your backup codes": "バックアップコードを保存",
-  "These codes can be used to access your account if you lose access to your authenticator app. Each code can only be used once.": "これらのコードは、認証アプリへのアクセスを失った場合にアカウントにアクセスするために使用できます。各コードは一度しか使用できません。",
+  "These codes can be used to access your account if you lose access to your authenticator app. Each code can only be used once.": "認証アプリにアクセスできない場合、これらのコードでアカウントにアクセスできます。各コードは1回のみ使用可能です",
  "Print": "印刷",
-  "Two-factor authentication has been set up. Please log in again.": "二要素認証が設定されました。再度ログインしてください。",
+  "Two-factor authentication has been set up. Please log in again.": "二要素認証を設定しました。再度ログインしてください",
  "Two-Factor authentication required": "二要素認証が必要です",
-  "Your workspace requires two-factor authentication for all users": "ワークスペースでは、すべてのユーザーに二要素認証が必要です",
-  "To continue accessing your workspace, you must set up two-factor authentication. This adds an extra layer of security to your account.": "ワークスペースへのアクセスを続けるには、二要素認証を設定する必要があります。これにより、アカウントに追加のセキュリティ層が追加されます。",
+  "Your workspace requires two-factor authentication for all users": "このワークスペースではすべてのユーザーに二要素認証が必要です",
+  "To continue accessing your workspace, you must set up two-factor authentication. This adds an extra layer of security to your account.": "ワークスペースにアクセスするには二要素認証を設定してください。アカウントのセキュリティが強化されます",
  "Set up two-factor authentication": "二要素認証を設定",
  "Cancel and logout": "キャンセルしてログアウト",
-  "Your workspace requires two-factor authentication. Please set it up to continue.": "ワークスペースでは二要素認証が必要です。続行するには設定してください。",
-  "This adds an extra layer of security to your account by requiring a verification code from your authenticator app.": "これにより、認証アプリからの確認コードが必要となり、アカウントに追加のセキュリティ層が追加されます。",
+  "Your workspace requires two-factor authentication. Please set it up to continue.": "このワークスペースでは二要素認証が必要です。続行するには設定してください",
+  "This adds an extra layer of security to your account by requiring a verification code from your authenticator app.": "認証アプリからの確認コードでアカウントのセキュリティが強化されます",
  "Password is required": "パスワードが必要です",
  "Password must be at least 8 characters": "パスワードは8文字以上必要です",
  "Please enter a 6-digit code": "6桁のコードを入力してください",
-  "Code must be exactly 6 digits": "コードは正確に6桁である必要があります",
+  "Code must be exactly 6 digits": "コードは6桁で入力してください",
  "Enter the 6-digit code found in your authenticator app": "認証アプリに表示された6桁のコードを入力してください",
  "Need help authenticating?": "認証に関するヘルプが必要ですか?",
  "MFA QR Code": "MFA QRコード",
-  "Account created successfully. Please log in to set up two-factor authentication.": "アカウントが正常に作成されました。二要素認証を設定するためにログインしてください。",
-  "Password reset successful. Please log in with your new password and complete two-factor authentication.": "パスワードのリセットが成功しました。新しいパスワードでログインし、二要素認証を完了してください。",
-  "Password reset successful. Please log in with your new password to set up two-factor authentication.": "パスワードのリセットが成功しました。二要素認証を設定するために新しいパスワードでログインしてください。",
-  "Password reset was successful. Please log in with your new password.": "パスワードのリセットが成功しました。新しいパスワードでログインしてください。",
+  "Account created successfully. Please log in to set up two-factor authentication.": "アカウントを作成しました。二要素認証を設定するためにログインしてください",
+  "Password reset successful. Please log in with your new password and complete two-factor authentication.": "パスワードをリセットしました。新しいパスワードでログインして二要素認証を完了してください",
+  "Password reset successful. Please log in with your new password to set up two-factor authentication.": "パスワードをリセットしました。新しいパスワードでログインして二要素認証を設定してください",
+  "Password reset was successful. Please log in with your new password.": "パスワードをリセットしました。新しいパスワードでログインしてください",
  "Two-factor authentication": "二要素認証",
  "Use authenticator app instead": "代わりに認証アプリを使用",
  "Verify backup code": "バックアップコードを確認",
  "Use backup code": "バックアップコードを使用",
  "Enter one of your backup codes": "バックアップコードのいずれかを入力してください",
  "Backup code": "バックアップコード",
-  "Enter one of your backup codes. Each backup code can only be used once.": "バックアップコードのいずれかを入力してください。各バックアップコードは一度しか使用できません。",
+  "Enter one of your backup codes. Each backup code can only be used once.": "バックアップコードを入力してください。各コードは1回のみ使用可能です",
  "Verify": "確認",
  "Trash": "ごみ箱",
-  "Pages in trash will be permanently deleted after 30 days.": "ごみ箱内のページは30日後に完全に削除されます。",
+  "Pages in trash will be permanently deleted after 30 days.": "ごみ箱内のページは30日後に完全に削除されます",
  "Deleted": "削除",
  "No pages in trash": "ごみ箱にページがありません",
  "Permanently delete page?": "ページを完全に削除しますか?",
-  "Are you sure you want to permanently delete '{{title}}'? This action cannot be undone.": "{{title}}』を完全に削除しますか? この操作は元に戻せません。",
-  "Restore '{{title}}' and its sub-pages?": "{{title}}』とそのサブページを復元しますか?",
+  "Are you sure you want to permanently delete '{{title}}'? This action cannot be undone.": "「{{title}}」を完全に削除しますか？この操作は取り消せません",
+  "Restore '{{title}}' and its sub-pages?": "「{{title}}」とそのサブページを復元しますか?",
  "Move to trash": "ごみ箱に移動",
  "Move this page to trash?": "このページをごみ箱に移動しますか?",
  "Restore page": "ページを復元",
-  "Page moved to trash": "ページがごみ箱に移動されました",
-  "Page restored successfully": "ページが正常に復元されました",
+  "Page moved to trash": "ページをごみ箱に移動しました",
+  "Page restored successfully": "ページを復元しました",
  "Deleted by": "削除者",
  "Deleted at": "削除日時",
  "Preview": "プレビュー",
@@ -511,10 +511,10 @@
  "Enterprise": "エンタープライズ",
  "Download attachment": "添付ファイルをダウンロード",
  "Allowed email domains": "許可されたメールドメイン",
-  "Only users with email addresses from these domains can signup via SSO.": "これらのドメインからのメールアドレスを持つユーザーのみがSSOで登録できます。",
+  "Only users with email addresses from these domains can signup via SSO.": "これらのドメインのメールアドレスを持つユーザーのみSSO経由で登録できます",
  "Enter valid domain names separated by comma or space": "コンマまたはスペースで区切って有効なドメイン名を入力してください",
  "Enforce two-factor authentication": "二要素認証を強制する",
-  "Once enforced, all members must enable two-factor authentication to access the workspace.": "一度強制されると、すべてのメンバーはワークスペースにアクセスするために二要素認証を有効にする必要があります。",
+  "Once enforced, all members must enable two-factor authentication to access the workspace.": "有効にすると、すべてのメンバーが二要素認証を設定しないとワークスペースにアクセスできなくなります",
  "Toggle MFA enforcement": "MFAの強制を切り替える",
  "Display name": "表示名",
  "Allow signup": "登録を許可する",
@@ -527,5 +527,47 @@
  "Delete SSO provider": "SSOプロバイダーを削除する",
  "Are you sure you want to delete this SSO provider?": "このSSOプロバイダーを削除してもよろしいですか？",
  "Action": "アクション",
-  "{{ssoProviderType}} configuration": "{{ssoProviderType}}の構成"
+  "{{ssoProviderType}} configuration": "{{ssoProviderType}}の構成",
+  "Icon": "アイコン",
+  "Upload image": "画像をアップロード",
+  "Remove image": "画像を削除",
+  "Failed to remove image": "画像の削除に失敗しました",
+  "Image exceeds 10MB limit.": "画像が10MBの制限を超えています",
+  "Image removed successfully": "画像を削除しました",
+  "API key": "APIキー",
+  "API key created successfully": "APIキーを作成しました",
+  "API keys": "APIキー",
+  "API management": "API管理",
+  "Are you sure you want to revoke this API key": "このAPIキーを無効にしてもよろしいですか",
+  "Create API Key": "APIキーを作成",
+  "Custom expiration date": "カスタム有効期限",
+  "Enter a descriptive token name": "説明的なトークン名を入力してください",
+  "Expiration": "有効期限",
+  "Expired": "期限切れ",
+  "Expires": "期限が切れます",
+  "I've saved my API key": "APIキーを保存しました",
+  "Last use": "最終使用",
+  "No API keys found": "APIキーが見つかりません",
+  "No expiration": "期限なし",
+  "Revoke API key": "APIキーを無効にする",
+  "Revoked successfully": "無効にしました",
+  "Select expiration date": "有効期限を選択してください",
+  "This action cannot be undone. Any applications using this API key will stop working.": "この操作は取り消せません。このAPIキーを使用しているアプリケーションは動作しなくなります",
+  "Update API key": "APIキーを更新",
+  "Manage API keys for all users in the workspace": "ワークスペース内のすべてのユーザーのAPIキーを管理",
+  "AI settings": "AI設定",
+  "AI search": "AI検索",
+  "AI Answer": "AI回答",
+  "Ask AI": "AIに質問する",
+  "AI is thinking...": "AIが考え中...",
+  "Ask a question...": "質問を入力...",
+  "AI-powered search (Ask AI)": "AIによる検索（AIに質問）",
+  "AI search uses vector embeddings to provide semantic search capabilities across your workspace content.": "AI検索はベクター埋め込みを使用してワークスペース全体の意味検索を実現します",
+  "Toggle AI search": "AI検索を切り替え",
+  "Sources": "ソース",
+  "Ask AI not available for attachments": "添付ファイルにはAI質問は利用できません",
+  "No answer available": "回答がありません",
+  "Background color": "背景色",
+  "Highlight color": "ハイライト色",
+  "Remove color": "色を削除"
 }
@@ -527,5 +527,47 @@
  "Delete SSO provider": "SSO 제공자 삭제",
  "Are you sure you want to delete this SSO provider?": "이 SSO 제공자를 삭제하시겠습니까?",
  "Action": "작업",
-  "{{ssoProviderType}} configuration": "{{ssoProviderType}} 구성"
+  "{{ssoProviderType}} configuration": "{{ssoProviderType}} 구성",
+  "Icon": "아이콘",
+  "Upload image": "이미지 업로드",
+  "Remove image": "이미지 제거",
+  "Failed to remove image": "이미지 제거 실패",
+  "Image exceeds 10MB limit.": "이미지가 10MB 용량 제한을 초과합니다.",
+  "Image removed successfully": "이미지가 성공적으로 제거되었습니다",
+  "API key": "API 키",
+  "API key created successfully": "API 키 생성 완료",
+  "API keys": "API 키",
+  "API management": "API 관리",
+  "Are you sure you want to revoke this API key": "이 API 키를 취소하시겠습니까?",
+  "Create API Key": "API 키 생성",
+  "Custom expiration date": "사용자 정의 만료일",
+  "Enter a descriptive token name": "토큰 이름을 입력하세요",
+  "Expiration": "만료",
+  "Expired": "만료됨",
+  "Expires": "만료일",
+  "I've saved my API key": "API 키를 저장했습니다",
+  "Last use": "최근 사용",
+  "No API keys found": "API 키를 찾을 수 없습니다",
+  "No expiration": "유효기간 없음",
+  "Revoke API key": "API 키 취소",
+  "Revoked successfully": "성공적으로 취소되었습니다",
+  "Select expiration date": "만료일 선택",
+  "This action cannot be undone. Any applications using this API key will stop working.": "이 작업은 되돌릴 수 없습니다. 이 API 키를 사용하는 모든 응용 프로그램이 작동을 멈출 것입니다.",
+  "Update API key": "API 키 갱신",
+  "Manage API keys for all users in the workspace": "워크스페이스 내 모든 사용자의 API 키 관리",
+  "AI settings": "AI 설정",
+  "AI search": "AI 검색",
+  "AI Answer": "AI 답변",
+  "Ask AI": "AI에게 묻기",
+  "AI is thinking...": "AI가 생각 중입니다...",
+  "Ask a question...": "질문하세요...",
+  "AI-powered search (Ask AI)": "AI 지원 검색 (AI에게 묻기)",
+  "AI search uses vector embeddings to provide semantic search capabilities across your workspace content.": "AI 검색은 벡터 임베딩을 사용하여 작업공간 콘텐츠에 대한 의미 검색 기능을 제공합니다.",
+  "Toggle AI search": "AI 검색 전환",
+  "Sources": "출처",
+  "Ask AI not available for attachments": "AI에게 묻기 기능은 첨부 파일에 대해 사용할 수 없습니다",
+  "No answer available": "답변을 제공할 수 없습니다",
+  "Background color": "배경 색",
+  "Highlight color": "강조 색",
+  "Remove color": "색 제거"
 }
@@ -34,7 +34,7 @@
  "Create group": "Groep aanmaken",
  "Create page": "Pagina aanmaken",
  "Create space": "Ruimte aanmaken",
-  "Create workspace": "Wwerkruimte aanmaken",
+  "Create workspace": "Werkruimte aanmaken",
  "Current password": "Huidig wachtwoord",
  "Dark": "Donker",
  "Date": "Datum",
@@ -91,7 +91,7 @@
  "Invite by email": "Uitnodigen via e-mail",
  "Invite members": "Leden uitnodigen",
  "Invite new members": "Nieuwe leden uitnodigen",
-  "Invited members who are yet to accept their invitation will appear here.": "Uigenodigde leden die hun uitnodiging nog moeten accepteren zullen hier worden getoond.",
+  "Invited members who are yet to accept their invitation will appear here.": "Uitgenodigde leden die hun uitnodiging nog moeten accepteren zullen hier worden getoond.",
  "Invited members will be granted access to spaces the groups can access": "Uitgenodigde leden wordt toegang gegeven tot ruimtes de groepen toegang toe heeft",
  "Join the workspace": "Word lid van de werkruimte",
  "Language": "Taal",
@@ -527,5 +527,47 @@
  "Delete SSO provider": "Verwijder SSO-provider",
  "Are you sure you want to delete this SSO provider?": "Weet u zeker dat u deze SSO-provider wilt verwijderen?",
  "Action": "Actie",
-  "{{ssoProviderType}} configuration": "{{ssoProviderType}} configuratie"
+  "{{ssoProviderType}} configuration": "{{ssoProviderType}} configuratie",
+  "Icon": "Icoon",
+  "Upload image": "Afbeelding uploaden",
+  "Remove image": "Afbeelding verwijderen",
+  "Failed to remove image": "Afbeelding verwijderen mislukt",
+  "Image exceeds 10MB limit.": "Afbeelding overschrijdt de limiet van 10MB.",
+  "Image removed successfully": "Afbeelding succesvol verwijderd",
+  "API key": "API-sleutel",
+  "API key created successfully": "API-sleutel succesvol aangemaakt",
+  "API keys": "API-sleutels",
+  "API management": "API-beheer",
+  "Are you sure you want to revoke this API key": "Weet u zeker dat u deze API-sleutel wilt intrekken",
+  "Create API Key": "API-sleutel aanmaken",
+  "Custom expiration date": "Aangepaste vervaldatum",
+  "Enter a descriptive token name": "Voer een beschrijvende tokennaam in",
+  "Expiration": "Vervaldatum",
+  "Expired": "Verlopen",
+  "Expires": "Verloopt",
+  "I've saved my API key": "Ik heb mijn API-sleutel opgeslagen",
+  "Last use": "Laatst gebruikt",
+  "No API keys found": "Geen API-sleutels gevonden",
+  "No expiration": "Geen vervaldatum",
+  "Revoke API key": "API-sleutel intrekken",
+  "Revoked successfully": "Succesvol ingetrokken",
+  "Select expiration date": "Selecteer vervaldatum",
+  "This action cannot be undone. Any applications using this API key will stop working.": "Deze actie kan niet ongedaan worden gemaakt. Alle toepassingen die deze API-sleutel gebruiken, zullen niet meer werken.",
+  "Update API key": "API-sleutel bijwerken",
+  "Manage API keys for all users in the workspace": "Beheer API-sleutels voor alle gebruikers in de werkruimte",
+  "AI settings": "AI-instellingen",
+  "AI search": "AI-zoekopdracht",
+  "AI Answer": "AI Antwoord",
+  "Ask AI": "Vraag AI",
+  "AI is thinking...": "AI is aan het nadenken...",
+  "Ask a question...": "Stel een vraag...",
+  "AI-powered search (Ask AI)": "AI-ondersteunde zoekopdracht (Vraag AI)",
+  "AI search uses vector embeddings to provide semantic search capabilities across your workspace content.": "AI-zoekopdracht maakt gebruik van vectorembeddings om semantische zoekmogelijkheden te bieden in uw werkruimte-inhoud.",
+  "Toggle AI search": "Schakel AI-zoekopdracht in/uit",
+  "Sources": "Bronnen",
+  "Ask AI not available for attachments": "Vraag AI is niet beschikbaar voor bijlages",
+  "No answer available": "Geen antwoord beschikbaar",
+  "Background color": "Achtergrondkleur",
+  "Highlight color": "Markeerkleur",
+  "Remove color": "Kleur verwijderen"
 }
@@ -527,5 +527,47 @@
  "Delete SSO provider": "Excluir provedor de SSO",
  "Are you sure you want to delete this SSO provider?": "Tem certeza de que deseja excluir este provedor de SSO?",
  "Action": "Ação",
-  "{{ssoProviderType}} configuration": "Configuração de {{ssoProviderType}}"
+  "{{ssoProviderType}} configuration": "Configuração de {{ssoProviderType}}",
+  "Icon": "Ícone",
+  "Upload image": "Fazer upload da imagem",
+  "Remove image": "Remover imagem",
+  "Failed to remove image": "Falha ao remover imagem",
+  "Image exceeds 10MB limit.": "A imagem excede o limite de 10MB.",
+  "Image removed successfully": "Imagem removida com sucesso",
+  "API key": "Chave API",
+  "API key created successfully": "Chave API criada com sucesso",
+  "API keys": "Chaves API",
+  "API management": "Gestão de API",
+  "Are you sure you want to revoke this API key": "Tem certeza de que deseja revogar esta chave API",
+  "Create API Key": "Criar Chave API",
+  "Custom expiration date": "Data de expiração personalizada",
+  "Enter a descriptive token name": "Insira um nome descritivo para o token",
+  "Expiration": "Expiração",
+  "Expired": "Expirado",
+  "Expires": "Expira",
+  "I've saved my API key": "Salvei minha chave API",
+  "Last use": "Último uso",
+  "No API keys found": "Nenhuma chave API encontrada",
+  "No expiration": "Sem expiração",
+  "Revoke API key": "Revogar chave API",
+  "Revoked successfully": "Revogada com sucesso",
+  "Select expiration date": "Selecionar data de expiração",
+  "This action cannot be undone. Any applications using this API key will stop working.": "Esta ação não pode ser desfeita. Qualquer aplicação usando esta chave API deixará de funcionar.",
+  "Update API key": "Atualizar chave API",
+  "Manage API keys for all users in the workspace": "Gerenciar chaves API para todos os usuários no espaço de trabalho",
+  "AI settings": "Configurações de IA",
+  "AI search": "Pesquisa IA",
+  "AI Answer": "Resposta de IA",
+  "Ask AI": "Pergunte à IA",
+  "AI is thinking...": "IA está pensando...",
+  "Ask a question...": "Faça uma pergunta...",
+  "AI-powered search (Ask AI)": "Pesquisa com IA (Pergunte à IA)",
+  "AI search uses vector embeddings to provide semantic search capabilities across your workspace content.": "A pesquisa IA usa vetores de incorporação para fornecer capacidades de pesquisa semântica em todo o conteúdo do seu espaço de trabalho.",
+  "Toggle AI search": "Alternar pesquisa de IA",
+  "Sources": "Fontes",
+  "Ask AI not available for attachments": "Perguntar à IA não está disponível para anexos",
+  "No answer available": "Nenhuma resposta disponível",
+  "Background color": "Cor de fundo",
+  "Highlight color": "Cor de destaque",
+  "Remove color": "Remover cor"
 }
@@ -498,10 +498,10 @@
  "Deleted at": "Удалено в",
  "Preview": "Предпросмотр",
  "Subpages": "Подстраницы",
-  "Failed to load subpages": "Не удалось загрузить подстраницы",
+  "Failed to load subpages": "Не удалось загрузить под страницы",
  "No subpages": "Нет подстраниц",
  "Subpages (Child pages)": "Подстраницы (вложенные страницы)",
-  "List all subpages of the current page": "Показать все подстраницы текущей страницы",
+  "List all subpages of the current page": "Показать все под страницы",
  "Attachments": "Вложения",
  "All spaces": "Все пространства",
  "Unknown": "Неизвестно",
@@ -527,5 +527,47 @@
  "Delete SSO provider": "Удалить поставщика SSO",
  "Are you sure you want to delete this SSO provider?": "Вы уверены, что хотите удалить этого поставщика SSO?",
  "Action": "Действие",
-  "{{ssoProviderType}} configuration": "Настройка {{ssoProviderType}}"
+  "{{ssoProviderType}} configuration": "Настройка {{ssoProviderType}}",
+  "Icon": "Иконка",
+  "Upload image": "Загрузить изображение",
+  "Remove image": "Удалить изображение",
+  "Failed to remove image": "Не удалось удалить изображение",
+  "Image exceeds 10MB limit.": "Изображение превышает предел 10MB.",
+  "Image removed successfully": "Изображение успешно удалено",
+  "API key": "API ключ",
+  "API key created successfully": "API ключ успешно создан",
+  "API keys": "API ключи",
+  "API management": "Управление API",
+  "Are you sure you want to revoke this API key": "Вы уверены, что хотите отозвать этот API ключ",
+  "Create API Key": "Создать API ключ",
+  "Custom expiration date": "Пользовательская дата срока действия",
+  "Enter a descriptive token name": "Введите понятное имя токена",
+  "Expiration": "Срок действия",
+  "Expired": "Истек",
+  "Expires": "Истекает",
+  "I've saved my API key": "Я сохранил мой API ключ",
+  "Last use": "Последнее использование",
+  "No API keys found": "API ключи не найдены",
+  "No expiration": "Не истекает",
+  "Revoke API key": "Отозвать API ключ",
+  "Revoked successfully": "Отозван успешно",
+  "Select expiration date": "Выберете срок действия",
+  "This action cannot be undone. Any applications using this API key will stop working.": "Это действие необратимо. Любые приложения, использующие этот API ключ, перестанут работать.",
+  "Update API key": "Обновить API ключ",
+  "Manage API keys for all users in the workspace": "Управлять API ключами для всех пользователей в рабочей области",
+  "AI settings": "Настройки ИИ",
+  "AI search": "Поиск ИИ",
+  "AI Answer": "Ответ ИИ",
+  "Ask AI": "Спросить ИИ",
+  "AI is thinking...": "ИИ обрабатывает запрос...",
+  "Ask a question...": "Задайте вопрос...",
+  "AI-powered search (Ask AI)": "Поиск на базе ИИ (Спросить ИИ)",
+  "AI search uses vector embeddings to provide semantic search capabilities across your workspace content.": "Поиск ИИ использует векторные встраивания для обеспечения семантического поиска по содержимому вашего рабочего пространства.",
+  "Toggle AI search": "Переключить поиск ИИ",
+  "Sources": "Источники",
+  "Ask AI not available for attachments": "Функция \"Спросить ИИ\" недоступна для вложений",
+  "No answer available": "Ответ недоступен",
+  "Background color": "Цвет фона",
+  "Highlight color": "Цвет выделения",
+  "Remove color": "Удалить цвет"
 }
@@ -527,5 +527,47 @@
  "Delete SSO provider": "Видалити постачальника SSO",
  "Are you sure you want to delete this SSO provider?": "Ви впевнені, що хочете видалити цього постачальника SSO?",
  "Action": "Дія",
-  "{{ssoProviderType}} configuration": "Конфігурація {{ssoProviderType}}"
+  "{{ssoProviderType}} configuration": "Конфігурація {{ssoProviderType}}",
+  "Icon": "Іконка",
+  "Upload image": "Завантажити зображення",
+  "Remove image": "Видалити зображення",
+  "Failed to remove image": "Не вдалося видалити зображення",
+  "Image exceeds 10MB limit.": "Зображення має займати менше, ніж 10 МБ.",
+  "Image removed successfully": "Зображення видалено",
+  "API key": "Ключ API",
+  "API key created successfully": "Ключ API успішно створено",
+  "API keys": "Ключі API",
+  "API management": "Управління API",
+  "Are you sure you want to revoke this API key": "Ви впевнені, що хочете відкликати цей ключ API",
+  "Create API Key": "Створити ключ API",
+  "Custom expiration date": "Користувацька дата закінчення",
+  "Enter a descriptive token name": "Введіть описову назву токена",
+  "Expiration": "Термін дії",
+  "Expired": "Закінчився",
+  "Expires": "Закінчується",
+  "I've saved my API key": "Я зберіг свій ключ API",
+  "Last use": "Останнє використання",
+  "No API keys found": "Ключі API не знайдено",
+  "No expiration": "Без терміну дії",
+  "Revoke API key": "Відкликати ключ API",
+  "Revoked successfully": "Успішно відкликано",
+  "Select expiration date": "Виберіть дату закінчення",
+  "This action cannot be undone. Any applications using this API key will stop working.": "Цю дію не можна скасувати. Будь-які додатки, що використовують цей ключ API, перестануть працювати.",
+  "Update API key": "Оновити ключ API",
+  "Manage API keys for all users in the workspace": "Керувати ключами API для всіх користувачів у робочій області",
+  "AI settings": "Налаштування ШІ",
+  "AI search": "Пошук з ШІ",
+  "AI Answer": "Відповідь ШІ",
+  "Ask AI": "Запитати ШІ",
+  "AI is thinking...": "ШІ думає...",
+  "Ask a question...": "Задайте питання...",
+  "AI-powered search (Ask AI)": "Пошук на базі ШІ (Запитати ШІ)",
+  "AI search uses vector embeddings to provide semantic search capabilities across your workspace content.": "Пошук з ШІ використовує векторні вбудовування для надання можливостей семантичного пошуку у вашому робочому вмісті.",
+  "Toggle AI search": "Переключити пошук з ШІ",
+  "Sources": "Джерела",
+  "Ask AI not available for attachments": "Запитати ШІ недоступно для вкладень",
+  "No answer available": "Відповідь недоступна",
+  "Background color": "Колір фону",
+  "Highlight color": "Колір підсвічування",
+  "Remove color": "Видалити колір"
 }
@@ -527,5 +527,47 @@
  "Delete SSO provider": "删除SSO提供商",
  "Are you sure you want to delete this SSO provider?": "您确定要删除此SSO提供商吗？",
  "Action": "操作",
-  "{{ssoProviderType}} configuration": "{{ssoProviderType}} 配置"
+  "{{ssoProviderType}} configuration": "{{ssoProviderType}} 配置",
+  "Icon": "图标",
+  "Upload image": "上传图片",
+  "Remove image": "删除图片",
+  "Failed to remove image": "无法删除图片",
+  "Image exceeds 10MB limit.": "图片超过10MB限制。",
+  "Image removed successfully": "图片删除成功",
+  "API key": "API密钥",
+  "API key created successfully": "API密钥创建成功",
+  "API keys": "API密钥",
+  "API management": "API管理",
+  "Are you sure you want to revoke this API key": "确定要撤销此API密钥吗",
+  "Create API Key": "创建API密钥",
+  "Custom expiration date": "自定义到期日期",
+  "Enter a descriptive token name": "输入描述性令牌名称",
+  "Expiration": "到期",
+  "Expired": "已过期",
+  "Expires": "到期",
+  "I've saved my API key": "我已保存我的API密钥",
+  "Last use": "上次使用",
+  "No API keys found": "找不到API密钥",
+  "No expiration": "无到期",
+  "Revoke API key": "撤销API密钥",
+  "Revoked successfully": "撤销成功",
+  "Select expiration date": "选择到期日期",
+  "This action cannot be undone. Any applications using this API key will stop working.": "此操作无法撤销。使用此API密钥的任何应用程序将停止工作。",
+  "Update API key": "更新API密钥",
+  "Manage API keys for all users in the workspace": "管理工作空间中所有用户的API密钥",
+  "AI settings": "AI设置",
+  "AI search": "AI搜索",
+  "AI Answer": "AI回答",
+  "Ask AI": "询问AI",
+  "AI is thinking...": "AI正在思考...",
+  "Ask a question...": "提问...",
+  "AI-powered search (Ask AI)": "AI驱动的搜索（询问AI）",
+  "AI search uses vector embeddings to provide semantic search capabilities across your workspace content.": "AI搜索使用向量嵌入提供跨工作空间内容的语义搜索功能。",
+  "Toggle AI search": "切换AI搜索",
+  "Sources": "来源",
+  "Ask AI not available for attachments": "附件不支持询问AI",
+  "No answer available": "无可用答案",
+  "Background color": "背景颜色",
+  "Highlight color": "突出显示颜色",
+  "Remove color": "移除颜色"
 }
@@ -35,6 +35,9 @@ import SpacesPage from "@/pages/spaces/spaces.tsx";
 import { MfaChallengePage } from "@/ee/mfa/pages/mfa-challenge-page";
 import { MfaSetupRequiredPage } from "@/ee/mfa/pages/mfa-setup-required-page";
 import SpaceTrash from "@/pages/space/space-trash.tsx";
+import UserApiKeys from "@/ee/api-key/pages/user-api-keys";
+import WorkspaceApiKeys from "@/ee/api-key/pages/workspace-api-keys";
+import AiSettings from "@/ee/ai/pages/ai-settings.tsx";

 export default function App() {
  const { t } = useTranslation();
@@ -96,13 +99,16 @@ export default function App() {
              path={"account/preferences"}
              element={<AccountPreferences />}
            />
+            <Route path={"account/api-keys"} element={<UserApiKeys />} />
            <Route path={"workspace"} element={<WorkspaceSettings />} />
            <Route path={"members"} element={<WorkspaceMembers />} />
+            <Route path={"api-keys"} element={<WorkspaceApiKeys />} />
            <Route path={"groups"} element={<Groups />} />
            <Route path={"groups/:groupId"} element={<GroupInfo />} />
            <Route path={"spaces"} element={<Spaces />} />
            <Route path={"sharing"} element={<Shares />} />
            <Route path={"security"} element={<Security />} />
+            <Route path={"ai"} element={<AiSettings />} />
            {!isCloud() && <Route path={"license"} element={<License />} />}
            {isCloud() && <Route path={"billing"} element={<Billing />} />}
          </Route>
@@ -0,0 +1,165 @@
+import React, { useRef } from "react";
+import { Menu, Box, Loader } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { IconTrash, IconUpload } from "@tabler/icons-react";
+import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
+import { AvatarIconType } from "@/features/attachments/types/attachment.types.ts";
+import { notifications } from "@mantine/notifications";
+
+interface AvatarUploaderProps {
+  currentImageUrl?: string | null;
+  fallbackName?: string;
+  radius?: string | number;
+  size?: string | number;
+  variant?: string;
+  type: AvatarIconType;
+  onUpload: (file: File) => Promise<void>;
+  onRemove: () => Promise<void>;
+  isLoading?: boolean;
+  disabled?: boolean;
+}
+
+export default function AvatarUploader({
+  currentImageUrl,
+  fallbackName,
+  radius,
+  variant,
+  size,
+  type,
+  onUpload,
+  onRemove,
+  isLoading = false,
+  disabled = false,
+}: AvatarUploaderProps) {
+  const { t } = useTranslation();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileInputChange = async (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const file = event.target.files?.[0];
+    if (!file || disabled) {
+      return;
+    }
+
+    // Validate file size (max 10MB)
+    const maxSizeInBytes = 10 * 1024 * 1024;
+    if (file.size > maxSizeInBytes) {
+      notifications.show({
+        message: t("Image exceeds 10MB limit."),
+        color: "red",
+      });
+      // Reset the input
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+      return;
+    }
+
+    try {
+      await onUpload(file);
+    } catch (error) {
+      console.error(error);
+      notifications.show({
+        message: t("Failed to upload image"),
+        color: "red",
+      });
+    }
+
+    // Reset the input so the same file can be selected again
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+
+  const handleUploadClick = () => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    } else {
+      console.error("File input ref is null!");
+    }
+  };
+
+  const handleRemove = async () => {
+    if (disabled) return;
+
+    try {
+      await onRemove();
+      notifications.show({
+        message: t("Image removed successfully"),
+      });
+    } catch (error) {
+      console.error(error);
+      notifications.show({
+        message: t("Failed to remove image"),
+        color: "red",
+      });
+    }
+  };
+
+  return (
+    <Box>
+      <input
+        type="file"
+        ref={fileInputRef}
+        onChange={handleFileInputChange}
+        accept="image/png,image/jpeg,image/jpg"
+        style={{ display: "none" }}
+      />
+
+      <Menu shadow="md" width={200} withArrow disabled={disabled || isLoading}>
+        <Menu.Target>
+          <Box style={{ position: "relative", display: "inline-block" }}>
+            <CustomAvatar
+              component="button"
+              size={size}
+              avatarUrl={currentImageUrl}
+              name={fallbackName}
+              style={{
+                cursor: disabled || isLoading ? "default" : "pointer",
+                opacity: isLoading ? 0.6 : 1,
+              }}
+              radius={radius}
+              variant={variant}
+              type={type}
+            />
+            {isLoading && (
+              <Box
+                style={{
+                  position: "absolute",
+                  top: "50%",
+                  left: "50%",
+                  transform: "translate(-50%, -50%)",
+                  zIndex: 1000,
+                }}
+              >
+                <Loader size="sm" />
+              </Box>
+            )}
+          </Box>
+        </Menu.Target>
+
+        <Menu.Dropdown>
+          <Menu.Item
+            leftSection={<IconUpload size={16} />}
+            disabled={isLoading || disabled}
+            onClick={handleUploadClick}
+          >
+            {t("Upload image")}
+          </Menu.Item>
+
+          {currentImageUrl && (
+            <Menu.Item
+              leftSection={<IconTrash size={16} />}
+              color="red"
+              onClick={handleRemove}
+              disabled={isLoading || disabled}
+            >
+              {t("Remove image")}
+            </Menu.Item>
+          )}
+        </Menu.Dropdown>
+      </Menu>
+    </Box>
+  );
+}
@@ -4,14 +4,15 @@ import { useTranslation } from "react-i18next";

 interface NoTableResultsProps {
  colSpan: number;
+  text?: string;
 }
-export default function NoTableResults({ colSpan }: NoTableResultsProps) {
+export default function NoTableResults({ colSpan, text }: NoTableResultsProps) {
  const { t } = useTranslation();
  return (
    <Table.Tr>
      <Table.Td colSpan={colSpan}>
        <Text fw={500} c="dimmed" ta="center">
-          {t("No results found...")}
+          {text || t("No results found...")}
        </Text>
      </Table.Td>
    </Table.Tr>
@@ -1,8 +1,8 @@
 import {
  Group,
  Menu,
-  UnstyledButton,
  Text,
+  UnstyledButton,
  useMantineColorScheme,
 } from "@mantine/core";
 import {
@@ -10,7 +10,6 @@ import {
  IconBrush,
  IconCheck,
  IconChevronDown,
-  IconChevronRight,
  IconDeviceDesktop,
  IconLogout,
  IconMoon,
@@ -26,6 +25,7 @@ import APP_ROUTE from "@/lib/app-route.ts";
 import useAuth from "@/features/auth/hooks/use-auth.ts";
 import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
 import { useTranslation } from "react-i18next";
+import { AvatarIconType } from "@/features/attachments/types/attachment.types.ts";

 export default function TopMenu() {
  const { t } = useTranslation();
@@ -50,6 +50,7 @@ export default function TopMenu() {
              name={workspace?.name}
              variant="filled"
              size="sm"
+              type={AvatarIconType.WORKSPACE_ICON}
            />
            <Text fw={500} size="sm" lh={1} mr={3} lineClamp={1}>
              {workspace?.name}
@@ -10,6 +10,7 @@ import { getWorkspaceMembers } from "@/features/workspace/services/workspace-ser
 import { getLicenseInfo } from "@/ee/licence/services/license-service.ts";
 import { getSsoProviders } from "@/ee/security/services/security-service.ts";
 import { getShares } from "@/features/share/services/share-service.ts";
+import { getApiKeys } from "@/ee/api-key";

 export const prefetchWorkspaceMembers = () => {
  const params = { limit: 100, page: 1, query: "" } as QueryParams;
@@ -65,3 +66,17 @@ export const prefetchShares = () => {
    queryFn: () => getShares({ page: 1, limit: 100 }),
  });
 };
+
+export const prefetchApiKeys = () => {
+  queryClient.prefetchQuery({
+    queryKey: ["api-key-list", { page: 1 }],
+    queryFn: () => getApiKeys({ page: 1 }),
+  });
+};
+
+export const prefetchApiKeyManagement = () => {
+  queryClient.prefetchQuery({
+    queryKey: ["api-key-list", { page: 1 }],
+    queryFn: () => getApiKeys({ page: 1, adminView: true }),
+  });
+};
@@ -12,15 +12,18 @@ import {
  IconLock,
  IconKey,
  IconWorld,
+  IconSparkles,
 } from "@tabler/icons-react";
 import { Link, useLocation } from "react-router-dom";
 import classes from "./settings.module.css";
 import { useTranslation } from "react-i18next";
 import { isCloud } from "@/lib/config.ts";
 import useUserRole from "@/hooks/use-user-role.tsx";
-import { useAtom } from "jotai/index";
+import { useAtom } from "jotai";
 import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
 import {
+  prefetchApiKeyManagement,
+  prefetchApiKeys,
  prefetchBilling,
  prefetchGroups,
  prefetchLicense,
@@ -60,6 +63,14 @@ const groupedData: DataGroup[] = [
        icon: IconBrush,
        path: "/settings/account/preferences",
      },
+      {
+        label: "API keys",
+        icon: IconKey,
+        path: "/settings/account/api-keys",
+        isCloud: true,
+        isEnterprise: true,
+        showDisabledInNonEE: true,
+      },
    ],
  },
  {
@@ -90,6 +101,22 @@ const groupedData: DataGroup[] = [
      { label: "Groups", icon: IconUsersGroup, path: "/settings/groups" },
      { label: "Spaces", icon: IconSpaces, path: "/settings/spaces" },
      { label: "Public sharing", icon: IconWorld, path: "/settings/sharing" },
+      {
+        label: "API management",
+        icon: IconKey,
+        path: "/settings/api-keys",
+        isCloud: true,
+        isEnterprise: true,
+        isAdmin: true,
+        showDisabledInNonEE: true,
+      },
+      {
+        label: "AI settings",
+        icon: IconSparkles,
+        path: "/settings/ai",
+        isAdmin: true,
+        isSelfhosted: true,
+      },
    ],
  },
  {
@@ -195,6 +222,12 @@ export default function SettingsSidebar() {
            case "Public sharing":
              prefetchHandler = prefetchShares;
              break;
+            case "API keys":
+              prefetchHandler = prefetchApiKeys;
+              break;
+            case "API management":
+              prefetchHandler = prefetchApiKeyManagement;
+              break;
            default:
              break;
          }
@@ -1,6 +1,7 @@
 import React from "react";
 import { Avatar } from "@mantine/core";
 import { getAvatarUrl } from "@/lib/config.ts";
+import { AvatarIconType } from "@/features/attachments/types/attachment.types.ts";

 interface CustomAvatarProps {
  avatarUrl: string;
@@ -11,13 +12,15 @@ interface CustomAvatarProps {
  variant?: string;
  style?: any;
  component?: any;
+  type?: AvatarIconType;
+  mt?: string | number;
 }

 export const CustomAvatar = React.forwardRef<
  HTMLInputElement,
  CustomAvatarProps
->(({ avatarUrl, name, ...props }: CustomAvatarProps, ref) => {
-  const avatarLink = getAvatarUrl(avatarUrl);
+>(({ avatarUrl, name, type, ...props }: CustomAvatarProps, ref) => {
+  const avatarLink = getAvatarUrl(avatarUrl, type);

  return (
    <Avatar
@@ -0,0 +1,113 @@
+import React, { useMemo } from "react";
+import { Paper, Text, Group, Stack, Loader, Box } from "@mantine/core";
+import { IconSparkles, IconFileText } from "@tabler/icons-react";
+import { Link } from "react-router-dom";
+import { IAiSearchResponse } from "../services/ai-search-service.ts";
+import { buildPageUrl } from "@/features/page/page.utils.ts";
+import { markdownToHtml } from "@docmost/editor-ext";
+import DOMPurify from "dompurify";
+import { useTranslation } from "react-i18next";
+
+interface AiSearchResultProps {
+  result?: IAiSearchResponse;
+  isLoading?: boolean;
+  streamingAnswer?: string;
+  streamingSources?: any[];
+}
+
+export function AiSearchResult({
+  result,
+  isLoading,
+  streamingAnswer = "",
+  streamingSources = [],
+}: AiSearchResultProps) {
+  const { t } = useTranslation();
+
+  // Use streaming data if available, otherwise fall back to result
+  const answer = streamingAnswer || result?.answer || "";
+  const sources =
+    streamingSources.length > 0 ? streamingSources : result?.sources || [];
+
+  // Deduplicate sources by pageId, keeping the one with highest similarity
+  const deduplicatedSources = useMemo(() => {
+    if (!sources || sources.length === 0) return [];
+
+    const pageMap = new Map();
+    sources.forEach((source) => {
+      const existing = pageMap.get(source.pageId);
+      if (!existing || source.similarity > existing.similarity) {
+        pageMap.set(source.pageId, source);
+      }
+    });
+
+    return Array.from(pageMap.values());
+  }, [sources]);
+
+  if (isLoading && !answer) {
+    return (
+      <Paper p="md" radius="md" withBorder>
+        <Group>
+          <Loader size="sm" />
+          <Text size="sm">{t("AI is thinking...")}</Text>
+        </Group>
+      </Paper>
+    );
+  }
+
+  if (!answer && !isLoading) {
+    return null;
+  }
+
+  return (
+    <Stack gap="md" p="md">
+      <Paper p="md" radius="md" withBorder>
+        <Group gap="xs" mb="sm">
+          <IconSparkles size={20} color="var(--mantine-color-blue-6)" />
+          <Text fw={600} size="sm">
+            {t("AI Answer")}
+          </Text>
+          {isLoading && <Loader size="xs" />}
+        </Group>
+        <div
+          dangerouslySetInnerHTML={{
+            __html: DOMPurify.sanitize(markdownToHtml(answer) as string),
+          }}
+        />
+      </Paper>
+
+      {deduplicatedSources.length > 0 && (
+        <Stack gap="xs">
+          <Text size="xs" fw={600} c="dimmed">
+            {t("Sources")}
+          </Text>
+          {deduplicatedSources.map((source) => (
+            <Box
+              key={source.pageId}
+              component={Link}
+              to={buildPageUrl(source.spaceSlug, source.slugId, source.title)}
+              style={{
+                textDecoration: "none",
+                color: "inherit",
+                display: "block",
+              }}
+            >
+              <Paper
+                p="xs"
+                radius="sm"
+                withBorder
+                style={{ cursor: "pointer" }}
+              >
+                <Group gap="xs">
+                  <IconFileText size={16} />
+                  <Text size="sm" truncate>
+                    {source.title}
+                  </Text>
+                </Group>
+              </Paper>
+            </Box>
+          ))}
+        </Stack>
+      )}
+    </Stack>
+  );
+}
@@ -0,0 +1,69 @@
+import { Group, Text, Switch, MantineSize, Title } from "@mantine/core";
+import { useAtom } from "jotai";
+import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { updateWorkspace } from "@/features/workspace/services/workspace-service.ts";
+import { notifications } from "@mantine/notifications";
+import { isCloud } from "@/lib/config.ts";
+import useLicense from "@/ee/hooks/use-license.tsx";
+
+export default function EnableAiSearch() {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Group justify="space-between" wrap="nowrap" gap="xl">
+        <div>
+          <Text size="md">{t("AI-powered search (Ask AI)")}</Text>
+          <Text size="sm" c="dimmed">
+            {t(
+              "AI search uses vector embeddings to provide semantic search capabilities across your workspace content.",
+            )}
+          </Text>
+        </div>
+
+        <AiSearchToggle />
+      </Group>
+    </>
+  );
+}
+
+interface AiSearchToggleProps {
+  size?: MantineSize;
+  label?: string;
+}
+export function AiSearchToggle({ size, label }: AiSearchToggleProps) {
+  const { t } = useTranslation();
+  const [workspace, setWorkspace] = useAtom(workspaceAtom);
+  const [checked, setChecked] = useState(workspace?.settings?.ai?.search);
+  const { hasLicenseKey } = useLicense();
+
+  const hasAccess = isCloud() || (!isCloud() && hasLicenseKey);
+
+  const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.currentTarget.checked;
+    try {
+      const updatedWorkspace = await updateWorkspace({ aiSearch: value });
+      setChecked(value);
+      setWorkspace(updatedWorkspace);
+    } catch (err) {
+      notifications.show({
+        message: err?.response?.data?.message,
+        color: "red",
+      });
+    }
+  };
+
+  return (
+    <Switch
+      size={size}
+      label={label}
+      labelPosition="left"
+      defaultChecked={checked}
+      onChange={handleChange}
+      disabled={!hasAccess}
+      aria-label={t("Toggle AI search")}
+    />
+  );
+}
@@ -0,0 +1,46 @@
+import { useMutation, UseMutationResult } from "@tanstack/react-query";
+import { useState, useCallback } from "react";
+import { askAi, IAiSearchResponse } from "@/ee/ai/services/ai-search-service.ts";
+import { IPageSearchParams } from "@/features/search/types/search.types.ts";
+
+// @ts-ignore
+interface UseAiSearchResult extends UseMutationResult<IAiSearchResponse, Error, IPageSearchParams> {
+  streamingAnswer: string;
+  streamingSources: any[];
+  clearStreaming: () => void;
+}
+
+export function useAiSearch(): UseAiSearchResult {
+  const [streamingAnswer, setStreamingAnswer] = useState("");
+  const [streamingSources, setStreamingSources] = useState<any[]>([]);
+
+  const clearStreaming = useCallback(() => {
+    setStreamingAnswer("");
+    setStreamingSources([]);
+  }, []);
+
+  const mutation = useMutation({
+    mutationFn: async (params: IPageSearchParams & { contentType?: string }) => {
+      setStreamingAnswer("");
+      setStreamingSources([]);
+
+      const { contentType, ...apiParams } = params;
+
+      return await askAi(apiParams, (chunk) => {
+        if (chunk.content) {
+          setStreamingAnswer((prev) => prev + chunk.content);
+        }
+        if (chunk.sources) {
+          setStreamingSources(chunk.sources);
+        }
+      });
+    },
+  });
+
+  return {
+    ...mutation,
+    streamingAnswer,
+    streamingSources,
+    clearStreaming,
+  };
+}
@@ -0,0 +1,61 @@
+import { useState, useCallback, useRef } from "react";
+import { useAiGenerateStreamMutation } from "@/ee/ai/queries/ai-query.ts";
+import { AiGenerateDto } from "@/ee/ai/types/ai.types.ts";
+
+export function useAiStream() {
+  const [content, setContent] = useState("");
+  const [isStreaming, setIsStreaming] = useState(false);
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const mutation = useAiGenerateStreamMutation();
+
+  const startStream = useCallback(
+    async (data: AiGenerateDto) => {
+      setContent("");
+      setIsStreaming(true);
+
+      try {
+        const controller = await mutation.mutateAsync({
+          ...data,
+          onChunk: (chunk) => {
+            setContent((prev) => prev + chunk.content);
+          },
+          onError: (error) => {
+            console.error("AI stream error:", error);
+            setIsStreaming(false);
+          },
+          onComplete: () => {
+            setIsStreaming(false);
+          },
+        });
+
+        abortControllerRef.current = controller;
+      } catch (error) {
+        console.error("Failed to start stream:", error);
+        setIsStreaming(false);
+      }
+    },
+    [mutation]
+  );
+
+  const stopStream = useCallback(() => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      abortControllerRef.current = null;
+      setIsStreaming(false);
+    }
+  }, []);
+
+  const resetContent = useCallback(() => {
+    setContent("");
+  }, []);
+
+  return {
+    content,
+    isStreaming,
+    startStream,
+    stopStream,
+    resetContent,
+    isLoading: mutation.isPending,
+    error: mutation.error,
+  };
+}
@@ -0,0 +1,46 @@
+import { Helmet } from "react-helmet-async";
+import { getAppName, isCloud } from "@/lib/config.ts";
+import SettingsTitle from "@/components/settings/settings-title.tsx";
+import React from "react";
+import useUserRole from "@/hooks/use-user-role.tsx";
+import { useTranslation } from "react-i18next";
+import useLicense from "@/ee/hooks/use-license.tsx";
+import EnableAiSearch from "@/ee/ai/components/enable-ai-search.tsx";
+import { Alert } from "@mantine/core";
+import { IconInfoCircle } from "@tabler/icons-react";
+
+export default function AiSettings() {
+  const { t } = useTranslation();
+  const { isAdmin } = useUserRole();
+  const { hasLicenseKey } = useLicense();
+
+  if (!isAdmin) {
+    return null;
+  }
+
+  const hasAccess = isCloud() || (!isCloud() && hasLicenseKey);
+
+  return (
+    <>
+      <Helmet>
+        <title>AI - {getAppName()}</title>
+      </Helmet>
+      <SettingsTitle title={t("AI settings")} />
+
+      {!hasAccess && (
+        <Alert
+          icon={<IconInfoCircle />}
+          title={t("Enterprise feature")}
+          color="blue"
+          mb="lg"
+        >
+          {t(
+            "AI is only available in the Docmost enterprise edition. Contact sales@docmost.com.",
+          )}
+        </Alert>
+      )}
+
+      <EnableAiSearch />
+    </>
+  );
+}
@@ -0,0 +1,44 @@
+import {
+  useMutation,
+  UseMutationResult,
+  useQuery,
+  UseQueryResult,
+} from "@tanstack/react-query";
+import {
+  generateAiContent,
+  generateAiContentStream,
+} from "@/ee/ai/services/ai-service.ts";
+import {
+  AiConfigResponse,
+  AiContentResponse,
+  AiGenerateDto,
+  AiStreamChunk,
+  AiStreamError,
+} from "@/ee/ai/types/ai.types.ts";
+
+export function useAiGenerateMutation(): UseMutationResult<
+  AiContentResponse,
+  Error,
+  AiGenerateDto
+> {
+  return useMutation({
+    mutationFn: (data: AiGenerateDto) => generateAiContent(data),
+  });
+}
+
+interface StreamCallbacks {
+  onChunk: (chunk: AiStreamChunk) => void;
+  onError?: (error: AiStreamError) => void;
+  onComplete?: () => void;
+}
+
+export function useAiGenerateStreamMutation(): UseMutationResult<
+  AbortController,
+  Error,
+  AiGenerateDto & StreamCallbacks
+> {
+  return useMutation({
+    mutationFn: ({ onChunk, onError, onComplete, ...data }) =>
+      generateAiContentStream(data, onChunk, onError, onComplete),
+  });
+}
@@ -0,0 +1,83 @@
+import api from "@/lib/api-client.ts";
+import { IPageSearchParams } from "@/features/search/types/search.types.ts";
+
+export interface IAiSearchResponse {
+  answer: string;
+  sources?: Array<{
+    pageId: string;
+    title: string;
+    slugId: string;
+    spaceSlug: string;
+    similarity: number;
+    distance: number;
+    chunkIndex: number;
+    excerpt: string;
+  }>;
+}
+
+export async function askAi(
+  params: IPageSearchParams,
+  onChunk?: (chunk: { content?: string; sources?: any[] }) => void,
+): Promise<IAiSearchResponse> {
+  const response = await fetch("/api/ai/ask", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    credentials: "include",
+    body: JSON.stringify(params),
+  });
+
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+
+  const reader = response.body?.getReader();
+  const decoder = new TextDecoder();
+
+  let answer = "";
+  let sources: any[] = [];
+  let buffer = "";
+
+  if (reader) {
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+
+      buffer += decoder.decode(value, { stream: true });
+      const lines = buffer.split("\n");
+
+      // Keep the last incomplete line in the buffer
+      buffer = lines.pop() || "";
+
+      for (const line of lines) {
+        if (line.startsWith("data: ")) {
+          const data = line.slice(6);
+          if (data === "[DONE]") break;
+
+          try {
+            const parsed = JSON.parse(data);
+            if (parsed.error) {
+              throw new Error(parsed.error);
+            }
+            if (parsed.content) {
+              answer += parsed.content;
+              onChunk?.({ content: parsed.content });
+            }
+            if (parsed.sources) {
+              sources = parsed.sources;
+              onChunk?.({ sources: parsed.sources });
+            }
+          } catch (e) {
+            if (e instanceof Error) {
+              throw e;
+            }
+            // Skip invalid JSON
+          }
+        }
+      }
+    }
+  }
+
+  return { answer, sources };
+}
@@ -0,0 +1,89 @@
+import api from "@/lib/api-client.ts";
+import {
+  AiGenerateDto,
+  AiContentResponse,
+  AiStreamChunk,
+  AiStreamError,
+} from "@/ee/ai/types/ai.types.ts";
+
+export async function generateAiContent(
+  data: AiGenerateDto,
+): Promise<AiContentResponse> {
+  const req = await api.post<AiContentResponse>("/ai/generate", data);
+  return req.data;
+}
+
+export async function generateAiContentStream(
+  data: AiGenerateDto,
+  onChunk: (chunk: AiStreamChunk) => void,
+  onError?: (error: AiStreamError) => void,
+  onComplete?: () => void,
+): Promise<AbortController> {
+  const abortController = new AbortController();
+  try {
+    const response = await fetch("/api/ai/generate/stream", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+      signal: abortController.signal,
+      credentials: "include", // This ensures cookies are sent, matching axios withCredentials
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    const reader = response.body?.getReader();
+    const decoder = new TextDecoder();
+
+    if (!reader) {
+      throw new Error("Response body is not readable");
+    }
+
+    const processStream = async () => {
+      try {
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+
+          const chunk = decoder.decode(value, { stream: true });
+          const lines = chunk.split("\n");
+
+          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);
+                if (parsed.error) {
+                  onError?.(parsed);
+                } else {
+                  onChunk(parsed);
+                }
+              } catch (e) {
+                // Ignore parse errors for incomplete chunks
+              }
+            }
+          }
+        }
+      } catch (error) {
+        if (error.name !== "AbortError") {
+          onError?.({ error: error.message });
+        }
+      } finally {
+        reader.releaseLock();
+      }
+    };
+
+    processStream();
+  } catch (error) {
+    onError?.({ error: error.message });
+  }
+
+  return abortController;
+}
@@ -0,0 +1,40 @@
+export enum AiAction {
+  IMPROVE_WRITING = "improve_writing",
+  FIX_SPELLING_GRAMMAR = "fix_spelling_grammar",
+  MAKE_SHORTER = "make_shorter",
+  MAKE_LONGER = "make_longer",
+  SIMPLIFY = "simplify",
+  CHANGE_TONE = "change_tone",
+  SUMMARIZE = "summarize",
+  CONTINUE_WRITING = "continue_writing",
+  TRANSLATE = "translate",
+  CUSTOM = "custom",
+}
+
+export interface AiGenerateDto {
+  action?: AiAction;
+  content: string;
+  prompt?: string;
+}
+
+export interface AiContentResponse {
+  content: string;
+  usage?: {
+    promptTokens: number;
+    completionTokens: number;
+    totalTokens: number;
+  };
+}
+
+export interface AiConfigResponse {
+  configured: boolean;
+  availableActions: AiAction[];
+}
+
+export interface AiStreamChunk {
+  content: string;
+}
+
+export interface AiStreamError {
+  error: string;
+}
@@ -0,0 +1,72 @@
+import {
+  Modal,
+  Text,
+  Stack,
+  Alert,
+  Group,
+  Button,
+  TextInput,
+} from "@mantine/core";
+import { IconAlertTriangle } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import { IApiKey } from "@/ee/api-key";
+import CopyTextButton from "@/components/common/copy.tsx";
+
+interface ApiKeyCreatedModalProps {
+  opened: boolean;
+  onClose: () => void;
+  apiKey: IApiKey;
+}
+
+export function ApiKeyCreatedModal({
+  opened,
+  onClose,
+  apiKey,
+}: ApiKeyCreatedModalProps) {
+  const { t } = useTranslation();
+
+  if (!apiKey) return null;
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      title={t("API key created")}
+      size="lg"
+    >
+      <Stack gap="md">
+        <Alert
+          icon={<IconAlertTriangle size={16} />}
+          title={t("Important")}
+          color="red"
+        >
+          {t(
+            "Make sure to copy your API key now. You won't be able to see it again!",
+          )}
+        </Alert>
+
+        <div>
+          <Text size="sm" fw={500} mb="xs">
+            {t("API key")}
+          </Text>
+          <Group gap="xs" wrap="nowrap">
+            <TextInput
+              variant="filled"
+              style={{
+                flex: 1,
+              }}
+              value={apiKey.token}
+              readOnly
+            />
+
+            <CopyTextButton text={apiKey.token} />
+          </Group>
+        </div>
+
+        <Button fullWidth onClick={onClose} mt="md">
+          {t("I've saved my API key")}
+        </Button>
+      </Stack>
+    </Modal>
+  );
+}
@@ -0,0 +1,143 @@
+import { ActionIcon, Group, Menu, Table, Text } from "@mantine/core";
+import { IconDots, IconEdit, IconTrash } from "@tabler/icons-react";
+import { format } from "date-fns";
+import { useTranslation } from "react-i18next";
+import { IApiKey } from "@/ee/api-key";
+import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
+import React from "react";
+import NoTableResults from "@/components/common/no-table-results";
+
+interface ApiKeyTableProps {
+  apiKeys: IApiKey[];
+  isLoading?: boolean;
+  showUserColumn?: boolean;
+  onUpdate?: (apiKey: IApiKey) => void;
+  onRevoke?: (apiKey: IApiKey) => void;
+}
+
+export function ApiKeyTable({
+  apiKeys,
+  isLoading,
+  showUserColumn = false,
+  onUpdate,
+  onRevoke,
+}: ApiKeyTableProps) {
+  const { t } = useTranslation();
+
+  const formatDate = (date: Date | string | null) => {
+    if (!date) return t("Never");
+    return format(new Date(date), "MMM dd, yyyy");
+  };
+
+  const isExpired = (expiresAt: string | null) => {
+    if (!expiresAt) return false;
+    return new Date(expiresAt) < new Date();
+  };
+
+  return (
+    <Table.ScrollContainer minWidth={500}>
+      <Table highlightOnHover verticalSpacing="sm">
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th>{t("Name")}</Table.Th>
+            {showUserColumn && <Table.Th>{t("User")}</Table.Th>}
+            <Table.Th>{t("Last used")}</Table.Th>
+            <Table.Th>{t("Expires")}</Table.Th>
+            <Table.Th>{t("Created")}</Table.Th>
+            <Table.Th></Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+
+        <Table.Tbody>
+          {apiKeys && apiKeys.length > 0 ? (
+            apiKeys.map((apiKey: IApiKey, index: number) => (
+              <Table.Tr key={index}>
+                <Table.Td>
+                  <Text fz="sm" fw={500}>
+                    {apiKey.name}
+                  </Text>
+                </Table.Td>
+
+                {showUserColumn && apiKey.creator && (
+                  <Table.Td>
+                    <Group gap="4" wrap="nowrap">
+                      <CustomAvatar
+                        avatarUrl={apiKey.creator?.avatarUrl}
+                        name={apiKey.creator.name}
+                        size="sm"
+                      />
+                      <Text fz="sm" lineClamp={1}>
+                        {apiKey.creator.name}
+                      </Text>
+                    </Group>
+                  </Table.Td>
+                )}
+
+                <Table.Td>
+                  <Text fz="sm" style={{ whiteSpace: "nowrap" }}>
+                    {formatDate(apiKey.lastUsedAt)}
+                  </Text>
+                </Table.Td>
+
+                <Table.Td>
+                  {apiKey.expiresAt ? (
+                    isExpired(apiKey.expiresAt) ? (
+                      <Text fz="sm" style={{ whiteSpace: "nowrap" }}>
+                        {t("Expired")}
+                      </Text>
+                    ) : (
+                      <Text fz="sm" style={{ whiteSpace: "nowrap" }}>
+                        {formatDate(apiKey.expiresAt)}
+                      </Text>
+                    )
+                  ) : (
+                    <Text fz="sm" style={{ whiteSpace: "nowrap" }}>
+                      {t("Never")}
+                    </Text>
+                  )}
+                </Table.Td>
+
+                <Table.Td>
+                  <Text fz="sm" style={{ whiteSpace: "nowrap" }}>
+                    {formatDate(apiKey.createdAt)}
+                  </Text>
+                </Table.Td>
+
+                <Table.Td>
+                  <Menu position="bottom-end" withinPortal>
+                    <Menu.Target>
+                      <ActionIcon variant="subtle" color="gray">
+                        <IconDots size={16} />
+                      </ActionIcon>
+                    </Menu.Target>
+                    <Menu.Dropdown>
+                      {onUpdate && (
+                        <Menu.Item
+                          leftSection={<IconEdit size={16} />}
+                          onClick={() => onUpdate(apiKey)}
+                        >
+                          {t("Rename")}
+                        </Menu.Item>
+                      )}
+                      {onRevoke && (
+                        <Menu.Item
+                          leftSection={<IconTrash size={16} />}
+                          color="red"
+                          onClick={() => onRevoke(apiKey)}
+                        >
+                          {t("Revoke")}
+                        </Menu.Item>
+                      )}
+                    </Menu.Dropdown>
+                  </Menu>
+                </Table.Td>
+              </Table.Tr>
+            ))
+          ) : (
+            <NoTableResults colSpan={showUserColumn ? 6 : 5} />
+          )}
+        </Table.Tbody>
+      </Table>
+    </Table.ScrollContainer>
+  );
+}
@@ -0,0 +1,153 @@
+import { lazy, Suspense, useState } from "react";
+import { Modal, TextInput, Button, Group, Stack, Select } from "@mantine/core";
+import { useForm } from "@mantine/form";
+import { zodResolver } from "mantine-form-zod-resolver";
+import { z } from "zod";
+import { useTranslation } from "react-i18next";
+import { useCreateApiKeyMutation } from "@/ee/api-key/queries/api-key-query";
+import { IconCalendar } from "@tabler/icons-react";
+import { IApiKey } from "@/ee/api-key";
+
+const DateInput = lazy(() =>
+  import("@mantine/dates").then((module) => ({
+    default: module.DateInput,
+  })),
+);
+
+interface CreateApiKeyModalProps {
+  opened: boolean;
+  onClose: () => void;
+  onSuccess: (response: IApiKey) => void;
+}
+
+const formSchema = z.object({
+  name: z.string().min(1, "Name is required"),
+  expiresAt: z.string().optional(),
+});
+type FormValues = z.infer<typeof formSchema>;
+
+export function CreateApiKeyModal({
+  opened,
+  onClose,
+  onSuccess,
+}: CreateApiKeyModalProps) {
+  const { t } = useTranslation();
+  const [expirationOption, setExpirationOption] = useState<string>("30");
+  const createApiKeyMutation = useCreateApiKeyMutation();
+
+  const form = useForm<FormValues>({
+    validate: zodResolver(formSchema),
+    initialValues: {
+      name: "",
+      expiresAt: "",
+    },
+  });
+
+  const getExpirationDate = (): string | undefined => {
+    if (expirationOption === "never") {
+      return undefined;
+    }
+    if (expirationOption === "custom") {
+      return form.values.expiresAt;
+    }
+    const days = parseInt(expirationOption);
+    const date = new Date();
+    date.setDate(date.getDate() + days);
+    return date.toISOString();
+  };
+
+  const getExpirationLabel = (days: number) => {
+    const date = new Date();
+    date.setDate(date.getDate() + days);
+    const formatted = date.toLocaleDateString("en-US", {
+      month: "short",
+      day: "2-digit",
+      year: "numeric",
+    });
+    return `${days} days (${formatted})`;
+  };
+
+  const expirationOptions = [
+    { value: "30", label: getExpirationLabel(30) },
+    { value: "60", label: getExpirationLabel(60) },
+    { value: "90", label: getExpirationLabel(90) },
+    { value: "365", label: getExpirationLabel(365) },
+    { value: "custom", label: t("Custom") },
+    { value: "never", label: t("No expiration") },
+  ];
+
+  const handleSubmit = async (data: {
+    name?: string;
+    expiresAt?: string | Date;
+  }) => {
+    const groupData = {
+      name: data.name,
+      expiresAt: getExpirationDate(),
+    };
+
+    try {
+      const createdKey = await createApiKeyMutation.mutateAsync(groupData);
+      onSuccess(createdKey);
+      form.reset();
+      onClose();
+    } catch (err) {
+      //
+    }
+  };
+
+  const handleClose = () => {
+    form.reset();
+    setExpirationOption("30");
+    onClose();
+  };
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={handleClose}
+      title={t("Create API Key")}
+      size="md"
+    >
+      <form onSubmit={form.onSubmit((values) => handleSubmit(values))}>
+        <Stack gap="md">
+          <TextInput
+            label={t("Name")}
+            placeholder={t("Enter a descriptive name")}
+            data-autofocus
+            required
+            {...form.getInputProps("name")}
+          />
+
+          <Select
+            label={t("Expiration")}
+            data={expirationOptions}
+            value={expirationOption}
+            onChange={(value) => setExpirationOption(value || "30")}
+            leftSection={<IconCalendar size={16} />}
+            allowDeselect={false}
+          />
+
+          {expirationOption === "custom" && (
+            <Suspense fallback={null}>
+              <DateInput
+                label={t("Custom expiration date")}
+                placeholder={t("Select expiration date")}
+                minDate={new Date()}
+                {...form.getInputProps("expiresAt")}
+              />
+            </Suspense>
+          )}
+
+          <Group justify="flex-end" mt="md">
+            <Button variant="default" onClick={handleClose}>
+              {t("Cancel")}
+            </Button>
+            <Button type="submit" loading={createApiKeyMutation.isPending}>
+              {t("Create")}
+            </Button>
+          </Group>
+        </Stack>
+      </form>
+    </Modal>
+  );
+}
@@ -0,0 +1,62 @@
+import { Modal, Text, Button, Group, Stack } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+
+import { useRevokeApiKeyMutation } from "@/ee/api-key/queries/api-key-query.ts";
+import { IApiKey } from "@/ee/api-key";
+
+interface RevokeApiKeyModalProps {
+  opened: boolean;
+  onClose: () => void;
+  apiKey: IApiKey | null;
+}
+
+export function RevokeApiKeyModal({
+  opened,
+  onClose,
+  apiKey,
+}: RevokeApiKeyModalProps) {
+  const { t } = useTranslation();
+  const revokeApiKeyMutation = useRevokeApiKeyMutation();
+
+  const handleRevoke = async () => {
+    if (!apiKey) return;
+    await revokeApiKeyMutation.mutateAsync({
+      apiKeyId: apiKey.id,
+    });
+    onClose();
+  };
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      title={t("Revoke API key")}
+      size="md"
+    >
+      <Stack gap="md">
+        <Text>
+          {t("Are you sure you want to revoke this API key")}{" "}
+          <strong>{apiKey?.name}</strong>?
+        </Text>
+        <Text size="sm" c="dimmed">
+          {t(
+            "This action cannot be undone. Any applications using this API key will stop working.",
+          )}
+        </Text>
+
+        <Group justify="flex-end" mt="md">
+          <Button variant="default" onClick={onClose}>
+            {t("Cancel")}
+          </Button>
+          <Button
+            color="red"
+            onClick={handleRevoke}
+            loading={revokeApiKeyMutation.isPending}
+          >
+            {t("Revoke")}
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+}
@@ -0,0 +1,80 @@
+import { Modal, TextInput, Button, Group, Stack } from "@mantine/core";
+import { useForm } from "@mantine/form";
+import { zodResolver } from "mantine-form-zod-resolver";
+import { z } from "zod";
+import { useTranslation } from "react-i18next";
+import { useUpdateApiKeyMutation } from "@/ee/api-key/queries/api-key-query";
+import { IApiKey } from "@/ee/api-key";
+import { useEffect } from "react";
+
+const formSchema = z.object({
+  name: z.string().min(1, "Name is required"),
+});
+type FormValues = z.infer<typeof formSchema>;
+
+interface UpdateApiKeyModalProps {
+  opened: boolean;
+  onClose: () => void;
+  apiKey: IApiKey | null;
+}
+
+export function UpdateApiKeyModal({
+  opened,
+  onClose,
+  apiKey,
+}: UpdateApiKeyModalProps) {
+  const { t } = useTranslation();
+  const updateApiKeyMutation = useUpdateApiKeyMutation();
+
+  const form = useForm<FormValues>({
+    validate: zodResolver(formSchema),
+    initialValues: {
+      name: "",
+    },
+  });
+
+  useEffect(() => {
+    if (opened && apiKey) {
+      form.setValues({ name: apiKey.name });
+    }
+  }, [opened, apiKey]);
+
+  const handleSubmit = async (data: { name?: string }) => {
+    const apiKeyData = {
+      apiKeyId: apiKey.id,
+      name: data.name,
+    };
+
+    await updateApiKeyMutation.mutateAsync(apiKeyData);
+    onClose();
+  };
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      title={t("Update API key")}
+      size="md"
+    >
+      <form onSubmit={form.onSubmit((values) => handleSubmit(values))}>
+        <Stack gap="md">
+          <TextInput
+            label={t("Name")}
+            placeholder={t("Enter a descriptive token name")}
+            required
+            {...form.getInputProps("name")}
+          />
+
+          <Group justify="flex-end" mt="md">
+            <Button variant="default" onClick={onClose}>
+              {t("Cancel")}
+            </Button>
+            <Button type="submit" loading={updateApiKeyMutation.isPending}>
+              {t("Update")}
+            </Button>
+          </Group>
+        </Stack>
+      </form>
+    </Modal>
+  );
+}
@@ -0,0 +1,11 @@
+export { ApiKeyTable } from "./components/api-key-table";
+export { CreateApiKeyModal } from "./components/create-api-key-modal";
+export { ApiKeyCreatedModal } from "./components/api-key-created-modal";
+export { UpdateApiKeyModal } from "./components/update-api-key-modal";
+export { RevokeApiKeyModal } from "./components/revoke-api-key-modal";
+
+// Services
+export * from "./services/api-key-service";
+
+// Types
+export * from "./types/api-key.types";
@@ -0,0 +1,106 @@
+import React, { useState } from "react";
+import { Button, Group, Space } from "@mantine/core";
+import { Helmet } from "react-helmet-async";
+import { useTranslation } from "react-i18next";
+import SettingsTitle from "@/components/settings/settings-title";
+import { getAppName } from "@/lib/config";
+import { ApiKeyTable } from "@/ee/api-key/components/api-key-table";
+import { CreateApiKeyModal } from "@/ee/api-key/components/create-api-key-modal";
+import { ApiKeyCreatedModal } from "@/ee/api-key/components/api-key-created-modal";
+import { UpdateApiKeyModal } from "@/ee/api-key/components/update-api-key-modal";
+import { RevokeApiKeyModal } from "@/ee/api-key/components/revoke-api-key-modal";
+import Paginate from "@/components/common/paginate";
+import { usePaginateAndSearch } from "@/hooks/use-paginate-and-search";
+import { useGetApiKeysQuery } from "@/ee/api-key/queries/api-key-query.ts";
+import { IApiKey } from "@/ee/api-key";
+
+export default function UserApiKeys() {
+  const { t } = useTranslation();
+  const { page, setPage } = usePaginateAndSearch();
+  const [createModalOpened, setCreateModalOpened] = useState(false);
+  const [createdApiKey, setCreatedApiKey] = useState<IApiKey | null>(null);
+  const [updateModalOpened, setUpdateModalOpened] = useState(false);
+  const [revokeModalOpened, setRevokeModalOpened] = useState(false);
+  const [selectedApiKey, setSelectedApiKey] = useState<IApiKey | null>(null);
+  const { data, isLoading } = useGetApiKeysQuery({ page });
+
+  const handleCreateSuccess = (response: IApiKey) => {
+    setCreatedApiKey(response);
+  };
+
+  const handleUpdate = (apiKey: IApiKey) => {
+    setSelectedApiKey(apiKey);
+    setUpdateModalOpened(true);
+  };
+
+  const handleRevoke = (apiKey: IApiKey) => {
+    setSelectedApiKey(apiKey);
+    setRevokeModalOpened(true);
+  };
+
+  return (
+    <>
+      <Helmet>
+        <title>
+          {t("API keys")} - {getAppName()}
+        </title>
+      </Helmet>
+
+      <SettingsTitle title={t("API keys")} />
+
+      <Group justify="flex-end" mb="md">
+        <Button onClick={() => setCreateModalOpened(true)}>
+          {t("Create API Key")}
+        </Button>
+      </Group>
+
+      <ApiKeyTable
+        apiKeys={data?.items || []}
+        isLoading={isLoading}
+        onUpdate={handleUpdate}
+        onRevoke={handleRevoke}
+      />
+
+      <Space h="md" />
+
+      {data?.items.length > 0 && (
+        <Paginate
+          currentPage={page}
+          hasPrevPage={data?.meta.hasPrevPage}
+          hasNextPage={data?.meta.hasNextPage}
+          onPageChange={setPage}
+        />
+      )}
+
+      <CreateApiKeyModal
+        opened={createModalOpened}
+        onClose={() => setCreateModalOpened(false)}
+        onSuccess={handleCreateSuccess}
+      />
+
+      <ApiKeyCreatedModal
+        opened={!!createdApiKey}
+        onClose={() => setCreatedApiKey(null)}
+        apiKey={createdApiKey}
+      />
+
+      <UpdateApiKeyModal
+        opened={updateModalOpened}
+        onClose={() => {
+          setUpdateModalOpened(false);
+          setSelectedApiKey(null);
+        }}
+        apiKey={selectedApiKey}
+      />
+
+      <RevokeApiKeyModal
+        opened={revokeModalOpened}
+        onClose={() => {
+          setRevokeModalOpened(false);
+          setSelectedApiKey(null);
+        }}
+        apiKey={selectedApiKey}
+      />
+    </>
+  );
+}
@@ -0,0 +1,117 @@
+import React, { useState } from "react";
+import { Button, Group, Space, Text } from "@mantine/core";
+import { Helmet } from "react-helmet-async";
+import { useTranslation } from "react-i18next";
+import SettingsTitle from "@/components/settings/settings-title";
+import { getAppName } from "@/lib/config";
+import { ApiKeyTable } from "@/ee/api-key/components/api-key-table";
+import { CreateApiKeyModal } from "@/ee/api-key/components/create-api-key-modal";
+import { ApiKeyCreatedModal } from "@/ee/api-key/components/api-key-created-modal";
+import { UpdateApiKeyModal } from "@/ee/api-key/components/update-api-key-modal";
+import { RevokeApiKeyModal } from "@/ee/api-key/components/revoke-api-key-modal";
+import Paginate from "@/components/common/paginate";
+import { usePaginateAndSearch } from "@/hooks/use-paginate-and-search";
+import { useGetApiKeysQuery } from "@/ee/api-key/queries/api-key-query.ts";
+import { IApiKey } from "@/ee/api-key";
+import useUserRole from '@/hooks/use-user-role.tsx';
+
+export default function WorkspaceApiKeys() {
+  const { t } = useTranslation();
+  const { page, setPage } = usePaginateAndSearch();
+  const [createModalOpened, setCreateModalOpened] = useState(false);
+  const [createdApiKey, setCreatedApiKey] = useState<IApiKey | null>(null);
+  const [updateModalOpened, setUpdateModalOpened] = useState(false);
+  const [revokeModalOpened, setRevokeModalOpened] = useState(false);
+  const [selectedApiKey, setSelectedApiKey] = useState<IApiKey | null>(null);
+  const { data, isLoading } = useGetApiKeysQuery({ page, adminView: true });
+  const { isAdmin } = useUserRole();
+
+  if (!isAdmin) {
+    return null;
+  }
+
+  const handleCreateSuccess = (response: IApiKey) => {
+    setCreatedApiKey(response);
+  };
+
+  const handleUpdate = (apiKey: IApiKey) => {
+    setSelectedApiKey(apiKey);
+    setUpdateModalOpened(true);
+  };
+
+  const handleRevoke = (apiKey: IApiKey) => {
+    setSelectedApiKey(apiKey);
+    setRevokeModalOpened(true);
+  };
+
+  return (
+    <>
+      <Helmet>
+        <title>
+          {t("API management")} - {getAppName()}
+        </title>
+      </Helmet>
+
+      <SettingsTitle title={t("API management")} />
+
+      <Text size="md" c="dimmed" mb="md">
+        {t("Manage API keys for all users in the workspace")}
+      </Text>
+
+      <Group justify="flex-end" mb="md">
+        <Button onClick={() => setCreateModalOpened(true)}>
+          {t("Create API Key")}
+        </Button>
+      </Group>
+
+      <ApiKeyTable
+        apiKeys={data?.items}
+        isLoading={isLoading}
+        showUserColumn
+        onUpdate={handleUpdate}
+        onRevoke={handleRevoke}
+      />
+
+      <Space h="md" />
+
+      {data?.items.length > 0 && (
+        <Paginate
+          currentPage={page}
+          hasPrevPage={data?.meta.hasPrevPage}
+          hasNextPage={data?.meta.hasNextPage}
+          onPageChange={setPage}
+        />
+      )}
+
+      <CreateApiKeyModal
+        opened={createModalOpened}
+        onClose={() => setCreateModalOpened(false)}
+        onSuccess={handleCreateSuccess}
+      />
+
+      <ApiKeyCreatedModal
+        opened={!!createdApiKey}
+        onClose={() => setCreatedApiKey(null)}
+        apiKey={createdApiKey}
+      />
+
+      <UpdateApiKeyModal
+        opened={updateModalOpened}
+        onClose={() => {
+          setUpdateModalOpened(false);
+          setSelectedApiKey(null);
+        }}
+        apiKey={selectedApiKey}
+      />
+
+      <RevokeApiKeyModal
+        opened={revokeModalOpened}
+        onClose={() => {
+          setRevokeModalOpened(false);
+          setSelectedApiKey(null);
+        }}
+        apiKey={selectedApiKey}
+      />
+    </>
+  );
+}
@@ -0,0 +1,97 @@
+import { IPagination, QueryParams } from "@/lib/types.ts";
+import {
+  keepPreviousData,
+  useMutation,
+  useQuery,
+  useQueryClient,
+  UseQueryResult,
+} from "@tanstack/react-query";
+import {
+  createApiKey,
+  getApiKeys,
+  IApiKey,
+  ICreateApiKeyRequest,
+  IUpdateApiKeyRequest,
+  revokeApiKey,
+  updateApiKey,
+} from "@/ee/api-key";
+import { notifications } from "@mantine/notifications";
+import { useTranslation } from "react-i18next";
+
+export function useGetApiKeysQuery(
+  params?: QueryParams,
+): UseQueryResult<IPagination<IApiKey>, Error> {
+  return useQuery({
+    queryKey: ["api-key-list", params],
+    queryFn: () => getApiKeys(params),
+    staleTime: 0,
+    gcTime: 0,
+    placeholderData: keepPreviousData,
+  });
+}
+
+export function useRevokeApiKeyMutation() {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+
+  return useMutation<
+    void,
+    Error,
+    {
+      apiKeyId: string;
+    }
+  >({
+    mutationFn: (data) => revokeApiKey(data),
+    onSuccess: (data, variables) => {
+      notifications.show({ message: t("Revoked successfully") });
+      queryClient.invalidateQueries({
+        predicate: (item) =>
+          ["api-key-list"].includes(item.queryKey[0] as string),
+      });
+    },
+    onError: (error) => {
+      const errorMessage = error["response"]?.data?.message;
+      notifications.show({ message: errorMessage, color: "red" });
+    },
+  });
+}
+
+export function useCreateApiKeyMutation() {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+
+  return useMutation<IApiKey, Error, ICreateApiKeyRequest>({
+    mutationFn: (data) => createApiKey(data),
+    onSuccess: () => {
+      notifications.show({ message: t("API key created successfully") });
+      queryClient.invalidateQueries({
+        predicate: (item) =>
+          ["api-key-list"].includes(item.queryKey[0] as string),
+      });
+    },
+    onError: (error) => {
+      const errorMessage = error["response"]?.data?.message;
+      notifications.show({ message: errorMessage, color: "red" });
+    },
+  });
+}
+
+export function useUpdateApiKeyMutation() {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+
+  return useMutation<IApiKey, Error, IUpdateApiKeyRequest>({
+    mutationFn: (data) => updateApiKey(data),
+    onSuccess: (data, variables) => {
+      notifications.show({ message: t("Updated successfully") });
+      queryClient.invalidateQueries({
+        predicate: (item) =>
+          ["api-key-list"].includes(item.queryKey[0] as string),
+      });
+    },
+    onError: (error) => {
+      const errorMessage = error["response"]?.data?.message;
+      notifications.show({ message: errorMessage, color: "red" });
+    },
+  });
+}
@@ -0,0 +1,32 @@
+import api from "@/lib/api-client";
+import {
+  ICreateApiKeyRequest,
+  IApiKey,
+  IUpdateApiKeyRequest,
+} from "@/ee/api-key/types/api-key.types";
+import { IPagination, QueryParams } from "@/lib/types.ts";
+
+export async function getApiKeys(
+  params?: QueryParams,
+): Promise<IPagination<IApiKey>> {
+  const req = await api.post("/api-keys", { ...params });
+  return req.data;
+}
+
+export async function createApiKey(
+  data: ICreateApiKeyRequest,
+): Promise<IApiKey> {
+  const req = await api.post<IApiKey>("/api-keys/create", data);
+  return req.data;
+}
+
+export async function updateApiKey(
+  data: IUpdateApiKeyRequest,
+): Promise<IApiKey> {
+  const req = await api.post<IApiKey>("/api-keys/update", data);
+  return req.data;
+}
+
+export async function revokeApiKey(data: { apiKeyId: string }): Promise<void> {
+  await api.post("/api-keys/revoke", data);
+}
@@ -0,0 +1,23 @@
+import { IUser } from "@/features/user/types/user.types.ts";
+
+export interface IApiKey {
+  id: string;
+  name: string;
+  token?: string;
+  creatorId: string;
+  workspaceId: string;
+  expiresAt: string | null;
+  lastUsedAt: string | null;
+  createdAt: string;
+  creator: Partial<IUser>;
+}
+
+export interface ICreateApiKeyRequest {
+  name: string;
+  expiresAt?: string;
+}
+
+export interface IUpdateApiKeyRequest {
+  apiKeyId: string;
+  name: string;
+}
@@ -11,7 +11,7 @@ export default function OssDetails() {
        withTableBorder
      >
        <Table.Caption>
-          To unlock enterprise features like SSO, MFA, Resolve comments, contact sales@docmost.com.
+          To unlock enterprise features like AI, SSO, MFA, Resolve comments, contact sales@docmost.com.
        </Table.Caption>
        <Table.Tbody>
          <Table.Tr>
@@ -0,0 +1,64 @@
+import api from "@/lib/api-client";
+import {
+  AvatarIconType,
+  IAttachment,
+} from "@/features/attachments/types/attachment.types.ts";
+
+export async function uploadIcon(
+  file: File,
+  type: AvatarIconType,
+  spaceId?: string,
+): Promise<IAttachment> {
+  const formData = new FormData();
+  formData.append("type", type);
+  if (spaceId) {
+    formData.append("spaceId", spaceId);
+  }
+  formData.append("image", file);
+
+  return await api.post("/attachments/upload-image", formData, {
+    headers: {
+      "Content-Type": "multipart/form-data",
+    },
+  });
+}
+
+export async function uploadUserAvatar(file: File): Promise<IAttachment> {
+  return uploadIcon(file, AvatarIconType.AVATAR);
+}
+
+export async function uploadSpaceIcon(
+  file: File,
+  spaceId: string,
+): Promise<IAttachment> {
+  return uploadIcon(file, AvatarIconType.SPACE_ICON, spaceId);
+}
+
+export async function uploadWorkspaceIcon(file: File): Promise<IAttachment> {
+  return uploadIcon(file, AvatarIconType.WORKSPACE_ICON);
+}
+
+async function removeIcon(
+  type: AvatarIconType,
+  spaceId?: string,
+): Promise<void> {
+  const payload: { spaceId?: string; type: string } = { type };
+
+  if (spaceId) {
+    payload.spaceId = spaceId;
+  }
+
+  await api.post("/attachments/remove-icon", payload);
+}
+
+export async function removeAvatar(): Promise<void> {
+  await removeIcon(AvatarIconType.AVATAR);
+}
+
+export async function removeSpaceIcon(spaceId: string): Promise<void> {
+  await removeIcon(AvatarIconType.SPACE_ICON, spaceId);
+}
+
+export async function removeWorkspaceIcon(): Promise<void> {
+  await removeIcon(AvatarIconType.WORKSPACE_ICON);
+}
@@ -0,0 +1,9 @@
+export {
+  uploadIcon,
+  uploadUserAvatar,
+  uploadSpaceIcon,
+  uploadWorkspaceIcon,
+  removeAvatar,
+  removeSpaceIcon,
+  removeWorkspaceIcon,
+} from "./attachment-service.ts";
@@ -0,0 +1,29 @@
+export interface IAttachment {
+  id: string;
+  fileName: string;
+  filePath: string;
+  fileSize: number;
+  fileExt: string;
+  mimeType: string;
+  type: string;
+  creatorId: string;
+  pageId: string | null;
+  spaceId: string | null;
+  workspaceId: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+}
+
+export enum AvatarIconType {
+  AVATAR = "avatar",
+  SPACE_ICON = "space-icon",
+  WORKSPACE_ICON = "workspace-icon",
+}
+
+export enum AttachmentType {
+  AVATAR = "avatar",
+  WORKSPACE_ICON = "workspace-icon",
+  SPACE_ICON = "space-icon",
+  FILE = "file",
+}
@@ -3,6 +3,7 @@ import {
  BubbleMenuProps,
  isNodeSelection,
  useEditor,
+  useEditorState,
 } from "@tiptap/react";
 import { FC, useEffect, useRef, useState } from "react";
 import {
@@ -50,34 +51,52 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
    showCommentPopupRef.current = showCommentPopup;
  }, [showCommentPopup]);

+  const editorState = useEditorState({
+    editor: props.editor,
+    selector: (ctx) => {
+      if (!props.editor) {
+        return null;
+      }
+
+      return {
+        isBold: ctx.editor.isActive("bold"),
+        isItalic: ctx.editor.isActive("italic"),
+        isUnderline: ctx.editor.isActive("underline"),
+        isStrike: ctx.editor.isActive("strike"),
+        isCode: ctx.editor.isActive("code"),
+        isComment: ctx.editor.isActive("comment"),
+      };
+    },
+  });
+
  const items: BubbleMenuItem[] = [
    {
      name: "Bold",
-      isActive: () => props.editor.isActive("bold"),
+      isActive: () => editorState?.isBold,
      command: () => props.editor.chain().focus().toggleBold().run(),
      icon: IconBold,
    },
    {
      name: "Italic",
-      isActive: () => props.editor.isActive("italic"),
+      isActive: () => editorState?.isItalic,
      command: () => props.editor.chain().focus().toggleItalic().run(),
      icon: IconItalic,
    },
    {
      name: "Underline",
-      isActive: () => props.editor.isActive("underline"),
+      isActive: () => editorState?.isUnderline,
      command: () => props.editor.chain().focus().toggleUnderline().run(),
      icon: IconUnderline,
    },
    {
      name: "Strike",
-      isActive: () => props.editor.isActive("strike"),
+      isActive: () => editorState?.isStrike,
      command: () => props.editor.chain().focus().toggleStrike().run(),
      icon: IconStrikethrough,
    },
    {
      name: "Code",
-      isActive: () => props.editor.isActive("code"),
+      isActive: () => editorState?.isCode,
      command: () => props.editor.chain().focus().toggleCode().run(),
      icon: IconCode,
    },
@@ -85,7 +104,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {

  const commentItem: BubbleMenuItem = {
    name: "Comment",
-    isActive: () => props.editor.isActive("comment"),
+    isActive: () => editorState?.isComment,
    command: () => {
      const commentId = uuid7();

@@ -125,16 +144,16 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
      onHide: () => {
        setIsNodeSelectorOpen(false);
        setIsTextAlignmentOpen(false);
-        setIsColorSelectorOpen(false);
        setIsLinkSelectorOpen(false);
+        setIsColorSelectorOpen(false);
      },
    },
  };

  const [isNodeSelectorOpen, setIsNodeSelectorOpen] = useState(false);
  const [isTextAlignmentSelectorOpen, setIsTextAlignmentOpen] = useState(false);
-  const [isColorSelectorOpen, setIsColorSelectorOpen] = useState(false);
  const [isLinkSelectorOpen, setIsLinkSelectorOpen] = useState(false);
+  const [isColorSelectorOpen, setIsColorSelectorOpen] = useState(false);

  return (
    <BubbleMenu {...bubbleMenuProps}>
@@ -145,8 +164,8 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
          setIsOpen={() => {
            setIsNodeSelectorOpen(!isNodeSelectorOpen);
            setIsTextAlignmentOpen(false);
-            setIsColorSelectorOpen(false);
            setIsLinkSelectorOpen(false);
+            setIsColorSelectorOpen(false);
          }}
        />

@@ -156,8 +175,8 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
          setIsOpen={() => {
            setIsTextAlignmentOpen(!isTextAlignmentSelectorOpen);
            setIsNodeSelectorOpen(false);
-            setIsColorSelectorOpen(false);
            setIsLinkSelectorOpen(false);
+            setIsColorSelectorOpen(false);
          }}
        />

@@ -1,5 +1,5 @@
-import { Dispatch, FC, SetStateAction } from "react";
-import { IconCheck, IconPalette } from "@tabler/icons-react";
+import React, { Dispatch, FC, SetStateAction } from "react";
+import { IconCheck, IconChevronDown, IconPalette } from "@tabler/icons-react";
 import {
  ActionIcon,
  Button,
@@ -8,8 +8,12 @@ import {
  ScrollArea,
  Text,
  Tooltip,
+  SimpleGrid,
+  Box,
+  Stack,
 } from "@mantine/core";
-import { useEditor } from "@tiptap/react";
+import type { Editor } from "@tiptap/react";
+import { useEditorState } from "@tiptap/react";
 import { useTranslation } from "react-i18next";

 export interface BubbleColorMenuItem {
@@ -18,7 +22,7 @@ export interface BubbleColorMenuItem {
 }

 interface ColorSelectorProps {
-  editor: ReturnType<typeof useEditor>;
+  editor: Editor | null;
  isOpen: boolean;
  setIsOpen: Dispatch<SetStateAction<boolean>>;
 }
@@ -60,9 +64,12 @@ const TEXT_COLORS: BubbleColorMenuItem[] = [
    name: "Gray",
    color: "#A8A29E",
  },
+  {
+    name: "Brown",
+    color: "#92400E",
+  },
 ];

-// TODO: handle dark mode
 const HIGHLIGHT_COLORS: BubbleColorMenuItem[] = [
  {
    name: "Default",
@@ -70,35 +77,39 @@ const HIGHLIGHT_COLORS: BubbleColorMenuItem[] = [
  },
  {
    name: "Blue",
-    color: "#c1ecf9",
+    color: "#98d8f2",
  },
  {
    name: "Green",
-    color: "#acf79f",
+    color: "#7edb6c",
  },
  {
    name: "Purple",
-    color: "#f6f3f8",
+    color: "#e0d6ed",
  },
  {
    name: "Red",
-    color: "#fdebeb",
+    color: "#ffc6c2",
  },
  {
    name: "Yellow",
-    color: "#fbf4a2",
+    color: "#faf594",
  },
  {
    name: "Orange",
-    color: "#faebdd",
+    color: "#f5c8a9",
  },
  {
    name: "Pink",
-    color: "#faf1f5",
+    color: "#f5cfe0",
  },
  {
    name: "Gray",
-    color: "#f1f1ef",
+    color: "#dfdfd7",
+  },
+  {
+    name: "Brown",
+    color: "#d7c4b7",
  },
 ];

@@ -108,67 +119,180 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
  setIsOpen,
 }) => {
  const { t } = useTranslation();
-  const activeColorItem = TEXT_COLORS.find(({ color }) =>
-    editor.isActive("textStyle", { color }),
+
+  const editorState = useEditorState({
+    editor,
+    selector: (ctx) => {
+      if (!ctx.editor) {
+        return null;
+      }
+
+      const activeColors: Record<string, boolean> = {};
+      TEXT_COLORS.forEach(({ color }) => {
+        activeColors[`text_${color}`] = ctx.editor.isActive("textStyle", {
+          color,
+        });
+      });
+      HIGHLIGHT_COLORS.forEach(({ color }) => {
+        activeColors[`highlight_${color}`] = ctx.editor.isActive("highlight", {
+          color,
+        });
+      });
+
+      return activeColors;
+    },
+  });
+
+  if (!editor || !editorState) {
+    return null;
+  }
+
+  const activeColorItem = TEXT_COLORS.find(
+    ({ color }) => editorState[`text_${color}`],
  );

-  const activeHighlightItem = HIGHLIGHT_COLORS.find(({ color }) =>
-    editor.isActive("highlight", { color }),
+  const activeHighlightItem = HIGHLIGHT_COLORS.find(
+    ({ color }) => editorState[`highlight_${color}`],
  );

  return (
-    <Popover width={200} opened={isOpen} withArrow>
+    <Popover width={220} opened={isOpen} withArrow>
      <Popover.Target>
        <Tooltip label={t("Text color")} withArrow>
-          <ActionIcon
+          <Button
            variant="default"
-            size="lg"
            radius="0"
-            style={{
-              border: "none",
-              color: activeColorItem?.color,
-            }}
+            rightSection={<IconChevronDown size={16} />}
            onClick={() => setIsOpen(!isOpen)}
+            data-text-color={activeColorItem?.color || ""}
+            data-highlight-color={activeHighlightItem?.color || ""}
+            className="color-selector-trigger"
+            style={{
+              height: "34px",
+              border: "none",
+              fontWeight: 500,
+              fontSize: rem(16),
+              paddingLeft: rem(8),
+              paddingRight: rem(4),
+            }}
          >
-            <IconPalette size={16} stroke={2} />
-          </ActionIcon>
+            A
+          </Button>
        </Tooltip>
      </Popover.Target>

      <Popover.Dropdown>
-        {/* make mah responsive */}
        <ScrollArea.Autosize type="scroll" mah="400">
-          <Text span c="dimmed" tt="uppercase" inherit>
-            {t("Color")}
-          </Text>
+          <Stack gap="md">
+            <Box>
+              <Text size="sm" fw={600} mb="xs">
+                {t("Text color")}
+              </Text>
+              <SimpleGrid cols={5} spacing="xs">
+                {TEXT_COLORS.map(({ name, color }, index) => (
+                  <Tooltip key={index} label={t(name)} withArrow>
+                    <Box
+                      onClick={() => {
+                        if (name === "Default") {
+                          editor.commands.unsetColor();
+                        } else {
+                          editor
+                            .chain()
+                            .focus()
+                            .setColor(color || "")
+                            .run();
+                        }
+                        setIsOpen(false);
+                      }}
+                      style={{
+                        width: rem(28),
+                        height: rem(28),
+                        borderRadius: rem(6),
+                        border: editorState[`text_${color}`]
+                          ? "2px solid var(--mantine-color-gray-8)"
+                          : "1px solid var(--mantine-color-gray-4)",
+                        cursor: "pointer",
+                        position: "relative",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        fontSize: rem(16),
+                        fontWeight: 600,
+                        color: color || "var(--mantine-color-gray-8)",
+                      }}
+                    >
+                      A
+                    </Box>
+                  </Tooltip>
+                ))}
+              </SimpleGrid>
+            </Box>

-          <Button.Group orientation="vertical">
-            {TEXT_COLORS.map(({ name, color }, index) => (
-              <Button
-                key={index}
-                variant="default"
-                leftSection={<span style={{ color }}>A</span>}
-                justify="left"
-                fullWidth
-                rightSection={
-                  editor.isActive("textStyle", { color }) && (
-                    <IconCheck style={{ width: rem(16) }} />
-                  )
-                }
-                onClick={() => {
-                  if (name === "Default") {
-                    editor.commands.unsetColor();
-                  } else {
-                    editor.chain().focus().setColor(color || "").run();
-                  }
-                  setIsOpen(false);
-                }}
-                style={{ border: "none" }}
-              >
-                {t(name)}
-              </Button>
-            ))}
-          </Button.Group>
+            <Box>
+              <Text size="sm" fw={600} mb="xs">
+                {t("Highlight color")}
+              </Text>
+              <SimpleGrid cols={5} spacing="xs">
+                {HIGHLIGHT_COLORS.map(({ name, color }, index) => (
+                  <Tooltip key={index} label={t(name)} withArrow>
+                    <Box
+                      onClick={() => {
+                        if (name === "Default") {
+                          editor.commands.unsetHighlight();
+                        } else {
+                          editor
+                            .chain()
+                            .focus()
+                            .toggleMark("highlight", {
+                              color: color || "",
+                              colorName: name.toLowerCase() || "",
+                            })
+                            .run();
+                        }
+                        setIsOpen(false);
+                      }}
+                      style={{
+                        width: rem(28),
+                        height: rem(28),
+                        borderRadius: rem(4),
+                        backgroundColor: color || "var(--mantine-color-gray-2)",
+                        border: "1px solid var(--mantine-color-gray-4)",
+                        cursor: "pointer",
+                        position: "relative",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        fontSize: rem(16),
+                        fontWeight: 600,
+                        color: "var(--mantine-color-gray-8)",
+                      }}
+                    >
+                      {editorState[`highlight_${color}`] ? (
+                        <IconCheck
+                          size={16}
+                          color="var(--mantine-color-green-7)"
+                        />
+                      ) : (
+                        "A"
+                      )}
+                    </Box>
+                  </Tooltip>
+                ))}
+              </SimpleGrid>
+            </Box>
+
+            <Button
+              variant="default"
+              fullWidth
+              onClick={() => {
+                editor.commands.unsetColor();
+                editor.commands.unsetHighlight();
+                setIsOpen(false);
+              }}
+            >
+              {t("Remove color")}
+            </Button>
+          </Stack>
        </ScrollArea.Autosize>
      </Popover.Dropdown>
    </Popover>
@@ -13,11 +13,12 @@ import {
  IconTypography,
 } from "@tabler/icons-react";
 import { Popover, Button, ScrollArea } from "@mantine/core";
-import { useEditor } from "@tiptap/react";
+import type { Editor } from "@tiptap/react";
+import { useEditorState } from "@tiptap/react";
 import { useTranslation } from "react-i18next";

 interface NodeSelectorProps {
-  editor: ReturnType<typeof useEditor>;
+  editor: Editor | null;
  isOpen: boolean;
  setIsOpen: Dispatch<SetStateAction<boolean>>;
 }
@@ -36,6 +37,27 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
 }) => {
  const { t } = useTranslation();

+  const editorState = useEditorState({
+    editor,
+    selector: (ctx) => {
+      if (!editor) {
+        return null;
+      }
+
+      return {
+        isParagraph: ctx.editor.isActive("paragraph"),
+        isBulletList: ctx.editor.isActive("bulletList"),
+        isOrderedList: ctx.editor.isActive("orderedList"),
+        isHeading1: ctx.editor.isActive("heading", { level: 1 }),
+        isHeading2: ctx.editor.isActive("heading", { level: 2 }),
+        isHeading3: ctx.editor.isActive("heading", { level: 3 }),
+        isTaskItem: ctx.editor.isActive("taskItem"),
+        isBlockquote: ctx.editor.isActive("blockquote"),
+        isCodeBlock: ctx.editor.isActive("codeBlock"),
+      };
+    },
+  });
+
  const items: BubbleMenuItem[] = [
    {
      name: "Text",
@@ -43,45 +65,45 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
      command: () =>
        editor.chain().focus().toggleNode("paragraph", "paragraph").run(),
      isActive: () =>
-        editor.isActive("paragraph") &&
-        !editor.isActive("bulletList") &&
-        !editor.isActive("orderedList"),
+        editorState?.isParagraph &&
+        !editorState?.isBulletList &&
+        !editorState?.isOrderedList,
    },
    {
      name: "Heading 1",
      icon: IconH1,
      command: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
-      isActive: () => editor.isActive("heading", { level: 1 }),
+      isActive: () => editorState?.isHeading1,
    },
    {
      name: "Heading 2",
      icon: IconH2,
      command: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
-      isActive: () => editor.isActive("heading", { level: 2 }),
+      isActive: () => editorState?.isHeading2,
    },
    {
      name: "Heading 3",
      icon: IconH3,
      command: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),
-      isActive: () => editor.isActive("heading", { level: 3 }),
+      isActive: () => editorState?.isHeading3,
    },
    {
      name: "To-do List",
      icon: IconCheckbox,
      command: () => editor.chain().focus().toggleTaskList().run(),
-      isActive: () => editor.isActive("taskItem"),
+      isActive: () => editorState?.isTaskItem,
    },
    {
      name: "Bullet List",
      icon: IconList,
      command: () => editor.chain().focus().toggleBulletList().run(),
-      isActive: () => editor.isActive("bulletList"),
+      isActive: () => editorState?.isBulletList,
    },
    {
      name: "Numbered List",
      icon: IconListNumbers,
      command: () => editor.chain().focus().toggleOrderedList().run(),
-      isActive: () => editor.isActive("orderedList"),
+      isActive: () => editorState?.isOrderedList,
    },
    {
      name: "Blockquote",
@@ -93,13 +115,13 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
          .toggleNode("paragraph", "paragraph")
          .toggleBlockquote()
          .run(),
-      isActive: () => editor.isActive("blockquote"),
+      isActive: () => editorState?.isBlockquote,
    },
    {
      name: "Code",
      icon: IconCode,
      command: () => editor.chain().focus().toggleCodeBlock().run(),
-      isActive: () => editor.isActive("codeBlock"),
+      isActive: () => editorState?.isCodeBlock,
    },
  ];

@@ -8,11 +8,12 @@ import {
  IconChevronDown,
 } from "@tabler/icons-react";
 import { Popover, Button, ScrollArea, rem } from "@mantine/core";
-import { useEditor } from "@tiptap/react";
+import type { Editor } from "@tiptap/react";
+import { useEditorState } from "@tiptap/react";
 import { useTranslation } from "react-i18next";

 interface TextAlignmentProps {
-  editor: ReturnType<typeof useEditor>;
+  editor: Editor | null;
  isOpen: boolean;
  setIsOpen: Dispatch<SetStateAction<boolean>>;
 }
@@ -31,36 +32,54 @@ export const TextAlignmentSelector: FC<TextAlignmentProps> = ({
 }) => {
  const { t } = useTranslation();

+  const editorState = useEditorState({
+    editor,
+    selector: (ctx) => {
+      if (!ctx.editor) {
+        return null;
+      }
+
+      return {
+        isAlignLeft: ctx.editor.isActive({ textAlign: "left" }),
+        isAlignCenter: ctx.editor.isActive({ textAlign: "center" }),
+        isAlignRight: ctx.editor.isActive({ textAlign: "right" }),
+        isAlignJustify: ctx.editor.isActive({ textAlign: "justify" }),
+      };
+    },
+  });
+
+  if (!editor || !editorState) {
+    return null;
+  }
+
  const items: BubbleMenuItem[] = [
    {
      name: "Align left",
-      isActive: () => editor.isActive({ textAlign: "left" }),
+      isActive: () => editorState?.isAlignLeft,
      command: () => editor.chain().focus().setTextAlign("left").run(),
      icon: IconAlignLeft,
    },
    {
      name: "Align center",
-      isActive: () => editor.isActive({ textAlign: "center" }),
+      isActive: () => editorState?.isAlignCenter,
      command: () => editor.chain().focus().setTextAlign("center").run(),
      icon: IconAlignCenter,
    },
    {
      name: "Align right",
-      isActive: () => editor.isActive({ textAlign: "right" }),
+      isActive: () => editorState?.isAlignRight,
      command: () => editor.chain().focus().setTextAlign("right").run(),
      icon: IconAlignRight,
    },
    {
      name: "Justify",
-      isActive: () => editor.isActive({ textAlign: "justify" }),
+      isActive: () => editorState?.isAlignJustify,
      command: () => editor.chain().focus().setTextAlign("justify").run(),
      icon: IconAlignJustified,
    },
  ];

-  const activeItem = items.filter((item) => item.isActive()).pop() ?? {
-    name: "Multiple",
-  };
+  const activeItem = items.filter((item) => item.isActive()).pop() ?? items[0];

  return (
    <Popover opened={isOpen} withArrow>
@@ -73,7 +92,7 @@ export const TextAlignmentSelector: FC<TextAlignmentProps> = ({
          rightSection={<IconChevronDown size={16} />}
          onClick={() => setIsOpen(!isOpen)}
        >
-          <IconAlignLeft style={{ width: rem(16) }} stroke={2} />
+          <activeItem.icon style={{ width: rem(16) }} stroke={2} />
        </Button>
      </Popover.Target>

@@ -2,6 +2,7 @@ import {
  BubbleMenu as BaseBubbleMenu,
  findParentNode,
  posToDOMRect,
+  useEditorState,
 } from "@tiptap/react";
 import React, { useCallback } from "react";
 import { Node as PMNode } from "prosemirror-model";
@@ -9,7 +10,7 @@ import {
  EditorMenuProps,
  ShouldShowProps,
 } from "@/features/editor/components/table/types/types.ts";
-import { ActionIcon, Tooltip, Divider } from "@mantine/core";
+import { ActionIcon, Tooltip } from "@mantine/core";
 import {
  IconAlertTriangleFilled,
  IconCircleCheckFilled,
@@ -35,6 +36,23 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
    [editor],
  );

+  const editorState = useEditorState({
+    editor,
+    selector: (ctx) => {
+      if (!ctx.editor) {
+        return null;
+      }
+
+      return {
+        isCallout: ctx.editor.isActive("callout"),
+        isInfo: ctx.editor.isActive("callout", { type: "info" }),
+        isSuccess: ctx.editor.isActive("callout", { type: "success" }),
+        isWarning: ctx.editor.isActive("callout", { type: "warning" }),
+        isDanger: ctx.editor.isActive("callout", { type: "danger" }),
+      };
+    },
+  });
+
  const getReferenceClientRect = useCallback(() => {
    const { selection } = editor.state;
    const predicate = (node: PMNode) => node.type.name === "callout";
@@ -92,7 +110,7 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
  return (
    <BaseBubbleMenu
      editor={editor}
-      pluginKey={`callout-menu}`}
+      pluginKey={`callout-menu`}
      updateDelay={0}
      tippyOptions={{
        getReferenceClientRect,
@@ -111,9 +129,7 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
            onClick={() => setCalloutType("info")}
            size="lg"
            aria-label={t("Info")}
-            variant={
-              editor.isActive("callout", { type: "info" }) ? "light" : "default"
-            }
+            variant={editorState?.isInfo ? "light" : "default"}
          >
            <IconInfoCircleFilled size={18} />
          </ActionIcon>
@@ -124,11 +140,7 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
            onClick={() => setCalloutType("success")}
            size="lg"
            aria-label={t("Success")}
-            variant={
-              editor.isActive("callout", { type: "success" })
-                ? "light"
-                : "default"
-            }
+            variant={editorState?.isSuccess ? "light" : "default"}
          >
            <IconCircleCheckFilled size={18} />
          </ActionIcon>
@@ -139,11 +151,7 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
            onClick={() => setCalloutType("warning")}
            size="lg"
            aria-label={t("Warning")}
-            variant={
-              editor.isActive("callout", { type: "warning" })
-                ? "light"
-                : "default"
-            }
+            variant={editorState?.isWarning ? "light" : "default"}
          >
            <IconAlertTriangleFilled size={18} />
          </ActionIcon>
@@ -154,11 +162,7 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
            onClick={() => setCalloutType("danger")}
            size="lg"
            aria-label={t("Danger")}
-            variant={
-              editor.isActive("callout", { type: "danger" })
-                ? "light"
-                : "default"
-            }
+            variant={editorState?.isDanger ? "light" : "default"}
          >
            <IconCircleXFilled size={18} />
          </ActionIcon>
@@ -5,6 +5,7 @@ import { v4 as uuidv4 } from "uuid";
 import classes from "./code-block.module.css";
 import { useTranslation } from "react-i18next";
 import { useComputedColorScheme } from "@mantine/core";
+import DOMPurify from "dompurify";

 interface MermaidViewProps {
  props: NodeViewProps;
@@ -37,7 +38,7 @@ export default function MermaidView({ props }: MermaidViewProps) {
        .catch((err) => {
          if (props.editor.isEditable) {
            setPreview(
-              `<div class="${classes.error}">${t("Mermaid diagram error:")} ${err}</div>`,
+              `<div class="${classes.error}">${t("Mermaid diagram error:")} ${DOMPurify.sanitize(err)}</div>`,
            );
          } else {
            setPreview(
@@ -34,7 +34,9 @@ export const handlePaste = (
      return false;
    }

-    createMentionAction(url, view, pos, creatorId);
+    const anchorId = match[6] ? match[6].split('#')[0] : undefined;
+    const urlWithoutAnchor = anchorId ? url.substring(0, url.indexOf("#")) : url;
+    createMentionAction(urlWithoutAnchor, view, pos, creatorId, anchorId);
    return true;
  }

@@ -2,15 +2,16 @@ import {
  BubbleMenu as BaseBubbleMenu,
  findParentNode,
  posToDOMRect,
-} from '@tiptap/react';
-import { useCallback } from 'react';
-import { sticky } from 'tippy.js';
-import { Node as PMNode } from 'prosemirror-model';
+  useEditorState,
+} from "@tiptap/react";
+import { useCallback } from "react";
+import { sticky } from "tippy.js";
+import { Node as PMNode } from "prosemirror-model";
 import {
  EditorMenuProps,
  ShouldShowProps,
-} from '@/features/editor/components/table/types/types.ts';
-import { NodeWidthResize } from '@/features/editor/components/common/node-width-resize.tsx';
+} from "@/features/editor/components/table/types/types.ts";
+import { NodeWidthResize } from "@/features/editor/components/common/node-width-resize.tsx";

 export function DrawioMenu({ editor }: EditorMenuProps) {
  const shouldShow = useCallback(
@@ -19,14 +20,29 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
        return false;
      }

-      return editor.isActive('drawio') && editor.getAttributes('drawio')?.src;
+      return editor.isActive("drawio") && editor.getAttributes("drawio")?.src;
    },
-    [editor]
+    [editor],
  );

+  const editorState = useEditorState({
+    editor,
+    selector: (ctx) => {
+      if (!ctx.editor) {
+        return null;
+      }
+
+      const drawioAttr = ctx.editor.getAttributes("drawio");
+      return {
+        isDrawio: ctx.editor.isActive("drawio"),
+        width: drawioAttr?.width ? parseInt(drawioAttr.width) : null,
+      };
+    },
+  });
+
  const getReferenceClientRect = useCallback(() => {
    const { selection } = editor.state;
-    const predicate = (node: PMNode) => node.type.name === 'drawio';
+    const predicate = (node: PMNode) => node.type.name === "drawio";
    const parent = findParentNode(predicate)(selection);

    if (parent) {
@@ -39,40 +55,37 @@ export function DrawioMenu({ editor }: EditorMenuProps) {

  const onWidthChange = useCallback(
    (value: number) => {
-      editor.commands.updateAttributes('drawio', { width: `${value}%` });
+      editor.commands.updateAttributes("drawio", { width: `${value}%` });
    },
-    [editor]
+    [editor],
  );

  return (
    <BaseBubbleMenu
      editor={editor}
-      pluginKey={`drawio-menu}`}
+      pluginKey={`drawio-menu`}
      updateDelay={0}
      tippyOptions={{
        getReferenceClientRect,
        offset: [0, 8],
        zIndex: 99,
        popperOptions: {
-          modifiers: [{ name: 'flip', enabled: false }],
+          modifiers: [{ name: "flip", enabled: false }],
        },
        plugins: [sticky],
-        sticky: 'popper',
+        sticky: "popper",
      }}
      shouldShow={shouldShow}
    >
      <div
        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
        }}
      >
-        {editor.getAttributes('drawio')?.width && (
-          <NodeWidthResize
-            onChange={onWidthChange}
-            value={parseInt(editor.getAttributes('drawio').width)}
-          />
+        {editorState?.width && (
+          <NodeWidthResize onChange={onWidthChange} value={editorState.width} />
        )}
      </div>
    </BaseBubbleMenu>
@@ -17,7 +17,7 @@ import {
  EventExit,
  EventSave,
 } from "react-drawio";
-import { IAttachment } from "@/lib/types";
+import { IAttachment } from "@/features/attachments/types/attachment.types";
 import { decodeBase64ToSvgString, svgStringToFile } from "@/lib/utils";
 import clsx from "clsx";
 import { IconEdit } from "@tabler/icons-react";
@@ -87,7 +87,7 @@ export default function DrawioView(props: NodeViewProps) {
  };

  return (
-    <NodeViewWrapper>
+    <NodeViewWrapper data-drag-handle>
      <Modal.Root opened={opened} onClose={close} fullScreen>
        <Modal.Overlay />
        <Modal.Content style={{ overflow: "hidden" }}>
@@ -85,7 +85,7 @@ export default function EmbedView(props: NodeViewProps) {
  }

  return (
-    <NodeViewWrapper>
+    <NodeViewWrapper data-drag-handle>
      {embedUrl ? (
        <ResizableWrapper
          initialHeight={nodeHeight || 480}
@@ -2,15 +2,16 @@ import {
  BubbleMenu as BaseBubbleMenu,
  findParentNode,
  posToDOMRect,
-} from '@tiptap/react';
-import { useCallback } from 'react';
-import { sticky } from 'tippy.js';
-import { Node as PMNode } from 'prosemirror-model';
+  useEditorState,
+} from "@tiptap/react";
+import { useCallback } from "react";
+import { sticky } from "tippy.js";
+import { Node as PMNode } from "prosemirror-model";
 import {
  EditorMenuProps,
  ShouldShowProps,
-} from '@/features/editor/components/table/types/types.ts';
-import { NodeWidthResize } from '@/features/editor/components/common/node-width-resize.tsx';
+} from "@/features/editor/components/table/types/types.ts";
+import { NodeWidthResize } from "@/features/editor/components/common/node-width-resize.tsx";

 export function ExcalidrawMenu({ editor }: EditorMenuProps) {
  const shouldShow = useCallback(
@@ -19,14 +20,31 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
        return false;
      }

-      return editor.isActive('excalidraw') && editor.getAttributes('excalidraw')?.src;
+      return (
+        editor.isActive("excalidraw") && editor.getAttributes("excalidraw")?.src
+      );
    },
-    [editor]
+    [editor],
  );

+  const editorState = useEditorState({
+    editor,
+    selector: (ctx) => {
+      if (!ctx.editor) {
+        return null;
+      }
+
+      const excalidrawAttr = ctx.editor.getAttributes("excalidraw");
+      return {
+        isExcalidraw: ctx.editor.isActive("excalidraw"),
+        width: excalidrawAttr?.width ? parseInt(excalidrawAttr.width) : null,
+      };
+    },
+  });
+
  const getReferenceClientRect = useCallback(() => {
    const { selection } = editor.state;
-    const predicate = (node: PMNode) => node.type.name === 'excalidraw';
+    const predicate = (node: PMNode) => node.type.name === "excalidraw";
    const parent = findParentNode(predicate)(selection);

    if (parent) {
@@ -39,9 +57,9 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {

  const onWidthChange = useCallback(
    (value: number) => {
-      editor.commands.updateAttributes('excalidraw', { width: `${value}%` });
+      editor.commands.updateAttributes("excalidraw", { width: `${value}%` });
    },
-    [editor]
+    [editor],
  );

  return (
@@ -54,25 +72,22 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
        offset: [0, 8],
        zIndex: 99,
        popperOptions: {
-          modifiers: [{ name: 'flip', enabled: false }],
+          modifiers: [{ name: "flip", enabled: false }],
        },
        plugins: [sticky],
-        sticky: 'popper',
+        sticky: "popper",
      }}
      shouldShow={shouldShow}
    >
      <div
        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
        }}
      >
-        {editor.getAttributes('excalidraw')?.width && (
-          <NodeWidthResize
-            onChange={onWidthChange}
-            value={parseInt(editor.getAttributes('excalidraw').width)}
-          />
+        {editorState?.width && (
+          <NodeWidthResize onChange={onWidthChange} value={editorState.width} />
        )}
      </div>
    </BaseBubbleMenu>
@@ -1,3 +1,5 @@
+import { ENCRYPTION_KEY_BITS } from "@excalidraw/common";
+
 type LibraryItems = any;

 type LibraryPersistedData = {
@@ -8,8 +10,8 @@ export interface LibraryPersistenceAdapter {
  load(metadata: { source: "load" | "save" }):
    | Promise<{ libraryItems: LibraryItems } | null>
    | {
-    libraryItems: LibraryItems;
-  }
+        libraryItems: LibraryItems;
+      }
    | null;

  save(libraryData: LibraryPersistedData): Promise<void> | void;
@@ -25,7 +27,10 @@ export const localStorageLibraryAdapter: LibraryPersistenceAdapter = {
        return JSON.parse(data);
      }
    } catch (e) {
-      console.error("Error downloading Excalidraw library from localStorage", e);
+      console.error(
+        "Error downloading Excalidraw library from localStorage",
+        e,
+      );
    }
    return null;
  },
@@ -40,3 +45,124 @@ export const localStorageLibraryAdapter: LibraryPersistenceAdapter = {
    }
  },
 };
+
+export const blobToArrayBuffer = (blob: Blob): Promise<ArrayBuffer> => {
+  if ("arrayBuffer" in blob) {
+    return blob.arrayBuffer();
+  }
+  // Safari
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      if (!event.target?.result) {
+        return reject(new Error("Couldn't convert blob to ArrayBuffer"));
+      }
+      resolve(event.target.result as ArrayBuffer);
+    };
+    reader.readAsArrayBuffer(blob);
+  });
+};
+
+export const IV_LENGTH_BYTES = 12;
+
+// Pre-transform error: No known conditions for "./data/encryption" specifier in "@excalidraw/excalidraw" package
+//   Plugin: vite:import-analysis
+//   File: /Users/lite/WebstormProjects/docmost-ee/apps/client/src/features/editor/components/excalidraw/use-excalidraw-collab.ts:11:7
+//   7  |    decryptData,
+//   8  |    encryptData
+//   9  |  } from "@excalidraw/excalidraw/data/encryption";
+
+//@ts-ignore
+export const createIV = (): Uint8Array<ArrayBuffer> => {
+  const arr = new Uint8Array(IV_LENGTH_BYTES);
+  return window.crypto.getRandomValues(arr);
+};
+
+export const generateEncryptionKey = async <
+  T extends "string" | "cryptoKey" = "string",
+>(
+  returnAs?: T,
+): Promise<T extends "cryptoKey" ? CryptoKey : string> => {
+  const key = await window.crypto.subtle.generateKey(
+    {
+      name: "AES-GCM",
+      length: ENCRYPTION_KEY_BITS,
+    },
+    true, // extractable
+    ["encrypt", "decrypt"],
+  );
+  return (
+    returnAs === "cryptoKey"
+      ? key
+      : (await window.crypto.subtle.exportKey("jwk", key)).k
+  ) as T extends "cryptoKey" ? CryptoKey : string;
+};
+
+export const getCryptoKey = (key: string, usage: KeyUsage) =>
+  window.crypto.subtle.importKey(
+    "jwk",
+    {
+      alg: "A128GCM",
+      ext: true,
+      k: key,
+      key_ops: ["encrypt", "decrypt"],
+      kty: "oct",
+    },
+    {
+      name: "AES-GCM",
+      length: ENCRYPTION_KEY_BITS,
+    },
+    false, // extractable
+    [usage],
+  );
+
+export const encryptData = async (
+  key: string | CryptoKey,
+  //@ts-ignore
+  data: Uint8Array<ArrayBuffer> | ArrayBuffer | Blob | File | string,
+  //@ts-ignore
+): Promise<{ encryptedBuffer: ArrayBuffer; iv: Uint8Array<ArrayBuffer> }> => {
+  const importedKey =
+    typeof key === "string" ? await getCryptoKey(key, "encrypt") : key;
+  const iv = createIV();
+  //@ts-ignore
+  const buffer: ArrayBuffer | Uint8Array<ArrayBuffer> =
+    typeof data === "string"
+      ? new TextEncoder().encode(data)
+      : data instanceof Uint8Array
+        ? data
+        : data instanceof Blob
+          ? await blobToArrayBuffer(data)
+          : data;
+
+  // We use symmetric encryption. AES-GCM is the recommended algorithm and
+  // includes checks that the ciphertext has not been modified by an attacker.
+  const encryptedBuffer = await window.crypto.subtle.encrypt(
+    {
+      name: "AES-GCM",
+      iv,
+    },
+    importedKey,
+    buffer,
+  );
+
+  return { encryptedBuffer, iv };
+};
+
+export const decryptData = async (
+  //@ts-ignore
+  iv: Uint8Array<ArrayBuffer>,
+  //@ts-ignore
+  encrypted: Uint8Array<ArrayBuffer> | ArrayBuffer,
+  privateKey: string,
+): Promise<ArrayBuffer> => {
+  const key = await getCryptoKey(privateKey, "decrypt");
+  return window.crypto.subtle.decrypt(
+    {
+      name: "AES-GCM",
+      iv,
+    },
+    key,
+    encrypted,
+  );
+};
@@ -8,22 +8,24 @@ import {
  Text,
  useComputedColorScheme,
 } from "@mantine/core";
-import { useState } from "react";
+import { useState, useCallback } from "react";
 import { uploadFile } from "@/features/page/services/page-service.ts";
 import { svgStringToFile } from "@/lib";
 import { useDisclosure } from "@mantine/hooks";
 import { getFileUrl } from "@/lib/config.ts";
 import "@excalidraw/excalidraw/index.css";
-import type { ExcalidrawImperativeAPI } from "@excalidraw/excalidraw/types";
-import { IAttachment } from "@/lib/types";
+import type { ExcalidrawImperativeAPI, Gesture } from "@excalidraw/excalidraw/types";
+import type { ExcalidrawElement } from "@excalidraw/element/types";
+import { IAttachment } from "@/features/attachments/types/attachment.types";
 import ReactClearModal from "react-clear-modal";
 import clsx from "clsx";
 import { IconEdit } from "@tabler/icons-react";
 import { lazy } from "react";
 import { Suspense } from "react";
 import { useTranslation } from "react-i18next";
-import { useHandleLibrary } from "@excalidraw/excalidraw";
+import { useHandleLibrary, LiveCollaborationTrigger } from "@excalidraw/excalidraw";
 import { localStorageLibraryAdapter } from "@/features/editor/components/excalidraw/excalidraw-utils.ts";
+import { useExcalidrawCollab } from "./use-excalidraw-collab";

 const Excalidraw = lazy(() =>
  import("@excalidraw/excalidraw").then((module) => ({
@@ -46,6 +48,16 @@ export default function ExcalidrawView(props: NodeViewProps) {
  const [opened, { open, close }] = useDisclosure(false);
  const computedColorScheme = useComputedColorScheme();

+  const pageId = editor.storage?.pageId;
+  const { broadcastScene, broadcastPointer, isCollaborating } = useExcalidrawCollab(excalidrawAPI, pageId, opened);
+
+  const handleChange = useCallback(
+    (elements: readonly ExcalidrawElement[]) => {
+      broadcastScene(elements);
+    },
+    [broadcastScene],
+  );
+
  const handleOpen = async () => {
    if (!editor.isEditable) {
      return;
@@ -118,7 +130,7 @@ export default function ExcalidrawView(props: NodeViewProps) {
  };

  return (
-    <NodeViewWrapper>
+    <NodeViewWrapper data-drag-handle>
      <ReactClearModal
        style={{
          backgroundColor: "rgba(0, 0, 0, 0.5)",
@@ -157,6 +169,14 @@ export default function ExcalidrawView(props: NodeViewProps) {
                scrollToContent: true,
              }}
              theme={computedColorScheme}
+              onChange={handleChange}
+              onPointerUpdate={broadcastPointer}
+              renderTopRightUI={() => (
+                <LiveCollaborationTrigger
+                  isCollaborating={isCollaborating}
+                  onSelect={() => {}}
+                />
+              )}
            />
          </Suspense>
        </div>
@@ -0,0 +1,257 @@
+import { CaptureUpdateAction } from "@excalidraw/excalidraw";
+import { trackEvent } from "@excalidraw/excalidraw/analytics";
+import { encryptData } from "@excalidraw/excalidraw/data/encryption";
+import { newElementWith } from "@excalidraw/element";
+import throttle from "lodash.throttle";
+
+import type { UserIdleState } from "@excalidraw/common";
+import type { OrderedExcalidrawElement } from "@excalidraw/element/types";
+import type {
+  OnUserFollowedPayload,
+  SocketId,
+} from "@excalidraw/excalidraw/types";
+
+import { WS_EVENTS, FILE_UPLOAD_TIMEOUT, WS_SUBTYPES } from "../app_constants";
+import { isSyncableElement } from "../data";
+
+import type {
+  SocketUpdateData,
+  SocketUpdateDataSource,
+  SyncableExcalidrawElement,
+} from "../data";
+import type { TCollabClass } from "./Collab";
+import type { Socket } from "socket.io-client";
+
+class Portal {
+  collab: TCollabClass;
+  socket: Socket | null = null;
+  socketInitialized: boolean = false; // we don't want the socket to emit any updates until it is fully initialized
+  roomId: string | null = null;
+  roomKey: string | null = null;
+  broadcastedElementVersions: Map<string, number> = new Map();
+
+  constructor(collab: TCollabClass) {
+    this.collab = collab;
+  }
+
+  open(socket: Socket, id: string, key: string) {
+    this.socket = socket;
+    this.roomId = id;
+    this.roomKey = key;
+
+    // Initialize socket listeners
+    this.socket.on("init-room", () => {
+      if (this.socket) {
+        this.socket.emit("join-room", this.roomId);
+        trackEvent("share", "room joined");
+      }
+    });
+    this.socket.on("new-user", async (_socketId: string) => {
+      this.broadcastScene(
+        WS_SUBTYPES.INIT,
+        this.collab.getSceneElementsIncludingDeleted(),
+        /* syncAll */ true,
+      );
+    });
+    this.socket.on("room-user-change", (clients: SocketId[]) => {
+      this.collab.setCollaborators(clients);
+    });
+
+    return socket;
+  }
+
+  close() {
+    if (!this.socket) {
+      return;
+    }
+    this.queueFileUpload.flush();
+    this.socket.close();
+    this.socket = null;
+    this.roomId = null;
+    this.roomKey = null;
+    this.socketInitialized = false;
+    this.broadcastedElementVersions = new Map();
+  }
+
+  isOpen() {
+    return !!(
+      this.socketInitialized &&
+      this.socket &&
+      this.roomId &&
+      this.roomKey
+    );
+  }
+
+  async _broadcastSocketData(
+    data: SocketUpdateData,
+    volatile: boolean = false,
+    roomId?: string,
+  ) {
+    if (this.isOpen()) {
+      const json = JSON.stringify(data);
+      const encoded = new TextEncoder().encode(json);
+      const { encryptedBuffer, iv } = await encryptData(this.roomKey!, encoded);
+
+      this.socket?.emit(
+        volatile ? WS_EVENTS.SERVER_VOLATILE : WS_EVENTS.SERVER,
+        roomId ?? this.roomId,
+        encryptedBuffer,
+        iv,
+      );
+    }
+  }
+
+  queueFileUpload = throttle(async () => {
+    try {
+      await this.collab.fileManager.saveFiles({
+        elements: this.collab.excalidrawAPI.getSceneElementsIncludingDeleted(),
+        files: this.collab.excalidrawAPI.getFiles(),
+      });
+    } catch (error: any) {
+      if (error.name !== "AbortError") {
+        this.collab.excalidrawAPI.updateScene({
+          appState: {
+            errorMessage: error.message,
+          },
+        });
+      }
+    }
+
+    let isChanged = false;
+    const newElements = this.collab.excalidrawAPI
+      .getSceneElementsIncludingDeleted()
+      .map((element) => {
+        if (this.collab.fileManager.shouldUpdateImageElementStatus(element)) {
+          isChanged = true;
+          // this will signal collaborators to pull image data from server
+          // (using mutation instead of newElementWith otherwise it'd break
+          // in-progress dragging)
+          return newElementWith(element, { status: "saved" });
+        }
+        return element;
+      });
+
+    if (isChanged) {
+      this.collab.excalidrawAPI.updateScene({
+        elements: newElements,
+        captureUpdate: CaptureUpdateAction.NEVER,
+      });
+    }
+  }, FILE_UPLOAD_TIMEOUT);
+
+  broadcastScene = async (
+    updateType: WS_SUBTYPES.INIT | WS_SUBTYPES.UPDATE,
+    elements: readonly OrderedExcalidrawElement[],
+    syncAll: boolean,
+  ) => {
+    if (updateType === WS_SUBTYPES.INIT && !syncAll) {
+      throw new Error("syncAll must be true when sending SCENE.INIT");
+    }
+
+    // sync out only the elements we think we need to to save bandwidth.
+    // periodically we'll resync the whole thing to make sure no one diverges
+    // due to a dropped message (server goes down etc).
+    const syncableElements = elements.reduce((acc, element) => {
+      if (
+        (syncAll ||
+          !this.broadcastedElementVersions.has(element.id) ||
+          element.version > this.broadcastedElementVersions.get(element.id)!) &&
+        isSyncableElement(element)
+      ) {
+        acc.push(element);
+      }
+      return acc;
+    }, [] as SyncableExcalidrawElement[]);
+
+    const data: SocketUpdateDataSource[typeof updateType] = {
+      type: updateType,
+      payload: {
+        elements: syncableElements,
+      },
+    };
+
+    for (const syncableElement of syncableElements) {
+      this.broadcastedElementVersions.set(
+        syncableElement.id,
+        syncableElement.version,
+      );
+    }
+
+    this.queueFileUpload();
+
+    await this._broadcastSocketData(data as SocketUpdateData);
+  };
+
+  broadcastIdleChange = (userState: UserIdleState) => {
+    if (this.socket?.id) {
+      const data: SocketUpdateDataSource["IDLE_STATUS"] = {
+        type: WS_SUBTYPES.IDLE_STATUS,
+        payload: {
+          socketId: this.socket.id as SocketId,
+          userState,
+          username: this.collab.state.username,
+        },
+      };
+      return this._broadcastSocketData(
+        data as SocketUpdateData,
+        true, // volatile
+      );
+    }
+  };
+
+  broadcastMouseLocation = (payload: {
+    pointer: SocketUpdateDataSource["MOUSE_LOCATION"]["payload"]["pointer"];
+    button: SocketUpdateDataSource["MOUSE_LOCATION"]["payload"]["button"];
+  }) => {
+    if (this.socket?.id) {
+      const data: SocketUpdateDataSource["MOUSE_LOCATION"] = {
+        type: WS_SUBTYPES.MOUSE_LOCATION,
+        payload: {
+          socketId: this.socket.id as SocketId,
+          pointer: payload.pointer,
+          button: payload.button || "up",
+          selectedElementIds:
+          this.collab.excalidrawAPI.getAppState().selectedElementIds,
+          username: this.collab.state.username,
+        },
+      };
+
+      return this._broadcastSocketData(
+        data as SocketUpdateData,
+        true, // volatile
+      );
+    }
+  };
+
+  broadcastVisibleSceneBounds = (
+    payload: {
+      sceneBounds: SocketUpdateDataSource["USER_VISIBLE_SCENE_BOUNDS"]["payload"]["sceneBounds"];
+    },
+    roomId: string,
+  ) => {
+    if (this.socket?.id) {
+      const data: SocketUpdateDataSource["USER_VISIBLE_SCENE_BOUNDS"] = {
+        type: WS_SUBTYPES.USER_VISIBLE_SCENE_BOUNDS,
+        payload: {
+          socketId: this.socket.id as SocketId,
+          username: this.collab.state.username,
+          sceneBounds: payload.sceneBounds,
+        },
+      };
+
+      return this._broadcastSocketData(
+        data as SocketUpdateData,
+        true, // volatile
+        roomId,
+      );
+    }
+  };
+
+  broadcastUserFollowed = (payload: OnUserFollowedPayload) => {
+    if (this.socket?.id) {
+      this.socket.emit(WS_EVENTS.USER_FOLLOW_CHANGE, payload);
+    }
+  };
+}
+
+export default Portal;
@@ -0,0 +1,266 @@
+import { useEffect, useRef, useCallback, useMemo, useState } from "react";
+import { useAtom } from "jotai";
+import { socketAtom } from "@/features/websocket/atoms/socket-atom";
+import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
+import type {
+  ExcalidrawImperativeAPI,
+  Collaborator,
+  Gesture,
+} from "@excalidraw/excalidraw/types";
+import type { ExcalidrawElement } from "@excalidraw/element/types";
+import { reconcileElements, getSceneVersion } from "@excalidraw/excalidraw";
+import throttle from "lodash.throttle";
+
+// Message types for collaboration
+type SceneUpdateMessage = {
+  type: "SCENE_UPDATE";
+  payload: { elements: readonly ExcalidrawElement[] };
+};
+
+type PointerUpdateMessage = {
+  type: "POINTER_UPDATE";
+  payload: {
+    socketId: string;
+    pointer: { x: number; y: number };
+    button: "down" | "up";
+    username: string;
+    selectedElementIds: Record<string, boolean>;
+  };
+};
+
+type CollabMessage = SceneUpdateMessage | PointerUpdateMessage;
+
+export function useExcalidrawCollab(
+  excalidrawAPI: ExcalidrawImperativeAPI | null,
+  pageId: string | undefined,
+  isOpen: boolean,
+) {
+  const [socket] = useAtom(socketAtom);
+  const [currentUser] = useAtom(currentUserAtom);
+  const lastBroadcastedVersion = useRef(-1);
+  const isInitialized = useRef(false);
+  const collaboratorsRef = useRef<Map<string, Collaborator>>(new Map());
+  const [isCollaborating, setIsCollaborating] = useState(false);
+
+  // Track broadcasted element versions for bandwidth optimization
+  const broadcastedElementVersions = useRef<Map<string, number>>(new Map());
+
+  const roomId = pageId ? `excalidraw-${pageId}` : null;
+  const username = currentUser?.user?.name || "Anonymous";
+
+  // Broadcast pointer/cursor updates (volatile - can be dropped)
+  const broadcastPointer = useMemo(
+    () =>
+      throttle(
+        (payload: {
+          pointer: { x: number; y: number };
+          button: "down" | "up";
+          pointersMap: Gesture["pointers"];
+        }) => {
+          if (!socket || !roomId || !isInitialized.current) return;
+          if (payload.pointersMap.size >= 2) return; // Skip multi-touch
+
+          const data: PointerUpdateMessage = {
+            type: "POINTER_UPDATE",
+            payload: {
+              socketId: socket.id!,
+              pointer: payload.pointer,
+              button: payload.button,
+              username,
+              selectedElementIds:
+                excalidrawAPI?.getAppState().selectedElementIds || {},
+            },
+          };
+
+          const json = JSON.stringify(data);
+          socket.emit("ex-server-volatile-broadcast", [roomId, json, null]);
+        },
+        50,
+      ),
+    [socket, roomId, username, excalidrawAPI],
+  );
+
+  // Broadcast scene changes with bandwidth optimization
+  const broadcastScene = useCallback(
+    (elements: readonly ExcalidrawElement[], syncAll = false) => {
+      if (!socket || !roomId || !isInitialized.current) {
+        return;
+      }
+
+      const sceneVersion = getSceneVersion(elements);
+
+      if (sceneVersion <= lastBroadcastedVersion.current) {
+        return;
+      }
+
+      // Filter to only send elements that changed since last broadcast
+      const changedElements = elements.filter((element) => {
+        const lastVersion = broadcastedElementVersions.current.get(element.id);
+        return syncAll || lastVersion === undefined || element.version > lastVersion;
+      });
+
+      if (changedElements.length === 0) {
+        return;
+      }
+
+      const data: SceneUpdateMessage = {
+        type: "SCENE_UPDATE",
+        payload: { elements: changedElements },
+      };
+
+      // Update tracking map
+      for (const element of changedElements) {
+        broadcastedElementVersions.current.set(element.id, element.version);
+      }
+
+      const json = JSON.stringify(data);
+      socket.emit("ex-server-broadcast", [roomId, json, null]);
+      lastBroadcastedVersion.current = sceneVersion;
+    },
+    [socket, roomId],
+  );
+
+  // Throttled version for onChange handler
+  const throttledBroadcastScene = useMemo(
+    () => throttle((elements: readonly ExcalidrawElement[]) => broadcastScene(elements, false), 100),
+    [broadcastScene],
+  );
+
+  // Handle incoming broadcasts
+  const handleClientBroadcast = useCallback(
+    (jsonData: string, _iv: Uint8Array | null) => {
+      if (!excalidrawAPI || !socket) return;
+
+      try {
+        const data: CollabMessage = JSON.parse(jsonData);
+
+        if (data.type === "SCENE_UPDATE" && data.payload?.elements) {
+          const remoteElements = data.payload.elements;
+          const localElements =
+            excalidrawAPI.getSceneElementsIncludingDeleted();
+
+          const reconciledElements = reconcileElements(
+            localElements,
+            // @ts-ignore
+            remoteElements,
+            excalidrawAPI.getAppState(),
+          );
+
+          excalidrawAPI.updateScene({
+            elements: reconciledElements,
+          });
+
+          lastBroadcastedVersion.current = getSceneVersion(reconciledElements);
+        } else if (data.type === "POINTER_UPDATE") {
+          const { socketId, pointer, button, username, selectedElementIds } =
+            data.payload;
+
+          // Don't update our own cursor
+          if (socketId === socket.id) return;
+
+          // Update collaborator with pointer info
+          const collaborator = collaboratorsRef.current.get(socketId) || {};
+          collaboratorsRef.current.set(socketId, {
+            ...collaborator,
+            // @ts-ignore
+            pointer,
+            button,
+            username,
+            // @ts-ignore
+            selectedElementIds,
+            isCurrentUser: false,
+          });
+
+          excalidrawAPI.updateScene({
+            // @ts-ignore
+            collaborators: collaboratorsRef.current,
+          });
+        }
+      } catch (err) {
+        console.error("Failed to process broadcast:", err);
+      }
+    },
+    [excalidrawAPI, socket],
+  );
+
+  // Handle room user changes
+  const handleRoomUserChange = useCallback(
+    (socketIds: string[]) => {
+      if (!excalidrawAPI || !socket) return;
+
+      // Update collaborators map, preserving existing data
+      const newCollaborators = new Map<string, Collaborator>();
+      for (const id of socketIds) {
+        const existing = collaboratorsRef.current.get(id);
+        newCollaborators.set(id, {
+          ...existing,
+          isCurrentUser: id === socket.id,
+          username:
+            existing?.username || (id === socket.id ? username : "User"),
+        });
+      }
+
+      collaboratorsRef.current = newCollaborators;
+      // @ts-ignore
+      excalidrawAPI.updateScene({ collaborators: newCollaborators });
+
+      // We're collaborating if there are other users
+      setIsCollaborating(socketIds.length > 1);
+    },
+    [excalidrawAPI, socket, username],
+  );
+
+  // Join/leave room based on modal state
+  useEffect(() => {
+    if (!socket || !roomId || !isOpen) {
+      setIsCollaborating(false);
+      return;
+    }
+
+    console.log("Joining room:", roomId);
+    socket.emit("ex-join-room", roomId);
+    isInitialized.current = true;
+
+    // Set up listeners
+    socket.on("ex-client-broadcast", handleClientBroadcast);
+    socket.on("ex-room-user-change", handleRoomUserChange);
+    socket.on("ex-first-in-room", () => {
+      console.log("First in excalidraw room");
+    });
+    socket.on("ex-new-user", (socketId: string) => {
+      console.log("New user joined:", socketId);
+      if (excalidrawAPI) {
+        // Send full scene to new user (syncAll = true)
+        broadcastScene(excalidrawAPI.getSceneElements(), true);
+      }
+    });
+
+    return () => {
+      console.log("Leaving room:", roomId);
+      socket.emit("ex-leave-room", roomId);
+      socket.off("ex-client-broadcast", handleClientBroadcast);
+      socket.off("ex-room-user-change", handleRoomUserChange);
+      socket.off("ex-first-in-room");
+      socket.off("ex-new-user");
+      isInitialized.current = false;
+      lastBroadcastedVersion.current = -1;
+      broadcastedElementVersions.current = new Map();
+      collaboratorsRef.current = new Map();
+      setIsCollaborating(false);
+    };
+  }, [
+    socket,
+    roomId,
+    isOpen,
+    handleClientBroadcast,
+    handleRoomUserChange,
+    broadcastScene,
+    excalidrawAPI,
+  ]);
+
+  return {
+    broadcastScene: throttledBroadcastScene,
+    broadcastPointer,
+    isCollaborating,
+  };
+}
@@ -2,6 +2,7 @@ import {
  BubbleMenu as BaseBubbleMenu,
  findParentNode,
  posToDOMRect,
+  useEditorState,
 } from "@tiptap/react";
 import React, { useCallback } from "react";
 import { sticky } from "tippy.js";
@@ -32,6 +33,25 @@ export function ImageMenu({ editor }: EditorMenuProps) {
    [editor],
  );

+  const editorState = useEditorState({
+    editor,
+    selector: (ctx) => {
+      if (!ctx.editor) {
+        return null;
+      }
+
+      const imageAttrs = ctx.editor.getAttributes("image");
+
+      return {
+        isImage: ctx.editor.isActive("image"),
+        isAlignLeft: ctx.editor.isActive("image", { align: "left" }),
+        isAlignCenter: ctx.editor.isActive("image", { align: "center" }),
+        isAlignRight: ctx.editor.isActive("image", { align: "right" }),
+        width: imageAttrs?.width ? parseInt(imageAttrs.width) : null,
+      };
+    },
+  });
+
  const getReferenceClientRect = useCallback(() => {
    const { selection } = editor.state;
    const predicate = (node: PMNode) => node.type.name === "image";
@@ -83,7 +103,7 @@ export function ImageMenu({ editor }: EditorMenuProps) {
  return (
    <BaseBubbleMenu
      editor={editor}
-      pluginKey={`image-menu}`}
+      pluginKey={`image-menu`}
      updateDelay={0}
      tippyOptions={{
        getReferenceClientRect,
@@ -103,9 +123,7 @@ export function ImageMenu({ editor }: EditorMenuProps) {
            onClick={alignImageLeft}
            size="lg"
            aria-label={t("Align left")}
-            variant={
-              editor.isActive("image", { align: "left" }) ? "light" : "default"
-            }
+            variant={editorState?.isAlignLeft ? "light" : "default"}
          >
            <IconLayoutAlignLeft size={18} />
          </ActionIcon>
@@ -116,11 +134,7 @@ export function ImageMenu({ editor }: EditorMenuProps) {
            onClick={alignImageCenter}
            size="lg"
            aria-label={t("Align center")}
-            variant={
-              editor.isActive("image", { align: "center" })
-                ? "light"
-                : "default"
-            }
+            variant={editorState?.isAlignCenter ? "light" : "default"}
          >
            <IconLayoutAlignCenter size={18} />
          </ActionIcon>
@@ -131,20 +145,15 @@ export function ImageMenu({ editor }: EditorMenuProps) {
            onClick={alignImageRight}
            size="lg"
            aria-label={t("Align right")}
-            variant={
-              editor.isActive("image", { align: "right" }) ? "light" : "default"
-            }
+            variant={editorState?.isAlignRight ? "light" : "default"}
          >
            <IconLayoutAlignRight size={18} />
          </ActionIcon>
        </Tooltip>
      </ActionIcon.Group>

-      {editor.getAttributes("image")?.width && (
-        <NodeWidthResize
-          onChange={onWidthChange}
-          value={parseInt(editor.getAttributes("image").width)}
-        />
+      {editorState?.width && (
+        <NodeWidthResize onChange={onWidthChange} value={editorState.width} />
      )}
    </BaseBubbleMenu>
  );
@@ -16,7 +16,7 @@ export default function ImageView(props: NodeViewProps) {
  }, [align]);

  return (
-    <NodeViewWrapper>
+    <NodeViewWrapper data-drag-handle>
      <Image
        radius="md"
        fit="contain"
@@ -9,6 +9,7 @@ export type LinkFn = (
  view: EditorView,
  pos: number,
  creatorId: string,
+  anchorId?: string,
 ) => void;

 export interface InternalLinkOptions {
@@ -18,7 +19,7 @@ export interface InternalLinkOptions {

 export const handleInternalLink =
  ({ validateFn, onResolveLink }: InternalLinkOptions): LinkFn =>
-  async (url: string, view, pos, creatorId) => {
+  async (url: string, view, pos, creatorId, anchorId) => {
    const validated = validateFn(url, view);
    if (!validated) return;

@@ -35,6 +36,7 @@ export const handleInternalLink =
          entityId: page.id,
          slugId: page.slugId,
          creatorId: creatorId,
+          anchorId: anchorId,
        });

        if (!node) return;
@@ -1,4 +1,4 @@
-import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react";
+import { BubbleMenu as BaseBubbleMenu, useEditorState } from "@tiptap/react";
 import React, { useCallback, useState } from "react";
 import { EditorMenuProps } from "@/features/editor/components/table/types/types.ts";
 import { LinkEditorPanel } from "@/features/editor/components/link/link-editor-panel.tsx";
@@ -12,7 +12,18 @@ export function LinkMenu({ editor, appendTo }: EditorMenuProps) {
    return editor.isActive("link");
  }, [editor]);

-  const { href: link } = editor.getAttributes("link");
+  const editorState = useEditorState({
+    editor,
+    selector: (ctx) => {
+      if (!ctx.editor) {
+        return null;
+      }
+      const link = ctx.editor.getAttributes("link");
+      return {
+        href: link.href,
+      };
+    },
+  });

  const handleEdit = useCallback(() => {
    setShowEdit(true);
@@ -70,11 +81,14 @@ export function LinkMenu({ editor, appendTo }: EditorMenuProps) {
          padding="xs"
          bg="var(--mantine-color-body)"
        >
-          <LinkEditorPanel initialUrl={link} onSetLink={onSetLink} />
+          <LinkEditorPanel
+            initialUrl={editorState?.href}
+            onSetLink={onSetLink}
+          />
        </Card>
      ) : (
        <LinkPreviewPanel
-          url={link}
+          url={editorState?.href}
          onClear={onUnsetLink}
          onEdit={handleEdit}
        />
@@ -1,19 +1,21 @@
 import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
 import { ActionIcon, Anchor, Text } from "@mantine/core";
 import { IconFileDescription } from "@tabler/icons-react";
-import { Link, useLocation, useParams } from "react-router-dom";
+import { Link, useLocation, useNavigate, useParams } from "react-router-dom";
 import { usePageQuery } from "@/features/page/queries/page-query.ts";
 import {
  buildPageUrl,
  buildSharedPageUrl,
 } from "@/features/page/page.utils.ts";
+import { extractPageSlugId } from "@/lib";
 import classes from "./mention.module.css";

 export default function MentionView(props: NodeViewProps) {
  const { node } = props;
-  const { label, entityType, entityId, slugId } = node.attrs;
-  const { spaceSlug } = useParams();
+  const { label, entityType, entityId, slugId, anchorId } = node.attrs;
+  const { spaceSlug, pageSlug } = useParams();
  const { shareId } = useParams();
+  const navigate = useNavigate();
  const {
    data: page,
    isLoading,
@@ -23,14 +25,29 @@ export default function MentionView(props: NodeViewProps) {
  const location = useLocation();
  const isShareRoute = location.pathname.startsWith("/share");

+  const currentPageSlugId = extractPageSlugId(pageSlug);
+  const isSamePage = currentPageSlugId === slugId;
+
+  const handleClick = (e: React.MouseEvent) => {
+    if (isSamePage && anchorId) {
+      e.preventDefault();
+      const element = document.querySelector(`[id="${anchorId}"]`);
+      if (element) {
+        element.scrollIntoView({ behavior: "smooth", block: "start" });
+        navigate(`#${anchorId}`, { replace: true });
+      }
+    }
+  };
+
  const shareSlugUrl = buildSharedPageUrl({
    shareId,
    pageSlugId: slugId,
    pageTitle: label,
+    anchorId,
  });

  return (
-    <NodeViewWrapper style={{ display: "inline" }}>
+    <NodeViewWrapper style={{ display: "inline" }} data-drag-handle>
      {entityType === "user" && (
        <Text className={classes.userMention} component="span">
          @{label}
@@ -42,8 +59,9 @@ export default function MentionView(props: NodeViewProps) {
          component={Link}
          fw={500}
          to={
-            isShareRoute ? shareSlugUrl : buildPageUrl(spaceSlug, slugId, label)
+            isShareRoute ? shareSlugUrl : buildPageUrl(spaceSlug, slugId, label, anchorId)
          }
+          onClick={handleClick}
          underline="never"
          className={classes.pageMentionLink}
        >
@@ -52,7 +52,7 @@ export default function SubpagesView(props: NodeViewProps) {

  if (error && !shareId) {
    return (
-      <NodeViewWrapper>
+      <NodeViewWrapper data-drag-handle>
        <Text c="dimmed" size="md" py="md">
          {t("Failed to load subpages")}
        </Text>
@@ -62,7 +62,7 @@ export default function SubpagesView(props: NodeViewProps) {

  if (subpages.length === 0) {
    return (
-      <NodeViewWrapper>
+      <NodeViewWrapper data-drag-handle>
        <div className={classes.container}>
          <Text c="dimmed" size="md" py="md">
            {t("No subpages")}
@@ -73,7 +73,7 @@ export default function SubpagesView(props: NodeViewProps) {
  }

  return (
-    <NodeViewWrapper>
+    <NodeViewWrapper data-drag-handle>
      <div className={classes.container}>
        <Stack gap={5}>
          {subpages.map((page) => (
@@ -9,7 +9,8 @@ import {
  Tooltip,
  UnstyledButton,
 } from "@mantine/core";
-import { useEditor } from "@tiptap/react";
+import type { Editor } from "@tiptap/react";
+import { useEditorState } from "@tiptap/react";
 import { useTranslation } from "react-i18next";

 export interface TableColorItem {
@@ -18,7 +19,7 @@ export interface TableColorItem {
 }

 interface TableBackgroundColorProps {
-  editor: ReturnType<typeof useEditor>;
+  editor: Editor | null;
 }

 const TABLE_COLORS: TableColorItem[] = [
@@ -38,37 +39,50 @@ export const TableBackgroundColor: FC<TableBackgroundColorProps> = ({
  const { t } = useTranslation();
  const [opened, setOpened] = React.useState(false);

+  const editorState = useEditorState({
+    editor,
+    selector: (ctx) => {
+      if (!ctx.editor) {
+        return null;
+      }
+
+      let currentColor = "";
+      if (ctx.editor.isActive("tableCell")) {
+        const attrs = ctx.editor.getAttributes("tableCell");
+        currentColor = attrs.backgroundColor || "";
+      } else if (ctx.editor.isActive("tableHeader")) {
+        const attrs = ctx.editor.getAttributes("tableHeader");
+        currentColor = attrs.backgroundColor || "";
+      }
+
+      return {
+        currentColor,
+        isTableCell: ctx.editor.isActive("tableCell"),
+        isTableHeader: ctx.editor.isActive("tableHeader"),
+      };
+    },
+  });
+
+  if (!editor || !editorState) {
+    return null;
+  }
+
  const setTableCellBackground = (color: string, colorName: string) => {
    editor
      .chain()
      .focus()
-      .updateAttributes("tableCell", { 
+      .updateAttributes("tableCell", {
        backgroundColor: color || null,
-        backgroundColorName: color ? colorName : null 
+        backgroundColorName: color ? colorName : null,
      })
-      .updateAttributes("tableHeader", { 
+      .updateAttributes("tableHeader", {
        backgroundColor: color || null,
-        backgroundColorName: color ? colorName : null 
+        backgroundColorName: color ? colorName : null,
      })
      .run();
    setOpened(false);
  };

-  // Get current cell's background color
-  const getCurrentColor = () => {
-    if (editor.isActive("tableCell")) {
-      const attrs = editor.getAttributes("tableCell");
-      return attrs.backgroundColor || "";
-    }
-    if (editor.isActive("tableHeader")) {
-      const attrs = editor.getAttributes("tableHeader");
-      return attrs.backgroundColor || "";
-    }
-    return "";
-  };
-
-  const currentColor = getCurrentColor();
-
  return (
    <Popover
      width={200}
@@ -123,7 +137,7 @@ export const TableBackgroundColor: FC<TableBackgroundColorProps> = ({
                    cursor: "pointer",
                  }}
                >
-                  {currentColor === item.color && (
+                  {editorState.currentColor === item.color && (
                    <IconCheck
                      size={18}
                      style={{
@@ -9,15 +9,15 @@ import {
  ActionIcon,
  Button,
  Popover,
-  rem,
  ScrollArea,
  Tooltip,
 } from "@mantine/core";
-import { useEditor } from "@tiptap/react";
+import type { Editor } from "@tiptap/react";
+import { useEditorState } from "@tiptap/react";
 import { useTranslation } from "react-i18next";

 interface TableTextAlignmentProps {
-  editor: ReturnType<typeof useEditor>;
+  editor: Editor | null;
 }

 interface AlignmentItem {
@@ -32,25 +32,44 @@ export const TableTextAlignment: FC<TableTextAlignmentProps> = ({ editor }) => {
  const { t } = useTranslation();
  const [opened, setOpened] = React.useState(false);

+  const editorState = useEditorState({
+    editor,
+    selector: (ctx) => {
+      if (!ctx.editor) {
+        return null;
+      }
+
+      return {
+        isAlignLeft: ctx.editor.isActive({ textAlign: "left" }),
+        isAlignCenter: ctx.editor.isActive({ textAlign: "center" }),
+        isAlignRight: ctx.editor.isActive({ textAlign: "right" }),
+      };
+    },
+  });
+
+  if (!editor || !editorState) {
+    return null;
+  }
+
  const items: AlignmentItem[] = [
    {
      name: "Align left",
      value: "left",
-      isActive: () => editor.isActive({ textAlign: "left" }),
+      isActive: () => editorState?.isAlignLeft,
      command: () => editor.chain().focus().setTextAlign("left").run(),
      icon: IconAlignLeft,
    },
    {
      name: "Align center",
      value: "center",
-      isActive: () => editor.isActive({ textAlign: "center" }),
+      isActive: () => editorState?.isAlignCenter,
      command: () => editor.chain().focus().setTextAlign("center").run(),
      icon: IconAlignCenter,
    },
    {
      name: "Align right",
      value: "right",
-      isActive: () => editor.isActive({ textAlign: "right" }),
+      isActive: () => editorState?.isAlignRight,
      command: () => editor.chain().focus().setTextAlign("right").run(),
      icon: IconAlignRight,
    },
@@ -64,7 +83,7 @@ export const TableTextAlignment: FC<TableTextAlignmentProps> = ({ editor }) => {
      onChange={setOpened}
      position="bottom"
      withArrow
-      transitionProps={{ transition: 'pop' }}
+      transitionProps={{ transition: "pop" }}
    >
      <Popover.Target>
        <Tooltip label={t("Text alignment")} withArrow>
@@ -87,9 +106,7 @@ export const TableTextAlignment: FC<TableTextAlignmentProps> = ({ editor }) => {
                key={index}
                variant="default"
                leftSection={<item.icon size={16} />}
-                rightSection={
-                  item.isActive() && <IconCheck size={16} />
-                }
+                rightSection={item.isActive() && <IconCheck size={16} />}
                justify="left"
                fullWidth
                onClick={() => {
@@ -106,4 +123,4 @@ export const TableTextAlignment: FC<TableTextAlignmentProps> = ({ editor }) => {
      </Popover.Dropdown>
    </Popover>
  );
-};
+};
@@ -2,6 +2,7 @@ import {
  BubbleMenu as BaseBubbleMenu,
  findParentNode,
  posToDOMRect,
+  useEditorState,
 } from "@tiptap/react";
 import React, { useCallback } from "react";
 import { sticky } from "tippy.js";
@@ -32,6 +33,25 @@ export function VideoMenu({ editor }: EditorMenuProps) {
    [editor],
  );

+  const editorState = useEditorState({
+    editor,
+    selector: (ctx) => {
+      if (!ctx.editor) {
+        return null;
+      }
+
+      const videoAttrs = ctx.editor.getAttributes("video");
+
+      return {
+        isVideo: ctx.editor.isActive("video"),
+        isAlignLeft: ctx.editor.isActive("video", { align: "left" }),
+        isAlignCenter: ctx.editor.isActive("video", { align: "center" }),
+        isAlignRight: ctx.editor.isActive("video", { align: "right" }),
+        width: videoAttrs?.width ? parseInt(videoAttrs.width) : null,
+      };
+    },
+  });
+
  const getReferenceClientRect = useCallback(() => {
    const { selection } = editor.state;
    const predicate = (node: PMNode) => node.type.name === "video";
@@ -83,7 +103,7 @@ export function VideoMenu({ editor }: EditorMenuProps) {
  return (
    <BaseBubbleMenu
      editor={editor}
-      pluginKey={`video-menu}`}
+      pluginKey={`video-menu`}
      updateDelay={0}
      tippyOptions={{
        getReferenceClientRect,
@@ -103,9 +123,7 @@ export function VideoMenu({ editor }: EditorMenuProps) {
            onClick={alignVideoLeft}
            size="lg"
            aria-label={t("Align left")}
-            variant={
-              editor.isActive("video", { align: "left" }) ? "light" : "default"
-            }
+            variant={editorState?.isAlignLeft ? "light" : "default"}
          >
            <IconLayoutAlignLeft size={18} />
          </ActionIcon>
@@ -116,11 +134,7 @@ export function VideoMenu({ editor }: EditorMenuProps) {
            onClick={alignVideoCenter}
            size="lg"
            aria-label={t("Align center")}
-            variant={
-              editor.isActive("video", { align: "center" })
-                ? "light"
-                : "default"
-            }
+            variant={editorState?.isAlignCenter ? "light" : "default"}
          >
            <IconLayoutAlignCenter size={18} />
          </ActionIcon>
@@ -131,20 +145,15 @@ export function VideoMenu({ editor }: EditorMenuProps) {
            onClick={alignVideoRight}
            size="lg"
            aria-label={t("Align right")}
-            variant={
-              editor.isActive("video", { align: "right" }) ? "light" : "default"
-            }
+            variant={editorState?.isAlignRight ? "light" : "default"}
          >
            <IconLayoutAlignRight size={18} />
          </ActionIcon>
        </Tooltip>
      </ActionIcon.Group>

-      {editor.getAttributes("video")?.width && (
-        <NodeWidthResize
-          onChange={onWidthChange}
-          value={parseInt(editor.getAttributes("video").width)}
-        />
+      {editorState?.width && (
+        <NodeWidthResize onChange={onWidthChange} value={editorState.width} />
      )}
    </BaseBubbleMenu>
  );
@@ -15,7 +15,7 @@ export default function VideoView(props: NodeViewProps) {
  }, [align]);

  return (
-    <NodeViewWrapper>
+    <NodeViewWrapper data-drag-handle>
      <video
        preload="metadata"
        width={width}
@@ -1,17 +1,20 @@
 import { StarterKit } from "@tiptap/starter-kit";
 import { Placeholder } from "@tiptap/extension-placeholder";
 import { TextAlign } from "@tiptap/extension-text-align";
+import { CharacterCount } from "@tiptap/extension-character-count";
 import { TaskList } from "@tiptap/extension-task-list";
+import { ListKeymap } from "@tiptap/extension-list-keymap";
 import { TaskItem } from "@tiptap/extension-task-item";
 import { Underline } from "@tiptap/extension-underline";
 import { Superscript } from "@tiptap/extension-superscript";
 import SubScript from "@tiptap/extension-subscript";
-import { Highlight } from "@tiptap/extension-highlight";
 import { Typography } from "@tiptap/extension-typography";
 import { TextStyle } from "@tiptap/extension-text-style";
 import { Color } from "@tiptap/extension-color";
+import GlobalDragHandle from "tiptap-extension-global-drag-handle";
+import { Youtube } from "@tiptap/extension-youtube";
 import SlashCommand from "@/features/editor/extensions/slash-command";
-import { Collaboration } from "@tiptap/extension-collaboration";
+import { Collaboration, isChangeOrigin } from "@tiptap/extension-collaboration";
 import { CollaborationCursor } from "@tiptap/extension-collaboration-cursor";
 import { HocuspocusProvider } from "@hocuspocus/provider";
 import {
@@ -40,6 +43,9 @@ import {
  Mention,
  Subpages,
  TableDndExtension,
+  Heading,
+  Highlight,
+  UniqueID,
 } from "@docmost/editor-ext";
 import {
  randomElement,
@@ -48,11 +54,8 @@ import {
 import { IUser } from "@/features/user/types/user.types.ts";
 import MathInlineView from "@/features/editor/components/math/math-inline.tsx";
 import MathBlockView from "@/features/editor/components/math/math-block.tsx";
-import GlobalDragHandle from "tiptap-extension-global-drag-handle";
-import { Youtube } from "@tiptap/extension-youtube";
 import ImageView from "@/features/editor/components/image/image-view.tsx";
 import CalloutView from "@/features/editor/components/callout/callout-view.tsx";
-import { common, createLowlight } from "lowlight";
 import VideoView from "@/features/editor/components/video/video-view.tsx";
 import AttachmentView from "@/features/editor/components/attachment/attachment-view.tsx";
 import CodeBlockView from "@/features/editor/components/code-block/code-block-view.tsx";
@@ -60,6 +63,7 @@ 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 SubpagesView from "@/features/editor/components/subpages/subpages-view.tsx";
+import { common, createLowlight } from "lowlight";
 import plaintext from "highlight.js/lib/languages/plaintext";
 import powershell from "highlight.js/lib/languages/powershell";
 import abap from "highlightjs-sap-abap";
@@ -76,7 +80,6 @@ import MentionView from "@/features/editor/components/mention/mention-view.tsx";
 import i18n from "@/i18n.ts";
 import { MarkdownClipboard } from "@/features/editor/extensions/markdown-clipboard.ts";
 import EmojiCommand from "./emoji-command";
-import { CharacterCount } from "@tiptap/extension-character-count";
 import { countWords } from "alfaaz";

 const lowlight = createLowlight(common);
@@ -93,6 +96,7 @@ lowlight.register("scala", scala);

 export const mainExtensions = [
  StarterKit.configure({
+    heading: false,
    history: false,
    dropcursor: {
      width: 3,
@@ -105,6 +109,11 @@ export const mainExtensions = [
      },
    },
  }),
+  Heading,
+  UniqueID.configure({
+    types: ["heading", "paragraph"],
+    filterTransaction: (transaction) => !isChangeOrigin(transaction),
+  }),
  Placeholder.configure({
    placeholder: ({ node }) => {
      if (node.type.name === "heading") {
@@ -125,6 +134,7 @@ export const mainExtensions = [
  TaskItem.configure({
    nested: true,
  }),
+  ListKeymap,
  Underline,
  LinkExtension.configure({
    openOnClick: false,
@@ -165,7 +175,7 @@ export const mainExtensions = [
  }),
  CustomTable.configure({
    resizable: true,
-    lastColumnResizable: false,
+    lastColumnResizable: true,
    allowTableNodeSelection: true,
  }),
  TableRow,
@@ -228,17 +238,17 @@ export const mainExtensions = [
  SearchAndReplace.extend({
    addKeyboardShortcuts() {
      return {
-        'Mod-f': () => {
+        "Mod-f": () => {
          const event = new CustomEvent("openFindDialogFromEditor", {});
          document.dispatchEvent(event);
          return true;
        },
-        'Escape': () => {
+        Escape: () => {
          const event = new CustomEvent("closeFindDialogFromEditor", {});
          document.dispatchEvent(event);
          return true;
        },
-      }
+      };
    },
  }).configure(),
 ] as any;
@@ -0,0 +1,58 @@
+import { Editor } from "@tiptap/react";
+import { useCallback, useEffect, useState } from "react";
+
+function waitForState(checkFn: () => boolean): Promise<void> {
+  return new Promise((resolve) => {
+    const interval = setInterval(() => {
+      if (checkFn()) {
+        clearInterval(interval);
+        resolve();
+      }
+    }, 800);
+  });
+}
+
+export const useEditorScroll = ({
+  canScroll,
+  initialScrollTo,
+}: {
+  canScroll: () => boolean;
+  initialScrollTo?: string;
+}) => {
+  const [scrollTo, setScrollTo] = useState<string>(initialScrollTo || "");
+
+  useEffect(() => {
+    if (!initialScrollTo) {
+      setScrollTo(window.location.hash ? window.location.hash.slice(1) : "");
+    }
+  }, [initialScrollTo]);
+
+  const handleScrollTo = useCallback(async (editor: Editor, _scrollTo: string | null = null, tryCount: number = 0) => {
+    await waitForState(() => canScroll());
+    return new Promise((resolve) => {
+      const MAX_TRY_COUNT = 10;
+      if (tryCount >= MAX_TRY_COUNT) {
+        resolve(false);
+        return;
+      }
+
+      const targetId = _scrollTo || scrollTo;
+      if (!targetId) {
+        resolve(false);
+        return;
+      }
+
+      const dom = editor.view.dom.querySelector(`[id="${targetId}"]`);
+      if (dom) {
+        dom.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        resolve(true);
+      } else {
+        setTimeout(async () => {
+          resolve(await handleScrollTo(editor, targetId, tryCount + 1));
+        }, 200);
+      }
+    });
+  }, [scrollTo, canScroll]);
+
+  return { scrollTo, handleScrollTo };
+};
@@ -1,5 +1,5 @@
 import "@/features/editor/styles/index.css";
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { IndexeddbPersistence } from "y-indexeddb";
 import * as Y from "yjs";
 import {
@@ -7,7 +7,12 @@ import {
  onAuthenticationFailedParameters,
  WebSocketStatus,
 } from "@hocuspocus/provider";
-import { EditorContent, EditorProvider, useEditor } from "@tiptap/react";
+import {
+  EditorContent,
+  EditorProvider,
+  useEditor,
+  useEditorState,
+} from "@tiptap/react";
 import {
  collabExtensions,
  mainExtensions,
@@ -50,7 +55,8 @@ import { extractPageSlugId } from "@/lib";
 import { FIVE_MINUTES } from "@/lib/constants.ts";
 import { PageEditMode } from "@/features/user/types/user.types.ts";
 import { jwtDecode } from "jwt-decode";
-import { searchSpotlight } from '@/features/search/constants.ts';
+import { searchSpotlight } from "@/features/search/constants.ts";
+import { useEditorScroll } from "./hooks/use-editor-scroll";

 interface PageEditorProps {
  pageId: string;
@@ -63,7 +69,16 @@ export default function PageEditor({
  editable,
  content,
 }: PageEditorProps) {
+
+  
  const collaborationURL = useCollaborationUrl();
+  const isComponentMounted = useRef(false);
+  const editorCreated = useRef(false);
+
+  useEffect(() => {
+    isComponentMounted.current = true;
+  }, []);
+  
  const [currentUser] = useAtom(currentUserAtom);
  const [, setEditor] = useAtom(pageEditorAtom);
  const [, setAsideState] = useAtom(asideStateAtom);
@@ -77,7 +92,7 @@ export default function PageEditor({
  const [isLocalSynced, setLocalSynced] = useState(false);
  const [isRemoteSynced, setRemoteSynced] = useState(false);
  const [yjsConnectionStatus, setYjsConnectionStatus] = useAtom(
-    yjsConnectionStatusAtom
+    yjsConnectionStatusAtom,
  );
  const menuContainerRef = useRef(null);
  const documentName = `page.${pageId}`;
@@ -89,7 +104,9 @@ export default function PageEditor({
  const slugId = extractPageSlugId(pageSlug);
  const userPageEditMode =
    currentUser?.user?.settings?.preferences?.pageEditMode ?? PageEditMode.Edit;
-
+  
+    const canScroll = useCallback(() => isComponentMounted.current && editorCreated.current, [isComponentMounted, editorCreated]);
+  const { handleScrollTo } = useEditorScroll({ canScroll });
  // Providers only created once per pageId
  const providersRef = useRef<{
    local: IndexeddbPersistence;
@@ -213,17 +230,17 @@ export default function PageEditor({
      extensions,
      editable,
      immediatelyRender: true,
-      shouldRerenderOnTransaction: true,
+      shouldRerenderOnTransaction: false,
      editorProps: {
        scrollThreshold: 80,
        scrollMargin: 80,
        handleDOMEvents: {
          keydown: (_view, event) => {
-            if ((event.ctrlKey || event.metaKey) && event.code === 'KeyS') {
+            if ((event.ctrlKey || event.metaKey) && event.code === "KeyS") {
              event.preventDefault();
              return true;
            }
-            if ((event.ctrlKey || event.metaKey) && event.code === 'KeyK') {
+            if ((event.ctrlKey || event.metaKey) && event.code === "KeyK") {
              searchSpotlight.open();
              return true;
            }
@@ -259,6 +276,8 @@ export default function PageEditor({
          // @ts-ignore
          setEditor(editor);
          editor.storage.pageId = pageId;
+          handleScrollTo(editor);
+          editorCreated.current = true;
        }
      },
      onUpdate({ editor }) {
@@ -268,9 +287,16 @@ export default function PageEditor({
        debouncedUpdateContent(editorJson);
      },
    },
-    [pageId, editable, remoteProvider]
+    [pageId, editable, remoteProvider],
  );

+  const editorIsEditable = useEditorState({
+    editor,
+    selector: (ctx) => {
+      return ctx.editor?.isEditable ?? false;
+    },
+  });
+
  const debouncedUpdateContent = useDebouncedCallback((newContent: any) => {
    const pageData = queryClient.getQueryData<IPage>(["pages", slugId]);

@@ -306,7 +332,7 @@ export default function PageEditor({
    return () => {
      document.removeEventListener(
        "ACTIVE_COMMENT_EVENT",
-        handleActiveCommentEvent
+        handleActiveCommentEvent,
      );
    };
  }, []);
@@ -389,7 +415,7 @@ export default function PageEditor({
          <SearchAndReplaceDialog editor={editor} editable={editable} />
        )}

-        {editor && editor.isEditable && (
+        {editor && editorIsEditable && (
          <div>
            <EditorBubbleMenu editor={editor} />
            <TableMenu editor={editor} />
@@ -1,13 +1,14 @@
 import "@/features/editor/styles/index.css";
-import React, { useMemo } from "react";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import { EditorProvider } from "@tiptap/react";
 import { mainExtensions } from "@/features/editor/extensions/extensions";
 import { Document } from "@tiptap/extension-document";
-import { Heading } from "@tiptap/extension-heading";
+import { Heading, generateNodeId, UniqueID } from "@docmost/editor-ext";
 import { Text } from "@tiptap/extension-text";
 import { Placeholder } from "@tiptap/extension-placeholder";
 import { useAtom } from "jotai";
 import { readOnlyEditorAtom } from "@/features/editor/atoms/editor-atoms.ts";
+import { useEditorScroll } from "./hooks/use-editor-scroll";

 interface PageEditorProps {
  title: string;
@@ -21,9 +22,34 @@ export default function ReadonlyPageEditor({
  pageId,
 }: PageEditorProps) {
  const [, setReadOnlyEditor] = useAtom(readOnlyEditorAtom);
+  const isComponentMounted = useRef(false);
+  const editorCreated = useRef(false);
+
+  const canScroll = useCallback(
+    () => isComponentMounted.current && editorCreated.current,
+    [isComponentMounted, editorCreated],
+  );
+  const initialScrollTo = window.location.hash
+    ? window.location.hash.slice(1)
+    : "";
+  const { handleScrollTo } = useEditorScroll({ canScroll, initialScrollTo });
+
+  useEffect(() => {
+    isComponentMounted.current = true;
+  }, []);

  const extensions = useMemo(() => {
-    return [...mainExtensions];
+    const filteredExtensions = mainExtensions.filter(
+      (ext) => ext.name !== "uniqueID",
+    );
+
+    return [
+      ...filteredExtensions,
+      UniqueID.configure({
+        types: ["heading", "paragraph"],
+        updateDocument: false,
+      }),
+    ];
  }, []);

  const titleExtensions = [
@@ -59,6 +85,9 @@ export default function ReadonlyPageEditor({
            }
            // @ts-ignore
            setReadOnlyEditor(editor);
+
+            handleScrollTo(editor);
+            editorCreated.current = true;
          }
        }}
      ></EditorProvider>
@@ -5,7 +5,7 @@
  );
  color: light-dark(
    var(--mantine-color-default-color),
-    var(--mantine-color-dark-0)
+    var(--mantine-color-white)
  );
  font-size: var(--mantine-font-size-md);
  line-height: var(--mantine-line-height-xl);
@@ -94,8 +94,12 @@

  hr {
    border: none;
-    border-top: 2px solid #ced4da;
-    margin: 2rem 0;
+    @mixin light {
+      border-top: 1px solid var(--mantine-color-gray-4);
+    }
+    @mixin dark {
+      border-top: 1px solid var(--mantine-color-dark-4);
+    }

    &:hover {
      cursor: pointer;
@@ -111,7 +115,7 @@
  }

  & > .react-renderer {
-    margin-top:  var(--mantine-spacing-sm);
+    margin-top: var(--mantine-spacing-sm);
    margin-bottom: var(--mantine-spacing-sm);

    &:first-child {
@@ -137,7 +141,7 @@

  .selection,
  *::selection {
-    background-color: Highlight;
+    background-color: light-dark(Highlight, var(--mantine-color-gray-7));
  }

  .comment-mark {
@@ -182,6 +186,39 @@
    margin-left: auto;
    margin-right: auto;
  }
+
+}
+
+.ProseMirror > h1,
+.ProseMirror > h2,
+.ProseMirror > h3,
+.ProseMirror > h4,
+.ProseMirror > h5,
+.ProseMirror > h6 {
+  
+  > .link-btn {
+    cursor: pointer;
+    position: relative;
+
+  }
+  
+  > .link-btn > .link-btn-content {
+    opacity: 0;
+    position: absolute;
+    left: 5px;
+    top: 0;
+    height: 100%;
+    transition: opacity 0.15s ease;
+    display: inline-flex;
+    justify-content: center;
+    flex-direction: column;
+  }
+  
+  &:hover > .link-btn > .link-btn-content {
+    opacity: 1;
+  }
+
+  scroll-margin-top: 80px; /* match your header height */
 }

 .ProseMirror-icon {
@@ -205,4 +242,3 @@
 .actionIconGroup {
  background: var(--mantine-color-body);
 }
-
@@ -0,0 +1,177 @@
+/* Highlight colors with dark mode support */
+
+.ProseMirror {
+  /* Blue */
+  mark[data-color="#98d8f2"] {
+    background-color: light-dark(
+      rgb(224 242 254),
+      rgba(37, 99, 235, 0.35)
+    ) !important;
+  }
+
+  /* Green */
+  mark[data-color="#7edb6c"] {
+    background-color: light-dark(
+      rgb(220 252 231),
+      rgba(0, 138, 0, 0.35)
+    ) !important;
+  }
+
+  /* Purple */
+  mark[data-color="#e0d6ed"] {
+    background-color: light-dark(
+      rgb(243 232 255),
+      rgba(147, 51, 234, 0.35)
+    ) !important;
+  }
+
+  /* Red */
+  mark[data-color="#ffc6c2"] {
+    background-color: light-dark(
+      rgb(255 228 230),
+      rgba(224, 0, 0, 0.35)
+    ) !important;
+  }
+
+  /* Yellow */
+  mark[data-color="#faf594"] {
+    background-color: light-dark(
+      rgb(254 249 195),
+      rgba(234, 179, 8, 0.35)
+    ) !important;
+  }
+
+  /* Orange */
+  mark[data-color="#f5c8a9"] {
+    background-color: light-dark(
+      rgb(251, 236, 221),
+      rgba(255, 165, 0, 0.45)
+    ) !important;
+  }
+
+  /* Pink */
+  mark[data-color="#f5cfe0"] {
+    background-color: light-dark(
+      rgb(252, 241, 246),
+      rgba(186, 64, 129, 0.35)
+    ) !important;
+  }
+
+  /* Gray */
+  mark[data-color="#dfdfd7"] {
+    background-color: light-dark(
+      rgb(238 238 235),
+      rgba(168, 162, 158, 0.35)
+    ) !important;
+  }
+
+  /* Brown */
+  mark[data-color="#d7c4b7"] {
+    background-color: light-dark(
+      rgb(215 196 183),
+      rgba(146, 64, 14, 0.35)
+    ) !important;
+  }
+}
+
+
+/* Color selector trigger button styles */
+.color-selector-trigger[data-text-color="#2563EB"] {
+    color: #2563EB !important;
+}
+
+.color-selector-trigger[data-text-color="#008A00"] {
+    color: #008A00 !important;
+}
+
+.color-selector-trigger[data-text-color="#9333EA"] {
+    color: #9333EA !important;
+}
+
+.color-selector-trigger[data-text-color="#E00000"] {
+    color: #E00000 !important;
+}
+
+.color-selector-trigger[data-text-color="#EAB308"] {
+    color: #EAB308 !important;
+}
+
+.color-selector-trigger[data-text-color="#FFA500"] {
+    color: #FFA500 !important;
+}
+
+.color-selector-trigger[data-text-color="#BA4081"] {
+    color: #BA4081 !important;
+}
+
+.color-selector-trigger[data-text-color="#A8A29E"] {
+    color: #A8A29E !important;
+}
+
+.color-selector-trigger[data-text-color="#92400E"] {
+    color: #92400E !important;
+}
+
+/* Highlight background colors with light-dark support - solid colors for trigger button */
+.color-selector-trigger[data-highlight-color="#98d8f2"] {
+    background-color: light-dark(
+            rgb(224 242 254),
+            rgb(30 64 175)
+    ) !important;
+}
+
+.color-selector-trigger[data-highlight-color="#7edb6c"] {
+    background-color: light-dark(
+            rgb(220 252 231),
+            rgb(21 128 61)
+    ) !important;
+}
+
+.color-selector-trigger[data-highlight-color="#e0d6ed"] {
+    background-color: light-dark(
+            rgb(243 232 255),
+            rgb(107 33 168)
+    ) !important;
+}
+
+.color-selector-trigger[data-highlight-color="#ffc6c2"] {
+    background-color: light-dark(
+            rgb(255 228 230),
+            rgb(185 28 28)
+    ) !important;
+}
+
+.color-selector-trigger[data-highlight-color="#faf594"] {
+    background-color: light-dark(
+            rgb(254 249 195),
+            rgb(161 98 7)
+    ) !important;
+}
+
+.color-selector-trigger[data-highlight-color="#f5c8a9"] {
+    background-color: light-dark(
+            rgb(251 236 221),
+            rgb(194 65 12)
+    ) !important;
+}
+
+.color-selector-trigger[data-highlight-color="#f5cfe0"] {
+    background-color: light-dark(
+            rgb(252 241 246),
+            rgb(157 23 77)
+    ) !important;
+}
+
+.color-selector-trigger[data-highlight-color="#dfdfd7"] {
+    background-color: light-dark(
+            rgb(238 238 235),
+            rgb(115 115 115)
+    ) !important;
+}
+
+.color-selector-trigger[data-highlight-color="#d7c4b7"] {
+    background-color: light-dark(
+            rgb(215 196 183),
+            rgb(120 53 15)
+    ) !important;
+}
@@ -12,3 +12,4 @@
@import "./find.css";
@import "./mention.css";
@import "./ordered-list.css";
+@import "./highlight.css";
@@ -104,7 +104,10 @@ export function TitleEditor({
  });

  useEffect(() => {
-    const pageSlug = buildPageUrl(spaceSlug, slugId, title);
+    const anchorId = window.location.hash
+      ? window.location.hash.substring(1)
+      : undefined;
+    const pageSlug = buildPageUrl(spaceSlug, slugId, title, anchorId);
    navigate(pageSlug, { replace: true });
  }, [title]);

@@ -192,10 +195,43 @@ export function TitleEditor({
    const { key } = event;
    const { $head } = titleEditor.state.selection;

+    if (key === "Enter") {
+      event.preventDefault();
+
+      const { $from } = titleEditor.state.selection;
+      const titleText = titleEditor.getText();
+
+      // Get the text offset within the heading node (not document position)
+      const textOffset = $from.parentOffset;
+
+      const textAfterCursor = titleText.slice(textOffset);
+
+      // Delete text after cursor from title (this will be in undo history)
+      const endPos = titleEditor.state.doc.content.size;
+      if (textAfterCursor) {
+        titleEditor.commands.deleteRange({ from: $from.pos, to: endPos });
+      }
+
+      // Don't add to history so undo in page editor won't remove this split
+      pageEditor
+        .chain()
+        .command(({ tr }) => {
+          tr.setMeta("addToHistory", false);
+          return true;
+        })
+        .insertContentAt(0, {
+          type: "paragraph",
+          content: textAfterCursor
+            ? [{ type: "text", text: textAfterCursor }]
+            : undefined,
+        })
+        .focus("start")
+        .run();
+      return;
+    }
+
    const shouldFocusEditor =
-      key === "Enter" ||
-      key === "ArrowDown" ||
-      (key === "ArrowRight" && !$head.nodeAfter);
+      key === "ArrowDown" || (key === "ArrowRight" && !$head.nodeAfter);

    if (shouldFocusEditor) {
      pageEditor.commands.focus("start");
@@ -1,5 +1,7 @@
 import api from "@/lib/api-client";
 import { IFileTask } from "@/features/file-task/types/file-task.types.ts";
+import { IPagination, QueryParams } from "@/lib/types.ts";
+import { IApiKey } from "@/ee/api-key";

 export async function getFileTaskById(fileTaskId: string): Promise<IFileTask> {
  const req = await api.post<IFileTask>("/file-tasks/info", {
@@ -8,7 +10,10 @@ export async function getFileTaskById(fileTaskId: string): Promise<IFileTask> {
  return req.data;
 }

-export async function getFileTasks(): Promise<IFileTask[]> {
-  const req = await api.post<IFileTask[]>("/file-tasks");
+export async function getFileTasks(
+  params?: QueryParams,
+): Promise<IPagination<IFileTask>> {
+  const req = await api.post("/file-tasks", { ...params });
  return req.data;
 }
+
@@ -1,14 +1,15 @@
 import { Group, Box, Button, TextInput, Stack, Textarea } from "@mantine/core";
 import React, { useState } from "react";
 import { useCreateGroupMutation } from "@/features/group/queries/group-query.ts";
-import { useForm, zodResolver } from "@mantine/form";
+import { useForm } from "@mantine/form";
 import * as z from "zod";
 import { useNavigate } from "react-router-dom";
 import { MultiUserSelect } from "@/features/group/components/multi-user-select.tsx";
 import { useTranslation } from "react-i18next";
+import { zodResolver } from 'mantine-form-zod-resolver';

 const formSchema = z.object({
-  name: z.string().trim().min(2).max(50),
+  name: z.string().trim().min(2).max(100),
  description: z.string().max(500),
 });

@@ -4,13 +4,14 @@ import {
  useGroupQuery,
  useUpdateGroupMutation,
 } from "@/features/group/queries/group-query.ts";
-import { useForm, zodResolver } from "@mantine/form";
+import { useForm } from "@mantine/form";
 import * as z from "zod";
 import { useParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
+import { zodResolver } from "mantine-form-zod-resolver";

 const formSchema = z.object({
-  name: z.string().min(2).max(50),
+  name: z.string().min(2).max(100),
  description: z.string().max(500),
 });

@@ -50,7 +50,7 @@ export default function GroupList() {
                  >
                    <Group gap="sm" wrap="nowrap">
                      <IconGroupCircle />
-                      <div>
+                      <div style={{ minWidth: 0, overflow: "hidden" }}>
                        <Text fz="sm" fw={500} lineClamp={1}>
                          {group.name}
                        </Text>
@@ -22,6 +22,7 @@ import { IUser } from "@/features/user/types/user.types.ts";
 import { useEffect } from "react";
 import { validate as isValidUuid } from "uuid";
 import { queryClient } from "@/main.tsx";
+import { useTranslation } from 'react-i18next';

 export function useGetGroupsQuery(
  params?: QueryParams,
@@ -73,11 +74,12 @@ export function useCreateGroupMutation() {

 export function useUpdateGroupMutation() {
  const queryClient = useQueryClient();
+  const { t } = useTranslation();

  return useMutation<IGroup, Error, Partial<IGroup>>({
    mutationFn: (data) => updateGroup(data),
    onSuccess: (data, variables) => {
-      notifications.show({ message: "Group updated successfully" });
+      notifications.show({ message: t("Group updated successfully") });
      queryClient.invalidateQueries({
        queryKey: ["group", variables.groupId],
      });
@@ -91,11 +93,12 @@ export function useUpdateGroupMutation() {

 export function useDeleteGroupMutation() {
  const queryClient = useQueryClient();
+  const { t } = useTranslation();

  return useMutation({
    mutationFn: (groupId: string) => deleteGroup({ groupId }),
    onSuccess: (data, variables) => {
-      notifications.show({ message: "Group deleted successfully" });
+      notifications.show({ message: t("Group deleted successfully") });
      queryClient.refetchQueries({ queryKey: ["groups"] });
    },
    onError: (error) => {
@@ -119,11 +122,12 @@ export function useGroupMembersQuery(

 export function useAddGroupMemberMutation() {
  const queryClient = useQueryClient();
+  const { t } = useTranslation();

  return useMutation<void, Error, { groupId: string; userIds: string[] }>({
    mutationFn: (data) => addGroupMember(data),
    onSuccess: (data, variables) => {
-      notifications.show({ message: "Added successfully" });
+      notifications.show({ message: t("Added successfully") });
      queryClient.invalidateQueries({
        queryKey: ["groupMembers", variables.groupId],
      });
@@ -139,6 +143,7 @@ export function useAddGroupMemberMutation() {

 export function useRemoveGroupMemberMutation() {
  const queryClient = useQueryClient();
+  const { t } = useTranslation();

  return useMutation<
    void,
@@ -150,7 +155,7 @@ export function useRemoveGroupMemberMutation() {
  >({
    mutationFn: (data) => removeGroupMember(data),
    onSuccess: (data, variables) => {
-      notifications.show({ message: "Removed successfully" });
+      notifications.show({ message: t("Removed successfully") });
      queryClient.invalidateQueries({
        queryKey: ["groupMembers", variables.groupId],
      });
@@ -24,7 +24,7 @@ import { treeDataAtom } from "@/features/page/tree/atoms/tree-data-atom.ts";
 import { useAtom } from "jotai";
 import { buildTree } from "@/features/page/tree/utils";
 import { IPage } from "@/features/page/types/page.types.ts";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { ConfluenceIcon } from "@/components/icons/confluence-icon.tsx";
 import { getFileImportSizeLimit, isCloud } from "@/lib/config.ts";
@@ -84,6 +84,12 @@ function ImportFormatSelection({ spaceId, onClose }: ImportFormatSelection) {
  const [fileTaskId, setFileTaskId] = useState<string | null>(null);
  const emit = useQueryEmit();

+  const markdownFileRef = useRef<() => void>(null);
+  const htmlFileRef = useRef<() => void>(null);
+  const notionFileRef = useRef<() => void>(null);
+  const confluenceFileRef = useRef<() => void>(null);
+  const zipFileRef = useRef<() => void>(null);
+
  const canUseConfluence = isCloud() || workspace?.hasLicenseKey;

  const handleZipUpload = async (selectedFile: File, source: string) => {
@@ -116,6 +122,15 @@ function ImportFormatSelection({ spaceId, onClose }: ImportFormatSelection) {
      });

      setFileTaskId(importTask.id);
+
+      // Reset file input after successful upload
+      if (source === "notion" && notionFileRef.current) {
+        notionFileRef.current();
+      } else if (source === "confluence" && confluenceFileRef.current) {
+        confluenceFileRef.current();
+      } else if (source === "generic" && zipFileRef.current) {
+        zipFileRef.current();
+      }
    } catch (err) {
      console.log("Failed to upload import file", err);
      notifications.update({
@@ -243,6 +258,10 @@ function ImportFormatSelection({ spaceId, onClose }: ImportFormatSelection) {
        setTreeData(fullTree);
      }

+      // Reset file inputs after successful upload
+      if (markdownFileRef.current) markdownFileRef.current();
+      if (htmlFileRef.current) htmlFileRef.current();
+
      const pageCountText =
        pageCount === 1 ? `1 ${t("page")}` : `${pageCount} ${t("pages")}`;

@@ -272,7 +291,7 @@ function ImportFormatSelection({ spaceId, onClose }: ImportFormatSelection) {
  return (
    <>
      <SimpleGrid cols={2}>
-        <FileButton onChange={handleFileUpload} accept=".md" multiple>
+        <FileButton onChange={handleFileUpload} accept=".md" multiple resetRef={markdownFileRef}>
          {(props) => (
            <Button
              justify="start"
@@ -285,7 +304,7 @@ function ImportFormatSelection({ spaceId, onClose }: ImportFormatSelection) {
          )}
        </FileButton>

-        <FileButton onChange={handleFileUpload} accept="text/html" multiple>
+        <FileButton onChange={handleFileUpload} accept="text/html" multiple resetRef={htmlFileRef}>
          {(props) => (
            <Button
              justify="start"
@@ -301,6 +320,7 @@ function ImportFormatSelection({ spaceId, onClose }: ImportFormatSelection) {
        <FileButton
          onChange={(file) => handleZipUpload(file, "notion")}
          accept="application/zip"
+          resetRef={notionFileRef}
        >
          {(props) => (
            <Button
@@ -316,6 +336,7 @@ function ImportFormatSelection({ spaceId, onClose }: ImportFormatSelection) {
        <FileButton
          onChange={(file) => handleZipUpload(file, "confluence")}
          accept="application/zip"
+          resetRef={confluenceFileRef}
        >
          {(props) => (
            <Tooltip
@@ -352,6 +373,7 @@ function ImportFormatSelection({ spaceId, onClose }: ImportFormatSelection) {
          <FileButton
            onChange={(file) => handleZipUpload(file, "generic")}
            accept="application/zip"
+            resetRef={zipFileRef}
          >
            {(props) => (
              <Group justify="center">
@@ -15,22 +15,29 @@ export const buildPageUrl = (
  spaceName: string,
  pageSlugId: string,
  pageTitle?: string,
+  anchorId?: string,
 ): string => {
+  let url: string;
  if (spaceName === undefined) {
-    return `/p/${buildPageSlug(pageSlugId, pageTitle)}`;
+    url = `/p/${buildPageSlug(pageSlugId, pageTitle)}`;
+  } else {
+    url = `/s/${spaceName}/p/${buildPageSlug(pageSlugId, pageTitle)}`;
  }
-  return `/s/${spaceName}/p/${buildPageSlug(pageSlugId, pageTitle)}`;
+  return anchorId ? `${url}#${anchorId}` : url;
 };

 export const buildSharedPageUrl = (opts: {
  shareId: string;
  pageSlugId: string;
  pageTitle?: string;
+  anchorId?: string;
 }): string => {
-  const { shareId, pageSlugId, pageTitle } = opts;
+  const { shareId, pageSlugId, pageTitle, anchorId } = opts;
+  let url: string;
  if (!shareId) {
-    return `/share/p/${buildPageSlug(pageSlugId, pageTitle)}`;
+    url = `/share/p/${buildPageSlug(pageSlugId, pageTitle)}`;
+  } else {
+    url = `/share/${shareId}/p/${buildPageSlug(pageSlugId, pageTitle)}`;
  }
-
-  return `/share/${shareId}/p/${buildPageSlug(pageSlugId, pageTitle)}`;
+  return anchorId ? `${url}#${anchorId}` : url;
 };
@@ -9,10 +9,11 @@ import {
  SidebarPagesParams,
 } from '@/features/page/types/page.types';
 import { QueryParams } from "@/lib/types";
-import { IAttachment, IPagination } from "@/lib/types.ts";
+import { IPagination } from "@/lib/types.ts";
 import { saveAs } from "file-saver";
 import { InfiniteData } from "@tanstack/react-query";
 import { IFileTask } from '@/features/file-task/types/file-task.types.ts';
+import { IAttachment } from '@/features/attachments/types/attachment.types.ts';

 export async function createPage(data: Partial<IPage>): Promise<IPage> {
  const req = await api.post<IPage>("/pages/create", data);
@@ -269,12 +269,15 @@ function Node({ node, style, dragHandle, tree }: NodeRendererProps<any>) {
  const toggleMobileSidebar = useToggleSidebar(mobileSidebarAtom);

  const prefetchPage = () => {
-    timerRef.current = setTimeout(() => {
-      queryClient.prefetchQuery({
-        queryKey: ["pages", node.data.slugId],
-        queryFn: () => getPageById({ pageId: node.data.slugId }),
+    timerRef.current = setTimeout(async () => {
+      const page = await queryClient.fetchQuery({
+        queryKey: ["pages", node.data.id],
+        queryFn: () => getPageById({ pageId: node.data.id }),
        staleTime: 5 * 60 * 1000,
      });
+      if (page?.slugId) {
+        queryClient.setQueryData(["pages", page.slugId], page);
+      }
    }, 150);
  };

@@ -9,6 +9,7 @@ import {
  ScrollArea,
  Avatar,
  Group,
+  Switch,
  getDefaultZIndex,
 } from "@mantine/core";
 import {
@@ -17,6 +18,7 @@ import {
  IconFileDescription,
  IconSearch,
  IconCheck,
+  IconSparkles,
 } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
 import { useDebouncedValue } from "@mantine/hooks";
@@ -24,15 +26,21 @@ import { useGetSpacesQuery } from "@/features/space/queries/space-query";
 import { useLicense } from "@/ee/hooks/use-license";
 import classes from "./search-spotlight-filters.module.css";
 import { isCloud } from "@/lib/config.ts";
+import { useAtom } from "jotai/index";
+import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";

 interface SearchSpotlightFiltersProps {
  onFiltersChange?: (filters: any) => void;
+  onAskClick?: () => void;
  spaceId?: string;
+  isAiMode?: boolean;
 }

 export function SearchSpotlightFilters({
  onFiltersChange,
+  onAskClick,
  spaceId,
+  isAiMode = false,
 }: SearchSpotlightFiltersProps) {
  const { t } = useTranslation();
  const { hasLicenseKey } = useLicense();
@@ -42,6 +50,7 @@ export function SearchSpotlightFilters({
  const [spaceSearchQuery, setSpaceSearchQuery] = useState("");
  const [debouncedSpaceQuery] = useDebouncedValue(spaceSearchQuery, 300);
  const [contentType, setContentType] = useState<string | null>("page");
+  const [workspace] = useAtom(workspaceAtom);

  const { data: spacesData } = useGetSpacesQuery({
    page: 1,
@@ -120,6 +129,31 @@ export function SearchSpotlightFilters({

  return (
    <div className={classes.filtersContainer}>
+      {workspace?.settings?.ai?.search === true && (
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            height: "32px",
+            paddingLeft: "8px",
+            paddingRight: "8px",
+          }}
+        >
+          <Switch
+            checked={isAiMode}
+            onChange={(event) => onAskClick()}
+            label={t("Ask AI")}
+            size="sm"
+            color="blue"
+            labelPosition="left"
+            styles={{
+              root: { display: "flex", alignItems: "center" },
+              label: { paddingRight: "8px", fontSize: "13px", fontWeight: 500 },
+            }}
+          />
+        </div>
+      )}
+
      <Menu
        shadow="md"
        width={250}
@@ -231,7 +265,7 @@ export function SearchSpotlightFilters({
                contentType !== option.value &&
                handleFilterChange("contentType", option.value)
              }
-              disabled={option.disabled}
+              disabled={option.disabled || (isAiMode && option.value === "attachment")}
            >
              <Group flex="1" gap="xs">
                <div>
@@ -241,6 +275,11 @@ export function SearchSpotlightFilters({
                      {t("Enterprise")}
                    </Badge>
                  )}
+                  {!option.disabled && isAiMode && option.value === "attachment" && (
+                    <Text size="xs" mt={4}>
+                      {t("Ask AI not available for attachments")}
+                    </Text>
+                  )}
                </div>
                {contentType === option.value && <IconCheck size={20} />}
              </Group>
@@ -1,13 +1,18 @@
 import { Spotlight } from "@mantine/spotlight";
-import { IconSearch } from "@tabler/icons-react";
-import React, { useState, useMemo } from "react";
+import { IconSearch, IconSparkles } from "@tabler/icons-react";
+import { Group, Button } from "@mantine/core";
+import React, { useState, useMemo, useEffect } from "react";
 import { useDebouncedValue } from "@mantine/hooks";
 import { useTranslation } from "react-i18next";
+import { notifications } from "@mantine/notifications";
 import { searchSpotlightStore } from "../constants.ts";
 import { SearchSpotlightFilters } from "./search-spotlight-filters.tsx";
 import { useUnifiedSearch } from "../hooks/use-unified-search.ts";
+import { useAiSearch } from "../../../ee/ai/hooks/use-ai-search.ts";
 import { SearchResultItem } from "./search-result-item.tsx";
+import { AiSearchResult } from "../../../ee/ai/components/ai-search-result.tsx";
 import { useLicense } from "@/ee/hooks/use-license.tsx";
+import { isCloud } from "@/lib/config.ts";

 interface SearchSpotlightProps {
  spaceId?: string;
@@ -23,6 +28,7 @@ export function SearchSpotlight({ spaceId }: SearchSpotlightProps) {
  }>({
    contentType: "page",
  });
+  const [isAiMode, setIsAiMode] = useState(false);

  // Build unified search params
  const searchParams = useMemo(() => {
@@ -39,11 +45,46 @@ export function SearchSpotlight({ spaceId }: SearchSpotlightProps) {
    return params;
  }, [debouncedSearchQuery, filters]);

-  const { data: searchResults, isLoading } = useUnifiedSearch(searchParams);
+  const { data: searchResults, isLoading } = useUnifiedSearch(
+    searchParams,
+    !isAiMode // Disable regular search when in AI mode
+  );
+  const {
+    //@ts-ignore
+    data: aiSearchResult,
+    //@ts-ignore
+    isPending: isAiLoading,
+    //@ts-ignore
+    mutate: triggerAiSearchMutation,
+    //@ts-ignore
+    reset: resetAiMutation,
+    //@ts-ignore
+    error: aiSearchError,
+    streamingAnswer,
+    streamingSources,
+    clearStreaming,
+  } = useAiSearch();
+
+  // Clear streaming state and mutation data when query changes (user is typing a new query)
+  useEffect(() => {
+    clearStreaming();
+    resetAiMutation();
+  }, [query, clearStreaming, resetAiMutation]);
+
+  // Show error notification when AI search fails
+  useEffect(() => {
+    if (aiSearchError) {
+      notifications.show({
+        message: aiSearchError.message || t("AI search failed. Please try again."),
+        color: "red",
+        position: "top-center"
+      });
+    }
+  }, [aiSearchError, t]);

  // Determine result type for rendering
  const isAttachmentSearch =
-    filters.contentType === "attachment" && hasLicenseKey;
+    filters.contentType === "attachment" && (hasLicenseKey || isCloud());

  const resultItems = (searchResults || []).map((result) => (
    <SearchResultItem
@@ -58,6 +99,16 @@ export function SearchSpotlight({ spaceId }: SearchSpotlightProps) {
    setFilters(newFilters);
  };

+  const handleAskClick = () => {
+    setIsAiMode(!isAiMode);
+  };
+
+  const handleAiSearchTrigger = () => {
+    if (query.trim() && isAiMode) {
+      triggerAiSearchMutation(searchParams);
+    }
+  };
+
  return (
    <>
      <Spotlight.Root
@@ -71,10 +122,30 @@ export function SearchSpotlight({ spaceId }: SearchSpotlightProps) {
          backgroundOpacity: 0.55,
        }}
      >
-        <Spotlight.Search
-          placeholder={t("Search...")}
-          leftSection={<IconSearch size={20} stroke={1.5} />}
-        />
+        <Group gap="xs" px="sm" pt="sm" pb="xs">
+          <Spotlight.Search
+            placeholder={isAiMode ? t("Ask a question...") : t("Search...")}
+            leftSection={<IconSearch size={20} stroke={1.5} />}
+            style={{ flex: 1 }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && isAiMode && query.trim() && !isAiLoading) {
+                e.preventDefault();
+                handleAiSearchTrigger();
+              }
+            }}
+          />
+          {isAiMode && hasLicenseKey && (
+            <Button
+              size="xs"
+              leftSection={<IconSparkles size={16} />}
+              onClick={handleAiSearchTrigger}
+              disabled={!query.trim()}
+              loading={isAiLoading}
+            >
+              Ask
+            </Button>
+          )}
+        </Group>

        <div
          style={{
@@ -83,20 +154,43 @@ export function SearchSpotlight({ spaceId }: SearchSpotlightProps) {
        >
          <SearchSpotlightFilters
            onFiltersChange={handleFiltersChange}
+            onAskClick={handleAskClick}
            spaceId={spaceId}
+            isAiMode={isAiMode}
          />
        </div>

        <Spotlight.ActionsList>
-          {query.length === 0 && resultItems.length === 0 && (
-            <Spotlight.Empty>{t("Start typing to search...")}</Spotlight.Empty>
-          )}
+          {isAiMode ? (
+            <>
+              {query.length === 0 && (
+                <Spotlight.Empty>{t("Ask a question...")}</Spotlight.Empty>
+              )}
+              {query.length > 0 && (isAiLoading || aiSearchResult || streamingAnswer) && (
+                <AiSearchResult
+                  result={aiSearchResult}
+                  isLoading={isAiLoading}
+                  streamingAnswer={streamingAnswer}
+                  streamingSources={streamingSources}
+                />
+              )}
+              {query.length > 0 && !isAiLoading && !aiSearchResult && (
+                <Spotlight.Empty>{t("No answer available")}</Spotlight.Empty>
+              )}
+            </>
+          ) : (
+            <>
+              {query.length === 0 && resultItems.length === 0 && (
+                <Spotlight.Empty>{t("Start typing to search...")}</Spotlight.Empty>
+              )}

-          {query.length > 0 && !isLoading && resultItems.length === 0 && (
-            <Spotlight.Empty>{t("No results found...")}</Spotlight.Empty>
-          )}
+              {query.length > 0 && !isLoading && resultItems.length === 0 && (
+                <Spotlight.Empty>{t("No results found...")}</Spotlight.Empty>
+              )}

-          {resultItems.length > 0 && <>{resultItems}</>}
+              {resultItems.length > 0 && <>{resultItems}</>}
+            </>
+          )}
        </Spotlight.ActionsList>
      </Spotlight.Root>
    </>
@@ -19,6 +19,7 @@ export interface UseUnifiedSearchParams extends IPageSearchParams {

 export function useUnifiedSearch(
  params: UseUnifiedSearchParams,
+  enabled: boolean = true,
 ): UseQueryResult<UnifiedSearchResult[], Error> {
  const { hasLicenseKey } = useLicense();

@@ -38,6 +39,6 @@ export function useUnifiedSearch(
        return await searchPage(backendParams);
      }
    },
-    enabled: !!params.query,
+    enabled: !!params.query && enabled,
  });
 }
@@ -8,9 +8,8 @@ import {
  Switch,
  Text,
  TextInput,
-  Tooltip,
 } from "@mantine/core";
-import { IconExternalLink, IconWorld } from "@tabler/icons-react";
+import { IconExternalLink, IconWorld, IconLock } from "@tabler/icons-react";
 import React, { useEffect, useMemo, useState } from "react";
 import {
  useCreateShareMutation,
@@ -18,23 +17,29 @@ import {
  useShareForPageQuery,
  useUpdateShareMutation,
 } from "@/features/share/queries/share-query.ts";
-import { Link, useParams } from "react-router-dom";
+import { Link, useNavigate, useParams } from "react-router-dom";
 import { extractPageSlugId, getPageIcon } from "@/lib";
 import { useTranslation } from "react-i18next";
+import { usePageQuery } from "@/features/page/queries/page-query.ts";
 import CopyTextButton from "@/components/common/copy.tsx";
-import { getAppUrl } from "@/lib/config.ts";
+import { getAppUrl, isCloud } from "@/lib/config.ts";
 import { buildPageUrl } from "@/features/page/page.utils.ts";
 import classes from "@/features/share/components/share.module.css";
+import useTrial from "@/ee/hooks/use-trial.tsx";

 interface ShareModalProps {
  readOnly: boolean;
 }
 export default function ShareModal({ readOnly }: ShareModalProps) {
  const { t } = useTranslation();
+  const navigate = useNavigate();
  const { pageSlug } = useParams();
-  const pageId = extractPageSlugId(pageSlug);
+  const pageSlugId = extractPageSlugId(pageSlug);
+  const { data: page } = usePageQuery({ pageId: pageSlugId });
+  const pageId = page?.id;
  const { data: share } = useShareForPageQuery(pageId);
  const { spaceSlug } = useParams();
+  const { isTrial } = useTrial();
  const createShareMutation = useCreateShareMutation();
  const updateShareMutation = useUpdateShareMutation();
  const deleteShareMutation = useDeleteShareMutation();
@@ -61,7 +66,7 @@ export default function ShareModal({ readOnly }: ShareModalProps) {
      createShareMutation.mutateAsync({
        pageId: pageId,
        includeSubPages: true,
-        searchIndexing: true,
+        searchIndexing: false,
      });
      setIsPagePublic(value);
    } else {
@@ -92,26 +97,29 @@ export default function ShareModal({ readOnly }: ShareModalProps) {
    });
  };

-  const shareLink = useMemo(() => (
-    <Group my="sm" gap={4} wrap="nowrap">
-      <TextInput
-        variant="filled"
-        value={publicLink}
-        readOnly
-        rightSection={<CopyTextButton text={publicLink} />}
-        style={{ width: "100%" }}
-      />
-      <ActionIcon
-        component="a"
-        variant="default"
-        target="_blank"
-        href={publicLink}
-        size="sm"
-      >
-        <IconExternalLink size={16} />
-      </ActionIcon>
-    </Group>
-  ), [publicLink]);
+  const shareLink = useMemo(
+    () => (
+      <Group my="sm" gap={4} wrap="nowrap">
+        <TextInput
+          variant="filled"
+          value={publicLink}
+          readOnly
+          rightSection={<CopyTextButton text={publicLink} />}
+          style={{ width: "100%" }}
+        />
+        <ActionIcon
+          component="a"
+          variant="default"
+          target="_blank"
+          href={publicLink}
+          size="sm"
+        >
+          <IconExternalLink size={16} />
+        </ActionIcon>
+      </Group>
+    ),
+    [publicLink],
+  );

  return (
    <Popover width={350} position="bottom" withArrow shadow="md">
@@ -135,7 +143,28 @@ export default function ShareModal({ readOnly }: ShareModalProps) {
        </Button>
      </Popover.Target>
      <Popover.Dropdown style={{ userSelect: "none" }}>
-        {isDescendantShared ? (
+        {isCloud() && isTrial ? (
+          <>
+            <Group justify="center" mb="sm">
+              <IconLock size={20} stroke={1.5} />
+            </Group>
+            <Text size="sm" ta="center" fw={500} mb="xs">
+              {t("Upgrade to share pages")}
+            </Text>
+            <Text size="sm" c="dimmed" ta="center" mb="sm">
+              {t(
+                "Page sharing is available on paid plans. Upgrade to share your pages publicly.",
+              )}
+            </Text>
+            <Button
+              size="xs"
+              onClick={() => navigate("/settings/billing")}
+              fullWidth
+            >
+              {t("Upgrade Plan")}
+            </Button>
+          </>
+        ) : isDescendantShared ? (
          <>
            <Text size="sm">{t("Inherits public sharing from")}</Text>
            <Anchor
@@ -27,9 +27,7 @@ import {
  getShares,
  updateShare,
 } from "@/features/share/services/share-service.ts";
-import { IPage } from "@/features/page/types/page.types.ts";
 import { IPagination, QueryParams } from "@/lib/types.ts";
-import { useEffect } from "react";

 export function useGetSharesQuery(
  params?: QueryParams,
@@ -72,7 +70,7 @@ export function useShareForPageQuery(
    queryKey: ["share-for-page", pageId],
    queryFn: () => getShareForPage(pageId),
    enabled: !!pageId,
-    staleTime: 0,
+    staleTime: 60 * 1000,
    retry: false,
  });

@@ -1,6 +1,7 @@
 import { Group, Box, Button, TextInput, Stack, Textarea } from "@mantine/core";
 import React, { useEffect } from "react";
-import { useForm, zodResolver } from "@mantine/form";
+import { useForm } from "@mantine/form";
+import { zodResolver } from "mantine-form-zod-resolver";
 import * as z from "zod";
 import { useNavigate } from "react-router-dom";
 import { useCreateSpaceMutation } from "@/features/space/queries/space-query.ts";
@@ -9,12 +10,12 @@ import { getSpaceUrl } from "@/lib/config.ts";
 import { useTranslation } from "react-i18next";

 const formSchema = z.object({
-  name: z.string().trim().min(2).max(50),
+  name: z.string().trim().min(2).max(100),
  slug: z
    .string()
    .trim()
    .min(2)
-    .max(50)
+    .max(100)
    .regex(
      /^[a-zA-Z0-9]+$/,
      "Space slug must be alphanumeric. No special characters",
@@ -7,12 +7,12 @@ import { ISpace } from "@/features/space/types/space.types.ts";
 import { useTranslation } from "react-i18next";

 const formSchema = z.object({
-  name: z.string().min(2).max(50),
-  description: z.string().max(250),
+  name: z.string().min(2).max(100),
+  description: z.string().max(500),
  slug: z
    .string()
    .min(2)
-    .max(50)
+    .max(100)
    .regex(
      /^[a-zA-Z0-9]+$/,
      "Space slug must be alphanumeric. No special characters",
@@ -1,10 +1,10 @@
-import {Modal, Tabs, rem, Group, ScrollArea, Text} from "@mantine/core";
+import { Modal, Tabs, rem, Group, ScrollArea, Text } from "@mantine/core";
 import SpaceMembersList from "@/features/space/components/space-members.tsx";
 import AddSpaceMembersModal from "@/features/space/components/add-space-members-modal.tsx";
-import React, {useMemo} from "react";
+import React from "react";
 import SpaceDetails from "@/features/space/components/space-details.tsx";
-import {useSpaceQuery} from "@/features/space/queries/space-query.ts";
-import {useSpaceAbility} from "@/features/space/permissions/use-space-ability.ts";
+import { useSpaceQuery } from "@/features/space/queries/space-query.ts";
+import { useSpaceAbility } from "@/features/space/permissions/use-space-ability.ts";
 import {
  SpaceCaslAction,
  SpaceCaslSubject,
@@ -39,16 +39,18 @@ export default function SpaceSettingsModal({
        xOffset={0}
        mah={400}
      >
-        <Modal.Overlay/>
-        <Modal.Content style={{overflow: "hidden"}}>
+        <Modal.Overlay />
+        <Modal.Content style={{ overflow: "hidden" }}>
          <Modal.Header py={0}>
            <Modal.Title>
-              <Text fw={500} lineClamp={1}>{space?.name}</Text>
+              <Text fw={500} lineClamp={1}>
+                {space?.name}
+              </Text>
            </Modal.Title>
-            <Modal.CloseButton/>
+            <Modal.CloseButton />
          </Modal.Header>
          <Modal.Body>
-            <div style={{height: rem(600)}}>
+            <div style={{ height: rem(600) }}>
              <Tabs defaultValue="members">
                <Tabs.List>
                  <Tabs.Tab fw={500} value="general">
@@ -60,13 +62,18 @@ export default function SpaceSettingsModal({
                </Tabs.List>

                <Tabs.Panel value="general">
-                  <SpaceDetails
-                    spaceId={space?.id}
-                    readOnly={spaceAbility.cannot(
-                      SpaceCaslAction.Manage,
-                      SpaceCaslSubject.Settings,
-                    )}
-                  />
+                  <ScrollArea h={580} scrollbarSize={5} pr={8}>
+                    <div style={{ paddingBottom: "100px"}}>
+                      <SpaceDetails
+                        spaceId={space?.id}
+                        readOnly={spaceAbility.cannot(
+                          SpaceCaslAction.Manage,
+                          SpaceCaslSubject.Settings,
+                        )}
+                      />
+                    </div>
+
+                  </ScrollArea>
                </Tabs.Panel>

                <Tabs.Panel value="members">
@@ -74,7 +81,7 @@ export default function SpaceSettingsModal({
                    {spaceAbility.can(
                      SpaceCaslAction.Manage,
                      SpaceCaslSubject.Member,
-                    ) && <AddSpaceMembersModal spaceId={space?.id}/>}
+                    ) && <AddSpaceMembersModal spaceId={space?.id} />}
                  </Group>

                  <SpaceMembersList
@@ -1,9 +1,11 @@
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useDebouncedValue } from "@mantine/hooks";
-import { Avatar, Group, Select, SelectProps, Text } from "@mantine/core";
+import { Group, Select, SelectProps, Text } from "@mantine/core";
 import { useGetSpacesQuery } from "@/features/space/queries/space-query.ts";
 import { ISpace } from "../../types/space.types";
 import { useTranslation } from "react-i18next";
+import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
+import { AvatarIconType } from "@/features/attachments/types/attachment.types.ts";

 interface SpaceSelectProps {
  onChange: (value: ISpace) => void;
@@ -16,7 +18,14 @@ interface SpaceSelectProps {

 const renderSelectOption: SelectProps["renderOption"] = ({ option }) => (
  <Group gap="sm" wrap="nowrap">
-    <Avatar color="initials" variant="filled" name={option.label} size={20} />
+    <CustomAvatar
+      name={option.label}
+      avatarUrl={option?.["icon"]}
+      type={AvatarIconType.SPACE_ICON}
+      color="initials"
+      variant="filled"
+      size={20}
+    />
    <div>
      <Text size="sm" lineClamp={1}>
        {option.label}
@@ -50,6 +59,7 @@ export function SpaceSelect({
          return {
            label: space.name,
            value: space.slug,
+            icon: space.logo,
          };
        });

@@ -76,12 +86,11 @@ export function SpaceSelect({
      onChange={(slug) =>
        onChange(spaces.items?.find((item) => item.slug === slug))
      }
-      // duct tape
      onClick={(e) => e.stopPropagation()}
      nothingFoundMessage={t("No space found")}
      limit={50}
      checkIconPosition="right"
-      comboboxProps={{ width, withinPortal: true, position: "bottom" }}
+      comboboxProps={{ width, withinPortal: true, position: "bottom", keepMounted: false, dropdownPadding: 0 }}
      dropdownOpened={opened}
    />
  );
@@ -74,7 +74,11 @@ export function SpaceSidebar() {
            marginBottom: 3,
          }}
        >
-          <SwitchSpace spaceName={space?.name} spaceSlug={space?.slug} />
+          <SwitchSpace
+            spaceName={space?.name}
+            spaceSlug={space?.slug}
+            spaceIcon={space?.logo}
+          />
        </div>

        <div className={classes.section}>
@@ -1,17 +1,25 @@
-import classes from './switch-space.module.css';
-import { useNavigate } from 'react-router-dom';
-import { SpaceSelect } from './space-select';
-import { getSpaceUrl } from '@/lib/config';
-import { Avatar, Button, Popover, Text } from '@mantine/core';
-import { IconChevronDown } from '@tabler/icons-react';
-import { useDisclosure } from '@mantine/hooks';
+import classes from "./switch-space.module.css";
+import { useNavigate } from "react-router-dom";
+import { SpaceSelect } from "./space-select";
+import { getSpaceUrl } from "@/lib/config";
+import { Button, Popover, Text } from "@mantine/core";
+import { IconChevronDown } from "@tabler/icons-react";
+import { useDisclosure } from "@mantine/hooks";
+import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
+import { AvatarIconType } from "@/features/attachments/types/attachment.types.ts";
+import React from "react";

 interface SwitchSpaceProps {
  spaceName: string;
  spaceSlug: string;
+  spaceIcon?: string;
 }

-export function SwitchSpace({ spaceName, spaceSlug }: SwitchSpaceProps) {
+export function SwitchSpace({
+  spaceName,
+  spaceSlug,
+  spaceIcon,
+}: SwitchSpaceProps) {
  const navigate = useNavigate();
  const [opened, { close, open, toggle }] = useDisclosure(false);

@@ -40,11 +48,13 @@ export function SwitchSpace({ spaceName, spaceSlug }: SwitchSpaceProps) {
          color="gray"
          onClick={open}
        >
-          <Avatar
-            size={20}
+          <CustomAvatar
+            name={spaceName}
+            avatarUrl={spaceIcon}
+            type={AvatarIconType.SPACE_ICON}
            color="initials"
            variant="filled"
-            name={spaceName}
+            size={20}
          />
          <Text className={classes.spaceName} size="md" fw={500} lineClamp={1}>
            {spaceName}
@@ -55,7 +65,7 @@ export function SwitchSpace({ spaceName, spaceSlug }: SwitchSpaceProps) {
        <SpaceSelect
          label={spaceName}
          value={spaceSlug}
-          onChange={space => handleSelect(space.slug)}
+          onChange={(space) => handleSelect(space.slug)}
          width={300}
          opened={true}
        />
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Philipinho	5eb3416b5c	namespace	2026-01-17 14:51:56 +00:00
Philipinho	c1cfe158cd	smart scene sync	2026-01-17 14:39:27 +00:00
Philipinho	ab81903299	ignore ts error	2026-01-17 13:44:04 +00:00
Philipinho	14698ebb05	fix room exit	2026-01-17 13:42:58 +00:00
Philipinho	efa52ea4c8	Live cursor	2026-01-17 13:36:35 +00:00
Philipinho	a4750bff56	WIP - POC	2026-01-17 13:24:54 +00:00
Philipinho	5c9eed53c0	websocket - WIP	2026-01-17 03:15:58 +00:00
Philipinho	bcb004af21	update lockfile	2026-01-16 13:22:41 +00:00
Philipinho	ac675e7d74	update dockerfile	2026-01-16 13:21:42 +00:00
Philipinho	bf89eff5e7	sync	2026-01-16 13:20:31 +00:00
Philip Okugbe	183787fa0c	fix: update dependencies (#1843 )	2026-01-14 16:36:47 +00:00
Philipinho	15aa04a5f7	sync	2026-01-14 11:49:39 +00:00
Philipinho	79343a5d52	fix: prevent text overflow in group and space list tables	2026-01-13 16:25:42 +00:00
Philipinho	61e252918e	fix length	2026-01-13 16:13:52 +00:00
Philipinho	e98fa7f69a	sync * fix form length	2026-01-13 16:13:04 +00:00
Philip Okugbe	6d148a35eb	New Crowdin updates (#1830 ) * New translations translation.json (Japanese) * New translations translation.json (Japanese)	2026-01-13 16:01:08 +00:00
Philip Okugbe	0bbc1c35de	fix: public sharing performance improvements (#1841 )	2026-01-13 16:00:22 +00:00
Philip Okugbe	47097969a0	fix: use subquery (#1833 ) - enhance file tasks list endpoint	2026-01-13 15:58:26 +00:00
Philip Okugbe	13f529e064	fix anchor scroll in same page (#1834 )	2026-01-13 15:35:53 +00:00
Philip Okugbe	8fc8422fbc	fix: increase max length for groups and spaces (#1840 )	2026-01-13 15:31:03 +00:00
Philipinho	732951a322	v0.24.1	2025-12-14 13:24:09 +00:00
Philipinho	2544775266	fix: switch to node slim image	2025-12-14 13:16:40 +00:00
Philipinho	d59539f197	fix ai streaming	2025-12-13 14:15:41 +00:00
Philipinho	b061df7f7d	Use new fastify router options	2025-12-13 14:15:06 +00:00
Philipinho	0fe1459864	fix: override jsonwebtoken version	2025-12-12 17:25:27 +00:00
Philipinho	6af7956889	v0.24.0	2025-12-12 17:15:59 +00:00
Philip Okugbe	3dbb957bd7	New Crowdin updates (#1541 ) * New translations translation.json (Dutch) * New translations translation.json (French) * New translations translation.json (Spanish) * New translations translation.json (German) * New translations translation.json (Italian) * New translations translation.json (Japanese) * New translations translation.json (Korean) * New translations translation.json (Dutch) * New translations translation.json (Russian) * New translations translation.json (Ukrainian) * New translations translation.json (Chinese Simplified) * New translations translation.json (English) * New translations translation.json (Portuguese, Brazilian) * New translations translation.json (Russian) * New translations translation.json (German) * New translations translation.json (German) * New translations translation.json (German) * New translations translation.json (French) * New translations translation.json (Spanish) * New translations translation.json (Italian) * New translations translation.json (Japanese) * New translations translation.json (Korean) * New translations translation.json (Dutch) * New translations translation.json (Russian) * New translations translation.json (Ukrainian) * New translations translation.json (Chinese Simplified) * New translations translation.json (English) * New translations translation.json (Portuguese, Brazilian) * New translations translation.json (Russian) * New translations translation.json (Ukrainian) * New translations translation.json (Ukrainian) * New translations translation.json (Russian) * New translations translation.json (Spanish) * New translations translation.json (Korean) * New translations translation.json (Korean) * New translations translation.json (French) * New translations translation.json (Spanish) * New translations translation.json (German) * New translations translation.json (Italian) * New translations translation.json (Japanese) * New translations translation.json (Korean) * New translations translation.json (Dutch) * New translations translation.json (Russian) * New translations translation.json (Ukrainian) * New translations translation.json (Chinese Simplified) * New translations translation.json (English) * New translations translation.json (Portuguese, Brazilian) * New translations translation.json (French) * New translations translation.json (Spanish) * New translations translation.json (German) * New translations translation.json (Italian) * New translations translation.json (Japanese) * New translations translation.json (Korean) * New translations translation.json (Dutch) * New translations translation.json (Russian) * New translations translation.json (Ukrainian) * New translations translation.json (Chinese Simplified) * New translations translation.json (English) * New translations translation.json (Portuguese, Brazilian) * New translations translation.json (French) * New translations translation.json (Spanish) * New translations translation.json (German) * New translations translation.json (Italian) * New translations translation.json (Japanese) * New translations translation.json (Korean) * New translations translation.json (Dutch) * New translations translation.json (Russian) * New translations translation.json (Ukrainian) * New translations translation.json (Chinese Simplified) * New translations translation.json (Portuguese, Brazilian)	2025-12-12 17:15:19 +00:00
Philipinho	f39a4cf2d5	fix space modal spacing	2025-12-12 14:08:30 +00:00
Philipinho	724e01bd55	fix default page share state (API)	2025-12-11 20:43:26 +00:00
Philip Okugbe	6e350f6746	fix nodeview dragging (#1775 )	2025-12-11 19:32:18 +00:00
Philip Okugbe	cb9f27da9a	fix mermaid security (#1774 )	2025-12-11 16:44:52 +00:00
Philip Okugbe	d2629afff2	feat: anchor links (#1765 ) * feat: add heading extension with unique ID support and scroll functionality * Added unique id for heading * remove baseUrl heading storage * move heading to extensions package * WIP * support anchors in mentions * enhance scrolling functionality * nodeId function * fix nanoid import * Bring unique-id extension local * fixes * fix internal link scroll in public pages * add unique id server side * rename mention anchor to anchorId * capture first anchorId on paste --------- Co-authored-by: Romik <40670677+RomikMakavana@users.noreply.github.com>	2025-12-06 14:46:54 +00:00
Philip Okugbe	9139d393ef	fix: update tiptap packages (#1755 ) * update tiptap version * create empty paragraph on enter * feat: split title text into page content on Enter * update hocuspocus	2025-12-02 13:15:19 +00:00
Philipinho	ab96672ecd	fix	2025-12-02 13:14:03 +00:00
Philipinho	2ea3c2da58	sync	2025-12-01 14:05:59 +00:00
Philip Okugbe	9fb16bc842	feat(EE): AI vector search (#1691 ) * WIP * AI module - init * WIP * sync * WIP * refactor naming * new columns * sync * sync * fix search bug * stream response * WIP * feat embeddings sync * refine * Add workspaceId to page events * refine * WIP * add translation string * sync * reset ai answer on query change * hide AI search in cloud * capture streaming error * sync	2025-12-01 11:50:25 +00:00
Philip Okugbe	c3b350d943	fix: zip extraction validation (#1753 ) * fix: zip extraction validation * fix	2025-12-01 11:37:59 +00:00
Philip Okugbe	8014ba3ab7	feat: Text background highlight (#1754 ) * #1196/feat: add text background highlight * unify text color * dark mode support * unify text color and highlight * dark mode support for color selector trigger * fix see through in color selector dark mode * fix selection highlight in dark mode * brown color * clean up --------- Co-authored-by: sanua356 <sanek.pankratov356@gmail.com>	2025-12-01 11:34:35 +00:00
Philipinho	ec3a04f7c7	fix	2025-11-29 12:37:35 +00:00
Philip Okugbe	04a17c9b92	package security updates (#1744 ) * package security updates * package updates	2025-11-29 11:50:20 +00:00
Philip Okugbe	520c07a0bc	fix: generic page import hierarchy (#1747 ) * fix page hierarchy * fix	2025-11-29 11:50:02 +00:00
Philipinho	60a8ed6826	sync	2025-10-25 02:08:29 +01:00
Philip Okugbe	f5684b792e	fix duplicated page parenting (#1692 )	2025-10-23 15:00:11 +01:00
Philipinho	042836cb6d	sync	2025-10-07 21:09:55 +01:00
Philipinho	4f1f0ba513	fix	2025-10-07 21:06:59 +01:00
Philip Okugbe	3164b6981c	feat: api keys management (EE) (#1665 ) * feat: api keys (EE) * improvements * fix table * fix route * remove token suffix * api settings * Fix * fix * fix * fix	2025-10-07 21:05:13 +01:00
Philipinho	16c1e864af	fix comment space	2025-10-07 18:44:37 +01:00
Philipinho	c9b1cad982	sync	2025-10-07 18:39:30 +01:00
Philip Okugbe	bf8cf6254f	feat: Typesense search driver (EE) (#1664 ) * feat: typesense driver (EE) - WIP * feat: typesense driver (EE) - WIP * feat: typesense * sync * fix	2025-10-07 17:34:32 +01:00
Philip Okugbe	3135030376	fix editor converter (#1647 )	2025-09-30 16:07:19 +01:00
Philip Okugbe	3fae41a5ca	fix: editor performance improvements (#1648 ) * Switch to useEditorState * change shouldRerenderOnTransaction to false	2025-09-30 14:04:01 +01:00
Philipinho	b50e25600a	sync	2025-09-28 16:44:33 +01:00
Philipinho	1f3b0c7276	cloud fix	2025-09-24 21:25:39 +01:00
Philipinho	3c4cab0d2a	v0.23.2	2025-09-18 18:00:28 +01:00
Philipinho	4de25a8b94	invalidate queries on space deletion	2025-09-18 15:52:53 +01:00
Philipinho	cf5bbb10df	fix import html processing	2025-09-18 15:34:13 +01:00
Philipinho	ac17521717	sync	2025-09-18 13:24:16 +01:00
Philip Okugbe	9ac180f719	fix: enhance page import (#1570 ) * change import process * fix processor * fix page name in notion import * preserve confluence table bg color * sync	2025-09-17 23:50:27 +01:00
Philipinho	46669fea56	(cloud) disable page sharing in trial mode	2025-09-17 23:36:13 +01:00
Pleasure1234	fe6ecdf1f1	fix: update combobox props in SpaceSelect component (#1564 ) Added 'keepMounted: false' and 'dropdownPadding: 0' to comboboxProps for improved dropdown behavior and appearance in the SpaceSelect sidebar component.	2025-09-17 13:36:12 +01:00
Philipinho	04ae1d7270	Allow lastColumnResizable in table	2025-09-15 22:34:29 +01:00
Philip Okugbe	1280f96f37	feat: implement space and workspace icons (#1558 ) * feat: implement space and workspace icons - Create reusable AvatarUploader component supporting avatars, space icons, and workspace icons - Add Sharp package for server-side image resizing and optimization - Create reusable AvatarUploader component supporting avatars, space icons, and workspace icons - Support removing icons * add workspace logo support - add upload loader - add white background to transparent image - other fixes and enhancements * dark mode * fixes * cleanup	2025-09-15 21:11:37 +01:00
Philipinho	61d1cf88a7	fix: reset file inputs after import	2025-09-15 12:52:31 +01:00
Philipinho	f413720e15	- sync - reinstantiate S3 client to fix file upload errors during import - delete import zip file after use	2025-09-14 03:00:23 +01:00
Philipinho	8e16ad952a	v0.23.1	2025-09-13 03:15:53 +01:00
Philip Okugbe	7ada3cb1f9	fix: page import task (#1551 ) * fix import * - fix notion importer - support notion page icon import - fix horizontal rule css - rename service file * sync * 3 mins delay	2025-09-13 03:14:59 +01:00
Philipinho	47c54174b3	sync	2025-09-11 00:50:15 +01:00
Philipinho	dc0650289d	sync	2025-09-04 15:07:01 -07:00