Refactor (#12)

* Break up structure with directories
* Split out Option
* Option card areas are themselves toggles

src/simple-editor/Configuration.tsx

@@ -4,9 +4,9 @@ import React from 'react';
 import { Typography, Box } from '@mui/material';
 import { Tabs, Tab } from '@mui/material';
 
-import ParamsForm from './ParamsForm';
-import AdvancedOptions from './AdvancedOptions';
-import Deployment from './Deployment';
+import ParamsForm from './model-params/ParamsForm';
+import Options from './options/Options';
+import Deployment from './deployment/Deployment';
 
 import { usePromptsStore } from './state/Prompts';
 import {
@@ -16,7 +16,7 @@ import {
 } from './state/Options';
 import { useDeploymentStore } from './state/Deployment';
 
-import Prompt from './Prompt';
+import Prompt from './options/Prompt';
 
 interface TabPanelProps {
     children?: React.ReactNode;
@@ -156,11 +156,21 @@ const Configuration: React.FC = () => {
 
             <CustomTabPanel value={value} tabId="more">
 
+                <Box sx={{ mb: 2}}>
                 <Typography variant="h5" component="h2" gutterBottom>
-                  Additional configuration
+                    Additional configuration
                 </Typography>
 
-                <AdvancedOptions/>
+                <Typography variant="body">
+                    Listed here are additional configuraton options and
+                    add-ons, all optional.  Click on additional
+                    configuration options to include in the configuration,
+                    further configuration options may appear on separate
+                    configuration tabs.
+                </Typography>
+                </Box>
+
+                <Options/>
 
             </CustomTabPanel>
 

src/simple-editor/ConfigGeneration.tsx → src/simple-editor/deployment/ConfigGeneration.tsx

@@ -9,11 +9,11 @@ import {
 } from '@mui/material';
 import { Close } from '@mui/icons-material';
 
-import { generateConfig } from './generate-config';
-import { useModelParamsStore } from './state/ModelParams';
-import { usePromptsStore } from './state/Prompts';
-import { useDeploymentStore } from './state/Deployment';
-import { useOptionsStore } from './state/Options';
+import { generateConfig } from '../generate-config';
+import { useModelParamsStore } from '../state/ModelParams';
+import { usePromptsStore } from '../state/Prompts';
+import { useDeploymentStore } from '../state/Deployment';
+import { useOptionsStore } from '../state/Options';
 
 const Generating = () => {
     return (

src/simple-editor/Deployment.tsx → src/simple-editor/deployment/Deployment.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import { Box } from '@mui/material';
 
-//import { useModelParamsStore } from './state/ModelParams';
+//import { useModelParamsStore } from '../state/ModelParams';
 
 import DeploymentModel from './DeploymentModel';
 import DeploymentConfig from './DeploymentConfig';

src/simple-editor/DeploymentConfig.tsx → src/simple-editor/deployment/DeploymentConfig.tsx

@@ -1,7 +1,7 @@
 
 import React from 'react';
 
-import { useDeploymentStore } from './state/Deployment';
+import { useDeploymentStore } from '../state/Deployment';
 
 import ConfigGeneration from './ConfigGeneration';
 import PreparedConfig from './PreparedConfig';

src/simple-editor/DeploymentModel.tsx → src/simple-editor/deployment/DeploymentModel.tsx

@@ -6,7 +6,7 @@ import {
     Typography, Paper, Box, Stack,
 } from '@mui/material';
 
-import { useModelParamsStore } from './state/ModelParams';
+import { useModelParamsStore } from '../state/ModelParams';
 
 const getInstructions = (model : string) => {
     if (model == "claude") {

src/simple-editor/PreparedConfig.tsx → src/simple-editor/deployment/PreparedConfig.tsx

@@ -7,8 +7,8 @@ import {
 
 import { Check } from '@mui/icons-material';
 
-import { useModelParamsStore } from './state/ModelParams';
-import { useDeploymentStore } from './state/Deployment';
+import { useModelParamsStore } from '../state/ModelParams';
+import { useDeploymentStore } from '../state/Deployment';
 
 const PreparedConfig = () => {
 

src/simple-editor/ParamsForm.tsx → src/simple-editor/model-params/ParamsForm.tsx

@@ -9,8 +9,8 @@ import Chunker from './Chunker';
 import ModelDeployment from './ModelDeployment';
 import ModelParameters from './ModelParameters';
 
-import { useModelParamsStore } from './state/ModelParams';
-import { useDeploymentStore } from './state/Deployment';
+import { useModelParamsStore } from '../state/ModelParams';
+import { useDeploymentStore } from '../state/Deployment';
 
 import modelsRaw from './models.json';
 const models = modelsRaw as { [ix : string ] : string[] };

src/simple-editor/options/Option.tsx

@@ -0,0 +1,97 @@
+
+import React from 'react';
+
+import {
+    Card, CardHeader, CardContent, CardActions, CardActionArea
+} from '@mui/material';
+import { Typography, ToggleButton, ToggleButtonGroup } from '@mui/material';
+import { Check, } from '@mui/icons-material';
+import { blue } from '@mui/material/colors';
+
+const Option = ({enabled, onChange, avatar, title, content} : {
+    enabled : boolean;
+    onChange : () => void,
+    avatar : any;
+    title : string;
+    content : any;
+}) => {
+
+    const Header = () => {
+
+        if (enabled) {
+            return (
+                <CardHeader
+                  sx={{
+                      backgroundColor: blue[200]
+                  }}
+                  avatar={avatar}
+                  title={title}
+                  subheader={
+                      <Typography variant="body">
+                          active
+                      </Typography>
+                  }
+                />
+            );
+        } else {
+            return (
+                <CardHeader
+                  avatar={avatar}
+                  title={title}
+                  subheader={
+                      <Typography variant="body">
+                          available
+                      </Typography>
+                  }
+                />
+            );
+        }
+
+    }
+
+    const Content = () => {
+
+        if (enabled) {
+            return (
+                <CardContent sx={{
+                    height: '4rem', backgroundColor: blue[200]
+                }}>
+                    <Typography
+                        variant="body2"
+                        sx={{ fontSize: 12 }}
+                    >
+                    {content}
+                    </Typography>
+                </CardContent>
+            );
+        } else {
+            return (
+                <CardContent sx={{height: '4rem'}}>
+                    <Typography
+                        variant="body2"
+                        sx={{ fontSize: 12 }}
+                    >
+                    {content}
+                    </Typography>
+                </CardContent>
+            );
+        }
+
+    }
+
+    return (
+        <Card sx={{ width: '16rem' }}>
+            <CardActionArea onClick={() => onChange()}>
+                <Header
+                  sx={{ backgroundColor: "primary.dark", color: "primary.contrastText" }}
+                  avatar={avatar}
+                  title={title}
+                />
+                <Content/>
+            </CardActionArea>
+        </Card>
+    );
+};
+
+export default Option;
+

src/simple-editor/AdvancedOptions.tsx → src/simple-editor/options/Options.tsx

@@ -1,12 +1,8 @@
 
-import React from 'react';
 
-import { Typography, ToggleButton } from '@mui/material';
-import { Card, CardHeader, CardContent, CardActions } from '@mui/material';
 import { Stack } from '@mui/material';
 import {
     Psychology,
-    Check,
 //    Spoke,
 //    Plumbing,
 //    Engineering,
@@ -16,13 +12,15 @@ import {
 //    MonitorHeart,
 //    Polyline,
 } from '@mui/icons-material';
-import { useDeploymentStore } from './state/Deployment';
+import { useDeploymentStore } from '../state/Deployment';
 
 import {
     useOptionsStore, DEFINITIONS_PROMPT, RELATIONSHIPS_PROMPT,
     TOPICS_PROMPT, KNOWLEDGE_QUERY_PROMPT, DOCUMENT_QUERY_PROMPT,
     ROWS_PROMPT,
-} from './state/Options';
+} from '../state/Options';
+
+import Option from './Option';
 
 const ParamsForm: React.FC = ({
 }) => {
@@ -81,41 +79,6 @@ const ParamsForm: React.FC = ({
         set(ROWS_PROMPT, !rows);
     };
 
-    const Option = ({enabled, onChange, avatar, title, content} : {
-        enabled : boolean;
-        onChange : () => void,
-        avatar : any;
-        title : string;
-        content : any;
-    }) => {
-        return (
-            <Card sx={{ width: '16rem' }}>
-                <CardHeader
-                  avatar={avatar}
-                  title={title}
-                />
-                <CardContent>
-                    <Typography
-                        variant="body2"
-                        sx={{ fontSize: 12 }}
-                    >
-                    {content}
-                    </Typography>
-                </CardContent>
-                <CardActions>
-                    <ToggleButton
-                        value="check"
-                        selected={enabled}
-                        color="primary"
-                        onChange={() => onChange()}
-                    >
-                        <Check/>
-                    </ToggleButton>
-                </CardActions>
-            </Card>
-        );
-    };
-
     return (
         <>