mirror of
https://github.com/docmost/docmost.git
synced 2026-05-08 15:23:07 +08:00
Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 4573dc1249 | |||
| f7a9004c73 |
+12
-14
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "client",
|
"name": "client",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "0.25.3",
|
"version": "0.25.2",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"build": "tsc && vite build",
|
"build": "tsc && vite build",
|
||||||
@@ -14,19 +14,18 @@
|
|||||||
"@docmost/editor-ext": "workspace:*",
|
"@docmost/editor-ext": "workspace:*",
|
||||||
"@emoji-mart/data": "^1.2.1",
|
"@emoji-mart/data": "^1.2.1",
|
||||||
"@emoji-mart/react": "^1.1.1",
|
"@emoji-mart/react": "^1.1.1",
|
||||||
"@excalidraw/excalidraw": "0.18.0-3a5ef40",
|
"@excalidraw/excalidraw": "0.18.0-c158187",
|
||||||
"@mantine/core": "^8.3.14",
|
"@mantine/core": "^8.3.12",
|
||||||
"@mantine/dates": "^8.3.14",
|
"@mantine/dates": "^8.3.12",
|
||||||
"@mantine/form": "^8.3.14",
|
"@mantine/form": "^8.3.12",
|
||||||
"@mantine/hooks": "^8.3.14",
|
"@mantine/hooks": "^8.3.12",
|
||||||
"@mantine/modals": "^8.3.14",
|
"@mantine/modals": "^8.3.12",
|
||||||
"@mantine/notifications": "^8.3.14",
|
"@mantine/notifications": "^8.3.12",
|
||||||
"@mantine/spotlight": "^8.3.14",
|
"@mantine/spotlight": "^8.3.12",
|
||||||
"@tabler/icons-react": "^3.36.1",
|
"@tabler/icons-react": "^3.36.1",
|
||||||
"@tanstack/react-query": "^5.90.17",
|
"@tanstack/react-query": "^5.90.17",
|
||||||
"alfaaz": "^1.1.0",
|
"alfaaz": "^1.1.0",
|
||||||
"axios": "^1.13.5",
|
"axios": "^1.13.2",
|
||||||
"blueimp-load-image": "^5.16.0",
|
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
"emoji-mart": "^5.6.0",
|
"emoji-mart": "^5.6.0",
|
||||||
"file-saver": "^2.0.5",
|
"file-saver": "^2.0.5",
|
||||||
@@ -42,7 +41,7 @@
|
|||||||
"mantine-form-zod-resolver": "^1.3.0",
|
"mantine-form-zod-resolver": "^1.3.0",
|
||||||
"mermaid": "^11.12.2",
|
"mermaid": "^11.12.2",
|
||||||
"mitt": "^3.0.1",
|
"mitt": "^3.0.1",
|
||||||
"posthog-js": "1.345.5",
|
"posthog-js": "^1.255.1",
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-arborist": "3.4.0",
|
"react-arborist": "3.4.0",
|
||||||
"react-clear-modal": "^2.0.17",
|
"react-clear-modal": "^2.0.17",
|
||||||
@@ -60,7 +59,6 @@
|
|||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@eslint/js": "^9.16.0",
|
"@eslint/js": "^9.16.0",
|
||||||
"@tanstack/eslint-plugin-query": "^5.62.1",
|
"@tanstack/eslint-plugin-query": "^5.62.1",
|
||||||
"@types/blueimp-load-image": "^5.16.0",
|
|
||||||
"@types/file-saver": "^2.0.7",
|
"@types/file-saver": "^2.0.7",
|
||||||
"@types/js-cookie": "^3.0.6",
|
"@types/js-cookie": "^3.0.6",
|
||||||
"@types/katex": "^0.16.7",
|
"@types/katex": "^0.16.7",
|
||||||
@@ -68,7 +66,7 @@
|
|||||||
"@types/react": "^18.3.12",
|
"@types/react": "^18.3.12",
|
||||||
"@types/react-dom": "^18.3.1",
|
"@types/react-dom": "^18.3.1",
|
||||||
"@vitejs/plugin-react": "^5.1.1",
|
"@vitejs/plugin-react": "^5.1.1",
|
||||||
"eslint": "^9.39.2",
|
"eslint": "^9.15.0",
|
||||||
"eslint-plugin-react": "^7.37.2",
|
"eslint-plugin-react": "^7.37.2",
|
||||||
"eslint-plugin-react-hooks": "^5.1.0",
|
"eslint-plugin-react-hooks": "^5.1.0",
|
||||||
"eslint-plugin-react-refresh": "^0.4.16",
|
"eslint-plugin-react-refresh": "^0.4.16",
|
||||||
|
|||||||
@@ -355,11 +355,6 @@
|
|||||||
"Insert current date": "Aktuelles Datum einfügen",
|
"Insert current date": "Aktuelles Datum einfügen",
|
||||||
"Draw and sketch excalidraw diagrams": "Excalidraw-Diagramme zeichnen und skizzieren",
|
"Draw and sketch excalidraw diagrams": "Excalidraw-Diagramme zeichnen und skizzieren",
|
||||||
"Multiple": "Mehrere",
|
"Multiple": "Mehrere",
|
||||||
"Turn into": "In verwandeln",
|
|
||||||
"Text align": "Text ausrichten",
|
|
||||||
"This page may have been deleted, moved, or you may not have access.": "This page may have been deleted, moved, or you may not have access.",
|
|
||||||
"Go to homepage": "Go to homepage",
|
|
||||||
"Pages you create will show up here.": "Pages you create will show up here.",
|
|
||||||
"Heading {{level}}": "Überschrift {{level}}",
|
"Heading {{level}}": "Überschrift {{level}}",
|
||||||
"Toggle title": "Titel umschalten",
|
"Toggle title": "Titel umschalten",
|
||||||
"Write anything. Enter \"/\" for commands": "Schreiben Sie irgendetwas. Geben Sie \"/\" für Befehle ein",
|
"Write anything. Enter \"/\" for commands": "Schreiben Sie irgendetwas. Geben Sie \"/\" für Befehle ein",
|
||||||
@@ -587,33 +582,13 @@
|
|||||||
"Ask AI": "KI fragen",
|
"Ask AI": "KI fragen",
|
||||||
"AI is thinking...": "Die KI überlegt...",
|
"AI is thinking...": "Die KI überlegt...",
|
||||||
"Ask a question...": "Fragen stellen...",
|
"Ask a question...": "Fragen stellen...",
|
||||||
"AI Answers": "KI-Antworten",
|
"AI-powered search (Ask AI)": "KI-gestützte Suche (KI fragen)",
|
||||||
"AI-powered search (AI Answers)": "KI-unterstützte Suche (KI-Antworten)",
|
|
||||||
"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.",
|
"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",
|
"Toggle AI search": "KI-Suche umschalten",
|
||||||
"Generative AI (Ask AI)": "Generative KI (KI fragen)",
|
|
||||||
"Enable AI-powered content generation in the editor. Allows users to generate, improve, translate and transform text.": "Aktivieren Sie die KI-unterstützte Inhaltserstellung im Editor. Ermöglicht Benutzern das Erzeugen, Verbessern, Übersetzen und Transformieren von Text.",
|
|
||||||
"Toggle generative AI": "Generative KI umschalten",
|
|
||||||
"Sources": "Quellen",
|
"Sources": "Quellen",
|
||||||
"AI Answers not available for attachments": "KI-Antworten sind für Anhänge nicht verfügbar",
|
"Ask AI not available for attachments": "KI fragen nicht für Anhänge verfügbar",
|
||||||
"No answer available": "Keine Antwort verfügbar",
|
"No answer available": "Keine Antwort verfügbar",
|
||||||
"Background color": "Hintergrundfarbe",
|
"Background color": "Hintergrundfarbe",
|
||||||
"Highlight color": "Hervorhebungsfarbe",
|
"Highlight color": "Hervorhebungsfarbe",
|
||||||
"Remove color": "Farbe entfernen",
|
"Remove color": "Farbe entfernen"
|
||||||
"Notifications": "Benachrichtigungen",
|
|
||||||
"No notifications": "Keine Benachrichtigungen",
|
|
||||||
"No unread notifications": "Keine ungelesenen Benachrichtigungen",
|
|
||||||
"All notifications": "Alle Benachrichtigungen",
|
|
||||||
"Unread only": "Nur ungelesen",
|
|
||||||
"Mark all as read": "Alle als gelesen markieren",
|
|
||||||
"Mark as read": "Als gelesen markieren",
|
|
||||||
"More options": "Weitere Optionen",
|
|
||||||
"mentioned you in a comment": "hat Sie in einem Kommentar erwähnt",
|
|
||||||
"commented on a page": "hat auf einer Seite kommentiert",
|
|
||||||
"resolved a comment": "hat einen Kommentar gelöst",
|
|
||||||
"mentioned you on a page": "hat Sie auf einer Seite erwähnt",
|
|
||||||
"Today": "Heute",
|
|
||||||
"Yesterday": "Gestern",
|
|
||||||
"This week": "Diese Woche",
|
|
||||||
"Older": "Älter"
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -355,11 +355,6 @@
|
|||||||
"Insert current date": "Insert current date",
|
"Insert current date": "Insert current date",
|
||||||
"Draw and sketch excalidraw diagrams": "Draw and sketch excalidraw diagrams",
|
"Draw and sketch excalidraw diagrams": "Draw and sketch excalidraw diagrams",
|
||||||
"Multiple": "Multiple",
|
"Multiple": "Multiple",
|
||||||
"Turn into": "Turn into",
|
|
||||||
"Text align": "Text align",
|
|
||||||
"This page may have been deleted, moved, or you may not have access.": "This page may have been deleted, moved, or you may not have access.",
|
|
||||||
"Go to homepage": "Go to homepage",
|
|
||||||
"Pages you create will show up here.": "Pages you create will show up here.",
|
|
||||||
"Heading {{level}}": "Heading {{level}}",
|
"Heading {{level}}": "Heading {{level}}",
|
||||||
"Toggle title": "Toggle title",
|
"Toggle title": "Toggle title",
|
||||||
"Write anything. Enter \"/\" for commands": "Write anything. Enter \"/\" for commands",
|
"Write anything. Enter \"/\" for commands": "Write anything. Enter \"/\" for commands",
|
||||||
@@ -587,33 +582,13 @@
|
|||||||
"Ask AI": "Ask AI",
|
"Ask AI": "Ask AI",
|
||||||
"AI is thinking...": "AI is thinking...",
|
"AI is thinking...": "AI is thinking...",
|
||||||
"Ask a question...": "Ask a question...",
|
"Ask a question...": "Ask a question...",
|
||||||
"AI Answers": "AI Answers",
|
"AI-powered search (Ask AI)": "AI-powered search (Ask AI)",
|
||||||
"AI-powered search (AI Answers)": "AI-powered search (AI Answers)",
|
|
||||||
"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.",
|
"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",
|
"Toggle AI search": "Toggle AI search",
|
||||||
"Generative AI (Ask AI)": "Generative AI (Ask AI)",
|
|
||||||
"Enable AI-powered content generation in the editor. Allows users to generate, improve, translate and transform text.": "Enable AI-powered content generation in the editor. Allows users to generate, improve, translate and transform text.",
|
|
||||||
"Toggle generative AI": "Toggle generative AI",
|
|
||||||
"Sources": "Sources",
|
"Sources": "Sources",
|
||||||
"AI Answers not available for attachments": "AI Answers not available for attachments",
|
"Ask AI not available for attachments": "Ask AI not available for attachments",
|
||||||
"No answer available": "No answer available",
|
"No answer available": "No answer available",
|
||||||
"Background color": "Background color",
|
"Background color": "Background color",
|
||||||
"Highlight color": "Highlight color",
|
"Highlight color": "Highlight color",
|
||||||
"Remove color": "Remove color",
|
"Remove color": "Remove color"
|
||||||
"Notifications": "Notifications",
|
|
||||||
"No notifications": "No notifications",
|
|
||||||
"No unread notifications": "No unread notifications",
|
|
||||||
"All notifications": "All notifications",
|
|
||||||
"Unread only": "Unread only",
|
|
||||||
"Mark all as read": "Mark all as read",
|
|
||||||
"Mark as read": "Mark as read",
|
|
||||||
"More options": "More options",
|
|
||||||
"mentioned you in a comment": "mentioned you in a comment",
|
|
||||||
"commented on a page": "commented on a page",
|
|
||||||
"resolved a comment": "resolved a comment",
|
|
||||||
"mentioned you on a page": "mentioned you on a page",
|
|
||||||
"Today": "Today",
|
|
||||||
"Yesterday": "Yesterday",
|
|
||||||
"This week": "This week",
|
|
||||||
"Older": "Older"
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -355,11 +355,6 @@
|
|||||||
"Insert current date": "Insertar fecha actual",
|
"Insert current date": "Insertar fecha actual",
|
||||||
"Draw and sketch excalidraw diagrams": "Dibujar y esbozar diagramas de Excalidraw",
|
"Draw and sketch excalidraw diagrams": "Dibujar y esbozar diagramas de Excalidraw",
|
||||||
"Multiple": "Múltiple",
|
"Multiple": "Múltiple",
|
||||||
"Turn into": "Convertir en",
|
|
||||||
"Text align": "Alineación del texto",
|
|
||||||
"This page may have been deleted, moved, or you may not have access.": "This page may have been deleted, moved, or you may not have access.",
|
|
||||||
"Go to homepage": "Go to homepage",
|
|
||||||
"Pages you create will show up here.": "Pages you create will show up here.",
|
|
||||||
"Heading {{level}}": "Encabezado {{level}}",
|
"Heading {{level}}": "Encabezado {{level}}",
|
||||||
"Toggle title": "Alternar título",
|
"Toggle title": "Alternar título",
|
||||||
"Write anything. Enter \"/\" for commands": "Escribe cualquier cosa. Ingresa \"/\" para comandos",
|
"Write anything. Enter \"/\" for commands": "Escribe cualquier cosa. Ingresa \"/\" para comandos",
|
||||||
@@ -587,33 +582,13 @@
|
|||||||
"Ask AI": "Preguntar a IA",
|
"Ask AI": "Preguntar a IA",
|
||||||
"AI is thinking...": "IA está pensando...",
|
"AI is thinking...": "IA está pensando...",
|
||||||
"Ask a question...": "Haz una pregunta...",
|
"Ask a question...": "Haz una pregunta...",
|
||||||
"AI Answers": "Respuestas de IA",
|
"AI-powered search (Ask AI)": "Búsqueda impulsada por IA (Preguntar a IA)",
|
||||||
"AI-powered search (AI Answers)": "Búsqueda impulsada por IA (Respuestas de 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.",
|
"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",
|
"Toggle AI search": "Alternar búsqueda de IA",
|
||||||
"Generative AI (Ask AI)": "IA generativa (Preguntar a la IA)",
|
|
||||||
"Enable AI-powered content generation in the editor. Allows users to generate, improve, translate and transform text.": "Habilitar la generación de contenido impulsada por IA en el editor. Permite a los usuarios generar, mejorar, traducir y transformar texto.",
|
|
||||||
"Toggle generative AI": "Activar IA generativa",
|
|
||||||
"Sources": "Fuentes",
|
"Sources": "Fuentes",
|
||||||
"AI Answers not available for attachments": "Respuestas de IA no disponibles para archivos adjuntos",
|
"Ask AI not available for attachments": "Preguntar a IA no está disponible para adjuntos",
|
||||||
"No answer available": "No hay respuesta disponible",
|
"No answer available": "No hay respuesta disponible",
|
||||||
"Background color": "Color de fondo",
|
"Background color": "Color de fondo",
|
||||||
"Highlight color": "Color de resaltado",
|
"Highlight color": "Color de resaltado",
|
||||||
"Remove color": "Eliminar color",
|
"Remove color": "Eliminar color"
|
||||||
"Notifications": "Notificaciones",
|
|
||||||
"No notifications": "Sin notificaciones",
|
|
||||||
"No unread notifications": "No hay notificaciones no leídas",
|
|
||||||
"All notifications": "Todas las notificaciones",
|
|
||||||
"Unread only": "Solo no leídas",
|
|
||||||
"Mark all as read": "Marcar todo como leído",
|
|
||||||
"Mark as read": "Marcar como leído",
|
|
||||||
"More options": "Más opciones",
|
|
||||||
"mentioned you in a comment": "te mencionó en un comentario",
|
|
||||||
"commented on a page": "comentó en una página",
|
|
||||||
"resolved a comment": "resolvió un comentario",
|
|
||||||
"mentioned you on a page": "te mencionó en una página",
|
|
||||||
"Today": "Hoy",
|
|
||||||
"Yesterday": "Ayer",
|
|
||||||
"This week": "Esta semana",
|
|
||||||
"Older": "Más antiguo"
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -355,11 +355,6 @@
|
|||||||
"Insert current date": "Insérer la date actuelle",
|
"Insert current date": "Insérer la date actuelle",
|
||||||
"Draw and sketch excalidraw diagrams": "Dessiner et esquisser des diagrammes Excalidraw",
|
"Draw and sketch excalidraw diagrams": "Dessiner et esquisser des diagrammes Excalidraw",
|
||||||
"Multiple": "Multiple",
|
"Multiple": "Multiple",
|
||||||
"Turn into": "Transformer en",
|
|
||||||
"Text align": "Alignement du texte",
|
|
||||||
"This page may have been deleted, moved, or you may not have access.": "This page may have been deleted, moved, or you may not have access.",
|
|
||||||
"Go to homepage": "Go to homepage",
|
|
||||||
"Pages you create will show up here.": "Pages you create will show up here.",
|
|
||||||
"Heading {{level}}": "Titre {{level}}",
|
"Heading {{level}}": "Titre {{level}}",
|
||||||
"Toggle title": "Basculer le titre",
|
"Toggle title": "Basculer le titre",
|
||||||
"Write anything. Enter \"/\" for commands": "Écrivez n'importe quoi. Entrez \"/\" pour les commandes",
|
"Write anything. Enter \"/\" for commands": "Écrivez n'importe quoi. Entrez \"/\" pour les commandes",
|
||||||
@@ -587,33 +582,13 @@
|
|||||||
"Ask AI": "Demander à l'IA",
|
"Ask AI": "Demander à l'IA",
|
||||||
"AI is thinking...": "L'IA réfléchit...",
|
"AI is thinking...": "L'IA réfléchit...",
|
||||||
"Ask a question...": "Posez une question...",
|
"Ask a question...": "Posez une question...",
|
||||||
"AI Answers": "Réponses IA",
|
"AI-powered search (Ask AI)": "Recherche assistée par l'IA (Demander à l'IA)",
|
||||||
"AI-powered search (AI Answers)": "Recherche propulsée par IA (Réponses 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.",
|
"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",
|
"Toggle AI search": "Basculer la recherche IA",
|
||||||
"Generative AI (Ask AI)": "IA générative (Demandez à l'IA)",
|
|
||||||
"Enable AI-powered content generation in the editor. Allows users to generate, improve, translate and transform text.": "Activer la génération de contenu assistée par IA dans l'éditeur. Permet aux utilisateurs de générer, améliorer, traduire et transformer du texte.",
|
|
||||||
"Toggle generative AI": "Activer/désactiver l'IA générative",
|
|
||||||
"Sources": "Sources",
|
"Sources": "Sources",
|
||||||
"AI Answers not available for attachments": "Réponses IA non disponibles pour les pièces jointes",
|
"Ask AI not available for attachments": "Demande à l'IA non disponible pour les pièces jointes",
|
||||||
"No answer available": "Pas de réponse disponible",
|
"No answer available": "Pas de réponse disponible",
|
||||||
"Background color": "Couleur de fond",
|
"Background color": "Couleur de fond",
|
||||||
"Highlight color": "Couleur de surbrillance",
|
"Highlight color": "Couleur de surbrillance",
|
||||||
"Remove color": "Supprimer la couleur",
|
"Remove color": "Supprimer la couleur"
|
||||||
"Notifications": "Notifications",
|
|
||||||
"No notifications": "Aucune notification",
|
|
||||||
"No unread notifications": "Aucune notification non lue",
|
|
||||||
"All notifications": "Toutes les notifications",
|
|
||||||
"Unread only": "Non lues uniquement",
|
|
||||||
"Mark all as read": "Tout marquer comme lu",
|
|
||||||
"Mark as read": "Marquer comme lu",
|
|
||||||
"More options": "Plus d'options",
|
|
||||||
"mentioned you in a comment": "vous a mentionné dans un commentaire",
|
|
||||||
"commented on a page": "a commenté une page",
|
|
||||||
"resolved a comment": "a résolu un commentaire",
|
|
||||||
"mentioned you on a page": "vous a mentionné sur une page",
|
|
||||||
"Today": "Aujourd'hui",
|
|
||||||
"Yesterday": "Hier",
|
|
||||||
"This week": "Cette semaine",
|
|
||||||
"Older": "Plus ancien"
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -355,11 +355,6 @@
|
|||||||
"Insert current date": "Inserisci la data corrente",
|
"Insert current date": "Inserisci la data corrente",
|
||||||
"Draw and sketch excalidraw diagrams": "Disegna e schizza diagrammi excalidraw",
|
"Draw and sketch excalidraw diagrams": "Disegna e schizza diagrammi excalidraw",
|
||||||
"Multiple": "Multiplo",
|
"Multiple": "Multiplo",
|
||||||
"Turn into": "Trasforma in",
|
|
||||||
"Text align": "Allinea testo",
|
|
||||||
"This page may have been deleted, moved, or you may not have access.": "This page may have been deleted, moved, or you may not have access.",
|
|
||||||
"Go to homepage": "Go to homepage",
|
|
||||||
"Pages you create will show up here.": "Pages you create will show up here.",
|
|
||||||
"Heading {{level}}": "Intestazione {{level}}",
|
"Heading {{level}}": "Intestazione {{level}}",
|
||||||
"Toggle title": "Attiva/disattiva titolo",
|
"Toggle title": "Attiva/disattiva titolo",
|
||||||
"Write anything. Enter \"/\" for commands": "Scrivi qualcosa. Digita \"/\" per i comandi",
|
"Write anything. Enter \"/\" for commands": "Scrivi qualcosa. Digita \"/\" per i comandi",
|
||||||
@@ -587,33 +582,13 @@
|
|||||||
"Ask AI": "Chiedi all'AI",
|
"Ask AI": "Chiedi all'AI",
|
||||||
"AI is thinking...": "L'AI sta pensando...",
|
"AI is thinking...": "L'AI sta pensando...",
|
||||||
"Ask a question...": "Fai una domanda...",
|
"Ask a question...": "Fai una domanda...",
|
||||||
"AI Answers": "Risposte AI",
|
"AI-powered search (Ask AI)": "Ricerca potenziata dall'AI (Chiedi all'AI)",
|
||||||
"AI-powered search (AI Answers)": "Ricerca con AI (Risposte 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.",
|
"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",
|
"Toggle AI search": "Attiva/disattiva ricerca AI",
|
||||||
"Generative AI (Ask AI)": "AI generativa (Chiedi AI)",
|
|
||||||
"Enable AI-powered content generation in the editor. Allows users to generate, improve, translate and transform text.": "Abilita la generazione di contenuti con AI nell'editor. Consente agli utenti di generare, migliorare, tradurre e trasformare il testo.",
|
|
||||||
"Toggle generative AI": "Attiva/Disattiva AI generativa",
|
|
||||||
"Sources": "Fonti",
|
"Sources": "Fonti",
|
||||||
"AI Answers not available for attachments": "Risposte AI non disponibili per gli allegati",
|
"Ask AI not available for attachments": "Chiedere all'AI non è disponibile per gli allegati",
|
||||||
"No answer available": "Nessuna risposta disponibile",
|
"No answer available": "Nessuna risposta disponibile",
|
||||||
"Background color": "Colore di sfondo",
|
"Background color": "Colore di sfondo",
|
||||||
"Highlight color": "Colore evidenziato",
|
"Highlight color": "Colore evidenziato",
|
||||||
"Remove color": "Rimuovi colore",
|
"Remove color": "Rimuovi colore"
|
||||||
"Notifications": "Notifiche",
|
|
||||||
"No notifications": "Nessuna notifica",
|
|
||||||
"No unread notifications": "Nessuna notifica non letta",
|
|
||||||
"All notifications": "Tutte le notifiche",
|
|
||||||
"Unread only": "Solo non lette",
|
|
||||||
"Mark all as read": "Segna tutto come letto",
|
|
||||||
"Mark as read": "Segna come letto",
|
|
||||||
"More options": "Altre opzioni",
|
|
||||||
"mentioned you in a comment": "ti ha menzionato in un commento",
|
|
||||||
"commented on a page": "ha commentato una pagina",
|
|
||||||
"resolved a comment": "ha risolto un commento",
|
|
||||||
"mentioned you on a page": "ti ha menzionato in una pagina",
|
|
||||||
"Today": "Oggi",
|
|
||||||
"Yesterday": "Ieri",
|
|
||||||
"This week": "Questa settimana",
|
|
||||||
"Older": "Più vecchie"
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -355,11 +355,6 @@
|
|||||||
"Insert current date": "現在の日付を挿入します",
|
"Insert current date": "現在の日付を挿入します",
|
||||||
"Draw and sketch excalidraw diagrams": "Excalidraw 図を挿入します",
|
"Draw and sketch excalidraw diagrams": "Excalidraw 図を挿入します",
|
||||||
"Multiple": "複数",
|
"Multiple": "複数",
|
||||||
"Turn into": "変換する",
|
|
||||||
"Text align": "テキストの配置",
|
|
||||||
"This page may have been deleted, moved, or you may not have access.": "This page may have been deleted, moved, or you may not have access.",
|
|
||||||
"Go to homepage": "Go to homepage",
|
|
||||||
"Pages you create will show up here.": "Pages you create will show up here.",
|
|
||||||
"Heading {{level}}": "見出し {{level}}",
|
"Heading {{level}}": "見出し {{level}}",
|
||||||
"Toggle title": "タイトルの表示/非表示を切り替える",
|
"Toggle title": "タイトルの表示/非表示を切り替える",
|
||||||
"Write anything. Enter \"/\" for commands": "文字を入力するか、「/」でコマンドを呼び出します",
|
"Write anything. Enter \"/\" for commands": "文字を入力するか、「/」でコマンドを呼び出します",
|
||||||
@@ -587,33 +582,13 @@
|
|||||||
"Ask AI": "AIに質問する",
|
"Ask AI": "AIに質問する",
|
||||||
"AI is thinking...": "AIが考え中...",
|
"AI is thinking...": "AIが考え中...",
|
||||||
"Ask a question...": "質問を入力...",
|
"Ask a question...": "質問を入力...",
|
||||||
"AI Answers": "AI回答",
|
"AI-powered search (Ask AI)": "AIによる検索(AIに質問)",
|
||||||
"AI-powered search (AI Answers)": "AI搭載検索 (AI回答)",
|
|
||||||
"AI search uses vector embeddings to provide semantic search capabilities across your workspace content.": "AI検索はベクター埋め込みを使用してワークスペース全体の意味検索を実現します",
|
"AI search uses vector embeddings to provide semantic search capabilities across your workspace content.": "AI検索はベクター埋め込みを使用してワークスペース全体の意味検索を実現します",
|
||||||
"Toggle AI search": "AI検索を切り替え",
|
"Toggle AI search": "AI検索を切り替え",
|
||||||
"Generative AI (Ask AI)": "生成AI (Ask AI)",
|
|
||||||
"Enable AI-powered content generation in the editor. Allows users to generate, improve, translate and transform text.": "エディターでAIを活用したコンテンツ生成を有効にします。ユーザーがテキストの生成、改善、翻訳、および変換を行うことができます。",
|
|
||||||
"Toggle generative AI": "生成AIを切り替える",
|
|
||||||
"Sources": "ソース",
|
"Sources": "ソース",
|
||||||
"AI Answers not available for attachments": "添付ファイルにはAI回答を利用できません",
|
"Ask AI not available for attachments": "添付ファイルにはAI質問は利用できません",
|
||||||
"No answer available": "回答がありません",
|
"No answer available": "回答がありません",
|
||||||
"Background color": "背景色",
|
"Background color": "背景色",
|
||||||
"Highlight color": "ハイライト色",
|
"Highlight color": "ハイライト色",
|
||||||
"Remove color": "色を削除",
|
"Remove color": "色を削除"
|
||||||
"Notifications": "通知",
|
|
||||||
"No notifications": "通知なし",
|
|
||||||
"No unread notifications": "未読の通知はありません",
|
|
||||||
"All notifications": "すべての通知",
|
|
||||||
"Unread only": "未読のみ",
|
|
||||||
"Mark all as read": "すべてを既読にする",
|
|
||||||
"Mark as read": "既読にする",
|
|
||||||
"More options": "その他のオプション",
|
|
||||||
"mentioned you in a comment": "コメントであなたに言及しました",
|
|
||||||
"commented on a page": "ページにコメントしました",
|
|
||||||
"resolved a comment": "コメントを解決しました",
|
|
||||||
"mentioned you on a page": "ページ上であなたに言及しました",
|
|
||||||
"Today": "今日",
|
|
||||||
"Yesterday": "昨日",
|
|
||||||
"This week": "今週",
|
|
||||||
"Older": "以前のもの"
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -355,11 +355,6 @@
|
|||||||
"Insert current date": "현재 날짜 삽입",
|
"Insert current date": "현재 날짜 삽입",
|
||||||
"Draw and sketch excalidraw diagrams": "Excalidraw diagram 그리기 및 스케치",
|
"Draw and sketch excalidraw diagrams": "Excalidraw diagram 그리기 및 스케치",
|
||||||
"Multiple": "복제",
|
"Multiple": "복제",
|
||||||
"Turn into": "변경하기",
|
|
||||||
"Text align": "텍스트 정렬",
|
|
||||||
"This page may have been deleted, moved, or you may not have access.": "This page may have been deleted, moved, or you may not have access.",
|
|
||||||
"Go to homepage": "Go to homepage",
|
|
||||||
"Pages you create will show up here.": "Pages you create will show up here.",
|
|
||||||
"Heading {{level}}": "제목 {{level}}",
|
"Heading {{level}}": "제목 {{level}}",
|
||||||
"Toggle title": "제목 토글",
|
"Toggle title": "제목 토글",
|
||||||
"Write anything. Enter \"/\" for commands": "아무거나 입력하세요. 명령어를 사용하려면 \"/\"를 입력하세요",
|
"Write anything. Enter \"/\" for commands": "아무거나 입력하세요. 명령어를 사용하려면 \"/\"를 입력하세요",
|
||||||
@@ -587,33 +582,13 @@
|
|||||||
"Ask AI": "AI에게 묻기",
|
"Ask AI": "AI에게 묻기",
|
||||||
"AI is thinking...": "AI가 생각 중입니다...",
|
"AI is thinking...": "AI가 생각 중입니다...",
|
||||||
"Ask a question...": "질문하세요...",
|
"Ask a question...": "질문하세요...",
|
||||||
"AI Answers": "AI 답변",
|
"AI-powered search (Ask AI)": "AI 지원 검색 (AI에게 묻기)",
|
||||||
"AI-powered search (AI Answers)": "AI 구동 검색 (AI 답변)",
|
|
||||||
"AI search uses vector embeddings to provide semantic search capabilities across your workspace content.": "AI 검색은 벡터 임베딩을 사용하여 작업공간 콘텐츠에 대한 의미 검색 기능을 제공합니다.",
|
"AI search uses vector embeddings to provide semantic search capabilities across your workspace content.": "AI 검색은 벡터 임베딩을 사용하여 작업공간 콘텐츠에 대한 의미 검색 기능을 제공합니다.",
|
||||||
"Toggle AI search": "AI 검색 전환",
|
"Toggle AI search": "AI 검색 전환",
|
||||||
"Generative AI (Ask AI)": "생성 AI (Ask AI)",
|
|
||||||
"Enable AI-powered content generation in the editor. Allows users to generate, improve, translate and transform text.": "편집기에서 AI 구동 콘텐츠 생성을 활성화합니다. 사용자가 텍스트를 생성, 개선, 번역 및 변환할 수 있습니다.",
|
|
||||||
"Toggle generative AI": "생성 AI 토글",
|
|
||||||
"Sources": "출처",
|
"Sources": "출처",
|
||||||
"AI Answers not available for attachments": "첨부 파일에 대해 AI 답변을 사용할 수 없습니다",
|
"Ask AI not available for attachments": "AI에게 묻기 기능은 첨부 파일에 대해 사용할 수 없습니다",
|
||||||
"No answer available": "답변을 제공할 수 없습니다",
|
"No answer available": "답변을 제공할 수 없습니다",
|
||||||
"Background color": "배경 색",
|
"Background color": "배경 색",
|
||||||
"Highlight color": "강조 색",
|
"Highlight color": "강조 색",
|
||||||
"Remove color": "색 제거",
|
"Remove color": "색 제거"
|
||||||
"Notifications": "알림",
|
|
||||||
"No notifications": "알림 없음",
|
|
||||||
"No unread notifications": "읽지 않은 알림 없음",
|
|
||||||
"All notifications": "모든 알림",
|
|
||||||
"Unread only": "읽지 않음만",
|
|
||||||
"Mark all as read": "모두 읽음으로 표시",
|
|
||||||
"Mark as read": "읽음으로 표시",
|
|
||||||
"More options": "추가 옵션",
|
|
||||||
"mentioned you in a comment": "댓글에서 당신을 언급했습니다",
|
|
||||||
"commented on a page": "페이지에 댓글을 달았습니다",
|
|
||||||
"resolved a comment": "댓글을 해결했습니다",
|
|
||||||
"mentioned you on a page": "페이지에서 당신을 언급했습니다",
|
|
||||||
"Today": "오늘",
|
|
||||||
"Yesterday": "어제",
|
|
||||||
"This week": "이번 주",
|
|
||||||
"Older": "이전"
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -355,11 +355,6 @@
|
|||||||
"Insert current date": "Huidige datum invoeren",
|
"Insert current date": "Huidige datum invoeren",
|
||||||
"Draw and sketch excalidraw diagrams": "Teken en schets excalidraw diagrammen",
|
"Draw and sketch excalidraw diagrams": "Teken en schets excalidraw diagrammen",
|
||||||
"Multiple": "Meerdere",
|
"Multiple": "Meerdere",
|
||||||
"Turn into": "Omzetten naar",
|
|
||||||
"Text align": "Tekstuitlijning",
|
|
||||||
"This page may have been deleted, moved, or you may not have access.": "This page may have been deleted, moved, or you may not have access.",
|
|
||||||
"Go to homepage": "Go to homepage",
|
|
||||||
"Pages you create will show up here.": "Pages you create will show up here.",
|
|
||||||
"Heading {{level}}": "Kop {{level}}",
|
"Heading {{level}}": "Kop {{level}}",
|
||||||
"Toggle title": "Schakel titel in/uit",
|
"Toggle title": "Schakel titel in/uit",
|
||||||
"Write anything. Enter \"/\" for commands": "Schrijf iets. Voer \"/\" in voor commando's",
|
"Write anything. Enter \"/\" for commands": "Schrijf iets. Voer \"/\" in voor commando's",
|
||||||
@@ -587,33 +582,13 @@
|
|||||||
"Ask AI": "Vraag AI",
|
"Ask AI": "Vraag AI",
|
||||||
"AI is thinking...": "AI is aan het nadenken...",
|
"AI is thinking...": "AI is aan het nadenken...",
|
||||||
"Ask a question...": "Stel een vraag...",
|
"Ask a question...": "Stel een vraag...",
|
||||||
"AI Answers": "AI Antwoorden",
|
"AI-powered search (Ask AI)": "AI-ondersteunde zoekopdracht (Vraag AI)",
|
||||||
"AI-powered search (AI Answers)": "AI-gestuurde zoekopdracht (AI Antwoorden)",
|
|
||||||
"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.",
|
"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",
|
"Toggle AI search": "Schakel AI-zoekopdracht in/uit",
|
||||||
"Generative AI (Ask AI)": "Generatieve AI (Vraag het AI)",
|
|
||||||
"Enable AI-powered content generation in the editor. Allows users to generate, improve, translate and transform text.": "Schakel AI-gestuurde inhoudsgeneratie in de editor in. Hiermee kunnen gebruikers tekst genereren, verbeteren, vertalen en transformeren.",
|
|
||||||
"Toggle generative AI": "Generatieve AI schakelen",
|
|
||||||
"Sources": "Bronnen",
|
"Sources": "Bronnen",
|
||||||
"AI Answers not available for attachments": "AI Antwoorden niet beschikbaar voor bijlagen",
|
"Ask AI not available for attachments": "Vraag AI is niet beschikbaar voor bijlages",
|
||||||
"No answer available": "Geen antwoord beschikbaar",
|
"No answer available": "Geen antwoord beschikbaar",
|
||||||
"Background color": "Achtergrondkleur",
|
"Background color": "Achtergrondkleur",
|
||||||
"Highlight color": "Markeerkleur",
|
"Highlight color": "Markeerkleur",
|
||||||
"Remove color": "Kleur verwijderen",
|
"Remove color": "Kleur verwijderen"
|
||||||
"Notifications": "Meldingen",
|
|
||||||
"No notifications": "Geen meldingen",
|
|
||||||
"No unread notifications": "Geen ongelezen meldingen",
|
|
||||||
"All notifications": "Alle meldingen",
|
|
||||||
"Unread only": "Alleen ongelezen",
|
|
||||||
"Mark all as read": "Markeer alles als gelezen",
|
|
||||||
"Mark as read": "Markeer als gelezen",
|
|
||||||
"More options": "Meer opties",
|
|
||||||
"mentioned you in a comment": "noemde je in een reactie",
|
|
||||||
"commented on a page": "reageerde op een pagina",
|
|
||||||
"resolved a comment": "heeft een opmerking opgelost",
|
|
||||||
"mentioned you on a page": "noemde je op een pagina",
|
|
||||||
"Today": "Vandaag",
|
|
||||||
"Yesterday": "Gisteren",
|
|
||||||
"This week": "Deze week",
|
|
||||||
"Older": "Ouder"
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -355,11 +355,6 @@
|
|||||||
"Insert current date": "Insira a data atual",
|
"Insert current date": "Insira a data atual",
|
||||||
"Draw and sketch excalidraw diagrams": "Desenhe e esboce diagramas Excalidraw",
|
"Draw and sketch excalidraw diagrams": "Desenhe e esboce diagramas Excalidraw",
|
||||||
"Multiple": "Múltiplo",
|
"Multiple": "Múltiplo",
|
||||||
"Turn into": "Transformar em",
|
|
||||||
"Text align": "Alinhar texto",
|
|
||||||
"This page may have been deleted, moved, or you may not have access.": "This page may have been deleted, moved, or you may not have access.",
|
|
||||||
"Go to homepage": "Go to homepage",
|
|
||||||
"Pages you create will show up here.": "Pages you create will show up here.",
|
|
||||||
"Heading {{level}}": "Título {{level}}",
|
"Heading {{level}}": "Título {{level}}",
|
||||||
"Toggle title": "Alternar título",
|
"Toggle title": "Alternar título",
|
||||||
"Write anything. Enter \"/\" for commands": "Escreva qualquer coisa. Digite \"/\" para comandos",
|
"Write anything. Enter \"/\" for commands": "Escreva qualquer coisa. Digite \"/\" para comandos",
|
||||||
@@ -587,33 +582,13 @@
|
|||||||
"Ask AI": "Pergunte à IA",
|
"Ask AI": "Pergunte à IA",
|
||||||
"AI is thinking...": "IA está pensando...",
|
"AI is thinking...": "IA está pensando...",
|
||||||
"Ask a question...": "Faça uma pergunta...",
|
"Ask a question...": "Faça uma pergunta...",
|
||||||
"AI Answers": "Respostas de IA",
|
"AI-powered search (Ask AI)": "Pesquisa com IA (Pergunte à IA)",
|
||||||
"AI-powered search (AI Answers)": "Pesquisa com IA (Respostas de 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.",
|
"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",
|
"Toggle AI search": "Alternar pesquisa de IA",
|
||||||
"Generative AI (Ask AI)": "IA generativa (Perguntar à IA)",
|
|
||||||
"Enable AI-powered content generation in the editor. Allows users to generate, improve, translate and transform text.": "Habilitar geração de conteúdo com IA no editor. Permite aos usuários gerar, melhorar, traduzir e transformar texto.",
|
|
||||||
"Toggle generative AI": "Alternar IA generativa",
|
|
||||||
"Sources": "Fontes",
|
"Sources": "Fontes",
|
||||||
"AI Answers not available for attachments": "Respostas de IA não disponíveis para anexos",
|
"Ask AI not available for attachments": "Perguntar à IA não está disponível para anexos",
|
||||||
"No answer available": "Nenhuma resposta disponível",
|
"No answer available": "Nenhuma resposta disponível",
|
||||||
"Background color": "Cor de fundo",
|
"Background color": "Cor de fundo",
|
||||||
"Highlight color": "Cor de destaque",
|
"Highlight color": "Cor de destaque",
|
||||||
"Remove color": "Remover cor",
|
"Remove color": "Remover cor"
|
||||||
"Notifications": "Notificações",
|
|
||||||
"No notifications": "Sem notificações",
|
|
||||||
"No unread notifications": "Sem notificações não lidas",
|
|
||||||
"All notifications": "Todas as notificações",
|
|
||||||
"Unread only": "Somente não lidas",
|
|
||||||
"Mark all as read": "Marcar todas como lidas",
|
|
||||||
"Mark as read": "Marcar como lida",
|
|
||||||
"More options": "Mais opções",
|
|
||||||
"mentioned you in a comment": "mencionou você em um comentário",
|
|
||||||
"commented on a page": "comentou em uma página",
|
|
||||||
"resolved a comment": "resolveu um comentário",
|
|
||||||
"mentioned you on a page": "mencionou você em uma página",
|
|
||||||
"Today": "Hoje",
|
|
||||||
"Yesterday": "Ontem",
|
|
||||||
"This week": "Esta semana",
|
|
||||||
"Older": "Mais antigo"
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -355,11 +355,6 @@
|
|||||||
"Insert current date": "Вставить текущую дату",
|
"Insert current date": "Вставить текущую дату",
|
||||||
"Draw and sketch excalidraw diagrams": "Вставить и рисовать диаграммы Excalidraw",
|
"Draw and sketch excalidraw diagrams": "Вставить и рисовать диаграммы Excalidraw",
|
||||||
"Multiple": "Несколько",
|
"Multiple": "Несколько",
|
||||||
"Turn into": "Преобразовать в",
|
|
||||||
"Text align": "Выравнивание текста",
|
|
||||||
"This page may have been deleted, moved, or you may not have access.": "This page may have been deleted, moved, or you may not have access.",
|
|
||||||
"Go to homepage": "Go to homepage",
|
|
||||||
"Pages you create will show up here.": "Pages you create will show up here.",
|
|
||||||
"Heading {{level}}": "Заголовок {{level}}",
|
"Heading {{level}}": "Заголовок {{level}}",
|
||||||
"Toggle title": "Переключить заголовок",
|
"Toggle title": "Переключить заголовок",
|
||||||
"Write anything. Enter \"/\" for commands": "Начните писать. Введите \"/\" для списка команд",
|
"Write anything. Enter \"/\" for commands": "Начните писать. Введите \"/\" для списка команд",
|
||||||
@@ -587,33 +582,13 @@
|
|||||||
"Ask AI": "Спросить ИИ",
|
"Ask AI": "Спросить ИИ",
|
||||||
"AI is thinking...": "ИИ обрабатывает запрос...",
|
"AI is thinking...": "ИИ обрабатывает запрос...",
|
||||||
"Ask a question...": "Задайте вопрос...",
|
"Ask a question...": "Задайте вопрос...",
|
||||||
"AI Answers": "Ответы ИИ",
|
"AI-powered search (Ask AI)": "Поиск на базе ИИ (Спросить ИИ)",
|
||||||
"AI-powered search (AI Answers)": "Поиск на базе ИИ (Ответы ИИ)",
|
|
||||||
"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": "Переключить поиск ИИ",
|
||||||
"Generative AI (Ask AI)": "Генеративный ИИ (Спросить ИИ)",
|
|
||||||
"Enable AI-powered content generation in the editor. Allows users to generate, improve, translate and transform text.": "Включите создание контента на базе ИИ в редакторе. Позволяет пользователям генерировать, улучшать, переводить и преобразовывать текст.",
|
|
||||||
"Toggle generative AI": "Переключить генеративный ИИ",
|
|
||||||
"Sources": "Источники",
|
"Sources": "Источники",
|
||||||
"AI Answers 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": "Удалить цвет"
|
||||||
"Notifications": "Уведомления",
|
|
||||||
"No notifications": "Нет уведомлений",
|
|
||||||
"No unread notifications": "Нет непрочитанных уведомлений",
|
|
||||||
"All notifications": "Все уведомления",
|
|
||||||
"Unread only": "Только непрочитанные",
|
|
||||||
"Mark all as read": "Отметить все как прочитанные",
|
|
||||||
"Mark as read": "Отметить как прочитанное",
|
|
||||||
"More options": "Больше возможностей",
|
|
||||||
"mentioned you in a comment": "упомянул вас в комментарии",
|
|
||||||
"commented on a page": "прокомментировал на странице",
|
|
||||||
"resolved a comment": "разрешил комментарий",
|
|
||||||
"mentioned you on a page": "упомянул вас на странице",
|
|
||||||
"Today": "Сегодня",
|
|
||||||
"Yesterday": "Вчера",
|
|
||||||
"This week": "На этой неделе",
|
|
||||||
"Older": "Старше"
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -355,11 +355,6 @@
|
|||||||
"Insert current date": "Вставити поточну дату",
|
"Insert current date": "Вставити поточну дату",
|
||||||
"Draw and sketch excalidraw diagrams": "Вставити та малювати діаграми Excalidraw",
|
"Draw and sketch excalidraw diagrams": "Вставити та малювати діаграми Excalidraw",
|
||||||
"Multiple": "Декілька",
|
"Multiple": "Декілька",
|
||||||
"Turn into": "Перетворити",
|
|
||||||
"Text align": "Вирівнювання тексту",
|
|
||||||
"This page may have been deleted, moved, or you may not have access.": "This page may have been deleted, moved, or you may not have access.",
|
|
||||||
"Go to homepage": "Go to homepage",
|
|
||||||
"Pages you create will show up here.": "Pages you create will show up here.",
|
|
||||||
"Heading {{level}}": "Заголовок {{level}}",
|
"Heading {{level}}": "Заголовок {{level}}",
|
||||||
"Toggle title": "Перемкнути заголовок",
|
"Toggle title": "Перемкнути заголовок",
|
||||||
"Write anything. Enter \"/\" for commands": "Почніть писати. Введіть \"/\" для списку команд",
|
"Write anything. Enter \"/\" for commands": "Почніть писати. Введіть \"/\" для списку команд",
|
||||||
@@ -587,33 +582,13 @@
|
|||||||
"Ask AI": "Запитати ШІ",
|
"Ask AI": "Запитати ШІ",
|
||||||
"AI is thinking...": "ШІ думає...",
|
"AI is thinking...": "ШІ думає...",
|
||||||
"Ask a question...": "Задайте питання...",
|
"Ask a question...": "Задайте питання...",
|
||||||
"AI Answers": "Відповіді ШІ",
|
"AI-powered search (Ask AI)": "Пошук на базі ШІ (Запитати ШІ)",
|
||||||
"AI-powered search (AI Answers)": "Пошук на базі ШІ (Відповіді ШІ)",
|
|
||||||
"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": "Переключити пошук з ШІ",
|
||||||
"Generative AI (Ask AI)": "Генеративний ШІ (Запитати ШІ)",
|
|
||||||
"Enable AI-powered content generation in the editor. Allows users to generate, improve, translate and transform text.": "Увімкнути генерацію контенту за допомогою ШІ в редакторі. Дозволяє користувачам генерувати, покращувати, перекладати та трансформувати текст.",
|
|
||||||
"Toggle generative AI": "Переключити генеративний ШІ",
|
|
||||||
"Sources": "Джерела",
|
"Sources": "Джерела",
|
||||||
"AI Answers 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": "Видалити колір"
|
||||||
"Notifications": "Сповіщення",
|
|
||||||
"No notifications": "Немає сповіщень",
|
|
||||||
"No unread notifications": "Немає непрочитаних сповіщень",
|
|
||||||
"All notifications": "Усі сповіщення",
|
|
||||||
"Unread only": "Тільки непрочитані",
|
|
||||||
"Mark all as read": "Позначити все як прочитане",
|
|
||||||
"Mark as read": "Позначити як прочитане",
|
|
||||||
"More options": "Більше опцій",
|
|
||||||
"mentioned you in a comment": "згадали вас у коментарі",
|
|
||||||
"commented on a page": "прокоментували на сторінці",
|
|
||||||
"resolved a comment": "вирішили коментар",
|
|
||||||
"mentioned you on a page": "згадали вас на сторінці",
|
|
||||||
"Today": "Сьогодні",
|
|
||||||
"Yesterday": "Вчора",
|
|
||||||
"This week": "Цього тижня",
|
|
||||||
"Older": "Старіші"
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -355,11 +355,6 @@
|
|||||||
"Insert current date": "插入当前日期",
|
"Insert current date": "插入当前日期",
|
||||||
"Draw and sketch excalidraw diagrams": "绘制 Excalidraw 图表",
|
"Draw and sketch excalidraw diagrams": "绘制 Excalidraw 图表",
|
||||||
"Multiple": "多个",
|
"Multiple": "多个",
|
||||||
"Turn into": "变成",
|
|
||||||
"Text align": "文本对齐",
|
|
||||||
"This page may have been deleted, moved, or you may not have access.": "This page may have been deleted, moved, or you may not have access.",
|
|
||||||
"Go to homepage": "Go to homepage",
|
|
||||||
"Pages you create will show up here.": "Pages you create will show up here.",
|
|
||||||
"Heading {{level}}": "{{level}} 级标题",
|
"Heading {{level}}": "{{level}} 级标题",
|
||||||
"Toggle title": "切换标题",
|
"Toggle title": "切换标题",
|
||||||
"Write anything. Enter \"/\" for commands": "开始编写内容,输入 \"/\" 以使用指令",
|
"Write anything. Enter \"/\" for commands": "开始编写内容,输入 \"/\" 以使用指令",
|
||||||
@@ -587,33 +582,13 @@
|
|||||||
"Ask AI": "询问AI",
|
"Ask AI": "询问AI",
|
||||||
"AI is thinking...": "AI正在思考...",
|
"AI is thinking...": "AI正在思考...",
|
||||||
"Ask a question...": "提问...",
|
"Ask a question...": "提问...",
|
||||||
"AI Answers": "AI答案",
|
"AI-powered search (Ask AI)": "AI驱动的搜索(询问AI)",
|
||||||
"AI-powered search (AI Answers)": "AI驱动的搜索 (AI答案)",
|
|
||||||
"AI search uses vector embeddings to provide semantic search capabilities across your workspace content.": "AI搜索使用向量嵌入提供跨工作空间内容的语义搜索功能。",
|
"AI search uses vector embeddings to provide semantic search capabilities across your workspace content.": "AI搜索使用向量嵌入提供跨工作空间内容的语义搜索功能。",
|
||||||
"Toggle AI search": "切换AI搜索",
|
"Toggle AI search": "切换AI搜索",
|
||||||
"Generative AI (Ask AI)": "生成型AI (询问AI)",
|
|
||||||
"Enable AI-powered content generation in the editor. Allows users to generate, improve, translate and transform text.": "在编辑器中启用AI驱动的内容生成。允许用户生成、改进、翻译和转换文本。",
|
|
||||||
"Toggle generative AI": "切换生成型AI",
|
|
||||||
"Sources": "来源",
|
"Sources": "来源",
|
||||||
"AI Answers not available for attachments": "AI答案不适用于附件",
|
"Ask AI not available for attachments": "附件不支持询问AI",
|
||||||
"No answer available": "无可用答案",
|
"No answer available": "无可用答案",
|
||||||
"Background color": "背景颜色",
|
"Background color": "背景颜色",
|
||||||
"Highlight color": "突出显示颜色",
|
"Highlight color": "突出显示颜色",
|
||||||
"Remove color": "移除颜色",
|
"Remove color": "移除颜色"
|
||||||
"Notifications": "通知",
|
|
||||||
"No notifications": "没有通知",
|
|
||||||
"No unread notifications": "没有未读通知",
|
|
||||||
"All notifications": "所有通知",
|
|
||||||
"Unread only": "仅未读",
|
|
||||||
"Mark all as read": "标记所有为已读",
|
|
||||||
"Mark as read": "标记为已读",
|
|
||||||
"More options": "更多选项",
|
|
||||||
"mentioned you in a comment": "在评论中提到你",
|
|
||||||
"commented on a page": "在页面上评论",
|
|
||||||
"resolved a comment": "解决了一个评论",
|
|
||||||
"mentioned you on a page": "在页面上提到你",
|
|
||||||
"Today": "今天",
|
|
||||||
"Yesterday": "昨天",
|
|
||||||
"This week": "本周",
|
|
||||||
"Older": "较早"
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -14,6 +14,7 @@ import AccountPreferences from "@/pages/settings/account/account-preferences.tsx
|
|||||||
import SpaceHome from "@/pages/space/space-home.tsx";
|
import SpaceHome from "@/pages/space/space-home.tsx";
|
||||||
import PageRedirect from "@/pages/page/page-redirect.tsx";
|
import PageRedirect from "@/pages/page/page-redirect.tsx";
|
||||||
import Layout from "@/components/layouts/global/layout.tsx";
|
import Layout from "@/components/layouts/global/layout.tsx";
|
||||||
|
import { ErrorBoundary } from "react-error-boundary";
|
||||||
import InviteSignup from "@/pages/auth/invite-signup.tsx";
|
import InviteSignup from "@/pages/auth/invite-signup.tsx";
|
||||||
import ForgotPassword from "@/pages/auth/forgot-password.tsx";
|
import ForgotPassword from "@/pages/auth/forgot-password.tsx";
|
||||||
import PasswordReset from "./pages/auth/password-reset";
|
import PasswordReset from "./pages/auth/password-reset";
|
||||||
@@ -37,7 +38,6 @@ import SpaceTrash from "@/pages/space/space-trash.tsx";
|
|||||||
import UserApiKeys from "@/ee/api-key/pages/user-api-keys";
|
import UserApiKeys from "@/ee/api-key/pages/user-api-keys";
|
||||||
import WorkspaceApiKeys from "@/ee/api-key/pages/workspace-api-keys";
|
import WorkspaceApiKeys from "@/ee/api-key/pages/workspace-api-keys";
|
||||||
import AiSettings from "@/ee/ai/pages/ai-settings.tsx";
|
import AiSettings from "@/ee/ai/pages/ai-settings.tsx";
|
||||||
import Integrations from "@/features/integration/pages/integrations.tsx";
|
|
||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
@@ -84,7 +84,13 @@ export default function App() {
|
|||||||
<Route path={"/s/:spaceSlug/trash"} element={<SpaceTrash />} />
|
<Route path={"/s/:spaceSlug/trash"} element={<SpaceTrash />} />
|
||||||
<Route
|
<Route
|
||||||
path={"/s/:spaceSlug/p/:pageSlug"}
|
path={"/s/:spaceSlug/p/:pageSlug"}
|
||||||
element={<Page />}
|
element={
|
||||||
|
<ErrorBoundary
|
||||||
|
fallback={<>{t("Failed to load page. An error occurred.")}</>}
|
||||||
|
>
|
||||||
|
<Page />
|
||||||
|
</ErrorBoundary>
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Route path={"/settings"}>
|
<Route path={"/settings"}>
|
||||||
@@ -103,7 +109,6 @@ export default function App() {
|
|||||||
<Route path={"sharing"} element={<Shares />} />
|
<Route path={"sharing"} element={<Shares />} />
|
||||||
<Route path={"security"} element={<Security />} />
|
<Route path={"security"} element={<Security />} />
|
||||||
<Route path={"ai"} element={<AiSettings />} />
|
<Route path={"ai"} element={<AiSettings />} />
|
||||||
<Route path={"integrations"} element={<Integrations />} />
|
|
||||||
{!isCloud() && <Route path={"license"} element={<License />} />}
|
{!isCloud() && <Route path={"license"} element={<License />} />}
|
||||||
{isCloud() && <Route path={"billing"} element={<Billing />} />}
|
{isCloud() && <Route path={"billing"} element={<Billing />} />}
|
||||||
</Route>
|
</Route>
|
||||||
|
|||||||
@@ -11,8 +11,7 @@ import PageListSkeleton from "@/components/ui/page-list-skeleton.tsx";
|
|||||||
import { buildPageUrl } from "@/features/page/page.utils.ts";
|
import { buildPageUrl } from "@/features/page/page.utils.ts";
|
||||||
import { formattedDate } from "@/lib/time.ts";
|
import { formattedDate } from "@/lib/time.ts";
|
||||||
import { useRecentChangesQuery } from "@/features/page/queries/page-query.ts";
|
import { useRecentChangesQuery } from "@/features/page/queries/page-query.ts";
|
||||||
import { IconFileDescription, IconFiles } from "@tabler/icons-react";
|
import { IconFileDescription } from "@tabler/icons-react";
|
||||||
import { EmptyState } from "@/components/ui/empty-state.tsx";
|
|
||||||
import { getSpaceUrl } from "@/lib/config.ts";
|
import { getSpaceUrl } from "@/lib/config.ts";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { getInitialsColor } from "@/lib/get-initials-color.ts";
|
import { getInitialsColor } from "@/lib/get-initials-color.ts";
|
||||||
@@ -86,10 +85,8 @@ export default function RecentChanges({ spaceId }: Props) {
|
|||||||
</Table>
|
</Table>
|
||||||
</Table.ScrollContainer>
|
</Table.ScrollContainer>
|
||||||
) : (
|
) : (
|
||||||
<EmptyState
|
<Text size="md" ta="center">
|
||||||
icon={IconFiles}
|
{t("No pages yet")}
|
||||||
title={t("No pages yet")}
|
</Text>
|
||||||
description={t("Pages you create will show up here.")}
|
|
||||||
/>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -22,7 +22,6 @@ import {
|
|||||||
searchSpotlight,
|
searchSpotlight,
|
||||||
shareSearchSpotlight,
|
shareSearchSpotlight,
|
||||||
} from "@/features/search/constants.ts";
|
} from "@/features/search/constants.ts";
|
||||||
import { NotificationPopover } from "@/features/notification/components/notification-popover.tsx";
|
|
||||||
|
|
||||||
const links = [{ link: APP_ROUTE.HOME, label: "Home" }];
|
const links = [{ link: APP_ROUTE.HOME, label: "Home" }];
|
||||||
|
|
||||||
@@ -98,7 +97,6 @@ export function AppHeader() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Group px={"xl"} wrap="nowrap">
|
<Group px={"xl"} wrap="nowrap">
|
||||||
<NotificationPopover />
|
|
||||||
{isCloud() && isTrial && trialDaysLeft !== 0 && (
|
{isCloud() && isTrial && trialDaysLeft !== 0 && (
|
||||||
<Badge
|
<Badge
|
||||||
variant="light"
|
variant="light"
|
||||||
|
|||||||
@@ -13,7 +13,6 @@ import {
|
|||||||
IconKey,
|
IconKey,
|
||||||
IconWorld,
|
IconWorld,
|
||||||
IconSparkles,
|
IconSparkles,
|
||||||
IconPlug,
|
|
||||||
} from "@tabler/icons-react";
|
} from "@tabler/icons-react";
|
||||||
import { Link, useLocation } from "react-router-dom";
|
import { Link, useLocation } from "react-router-dom";
|
||||||
import classes from "./settings.module.css";
|
import classes from "./settings.module.css";
|
||||||
@@ -116,12 +115,7 @@ const groupedData: DataGroup[] = [
|
|||||||
icon: IconSparkles,
|
icon: IconSparkles,
|
||||||
path: "/settings/ai",
|
path: "/settings/ai",
|
||||||
isAdmin: true,
|
isAdmin: true,
|
||||||
},
|
isSelfhosted: true,
|
||||||
{
|
|
||||||
label: "Integrations",
|
|
||||||
icon: IconPlug,
|
|
||||||
path: "/settings/integrations",
|
|
||||||
isAdmin: true,
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -1,8 +0,0 @@
|
|||||||
.root {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 60px 20px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
@@ -1,30 +0,0 @@
|
|||||||
import { Stack, Text } from "@mantine/core";
|
|
||||||
import { type TablerIcon } from "@tabler/icons-react";
|
|
||||||
import { ReactNode } from "react";
|
|
||||||
import classes from "./empty-state.module.css";
|
|
||||||
|
|
||||||
type EmptyStateProps = {
|
|
||||||
icon: TablerIcon;
|
|
||||||
title: string;
|
|
||||||
description?: string;
|
|
||||||
action?: ReactNode;
|
|
||||||
};
|
|
||||||
|
|
||||||
export function EmptyState({ icon: Icon, title, description, action }: EmptyStateProps) {
|
|
||||||
return (
|
|
||||||
<div className={classes.root}>
|
|
||||||
<Stack align="center" gap="xs">
|
|
||||||
<Icon size={40} stroke={1.5} color="var(--mantine-color-dimmed)" />
|
|
||||||
<Text size="lg" fw={500}>
|
|
||||||
{title}
|
|
||||||
</Text>
|
|
||||||
{description && (
|
|
||||||
<Text size="sm" c="dimmed" maw={350}>
|
|
||||||
{description}
|
|
||||||
</Text>
|
|
||||||
)}
|
|
||||||
{action}
|
|
||||||
</Stack>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,61 +0,0 @@
|
|||||||
.aiMenu {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 600px;
|
|
||||||
min-height: 2.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.aiInput {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
& input {
|
|
||||||
height: 44px;
|
|
||||||
border-radius: 22px;
|
|
||||||
padding-left: 20px;
|
|
||||||
padding-right: 40px;
|
|
||||||
border: 1px solid
|
|
||||||
light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
||||||
font-size: var(--mantine-font-size-sm);
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
border-color: light-dark(
|
|
||||||
var(--mantine-color-gray-4),
|
|
||||||
var(--mantine-color-dark-3)
|
|
||||||
);
|
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.menuItemSelected {
|
|
||||||
background-color: var(--mantine-color-gray-1);
|
|
||||||
|
|
||||||
@mixin dark {
|
|
||||||
background-color: var(--mantine-color-dark-5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.resultPreview {
|
|
||||||
background-color: light-dark(
|
|
||||||
var(--mantine-color-white),
|
|
||||||
var(--mantine-color-dark-6)
|
|
||||||
);
|
|
||||||
border: 1px solid
|
|
||||||
light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
|
|
||||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.resultPreviewWrapper {
|
|
||||||
font-size: var(--mantine-font-size-md);
|
|
||||||
line-height: 1.6;
|
|
||||||
padding: var(--mantine-spacing-md);
|
|
||||||
|
|
||||||
*:first-child {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
*:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,325 +0,0 @@
|
|||||||
import { Editor } from "@tiptap/react";
|
|
||||||
import { ActionIcon, TextInput, Tooltip } from "@mantine/core";
|
|
||||||
import { useDebouncedCallback, useMediaQuery } from "@mantine/hooks";
|
|
||||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
||||||
import { createPortal } from "react-dom";
|
|
||||||
import { useAtom } from "jotai";
|
|
||||||
import { IconArrowUp } from "@tabler/icons-react";
|
|
||||||
import { showAiMenuAtom } from "@/features/editor/atoms/editor-atoms.ts";
|
|
||||||
import { useAiGenerateStreamMutation } from "@/ee/ai/queries/ai-query.ts";
|
|
||||||
import { AiAction } from "@/ee/ai/types/ai.types.ts";
|
|
||||||
import { CommandItem, commandItems, CommandSet } from "./command-items.ts";
|
|
||||||
import { CommandSelector } from "./command-selector.tsx";
|
|
||||||
import { ResultPreview } from "./result-preview.tsx";
|
|
||||||
import classes from "./ai-menu.module.css";
|
|
||||||
import { marked } from "marked";
|
|
||||||
import { DOMSerializer } from "@tiptap/pm/model";
|
|
||||||
import { htmlToMarkdown } from "@docmost/editor-ext";
|
|
||||||
import { useLocation } from "react-router-dom";
|
|
||||||
|
|
||||||
interface EditorAiMenuProps {
|
|
||||||
editor: Editor | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const EditorAiMenu = ({ editor }: EditorAiMenuProps): JSX.Element | null => {
|
|
||||||
const aiGenerateStreamMutation = useAiGenerateStreamMutation();
|
|
||||||
const location = useLocation();
|
|
||||||
const isSmBreakpoint = useMediaQuery("(max-width: 48em)");
|
|
||||||
const [showAiMenu, setShowAiMenu] = useAtom(showAiMenuAtom);
|
|
||||||
const containerRef = useRef<HTMLDivElement | null>(null);
|
|
||||||
const inputRef = useRef<HTMLInputElement | null>(null);
|
|
||||||
const [prompt, setPrompt] = useState("");
|
|
||||||
const [output, setOutput] = useState("");
|
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
|
||||||
const [selectedIndex, setSelectedIndex] = useState(-1);
|
|
||||||
const [activeCommandSet, setActiveCommandSet] = useState<CommandSet>("main");
|
|
||||||
const [lastAction, setLastAction] = useState<CommandItem | null>(null);
|
|
||||||
const [menuPlacement, setMenuPlacement] = useState<{
|
|
||||||
top: number;
|
|
||||||
left: number;
|
|
||||||
width: number;
|
|
||||||
}>({
|
|
||||||
top: 0,
|
|
||||||
left: 0,
|
|
||||||
width: 0,
|
|
||||||
});
|
|
||||||
const currentItems = useMemo(() => {
|
|
||||||
return commandItems[activeCommandSet].filter((item) => {
|
|
||||||
return item.name.toLowerCase().includes(prompt.toLowerCase());
|
|
||||||
});
|
|
||||||
}, [prompt, output, activeCommandSet]);
|
|
||||||
const updateMenuPlacement = useCallback(() => {
|
|
||||||
if (!editor || !showAiMenu) return;
|
|
||||||
|
|
||||||
const { view } = editor;
|
|
||||||
const { to } = editor.state.selection;
|
|
||||||
const editorRect = view.dom.getBoundingClientRect();
|
|
||||||
const cursorCoords = view.coordsAtPos(to);
|
|
||||||
const topOffset = 8;
|
|
||||||
const editorPadding = isSmBreakpoint ? 16 : 48;
|
|
||||||
|
|
||||||
setMenuPlacement({
|
|
||||||
top: cursorCoords.bottom + topOffset + window.scrollY,
|
|
||||||
left: editorRect.left + editorPadding + window.scrollX,
|
|
||||||
width: editorRect.width - editorPadding * 2,
|
|
||||||
});
|
|
||||||
}, [editor, showAiMenu, isSmBreakpoint]);
|
|
||||||
const resetMenu = useCallback(() => {
|
|
||||||
setPrompt("");
|
|
||||||
setOutput("");
|
|
||||||
setActiveCommandSet("main");
|
|
||||||
setLastAction(null);
|
|
||||||
aiGenerateStreamMutation.reset();
|
|
||||||
}, [aiGenerateStreamMutation.reset]);
|
|
||||||
const debouncedUpdateMenuPlacement = useDebouncedCallback(
|
|
||||||
updateMenuPlacement,
|
|
||||||
60,
|
|
||||||
);
|
|
||||||
const handleGenerate = useCallback(
|
|
||||||
(item?: CommandItem) => {
|
|
||||||
if (!editor || isLoading) return;
|
|
||||||
|
|
||||||
let command: CommandItem | null = item || null;
|
|
||||||
|
|
||||||
if (!command) {
|
|
||||||
if (!prompt) return;
|
|
||||||
|
|
||||||
command = {
|
|
||||||
id: "custom",
|
|
||||||
name: "Custom",
|
|
||||||
action: AiAction.CUSTOM,
|
|
||||||
prompt,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
const { from, to } = editor.state.selection;
|
|
||||||
const slice = editor.state.doc.slice(from, to);
|
|
||||||
const serializer = DOMSerializer.fromSchema(editor.schema);
|
|
||||||
const fragment = serializer.serializeFragment(slice.content);
|
|
||||||
const wrapper = document.createElement("div");
|
|
||||||
wrapper.appendChild(fragment);
|
|
||||||
const content = htmlToMarkdown(wrapper.innerHTML);
|
|
||||||
|
|
||||||
setOutput("");
|
|
||||||
setIsLoading(true);
|
|
||||||
aiGenerateStreamMutation.mutate({
|
|
||||||
action: command.action,
|
|
||||||
prompt: command.prompt,
|
|
||||||
content,
|
|
||||||
onChunk: (chunk) => {
|
|
||||||
setOutput((output) => output + chunk.content);
|
|
||||||
},
|
|
||||||
onComplete: () => {
|
|
||||||
setIsLoading(false);
|
|
||||||
setActiveCommandSet("result");
|
|
||||||
},
|
|
||||||
onError: () => {
|
|
||||||
setIsLoading(false);
|
|
||||||
resetMenu();
|
|
||||||
},
|
|
||||||
});
|
|
||||||
setLastAction(command);
|
|
||||||
},
|
|
||||||
[
|
|
||||||
editor,
|
|
||||||
prompt,
|
|
||||||
isLoading,
|
|
||||||
aiGenerateStreamMutation.mutateAsync,
|
|
||||||
resetMenu,
|
|
||||||
],
|
|
||||||
);
|
|
||||||
const handleCommand = useCallback(
|
|
||||||
(item?: CommandItem) => {
|
|
||||||
setPrompt("");
|
|
||||||
|
|
||||||
if (!item) {
|
|
||||||
return handleGenerate();
|
|
||||||
}
|
|
||||||
if (item.id === "back") {
|
|
||||||
return setActiveCommandSet("main");
|
|
||||||
}
|
|
||||||
if (item.id === "result-replace") {
|
|
||||||
const chain = editor.chain().focus();
|
|
||||||
|
|
||||||
if (lastAction.action === AiAction.CONTINUE_WRITING) {
|
|
||||||
chain.setTextSelection(editor.state.selection.to);
|
|
||||||
}
|
|
||||||
|
|
||||||
const html = (marked.parse(output) as string).trim();
|
|
||||||
// Strip <p> wrapper for single-paragraph output to preserve inline context
|
|
||||||
const content =
|
|
||||||
html.startsWith("<p>") &&
|
|
||||||
html.endsWith("</p>") &&
|
|
||||||
html.lastIndexOf("<p>") === 0
|
|
||||||
? html.slice(3, -4)
|
|
||||||
: html;
|
|
||||||
|
|
||||||
chain.insertContent(content).run();
|
|
||||||
|
|
||||||
return setShowAiMenu(false);
|
|
||||||
}
|
|
||||||
if (item.id === "result-insert-below") {
|
|
||||||
editor
|
|
||||||
.chain()
|
|
||||||
.focus()
|
|
||||||
.setTextSelection(editor.state.selection.to)
|
|
||||||
.insertContent(marked.parse(output))
|
|
||||||
.run();
|
|
||||||
|
|
||||||
return setShowAiMenu(false);
|
|
||||||
}
|
|
||||||
if (item.id === "result-copy") {
|
|
||||||
navigator.clipboard.writeText(output);
|
|
||||||
|
|
||||||
return setShowAiMenu(false);
|
|
||||||
}
|
|
||||||
if (item.id === "result-discard") {
|
|
||||||
setOutput("");
|
|
||||||
|
|
||||||
return resetMenu();
|
|
||||||
}
|
|
||||||
if (item.id === "result-try-again" && lastAction) {
|
|
||||||
return handleGenerate(lastAction);
|
|
||||||
}
|
|
||||||
if (item.subCommandSet) {
|
|
||||||
return setActiveCommandSet(item.subCommandSet);
|
|
||||||
}
|
|
||||||
|
|
||||||
return handleGenerate(item);
|
|
||||||
},
|
|
||||||
[editor, output, lastAction, handleGenerate, resetMenu],
|
|
||||||
);
|
|
||||||
const handleKeyDown = useCallback(
|
|
||||||
(event: React.KeyboardEvent<HTMLInputElement>) => {
|
|
||||||
const totalItems = currentItems.length;
|
|
||||||
const cycleSize = totalItems + 1;
|
|
||||||
|
|
||||||
if (event.key === "Escape") {
|
|
||||||
return setShowAiMenu(false);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (event.key === "ArrowDown" || event.key === "ArrowUp") {
|
|
||||||
event.preventDefault();
|
|
||||||
|
|
||||||
return setSelectedIndex((selectedIndex) => {
|
|
||||||
const direction = event.key === "ArrowDown" ? 1 : -1;
|
|
||||||
const newIndex = selectedIndex + direction;
|
|
||||||
|
|
||||||
if (newIndex < -1) return cycleSize - 1;
|
|
||||||
if (newIndex >= cycleSize) return 0;
|
|
||||||
|
|
||||||
return newIndex;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (event.key === "Enter") {
|
|
||||||
event.preventDefault();
|
|
||||||
|
|
||||||
return handleCommand(currentItems[selectedIndex]);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[currentItems, selectedIndex],
|
|
||||||
);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!editor) return;
|
|
||||||
|
|
||||||
const handleClose = () => setShowAiMenu(false);
|
|
||||||
const observer = new ResizeObserver(() => {
|
|
||||||
debouncedUpdateMenuPlacement();
|
|
||||||
});
|
|
||||||
|
|
||||||
updateMenuPlacement();
|
|
||||||
editor.on("focus", handleClose);
|
|
||||||
editor.on("blur", handleClose);
|
|
||||||
window.addEventListener("resize", debouncedUpdateMenuPlacement);
|
|
||||||
window.addEventListener("scroll", debouncedUpdateMenuPlacement, true);
|
|
||||||
observer.observe(editor.view.dom);
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
editor.off("focus", handleClose);
|
|
||||||
editor.off("blur", handleClose);
|
|
||||||
window.removeEventListener("resize", debouncedUpdateMenuPlacement);
|
|
||||||
window.removeEventListener("scroll", debouncedUpdateMenuPlacement, true);
|
|
||||||
observer.disconnect();
|
|
||||||
};
|
|
||||||
}, [editor, updateMenuPlacement, debouncedUpdateMenuPlacement]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setShowAiMenu(false);
|
|
||||||
}, [location]);
|
|
||||||
useEffect(() => {
|
|
||||||
if (showAiMenu) {
|
|
||||||
resetMenu();
|
|
||||||
}
|
|
||||||
}, [showAiMenu, resetMenu]);
|
|
||||||
useEffect(() => {
|
|
||||||
// Focus input when menu opens or command set changes
|
|
||||||
requestAnimationFrame(() => {
|
|
||||||
inputRef.current?.focus({ preventScroll: true });
|
|
||||||
});
|
|
||||||
}, [showAiMenu, isLoading, currentItems]);
|
|
||||||
useEffect(() => {
|
|
||||||
if (!currentItems.length) {
|
|
||||||
setSelectedIndex(-1);
|
|
||||||
}
|
|
||||||
setSelectedIndex(prompt || activeCommandSet !== "main" ? 0 : -1);
|
|
||||||
}, [prompt, activeCommandSet, currentItems]);
|
|
||||||
|
|
||||||
if (!showAiMenu) return null;
|
|
||||||
|
|
||||||
return createPortal(
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
zIndex: 200,
|
|
||||||
position: "absolute",
|
|
||||||
top: menuPlacement.top,
|
|
||||||
left: menuPlacement.left,
|
|
||||||
width: menuPlacement.width,
|
|
||||||
pointerEvents: "none",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className={classes.aiMenu}
|
|
||||||
style={{ pointerEvents: "auto" }}
|
|
||||||
tabIndex={0}
|
|
||||||
ref={containerRef}
|
|
||||||
>
|
|
||||||
<ResultPreview output={output} isLoading={isLoading} />
|
|
||||||
<CommandSelector
|
|
||||||
selectedIndex={selectedIndex}
|
|
||||||
isLoading={isLoading}
|
|
||||||
output={output}
|
|
||||||
currentItems={currentItems}
|
|
||||||
handleCommand={handleCommand}
|
|
||||||
>
|
|
||||||
<TextInput
|
|
||||||
ref={inputRef}
|
|
||||||
className={classes.aiInput}
|
|
||||||
placeholder="Ask AI..."
|
|
||||||
data-autofocus
|
|
||||||
value={prompt}
|
|
||||||
disabled={isLoading}
|
|
||||||
onChange={(e) => setPrompt(e.currentTarget.value)}
|
|
||||||
rightSection={
|
|
||||||
<ActionIcon
|
|
||||||
disabled={!prompt || isLoading}
|
|
||||||
variant="filled"
|
|
||||||
color="blue"
|
|
||||||
radius="xl"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => handleGenerate()}
|
|
||||||
>
|
|
||||||
<IconArrowUp size={14} stroke={2.5} />
|
|
||||||
</ActionIcon>
|
|
||||||
}
|
|
||||||
onKeyDown={handleKeyDown}
|
|
||||||
/>
|
|
||||||
</CommandSelector>
|
|
||||||
</div>
|
|
||||||
</div>,
|
|
||||||
document.body,
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export { EditorAiMenu };
|
|
||||||
@@ -1,219 +0,0 @@
|
|||||||
import { AiAction } from "@/ee/ai/types/ai.types.ts";
|
|
||||||
import {
|
|
||||||
IconSparkles,
|
|
||||||
IconArrowsMaximize,
|
|
||||||
IconArrowsMinimize,
|
|
||||||
IconWriting,
|
|
||||||
IconHelp,
|
|
||||||
IconList,
|
|
||||||
IconMoodSmile,
|
|
||||||
IconLanguage,
|
|
||||||
IconTrash,
|
|
||||||
IconRefresh,
|
|
||||||
IconChevronLeft,
|
|
||||||
IconCheck,
|
|
||||||
IconArrowDownLeft,
|
|
||||||
IconCopy,
|
|
||||||
IconTextPlus,
|
|
||||||
IconAlignJustified,
|
|
||||||
} from "@tabler/icons-react";
|
|
||||||
|
|
||||||
interface CommandItem {
|
|
||||||
name: string;
|
|
||||||
id: string;
|
|
||||||
icon?: typeof IconSparkles;
|
|
||||||
action?: AiAction;
|
|
||||||
prompt?: string;
|
|
||||||
subCommandSet?: CommandSet;
|
|
||||||
}
|
|
||||||
|
|
||||||
type CommandSet = "main" | "tone" | "translate" | "result";
|
|
||||||
|
|
||||||
const mainItems: CommandItem[] = [
|
|
||||||
{
|
|
||||||
id: "improve-writing",
|
|
||||||
name: "Improve writing",
|
|
||||||
icon: IconSparkles,
|
|
||||||
action: AiAction.IMPROVE_WRITING,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "fix-spelling-grammar",
|
|
||||||
name: "Fix spelling & grammar",
|
|
||||||
icon: IconCheck,
|
|
||||||
action: AiAction.FIX_SPELLING_GRAMMAR,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "make-longer",
|
|
||||||
name: "Make longer",
|
|
||||||
icon: IconTextPlus,
|
|
||||||
action: AiAction.MAKE_LONGER,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "make-shorter",
|
|
||||||
name: "Make shorter",
|
|
||||||
icon: IconAlignJustified,
|
|
||||||
action: AiAction.MAKE_SHORTER,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "continue-writing",
|
|
||||||
name: "Continue writing",
|
|
||||||
icon: IconWriting,
|
|
||||||
action: AiAction.CONTINUE_WRITING,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "explain",
|
|
||||||
name: "Explain",
|
|
||||||
icon: IconHelp,
|
|
||||||
action: AiAction.EXPLAIN,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "summarize",
|
|
||||||
name: "Summarize",
|
|
||||||
icon: IconList,
|
|
||||||
action: AiAction.SUMMARIZE,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "change-tone",
|
|
||||||
name: "Change tone",
|
|
||||||
icon: IconMoodSmile,
|
|
||||||
subCommandSet: "tone",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "translate",
|
|
||||||
name: "Translate",
|
|
||||||
icon: IconLanguage,
|
|
||||||
subCommandSet: "translate",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
const toneItems: CommandItem[] = [
|
|
||||||
{
|
|
||||||
id: "back",
|
|
||||||
name: "Back",
|
|
||||||
icon: IconChevronLeft,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "tone-professional",
|
|
||||||
name: "Professional",
|
|
||||||
icon: IconMoodSmile,
|
|
||||||
action: AiAction.CHANGE_TONE,
|
|
||||||
prompt: "Professional",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "tone-casual",
|
|
||||||
name: "Casual",
|
|
||||||
icon: IconMoodSmile,
|
|
||||||
action: AiAction.CHANGE_TONE,
|
|
||||||
prompt: "Casual",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "tone-friendly",
|
|
||||||
name: "Friendly",
|
|
||||||
icon: IconMoodSmile,
|
|
||||||
action: AiAction.CHANGE_TONE,
|
|
||||||
prompt: "Friendly",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
const translateItems: CommandItem[] = [
|
|
||||||
{
|
|
||||||
id: "back",
|
|
||||||
name: "Back",
|
|
||||||
icon: IconChevronLeft,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "translate-english",
|
|
||||||
name: "English",
|
|
||||||
icon: IconLanguage,
|
|
||||||
action: AiAction.TRANSLATE,
|
|
||||||
prompt: "English",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "translate-spanish",
|
|
||||||
name: "Spanish",
|
|
||||||
icon: IconLanguage,
|
|
||||||
action: AiAction.TRANSLATE,
|
|
||||||
prompt: "Spanish",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "translate-german",
|
|
||||||
name: "German",
|
|
||||||
icon: IconLanguage,
|
|
||||||
action: AiAction.TRANSLATE,
|
|
||||||
prompt: "German",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "translate-french",
|
|
||||||
name: "French",
|
|
||||||
icon: IconLanguage,
|
|
||||||
action: AiAction.TRANSLATE,
|
|
||||||
prompt: "French",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "translate-dutch",
|
|
||||||
name: "Dutch",
|
|
||||||
icon: IconLanguage,
|
|
||||||
action: AiAction.TRANSLATE,
|
|
||||||
prompt: "Dutch",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "translate-portuguese",
|
|
||||||
name: "Portuguese",
|
|
||||||
icon: IconLanguage,
|
|
||||||
action: AiAction.TRANSLATE,
|
|
||||||
prompt: "Portuguese",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "translate-italian",
|
|
||||||
name: "Italian",
|
|
||||||
icon: IconLanguage,
|
|
||||||
action: AiAction.TRANSLATE,
|
|
||||||
prompt: "Italian",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "translate-japanese",
|
|
||||||
name: "Japanese",
|
|
||||||
icon: IconLanguage,
|
|
||||||
action: AiAction.TRANSLATE,
|
|
||||||
prompt: "Japanese",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "translate-korean",
|
|
||||||
name: "Korean",
|
|
||||||
icon: IconLanguage,
|
|
||||||
action: AiAction.TRANSLATE,
|
|
||||||
prompt: "Korean",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "translate-swedish",
|
|
||||||
name: "Swedish",
|
|
||||||
icon: IconLanguage,
|
|
||||||
action: AiAction.TRANSLATE,
|
|
||||||
prompt: "Swedish",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "translate-chinese",
|
|
||||||
name: "Chinese (Simplified)",
|
|
||||||
icon: IconLanguage,
|
|
||||||
action: AiAction.TRANSLATE,
|
|
||||||
prompt: "Simplified Chinese",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
const resultItems: CommandItem[] = [
|
|
||||||
{ id: "result-replace", name: "Replace", icon: IconCheck },
|
|
||||||
{ id: "result-insert-below", name: "Insert below", icon: IconArrowDownLeft },
|
|
||||||
{ id: "result-copy", name: "Copy", icon: IconCopy },
|
|
||||||
{ id: "result-discard", name: "Discard", icon: IconTrash },
|
|
||||||
{
|
|
||||||
id: "result-try-again",
|
|
||||||
name: "Try again",
|
|
||||||
icon: IconRefresh,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
const commandItems: Record<CommandSet, CommandItem[]> = {
|
|
||||||
main: mainItems,
|
|
||||||
tone: toneItems,
|
|
||||||
translate: translateItems,
|
|
||||||
result: resultItems,
|
|
||||||
};
|
|
||||||
|
|
||||||
export type { CommandItem, CommandSet };
|
|
||||||
export { commandItems };
|
|
||||||
@@ -1,72 +0,0 @@
|
|||||||
import { Loader, Menu, ScrollArea } from "@mantine/core";
|
|
||||||
import { IconChevronRight } from "@tabler/icons-react";
|
|
||||||
import { ReactNode } from "react";
|
|
||||||
import { CommandItem } from "./command-items.ts";
|
|
||||||
import classes from "./ai-menu.module.css";
|
|
||||||
|
|
||||||
interface CommandSelectorProps {
|
|
||||||
selectedIndex: number;
|
|
||||||
|
|
||||||
isLoading: boolean;
|
|
||||||
output: string;
|
|
||||||
currentItems: CommandItem[];
|
|
||||||
children: ReactNode;
|
|
||||||
handleCommand(item: CommandItem): void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const CommandSelector = ({
|
|
||||||
selectedIndex,
|
|
||||||
children,
|
|
||||||
isLoading,
|
|
||||||
output,
|
|
||||||
currentItems,
|
|
||||||
handleCommand,
|
|
||||||
}: CommandSelectorProps) => {
|
|
||||||
return (
|
|
||||||
<Menu
|
|
||||||
opened={!isLoading && currentItems.length > 0}
|
|
||||||
middlewares={{ flip: false }}
|
|
||||||
position="bottom-start"
|
|
||||||
offset={4}
|
|
||||||
width={250}
|
|
||||||
trapFocus={false}
|
|
||||||
shadow="lg"
|
|
||||||
>
|
|
||||||
<Menu.Target>{children}</Menu.Target>
|
|
||||||
<Menu.Dropdown>
|
|
||||||
<ScrollArea.Autosize type="scroll" scrollbarSize={5} mah={300}>
|
|
||||||
{currentItems.map((item, index) => {
|
|
||||||
const isSelected = selectedIndex === index;
|
|
||||||
const showLoader =
|
|
||||||
isLoading && output === "" && !item.subCommandSet;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Menu.Item
|
|
||||||
key={item.id}
|
|
||||||
className={isSelected ? classes.menuItemSelected : undefined}
|
|
||||||
leftSection={
|
|
||||||
showLoader ? (
|
|
||||||
<Loader size={14} />
|
|
||||||
) : item.icon ? (
|
|
||||||
<item.icon size={16} />
|
|
||||||
) : undefined
|
|
||||||
}
|
|
||||||
rightSection={
|
|
||||||
item.subCommandSet ? (
|
|
||||||
<IconChevronRight size={14} />
|
|
||||||
) : undefined
|
|
||||||
}
|
|
||||||
onClick={() => handleCommand(item)}
|
|
||||||
disabled={isLoading}
|
|
||||||
>
|
|
||||||
{item.name}
|
|
||||||
</Menu.Item>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</ScrollArea.Autosize>
|
|
||||||
</Menu.Dropdown>
|
|
||||||
</Menu>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export { CommandSelector };
|
|
||||||
@@ -1,32 +0,0 @@
|
|||||||
import { Loader, Paper, ScrollArea } from "@mantine/core";
|
|
||||||
import DOMPurify from "dompurify";
|
|
||||||
import { marked } from "marked";
|
|
||||||
import { memo } from "react";
|
|
||||||
import classes from "./ai-menu.module.css";
|
|
||||||
|
|
||||||
interface ResultPreviewProps {
|
|
||||||
output: string;
|
|
||||||
isLoading: boolean;
|
|
||||||
}
|
|
||||||
const ResultPreview = memo(({ output, isLoading }: ResultPreviewProps) => {
|
|
||||||
if (!output && !isLoading) return;
|
|
||||||
|
|
||||||
const parsedOutput = `${marked.parse(output)}`;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Paper mb={4} shadow="lg" radius="md" className={classes.resultPreview}>
|
|
||||||
<ScrollArea.Autosize mah={300} type="scroll" scrollbarSize={5}>
|
|
||||||
<div className={classes.resultPreviewWrapper}>
|
|
||||||
{parsedOutput && (
|
|
||||||
<div
|
|
||||||
dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(parsedOutput) }}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{isLoading && <Loader size={12} ml="xs" display="inline-block" />}
|
|
||||||
</div>
|
|
||||||
</ScrollArea.Autosize>
|
|
||||||
</Paper>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
export { ResultPreview };
|
|
||||||
@@ -15,7 +15,7 @@ export default function EnableAiSearch() {
|
|||||||
<>
|
<>
|
||||||
<Group justify="space-between" wrap="nowrap" gap="xl">
|
<Group justify="space-between" wrap="nowrap" gap="xl">
|
||||||
<div>
|
<div>
|
||||||
<Text size="md">{t("AI-powered search (AI Answers)")}</Text>
|
<Text size="md">{t("AI-powered search (Ask AI)")}</Text>
|
||||||
<Text size="sm" c="dimmed">
|
<Text size="sm" c="dimmed">
|
||||||
{t(
|
{t(
|
||||||
"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.",
|
||||||
|
|||||||
@@ -1,48 +0,0 @@
|
|||||||
import { Group, Text, Switch } 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 { useIsCloudEE } from "@/hooks/use-is-cloud-ee.tsx";
|
|
||||||
|
|
||||||
export default function EnableGenerativeAi() {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const [workspace, setWorkspace] = useAtom(workspaceAtom);
|
|
||||||
const [checked, setChecked] = useState(workspace?.settings?.ai?.generative);
|
|
||||||
const hasAccess = useIsCloudEE();
|
|
||||||
|
|
||||||
const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
const value = event.currentTarget.checked;
|
|
||||||
try {
|
|
||||||
const updatedWorkspace = await updateWorkspace({ generativeAi: value });
|
|
||||||
setChecked(value);
|
|
||||||
setWorkspace(updatedWorkspace);
|
|
||||||
} catch (err) {
|
|
||||||
notifications.show({
|
|
||||||
message: err?.response?.data?.message,
|
|
||||||
color: "red",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Group justify="space-between" wrap="nowrap" gap="xl">
|
|
||||||
<div>
|
|
||||||
<Text size="md">{t("Generative AI (Ask AI)")}</Text>
|
|
||||||
<Text size="sm" c="dimmed">
|
|
||||||
{t(
|
|
||||||
"Enable AI-powered content generation in the editor. Allows users to generate, improve, translate and transform text.",
|
|
||||||
)}
|
|
||||||
</Text>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Switch
|
|
||||||
defaultChecked={checked}
|
|
||||||
onChange={handleChange}
|
|
||||||
disabled={!hasAccess}
|
|
||||||
/>
|
|
||||||
</Group>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
import { useMutation, UseMutationResult } from "@tanstack/react-query";
|
import { useMutation, UseMutationResult } from "@tanstack/react-query";
|
||||||
import { useState, useCallback } from "react";
|
import { useState, useCallback } from "react";
|
||||||
import { aiAnswers, IAiSearchResponse } from "@/ee/ai/services/ai-search-service.ts";
|
import { askAi, IAiSearchResponse } from "@/ee/ai/services/ai-search-service.ts";
|
||||||
import { IPageSearchParams } from "@/features/search/types/search.types.ts";
|
import { IPageSearchParams } from "@/features/search/types/search.types.ts";
|
||||||
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
@@ -26,7 +26,7 @@ export function useAiSearch(): UseAiSearchResult {
|
|||||||
|
|
||||||
const { contentType, ...apiParams } = params;
|
const { contentType, ...apiParams } = params;
|
||||||
|
|
||||||
return await aiAnswers(apiParams, (chunk) => {
|
return await askAi(apiParams, (chunk) => {
|
||||||
if (chunk.content) {
|
if (chunk.content) {
|
||||||
setStreamingAnswer((prev) => prev + chunk.content);
|
setStreamingAnswer((prev) => prev + chunk.content);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,25 +1,25 @@
|
|||||||
import { Helmet } from "react-helmet-async";
|
import { Helmet } from "react-helmet-async";
|
||||||
import { getAppName } from "@/lib/config.ts";
|
import { getAppName, isCloud } from "@/lib/config.ts";
|
||||||
import SettingsTitle from "@/components/settings/settings-title.tsx";
|
import SettingsTitle from "@/components/settings/settings-title.tsx";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import useUserRole from "@/hooks/use-user-role.tsx";
|
import useUserRole from "@/hooks/use-user-role.tsx";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
|
import useLicense from "@/ee/hooks/use-license.tsx";
|
||||||
import EnableAiSearch from "@/ee/ai/components/enable-ai-search.tsx";
|
import EnableAiSearch from "@/ee/ai/components/enable-ai-search.tsx";
|
||||||
import EnableGenerativeAi from "@/ee/ai/components/enable-generative-ai.tsx";
|
import { Alert } from "@mantine/core";
|
||||||
import { Alert, Stack } from "@mantine/core";
|
|
||||||
import { IconInfoCircle } from "@tabler/icons-react";
|
import { IconInfoCircle } from "@tabler/icons-react";
|
||||||
import { useIsCloudEE } from "@/hooks/use-is-cloud-ee.tsx";
|
|
||||||
import { isCloud } from "@/lib/config.ts";
|
|
||||||
|
|
||||||
export default function AiSettings() {
|
export default function AiSettings() {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const { isAdmin } = useUserRole();
|
const { isAdmin } = useUserRole();
|
||||||
const hasAccess = useIsCloudEE();
|
const { hasLicenseKey } = useLicense();
|
||||||
|
|
||||||
if (!isAdmin) {
|
if (!isAdmin) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const hasAccess = isCloud() || (!isCloud() && hasLicenseKey);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Helmet>
|
<Helmet>
|
||||||
@@ -40,10 +40,7 @@ export default function AiSettings() {
|
|||||||
</Alert>
|
</Alert>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<Stack gap="md">
|
<EnableAiSearch />
|
||||||
{!isCloud() && <EnableAiSearch />}
|
|
||||||
<EnableGenerativeAi />
|
|
||||||
</Stack>
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -15,11 +15,11 @@ export interface IAiSearchResponse {
|
|||||||
}>;
|
}>;
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function aiAnswers(
|
export async function askAi(
|
||||||
params: IPageSearchParams,
|
params: IPageSearchParams,
|
||||||
onChunk?: (chunk: { content?: string; sources?: any[] }) => void,
|
onChunk?: (chunk: { content?: string; sources?: any[] }) => void,
|
||||||
): Promise<IAiSearchResponse> {
|
): Promise<IAiSearchResponse> {
|
||||||
const response = await fetch("/api/ai/answers", {
|
const response = await fetch("/api/ai/ask", {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
headers: {
|
headers: {
|
||||||
"Content-Type": "application/json",
|
"Content-Type": "application/json",
|
||||||
|
|||||||
@@ -43,16 +43,13 @@ export async function generateAiContentStream(
|
|||||||
}
|
}
|
||||||
|
|
||||||
const processStream = async () => {
|
const processStream = async () => {
|
||||||
let buffer = "";
|
|
||||||
try {
|
try {
|
||||||
while (true) {
|
while (true) {
|
||||||
const { done, value } = await reader.read();
|
const { done, value } = await reader.read();
|
||||||
if (done) break;
|
if (done) break;
|
||||||
|
|
||||||
buffer += decoder.decode(value, { stream: true });
|
const chunk = decoder.decode(value, { stream: true });
|
||||||
const lines = buffer.split("\n");
|
const lines = chunk.split("\n");
|
||||||
|
|
||||||
buffer = lines.pop() || "";
|
|
||||||
|
|
||||||
for (const line of lines) {
|
for (const line of lines) {
|
||||||
if (line.startsWith("data: ")) {
|
if (line.startsWith("data: ")) {
|
||||||
@@ -69,7 +66,7 @@ export async function generateAiContentStream(
|
|||||||
onChunk(parsed);
|
onChunk(parsed);
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
// Skip invalid JSON
|
// Ignore parse errors for incomplete chunks
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -6,7 +6,6 @@ export enum AiAction {
|
|||||||
SIMPLIFY = "simplify",
|
SIMPLIFY = "simplify",
|
||||||
CHANGE_TONE = "change_tone",
|
CHANGE_TONE = "change_tone",
|
||||||
SUMMARIZE = "summarize",
|
SUMMARIZE = "summarize",
|
||||||
EXPLAIN = "explain",
|
|
||||||
CONTINUE_WRITING = "continue_writing",
|
CONTINUE_WRITING = "continue_writing",
|
||||||
TRANSLATE = "translate",
|
TRANSLATE = "translate",
|
||||||
CUSTOM = "custom",
|
CUSTOM = "custom",
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ import { notifications } from "@mantine/notifications";
|
|||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { IAuthProvider } from "@/ee/security/types/security.types";
|
import { IAuthProvider } from "@/ee/security/types/security.types";
|
||||||
import APP_ROUTE, { getPostLoginRedirect } from "@/lib/app-route";
|
import APP_ROUTE from "@/lib/app-route";
|
||||||
import { ldapLogin } from "@/ee/security/services/ldap-auth-service";
|
import { ldapLogin } from "@/ee/security/services/ldap-auth-service";
|
||||||
|
|
||||||
const formSchema = z.object({
|
const formSchema = z.object({
|
||||||
@@ -59,13 +59,13 @@ export function LdapLoginModal({
|
|||||||
// Handle MFA like the regular login
|
// Handle MFA like the regular login
|
||||||
if (response?.userHasMfa) {
|
if (response?.userHasMfa) {
|
||||||
onClose();
|
onClose();
|
||||||
navigate(APP_ROUTE.AUTH.MFA_CHALLENGE + window.location.search);
|
navigate(APP_ROUTE.AUTH.MFA_CHALLENGE);
|
||||||
} else if (response?.requiresMfaSetup) {
|
} else if (response?.requiresMfaSetup) {
|
||||||
onClose();
|
onClose();
|
||||||
navigate(APP_ROUTE.AUTH.MFA_SETUP_REQUIRED + window.location.search);
|
navigate(APP_ROUTE.AUTH.MFA_SETUP_REQUIRED);
|
||||||
} else {
|
} else {
|
||||||
onClose();
|
onClose();
|
||||||
navigate(getPostLoginRedirect());
|
navigate(APP_ROUTE.HOME);
|
||||||
}
|
}
|
||||||
} catch (err: any) {
|
} catch (err: any) {
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
|
|||||||
@@ -18,7 +18,7 @@ import { useNavigate } from "react-router-dom";
|
|||||||
import { notifications } from "@mantine/notifications";
|
import { notifications } from "@mantine/notifications";
|
||||||
import classes from "./mfa-challenge.module.css";
|
import classes from "./mfa-challenge.module.css";
|
||||||
import { verifyMfa } from "@/ee/mfa";
|
import { verifyMfa } from "@/ee/mfa";
|
||||||
import APP_ROUTE, { getPostLoginRedirect } from "@/lib/app-route";
|
import APP_ROUTE from "@/lib/app-route";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import * as z from "zod";
|
import * as z from "zod";
|
||||||
import { MfaBackupCodeInput } from "./mfa-backup-code-input";
|
import { MfaBackupCodeInput } from "./mfa-backup-code-input";
|
||||||
@@ -53,7 +53,7 @@ export function MfaChallenge() {
|
|||||||
setIsLoading(true);
|
setIsLoading(true);
|
||||||
try {
|
try {
|
||||||
await verifyMfa(values.code);
|
await verifyMfa(values.code);
|
||||||
navigate(getPostLoginRedirect());
|
navigate(APP_ROUTE.HOME);
|
||||||
} catch (error: any) {
|
} catch (error: any) {
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
notifications.show({
|
notifications.show({
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ import { Container, Paper, Title, Text, Alert, Stack } from "@mantine/core";
|
|||||||
import { IconAlertCircle } from "@tabler/icons-react";
|
import { IconAlertCircle } from "@tabler/icons-react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { MfaSetupModal } from "@/ee/mfa";
|
import { MfaSetupModal } from "@/ee/mfa";
|
||||||
import APP_ROUTE, { getPostLoginRedirect } from "@/lib/app-route.ts";
|
import APP_ROUTE from "@/lib/app-route.ts";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
|
|
||||||
export default function MfaSetupRequired() {
|
export default function MfaSetupRequired() {
|
||||||
@@ -11,7 +11,7 @@ export default function MfaSetupRequired() {
|
|||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
const handleSetupComplete = () => {
|
const handleSetupComplete = () => {
|
||||||
navigate(getPostLoginRedirect());
|
navigate(APP_ROUTE.HOME);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { useNavigate, useLocation } from "react-router-dom";
|
import { useNavigate, useLocation } from "react-router-dom";
|
||||||
import APP_ROUTE, { getPostLoginRedirect } from "@/lib/app-route";
|
import APP_ROUTE from "@/lib/app-route";
|
||||||
import { validateMfaAccess } from "@/ee/mfa";
|
import { validateMfaAccess } from "@/ee/mfa";
|
||||||
|
|
||||||
export function useMfaPageProtection() {
|
export function useMfaPageProtection() {
|
||||||
@@ -13,10 +13,8 @@ export function useMfaPageProtection() {
|
|||||||
const checkAccess = async () => {
|
const checkAccess = async () => {
|
||||||
const result = await validateMfaAccess();
|
const result = await validateMfaAccess();
|
||||||
|
|
||||||
const search = location.search;
|
|
||||||
|
|
||||||
if (!result.valid) {
|
if (!result.valid) {
|
||||||
navigate(APP_ROUTE.AUTH.LOGIN + search);
|
navigate(APP_ROUTE.AUTH.LOGIN);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -28,17 +26,17 @@ export function useMfaPageProtection() {
|
|||||||
|
|
||||||
if (result.requiresMfaSetup && !isOnSetupPage) {
|
if (result.requiresMfaSetup && !isOnSetupPage) {
|
||||||
// User needs to set up MFA but is on challenge page
|
// User needs to set up MFA but is on challenge page
|
||||||
navigate(APP_ROUTE.AUTH.MFA_SETUP_REQUIRED + search);
|
navigate(APP_ROUTE.AUTH.MFA_SETUP_REQUIRED);
|
||||||
} else if (
|
} else if (
|
||||||
!result.requiresMfaSetup &&
|
!result.requiresMfaSetup &&
|
||||||
result.userHasMfa &&
|
result.userHasMfa &&
|
||||||
!isOnChallengePage
|
!isOnChallengePage
|
||||||
) {
|
) {
|
||||||
// User has MFA and should be on challenge page
|
// User has MFA and should be on challenge page
|
||||||
navigate(APP_ROUTE.AUTH.MFA_CHALLENGE + search);
|
navigate(APP_ROUTE.AUTH.MFA_CHALLENGE);
|
||||||
} else if (!result.isTransferToken) {
|
} else if (!result.isTransferToken) {
|
||||||
// User has a regular auth token, shouldn't be on MFA pages
|
// User has a regular auth token, shouldn't be on MFA pages
|
||||||
navigate(getPostLoginRedirect());
|
navigate(APP_ROUTE.HOME);
|
||||||
} else {
|
} else {
|
||||||
setIsValid(true);
|
setIsValid(true);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,62 +1,20 @@
|
|||||||
import api from "@/lib/api-client";
|
import api from "@/lib/api-client";
|
||||||
import loadImage from "blueimp-load-image";
|
|
||||||
import {
|
import {
|
||||||
AvatarIconType,
|
AvatarIconType,
|
||||||
IAttachment,
|
IAttachment,
|
||||||
} from "@/features/attachments/types/attachment.types.ts";
|
} from "@/features/attachments/types/attachment.types.ts";
|
||||||
|
|
||||||
async function compressAndResizeIcon(
|
|
||||||
file: File,
|
|
||||||
type: AvatarIconType,
|
|
||||||
): Promise<File> {
|
|
||||||
const isPng = file.type === "image/png";
|
|
||||||
|
|
||||||
const { image: canvas } = await loadImage(file, {
|
|
||||||
maxWidth: 300,
|
|
||||||
maxHeight: 300,
|
|
||||||
canvas: true,
|
|
||||||
orientation: true,
|
|
||||||
imageSmoothingQuality: "high",
|
|
||||||
});
|
|
||||||
|
|
||||||
if (type === AvatarIconType.AVATAR || !isPng) {
|
|
||||||
const ctx = (canvas as HTMLCanvasElement).getContext("2d")!;
|
|
||||||
ctx.globalCompositeOperation = "destination-over";
|
|
||||||
ctx.fillStyle = "#ffffff";
|
|
||||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
||||||
ctx.globalCompositeOperation = "source-over";
|
|
||||||
}
|
|
||||||
|
|
||||||
const outputType = isPng ? "image/png" : "image/jpeg";
|
|
||||||
|
|
||||||
return new Promise<File>((resolve, reject) => {
|
|
||||||
(canvas as HTMLCanvasElement).toBlob(
|
|
||||||
(blob) => {
|
|
||||||
if (!blob) {
|
|
||||||
reject(new Error("Failed to compress image"));
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
resolve(new File([blob], file.name, { type: outputType }));
|
|
||||||
},
|
|
||||||
outputType,
|
|
||||||
isPng ? undefined : 0.85,
|
|
||||||
);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function uploadIcon(
|
export async function uploadIcon(
|
||||||
file: File,
|
file: File,
|
||||||
type: AvatarIconType,
|
type: AvatarIconType,
|
||||||
spaceId?: string,
|
spaceId?: string,
|
||||||
): Promise<IAttachment> {
|
): Promise<IAttachment> {
|
||||||
const processed = await compressAndResizeIcon(file, type);
|
|
||||||
|
|
||||||
const formData = new FormData();
|
const formData = new FormData();
|
||||||
formData.append("type", type);
|
formData.append("type", type);
|
||||||
if (spaceId) {
|
if (spaceId) {
|
||||||
formData.append("spaceId", spaceId);
|
formData.append("spaceId", spaceId);
|
||||||
}
|
}
|
||||||
formData.append("image", processed);
|
formData.append("image", file);
|
||||||
|
|
||||||
return await api.post("/attachments/upload-image", formData, {
|
return await api.post("/attachments/upload-image", formData, {
|
||||||
headers: {
|
headers: {
|
||||||
|
|||||||
@@ -23,7 +23,7 @@ import {
|
|||||||
acceptInvitation,
|
acceptInvitation,
|
||||||
createWorkspace,
|
createWorkspace,
|
||||||
} from "@/features/workspace/services/workspace-service.ts";
|
} from "@/features/workspace/services/workspace-service.ts";
|
||||||
import APP_ROUTE, { getPostLoginRedirect } from "@/lib/app-route.ts";
|
import APP_ROUTE from "@/lib/app-route.ts";
|
||||||
import { RESET } from "jotai/utils";
|
import { RESET } from "jotai/utils";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { isCloud } from "@/lib/config.ts";
|
import { isCloud } from "@/lib/config.ts";
|
||||||
@@ -44,11 +44,11 @@ export default function useAuth() {
|
|||||||
|
|
||||||
// Check if MFA is required
|
// Check if MFA is required
|
||||||
if (response?.userHasMfa) {
|
if (response?.userHasMfa) {
|
||||||
navigate(APP_ROUTE.AUTH.MFA_CHALLENGE + window.location.search);
|
navigate(APP_ROUTE.AUTH.MFA_CHALLENGE);
|
||||||
} else if (response?.requiresMfaSetup) {
|
} else if (response?.requiresMfaSetup) {
|
||||||
navigate(APP_ROUTE.AUTH.MFA_SETUP_REQUIRED + window.location.search);
|
navigate(APP_ROUTE.AUTH.MFA_SETUP_REQUIRED);
|
||||||
} else {
|
} else {
|
||||||
navigate(getPostLoginRedirect());
|
navigate(APP_ROUTE.HOME);
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import { useEffect } from "react";
|
import { useEffect } from "react";
|
||||||
import useCurrentUser from "@/features/user/hooks/use-current-user.ts";
|
import useCurrentUser from "@/features/user/hooks/use-current-user.ts";
|
||||||
import { getPostLoginRedirect } from "@/lib/app-route.ts";
|
import APP_ROUTE from "@/lib/app-route.ts";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
|
|
||||||
export function useRedirectIfAuthenticated() {
|
export function useRedirectIfAuthenticated() {
|
||||||
@@ -9,7 +9,7 @@ export function useRedirectIfAuthenticated() {
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (data && data?.user) {
|
if (data && data?.user) {
|
||||||
navigate(getPostLoginRedirect());
|
navigate(APP_ROUTE.HOME);
|
||||||
}
|
}
|
||||||
}, [isLoading, data]);
|
}, [isLoading, data]);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -31,7 +31,6 @@ function CommentDialog({ editor, pageId }: CommentDialogProps) {
|
|||||||
const [currentUser] = useAtom(currentUserAtom);
|
const [currentUser] = useAtom(currentUserAtom);
|
||||||
const [, setAsideState] = useAtom(asideStateAtom);
|
const [, setAsideState] = useAtom(asideStateAtom);
|
||||||
const useClickOutsideRef = useClickOutside(() => {
|
const useClickOutsideRef = useClickOutside(() => {
|
||||||
if (document.querySelector("#mention")) return;
|
|
||||||
handleDialogClose();
|
handleDialogClose();
|
||||||
});
|
});
|
||||||
const createCommentMutation = useCreateCommentMutation();
|
const createCommentMutation = useCreateCommentMutation();
|
||||||
@@ -106,7 +105,6 @@ function CommentDialog({ editor, pageId }: CommentDialogProps) {
|
|||||||
position={{ bottom: 500, right: 50 }}
|
position={{ bottom: 500, right: 50 }}
|
||||||
withCloseButton
|
withCloseButton
|
||||||
withBorder
|
withBorder
|
||||||
data-comment-dialog
|
|
||||||
>
|
>
|
||||||
<Stack gap={2}>
|
<Stack gap={2}>
|
||||||
<Group>
|
<Group>
|
||||||
|
|||||||
@@ -1,15 +1,14 @@
|
|||||||
import { EditorContent, ReactNodeViewRenderer, useEditor } from "@tiptap/react";
|
import { EditorContent, useEditor } from "@tiptap/react";
|
||||||
import { Placeholder } from "@tiptap/extension-placeholder";
|
import { Placeholder } from "@tiptap/extension-placeholder";
|
||||||
|
import { Underline } from "@tiptap/extension-underline";
|
||||||
|
import { Link } from "@tiptap/extension-link";
|
||||||
import { StarterKit } from "@tiptap/starter-kit";
|
import { StarterKit } from "@tiptap/starter-kit";
|
||||||
import { Mention, LinkExtension } from "@docmost/editor-ext";
|
|
||||||
import classes from "./comment.module.css";
|
import classes from "./comment.module.css";
|
||||||
import { useFocusWithin } from "@mantine/hooks";
|
import { useFocusWithin } from "@mantine/hooks";
|
||||||
import clsx from "clsx";
|
import clsx from "clsx";
|
||||||
import { forwardRef, useEffect, useImperativeHandle } from "react";
|
import { forwardRef, useEffect, useImperativeHandle } from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import EmojiCommand from "@/features/editor/extensions/emoji-command";
|
import EmojiCommand from "@/features/editor/extensions/emoji-command";
|
||||||
import mentionRenderItems from "@/features/editor/components/mention/mention-suggestion";
|
|
||||||
import MentionView from "@/features/editor/components/mention/mention-view";
|
|
||||||
|
|
||||||
interface CommentEditorProps {
|
interface CommentEditorProps {
|
||||||
defaultContent?: any;
|
defaultContent?: any;
|
||||||
@@ -40,29 +39,13 @@ const CommentEditor = forwardRef(
|
|||||||
StarterKit.configure({
|
StarterKit.configure({
|
||||||
gapcursor: false,
|
gapcursor: false,
|
||||||
dropcursor: false,
|
dropcursor: false,
|
||||||
link: false,
|
|
||||||
}),
|
}),
|
||||||
Placeholder.configure({
|
Placeholder.configure({
|
||||||
placeholder: placeholder || t("Reply..."),
|
placeholder: placeholder || t("Reply..."),
|
||||||
}),
|
}),
|
||||||
LinkExtension,
|
Underline,
|
||||||
|
Link,
|
||||||
EmojiCommand,
|
EmojiCommand,
|
||||||
Mention.configure({
|
|
||||||
suggestion: {
|
|
||||||
allowSpaces: true,
|
|
||||||
items: () => [],
|
|
||||||
// @ts-ignore
|
|
||||||
render: mentionRenderItems,
|
|
||||||
},
|
|
||||||
HTMLAttributes: {
|
|
||||||
class: "mention",
|
|
||||||
},
|
|
||||||
}).extend({
|
|
||||||
addNodeView() {
|
|
||||||
this.editor.isInitialized = true;
|
|
||||||
return ReactNodeViewRenderer(MentionView);
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
],
|
],
|
||||||
editorProps: {
|
editorProps: {
|
||||||
handleDOMEvents: {
|
handleDOMEvents: {
|
||||||
@@ -77,8 +60,7 @@ const CommentEditor = forwardRef(
|
|||||||
].includes(event.key)
|
].includes(event.key)
|
||||||
) {
|
) {
|
||||||
const emojiCommand = document.querySelector("#emoji-command");
|
const emojiCommand = document.querySelector("#emoji-command");
|
||||||
const mentionPopup = document.querySelector("#mention");
|
if (emojiCommand) {
|
||||||
if (emojiCommand || mentionPopup) {
|
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -102,14 +84,9 @@ const CommentEditor = forwardRef(
|
|||||||
autofocus: (autofocus && "end") || false,
|
autofocus: (autofocus && "end") || false,
|
||||||
});
|
});
|
||||||
|
|
||||||
// Sync content from props for read-only editors (e.g. when updated via
|
|
||||||
// websocket on another browser). Skip for editable editors to avoid
|
|
||||||
// resetting the cursor position on every keystroke.
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!editable && commentEditor && defaultContent) {
|
commentEditor.commands.setContent(defaultContent);
|
||||||
commentEditor.commands.setContent(defaultContent);
|
}, [defaultContent]);
|
||||||
}
|
|
||||||
}, [defaultContent, editable, commentEditor]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
@@ -126,11 +103,7 @@ const CommentEditor = forwardRef(
|
|||||||
}));
|
}));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div ref={focusRef} className={classes.commentEditor}>
|
||||||
ref={focusRef}
|
|
||||||
className={classes.commentEditor}
|
|
||||||
data-editable={editable || undefined}
|
|
||||||
>
|
|
||||||
<EditorContent
|
<EditorContent
|
||||||
editor={commentEditor}
|
editor={commentEditor}
|
||||||
className={clsx(classes.ProseMirror, { [classes.focused]: focused })}
|
className={clsx(classes.ProseMirror, { [classes.focused]: focused })}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { Group, Text, Box, Badge } from "@mantine/core";
|
import { Group, Text, Box, Badge } from "@mantine/core";
|
||||||
import React, { useEffect, useRef, useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import classes from "./comment.module.css";
|
import classes from "./comment.module.css";
|
||||||
import { useAtom, useAtomValue } from "jotai";
|
import { useAtom, useAtomValue } from "jotai";
|
||||||
import { timeAgo } from "@/lib/time";
|
import { timeAgo } from "@/lib/time";
|
||||||
@@ -40,7 +40,6 @@ function CommentListItem({
|
|||||||
const [isLoading, setIsLoading] = useState(false);
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
const editor = useAtomValue(pageEditorAtom);
|
const editor = useAtomValue(pageEditorAtom);
|
||||||
const [content, setContent] = useState<string>(comment.content);
|
const [content, setContent] = useState<string>(comment.content);
|
||||||
const editContentRef = useRef<any>(null);
|
|
||||||
const updateCommentMutation = useUpdateCommentMutation();
|
const updateCommentMutation = useUpdateCommentMutation();
|
||||||
const deleteCommentMutation = useDeleteCommentMutation(comment.pageId);
|
const deleteCommentMutation = useDeleteCommentMutation(comment.pageId);
|
||||||
const resolveCommentMutation = useResolveCommentMutation();
|
const resolveCommentMutation = useResolveCommentMutation();
|
||||||
@@ -57,13 +56,9 @@ function CommentListItem({
|
|||||||
setIsLoading(true);
|
setIsLoading(true);
|
||||||
const commentToUpdate = {
|
const commentToUpdate = {
|
||||||
commentId: comment.id,
|
commentId: comment.id,
|
||||||
content: JSON.stringify(editContentRef.current ?? content),
|
content: JSON.stringify(content),
|
||||||
};
|
};
|
||||||
await updateCommentMutation.mutateAsync(commentToUpdate);
|
await updateCommentMutation.mutateAsync(commentToUpdate);
|
||||||
if (editContentRef.current) {
|
|
||||||
setContent(editContentRef.current);
|
|
||||||
editContentRef.current = null;
|
|
||||||
}
|
|
||||||
setIsEditing(false);
|
setIsEditing(false);
|
||||||
|
|
||||||
emit({
|
emit({
|
||||||
@@ -133,7 +128,6 @@ function CommentListItem({
|
|||||||
setIsEditing(true);
|
setIsEditing(true);
|
||||||
}
|
}
|
||||||
function cancelEdit() {
|
function cancelEdit() {
|
||||||
editContentRef.current = null;
|
|
||||||
setIsEditing(false);
|
setIsEditing(false);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -200,7 +194,7 @@ function CommentListItem({
|
|||||||
<CommentEditor
|
<CommentEditor
|
||||||
defaultContent={content}
|
defaultContent={content}
|
||||||
editable={true}
|
editable={true}
|
||||||
onUpdate={(newContent: any) => { editContentRef.current = newContent; }}
|
onUpdate={(newContent: any) => setContent(newContent)}
|
||||||
onSave={handleUpdateComment}
|
onSave={handleUpdateComment}
|
||||||
autofocus={true}
|
autofocus={true}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -32,14 +32,11 @@
|
|||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
|
max-height: 20vh;
|
||||||
padding-left: 6px;
|
padding-left: 6px;
|
||||||
padding-right: 6px;
|
padding-right: 6px;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
margin-bottom: 2px;
|
margin-bottom: 2px;
|
||||||
}
|
|
||||||
|
|
||||||
&[data-editable] .ProseMirror :global(.ProseMirror){
|
|
||||||
max-height: 50vh;
|
|
||||||
overflow: hidden auto;
|
overflow: hidden auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -8,5 +8,3 @@ export const titleEditorAtom = atom<Editor | null>(null);
|
|||||||
export const readOnlyEditorAtom = atom<Editor | null>(null);
|
export const readOnlyEditorAtom = atom<Editor | null>(null);
|
||||||
|
|
||||||
export const yjsConnectionStatusAtom = atom<string>("");
|
export const yjsConnectionStatusAtom = atom<string>("");
|
||||||
|
|
||||||
export const showAiMenuAtom = atom(false);
|
|
||||||
|
|||||||
@@ -1,53 +1,11 @@
|
|||||||
.bubbleMenu {
|
.bubbleMenu {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: nowrap;
|
|
||||||
overflow-x: auto;
|
|
||||||
max-width: 100vw;
|
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
box-shadow: 0 4px 12px light-dark(#cfcfcf, #0f0f0f);
|
border-radius: 2px;
|
||||||
border-radius: 6px;
|
|
||||||
border: 1px solid
|
border: 1px solid
|
||||||
light-dark(var(--mantine-color-gray-3), var(--mantine-color-gray-8));
|
light-dark(var(--mantine-color-gray-3), var(--mantine-color-gray-8));
|
||||||
background-color: light-dark(
|
|
||||||
var(--mantine-color-white),
|
|
||||||
var(--mantine-color-dark-6)
|
|
||||||
);
|
|
||||||
|
|
||||||
> * {
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
scrollbar-width: none;
|
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.active {
|
.active {
|
||||||
color: light-dark(var(--mantine-color-blue-8), var(--mantine-color-gray-5));
|
color: light-dark(var(--mantine-color-blue-8), var(--mantine-color-gray-5));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.buttonRoot {
|
|
||||||
height: 34px;
|
|
||||||
padding-left: rem(8);
|
|
||||||
padding-right: rem(4);
|
|
||||||
border: none;
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.buttonSeparator {
|
|
||||||
border-right: 1px solid
|
|
||||||
light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4)) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.divider {
|
|
||||||
width: 1px;
|
|
||||||
height: 16px;
|
|
||||||
align-self: center;
|
|
||||||
margin: 0 4px;
|
|
||||||
background-color: light-dark(
|
|
||||||
var(--mantine-color-gray-3),
|
|
||||||
var(--mantine-color-dark-3)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -9,11 +9,10 @@ import {
|
|||||||
IconStrikethrough,
|
IconStrikethrough,
|
||||||
IconUnderline,
|
IconUnderline,
|
||||||
IconMessage,
|
IconMessage,
|
||||||
IconSparkles,
|
|
||||||
} from "@tabler/icons-react";
|
} from "@tabler/icons-react";
|
||||||
import clsx from "clsx";
|
import clsx from "clsx";
|
||||||
import classes from "./bubble-menu.module.css";
|
import classes from "./bubble-menu.module.css";
|
||||||
import { ActionIcon, Button, rem, Tooltip } from "@mantine/core";
|
import { ActionIcon, rem, Tooltip } from "@mantine/core";
|
||||||
import { ColorSelector } from "./color-selector";
|
import { ColorSelector } from "./color-selector";
|
||||||
import { NodeSelector } from "./node-selector";
|
import { NodeSelector } from "./node-selector";
|
||||||
import { TextAlignmentSelector } from "./text-alignment-selector";
|
import { TextAlignmentSelector } from "./text-alignment-selector";
|
||||||
@@ -21,13 +20,11 @@ import {
|
|||||||
draftCommentIdAtom,
|
draftCommentIdAtom,
|
||||||
showCommentPopupAtom,
|
showCommentPopupAtom,
|
||||||
} from "@/features/comment/atoms/comment-atom";
|
} from "@/features/comment/atoms/comment-atom";
|
||||||
import { useAtom, useAtomValue } from "jotai";
|
import { useAtom } from "jotai";
|
||||||
import { v7 as uuid7 } from "uuid";
|
import { v7 as uuid7 } from "uuid";
|
||||||
import { isCellSelection, isTextSelected } from "@docmost/editor-ext";
|
import { isCellSelection, isTextSelected } from "@docmost/editor-ext";
|
||||||
import { LinkSelector } from "@/features/editor/components/bubble-menu/link-selector.tsx";
|
import { LinkSelector } from "@/features/editor/components/bubble-menu/link-selector.tsx";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { showAiMenuAtom } from "@/features/editor/atoms/editor-atoms";
|
|
||||||
import { workspaceAtom } from "@/features/user/atoms/current-user-atom";
|
|
||||||
|
|
||||||
export interface BubbleMenuItem {
|
export interface BubbleMenuItem {
|
||||||
name: string;
|
name: string;
|
||||||
@@ -42,22 +39,14 @@ type EditorBubbleMenuProps = Omit<BubbleMenuProps, "children" | "editor"> & {
|
|||||||
|
|
||||||
export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
|
export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const [showAiMenu, setShowAiMenu] = useAtom(showAiMenuAtom);
|
|
||||||
const [showCommentPopup, setShowCommentPopup] = useAtom(showCommentPopupAtom);
|
const [showCommentPopup, setShowCommentPopup] = useAtom(showCommentPopupAtom);
|
||||||
const workspace = useAtomValue(workspaceAtom);
|
|
||||||
const isGenerativeAiEnabled = workspace?.settings?.ai?.generative === true;
|
|
||||||
const [, setDraftCommentId] = useAtom(draftCommentIdAtom);
|
const [, setDraftCommentId] = useAtom(draftCommentIdAtom);
|
||||||
const showCommentPopupRef = useRef(showCommentPopup);
|
const showCommentPopupRef = useRef(showCommentPopup);
|
||||||
const showAiMenuRef = useRef(showAiMenu);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
showCommentPopupRef.current = showCommentPopup;
|
showCommentPopupRef.current = showCommentPopup;
|
||||||
}, [showCommentPopup]);
|
}, [showCommentPopup]);
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
showAiMenuRef.current = showAiMenu;
|
|
||||||
}, [showAiMenu]);
|
|
||||||
|
|
||||||
const editorState = useEditorState({
|
const editorState = useEditorState({
|
||||||
editor: props.editor,
|
editor: props.editor,
|
||||||
selector: (ctx) => {
|
selector: (ctx) => {
|
||||||
@@ -134,7 +123,6 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
|
|||||||
empty ||
|
empty ||
|
||||||
isNodeSelection(selection) ||
|
isNodeSelection(selection) ||
|
||||||
isCellSelection(selection) ||
|
isCellSelection(selection) ||
|
||||||
showAiMenuRef.current ||
|
|
||||||
showCommentPopupRef?.current
|
showCommentPopupRef?.current
|
||||||
) {
|
) {
|
||||||
return false;
|
return false;
|
||||||
@@ -158,31 +146,9 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
|
|||||||
const [isLinkSelectorOpen, setIsLinkSelectorOpen] = useState(false);
|
const [isLinkSelectorOpen, setIsLinkSelectorOpen] = useState(false);
|
||||||
const [isColorSelectorOpen, setIsColorSelectorOpen] = useState(false);
|
const [isColorSelectorOpen, setIsColorSelectorOpen] = useState(false);
|
||||||
|
|
||||||
// Hide the bubble menu immediately when AI menu is shown
|
|
||||||
if (showAiMenu) return;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<BubbleMenu
|
<BubbleMenu {...bubbleMenuProps} style={{ zIndex: 200, position: "relative"}}>
|
||||||
{...bubbleMenuProps}
|
|
||||||
style={{ zIndex: 200, position: "relative" }}
|
|
||||||
>
|
|
||||||
<div className={classes.bubbleMenu}>
|
<div className={classes.bubbleMenu}>
|
||||||
{isGenerativeAiEnabled && (
|
|
||||||
<>
|
|
||||||
<Button
|
|
||||||
variant="default"
|
|
||||||
className={clsx(classes.buttonRoot)}
|
|
||||||
radius="0"
|
|
||||||
leftSection={<IconSparkles size={16} />}
|
|
||||||
onClick={() => {
|
|
||||||
setShowAiMenu(true);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{t("Ask AI")}
|
|
||||||
</Button>
|
|
||||||
<div className={classes.divider} />
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
<NodeSelector
|
<NodeSelector
|
||||||
editor={props.editor}
|
editor={props.editor}
|
||||||
isOpen={isNodeSelectorOpen}
|
isOpen={isNodeSelectorOpen}
|
||||||
@@ -246,18 +212,16 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Tooltip label={t(commentItem.name)} withArrow withinPortal={false}>
|
<ActionIcon
|
||||||
<ActionIcon
|
variant="default"
|
||||||
variant="default"
|
size="lg"
|
||||||
size="lg"
|
radius="0"
|
||||||
radius="6px"
|
aria-label={t(commentItem.name)}
|
||||||
aria-label={t(commentItem.name)}
|
style={{ border: "none" }}
|
||||||
style={{ border: "none" }}
|
onClick={commentItem.command}
|
||||||
onClick={commentItem.command}
|
>
|
||||||
>
|
<IconMessage size={16} stroke={2} />
|
||||||
<IconMessage size={16} stroke={2} />
|
</ActionIcon>
|
||||||
</ActionIcon>
|
|
||||||
</Tooltip>
|
|
||||||
</div>
|
</div>
|
||||||
</BubbleMenu>
|
</BubbleMenu>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
import React, { Dispatch, FC, SetStateAction } from "react";
|
import React, { Dispatch, FC, SetStateAction } from "react";
|
||||||
import { IconCheck, IconChevronDown } from "@tabler/icons-react";
|
import { IconCheck, IconChevronDown, IconPalette } from "@tabler/icons-react";
|
||||||
import {
|
import {
|
||||||
|
ActionIcon,
|
||||||
Button,
|
Button,
|
||||||
Popover,
|
Popover,
|
||||||
rem,
|
rem,
|
||||||
@@ -14,8 +15,6 @@ import {
|
|||||||
import type { Editor } from "@tiptap/react";
|
import type { Editor } from "@tiptap/react";
|
||||||
import { useEditorState } from "@tiptap/react";
|
import { useEditorState } from "@tiptap/react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import clsx from "clsx";
|
|
||||||
import classes from "./bubble-menu.module.css";
|
|
||||||
|
|
||||||
export interface BubbleColorMenuItem {
|
export interface BubbleColorMenuItem {
|
||||||
name: string;
|
name: string;
|
||||||
@@ -167,10 +166,14 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
|
|||||||
onClick={() => setIsOpen(!isOpen)}
|
onClick={() => setIsOpen(!isOpen)}
|
||||||
data-text-color={activeColorItem?.color || ""}
|
data-text-color={activeColorItem?.color || ""}
|
||||||
data-highlight-color={activeHighlightItem?.color || ""}
|
data-highlight-color={activeHighlightItem?.color || ""}
|
||||||
className={clsx(["color-selector-trigger", classes.buttonRoot])}
|
className="color-selector-trigger"
|
||||||
style={{
|
style={{
|
||||||
|
height: "34px",
|
||||||
|
border: "none",
|
||||||
fontWeight: 500,
|
fontWeight: 500,
|
||||||
fontSize: rem(16),
|
fontSize: rem(16),
|
||||||
|
paddingLeft: rem(8),
|
||||||
|
paddingRight: rem(4),
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
A
|
A
|
||||||
|
|||||||
@@ -34,7 +34,7 @@ export const LinkSelector: FC<LinkSelectorProps> = ({
|
|||||||
withArrow
|
withArrow
|
||||||
>
|
>
|
||||||
<Popover.Target>
|
<Popover.Target>
|
||||||
<Tooltip label={t("Add link")} withArrow withinPortal={false}>
|
<Tooltip label={t("Add link")} withArrow>
|
||||||
<ActionIcon
|
<ActionIcon
|
||||||
variant="default"
|
variant="default"
|
||||||
size="lg"
|
size="lg"
|
||||||
|
|||||||
@@ -1,7 +1,6 @@
|
|||||||
import React, { Dispatch, FC, SetStateAction } from "react";
|
import React, { Dispatch, FC, SetStateAction } from "react";
|
||||||
import {
|
import {
|
||||||
IconBlockquote,
|
IconBlockquote,
|
||||||
IconCaretRightFilled,
|
|
||||||
IconCheck,
|
IconCheck,
|
||||||
IconCheckbox,
|
IconCheckbox,
|
||||||
IconChevronDown,
|
IconChevronDown,
|
||||||
@@ -9,16 +8,14 @@ import {
|
|||||||
IconH1,
|
IconH1,
|
||||||
IconH2,
|
IconH2,
|
||||||
IconH3,
|
IconH3,
|
||||||
IconInfoCircle,
|
|
||||||
IconList,
|
IconList,
|
||||||
IconListNumbers,
|
IconListNumbers,
|
||||||
IconTypography,
|
IconTypography,
|
||||||
} from "@tabler/icons-react";
|
} from "@tabler/icons-react";
|
||||||
import { Popover, Button, ScrollArea, Tooltip } from "@mantine/core";
|
import { Popover, Button, ScrollArea } from "@mantine/core";
|
||||||
import type { Editor } from "@tiptap/react";
|
import type { Editor } from "@tiptap/react";
|
||||||
import { useEditorState } from "@tiptap/react";
|
import { useEditorState } from "@tiptap/react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import classes from "./bubble-menu.module.css";
|
|
||||||
|
|
||||||
interface NodeSelectorProps {
|
interface NodeSelectorProps {
|
||||||
editor: Editor | null;
|
editor: Editor | null;
|
||||||
@@ -57,8 +54,6 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
|
|||||||
isTaskItem: ctx.editor.isActive("taskItem"),
|
isTaskItem: ctx.editor.isActive("taskItem"),
|
||||||
isBlockquote: ctx.editor.isActive("blockquote"),
|
isBlockquote: ctx.editor.isActive("blockquote"),
|
||||||
isCodeBlock: ctx.editor.isActive("codeBlock"),
|
isCodeBlock: ctx.editor.isActive("codeBlock"),
|
||||||
isCallout: ctx.editor.isActive("callout"),
|
|
||||||
isDetails: ctx.editor.isActive("details"),
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
@@ -128,18 +123,6 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
|
|||||||
command: () => editor.chain().focus().toggleCodeBlock().run(),
|
command: () => editor.chain().focus().toggleCodeBlock().run(),
|
||||||
isActive: () => editorState?.isCodeBlock,
|
isActive: () => editorState?.isCodeBlock,
|
||||||
},
|
},
|
||||||
{
|
|
||||||
name: "Callout",
|
|
||||||
icon: IconInfoCircle,
|
|
||||||
command: () => editor.chain().focus().toggleCallout().run(),
|
|
||||||
isActive: () => editorState?.isCallout,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Toggle block",
|
|
||||||
icon: IconCaretRightFilled,
|
|
||||||
command: () => editor.chain().focus().setDetails().run(),
|
|
||||||
isActive: () => editorState?.isDetails,
|
|
||||||
},
|
|
||||||
];
|
];
|
||||||
|
|
||||||
const activeItem = items.filter((item) => item.isActive()).pop() ?? {
|
const activeItem = items.filter((item) => item.isActive()).pop() ?? {
|
||||||
@@ -149,18 +132,15 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
|
|||||||
return (
|
return (
|
||||||
<Popover opened={isOpen} withArrow>
|
<Popover opened={isOpen} withArrow>
|
||||||
<Popover.Target>
|
<Popover.Target>
|
||||||
<Tooltip label={t("Turn into")} withArrow withinPortal={false} disabled={isOpen}>
|
<Button
|
||||||
<Button
|
variant="default"
|
||||||
className={classes.buttonRoot}
|
style={{ border: "none", height: "34px" }}
|
||||||
variant="default"
|
radius="0"
|
||||||
style={{ border: "none", height: "34px" }}
|
rightSection={<IconChevronDown size={16} />}
|
||||||
radius="0"
|
onClick={() => setIsOpen(!isOpen)}
|
||||||
rightSection={<IconChevronDown size={16} />}
|
>
|
||||||
onClick={() => setIsOpen(!isOpen)}
|
{t(activeItem?.name)}
|
||||||
>
|
</Button>
|
||||||
{t(activeItem?.name)}
|
|
||||||
</Button>
|
|
||||||
</Tooltip>
|
|
||||||
</Popover.Target>
|
</Popover.Target>
|
||||||
|
|
||||||
<Popover.Dropdown>
|
<Popover.Dropdown>
|
||||||
|
|||||||
+11
-13
@@ -7,7 +7,7 @@ import {
|
|||||||
IconCheck,
|
IconCheck,
|
||||||
IconChevronDown,
|
IconChevronDown,
|
||||||
} from "@tabler/icons-react";
|
} from "@tabler/icons-react";
|
||||||
import { Popover, Button, ScrollArea, Tooltip, rem } from "@mantine/core";
|
import { Popover, Button, ScrollArea, rem } from "@mantine/core";
|
||||||
import type { Editor } from "@tiptap/react";
|
import type { Editor } from "@tiptap/react";
|
||||||
import { useEditorState } from "@tiptap/react";
|
import { useEditorState } from "@tiptap/react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
@@ -84,18 +84,16 @@ export const TextAlignmentSelector: FC<TextAlignmentProps> = ({
|
|||||||
return (
|
return (
|
||||||
<Popover opened={isOpen} withArrow>
|
<Popover opened={isOpen} withArrow>
|
||||||
<Popover.Target>
|
<Popover.Target>
|
||||||
<Tooltip label={t("Text align")} withArrow withinPortal={false} disabled={isOpen}>
|
<Button
|
||||||
<Button
|
variant="default"
|
||||||
variant="default"
|
style={{ border: "none", height: "34px" }}
|
||||||
style={{ border: "none", height: "34px" }}
|
px="5"
|
||||||
px="5"
|
radius="0"
|
||||||
radius="0"
|
rightSection={<IconChevronDown size={16} />}
|
||||||
rightSection={<IconChevronDown size={16} />}
|
onClick={() => setIsOpen(!isOpen)}
|
||||||
onClick={() => setIsOpen(!isOpen)}
|
>
|
||||||
>
|
<activeItem.icon style={{ width: rem(16) }} stroke={2} />
|
||||||
<activeItem.icon style={{ width: rem(16) }} stroke={2} />
|
</Button>
|
||||||
</Button>
|
|
||||||
</Tooltip>
|
|
||||||
</Popover.Target>
|
</Popover.Target>
|
||||||
|
|
||||||
<Popover.Dropdown>
|
<Popover.Dropdown>
|
||||||
|
|||||||
@@ -4,7 +4,6 @@ import { uploadAttachmentAction } from "../attachment/upload-attachment-action";
|
|||||||
import { createMentionAction } from "@/features/editor/components/link/internal-link-paste.ts";
|
import { createMentionAction } from "@/features/editor/components/link/internal-link-paste.ts";
|
||||||
import { INTERNAL_LINK_REGEX } from "@/lib/constants.ts";
|
import { INTERNAL_LINK_REGEX } from "@/lib/constants.ts";
|
||||||
import { Editor } from "@tiptap/core";
|
import { Editor } from "@tiptap/core";
|
||||||
import { matchIntegrationLink } from "@docmost/editor-ext";
|
|
||||||
|
|
||||||
export const handlePaste = (
|
export const handlePaste = (
|
||||||
editor: Editor,
|
editor: Editor,
|
||||||
@@ -14,21 +13,6 @@ export const handlePaste = (
|
|||||||
) => {
|
) => {
|
||||||
const clipboardData = event.clipboardData.getData("text/plain");
|
const clipboardData = event.clipboardData.getData("text/plain");
|
||||||
|
|
||||||
const integrationMatch = matchIntegrationLink(clipboardData.trim());
|
|
||||||
if (integrationMatch && editor.state.selection.empty) {
|
|
||||||
event.preventDefault();
|
|
||||||
editor
|
|
||||||
.chain()
|
|
||||||
.focus()
|
|
||||||
.setIntegrationLink({
|
|
||||||
url: clipboardData.trim(),
|
|
||||||
provider: integrationMatch.provider,
|
|
||||||
status: "pending",
|
|
||||||
})
|
|
||||||
.run();
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (INTERNAL_LINK_REGEX.test(clipboardData)) {
|
if (INTERNAL_LINK_REGEX.test(clipboardData)) {
|
||||||
// we have to do this validation here to allow the default link extension to takeover if needs be
|
// we have to do this validation here to allow the default link extension to takeover if needs be
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|||||||
-10
@@ -1,10 +0,0 @@
|
|||||||
.card {
|
|
||||||
max-width: 100%;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: border-color 150ms ease;
|
|
||||||
margin: 4px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card:hover {
|
|
||||||
border-color: var(--mantine-color-blue-4);
|
|
||||||
}
|
|
||||||
-146
@@ -1,146 +0,0 @@
|
|||||||
import { NodeViewWrapper } from "@tiptap/react";
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
Group,
|
|
||||||
Text,
|
|
||||||
Badge,
|
|
||||||
Avatar,
|
|
||||||
Skeleton,
|
|
||||||
Anchor,
|
|
||||||
Stack,
|
|
||||||
} from "@mantine/core";
|
|
||||||
import { useEffect, useCallback, memo } from "react";
|
|
||||||
import { unfurlUrl } from "@/features/integration/services/integration-service";
|
|
||||||
import classes from "./integration-link-view.module.css";
|
|
||||||
|
|
||||||
const providerIcons: Record<string, string> = {
|
|
||||||
github: "https://github.githubassets.com/favicons/favicon-dark.svg",
|
|
||||||
gitlab: "https://gitlab.com/assets/favicon-72a2cad5025aa931d6ea56c3201d1f18e68a8571da3c2571592f63571e0c5571.png",
|
|
||||||
jira: "https://wac-cdn.atlassian.com/assets/img/favicons/atlassian/favicon.png",
|
|
||||||
linear: "https://linear.app/favicon.ico",
|
|
||||||
google_docs: "https://ssl.gstatic.com/docs/documents/images/kix-favicon7.ico",
|
|
||||||
figma: "https://static.figma.com/app/icon/1/favicon.png",
|
|
||||||
};
|
|
||||||
|
|
||||||
function IntegrationLinkView(props: any) {
|
|
||||||
const { node, updateAttributes, editor } = props;
|
|
||||||
const { url, provider, unfurlData, status } = node.attrs;
|
|
||||||
|
|
||||||
const doUnfurl = useCallback(async () => {
|
|
||||||
if (status !== "pending" || !url) return;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const result = await unfurlUrl({ url });
|
|
||||||
if (result) {
|
|
||||||
updateAttributes({
|
|
||||||
unfurlData: result,
|
|
||||||
status: "loaded",
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
updateAttributes({ status: "error" });
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
updateAttributes({ status: "error" });
|
|
||||||
}
|
|
||||||
}, [url, status, updateAttributes]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (status === "pending") {
|
|
||||||
doUnfurl();
|
|
||||||
}
|
|
||||||
}, [status, doUnfurl]);
|
|
||||||
|
|
||||||
if (status === "pending") {
|
|
||||||
return (
|
|
||||||
<NodeViewWrapper data-drag-handle="">
|
|
||||||
<Card className={classes.card} withBorder padding="sm" radius="sm">
|
|
||||||
<Group gap="sm">
|
|
||||||
<Skeleton circle height={24} />
|
|
||||||
<Stack gap={4} style={{ flex: 1 }}>
|
|
||||||
<Skeleton height={14} width="60%" />
|
|
||||||
<Skeleton height={10} width="80%" />
|
|
||||||
</Stack>
|
|
||||||
</Group>
|
|
||||||
</Card>
|
|
||||||
</NodeViewWrapper>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (status === "error" || !unfurlData) {
|
|
||||||
return (
|
|
||||||
<NodeViewWrapper data-drag-handle="">
|
|
||||||
<Card className={classes.card} withBorder padding="sm" radius="sm">
|
|
||||||
<Anchor href={url} target="_blank" rel="noopener" size="sm">
|
|
||||||
{url}
|
|
||||||
</Anchor>
|
|
||||||
</Card>
|
|
||||||
</NodeViewWrapper>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const iconUrl = providerIcons[provider] ?? undefined;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<NodeViewWrapper data-drag-handle="">
|
|
||||||
<Card
|
|
||||||
className={classes.card}
|
|
||||||
withBorder
|
|
||||||
padding="sm"
|
|
||||||
radius="sm"
|
|
||||||
component="a"
|
|
||||||
href={url}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener"
|
|
||||||
style={{ textDecoration: "none", color: "inherit" }}
|
|
||||||
>
|
|
||||||
<Group gap="sm" wrap="nowrap">
|
|
||||||
{unfurlData.authorAvatarUrl ? (
|
|
||||||
<Avatar src={unfurlData.authorAvatarUrl} size={28} radius="xl" />
|
|
||||||
) : iconUrl ? (
|
|
||||||
<Avatar src={iconUrl} size={28} radius="sm" />
|
|
||||||
) : null}
|
|
||||||
|
|
||||||
<Stack gap={2} style={{ flex: 1, minWidth: 0 }}>
|
|
||||||
<Group gap="xs" wrap="nowrap">
|
|
||||||
<Text size="sm" fw={600} truncate>
|
|
||||||
{unfurlData.title}
|
|
||||||
</Text>
|
|
||||||
{unfurlData.status && (
|
|
||||||
<Badge
|
|
||||||
size="xs"
|
|
||||||
variant="light"
|
|
||||||
color={unfurlData.statusColor ?? "gray"}
|
|
||||||
style={{ flexShrink: 0 }}
|
|
||||||
>
|
|
||||||
{unfurlData.status}
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
</Group>
|
|
||||||
|
|
||||||
{unfurlData.description && (
|
|
||||||
<Text size="xs" c="dimmed" lineClamp={1}>
|
|
||||||
{unfurlData.description}
|
|
||||||
</Text>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Group gap="xs">
|
|
||||||
{iconUrl && (
|
|
||||||
<Avatar src={iconUrl} size={14} radius="sm" />
|
|
||||||
)}
|
|
||||||
<Text size="xs" c="dimmed">
|
|
||||||
{unfurlData.provider}
|
|
||||||
</Text>
|
|
||||||
{unfurlData.author && (
|
|
||||||
<Text size="xs" c="dimmed">
|
|
||||||
· {unfurlData.author}
|
|
||||||
</Text>
|
|
||||||
)}
|
|
||||||
</Group>
|
|
||||||
</Stack>
|
|
||||||
</Group>
|
|
||||||
</Card>
|
|
||||||
</NodeViewWrapper>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default memo(IntegrationLinkView);
|
|
||||||
@@ -27,7 +27,7 @@ export const LinkPreviewPanel = ({
|
|||||||
<>
|
<>
|
||||||
<Card withBorder radius="md" padding="xs" bg="var(--mantine-color-body)">
|
<Card withBorder radius="md" padding="xs" bg="var(--mantine-color-body)">
|
||||||
<Flex align="center">
|
<Flex align="center">
|
||||||
<Tooltip label={url} withArrow withinPortal={false}>
|
<Tooltip label={url}>
|
||||||
<Anchor
|
<Anchor
|
||||||
href={url}
|
href={url}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
|
|||||||
@@ -10,7 +10,6 @@ import React, {
|
|||||||
import { useSearchSuggestionsQuery } from "@/features/search/queries/search-query.ts";
|
import { useSearchSuggestionsQuery } from "@/features/search/queries/search-query.ts";
|
||||||
import {
|
import {
|
||||||
ActionIcon,
|
ActionIcon,
|
||||||
Divider,
|
|
||||||
Group,
|
Group,
|
||||||
Paper,
|
Paper,
|
||||||
ScrollArea,
|
ScrollArea,
|
||||||
@@ -52,7 +51,6 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
|
|||||||
const tree = useMemo(() => new SimpleTree<SpaceTreeNode>(data), [data]);
|
const tree = useMemo(() => new SimpleTree<SpaceTreeNode>(data), [data]);
|
||||||
const createPageMutation = useCreatePageMutation();
|
const createPageMutation = useCreatePageMutation();
|
||||||
const emit = useQueryEmit();
|
const emit = useQueryEmit();
|
||||||
const isInCommentContext = props.isInCommentContext ?? false;
|
|
||||||
|
|
||||||
const { data: suggestion, isLoading } = useSearchSuggestionsQuery({
|
const { data: suggestion, isLoading } = useSearchSuggestionsQuery({
|
||||||
query: props.query,
|
query: props.query,
|
||||||
@@ -60,7 +58,6 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
|
|||||||
includePages: true,
|
includePages: true,
|
||||||
spaceId: space.id,
|
spaceId: space.id,
|
||||||
limit: 10,
|
limit: 10,
|
||||||
preload: true,
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const createPageItem = (label: string) : MentionSuggestionItem => {
|
const createPageItem = (label: string) : MentionSuggestionItem => {
|
||||||
@@ -105,9 +102,7 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
|
|||||||
})),
|
})),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
if (!isInCommentContext && props.query) {
|
items.push(createPageItem(props.query));
|
||||||
items.push(createPageItem(props.query));
|
|
||||||
}
|
|
||||||
|
|
||||||
setRenderItems(items);
|
setRenderItems(items);
|
||||||
// update editor storage
|
// update editor storage
|
||||||
@@ -255,51 +250,35 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// if no results and enter what to do?
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
viewportRef.current
|
viewportRef.current
|
||||||
?.querySelector(`[data-item-index="${selectedIndex}"]`)
|
?.querySelector(`[data-item-index="${selectedIndex}"]`)
|
||||||
?.scrollIntoView({ block: "nearest" });
|
?.scrollIntoView({ block: "nearest" });
|
||||||
}, [selectedIndex]);
|
}, [selectedIndex]);
|
||||||
|
|
||||||
const popupWidth = isInCommentContext ? 280 : 320;
|
|
||||||
|
|
||||||
if (renderItems.length === 0) {
|
if (renderItems.length === 0) {
|
||||||
return (
|
return (
|
||||||
<Paper id="mention" shadow="md" py="xs" withBorder radius="md">
|
<Paper shadow="md" p="xs" withBorder>
|
||||||
<Text c="dimmed" size="sm" px="sm">
|
{ t("No results") }
|
||||||
{ t("No results") }
|
|
||||||
</Text>
|
|
||||||
</Paper>
|
</Paper>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const hasUsers = renderItems.some((item) => item.entityType === "user");
|
|
||||||
const hasPages = renderItems.some((item) => item.entityType === "page" && item.id !== null);
|
|
||||||
const createPageItemData = renderItems.find((item) => item.entityType === "page" && item.id === null);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Paper id="mention" shadow="md" withBorder radius="md" py={6}>
|
<Paper id="mention" shadow="md" p="xs" withBorder>
|
||||||
<ScrollArea.Autosize
|
<ScrollArea.Autosize
|
||||||
viewportRef={viewportRef}
|
viewportRef={viewportRef}
|
||||||
mah={350}
|
mah={350}
|
||||||
w={popupWidth}
|
w={320}
|
||||||
scrollbarSize={6}
|
scrollbarSize={8}
|
||||||
>
|
>
|
||||||
{renderItems?.map((item, index) => {
|
{renderItems?.map((item, index) => {
|
||||||
if (item.entityType === "header") {
|
if (item.entityType === "header") {
|
||||||
const isFirst = index === 0;
|
|
||||||
return (
|
return (
|
||||||
<div key={`${item.label}-${index}`}>
|
<div key={`${item.label}-${index}`}>
|
||||||
{!isFirst && <Divider my={6} />}
|
<Text c="dimmed" mb={4} tt="uppercase">
|
||||||
<Text
|
|
||||||
c="dimmed"
|
|
||||||
size="xs"
|
|
||||||
fw={500}
|
|
||||||
px="sm"
|
|
||||||
pt={isFirst ? 2 : 4}
|
|
||||||
pb={4}
|
|
||||||
tt="uppercase"
|
|
||||||
>
|
|
||||||
{item.label}
|
{item.label}
|
||||||
</Text>
|
</Text>
|
||||||
</div>
|
</div>
|
||||||
@@ -313,9 +292,8 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
|
|||||||
className={clsx(classes.menuBtn, {
|
className={clsx(classes.menuBtn, {
|
||||||
[classes.selectedItem]: index === selectedIndex,
|
[classes.selectedItem]: index === selectedIndex,
|
||||||
})}
|
})}
|
||||||
px="sm"
|
|
||||||
>
|
>
|
||||||
<Group gap="sm">
|
<Group>
|
||||||
<CustomAvatar
|
<CustomAvatar
|
||||||
size={"sm"}
|
size={"sm"}
|
||||||
avatarUrl={item.avatarUrl}
|
avatarUrl={item.avatarUrl}
|
||||||
@@ -330,7 +308,7 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
|
|||||||
</Group>
|
</Group>
|
||||||
</UnstyledButton>
|
</UnstyledButton>
|
||||||
);
|
);
|
||||||
} else if (item.entityType === "page" && item.id !== null) {
|
} else if (item.entityType === "page") {
|
||||||
return (
|
return (
|
||||||
<UnstyledButton
|
<UnstyledButton
|
||||||
data-item-index={index}
|
data-item-index={index}
|
||||||
@@ -339,24 +317,28 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
|
|||||||
className={clsx(classes.menuBtn, {
|
className={clsx(classes.menuBtn, {
|
||||||
[classes.selectedItem]: index === selectedIndex,
|
[classes.selectedItem]: index === selectedIndex,
|
||||||
})}
|
})}
|
||||||
px="sm"
|
|
||||||
>
|
>
|
||||||
<Group gap="sm" wrap="nowrap">
|
<Group>
|
||||||
<ActionIcon
|
<ActionIcon
|
||||||
variant="subtle"
|
variant="default"
|
||||||
component="div"
|
component="div"
|
||||||
aria-label={item.label}
|
aria-label={item.label}
|
||||||
color="gray"
|
|
||||||
size="sm"
|
|
||||||
>
|
>
|
||||||
{item.icon || (
|
{item.icon || (
|
||||||
<IconFileDescription size={18} stroke={1.5} />
|
<ActionIcon
|
||||||
|
component="span"
|
||||||
|
variant="transparent"
|
||||||
|
color="gray"
|
||||||
|
size={18}
|
||||||
|
>
|
||||||
|
{ (item.id) ? <IconFileDescription size={18} /> : <IconPlus size={18} /> }
|
||||||
|
</ActionIcon>
|
||||||
)}
|
)}
|
||||||
</ActionIcon>
|
</ActionIcon>
|
||||||
|
|
||||||
<div style={{ flex: 1, minWidth: 0 }}>
|
<div style={{ flex: 1 }}>
|
||||||
<Text size="sm" fw={500} truncate>
|
<Text size="sm" fw={500}>
|
||||||
{item.label}
|
{ (item.id) ? item.label : t("Create page") + ': ' + item.label }
|
||||||
</Text>
|
</Text>
|
||||||
</div>
|
</div>
|
||||||
</Group>
|
</Group>
|
||||||
@@ -366,37 +348,6 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
|
|||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
})}
|
})}
|
||||||
|
|
||||||
{createPageItemData && !isInCommentContext && (
|
|
||||||
<>
|
|
||||||
{(hasUsers || hasPages) && <Divider my={6} />}
|
|
||||||
<UnstyledButton
|
|
||||||
data-item-index={renderItems.indexOf(createPageItemData)}
|
|
||||||
onClick={() => selectItem(renderItems.indexOf(createPageItemData))}
|
|
||||||
className={clsx(classes.menuBtn, {
|
|
||||||
[classes.selectedItem]: renderItems.indexOf(createPageItemData) === selectedIndex,
|
|
||||||
})}
|
|
||||||
px="sm"
|
|
||||||
>
|
|
||||||
<Group gap="sm" wrap="nowrap">
|
|
||||||
<ActionIcon
|
|
||||||
variant="subtle"
|
|
||||||
component="div"
|
|
||||||
color="gray"
|
|
||||||
size="sm"
|
|
||||||
>
|
|
||||||
<IconPlus size={16} stroke={1.5} />
|
|
||||||
</ActionIcon>
|
|
||||||
|
|
||||||
<div style={{ flex: 1, minWidth: 0 }}>
|
|
||||||
<Text size="sm" fw={500} truncate>
|
|
||||||
{t("Create page")}: {createPageItemData.label}
|
|
||||||
</Text>
|
|
||||||
</div>
|
|
||||||
</Group>
|
|
||||||
</UnstyledButton>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</ScrollArea.Autosize>
|
</ScrollArea.Autosize>
|
||||||
</Paper>
|
</Paper>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -17,13 +17,8 @@ const mentionRenderItems = () => {
|
|||||||
let component: ReactRenderer | null = null;
|
let component: ReactRenderer | null = null;
|
||||||
let activeClientRect: (() => DOMRect) | null = null;
|
let activeClientRect: (() => DOMRect) | null = null;
|
||||||
let updatePositionCleanup: (() => void) | null = null;
|
let updatePositionCleanup: (() => void) | null = null;
|
||||||
let outsideClickHandler: ((e: MouseEvent) => void) | null = null;
|
|
||||||
|
|
||||||
const destroy = () => {
|
const destroy = () => {
|
||||||
if (outsideClickHandler) {
|
|
||||||
document.removeEventListener("pointerdown", outsideClickHandler);
|
|
||||||
outsideClickHandler = null;
|
|
||||||
}
|
|
||||||
updatePositionCleanup?.();
|
updatePositionCleanup?.();
|
||||||
updatePositionCleanup = null;
|
updatePositionCleanup = null;
|
||||||
component?.destroy();
|
component?.destroy();
|
||||||
@@ -50,14 +45,8 @@ const mentionRenderItems = () => {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const editorDom = props.editor?.view?.dom;
|
|
||||||
const asideEl = editorDom?.closest(".mantine-AppShell-aside");
|
|
||||||
const dialogEl = editorDom?.closest("[data-comment-dialog]");
|
|
||||||
const isInCommentContext = !!(asideEl || dialogEl);
|
|
||||||
// const isInCommentContext = !!asideEl;
|
|
||||||
|
|
||||||
component = new ReactRenderer(MentionList, {
|
component = new ReactRenderer(MentionList, {
|
||||||
props: { ...props, isInCommentContext },
|
props,
|
||||||
editor: props.editor,
|
editor: props.editor,
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -70,18 +59,6 @@ const mentionRenderItems = () => {
|
|||||||
const { element } = component;
|
const { element } = component;
|
||||||
document.body.appendChild(element);
|
document.body.appendChild(element);
|
||||||
|
|
||||||
outsideClickHandler = (e: MouseEvent) => {
|
|
||||||
const target = e.target as Node;
|
|
||||||
if (element && !element.contains(target)) {
|
|
||||||
destroy();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
document.addEventListener("pointerdown", outsideClickHandler);
|
|
||||||
|
|
||||||
const shiftMiddleware = asideEl
|
|
||||||
? shift({ boundary: asideEl, crossAxis: true, padding: 8 })
|
|
||||||
: shift();
|
|
||||||
|
|
||||||
updatePositionCleanup = autoUpdate(
|
updatePositionCleanup = autoUpdate(
|
||||||
{
|
{
|
||||||
getBoundingClientRect: () =>
|
getBoundingClientRect: () =>
|
||||||
@@ -99,7 +76,7 @@ const mentionRenderItems = () => {
|
|||||||
element,
|
element,
|
||||||
{
|
{
|
||||||
placement: "bottom-start",
|
placement: "bottom-start",
|
||||||
middleware: [offset(4), flip(), shiftMiddleware],
|
middleware: [offset(0), flip(), shift()],
|
||||||
},
|
},
|
||||||
).then(({ x, y }) => {
|
).then(({ x, y }) => {
|
||||||
Object.assign(element.style, {
|
Object.assign(element.style, {
|
||||||
|
|||||||
@@ -31,14 +31,14 @@
|
|||||||
|
|
||||||
.menuBtn {
|
.menuBtn {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 6px 4px;
|
padding: 4px;
|
||||||
margin-bottom: 1px;
|
margin-bottom: 2px;
|
||||||
color: var(--mantine-color-text);
|
color: var(--mantine-color-text);
|
||||||
border-radius: var(--mantine-radius-sm);
|
border-radius: var(--mantine-radius-sm);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
@mixin light {
|
@mixin light {
|
||||||
background: var(--mantine-color-gray-1);
|
background: var(--mantine-color-gray-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin dark {
|
@mixin dark {
|
||||||
@@ -49,7 +49,7 @@
|
|||||||
|
|
||||||
.selectedItem {
|
.selectedItem {
|
||||||
@mixin light {
|
@mixin light {
|
||||||
background: var(--mantine-color-gray-1);
|
background: var(--mantine-color-gray-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin dark {
|
@mixin dark {
|
||||||
|
|||||||
@@ -7,7 +7,6 @@ export interface MentionListProps {
|
|||||||
range: Range;
|
range: Range;
|
||||||
text: string;
|
text: string;
|
||||||
editor: Editor;
|
editor: Editor;
|
||||||
isInCommentContext?: boolean;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export type MentionSuggestionItem =
|
export type MentionSuggestionItem =
|
||||||
|
|||||||
@@ -43,7 +43,6 @@ import {
|
|||||||
Highlight,
|
Highlight,
|
||||||
UniqueID,
|
UniqueID,
|
||||||
SharedStorage,
|
SharedStorage,
|
||||||
IntegrationLink,
|
|
||||||
} from "@docmost/editor-ext";
|
} from "@docmost/editor-ext";
|
||||||
import {
|
import {
|
||||||
randomElement,
|
randomElement,
|
||||||
@@ -61,7 +60,6 @@ import DrawioView from "../components/drawio/drawio-view";
|
|||||||
import ExcalidrawView from "@/features/editor/components/excalidraw/excalidraw-view.tsx";
|
import ExcalidrawView from "@/features/editor/components/excalidraw/excalidraw-view.tsx";
|
||||||
import EmbedView from "@/features/editor/components/embed/embed-view.tsx";
|
import EmbedView from "@/features/editor/components/embed/embed-view.tsx";
|
||||||
import SubpagesView from "@/features/editor/components/subpages/subpages-view.tsx";
|
import SubpagesView from "@/features/editor/components/subpages/subpages-view.tsx";
|
||||||
import IntegrationLinkView from "@/features/editor/components/integration-link/integration-link-view.tsx";
|
|
||||||
import { common, createLowlight } from "lowlight";
|
import { common, createLowlight } from "lowlight";
|
||||||
import plaintext from "highlight.js/lib/languages/plaintext";
|
import plaintext from "highlight.js/lib/languages/plaintext";
|
||||||
import powershell from "highlight.js/lib/languages/powershell";
|
import powershell from "highlight.js/lib/languages/powershell";
|
||||||
@@ -233,9 +231,6 @@ export const mainExtensions = [
|
|||||||
Subpages.configure({
|
Subpages.configure({
|
||||||
view: SubpagesView,
|
view: SubpagesView,
|
||||||
}),
|
}),
|
||||||
IntegrationLink.configure({
|
|
||||||
view: IntegrationLinkView,
|
|
||||||
}),
|
|
||||||
MarkdownClipboard.configure({
|
MarkdownClipboard.configure({
|
||||||
transformPastedText: true,
|
transformPastedText: true,
|
||||||
}),
|
}),
|
||||||
|
|||||||
@@ -66,7 +66,6 @@ import { PageEditMode } from "@/features/user/types/user.types.ts";
|
|||||||
import { jwtDecode } from "jwt-decode";
|
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";
|
import { useEditorScroll } from "./hooks/use-editor-scroll";
|
||||||
import { EditorAiMenu } from "@/ee/ai/components/editor/ai-menu/ai-menu";
|
|
||||||
|
|
||||||
interface PageEditorProps {
|
interface PageEditorProps {
|
||||||
pageId: string;
|
pageId: string;
|
||||||
@@ -406,7 +405,6 @@ export default function PageEditor({
|
|||||||
|
|
||||||
{editor && editorIsEditable && (
|
{editor && editorIsEditable && (
|
||||||
<div>
|
<div>
|
||||||
<EditorAiMenu editor={editor} />
|
|
||||||
<EditorBubbleMenu editor={editor} />
|
<EditorBubbleMenu editor={editor} />
|
||||||
<TableMenu editor={editor} />
|
<TableMenu editor={editor} />
|
||||||
<TableCellMenu editor={editor} appendTo={menuContainerRef} />
|
<TableCellMenu editor={editor} appendTo={menuContainerRef} />
|
||||||
|
|||||||
@@ -160,7 +160,7 @@ export function TitleEditor({
|
|||||||
// guard against Cannot access view['hasFocus'] error
|
// guard against Cannot access view['hasFocus'] error
|
||||||
if (!titleEditor?.isInitialized) return;
|
if (!titleEditor?.isInitialized) return;
|
||||||
titleEditor?.commands?.focus("end");
|
titleEditor?.commands?.focus("end");
|
||||||
}, 300);
|
}, 500);
|
||||||
}, [titleEditor]);
|
}, [titleEditor]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|||||||
@@ -1,104 +0,0 @@
|
|||||||
import { Card, Group, Text, Badge, Button, Stack, Switch } from "@mantine/core";
|
|
||||||
import {
|
|
||||||
IconBrandGithub,
|
|
||||||
IconBrandSlack,
|
|
||||||
IconBrandGitlab,
|
|
||||||
IconPuzzle,
|
|
||||||
} from "@tabler/icons-react";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
import {
|
|
||||||
IntegrationDefinition,
|
|
||||||
Integration,
|
|
||||||
} from "../types/integration.types";
|
|
||||||
|
|
||||||
const iconMap: Record<string, React.ElementType> = {
|
|
||||||
github: IconBrandGithub,
|
|
||||||
slack: IconBrandSlack,
|
|
||||||
gitlab: IconBrandGitlab,
|
|
||||||
};
|
|
||||||
|
|
||||||
type IntegrationCardProps = {
|
|
||||||
definition: IntegrationDefinition;
|
|
||||||
installation?: Integration;
|
|
||||||
onInstall: (type: string) => void;
|
|
||||||
onUninstall: (integrationId: string) => void;
|
|
||||||
onConfigure: (integration: Integration) => void;
|
|
||||||
onToggle: (integration: Integration, enabled: boolean) => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function IntegrationCard({
|
|
||||||
definition,
|
|
||||||
installation,
|
|
||||||
onInstall,
|
|
||||||
onUninstall,
|
|
||||||
onConfigure,
|
|
||||||
onToggle,
|
|
||||||
}: IntegrationCardProps) {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const Icon = iconMap[definition.icon] ?? IconPuzzle;
|
|
||||||
const isInstalled = !!installation;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card withBorder padding="lg" radius="md">
|
|
||||||
<Group justify="space-between" mb="sm">
|
|
||||||
<Group gap="sm">
|
|
||||||
<Icon size={28} stroke={1.5} />
|
|
||||||
<div>
|
|
||||||
<Text fw={600} size="sm">
|
|
||||||
{definition.name}
|
|
||||||
</Text>
|
|
||||||
<Text size="xs" c="dimmed">
|
|
||||||
{definition.description}
|
|
||||||
</Text>
|
|
||||||
</div>
|
|
||||||
</Group>
|
|
||||||
</Group>
|
|
||||||
|
|
||||||
<Group gap="xs" mb="md">
|
|
||||||
{definition.capabilities.map((cap) => (
|
|
||||||
<Badge key={cap} size="xs" variant="light">
|
|
||||||
{cap}
|
|
||||||
</Badge>
|
|
||||||
))}
|
|
||||||
</Group>
|
|
||||||
|
|
||||||
{isInstalled ? (
|
|
||||||
<Stack gap="xs">
|
|
||||||
<Group justify="space-between">
|
|
||||||
<Switch
|
|
||||||
label={t("Enabled")}
|
|
||||||
checked={installation.isEnabled}
|
|
||||||
onChange={(e) => onToggle(installation, e.currentTarget.checked)}
|
|
||||||
size="sm"
|
|
||||||
/>
|
|
||||||
</Group>
|
|
||||||
<Group gap="xs">
|
|
||||||
<Button
|
|
||||||
size="xs"
|
|
||||||
variant="light"
|
|
||||||
onClick={() => onConfigure(installation)}
|
|
||||||
>
|
|
||||||
{t("Configure")}
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
size="xs"
|
|
||||||
variant="subtle"
|
|
||||||
color="red"
|
|
||||||
onClick={() => onUninstall(installation.id)}
|
|
||||||
>
|
|
||||||
{t("Uninstall")}
|
|
||||||
</Button>
|
|
||||||
</Group>
|
|
||||||
</Stack>
|
|
||||||
) : (
|
|
||||||
<Button
|
|
||||||
size="xs"
|
|
||||||
variant="light"
|
|
||||||
onClick={() => onInstall(definition.type)}
|
|
||||||
>
|
|
||||||
{t("Install")}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,91 +0,0 @@
|
|||||||
import { Modal, Button, Group, Stack, TextInput, Text } from "@mantine/core";
|
|
||||||
import { notifications } from "@mantine/notifications";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
import { Integration, ConnectionStatus } from "../types/integration.types";
|
|
||||||
import {
|
|
||||||
useConnectionStatus,
|
|
||||||
useDisconnectIntegration,
|
|
||||||
} from "../queries/integration-query";
|
|
||||||
import * as integrationService from "../services/integration-service";
|
|
||||||
|
|
||||||
type IntegrationSettingsModalProps = {
|
|
||||||
integration: Integration | null;
|
|
||||||
opened: boolean;
|
|
||||||
onClose: () => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function IntegrationSettingsModal({
|
|
||||||
integration,
|
|
||||||
opened,
|
|
||||||
onClose,
|
|
||||||
}: IntegrationSettingsModalProps) {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const { data: connectionStatus } = useConnectionStatus(integration?.id);
|
|
||||||
const disconnectMutation = useDisconnectIntegration();
|
|
||||||
|
|
||||||
if (!integration) return null;
|
|
||||||
|
|
||||||
const handleConnect = async () => {
|
|
||||||
try {
|
|
||||||
const result = await integrationService.getOAuthAuthorizeUrl({
|
|
||||||
integrationId: integration.id,
|
|
||||||
});
|
|
||||||
window.location.href = result.authorizationUrl;
|
|
||||||
} catch (error) {
|
|
||||||
const errorMessage = error["response"]?.data?.message;
|
|
||||||
notifications.show({
|
|
||||||
message: errorMessage || t("Failed to start OAuth connection"),
|
|
||||||
color: "red",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDisconnect = async () => {
|
|
||||||
await disconnectMutation.mutateAsync({
|
|
||||||
integrationId: integration.id,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const hasOAuth = true;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Modal
|
|
||||||
opened={opened}
|
|
||||||
onClose={onClose}
|
|
||||||
title={`${integration.type.charAt(0).toUpperCase() + integration.type.slice(1)} ${t("Settings")}`}
|
|
||||||
size="md"
|
|
||||||
>
|
|
||||||
<Stack gap="md">
|
|
||||||
{hasOAuth && (
|
|
||||||
<div>
|
|
||||||
<Text size="sm" fw={600} mb="xs">
|
|
||||||
{t("Connection")}
|
|
||||||
</Text>
|
|
||||||
{connectionStatus?.connected ? (
|
|
||||||
<Group gap="sm">
|
|
||||||
<Text size="sm" c="green">
|
|
||||||
{t("Connected")}
|
|
||||||
{connectionStatus.providerUserId &&
|
|
||||||
` (${connectionStatus.providerUserId})`}
|
|
||||||
</Text>
|
|
||||||
<Button
|
|
||||||
size="xs"
|
|
||||||
variant="subtle"
|
|
||||||
color="red"
|
|
||||||
onClick={handleDisconnect}
|
|
||||||
loading={disconnectMutation.isPending}
|
|
||||||
>
|
|
||||||
{t("Disconnect")}
|
|
||||||
</Button>
|
|
||||||
</Group>
|
|
||||||
) : (
|
|
||||||
<Button size="xs" variant="light" onClick={handleConnect}>
|
|
||||||
{t("Connect")} {integration.type}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Stack>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,111 +0,0 @@
|
|||||||
import { SimpleGrid, Text, Loader, Center, Alert } from "@mantine/core";
|
|
||||||
import { Helmet } from "react-helmet-async";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
import { useState, useCallback } from "react";
|
|
||||||
import { getAppName } from "@/lib/config";
|
|
||||||
import SettingsTitle from "@/components/settings/settings-title";
|
|
||||||
import IntegrationCard from "../components/integration-card";
|
|
||||||
import IntegrationSettingsModal from "../components/integration-settings-modal";
|
|
||||||
import {
|
|
||||||
useAvailableIntegrations,
|
|
||||||
useInstalledIntegrations,
|
|
||||||
useInstallIntegration,
|
|
||||||
useUninstallIntegration,
|
|
||||||
useUpdateIntegrationSettings,
|
|
||||||
} from "../queries/integration-query";
|
|
||||||
import { Integration } from "../types/integration.types";
|
|
||||||
|
|
||||||
export default function Integrations() {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const { data: available, isLoading: loadingAvailable } =
|
|
||||||
useAvailableIntegrations();
|
|
||||||
const { data: installed, isLoading: loadingInstalled } =
|
|
||||||
useInstalledIntegrations();
|
|
||||||
const installMutation = useInstallIntegration();
|
|
||||||
const uninstallMutation = useUninstallIntegration();
|
|
||||||
const updateMutation = useUpdateIntegrationSettings();
|
|
||||||
|
|
||||||
const [configuring, setConfiguring] = useState<Integration | null>(null);
|
|
||||||
|
|
||||||
const handleInstall = useCallback(
|
|
||||||
(type: string) => {
|
|
||||||
installMutation.mutate({ type });
|
|
||||||
},
|
|
||||||
[installMutation],
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleUninstall = useCallback(
|
|
||||||
(integrationId: string) => {
|
|
||||||
uninstallMutation.mutate({ integrationId });
|
|
||||||
},
|
|
||||||
[uninstallMutation],
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleConfigure = useCallback((integration: Integration) => {
|
|
||||||
setConfiguring(integration);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleToggle = useCallback(
|
|
||||||
(integration: Integration, enabled: boolean) => {
|
|
||||||
updateMutation.mutate({
|
|
||||||
integrationId: integration.id,
|
|
||||||
isEnabled: enabled,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
[updateMutation],
|
|
||||||
);
|
|
||||||
|
|
||||||
const isLoading = loadingAvailable || loadingInstalled;
|
|
||||||
const error = new URLSearchParams(window.location.search).get("error");
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Helmet>
|
|
||||||
<title>
|
|
||||||
{t("Integrations")} - {getAppName()}
|
|
||||||
</title>
|
|
||||||
</Helmet>
|
|
||||||
|
|
||||||
<SettingsTitle title={t("Integrations")} />
|
|
||||||
|
|
||||||
{error === "oauth_failed" && (
|
|
||||||
<Alert color="red" mb="md">
|
|
||||||
{t("OAuth connection failed. Please try again.")}
|
|
||||||
</Alert>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{isLoading ? (
|
|
||||||
<Center py="xl">
|
|
||||||
<Loader />
|
|
||||||
</Center>
|
|
||||||
) : !available?.length ? (
|
|
||||||
<Text c="dimmed" size="sm">
|
|
||||||
{t("No integrations available.")}
|
|
||||||
</Text>
|
|
||||||
) : (
|
|
||||||
<SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
|
|
||||||
{available.map((def) => {
|
|
||||||
const installation = installed?.find((i) => i.type === def.type);
|
|
||||||
return (
|
|
||||||
<IntegrationCard
|
|
||||||
key={def.type}
|
|
||||||
definition={def}
|
|
||||||
installation={installation}
|
|
||||||
onInstall={handleInstall}
|
|
||||||
onUninstall={handleUninstall}
|
|
||||||
onConfigure={handleConfigure}
|
|
||||||
onToggle={handleToggle}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</SimpleGrid>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<IntegrationSettingsModal
|
|
||||||
integration={configuring}
|
|
||||||
opened={!!configuring}
|
|
||||||
onClose={() => setConfiguring(null)}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,109 +0,0 @@
|
|||||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
import { notifications } from "@mantine/notifications";
|
|
||||||
import * as integrationService from "../services/integration-service";
|
|
||||||
|
|
||||||
export function useAvailableIntegrations() {
|
|
||||||
return useQuery({
|
|
||||||
queryKey: ["available-integrations"],
|
|
||||||
queryFn: integrationService.getAvailableIntegrations,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function useInstalledIntegrations() {
|
|
||||||
return useQuery({
|
|
||||||
queryKey: ["installed-integrations"],
|
|
||||||
queryFn: integrationService.getInstalledIntegrations,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function useInstallIntegration() {
|
|
||||||
const qc = useQueryClient();
|
|
||||||
const { t } = useTranslation();
|
|
||||||
return useMutation({
|
|
||||||
mutationFn: integrationService.installIntegration,
|
|
||||||
onSuccess: () => {
|
|
||||||
notifications.show({ message: t("Integration installed successfully") });
|
|
||||||
qc.invalidateQueries({ queryKey: ["installed-integrations"] });
|
|
||||||
},
|
|
||||||
onError: (error) => {
|
|
||||||
const errorMessage = error["response"]?.data?.message;
|
|
||||||
notifications.show({
|
|
||||||
message: errorMessage || t("Failed to install integration"),
|
|
||||||
color: "red",
|
|
||||||
});
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function useUninstallIntegration() {
|
|
||||||
const qc = useQueryClient();
|
|
||||||
const { t } = useTranslation();
|
|
||||||
return useMutation({
|
|
||||||
mutationFn: integrationService.uninstallIntegration,
|
|
||||||
onSuccess: () => {
|
|
||||||
notifications.show({
|
|
||||||
message: t("Integration uninstalled successfully"),
|
|
||||||
});
|
|
||||||
qc.invalidateQueries({ queryKey: ["installed-integrations"] });
|
|
||||||
},
|
|
||||||
onError: (error) => {
|
|
||||||
const errorMessage = error["response"]?.data?.message;
|
|
||||||
notifications.show({
|
|
||||||
message: errorMessage || t("Failed to uninstall integration"),
|
|
||||||
color: "red",
|
|
||||||
});
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function useUpdateIntegrationSettings() {
|
|
||||||
const qc = useQueryClient();
|
|
||||||
const { t } = useTranslation();
|
|
||||||
return useMutation({
|
|
||||||
mutationFn: integrationService.updateIntegrationSettings,
|
|
||||||
onSuccess: () => {
|
|
||||||
notifications.show({ message: t("Integration updated successfully") });
|
|
||||||
qc.invalidateQueries({ queryKey: ["installed-integrations"] });
|
|
||||||
},
|
|
||||||
onError: (error) => {
|
|
||||||
const errorMessage = error["response"]?.data?.message;
|
|
||||||
notifications.show({
|
|
||||||
message: errorMessage || t("Failed to update integration"),
|
|
||||||
color: "red",
|
|
||||||
});
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function useConnectionStatus(integrationId: string | undefined) {
|
|
||||||
return useQuery({
|
|
||||||
queryKey: ["integration-connection", integrationId],
|
|
||||||
queryFn: () =>
|
|
||||||
integrationService.getConnectionStatus({
|
|
||||||
integrationId: integrationId!,
|
|
||||||
}),
|
|
||||||
enabled: !!integrationId,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function useDisconnectIntegration() {
|
|
||||||
const qc = useQueryClient();
|
|
||||||
const { t } = useTranslation();
|
|
||||||
return useMutation({
|
|
||||||
mutationFn: integrationService.disconnectIntegration,
|
|
||||||
onSuccess: (_data, variables) => {
|
|
||||||
notifications.show({ message: t("Integration disconnected") });
|
|
||||||
qc.invalidateQueries({
|
|
||||||
queryKey: ["integration-connection", variables.integrationId],
|
|
||||||
});
|
|
||||||
},
|
|
||||||
onError: (error) => {
|
|
||||||
const errorMessage = error["response"]?.data?.message;
|
|
||||||
notifications.show({
|
|
||||||
message: errorMessage || t("Failed to disconnect integration"),
|
|
||||||
color: "red",
|
|
||||||
});
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@@ -1,79 +0,0 @@
|
|||||||
import api from "@/lib/api-client";
|
|
||||||
import {
|
|
||||||
IntegrationDefinition,
|
|
||||||
Integration,
|
|
||||||
ConnectionStatus,
|
|
||||||
UnfurlResult,
|
|
||||||
} from "../types/integration.types";
|
|
||||||
|
|
||||||
export async function getAvailableIntegrations(): Promise<
|
|
||||||
IntegrationDefinition[]
|
|
||||||
> {
|
|
||||||
const req = await api.post<IntegrationDefinition[]>(
|
|
||||||
"/integrations/available",
|
|
||||||
);
|
|
||||||
return req.data;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getInstalledIntegrations(): Promise<Integration[]> {
|
|
||||||
const req = await api.post<Integration[]>("/integrations/list");
|
|
||||||
return req.data;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function installIntegration(data: {
|
|
||||||
type: string;
|
|
||||||
}): Promise<Integration> {
|
|
||||||
const req = await api.post<Integration>("/integrations/install", data);
|
|
||||||
return req.data;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function uninstallIntegration(data: {
|
|
||||||
integrationId: string;
|
|
||||||
}): Promise<void> {
|
|
||||||
await api.post("/integrations/uninstall", data);
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function updateIntegrationSettings(data: {
|
|
||||||
integrationId: string;
|
|
||||||
settings?: Record<string, any>;
|
|
||||||
isEnabled?: boolean;
|
|
||||||
}): Promise<Integration> {
|
|
||||||
const req = await api.post<Integration>("/integrations/update", data);
|
|
||||||
return req.data;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getConnectionStatus(data: {
|
|
||||||
integrationId: string;
|
|
||||||
}): Promise<ConnectionStatus> {
|
|
||||||
const req = await api.post<ConnectionStatus>(
|
|
||||||
"/integrations/connection/status",
|
|
||||||
data,
|
|
||||||
);
|
|
||||||
return req.data;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getOAuthAuthorizeUrl(data: {
|
|
||||||
integrationId: string;
|
|
||||||
}): Promise<{ authorizationUrl: string }> {
|
|
||||||
const req = await api.post<{ authorizationUrl: string }>(
|
|
||||||
"/integrations/oauth/authorize",
|
|
||||||
data,
|
|
||||||
);
|
|
||||||
return req.data;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function disconnectIntegration(data: {
|
|
||||||
integrationId: string;
|
|
||||||
}): Promise<void> {
|
|
||||||
await api.post("/integrations/oauth/disconnect", data);
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function unfurlUrl(data: {
|
|
||||||
url: string;
|
|
||||||
}): Promise<UnfurlResult | null> {
|
|
||||||
const req = await api.post<{ data: UnfurlResult | null }>(
|
|
||||||
"/integrations/unfurl",
|
|
||||||
data,
|
|
||||||
);
|
|
||||||
return req.data.data;
|
|
||||||
}
|
|
||||||
@@ -1,38 +0,0 @@
|
|||||||
export type IntegrationCapability = "oauth" | "unfurl" | "actions" | "webhooks";
|
|
||||||
|
|
||||||
export type IntegrationDefinition = {
|
|
||||||
type: string;
|
|
||||||
name: string;
|
|
||||||
description: string;
|
|
||||||
icon: string;
|
|
||||||
capabilities: IntegrationCapability[];
|
|
||||||
};
|
|
||||||
|
|
||||||
export type Integration = {
|
|
||||||
id: string;
|
|
||||||
workspaceId: string;
|
|
||||||
type: string;
|
|
||||||
isEnabled: boolean;
|
|
||||||
settings: Record<string, any> | null;
|
|
||||||
installedById: string | null;
|
|
||||||
createdAt: string;
|
|
||||||
updatedAt: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
export type ConnectionStatus = {
|
|
||||||
connected: boolean;
|
|
||||||
providerUserId?: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
export type UnfurlResult = {
|
|
||||||
title: string;
|
|
||||||
description?: string;
|
|
||||||
url: string;
|
|
||||||
provider: string;
|
|
||||||
providerIcon?: string;
|
|
||||||
status?: string;
|
|
||||||
statusColor?: string;
|
|
||||||
author?: string;
|
|
||||||
authorAvatarUrl?: string;
|
|
||||||
metadata?: Record<string, any>;
|
|
||||||
};
|
|
||||||
@@ -1,148 +0,0 @@
|
|||||||
import {
|
|
||||||
ActionIcon,
|
|
||||||
Group,
|
|
||||||
Text,
|
|
||||||
Tooltip,
|
|
||||||
UnstyledButton,
|
|
||||||
} from "@mantine/core";
|
|
||||||
import {
|
|
||||||
IconCheck,
|
|
||||||
IconFileDescription,
|
|
||||||
IconPointFilled,
|
|
||||||
} from "@tabler/icons-react";
|
|
||||||
import { CustomAvatar } from "@/components/ui/custom-avatar";
|
|
||||||
import { INotification } from "../types/notification.types";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
import { useNavigate } from "react-router-dom";
|
|
||||||
import { useState } from "react";
|
|
||||||
import { useMarkReadMutation } from "../queries/notification-query";
|
|
||||||
import { buildPageUrl } from "@/features/page/page.utils";
|
|
||||||
import { formatRelativeTime } from "../notification.utils";
|
|
||||||
import classes from "../notification.module.css";
|
|
||||||
|
|
||||||
type NotificationItemProps = {
|
|
||||||
notification: INotification;
|
|
||||||
onNavigate: () => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
export function NotificationItem({
|
|
||||||
notification,
|
|
||||||
onNavigate,
|
|
||||||
}: NotificationItemProps) {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const navigate = useNavigate();
|
|
||||||
const markRead = useMarkReadMutation();
|
|
||||||
const [hovered, setHovered] = useState(false);
|
|
||||||
|
|
||||||
const isUnread = !notification.readAt;
|
|
||||||
|
|
||||||
const getNotificationMessage = (): string => {
|
|
||||||
switch (notification.type) {
|
|
||||||
case "comment.user_mention":
|
|
||||||
return t("mentioned you in a comment");
|
|
||||||
case "comment.created":
|
|
||||||
return t("commented on a page");
|
|
||||||
case "comment.resolved":
|
|
||||||
return t("resolved a comment");
|
|
||||||
case "page.user_mention":
|
|
||||||
return t("mentioned you on a page");
|
|
||||||
default:
|
|
||||||
return "";
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleClick = () => {
|
|
||||||
if (notification.page && notification.space) {
|
|
||||||
if (isUnread) {
|
|
||||||
markRead.mutate([notification.id]);
|
|
||||||
}
|
|
||||||
navigate(
|
|
||||||
buildPageUrl(
|
|
||||||
notification.space.slug,
|
|
||||||
notification.page.slugId,
|
|
||||||
notification.page.title,
|
|
||||||
),
|
|
||||||
);
|
|
||||||
onNavigate();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleMarkRead = (e: React.MouseEvent) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
if (isUnread) {
|
|
||||||
markRead.mutate([notification.id]);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<UnstyledButton
|
|
||||||
onClick={handleClick}
|
|
||||||
onMouseEnter={() => setHovered(true)}
|
|
||||||
onMouseLeave={() => setHovered(false)}
|
|
||||||
w="100%"
|
|
||||||
className={classes.notificationItem}
|
|
||||||
>
|
|
||||||
<Group wrap="nowrap" align="flex-start" gap="sm">
|
|
||||||
<CustomAvatar
|
|
||||||
avatarUrl={notification.actor?.avatarUrl}
|
|
||||||
name={notification.actor?.name || "?"}
|
|
||||||
size="sm"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div style={{ flex: 1, minWidth: 0 }}>
|
|
||||||
<Text size="sm" lineClamp={2}>
|
|
||||||
<Text span fw={600}>
|
|
||||||
{notification.actor?.name}
|
|
||||||
</Text>{" "}
|
|
||||||
{getNotificationMessage()}
|
|
||||||
</Text>
|
|
||||||
|
|
||||||
{notification.page && (
|
|
||||||
<Group gap={4} mt={2} wrap="nowrap">
|
|
||||||
{notification.page.icon ? (
|
|
||||||
<Text size="xs" style={{ flexShrink: 0 }}>
|
|
||||||
{notification.page.icon}
|
|
||||||
</Text>
|
|
||||||
) : (
|
|
||||||
<IconFileDescription
|
|
||||||
size={14}
|
|
||||||
stroke={1.5}
|
|
||||||
style={{ flexShrink: 0, color: "var(--mantine-color-dimmed)" }}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<Text size="xs" c="dimmed" lineClamp={1}>
|
|
||||||
{notification.page.title || t("Untitled")}
|
|
||||||
</Text>
|
|
||||||
</Group>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Group gap={4} wrap="nowrap" align="center" style={{ flexShrink: 0 }}>
|
|
||||||
{hovered && isUnread ? (
|
|
||||||
<Tooltip label={t("Mark as read")} withArrow>
|
|
||||||
<ActionIcon
|
|
||||||
variant="subtle"
|
|
||||||
size="sm"
|
|
||||||
onClick={handleMarkRead}
|
|
||||||
>
|
|
||||||
<IconCheck size={14} />
|
|
||||||
</ActionIcon>
|
|
||||||
</Tooltip>
|
|
||||||
) : (
|
|
||||||
<Text size="xs" c="dimmed" style={{ whiteSpace: "nowrap" }}>
|
|
||||||
{formatRelativeTime(notification.createdAt)}
|
|
||||||
</Text>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{isUnread && (
|
|
||||||
<IconPointFilled
|
|
||||||
size={12}
|
|
||||||
color="var(--mantine-color-blue-filled)"
|
|
||||||
style={{ flexShrink: 0 }}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</Group>
|
|
||||||
</Group>
|
|
||||||
</UnstyledButton>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,115 +0,0 @@
|
|||||||
import { Center, Divider, Loader, Stack, Text } from "@mantine/core";
|
|
||||||
import { IconBellOff } from "@tabler/icons-react";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
import { useEffect, useRef } from "react";
|
|
||||||
import { NotificationItem } from "./notification-item";
|
|
||||||
import { INotification, NotificationFilter } from "../types/notification.types";
|
|
||||||
import { groupNotificationsByTime } from "../notification.utils";
|
|
||||||
import { useNotificationsQuery } from "../queries/notification-query";
|
|
||||||
import classes from "../notification.module.css";
|
|
||||||
|
|
||||||
type NotificationListProps = {
|
|
||||||
filter: NotificationFilter;
|
|
||||||
onNavigate: () => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
export function NotificationList({
|
|
||||||
filter,
|
|
||||||
onNavigate,
|
|
||||||
}: NotificationListProps) {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const {
|
|
||||||
data,
|
|
||||||
isLoading,
|
|
||||||
hasNextPage,
|
|
||||||
fetchNextPage,
|
|
||||||
isFetchingNextPage,
|
|
||||||
} = useNotificationsQuery();
|
|
||||||
|
|
||||||
const sentinelRef = useRef<HTMLDivElement>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const sentinel = sentinelRef.current;
|
|
||||||
if (!sentinel) return;
|
|
||||||
|
|
||||||
const observer = new IntersectionObserver(
|
|
||||||
(entries) => {
|
|
||||||
if (entries[0].isIntersecting && hasNextPage && !isFetchingNextPage) {
|
|
||||||
fetchNextPage();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{ threshold: 0.1 },
|
|
||||||
);
|
|
||||||
|
|
||||||
observer.observe(sentinel);
|
|
||||||
return () => observer.disconnect();
|
|
||||||
}, [hasNextPage, isFetchingNextPage, fetchNextPage]);
|
|
||||||
|
|
||||||
if (isLoading) {
|
|
||||||
return (
|
|
||||||
<Center py="xl">
|
|
||||||
<Loader size="sm" />
|
|
||||||
</Center>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const allNotifications =
|
|
||||||
data?.pages.flatMap((page) => page.items) ?? [];
|
|
||||||
|
|
||||||
const filtered =
|
|
||||||
filter === "unread"
|
|
||||||
? allNotifications.filter((n) => !n.readAt)
|
|
||||||
: allNotifications;
|
|
||||||
|
|
||||||
if (filtered.length === 0) {
|
|
||||||
return (
|
|
||||||
<Center py="xl">
|
|
||||||
<Stack align="center" gap="xs">
|
|
||||||
<IconBellOff size={32} stroke={1.5} color="var(--mantine-color-dimmed)" />
|
|
||||||
<Text size="sm" c="dimmed">
|
|
||||||
{filter === "unread"
|
|
||||||
? t("No unread notifications")
|
|
||||||
: t("No notifications")}
|
|
||||||
</Text>
|
|
||||||
</Stack>
|
|
||||||
</Center>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const timeGroupLabels = {
|
|
||||||
today: t("Today"),
|
|
||||||
yesterday: t("Yesterday"),
|
|
||||||
this_week: t("This week"),
|
|
||||||
older: t("Older"),
|
|
||||||
};
|
|
||||||
|
|
||||||
const groups = groupNotificationsByTime(filtered, timeGroupLabels);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Stack gap={0}>
|
|
||||||
{groups.map((group, groupIndex) => (
|
|
||||||
<div key={group.key}>
|
|
||||||
{groupIndex > 0 && <Divider className={classes.divider} />}
|
|
||||||
<Text size="xs" fw={600} c="dimmed" px="md" pt="sm" pb={4}>
|
|
||||||
{group.label}
|
|
||||||
</Text>
|
|
||||||
{group.notifications.map((notification: INotification) => (
|
|
||||||
<NotificationItem
|
|
||||||
key={notification.id}
|
|
||||||
notification={notification}
|
|
||||||
onNavigate={onNavigate}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
|
|
||||||
<div ref={sentinelRef} style={{ height: 1 }} />
|
|
||||||
|
|
||||||
{isFetchingNextPage && (
|
|
||||||
<Center py="xs">
|
|
||||||
<Loader size="xs" />
|
|
||||||
</Center>
|
|
||||||
)}
|
|
||||||
</Stack>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,142 +0,0 @@
|
|||||||
import { useState } from "react";
|
|
||||||
import {
|
|
||||||
ActionIcon,
|
|
||||||
Group,
|
|
||||||
Indicator,
|
|
||||||
Menu,
|
|
||||||
Popover,
|
|
||||||
ScrollArea,
|
|
||||||
Text,
|
|
||||||
Tooltip,
|
|
||||||
} from "@mantine/core";
|
|
||||||
import {
|
|
||||||
IconBell,
|
|
||||||
IconCheck,
|
|
||||||
IconChecks,
|
|
||||||
IconDots,
|
|
||||||
IconFilter,
|
|
||||||
} from "@tabler/icons-react";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
import { NotificationList } from "./notification-list";
|
|
||||||
import { NotificationFilter } from "../types/notification.types";
|
|
||||||
import {
|
|
||||||
useMarkAllReadMutation,
|
|
||||||
useUnreadCountQuery,
|
|
||||||
} from "../queries/notification-query";
|
|
||||||
|
|
||||||
export function NotificationPopover() {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const [opened, setOpened] = useState(false);
|
|
||||||
const [filter, setFilter] = useState<NotificationFilter>("all");
|
|
||||||
|
|
||||||
const { data: unreadData } = useUnreadCountQuery();
|
|
||||||
const markAllRead = useMarkAllReadMutation();
|
|
||||||
|
|
||||||
const unreadCount = unreadData?.count ?? 0;
|
|
||||||
|
|
||||||
const handleMarkAllRead = () => {
|
|
||||||
markAllRead.mutate();
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Popover
|
|
||||||
position="bottom-end"
|
|
||||||
shadow="lg"
|
|
||||||
opened={opened}
|
|
||||||
onChange={setOpened}
|
|
||||||
withArrow
|
|
||||||
>
|
|
||||||
<Popover.Target>
|
|
||||||
<Tooltip label={t("Notifications")} withArrow>
|
|
||||||
<ActionIcon
|
|
||||||
variant="subtle"
|
|
||||||
color="dark"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => setOpened((o) => !o)}
|
|
||||||
>
|
|
||||||
<Indicator
|
|
||||||
offset={5}
|
|
||||||
color="red"
|
|
||||||
withBorder
|
|
||||||
disabled={unreadCount === 0}
|
|
||||||
>
|
|
||||||
<IconBell size={20} />
|
|
||||||
</Indicator>
|
|
||||||
</ActionIcon>
|
|
||||||
</Tooltip>
|
|
||||||
</Popover.Target>
|
|
||||||
|
|
||||||
<Popover.Dropdown
|
|
||||||
p={0}
|
|
||||||
style={{ width: "min(420px, calc(100vw - 24px))" }}
|
|
||||||
>
|
|
||||||
<Group justify="space-between" px="md" py="sm">
|
|
||||||
<Text fw={600} size="sm">
|
|
||||||
{t("Notifications")}
|
|
||||||
</Text>
|
|
||||||
<Group gap={4}>
|
|
||||||
<Menu position="bottom-end" withArrow withinPortal={false}>
|
|
||||||
<Menu.Target>
|
|
||||||
<Tooltip label={t("Filter")} withArrow>
|
|
||||||
<ActionIcon variant="subtle" color="dark" size="sm">
|
|
||||||
<IconFilter size={16} />
|
|
||||||
</ActionIcon>
|
|
||||||
</Tooltip>
|
|
||||||
</Menu.Target>
|
|
||||||
<Menu.Dropdown>
|
|
||||||
<Menu.Label>{t("Filter")}</Menu.Label>
|
|
||||||
<Menu.Item
|
|
||||||
onClick={() => setFilter("all")}
|
|
||||||
rightSection={
|
|
||||||
filter === "all" ? <IconCheck size={14} /> : null
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{t("All notifications")}
|
|
||||||
</Menu.Item>
|
|
||||||
<Menu.Item
|
|
||||||
onClick={() => setFilter("unread")}
|
|
||||||
rightSection={
|
|
||||||
filter === "unread" ? <IconCheck size={14} /> : null
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{t("Unread only")}
|
|
||||||
</Menu.Item>
|
|
||||||
</Menu.Dropdown>
|
|
||||||
</Menu>
|
|
||||||
|
|
||||||
<Menu position="bottom-end" withArrow withinPortal={false}>
|
|
||||||
<Menu.Target>
|
|
||||||
<Tooltip label={t("More options")} withArrow>
|
|
||||||
<ActionIcon variant="subtle" color="dark" size="sm">
|
|
||||||
<IconDots size={16} />
|
|
||||||
</ActionIcon>
|
|
||||||
</Tooltip>
|
|
||||||
</Menu.Target>
|
|
||||||
<Menu.Dropdown>
|
|
||||||
<Menu.Item
|
|
||||||
leftSection={<IconChecks size={16} />}
|
|
||||||
onClick={handleMarkAllRead}
|
|
||||||
disabled={unreadCount === 0}
|
|
||||||
>
|
|
||||||
{t("Mark all as read")}
|
|
||||||
</Menu.Item>
|
|
||||||
</Menu.Dropdown>
|
|
||||||
</Menu>
|
|
||||||
</Group>
|
|
||||||
</Group>
|
|
||||||
|
|
||||||
<ScrollArea.Autosize
|
|
||||||
mah={500}
|
|
||||||
type="auto"
|
|
||||||
offsetScrollbars
|
|
||||||
scrollbarSize={6}
|
|
||||||
>
|
|
||||||
<NotificationList
|
|
||||||
filter={filter}
|
|
||||||
onNavigate={() => setOpened(false)}
|
|
||||||
/>
|
|
||||||
</ScrollArea.Autosize>
|
|
||||||
</Popover.Dropdown>
|
|
||||||
</Popover>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,23 +0,0 @@
|
|||||||
import { useEffect } from "react";
|
|
||||||
import { useAtom } from "jotai";
|
|
||||||
import { useQueryClient } from "@tanstack/react-query";
|
|
||||||
import { socketAtom } from "@/features/websocket/atoms/socket-atom";
|
|
||||||
import { NOTIFICATION_KEY } from "../queries/notification-query";
|
|
||||||
|
|
||||||
export function useNotificationSocket() {
|
|
||||||
const queryClient = useQueryClient();
|
|
||||||
const [socket] = useAtom(socketAtom);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!socket) return;
|
|
||||||
|
|
||||||
const handler = () => {
|
|
||||||
queryClient.invalidateQueries({ queryKey: NOTIFICATION_KEY });
|
|
||||||
};
|
|
||||||
|
|
||||||
socket.on("notification", handler);
|
|
||||||
return () => {
|
|
||||||
socket.off("notification", handler);
|
|
||||||
};
|
|
||||||
}, [socket, queryClient]);
|
|
||||||
}
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
.notificationItem {
|
|
||||||
padding: 8px 12px;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notificationItem:hover {
|
|
||||||
background-color: var(--mantine-color-default-hover);
|
|
||||||
}
|
|
||||||
|
|
||||||
.divider {
|
|
||||||
border-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
|
|
||||||
}
|
|
||||||
@@ -1,75 +0,0 @@
|
|||||||
import { INotification } from "./types/notification.types";
|
|
||||||
|
|
||||||
export function formatRelativeTime(dateStr: string): string {
|
|
||||||
const date = new Date(dateStr);
|
|
||||||
const now = new Date();
|
|
||||||
const diffMs = now.getTime() - date.getTime();
|
|
||||||
const diffMin = Math.floor(diffMs / 60_000);
|
|
||||||
const diffHours = Math.floor(diffMs / 3_600_000);
|
|
||||||
const diffDays = Math.floor(diffMs / 86_400_000);
|
|
||||||
|
|
||||||
if (diffMin < 1) return "now";
|
|
||||||
if (diffMin < 60) return `${diffMin}m`;
|
|
||||||
if (diffHours < 24) return `${diffHours}h`;
|
|
||||||
if (diffDays < 7) return `${diffDays}d`;
|
|
||||||
|
|
||||||
return date.toLocaleDateString(undefined, {
|
|
||||||
month: "short",
|
|
||||||
day: "numeric",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
type TimeGroup = "today" | "yesterday" | "this_week" | "older";
|
|
||||||
|
|
||||||
export function getTimeGroup(dateStr: string): TimeGroup {
|
|
||||||
const date = new Date(dateStr);
|
|
||||||
const now = new Date();
|
|
||||||
|
|
||||||
const startOfToday = new Date(
|
|
||||||
now.getFullYear(),
|
|
||||||
now.getMonth(),
|
|
||||||
now.getDate(),
|
|
||||||
);
|
|
||||||
const startOfYesterday = new Date(startOfToday);
|
|
||||||
startOfYesterday.setDate(startOfYesterday.getDate() - 1);
|
|
||||||
const startOfWeek = new Date(startOfToday);
|
|
||||||
startOfWeek.setDate(startOfWeek.getDate() - 7);
|
|
||||||
|
|
||||||
if (date >= startOfToday) return "today";
|
|
||||||
if (date >= startOfYesterday) return "yesterday";
|
|
||||||
if (date >= startOfWeek) return "this_week";
|
|
||||||
return "older";
|
|
||||||
}
|
|
||||||
|
|
||||||
export type GroupedNotifications = {
|
|
||||||
key: TimeGroup;
|
|
||||||
label: string;
|
|
||||||
notifications: INotification[];
|
|
||||||
};
|
|
||||||
|
|
||||||
export function groupNotificationsByTime(
|
|
||||||
notifications: INotification[],
|
|
||||||
labels: Record<TimeGroup, string>,
|
|
||||||
): GroupedNotifications[] {
|
|
||||||
const groups: Record<TimeGroup, INotification[]> = {
|
|
||||||
today: [],
|
|
||||||
yesterday: [],
|
|
||||||
this_week: [],
|
|
||||||
older: [],
|
|
||||||
};
|
|
||||||
|
|
||||||
for (const notification of notifications) {
|
|
||||||
const group = getTimeGroup(notification.createdAt);
|
|
||||||
groups[group].push(notification);
|
|
||||||
}
|
|
||||||
|
|
||||||
const order: TimeGroup[] = ["today", "yesterday", "this_week", "older"];
|
|
||||||
|
|
||||||
return order
|
|
||||||
.filter((key) => groups[key].length > 0)
|
|
||||||
.map((key) => ({
|
|
||||||
key,
|
|
||||||
label: labels[key],
|
|
||||||
notifications: groups[key],
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
@@ -1,59 +0,0 @@
|
|||||||
import {
|
|
||||||
keepPreviousData,
|
|
||||||
useInfiniteQuery,
|
|
||||||
useMutation,
|
|
||||||
useQuery,
|
|
||||||
useQueryClient,
|
|
||||||
} from "@tanstack/react-query";
|
|
||||||
import {
|
|
||||||
getNotifications,
|
|
||||||
getUnreadCount,
|
|
||||||
markNotificationsRead,
|
|
||||||
markAllNotificationsRead,
|
|
||||||
} from "../services/notification-service";
|
|
||||||
|
|
||||||
export const NOTIFICATION_KEY = ["notifications"];
|
|
||||||
export const UNREAD_COUNT_KEY = ["notifications", "unread-count"];
|
|
||||||
|
|
||||||
export function useNotificationsQuery() {
|
|
||||||
return useInfiniteQuery({
|
|
||||||
queryKey: NOTIFICATION_KEY,
|
|
||||||
queryFn: ({ pageParam }) => getNotifications({ cursor: pageParam }),
|
|
||||||
initialPageParam: undefined as string | undefined,
|
|
||||||
getNextPageParam: (lastPage) =>
|
|
||||||
lastPage.meta.hasNextPage ? lastPage.meta.nextCursor : undefined,
|
|
||||||
staleTime: 0,
|
|
||||||
gcTime: 0,
|
|
||||||
placeholderData: keepPreviousData,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function useUnreadCountQuery() {
|
|
||||||
return useQuery({
|
|
||||||
queryKey: UNREAD_COUNT_KEY,
|
|
||||||
queryFn: getUnreadCount,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function useMarkReadMutation() {
|
|
||||||
const queryClient = useQueryClient();
|
|
||||||
|
|
||||||
return useMutation({
|
|
||||||
mutationFn: (notificationIds: string[]) =>
|
|
||||||
markNotificationsRead(notificationIds),
|
|
||||||
onSuccess: () => {
|
|
||||||
queryClient.invalidateQueries({ queryKey: NOTIFICATION_KEY });
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function useMarkAllReadMutation() {
|
|
||||||
const queryClient = useQueryClient();
|
|
||||||
|
|
||||||
return useMutation({
|
|
||||||
mutationFn: markAllNotificationsRead,
|
|
||||||
onSuccess: () => {
|
|
||||||
queryClient.invalidateQueries({ queryKey: NOTIFICATION_KEY });
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@@ -1,31 +0,0 @@
|
|||||||
import api from "@/lib/api-client";
|
|
||||||
import { INotification } from "../types/notification.types";
|
|
||||||
import { IPagination } from "@/lib/types";
|
|
||||||
|
|
||||||
export async function getNotifications(params: {
|
|
||||||
limit?: number;
|
|
||||||
cursor?: string;
|
|
||||||
}): Promise<IPagination<INotification>> {
|
|
||||||
const req = await api.post<IPagination<INotification>>(
|
|
||||||
"/notifications",
|
|
||||||
params,
|
|
||||||
);
|
|
||||||
return req.data;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getUnreadCount(): Promise<{ count: number }> {
|
|
||||||
const req = await api.post<{ count: number }>(
|
|
||||||
"/notifications/unread-count",
|
|
||||||
);
|
|
||||||
return req.data;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function markNotificationsRead(
|
|
||||||
notificationIds: string[],
|
|
||||||
): Promise<void> {
|
|
||||||
await api.post("/notifications/mark-read", { notificationIds });
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function markAllNotificationsRead(): Promise<void> {
|
|
||||||
await api.post("/notifications/mark-all-read");
|
|
||||||
}
|
|
||||||
@@ -1,39 +0,0 @@
|
|||||||
export type NotificationType =
|
|
||||||
| "comment.user_mention"
|
|
||||||
| "comment.created"
|
|
||||||
| "comment.resolved"
|
|
||||||
| "page.user_mention";
|
|
||||||
|
|
||||||
export type INotification = {
|
|
||||||
id: string;
|
|
||||||
userId: string;
|
|
||||||
workspaceId: string;
|
|
||||||
type: NotificationType;
|
|
||||||
actorId: string | null;
|
|
||||||
pageId: string | null;
|
|
||||||
spaceId: string | null;
|
|
||||||
commentId: string | null;
|
|
||||||
data: Record<string, unknown> | null;
|
|
||||||
readAt: string | null;
|
|
||||||
emailedAt: string | null;
|
|
||||||
archivedAt: string | null;
|
|
||||||
createdAt: string;
|
|
||||||
actor: {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
avatarUrl: string | null;
|
|
||||||
} | null;
|
|
||||||
page: {
|
|
||||||
id: string;
|
|
||||||
title: string;
|
|
||||||
slugId: string;
|
|
||||||
icon: string | null;
|
|
||||||
} | null;
|
|
||||||
space: {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
slug: string;
|
|
||||||
} | null;
|
|
||||||
};
|
|
||||||
|
|
||||||
export type NotificationFilter = "all" | "unread";
|
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
import { Text, Group, UnstyledButton, Avatar, Tooltip } from "@mantine/core";
|
import { Text, Group, UnstyledButton } from "@mantine/core";
|
||||||
import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
|
import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
|
||||||
import { formattedDate } from "@/lib/time";
|
import { formattedDate } from "@/lib/time";
|
||||||
import classes from "./css/history.module.css";
|
import classes from "./css/history.module.css";
|
||||||
@@ -6,8 +6,6 @@ import clsx from "clsx";
|
|||||||
import { IPageHistory } from "@/features/page-history/types/page.types";
|
import { IPageHistory } from "@/features/page-history/types/page.types";
|
||||||
import { memo, useCallback } from "react";
|
import { memo, useCallback } from "react";
|
||||||
|
|
||||||
const MAX_VISIBLE_AVATARS = 5;
|
|
||||||
|
|
||||||
interface HistoryItemProps {
|
interface HistoryItemProps {
|
||||||
historyItem: IPageHistory;
|
historyItem: IPageHistory;
|
||||||
index: number;
|
index: number;
|
||||||
@@ -33,9 +31,6 @@ const HistoryItem = memo(function HistoryItem({
|
|||||||
onHover?.(historyItem.id, index);
|
onHover?.(historyItem.id, index);
|
||||||
}, [onHover, historyItem.id, index]);
|
}, [onHover, historyItem.id, index]);
|
||||||
|
|
||||||
const contributors = historyItem.contributors;
|
|
||||||
const hasContributors = contributors && contributors.length > 0;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<UnstyledButton
|
<UnstyledButton
|
||||||
p="xs"
|
p="xs"
|
||||||
@@ -44,54 +39,25 @@ const HistoryItem = memo(function HistoryItem({
|
|||||||
onMouseLeave={onHoverEnd}
|
onMouseLeave={onHoverEnd}
|
||||||
className={clsx(classes.history, { [classes.active]: isActive })}
|
className={clsx(classes.history, { [classes.active]: isActive })}
|
||||||
>
|
>
|
||||||
<Text size="sm">{formattedDate(new Date(historyItem.createdAt))}</Text>
|
<Group wrap="nowrap">
|
||||||
|
<div>
|
||||||
|
<Text size="sm">
|
||||||
|
{formattedDate(new Date(historyItem.createdAt))}
|
||||||
|
</Text>
|
||||||
|
|
||||||
<Group gap={6} wrap="nowrap" mt={4}>
|
<div style={{ flex: 1 }}>
|
||||||
{hasContributors ? (
|
<Group gap={4} wrap="nowrap">
|
||||||
<>
|
<CustomAvatar
|
||||||
<Tooltip.Group openDelay={300} closeDelay={100}>
|
size="sm"
|
||||||
<Avatar.Group spacing={8}>
|
avatarUrl={historyItem.lastUpdatedBy?.avatarUrl}
|
||||||
{contributors.slice(0, MAX_VISIBLE_AVATARS).map((contributor) => (
|
name={historyItem.lastUpdatedBy?.name}
|
||||||
<Tooltip key={contributor.id} label={contributor.name} withArrow>
|
/>
|
||||||
<CustomAvatar
|
|
||||||
size="sm"
|
|
||||||
avatarUrl={contributor.avatarUrl}
|
|
||||||
name={contributor.name}
|
|
||||||
/>
|
|
||||||
</Tooltip>
|
|
||||||
))}
|
|
||||||
{contributors.length > MAX_VISIBLE_AVATARS && (
|
|
||||||
<Tooltip
|
|
||||||
withArrow
|
|
||||||
label={contributors.slice(MAX_VISIBLE_AVATARS).map((c) => (
|
|
||||||
<div key={c.id}>{c.name}</div>
|
|
||||||
))}
|
|
||||||
>
|
|
||||||
<Avatar size="sm" color="gray">
|
|
||||||
+{contributors.length - MAX_VISIBLE_AVATARS}
|
|
||||||
</Avatar>
|
|
||||||
</Tooltip>
|
|
||||||
)}
|
|
||||||
</Avatar.Group>
|
|
||||||
</Tooltip.Group>
|
|
||||||
{contributors.length === 1 && (
|
|
||||||
<Text size="sm" c="dimmed" lineClamp={1}>
|
<Text size="sm" c="dimmed" lineClamp={1}>
|
||||||
{contributors[0].name}
|
{historyItem.lastUpdatedBy?.name}
|
||||||
</Text>
|
</Text>
|
||||||
)}
|
</Group>
|
||||||
</>
|
</div>
|
||||||
) : (
|
</div>
|
||||||
<>
|
|
||||||
<CustomAvatar
|
|
||||||
size="sm"
|
|
||||||
avatarUrl={historyItem.lastUpdatedBy?.avatarUrl}
|
|
||||||
name={historyItem.lastUpdatedBy?.name}
|
|
||||||
/>
|
|
||||||
<Text size="sm" c="dimmed" lineClamp={1}>
|
|
||||||
{historyItem.lastUpdatedBy?.name}
|
|
||||||
</Text>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Group>
|
</Group>
|
||||||
</UnstyledButton>
|
</UnstyledButton>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -62,18 +62,11 @@ export default function HistoryModalMobile({ pageId, pageTitle }: Props) {
|
|||||||
|
|
||||||
const selectData = useMemo(
|
const selectData = useMemo(
|
||||||
() =>
|
() =>
|
||||||
historyItems.map((item) => {
|
historyItems.map((item) => ({
|
||||||
const contributors = item.contributors;
|
value: item.id,
|
||||||
const hasContributors = contributors && contributors.length > 0;
|
label: formattedDate(new Date(item.createdAt)),
|
||||||
const names = hasContributors
|
userName: item.lastUpdatedBy?.name,
|
||||||
? contributors.map((c) => c.name).join(", ")
|
})),
|
||||||
: item.lastUpdatedBy?.name;
|
|
||||||
return {
|
|
||||||
value: item.id,
|
|
||||||
label: formattedDate(new Date(item.createdAt)),
|
|
||||||
userName: names,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
[historyItems],
|
[historyItems],
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|||||||
@@ -18,5 +18,4 @@ export interface IPageHistory {
|
|||||||
createdAt: string;
|
createdAt: string;
|
||||||
updatedAt: string;
|
updatedAt: string;
|
||||||
lastUpdatedBy: IPageHistoryUser;
|
lastUpdatedBy: IPageHistoryUser;
|
||||||
contributors?: IPageHistoryUser[];
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -79,8 +79,8 @@ export default function PageHeaderMenu({ readOnly }: PageHeaderMenuProps) {
|
|||||||
|
|
||||||
<Tooltip label={t("Comments")} openDelay={250} withArrow>
|
<Tooltip label={t("Comments")} openDelay={250} withArrow>
|
||||||
<ActionIcon
|
<ActionIcon
|
||||||
variant="subtle"
|
variant="default"
|
||||||
color="dark"
|
style={{ border: "none" }}
|
||||||
onClick={() => toggleAside("comments")}
|
onClick={() => toggleAside("comments")}
|
||||||
>
|
>
|
||||||
<IconMessage size={20} stroke={2} />
|
<IconMessage size={20} stroke={2} />
|
||||||
@@ -89,8 +89,8 @@ export default function PageHeaderMenu({ readOnly }: PageHeaderMenuProps) {
|
|||||||
|
|
||||||
<Tooltip label={t("Table of contents")} openDelay={250} withArrow>
|
<Tooltip label={t("Table of contents")} openDelay={250} withArrow>
|
||||||
<ActionIcon
|
<ActionIcon
|
||||||
variant="subtle"
|
variant="default"
|
||||||
color="dark"
|
style={{ border: "none" }}
|
||||||
onClick={() => toggleAside("toc")}
|
onClick={() => toggleAside("toc")}
|
||||||
>
|
>
|
||||||
<IconList size={20} stroke={2} />
|
<IconList size={20} stroke={2} />
|
||||||
@@ -166,7 +166,7 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
|
|||||||
arrowPosition="center"
|
arrowPosition="center"
|
||||||
>
|
>
|
||||||
<Menu.Target>
|
<Menu.Target>
|
||||||
<ActionIcon variant="subtle" color="dark">
|
<ActionIcon variant="default" style={{ border: "none" }}>
|
||||||
<IconDots size={20} />
|
<IconDots size={20} />
|
||||||
</ActionIcon>
|
</ActionIcon>
|
||||||
</Menu.Target>
|
</Menu.Target>
|
||||||
|
|||||||
@@ -16,7 +16,7 @@ import {
|
|||||||
import { useEffect, useRef, useState } from "react";
|
import { useEffect, useRef, useState } from "react";
|
||||||
import { Link, useParams } from "react-router-dom";
|
import { Link, useParams } from "react-router-dom";
|
||||||
import classes from "@/features/page/tree/styles/tree.module.css";
|
import classes from "@/features/page/tree/styles/tree.module.css";
|
||||||
import { ActionIcon, Box, Menu, rem, Text } from "@mantine/core";
|
import { ActionIcon, Box, Menu, rem } from "@mantine/core";
|
||||||
import {
|
import {
|
||||||
IconArrowRight,
|
IconArrowRight,
|
||||||
IconChevronDown,
|
IconChevronDown,
|
||||||
@@ -82,7 +82,6 @@ interface SpaceTreeProps {
|
|||||||
const openTreeNodesAtom = atom<OpenMap>({});
|
const openTreeNodesAtom = atom<OpenMap>({});
|
||||||
|
|
||||||
export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
|
export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
|
||||||
const { t } = useTranslation();
|
|
||||||
const { pageSlug } = useParams();
|
const { pageSlug } = useParams();
|
||||||
const { data, setData, controllers } =
|
const { data, setData, controllers } =
|
||||||
useTreeMutation<TreeApi<SpaceTreeNode>>(spaceId);
|
useTreeMutation<TreeApi<SpaceTreeNode>>(spaceId);
|
||||||
@@ -107,16 +106,10 @@ export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
|
|||||||
}
|
}
|
||||||
}, sizeRef);
|
}, sizeRef);
|
||||||
const [isDataLoaded, setIsDataLoaded] = useState(false);
|
const [isDataLoaded, setIsDataLoaded] = useState(false);
|
||||||
const spaceIdRef = useRef(spaceId);
|
|
||||||
spaceIdRef.current = spaceId;
|
|
||||||
const { data: currentPage } = usePageQuery({
|
const { data: currentPage } = usePageQuery({
|
||||||
pageId: extractPageSlugId(pageSlug),
|
pageId: extractPageSlugId(pageSlug),
|
||||||
});
|
});
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setIsDataLoaded(false);
|
|
||||||
}, [spaceId]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (hasNextPage && !isFetching) {
|
if (hasNextPage && !isFetching) {
|
||||||
fetchNextPage();
|
fetchNextPage();
|
||||||
@@ -137,15 +130,12 @@ export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// same space; append only missing roots
|
// same space; append only missing roots
|
||||||
setIsDataLoaded(true);
|
|
||||||
return mergeRootTrees(prev, treeData);
|
return mergeRootTrees(prev, treeData);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}, [pagesData, hasNextPage, spaceId]);
|
}, [pagesData, hasNextPage]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const effectSpaceId = spaceId;
|
|
||||||
|
|
||||||
const fetchData = async () => {
|
const fetchData = async () => {
|
||||||
if (isDataLoaded && currentPage) {
|
if (isDataLoaded && currentPage) {
|
||||||
// check if pageId node is present in the tree
|
// check if pageId node is present in the tree
|
||||||
@@ -159,8 +149,6 @@ export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
|
|||||||
if (!currentPage.id) return;
|
if (!currentPage.id) return;
|
||||||
const ancestors = await getPageBreadcrumbs(currentPage.id);
|
const ancestors = await getPageBreadcrumbs(currentPage.id);
|
||||||
|
|
||||||
if (spaceIdRef.current !== effectSpaceId) return;
|
|
||||||
|
|
||||||
if (ancestors && ancestors?.length > 1) {
|
if (ancestors && ancestors?.length > 1) {
|
||||||
let flatTreeItems = [...buildTree(ancestors)];
|
let flatTreeItems = [...buildTree(ancestors)];
|
||||||
|
|
||||||
@@ -188,22 +176,22 @@ export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
|
|||||||
|
|
||||||
// Wait for all fetch operations to complete
|
// Wait for all fetch operations to complete
|
||||||
Promise.all(fetchPromises).then(() => {
|
Promise.all(fetchPromises).then(() => {
|
||||||
if (spaceIdRef.current !== effectSpaceId) return;
|
|
||||||
|
|
||||||
// build tree with children
|
// build tree with children
|
||||||
const ancestorsTree = buildTreeWithChildren(flatTreeItems);
|
const ancestorsTree = buildTreeWithChildren(flatTreeItems);
|
||||||
// child of root page we're attaching the built ancestors to
|
// child of root page we're attaching the built ancestors to
|
||||||
const rootChild = ancestorsTree[0];
|
const rootChild = ancestorsTree[0];
|
||||||
|
|
||||||
// attach built ancestors to tree using functional updater
|
// attach built ancestors to tree
|
||||||
// to avoid stale closure overwriting the current tree data
|
const updatedTree = appendNodeChildren(
|
||||||
setData((currentData) =>
|
data,
|
||||||
appendNodeChildren(currentData, rootChild.id, rootChild.children),
|
rootChild.id,
|
||||||
|
rootChild.children,
|
||||||
);
|
);
|
||||||
|
setData(updatedTree);
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
// focus on node and open all parents
|
// focus on node and open all parents
|
||||||
treeApiRef.current?.select(currentPage.id);
|
treeApiRef.current.select(currentPage.id);
|
||||||
}, 100);
|
}, 100);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -232,18 +220,11 @@ export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
|
|||||||
};
|
};
|
||||||
}, [setTreeApi]);
|
}, [setTreeApi]);
|
||||||
|
|
||||||
const filteredData = data.filter((node) => node?.spaceId === spaceId);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div ref={mergedRef} className={classes.treeContainer}>
|
<div ref={mergedRef} className={classes.treeContainer}>
|
||||||
{isDataLoaded && filteredData.length === 0 && (
|
|
||||||
<Text size="xs" c="dimmed" py="xs" px="sm">
|
|
||||||
{t("No pages yet")}
|
|
||||||
</Text>
|
|
||||||
)}
|
|
||||||
{isRootReady && rootElement.current && (
|
{isRootReady && rootElement.current && (
|
||||||
<Tree
|
<Tree
|
||||||
data={filteredData}
|
data={data.filter((node) => node?.spaceId === spaceId)}
|
||||||
disableDrag={readOnly}
|
disableDrag={readOnly}
|
||||||
disableDrop={readOnly}
|
disableDrop={readOnly}
|
||||||
disableEdit={readOnly}
|
disableEdit={readOnly}
|
||||||
|
|||||||
@@ -44,8 +44,8 @@ export function SearchMobileControl({ onSearch }: SearchMobileControlProps) {
|
|||||||
return (
|
return (
|
||||||
<Tooltip label={t("Search")} withArrow>
|
<Tooltip label={t("Search")} withArrow>
|
||||||
<ActionIcon
|
<ActionIcon
|
||||||
variant="subtle"
|
variant="default"
|
||||||
color="dark"
|
style={{ border: "none" }}
|
||||||
onClick={onSearch}
|
onClick={onSearch}
|
||||||
size="sm"
|
size="sm"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -140,7 +140,7 @@ export function SearchSpotlightFilters({
|
|||||||
<Switch
|
<Switch
|
||||||
checked={isAiMode}
|
checked={isAiMode}
|
||||||
onChange={(event) => onAskClick()}
|
onChange={(event) => onAskClick()}
|
||||||
label={t("AI Answers")}
|
label={t("Ask AI")}
|
||||||
size="sm"
|
size="sm"
|
||||||
color="blue"
|
color="blue"
|
||||||
labelPosition="left"
|
labelPosition="left"
|
||||||
@@ -279,7 +279,7 @@ export function SearchSpotlightFilters({
|
|||||||
isAiMode &&
|
isAiMode &&
|
||||||
option.value === "attachment" && (
|
option.value === "attachment" && (
|
||||||
<Text size="xs" mt={4}>
|
<Text size="xs" mt={4}>
|
||||||
{t("AI Answers not available for attachments")}
|
{t("Ask AI not available for attachments")}
|
||||||
</Text>
|
</Text>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -24,14 +24,13 @@ export function usePageSearchQuery(
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function useSearchSuggestionsQuery(
|
export function useSearchSuggestionsQuery(
|
||||||
params: SearchSuggestionParams & { preload?: boolean },
|
params: SearchSuggestionParams,
|
||||||
): UseQueryResult<ISuggestionResult, Error> {
|
): UseQueryResult<ISuggestionResult, Error> {
|
||||||
const { preload, ...queryParams } = params;
|
|
||||||
return useQuery({
|
return useQuery({
|
||||||
queryKey: ["search-suggestion", params.query],
|
queryKey: ["search-suggestion", params.query],
|
||||||
staleTime: 60 * 1000, // 1min
|
staleTime: 60 * 1000, // 1min
|
||||||
queryFn: () => searchSuggestions(queryParams),
|
queryFn: () => searchSuggestions(params),
|
||||||
enabled: preload || !!params.query,
|
enabled: !!params.query,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -45,7 +45,8 @@ export default function ShareModal({ readOnly }: ShareModalProps) {
|
|||||||
const { isTrial } = useTrial();
|
const { isTrial } = useTrial();
|
||||||
const [workspace] = useAtom(workspaceAtom);
|
const [workspace] = useAtom(workspaceAtom);
|
||||||
const { data: space } = useSpaceQuery(spaceSlug);
|
const { data: space } = useSpaceQuery(spaceSlug);
|
||||||
const workspaceDisabled = workspace?.settings?.sharing?.disabled === true;
|
const workspaceDisabled =
|
||||||
|
workspace?.settings?.sharing?.disabled === true;
|
||||||
const spaceDisabled = space?.settings?.sharing?.disabled === true;
|
const spaceDisabled = space?.settings?.sharing?.disabled === true;
|
||||||
const sharingDisabled = workspaceDisabled || spaceDisabled;
|
const sharingDisabled = workspaceDisabled || spaceDisabled;
|
||||||
const createShareMutation = useCreateShareMutation();
|
const createShareMutation = useCreateShareMutation();
|
||||||
@@ -133,6 +134,7 @@ export default function ShareModal({ readOnly }: ShareModalProps) {
|
|||||||
<Popover width={350} position="bottom" withArrow shadow="md">
|
<Popover width={350} position="bottom" withArrow shadow="md">
|
||||||
<Popover.Target>
|
<Popover.Target>
|
||||||
<Button
|
<Button
|
||||||
|
style={{ border: "none" }}
|
||||||
size="compact-sm"
|
size="compact-sm"
|
||||||
leftSection={
|
leftSection={
|
||||||
<Indicator
|
<Indicator
|
||||||
@@ -144,8 +146,7 @@ export default function ShareModal({ readOnly }: ShareModalProps) {
|
|||||||
<IconWorld size={20} stroke={1.5} />
|
<IconWorld size={20} stroke={1.5} />
|
||||||
</Indicator>
|
</Indicator>
|
||||||
}
|
}
|
||||||
color="dark"
|
variant="default"
|
||||||
variant="subtle"
|
|
||||||
>
|
>
|
||||||
{t("Share")}
|
{t("Share")}
|
||||||
</Button>
|
</Button>
|
||||||
|
|||||||
@@ -8,7 +8,6 @@ import { io } from "socket.io-client";
|
|||||||
import { SOCKET_URL } from "@/features/websocket/types";
|
import { SOCKET_URL } from "@/features/websocket/types";
|
||||||
import { useQuerySubscription } from "@/features/websocket/use-query-subscription.ts";
|
import { useQuerySubscription } from "@/features/websocket/use-query-subscription.ts";
|
||||||
import { useTreeSocket } from "@/features/websocket/use-tree-socket.ts";
|
import { useTreeSocket } from "@/features/websocket/use-tree-socket.ts";
|
||||||
import { useNotificationSocket } from "@/features/notification/hooks/use-notification-socket.ts";
|
|
||||||
import { useCollabToken } from "@/features/auth/queries/auth-query.tsx";
|
import { useCollabToken } from "@/features/auth/queries/auth-query.tsx";
|
||||||
import { Error404 } from "@/components/ui/error-404.tsx";
|
import { Error404 } from "@/components/ui/error-404.tsx";
|
||||||
|
|
||||||
@@ -45,7 +44,6 @@ export function UserProvider({ children }: React.PropsWithChildren) {
|
|||||||
|
|
||||||
useQuerySubscription();
|
useQuerySubscription();
|
||||||
useTreeSocket();
|
useTreeSocket();
|
||||||
useNotificationSocket();
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (data && data.user && data.workspace) {
|
if (data && data.user && data.workspace) {
|
||||||
|
|||||||
@@ -23,7 +23,6 @@ export interface IWorkspace {
|
|||||||
hasLicenseKey?: boolean;
|
hasLicenseKey?: boolean;
|
||||||
enforceMfa?: boolean;
|
enforceMfa?: boolean;
|
||||||
aiSearch?: boolean;
|
aiSearch?: boolean;
|
||||||
generativeAi?: boolean;
|
|
||||||
disablePublicSharing?: boolean;
|
disablePublicSharing?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -34,7 +33,6 @@ export interface IWorkspaceSettings {
|
|||||||
|
|
||||||
export interface IWorkspaceAiSettings {
|
export interface IWorkspaceAiSettings {
|
||||||
search?: boolean;
|
search?: boolean;
|
||||||
generative?: boolean;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface IWorkspaceSharingSettings {
|
export interface IWorkspaceSharingSettings {
|
||||||
|
|||||||
@@ -68,14 +68,10 @@ function redirectToLogin() {
|
|||||||
APP_ROUTE.AUTH.SIGNUP,
|
APP_ROUTE.AUTH.SIGNUP,
|
||||||
APP_ROUTE.AUTH.FORGOT_PASSWORD,
|
APP_ROUTE.AUTH.FORGOT_PASSWORD,
|
||||||
APP_ROUTE.AUTH.PASSWORD_RESET,
|
APP_ROUTE.AUTH.PASSWORD_RESET,
|
||||||
APP_ROUTE.AUTH.MFA_CHALLENGE,
|
|
||||||
APP_ROUTE.AUTH.MFA_SETUP_REQUIRED,
|
|
||||||
"/invites",
|
"/invites",
|
||||||
];
|
];
|
||||||
if (!exemptPaths.some((path) => window.location.pathname.startsWith(path))) {
|
if (!exemptPaths.some((path) => window.location.pathname.startsWith(path))) {
|
||||||
const redirectTo = window.location.pathname;
|
window.location.href = APP_ROUTE.AUTH.LOGIN;
|
||||||
const params = new URLSearchParams({ redirect: redirectTo });
|
|
||||||
window.location.href = `${APP_ROUTE.AUTH.LOGIN}?${params.toString()}`;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -25,25 +25,8 @@ const APP_ROUTE = {
|
|||||||
SPACES: "/settings/spaces",
|
SPACES: "/settings/spaces",
|
||||||
BILLING: "/settings/billing",
|
BILLING: "/settings/billing",
|
||||||
SECURITY: "/settings/security",
|
SECURITY: "/settings/security",
|
||||||
INTEGRATIONS: "/settings/integrations",
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
export function getPostLoginRedirect(): string {
|
|
||||||
const params = new URLSearchParams(window.location.search);
|
|
||||||
const redirect = params.get("redirect");
|
|
||||||
if (redirect) {
|
|
||||||
try {
|
|
||||||
const resolved = new URL(redirect, window.location.origin);
|
|
||||||
if (resolved.origin === window.location.origin) {
|
|
||||||
return resolved.pathname + resolved.search + resolved.hash;
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
// malformed URL, fall through to default
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return APP_ROUTE.HOME;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default APP_ROUTE;
|
export default APP_ROUTE;
|
||||||
|
|||||||
@@ -13,11 +13,6 @@ import {
|
|||||||
} from "@/features/space/permissions/permissions.type.ts";
|
} from "@/features/space/permissions/permissions.type.ts";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { EmptyState } from "@/components/ui/empty-state.tsx";
|
|
||||||
import { IconAlertTriangle, IconFileOff } from "@tabler/icons-react";
|
|
||||||
import { Button } from "@mantine/core";
|
|
||||||
import { Link } from "react-router-dom";
|
|
||||||
import { ErrorBoundary } from "react-error-boundary";
|
|
||||||
|
|
||||||
const MemoizedFullEditor = React.memo(FullEditor);
|
const MemoizedFullEditor = React.memo(FullEditor);
|
||||||
const MemoizedPageHeader = React.memo(PageHeader);
|
const MemoizedPageHeader = React.memo(PageHeader);
|
||||||
@@ -27,29 +22,6 @@ export default function Page() {
|
|||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const { pageSlug } = useParams();
|
const { pageSlug } = useParams();
|
||||||
|
|
||||||
return (
|
|
||||||
<ErrorBoundary
|
|
||||||
resetKeys={[pageSlug]}
|
|
||||||
fallbackRender={({ resetErrorBoundary }) => (
|
|
||||||
<EmptyState
|
|
||||||
icon={IconAlertTriangle}
|
|
||||||
title={t("Failed to load page. An error occurred.")}
|
|
||||||
action={
|
|
||||||
<Button variant="default" size="sm" mt="xs" onClick={resetErrorBoundary}>
|
|
||||||
{t("Try again")}
|
|
||||||
</Button>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<PageContent pageSlug={pageSlug} />
|
|
||||||
</ErrorBoundary>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function PageContent({ pageSlug }: { pageSlug: string | undefined }) {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
const {
|
const {
|
||||||
data: page,
|
data: page,
|
||||||
isLoading,
|
isLoading,
|
||||||
@@ -67,27 +39,9 @@ function PageContent({ pageSlug }: { pageSlug: string | undefined }) {
|
|||||||
|
|
||||||
if (isError || !page) {
|
if (isError || !page) {
|
||||||
if ([401, 403, 404].includes(error?.["status"])) {
|
if ([401, 403, 404].includes(error?.["status"])) {
|
||||||
return (
|
return <div>{t("Page not found")}</div>;
|
||||||
<EmptyState
|
|
||||||
icon={IconFileOff}
|
|
||||||
title={t("Page not found")}
|
|
||||||
description={t(
|
|
||||||
"This page may have been deleted, moved, or you may not have access.",
|
|
||||||
)}
|
|
||||||
action={
|
|
||||||
<Button component={Link} to="/home" variant="default" size="sm" mt="xs">
|
|
||||||
{t("Go to homepage")}
|
|
||||||
</Button>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
return (
|
return <div>{t("Error fetching page data.")}</div>;
|
||||||
<EmptyState
|
|
||||||
icon={IconFileOff}
|
|
||||||
title={t("Error fetching page data.")}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!space) {
|
if (!space) {
|
||||||
|
|||||||
@@ -35,35 +35,12 @@ export const theme = createTheme({
|
|||||||
blue,
|
blue,
|
||||||
red,
|
red,
|
||||||
},
|
},
|
||||||
/***
|
|
||||||
components: {
|
|
||||||
ActionIcon: ActionIcon.extend({
|
|
||||||
vars: (_theme, props) => {
|
|
||||||
return {
|
|
||||||
root: {
|
|
||||||
...(props.variant === "subtle" &&
|
|
||||||
props.color === "dark" && {
|
|
||||||
"--ai-color": "var(--mantine-color-default-color)",
|
|
||||||
"--ai-hover": "var(--mantine-color-default-hover)",
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
***/
|
|
||||||
});
|
});
|
||||||
|
|
||||||
export const mantineCssResolver: CSSVariablesResolver = (theme) => ({
|
export const mantineCssResolver: CSSVariablesResolver = (theme) => ({
|
||||||
variables: {
|
variables: {
|
||||||
"--input-error-size": theme.fontSizes.sm,
|
"--input-error-size": theme.fontSizes.sm,
|
||||||
},
|
},
|
||||||
light: {
|
light: {},
|
||||||
"--mantine-color-dark-light-color": "#4e5359",
|
dark: {},
|
||||||
"--mantine-color-dark-light-hover": "var(--mantine-color-gray-light-hover)",
|
|
||||||
},
|
|
||||||
dark: {
|
|
||||||
"--mantine-color-dark-light-color": "var(--mantine-color-gray-4)",
|
|
||||||
"--mantine-color-dark-light-hover": "var(--mantine-color-default-hover)",
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|||||||
+19
-18
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "server",
|
"name": "server",
|
||||||
"version": "0.25.3",
|
"version": "0.25.2",
|
||||||
"description": "",
|
"description": "",
|
||||||
"author": "",
|
"author": "",
|
||||||
"private": true,
|
"private": true,
|
||||||
@@ -30,9 +30,9 @@
|
|||||||
"test:e2e": "jest --config test/jest-e2e.json"
|
"test:e2e": "jest --config test/jest-e2e.json"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@ai-sdk/google": "^3.0.29",
|
"@ai-sdk/google": "^3.0.9",
|
||||||
"@ai-sdk/openai": "^3.0.29",
|
"@ai-sdk/openai": "^3.0.11",
|
||||||
"@ai-sdk/openai-compatible": "^2.0.30",
|
"@ai-sdk/openai-compatible": "^2.0.12",
|
||||||
"@aws-sdk/client-s3": "3.982.0",
|
"@aws-sdk/client-s3": "3.982.0",
|
||||||
"@aws-sdk/lib-storage": "3.982.0",
|
"@aws-sdk/lib-storage": "3.982.0",
|
||||||
"@aws-sdk/s3-request-presigner": "3.982.0",
|
"@aws-sdk/s3-request-presigner": "3.982.0",
|
||||||
@@ -56,14 +56,14 @@
|
|||||||
"@nestjs/terminus": "^11.0.0",
|
"@nestjs/terminus": "^11.0.0",
|
||||||
"@nestjs/websockets": "^11.1.13",
|
"@nestjs/websockets": "^11.1.13",
|
||||||
"@node-saml/passport-saml": "^5.1.0",
|
"@node-saml/passport-saml": "^5.1.0",
|
||||||
"@react-email/components": "1.0.7",
|
"@react-email/components": "0.0.28",
|
||||||
"@react-email/render": "2.0.4",
|
"@react-email/render": "1.0.2",
|
||||||
"@socket.io/redis-adapter": "^8.3.0",
|
"@socket.io/redis-adapter": "^8.3.0",
|
||||||
"ai": "^6.0.86",
|
"ai": "^6.0.37",
|
||||||
"ai-sdk-ollama": "^3.7.0",
|
"ai-sdk-ollama": "^3.1.1",
|
||||||
"bcrypt": "^6.0.0",
|
"bcrypt": "^6.0.0",
|
||||||
"bullmq": "^5.65.0",
|
"bullmq": "^5.65.0",
|
||||||
"cache-manager": "^7.2.8",
|
"cache-manager": "^6.4.3",
|
||||||
"cheerio": "^1.1.2",
|
"cheerio": "^1.1.2",
|
||||||
"class-transformer": "^0.5.1",
|
"class-transformer": "^0.5.1",
|
||||||
"class-validator": "^0.14.3",
|
"class-validator": "^0.14.3",
|
||||||
@@ -100,6 +100,7 @@
|
|||||||
"reflect-metadata": "^0.2.2",
|
"reflect-metadata": "^0.2.2",
|
||||||
"rxjs": "^7.8.2",
|
"rxjs": "^7.8.2",
|
||||||
"sanitize-filename-ts": "1.0.2",
|
"sanitize-filename-ts": "1.0.2",
|
||||||
|
"sharp": "0.34.3",
|
||||||
"socket.io": "^4.8.3",
|
"socket.io": "^4.8.3",
|
||||||
"stripe": "^17.5.0",
|
"stripe": "^17.5.0",
|
||||||
"tmp-promise": "^3.0.3",
|
"tmp-promise": "^3.0.3",
|
||||||
@@ -110,32 +111,32 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@eslint/js": "^9.20.0",
|
"@eslint/js": "^9.20.0",
|
||||||
"@nestjs/cli": "^11.0.16",
|
"@nestjs/cli": "^11.0.4",
|
||||||
"@nestjs/schematics": "^11.0.1",
|
"@nestjs/schematics": "^11.0.1",
|
||||||
"@nestjs/testing": "^11.0.10",
|
"@nestjs/testing": "^11.0.10",
|
||||||
"@types/bcrypt": "^5.0.2",
|
"@types/bcrypt": "^5.0.2",
|
||||||
"@types/debounce": "^1.2.4",
|
"@types/debounce": "^1.2.4",
|
||||||
"@types/fs-extra": "^11.0.4",
|
"@types/fs-extra": "^11.0.4",
|
||||||
"@types/jest": "^30.0.0",
|
"@types/jest": "^29.5.14",
|
||||||
"@types/mime-types": "^2.1.4",
|
"@types/mime-types": "^2.1.4",
|
||||||
"@types/node": "^22.13.4",
|
"@types/node": "^22.13.4",
|
||||||
"@types/nodemailer": "^6.4.17",
|
"@types/nodemailer": "^6.4.17",
|
||||||
"@types/passport-google-oauth20": "^2.0.16",
|
"@types/passport-google-oauth20": "^2.0.16",
|
||||||
"@types/passport-jwt": "^4.0.1",
|
"@types/passport-jwt": "^4.0.1",
|
||||||
"@types/supertest": "^6.0.3",
|
"@types/supertest": "^6.0.2",
|
||||||
"@types/ws": "^8.5.14",
|
"@types/ws": "^8.5.14",
|
||||||
"@types/yauzl": "^2.10.3",
|
"@types/yauzl": "^2.10.3",
|
||||||
"eslint": "^9.39.2",
|
"eslint": "^9.20.1",
|
||||||
"eslint-config-prettier": "^10.0.1",
|
"eslint-config-prettier": "^10.0.1",
|
||||||
"globals": "^15.15.0",
|
"globals": "^15.15.0",
|
||||||
"jest": "^30.2.0",
|
"jest": "^29.7.0",
|
||||||
"kysely-codegen": "^0.19.0",
|
"kysely-codegen": "^0.19.0",
|
||||||
"prettier": "^3.5.1",
|
"prettier": "^3.5.1",
|
||||||
"react-email": "5.2.8",
|
"react-email": "3.0.2",
|
||||||
"source-map-support": "^0.5.21",
|
"source-map-support": "^0.5.21",
|
||||||
"supertest": "^7.2.2",
|
"supertest": "^7.0.0",
|
||||||
"ts-jest": "^29.4.6",
|
"ts-jest": "^29.2.5",
|
||||||
"ts-loader": "^9.5.4",
|
"ts-loader": "^9.5.2",
|
||||||
"ts-node": "^10.9.2",
|
"ts-node": "^10.9.2",
|
||||||
"tsconfig-paths": "^4.2.0",
|
"tsconfig-paths": "^4.2.0",
|
||||||
"typescript": "^5.7.3",
|
"typescript": "^5.7.3",
|
||||||
|
|||||||
@@ -1,12 +1,5 @@
|
|||||||
import { Injectable, Logger } from '@nestjs/common';
|
import { Injectable, Logger } from '@nestjs/common';
|
||||||
import { Hocuspocus, Document } from '@hocuspocus/server';
|
import { Hocuspocus, Document } from '@hocuspocus/server';
|
||||||
import { TiptapTransformer } from '@hocuspocus/transformer';
|
|
||||||
import {
|
|
||||||
prosemirrorNodeToYElement,
|
|
||||||
tiptapExtensions,
|
|
||||||
} from './collaboration.util';
|
|
||||||
import * as Y from 'yjs';
|
|
||||||
import { User } from '@docmost/db/types/entity.types';
|
|
||||||
|
|
||||||
export type CollabEventHandlers = ReturnType<
|
export type CollabEventHandlers = ReturnType<
|
||||||
CollaborationHandler['getHandlers']
|
CollaborationHandler['getHandlers']
|
||||||
@@ -27,44 +20,6 @@ export class CollaborationHandler {
|
|||||||
// const fragment = doc.getXmlFragment('default');
|
// const fragment = doc.getXmlFragment('default');
|
||||||
//});
|
//});
|
||||||
},
|
},
|
||||||
updatePageContent: async (
|
|
||||||
documentName: string,
|
|
||||||
payload: {
|
|
||||||
prosemirrorJson: any;
|
|
||||||
operation: string;
|
|
||||||
user: User;
|
|
||||||
},
|
|
||||||
) => {
|
|
||||||
const { prosemirrorJson, operation, user } = payload;
|
|
||||||
this.logger.debug('Updating page content via yjs', documentName);
|
|
||||||
await this.withYdocConnection(
|
|
||||||
hocuspocus,
|
|
||||||
documentName,
|
|
||||||
{ user },
|
|
||||||
(doc) => {
|
|
||||||
const fragment = doc.getXmlFragment('default');
|
|
||||||
|
|
||||||
if (operation === 'replace') {
|
|
||||||
if (fragment.length > 0) {
|
|
||||||
fragment.delete(0, fragment.length);
|
|
||||||
}
|
|
||||||
|
|
||||||
const newDoc = TiptapTransformer.toYdoc(
|
|
||||||
prosemirrorJson,
|
|
||||||
'default',
|
|
||||||
tiptapExtensions,
|
|
||||||
);
|
|
||||||
Y.applyUpdate(doc, Y.encodeStateAsUpdate(newDoc));
|
|
||||||
} else {
|
|
||||||
const newContent = prosemirrorJson.content || [];
|
|
||||||
const yElements = newContent.map(prosemirrorNodeToYElement);
|
|
||||||
const position =
|
|
||||||
operation === 'prepend' ? 0 : fragment.length;
|
|
||||||
fragment.insert(position, yElements);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
);
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,10 +1,4 @@
|
|||||||
import {
|
import { Logger, Module, OnModuleDestroy, OnModuleInit } from '@nestjs/common';
|
||||||
Global,
|
|
||||||
Logger,
|
|
||||||
Module,
|
|
||||||
OnModuleDestroy,
|
|
||||||
OnModuleInit,
|
|
||||||
} from '@nestjs/common';
|
|
||||||
import { AuthenticationExtension } from './extensions/authentication.extension';
|
import { AuthenticationExtension } from './extensions/authentication.extension';
|
||||||
import { PersistenceExtension } from './extensions/persistence.extension';
|
import { PersistenceExtension } from './extensions/persistence.extension';
|
||||||
import { CollaborationGateway } from './collaboration.gateway';
|
import { CollaborationGateway } from './collaboration.gateway';
|
||||||
@@ -13,11 +7,9 @@ import { CollabWsAdapter } from './adapter/collab-ws.adapter';
|
|||||||
import { IncomingMessage } from 'http';
|
import { IncomingMessage } from 'http';
|
||||||
import { WebSocket } from 'ws';
|
import { WebSocket } from 'ws';
|
||||||
import { TokenModule } from '../core/auth/token.module';
|
import { TokenModule } from '../core/auth/token.module';
|
||||||
import { HistoryProcessor } from './processors/history.processor';
|
import { HistoryListener } from './listeners/history.listener';
|
||||||
import { LoggerExtension } from './extensions/logger.extension';
|
import { LoggerExtension } from './extensions/logger.extension';
|
||||||
import { CollaborationHandler } from './collaboration.handler';
|
import { CollaborationHandler } from './collaboration.handler';
|
||||||
import { CollabHistoryService } from './services/collab-history.service';
|
|
||||||
import { WatcherModule } from '../core/watcher/watcher.module';
|
|
||||||
|
|
||||||
@Module({
|
@Module({
|
||||||
providers: [
|
providers: [
|
||||||
@@ -25,12 +17,11 @@ import { WatcherModule } from '../core/watcher/watcher.module';
|
|||||||
AuthenticationExtension,
|
AuthenticationExtension,
|
||||||
PersistenceExtension,
|
PersistenceExtension,
|
||||||
LoggerExtension,
|
LoggerExtension,
|
||||||
HistoryProcessor,
|
HistoryListener,
|
||||||
CollabHistoryService,
|
|
||||||
CollaborationHandler,
|
CollaborationHandler,
|
||||||
],
|
],
|
||||||
exports: [CollaborationGateway],
|
exports: [CollaborationGateway],
|
||||||
imports: [TokenModule, WatcherModule],
|
imports: [TokenModule],
|
||||||
})
|
})
|
||||||
export class CollaborationModule implements OnModuleInit, OnModuleDestroy {
|
export class CollaborationModule implements OnModuleInit, OnModuleDestroy {
|
||||||
private readonly logger = new Logger(CollaborationModule.name);
|
private readonly logger = new Logger(CollaborationModule.name);
|
||||||
|
|||||||
@@ -34,7 +34,6 @@ import {
|
|||||||
Highlight,
|
Highlight,
|
||||||
UniqueID,
|
UniqueID,
|
||||||
addUniqueIdsToDoc,
|
addUniqueIdsToDoc,
|
||||||
htmlToMarkdown,
|
|
||||||
} from '@docmost/editor-ext';
|
} from '@docmost/editor-ext';
|
||||||
import { generateText, getSchema, JSONContent } from '@tiptap/core';
|
import { generateText, getSchema, JSONContent } from '@tiptap/core';
|
||||||
import { generateHTML, generateJSON } from '../common/helpers/prosemirror/html';
|
import { generateHTML, generateJSON } from '../common/helpers/prosemirror/html';
|
||||||
@@ -43,7 +42,6 @@ import { generateHTML, generateJSON } from '../common/helpers/prosemirror/html';
|
|||||||
// see:https://github.com/ueberdosis/tiptap/issues/4089
|
// see:https://github.com/ueberdosis/tiptap/issues/4089
|
||||||
//import { generateJSON } from '@tiptap/html';
|
//import { generateJSON } from '@tiptap/html';
|
||||||
import { Node, Schema } from '@tiptap/pm/model';
|
import { Node, Schema } from '@tiptap/pm/model';
|
||||||
import * as Y from 'yjs';
|
|
||||||
import { Logger } from '@nestjs/common';
|
import { Logger } from '@nestjs/common';
|
||||||
|
|
||||||
export const tiptapExtensions = [
|
export const tiptapExtensions = [
|
||||||
@@ -163,37 +161,3 @@ function stripUnknownNodes(
|
|||||||
|
|
||||||
return json;
|
return json;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function prosemirrorNodeToYElement(node: any): Y.XmlElement | Y.XmlText {
|
|
||||||
if (node.type === 'text') {
|
|
||||||
const ytext = new Y.XmlText();
|
|
||||||
ytext.insert(0, node.text || '');
|
|
||||||
if (node.marks?.length > 0) {
|
|
||||||
const attrs: Record<string, any> = {};
|
|
||||||
for (const mark of node.marks) {
|
|
||||||
attrs[mark.type] = mark.attrs || true;
|
|
||||||
}
|
|
||||||
ytext.format(0, node.text?.length || 0, attrs);
|
|
||||||
}
|
|
||||||
return ytext;
|
|
||||||
}
|
|
||||||
|
|
||||||
const element = new Y.XmlElement(node.type);
|
|
||||||
if (node.attrs) {
|
|
||||||
for (const [key, value] of Object.entries(node.attrs)) {
|
|
||||||
if (value !== null && value !== undefined) {
|
|
||||||
element.setAttribute(key, value as any);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (node.content?.length > 0) {
|
|
||||||
const children = node.content.map(prosemirrorNodeToYElement);
|
|
||||||
element.insert(0, children);
|
|
||||||
}
|
|
||||||
return element;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function jsonToMarkdown(tiptapJson: any): string {
|
|
||||||
const html = jsonToHtml(tiptapJson);
|
|
||||||
return htmlToMarkdown(html);
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,3 +0,0 @@
|
|||||||
export const HISTORY_INTERVAL = 5 * 60 * 1000;
|
|
||||||
export const HISTORY_FAST_INTERVAL = 60 * 1000;
|
|
||||||
export const HISTORY_FAST_THRESHOLD = 5 * 60 * 1000;
|
|
||||||
@@ -13,27 +13,17 @@ import { PageRepo } from '@docmost/db/repos/page/page.repo';
|
|||||||
import { InjectKysely } from 'nestjs-kysely';
|
import { InjectKysely } from 'nestjs-kysely';
|
||||||
import { KyselyDB } from '@docmost/db/types/kysely.types';
|
import { KyselyDB } from '@docmost/db/types/kysely.types';
|
||||||
import { executeTx } from '@docmost/db/utils';
|
import { executeTx } from '@docmost/db/utils';
|
||||||
|
import { EventEmitter2 } from '@nestjs/event-emitter';
|
||||||
import { InjectQueue } from '@nestjs/bullmq';
|
import { InjectQueue } from '@nestjs/bullmq';
|
||||||
import { QueueJob, QueueName } from '../../integrations/queue/constants';
|
import { QueueJob, QueueName } from '../../integrations/queue/constants';
|
||||||
import { Queue } from 'bullmq';
|
import { Queue } from 'bullmq';
|
||||||
import {
|
import {
|
||||||
extractMentions,
|
extractMentions,
|
||||||
extractPageMentions,
|
extractPageMentions,
|
||||||
extractUserMentions,
|
|
||||||
} from '../../common/helpers/prosemirror/utils';
|
} from '../../common/helpers/prosemirror/utils';
|
||||||
import { isDeepStrictEqual } from 'node:util';
|
import { isDeepStrictEqual } from 'node:util';
|
||||||
import {
|
import { IPageBacklinkJob } from '../../integrations/queue/constants/queue.interface';
|
||||||
IPageBacklinkJob,
|
|
||||||
IPageHistoryJob,
|
|
||||||
IPageMentionNotificationJob,
|
|
||||||
} from '../../integrations/queue/constants/queue.interface';
|
|
||||||
import { Page } from '@docmost/db/types/entity.types';
|
import { Page } from '@docmost/db/types/entity.types';
|
||||||
import { CollabHistoryService } from '../services/collab-history.service';
|
|
||||||
import {
|
|
||||||
HISTORY_FAST_INTERVAL,
|
|
||||||
HISTORY_FAST_THRESHOLD,
|
|
||||||
HISTORY_INTERVAL,
|
|
||||||
} from '../constants';
|
|
||||||
|
|
||||||
@Injectable()
|
@Injectable()
|
||||||
export class PersistenceExtension implements Extension {
|
export class PersistenceExtension implements Extension {
|
||||||
@@ -43,11 +33,9 @@ export class PersistenceExtension implements Extension {
|
|||||||
constructor(
|
constructor(
|
||||||
private readonly pageRepo: PageRepo,
|
private readonly pageRepo: PageRepo,
|
||||||
@InjectKysely() private readonly db: KyselyDB,
|
@InjectKysely() private readonly db: KyselyDB,
|
||||||
|
private eventEmitter: EventEmitter2,
|
||||||
@InjectQueue(QueueName.GENERAL_QUEUE) private generalQueue: Queue,
|
@InjectQueue(QueueName.GENERAL_QUEUE) private generalQueue: Queue,
|
||||||
@InjectQueue(QueueName.AI_QUEUE) private aiQueue: Queue,
|
@InjectQueue(QueueName.AI_QUEUE) private aiQueue: Queue,
|
||||||
@InjectQueue(QueueName.HISTORY_QUEUE) private historyQueue: Queue,
|
|
||||||
@InjectQueue(QueueName.NOTIFICATION_QUEUE) private notificationQueue: Queue,
|
|
||||||
private readonly collabHistory: CollabHistoryService,
|
|
||||||
) {}
|
) {}
|
||||||
|
|
||||||
async onLoadDocument(data: onLoadDocumentPayload) {
|
async onLoadDocument(data: onLoadDocumentPayload) {
|
||||||
@@ -113,7 +101,6 @@ export class PersistenceExtension implements Extension {
|
|||||||
}
|
}
|
||||||
|
|
||||||
let page: Page = null;
|
let page: Page = null;
|
||||||
const editingUserIds = this.consumeContributors(documentName);
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await executeTx(this.db, async (trx) => {
|
await executeTx(this.db, async (trx) => {
|
||||||
@@ -136,9 +123,13 @@ export class PersistenceExtension implements Extension {
|
|||||||
let contributorIds = undefined;
|
let contributorIds = undefined;
|
||||||
try {
|
try {
|
||||||
const existingContributors = page.contributorIds || [];
|
const existingContributors = page.contributorIds || [];
|
||||||
|
const contributorSet = this.contributors.get(documentName);
|
||||||
|
contributorSet.add(page.creatorId);
|
||||||
|
const newContributors = [...contributorSet];
|
||||||
contributorIds = Array.from(
|
contributorIds = Array.from(
|
||||||
new Set([...existingContributors, ...editingUserIds, page.creatorId]),
|
new Set([...existingContributors, ...newContributors]),
|
||||||
);
|
);
|
||||||
|
this.contributors.delete(documentName);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
//this.logger.debug('Contributors error:' + err?.['message']);
|
//this.logger.debug('Contributors error:' + err?.['message']);
|
||||||
}
|
}
|
||||||
@@ -162,7 +153,13 @@ export class PersistenceExtension implements Extension {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (page) {
|
if (page) {
|
||||||
await this.collabHistory.addContributors(pageId, editingUserIds);
|
this.eventEmitter.emit('collab.page.updated', {
|
||||||
|
page: {
|
||||||
|
...page,
|
||||||
|
content: tiptapJson,
|
||||||
|
lastUpdatedById: context.user.id,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
const mentions = extractMentions(tiptapJson);
|
const mentions = extractMentions(tiptapJson);
|
||||||
const pageMentions = extractPageMentions(mentions);
|
const pageMentions = extractPageMentions(mentions);
|
||||||
@@ -173,37 +170,16 @@ export class PersistenceExtension implements Extension {
|
|||||||
mentions: pageMentions,
|
mentions: pageMentions,
|
||||||
} as IPageBacklinkJob);
|
} as IPageBacklinkJob);
|
||||||
|
|
||||||
const userMentions = extractUserMentions(mentions);
|
|
||||||
const oldMentions = page.content ? extractMentions(page.content) : [];
|
|
||||||
const oldMentionedUserIds = extractUserMentions(oldMentions).map((m) => m.entityId);
|
|
||||||
|
|
||||||
if (userMentions.length > 0) {
|
|
||||||
await this.notificationQueue.add(QueueJob.PAGE_MENTION_NOTIFICATION, {
|
|
||||||
userMentions: userMentions.map((m) => ({
|
|
||||||
userId: m.entityId,
|
|
||||||
mentionId: m.id,
|
|
||||||
creatorId: m.creatorId,
|
|
||||||
})),
|
|
||||||
oldMentionedUserIds,
|
|
||||||
pageId,
|
|
||||||
spaceId: page.spaceId,
|
|
||||||
workspaceId: page.workspaceId,
|
|
||||||
} as IPageMentionNotificationJob);
|
|
||||||
}
|
|
||||||
|
|
||||||
await this.aiQueue.add(QueueJob.PAGE_CONTENT_UPDATED, {
|
await this.aiQueue.add(QueueJob.PAGE_CONTENT_UPDATED, {
|
||||||
pageIds: [pageId],
|
pageIds: [pageId],
|
||||||
workspaceId: page.workspaceId,
|
workspaceId: page.workspaceId,
|
||||||
});
|
});
|
||||||
|
|
||||||
await this.enqueuePageHistory(page);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async onChange(data: onChangePayload) {
|
async onChange(data: onChangePayload) {
|
||||||
const documentName = data.documentName;
|
const documentName = data.documentName;
|
||||||
const userId = data.context?.user?.id;
|
const userId = data.context?.user.id;
|
||||||
|
|
||||||
if (!userId) return;
|
if (!userId) return;
|
||||||
|
|
||||||
if (!this.contributors.has(documentName)) {
|
if (!this.contributors.has(documentName)) {
|
||||||
@@ -217,26 +193,4 @@ export class PersistenceExtension implements Extension {
|
|||||||
const documentName = data.documentName;
|
const documentName = data.documentName;
|
||||||
this.contributors.delete(documentName);
|
this.contributors.delete(documentName);
|
||||||
}
|
}
|
||||||
|
|
||||||
private consumeContributors(documentName: string): string[] {
|
|
||||||
const contributorSet = this.contributors.get(documentName);
|
|
||||||
if (!contributorSet) return [];
|
|
||||||
const userIds = [...contributorSet];
|
|
||||||
this.contributors.delete(documentName);
|
|
||||||
return userIds;
|
|
||||||
}
|
|
||||||
|
|
||||||
private async enqueuePageHistory(page: Page): Promise<void> {
|
|
||||||
const pageAge = Date.now() - new Date(page.createdAt).getTime();
|
|
||||||
const delay =
|
|
||||||
pageAge < HISTORY_FAST_THRESHOLD
|
|
||||||
? HISTORY_FAST_INTERVAL
|
|
||||||
: HISTORY_INTERVAL;
|
|
||||||
|
|
||||||
await this.historyQueue.add(
|
|
||||||
QueueJob.PAGE_HISTORY,
|
|
||||||
{ pageId: page.id } as IPageHistoryJob,
|
|
||||||
{ jobId: page.id, delay },
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,52 @@
|
|||||||
|
import { Injectable, Logger } from '@nestjs/common';
|
||||||
|
import { OnEvent } from '@nestjs/event-emitter';
|
||||||
|
import { PageHistoryRepo } from '@docmost/db/repos/page/page-history.repo';
|
||||||
|
import { Page } from '@docmost/db/types/entity.types';
|
||||||
|
import { isDeepStrictEqual } from 'node:util';
|
||||||
|
import { EnvironmentService } from '../../integrations/environment/environment.service';
|
||||||
|
|
||||||
|
export class UpdatedPageEvent {
|
||||||
|
page: Page;
|
||||||
|
}
|
||||||
|
|
||||||
|
@Injectable()
|
||||||
|
export class HistoryListener {
|
||||||
|
private readonly logger = new Logger(HistoryListener.name);
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
private readonly pageHistoryRepo: PageHistoryRepo,
|
||||||
|
private readonly environmentService: EnvironmentService,
|
||||||
|
) {}
|
||||||
|
|
||||||
|
@OnEvent('collab.page.updated')
|
||||||
|
async handleCreatePageHistory(event: UpdatedPageEvent) {
|
||||||
|
const { page } = event;
|
||||||
|
|
||||||
|
const pageCreationTime = new Date(page.createdAt).getTime();
|
||||||
|
const currentTime = Date.now();
|
||||||
|
const FIVE_MINUTES = this.environmentService.isDevelopment()
|
||||||
|
? 60 * 1000
|
||||||
|
: 5 * 60 * 1000;
|
||||||
|
|
||||||
|
if (currentTime - pageCreationTime < FIVE_MINUTES) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const lastHistory = await this.pageHistoryRepo.findPageLastHistory(page.id, {
|
||||||
|
includeContent: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (
|
||||||
|
!lastHistory ||
|
||||||
|
(!isDeepStrictEqual(lastHistory.content, page.content) &&
|
||||||
|
currentTime - new Date(lastHistory.createdAt).getTime() >= FIVE_MINUTES)
|
||||||
|
) {
|
||||||
|
try {
|
||||||
|
await this.pageHistoryRepo.saveHistory(page);
|
||||||
|
this.logger.debug(`New history created for: ${page.id}`);
|
||||||
|
} catch (err) {
|
||||||
|
this.logger.error(`Failed to create history for page: ${page.id}`, err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,93 +0,0 @@
|
|||||||
import { Logger, OnModuleDestroy } from '@nestjs/common';
|
|
||||||
import { OnWorkerEvent, Processor, WorkerHost } from '@nestjs/bullmq';
|
|
||||||
import { Job } from 'bullmq';
|
|
||||||
import { QueueJob, QueueName } from '../../integrations/queue/constants';
|
|
||||||
import { IPageHistoryJob } from '../../integrations/queue/constants/queue.interface';
|
|
||||||
import { PageHistoryRepo } from '@docmost/db/repos/page/page-history.repo';
|
|
||||||
import { PageRepo } from '@docmost/db/repos/page/page.repo';
|
|
||||||
import { isDeepStrictEqual } from 'node:util';
|
|
||||||
import { CollabHistoryService } from '../services/collab-history.service';
|
|
||||||
import { WatcherService } from '../../core/watcher/watcher.service';
|
|
||||||
|
|
||||||
@Processor(QueueName.HISTORY_QUEUE)
|
|
||||||
export class HistoryProcessor extends WorkerHost implements OnModuleDestroy {
|
|
||||||
private readonly logger = new Logger(HistoryProcessor.name);
|
|
||||||
|
|
||||||
constructor(
|
|
||||||
private readonly pageHistoryRepo: PageHistoryRepo,
|
|
||||||
private readonly pageRepo: PageRepo,
|
|
||||||
private readonly collabHistory: CollabHistoryService,
|
|
||||||
private readonly watcherService: WatcherService,
|
|
||||||
) {
|
|
||||||
super();
|
|
||||||
}
|
|
||||||
|
|
||||||
async process(job: Job<IPageHistoryJob, void>): Promise<void> {
|
|
||||||
if (job.name !== QueueJob.PAGE_HISTORY) return;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const { pageId } = job.data;
|
|
||||||
|
|
||||||
const page = await this.pageRepo.findById(pageId, {
|
|
||||||
includeContent: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!page) {
|
|
||||||
this.logger.warn(`Page ${pageId} not found, skipping history`);
|
|
||||||
await this.collabHistory.clearContributors(pageId);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const lastHistory = await this.pageHistoryRepo.findPageLastHistory(
|
|
||||||
pageId,
|
|
||||||
{ includeContent: true },
|
|
||||||
);
|
|
||||||
|
|
||||||
if (
|
|
||||||
!lastHistory ||
|
|
||||||
!isDeepStrictEqual(lastHistory.content, page.content)
|
|
||||||
) {
|
|
||||||
const contributorIds =
|
|
||||||
await this.collabHistory.popContributors(pageId);
|
|
||||||
|
|
||||||
try {
|
|
||||||
await this.watcherService.addPageWatchers(
|
|
||||||
contributorIds,
|
|
||||||
pageId,
|
|
||||||
page.spaceId,
|
|
||||||
page.workspaceId,
|
|
||||||
);
|
|
||||||
|
|
||||||
await this.pageHistoryRepo.saveHistory(page, { contributorIds });
|
|
||||||
this.logger.debug(`History created for page: ${pageId}`);
|
|
||||||
} catch (err) {
|
|
||||||
await this.collabHistory.addContributors(
|
|
||||||
pageId,
|
|
||||||
contributorIds,
|
|
||||||
);
|
|
||||||
throw err;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
throw err;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@OnWorkerEvent('active')
|
|
||||||
onActive(job: Job) {
|
|
||||||
this.logger.debug(`Processing ${job.name} for page: ${job.data.pageId}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
@OnWorkerEvent('failed')
|
|
||||||
onError(job: Job) {
|
|
||||||
this.logger.error(
|
|
||||||
`Failed ${job.name} for page: ${job.data.pageId}. Reason: ${job.failedReason}`,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
async onModuleDestroy(): Promise<void> {
|
|
||||||
if (this.worker) {
|
|
||||||
await this.worker.close();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -9,8 +9,6 @@ import { EventEmitterModule } from '@nestjs/event-emitter';
|
|||||||
import { HealthModule } from '../../integrations/health/health.module';
|
import { HealthModule } from '../../integrations/health/health.module';
|
||||||
import { CollaborationController } from './collaboration.controller';
|
import { CollaborationController } from './collaboration.controller';
|
||||||
import { LoggerModule } from '../../common/logger/logger.module';
|
import { LoggerModule } from '../../common/logger/logger.module';
|
||||||
import { RedisModule } from '@nestjs-labs/nestjs-ioredis';
|
|
||||||
import { RedisConfigService } from '../../integrations/redis/redis-config.service';
|
|
||||||
|
|
||||||
@Module({
|
@Module({
|
||||||
imports: [
|
imports: [
|
||||||
@@ -21,9 +19,6 @@ import { RedisConfigService } from '../../integrations/redis/redis-config.servic
|
|||||||
QueueModule,
|
QueueModule,
|
||||||
HealthModule,
|
HealthModule,
|
||||||
EventEmitterModule.forRoot(),
|
EventEmitterModule.forRoot(),
|
||||||
RedisModule.forRootAsync({
|
|
||||||
useClass: RedisConfigService,
|
|
||||||
}),
|
|
||||||
],
|
],
|
||||||
controllers: [
|
controllers: [
|
||||||
AppController,
|
AppController,
|
||||||
|
|||||||
@@ -7,7 +7,6 @@ import {
|
|||||||
import { TransformHttpResponseInterceptor } from '../../common/interceptors/http-response.interceptor';
|
import { TransformHttpResponseInterceptor } from '../../common/interceptors/http-response.interceptor';
|
||||||
import { Logger } from '@nestjs/common';
|
import { Logger } from '@nestjs/common';
|
||||||
import { Logger as PinoLogger } from 'nestjs-pino';
|
import { Logger as PinoLogger } from 'nestjs-pino';
|
||||||
import { InternalLogFilter } from '../../common/logger/internal-log-filter';
|
|
||||||
|
|
||||||
async function bootstrap() {
|
async function bootstrap() {
|
||||||
const app = await NestFactory.create<NestFastifyApplication>(
|
const app = await NestFactory.create<NestFastifyApplication>(
|
||||||
@@ -20,7 +19,7 @@ async function bootstrap() {
|
|||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
{
|
{
|
||||||
logger: new InternalLogFilter(),
|
logger: false,
|
||||||
bufferLogs: false,
|
bufferLogs: false,
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user