diff --git a/frontend/src/pages/Admin/ExperimentalFeatures/Features/LiveSync/toggle.jsx b/frontend/src/pages/Admin/ExperimentalFeatures/Features/LiveSync/toggle.jsx index ce662ebe435..69a758d515b 100644 --- a/frontend/src/pages/Admin/ExperimentalFeatures/Features/LiveSync/toggle.jsx +++ b/frontend/src/pages/Admin/ExperimentalFeatures/Features/LiveSync/toggle.jsx @@ -5,7 +5,7 @@ import { ArrowSquareOut } from "@phosphor-icons/react"; import { useState } from "react"; import { Link } from "react-router-dom"; -export default function LiveSyncToggle({ enabled = false }) { +export default function LiveSyncToggle({ enabled = false, onToggle }) { const [status, setStatus] = useState(enabled); async function toggleFeatureFlag() { @@ -13,7 +13,7 @@ export default function LiveSyncToggle({ enabled = false }) { !status ); if (!updated) { - showToast(`Failed to update status of feature.`, "error", { + showToast("Failed to update status of feature.", "error", { clear: true, }); return false; @@ -27,60 +27,63 @@ export default function LiveSyncToggle({ enabled = false }) { "success", { clear: true } ); + onToggle(); } return ( -
-
-
-
-
-
- - -
-
+
+
+
+

+ Automatic Document Content Sync +

+
-
-

+

+

Enable the ability to specify a document to be "watched". Watched document's content will be regularly fetched and updated in AnythingLLM.

-

- Watched documents will automatically update the in all workspaces it - is referenced in at the same time of update. +

+ Watched documents will automatically update in all workspaces they + are referenced in at the same time of update.

-

- this feature only applies to web-based content. eg: Websites, - Confluence, YouTube, and Github files. +

+ This feature only applies to web-based content, such as websites, + Confluence, YouTube, and GitHub files.

-
- - Feature documentation and warnings - - - Manage watched documents → - +
+
); diff --git a/frontend/src/pages/Admin/ExperimentalFeatures/features.js b/frontend/src/pages/Admin/ExperimentalFeatures/features.js new file mode 100644 index 00000000000..7dc8251eb07 --- /dev/null +++ b/frontend/src/pages/Admin/ExperimentalFeatures/features.js @@ -0,0 +1,9 @@ +import LiveSyncToggle from "./Features/LiveSync/toggle"; + +export const configurableFeatures = { + experimental_live_file_sync: { + title: "Live Document Sync", + component: LiveSyncToggle, + key: "experimental_live_file_sync", + }, +}; diff --git a/frontend/src/pages/Admin/ExperimentalFeatures/index.jsx b/frontend/src/pages/Admin/ExperimentalFeatures/index.jsx index fb6fa70ea22..0652f26d156 100644 --- a/frontend/src/pages/Admin/ExperimentalFeatures/index.jsx +++ b/frontend/src/pages/Admin/ExperimentalFeatures/index.jsx @@ -1,16 +1,20 @@ import { useEffect, useState } from "react"; import Sidebar from "@/components/SettingsSidebar"; import { isMobile } from "react-device-detect"; -import PreLoader from "@/components/Preloader"; +import Admin from "@/models/admin"; +import { FullScreenLoader } from "@/components/Preloader"; +import { CaretRight, Flask } from "@phosphor-icons/react"; +import { configurableFeatures } from "./features"; import ModalWrapper from "@/components/ModalWrapper"; import paths from "@/utils/paths"; import showToast from "@/utils/toast"; -import LiveSyncToggle from "./Features/LiveSync/toggle"; -import Admin from "@/models/admin"; export default function ExperimentalFeatures() { const [featureFlags, setFeatureFlags] = useState({}); const [loading, setLoading] = useState(true); + const [selectedFeature, setSelectedFeature] = useState( + "experimental_live_file_sync" + ); useEffect(() => { async function fetchSettings() { @@ -22,46 +26,135 @@ export default function ExperimentalFeatures() { fetchSettings(); }, []); + const refresh = async () => { + const { settings } = await Admin.systemPreferences(); + setFeatureFlags(settings?.feature_flags ?? {}); + }; + + if (loading) { + return ( +
+ +
+ ); + } + + return ( + +
+ {/* Feature settings nav */} +
+
+ +

Experimental Features

+
+ {/* Feature list */} + featureFlags[flag] + )} + /> +
+ + {/* Selected feature setting panel */} + +
+
+ {selectedFeature ? ( + + ) : ( +
+ +

Select an experimental feature

+
+ )} +
+
+ +
+ + ); +} + +function FeatureLayout({ children }) { return ( -
+
-
-
-
-

- Experimental Features -

+ {children} +
+
+ ); +} + +function FeatureList({ + features = [], + selectedFeature = null, + handleClick = null, + activeFeatures = [], +}) { + if (Object.keys(features).length === 0) return null; + + return ( +
+ {Object.entries(features).map(([feature, settings], index) => ( +
handleClick?.(feature)} + > +
{settings.title}
+
+
+ {activeFeatures.includes(settings.key) ? "On" : "Off"}
-

- Enable and access experimental features of AnythingLLM. Features - here may change, move, or no longer exist at any time and support - for them is not guaranteed. While a feature is in preview it can - only be managed via this page. -

+
- {loading ? ( -
-
- -
-
- ) : ( - - - - )}
-
+ ))}
); } +function SelectedFeatureComponent({ feature, settings, refresh }) { + const Component = feature?.component; + return Component ? ( + + ) : null; +} + function FeatureVerification({ children }) { if ( !window.localStorage.getItem("anythingllm_tos_experimental_feature_set")