Skip to content

Commit 1ea2811

Browse files
sid597sid597
authored
ENG-1112: add suggestive mode flag and settings to admin panel (#589)
* add suggestive mode to admin panel * add alerts, only show when enabled * add to node config as well
1 parent aaf9dee commit 1ea2811

4 files changed

Lines changed: 135 additions & 29 deletions

File tree

‎apps/roam/src/components/settings/AdminPanel.tsx‎

Lines changed: 108 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1-
import React, { useState, useEffect } from "react";
1+
import React, { useState, useEffect, useMemo } from "react";
22
import {
33
Button,
44
Checkbox,
55
HTMLTable,
6+
Alert,
7+
Intent,
68
Label,
79
MenuItem,
810
Spinner,
@@ -29,6 +31,11 @@ import migrateRelations from "~/utils/migrateRelations";
2931
import { countReifiedRelations } from "~/utils/createReifiedBlock";
3032
import { DGSupabaseClient } from "@repo/database/lib/client";
3133
import sendErrorEmail from "~/utils/sendErrorEmail";
34+
import SuggestiveModeSettings from "./SuggestiveModeSettings";
35+
import { getFormattedConfigTree } from "~/utils/discourseConfigRef";
36+
import refreshConfigTree from "~/utils/refreshConfigTree";
37+
import createBlock from "roamjs-components/writes/createBlock";
38+
import deleteBlock from "roamjs-components/writes/deleteBlock";
3239

3340
const NodeRow = ({ node }: { node: PConceptFull }) => {
3441
return (
@@ -326,8 +333,96 @@ const FeatureFlagsTab = (): React.ReactElement => {
326333
const [useReifiedRelations, setUseReifiedRelations] = useState<boolean>(
327334
getSetting("use-reified-relations"),
328335
);
336+
const settings = useMemo(() => {
337+
refreshConfigTree();
338+
return getFormattedConfigTree();
339+
}, []);
340+
341+
const [suggestiveModeEnabled, setSuggestiveModeEnabled] = useState(
342+
settings.suggestiveModeEnabled.value || false,
343+
);
344+
const [suggestiveModeUid, setSuggestiveModeUid] = useState(
345+
settings.suggestiveModeEnabled.uid,
346+
);
347+
const [isAlertOpen, setIsAlertOpen] = useState(false);
348+
const [isInstructionOpen, setIsInstructionOpen] = useState(false);
349+
329350
return (
330351
<div className="flex flex-col gap-4 p-4">
352+
<Checkbox
353+
checked={suggestiveModeEnabled}
354+
onChange={(e) => {
355+
const checked = (e.target as HTMLInputElement).checked;
356+
if (checked) {
357+
setIsAlertOpen(true);
358+
} else {
359+
if (suggestiveModeUid) {
360+
void deleteBlock(suggestiveModeUid);
361+
setSuggestiveModeUid(undefined);
362+
}
363+
setSuggestiveModeEnabled(false);
364+
}
365+
}}
366+
labelElement={
367+
<>
368+
(BETA) Suggestive Mode Enabled
369+
<Description
370+
description={
371+
"Whether or not to enable the suggestive mode, if this is first time enabling it, you will need to generate and upload all node embeddings to supabase. Go to Suggestive Mode -> Sync Config -> Click on 'Generate & Upload All Node Embeddings'"
372+
}
373+
/>
374+
</>
375+
}
376+
/>
377+
<Alert
378+
isOpen={isAlertOpen}
379+
onConfirm={() => {
380+
void createBlock({
381+
parentUid: settings.settingsUid,
382+
node: { text: "(BETA) Suggestive Mode Enabled" },
383+
}).then((uid) => {
384+
setSuggestiveModeUid(uid);
385+
setSuggestiveModeEnabled(true);
386+
setIsAlertOpen(false);
387+
setIsInstructionOpen(true);
388+
});
389+
}}
390+
onCancel={() => setIsAlertOpen(false)}
391+
canEscapeKeyCancel={true}
392+
canOutsideClickCancel={true}
393+
intent={Intent.PRIMARY}
394+
confirmButtonText="Enable"
395+
cancelButtonText="Cancel"
396+
>
397+
<p>
398+
Enabling Suggestive Mode will send your data (nodes) to our servers
399+
and OpenAI servers to generate embeddings and suggestions.
400+
</p>
401+
<p>Are you sure you want to proceed?</p>
402+
</Alert>
403+
404+
<Alert
405+
isOpen={isInstructionOpen}
406+
onConfirm={() => window.location.reload()}
407+
onCancel={() => setIsInstructionOpen(false)}
408+
confirmButtonText="Reload Graph"
409+
cancelButtonText="Later"
410+
intent={Intent.PRIMARY}
411+
>
412+
<p>
413+
If this is the first time enabling it, you will need to generate and
414+
upload all node embeddings to supabase.
415+
</p>
416+
<p>
417+
Please reload the graph to see the new &apos;Suggestive Mode&apos;
418+
tab.
419+
</p>
420+
<p>
421+
Then go to Suggestive Mode{" "}
422+
{"-> Sync Config -> Click on 'Generate & Upload All Node Embeddings'"}
423+
</p>
424+
</Alert>
425+
331426
<Checkbox
332427
defaultChecked={useReifiedRelations}
333428
onChange={(e) => {
@@ -366,6 +461,10 @@ const FeatureFlagsTab = (): React.ReactElement => {
366461

367462
const AdminPanel = (): React.ReactElement => {
368463
const [selectedTabId, setSelectedTabId] = useState<TabId>("admin");
464+
const settings = useMemo(() => {
465+
refreshConfigTree();
466+
return getFormattedConfigTree();
467+
}, []);
369468

370469
return (
371470
<Tabs
@@ -400,6 +499,14 @@ const AdminPanel = (): React.ReactElement => {
400499
</div>
401500
}
402501
/>
502+
{settings.suggestiveModeEnabled.value && (
503+
<Tab
504+
id="suggestive-mode-settings"
505+
title="Suggestive Mode"
506+
className="overflow-y-auto"
507+
panel={<SuggestiveModeSettings />}
508+
/>
509+
)}
403510
</Tabs>
404511
);
405512
};

‎apps/roam/src/components/settings/GeneralSettings.tsx‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -38,14 +38,6 @@ const DiscourseGraphHome = () => {
3838
parentUid={settings.settingsUid}
3939
value={settings.leftSidebarEnabled.value || false}
4040
/>
41-
<FlagPanel
42-
title="(BETA) Suggestive Mode Enabled"
43-
description="Whether or not to enable the suggestive mode, if this is first time enabling it, you will need to generate and upload all node embeddings to supabase. Go to Suggestive Mode -> Sync Config -> Click on 'Generate & Upload All Node Embeddings'"
44-
order={3}
45-
uid={settings.suggestiveModeEnabled.uid}
46-
parentUid={settings.settingsUid}
47-
value={settings.suggestiveModeEnabled.value || false}
48-
/>
4941
</div>
5042
);
5143
};

‎apps/roam/src/components/settings/NodeConfig.tsx‎

Lines changed: 27 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
1-
import React, { useState, useCallback, useRef, useEffect } from "react";
1+
import React, {
2+
useState,
3+
useCallback,
4+
useRef,
5+
useEffect,
6+
useMemo,
7+
} from "react";
28
import { DiscourseNode } from "~/utils/getDiscourseNodes";
39
import FlagPanel from "roamjs-components/components/ConfigPanels/FlagPanel";
410
import SelectPanel from "roamjs-components/components/ConfigPanels/SelectPanel";
@@ -23,6 +29,8 @@ import getBasicTreeByParentUid from "roamjs-components/queries/getBasicTreeByPar
2329
import createBlock from "roamjs-components/writes/createBlock";
2430
import updateBlock from "roamjs-components/writes/updateBlock";
2531
import DiscourseNodeSuggestiveRules from "./DiscourseNodeSuggestiveRules";
32+
import { getFormattedConfigTree } from "~/utils/discourseConfigRef";
33+
import refreshConfigTree from "~/utils/refreshConfigTree";
2634

2735
export const getCleanTagText = (tag: string): string => {
2836
return tag.replace(/^#+/, "").trim().toUpperCase();
@@ -164,6 +172,10 @@ const NodeConfig = ({
164172
node: DiscourseNode;
165173
onloadArgs: OnloadArgs;
166174
}) => {
175+
const settings = useMemo(() => {
176+
refreshConfigTree();
177+
return getFormattedConfigTree();
178+
}, []);
167179
const getUid = (key: string) =>
168180
getSubTree({
169181
parentUid: node.type,
@@ -398,18 +410,20 @@ const NodeConfig = ({
398410
</div>
399411
}
400412
/>
401-
<Tab
402-
id="suggestive-mode"
403-
title="Suggestive Mode"
404-
panel={
405-
<div className="flex flex-col gap-4 p-1">
406-
<DiscourseNodeSuggestiveRules
407-
node={node}
408-
parentUid={suggestiveRulesUid}
409-
/>
410-
</div>
411-
}
412-
/>
413+
{settings.suggestiveModeEnabled.value && (
414+
<Tab
415+
id="suggestive-mode"
416+
title="Suggestive Mode"
417+
panel={
418+
<div className="flex flex-col gap-4 p-1">
419+
<DiscourseNodeSuggestiveRules
420+
node={node}
421+
parentUid={suggestiveRulesUid}
422+
/>
423+
</div>
424+
}
425+
/>
426+
)}
413427
</Tabs>
414428
</>
415429
);

‎apps/roam/src/components/settings/Settings.tsx‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ import NodeConfig from "./NodeConfig";
2525
import HomePersonalSettings from "./HomePersonalSettings";
2626
import refreshConfigTree from "~/utils/refreshConfigTree";
2727
import { FeedbackWidget } from "~/components/BirdEatsBugs";
28-
import SuggestiveModeSettings from "./SuggestiveModeSettings";
2928
import { getVersionWithDate } from "~/utils/getVersion";
3029
import { LeftSidebarPersonalSections } from "./LeftSidebarPersonalSettings";
3130
import { LeftSidebarGlobalSections } from "./LeftSidebarGlobalSettings";
@@ -178,12 +177,6 @@ export const SettingsDialog = ({
178177
className="overflow-y-auto"
179178
panel={<LeftSidebarGlobalSections />}
180179
/>
181-
<Tab
182-
id="suggestive-mode-settings"
183-
title="Suggestive Mode"
184-
className="overflow-y-auto"
185-
panel={<SuggestiveModeSettings />}
186-
/>
187180
<SectionHeader>Grammar</SectionHeader>
188181
<Tab
189182
id="discourse-relations"

0 commit comments

Comments
 (0)