diff --git a/app/src/client/app/ModelsPage.tsx b/app/src/client/app/ModelsPage.tsx index a2d6a5b..5d89c7f 100644 --- a/app/src/client/app/ModelsPage.tsx +++ b/app/src/client/app/ModelsPage.tsx @@ -1,74 +1,49 @@ -import { useState, useEffect } from 'react'; +import React from 'react'; + import { getModels, useQuery, updateUserModels } from 'wasp/client/operations'; +import { useModels, ModelsActionType } from '../hooks/useModels'; import CustomLayout from './layout/CustomLayout'; import CustomBreadcrumb from '../components/CustomBreadcrumb'; -import Button from '../components/Button'; -import DynamicFormBuilder from '../components/DynamicFormBuilder'; import Loader from '../admin/common/Loader'; -import { getAvailableModels } from '../services/modelService'; -import { ModelSchema, JsonSchema } from '../interfaces/models'; -import ModelFormContainer from '../components/ModelFormContainer'; import NotificationBox from '../components/NotificationBox'; -import { UpdateExistingModelType } from '../interfaces/models'; +import ModelsList from '../components/ModelsList'; +import ModelForm from '../components/ModelForm'; +import Button from '../components/Button'; const ModelsPage = () => { - const [modelsSchema, setModelsSchema] = useState(null); - const [initialModelSchema, setInitialModelSchema] = useState(null); - const [selectedModel, setSelectedModel] = useState(''); - const [updateExistingModel, setUpdateExistingModel] = useState(); - const [isLoading, setIsLoading] = useState(false); - const [error, setError] = useState(null); - const [showAddModel, setShowAddModel] = useState(false); + const { state, dispatch, fetchData } = useModels(); const { data: modelsList, refetch: refetchModels, isLoading: getModelsIsLoading } = useQuery(getModels); - const fetchData = async () => { - // setShowAddModel(true); - setIsLoading(true); - try { - const response = await getAvailableModels(); - setModelsSchema(response); - setInitialModelSchema(response.schemas[0].json_schema); - setSelectedModel(response.schemas[0].name); - } catch (error: any) { - setError('Something went wrong. Please try again later.'); - console.log(error); - } - setIsLoading(false); - }; - - useEffect(() => { - fetchData(); - }, []); - const handleModelChange = (newModel: string) => { - const foundSchema = modelsSchema?.schemas.find((schema) => schema.name === newModel); + const foundSchema = state.modelSchemas?.schemas.find((schema) => schema.name === newModel); if (foundSchema) { - setInitialModelSchema(foundSchema.json_schema); - setSelectedModel(foundSchema.name); + dispatch({ + type: ModelsActionType.SELECT_MODEL, + payload: { json_schema: foundSchema.json_schema, name: foundSchema.name }, + }); } }; const onSuccessCallback = async (data: any) => { await updateUserModels({ data }); refetchModels(); - setShowAddModel(false); + dispatch({ type: ModelsActionType.TOGGLE_ADD_MODEL, payload: false }); }; const onCancelCallback = () => { - setShowAddModel(false); + dispatch({ type: ModelsActionType.TOGGLE_ADD_MODEL, payload: false }); }; const updateSelectedModel = (index: number) => { if (modelsList) { const selectedModel = modelsList[index]; const selectedModelSchemaName = selectedModel.api_type === 'openai' ? 'openai' : 'azureoai'; - const foundSchema = modelsSchema?.schemas.find((schema) => schema.name.toLowerCase() === selectedModelSchemaName); + const foundSchema = state.modelSchemas?.schemas.find( + (schema) => schema.name.toLowerCase() === selectedModelSchemaName + ); if (foundSchema) { - setInitialModelSchema(foundSchema.json_schema); - setSelectedModel(foundSchema.name); - setUpdateExistingModel(selectedModel); - setShowAddModel(true); + dispatch({ type: ModelsActionType.UPDATE_EXISTING_MODEL, payload: selectedModel }); } } }; @@ -80,122 +55,71 @@ const ModelsPage = () => {
-
+
- {!showAddModel ? ( - modelsList && modelsList.length > 0 ? ( -
-

Available Models

-
- {modelsList.map((model, i) => { - return ( -
updateSelectedModel(i)} - > - -
-
-
- - - -
-

- {model.api_type.toUpperCase()} -

-
-
-

Model: {model.model}

-
- {/* */} -
-
- ); - })} -
-
- ) : ( -
-

Available Models

-

No models available. Please add one.

-
- ) + {state.isLoading || getModelsIsLoading ? ( + ) : ( - modelsSchema && ( - <> - + {!state.showAddModel ? ( + + ) : ( + <> + {state.initialModelSchema && state.modelSchemas && ( + + )} + + )} + {state.error && ( + dispatch({ type: ModelsActionType.SET_ERROR, payload: null })} /> - {initialModelSchema && ( - - )} - - ) + )} + )} - {error && setError(null)} message={error} />}
- {isLoading || - (getModelsIsLoading && ( -
- -
- ))}
); }; export default ModelsPage; + +const LoaderComponent: React.FC = () => ( +
+ +
+); + +interface ErrorNotificationProps { + message: string; + clearError: () => void; +} + +const ErrorNotification: React.FC = ({ message, clearError }) => ( + +); diff --git a/app/src/client/components/DynamicFormBuilder.tsx b/app/src/client/components/DynamicFormBuilder.tsx index fc566b8..d0724f9 100644 --- a/app/src/client/components/DynamicFormBuilder.tsx +++ b/app/src/client/components/DynamicFormBuilder.tsx @@ -1,18 +1,18 @@ import React, { useState } from 'react'; import { useForm } from '../hooks/useForm'; -import { JsonSchema } from '../interfaces/models'; +import { JsonSchema } from '../interfaces/ModelInterfaces'; import { TextInput } from './form/TextInput'; import { SelectInput } from './form/SelectInput'; import { validateForm } from '../services/commonService'; import { parseValidationErrors } from '../app/utils/formHelpers'; import Loader from '../admin/common/Loader'; -import { UpdateExistingModelType } from '../interfaces/models'; +import { Model } from '../interfaces/ModelInterfaces'; interface DynamicFormBuilderProps { jsonSchema: JsonSchema; validationURL: string; - updateExistingModel: UpdateExistingModelType | null; + updateExistingModel: Model | null; onSuccessCallback: (data: any) => void; onCancelCallback: (data: any) => void; } @@ -43,39 +43,35 @@ const DynamicFormBuilder: React.FC = ({ return ( <>
- {Object.entries(jsonSchema.properties).map(([key, property]) => - property?.enum?.length === 1 ? null : ( + {Object.entries(jsonSchema.properties).map(([key, property]) => { + const inputValue = + updateExistingModel && updateExistingModel.hasOwnProperty(key) + ? // @ts-ignore + updateExistingModel[key] || '' + : formData[key] || ''; + + return property?.enum?.length === 1 ? null : (
{property.enum ? ( handleChange(key, value)} /> ) : ( handleChange(key, value)} /> )} {formErrors[key] &&
{formErrors[key]}
}
- ) - )} + ); + })}