File size: 3,479 Bytes
f8b5d42 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | import System from "@/models/system";
import paths from "@/utils/paths";
import showToast from "@/utils/toast";
import { ArrowSquareOut } from "@phosphor-icons/react";
import { useState } from "react";
import { Link } from "react-router-dom";
export default function LiveSyncToggle({ enabled = false, onToggle }) {
const [status, setStatus] = useState(enabled);
async function toggleFeatureFlag() {
const updated =
await System.experimentalFeatures.liveSync.toggleFeature(!status);
if (!updated) {
showToast("Failed to update status of feature.", "error", {
clear: true,
});
return false;
}
setStatus(!status);
showToast(
`Live document content sync has been ${
!status ? "enabled" : "disabled"
}.`,
"success",
{ clear: true }
);
onToggle();
}
return (
<div className="p-4">
<div className="flex flex-col gap-y-6 max-w-[500px]">
<div className="flex items-center justify-between">
<h2 className="text-theme-text-primary text-md font-bold">
Automatic Document Content Sync
</h2>
<label className="relative inline-flex cursor-pointer items-center">
<input
type="checkbox"
onClick={toggleFeatureFlag}
checked={status}
className="peer sr-only pointer-events-none"
/>
<div className="peer-disabled:opacity-50 pointer-events-none peer h-6 w-11 rounded-full bg-[#CFCFD0] after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border-none after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-[#32D583] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-transparent"></div>
</label>
</div>
<div className="flex flex-col space-y-4">
<p className="text-theme-text-secondary text-sm">
Enable the ability to specify a document to be "watched". Watched
document's content will be regularly fetched and updated in
AnythingLLM.
</p>
<p className="text-theme-text-secondary text-sm">
Watched documents will automatically update in all workspaces they
are referenced in at the same time of update.
</p>
<p className="text-theme-text-secondary text-xs italic">
This feature only applies to web-based content, such as websites,
Confluence, YouTube, and GitHub files.
</p>
</div>
</div>
<div className="mt-8">
<ul className="space-y-2">
<li>
<a
href="https://docs.anythingllm.com/beta-preview/active-features/live-document-sync"
target="_blank"
className="text-sm text-blue-400 light:text-blue-500 hover:underline flex items-center gap-x-1"
>
<ArrowSquareOut size={14} />
<span>Feature Documentation and Warnings</span>
</a>
</li>
<li>
<Link
to={paths.experimental.liveDocumentSync.manage()}
className="text-sm text-blue-400 light:text-blue-500 hover:underline"
>
Manage Watched Documents →
</Link>
</li>
</ul>
</div>
</div>
);
}
|