Added workbench UI option (#75)

trustgraph-ai · Dec 20, 2024 · a54e648 · a54e648
1 parent 036e6a7
commit a54e648
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 17 deletions.
diff --git a/src/simple-editor/generate-config.ts b/src/simple-editor/generate-config.ts
@@ -3,7 +3,7 @@ import { ModelParams } from './state/ModelParams';
 import { Prompts } from './state/Prompts';
 import { Agents } from './state/Agents';
 import {
-    Options, CONFIGURE_PROMPTS, CONFIGURE_AGENTS
+    Options, CONFIGURE_PROMPTS, CONFIGURE_AGENTS, CONFIGURE_WORKBENCH,
 } from './state/Options';
 
 export const generateConfig =
@@ -98,6 +98,16 @@ export const generateConfig =
 
       }
 
+      if (options.options.has(CONFIGURE_WORKBENCH)) {
+
+          config.push({
+              "name": "workbench-ui",
+              "parameters": {
+              },
+          });
+
+      }
+
       config.push({
           "name": "null",
           "parameters": parameters,

diff --git a/src/simple-editor/options/Option.tsx b/src/simple-editor/options/Option.tsx
@@ -5,13 +5,16 @@ import { Card, CardHeader, CardContent, CardActionArea } from '@mui/material';
 import { Typography } from '@mui/material';
 import { blue } from '@mui/material/colors';
 
-const Option = ({enabled, onChange, avatar, title, content} : {
+interface OptionProps extends React.PropsWithChildren {
     enabled : boolean;
     onChange : () => void,
     avatar : React.ReactNode;
     title : string;
-    content : React.ReactNode;
-}) => {
+    children : React.ReactNode;
+};
+
+const Option : React.FC<OptionProps> =
+({enabled, onChange, avatar, title, children}) => {
 
     const Header = () => {
 
@@ -56,7 +59,7 @@ const Option = ({enabled, onChange, avatar, title, content} : {
                     <Typography
                         variant="body2"
                     >
-                    {content}
+                    {children}
                     </Typography>
                 </CardContent>
             );
@@ -66,7 +69,7 @@ const Option = ({enabled, onChange, avatar, title, content} : {
                     <Typography
                         variant="body2"
                     >
-                    {content}
+                    {children}
                     </Typography>
                 </CardContent>
             );

diff --git a/src/simple-editor/options/Options.tsx b/src/simple-editor/options/Options.tsx
@@ -1,11 +1,12 @@
 
 
 import { Stack } from '@mui/material';
-import { Psychology, ChatBubble } from '@mui/icons-material';
+import { Psychology, ChatBubble, Insights } from '@mui/icons-material';
 import { useDeploymentStore } from '../state/Deployment';
 
 import {
-    useOptionsStore, CONFIGURE_PROMPTS, CONFIGURE_AGENTS
+    useOptionsStore, CONFIGURE_PROMPTS, CONFIGURE_AGENTS,
+    CONFIGURE_WORKBENCH,
 } from '../state/Options';
 
 import Option from './Option';
@@ -26,6 +27,7 @@ const ParamsForm: React.FC = ({
 
     const configurePrompts = options.has(CONFIGURE_PROMPTS);
     const configureAgents = options.has(CONFIGURE_AGENTS);
+    const configureWorkbench = options.has(CONFIGURE_WORKBENCH);
 
     const set = (o : string, value : boolean) => {
         if (value) {
@@ -47,6 +49,10 @@ const ParamsForm: React.FC = ({
         set(CONFIGURE_AGENTS, !configureAgents);
     };
 
+    const onConfigureWorkbench = () => {
+        set(CONFIGURE_WORKBENCH, !configureWorkbench);
+    };
+
     return (
         <>
 
@@ -59,22 +65,30 @@ const ParamsForm: React.FC = ({
                     onChange={onConfigurePrompts}
                     avatar={<ChatBubble color="primary"/>}
                     title="Data Extraction Prompts"
-                    content={
-                        'Tailor the LLM system prompts, data extraction prompts, and RAG query prompts.'
-                    }
-
-                />
+                >
+                    Tailor the LLM system prompts, data extraction prompts,
+                    and RAG query prompts.
+                </Option>
 
                 <Option
                     enabled={configureAgents}
                     onChange={onConfigureAgents}
                     avatar={<Psychology color="primary"/>}
                     title="Agent Definitions"
-                    content={
-                        'Add Agents that use a ReAct approach. Customize the Agent definitions, options, and arguments.'
-                    }
+                >
+                    Add Agents that use a ReAct approach. Customize the
+                    Agent definitions, options, and arguments.
+                </Option>
 
-                />
+                <Option
+                    enabled={configureWorkbench}
+                    onChange={onConfigureWorkbench}
+                    avatar={<Insights color="primary"/>}
+                    title="Workbench UI"
+                >
+                    An experimental UI providing some tools to interact with
+                    data.
+                </Option>
 
             </Stack>
 

diff --git a/src/simple-editor/state/Options.ts b/src/simple-editor/state/Options.ts
@@ -5,6 +5,8 @@ export const CONFIGURE_PROMPTS = "configure-prompts";
 
 export const CONFIGURE_AGENTS = "configure-agents";
 
+export const CONFIGURE_WORKBENCH = "configure-workbench";
+
 export interface Options {
 
     options : Set<string>;