Skip to content

Commit

Permalink
WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
@harishmohanraj
harishmohanraj committed Apr 20, 2024
1 parent e2f24fe commit a3ef247
Show file tree
Hide file tree
Showing 4 changed files with 110 additions and 23 deletions.
59 changes: 55 additions & 4 deletions app/src/client/app/ModelsPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,10 @@ const ModelsPage = () => {
setShowAddModel(false);
};

const onCancelCallback = () => {
setShowAddModel(false);
};

return (
<CustomLayout>
<CustomBreadcrumb pageName='Models' />
Expand All @@ -65,12 +69,58 @@ const ModelsPage = () => {
</div>
<div className='flex-col flex w-full'>
{!showAddModel ? (
modelsList ? (
modelsList && modelsList.length > 0 ? (
<div className='flex flex-col gap-3'>
<h2 className='text-lg font-semibold'>Available Models</h2>
<div className='flex flex-col gap-2'>{JSON.stringify(modelsList)}</div>
<h2 className='text-lg font-semibold text-airt-primary'>Available Models</h2>
<div className='grid grid-cols-3 gap-3'>
{modelsList.map((model) => {
return (
<div className='group relative cursor-pointer overflow-hidden bg-airt-primary text-airt-font-base px-6 pt-10 pb-8 transition-all duration-300 hover:-translate-y-1 sm:max-w-sm sm:rounded-lg sm:pl-8 sm:pr-24'>
<span className='absolute top-10 z-0 h-8 w-8 rounded-full bg-airt-hero-gradient-start transition-all duration-300 group-hover:scale-[30]'></span>
<div className='relative z-10 mx-auto max-w-md'>
<div className='flex items-center mb-3'>
<div className='w-8 h-8 mr-3 inline-flex items-center justify-center rounded-full dark:bg-indigo-500 bg-airt-hero-gradient-start text-white flex-shrink-0'>
<svg
fill='none'
stroke='currentColor'
strokeLinecap='round'
strokeLinejoin='round'
strokeWidth='2'
className='w-5 h-5'
viewBox='0 0 24 24'
>
<path d='M22 12h-4l-3 9L9 3l-3 9H2'></path>
</svg>
</div>
<h2 className='text-white dark:text-white text-lg font-medium'>
{model.api_type.toUpperCase()}
</h2>
</div>
<div className='flex flex-col gap-2 text-white py-4 sm:max-w-sm sm:rounded-lg'>
<p>Model: {model.model}</p>
</div>
{/* <div className='pt-5 text-base font-semibold leading-7'>
<p>
<a
href='#'
className='text-sky-500 transition-all duration-300 group-hover:text-white'
>
Update &rarr;
</a>
</p>
</div> */}
</div>
</div>
);
})}
</div>
</div>
) : null
) : (
<div className='flex flex-col gap-3'>
<h2 className='text-lg font-semibold text-airt-primary'>Available Models</h2>
<p className='text-airt-primary/50 pt-2'>Please add a new model...</p>
</div>
)
) : (
modelsSchema && (
<>
Expand All @@ -80,6 +130,7 @@ const ModelsPage = () => {
jsonSchema={initialModelSchema}
validationURL={`models/llms/${selectedModel}/validate`}
onSuccessCallback={onSuccessCallback}
onCancelCallback={onCancelCallback}
/>
)}
</>
Expand Down
52 changes: 35 additions & 17 deletions app/src/client/components/CustomSidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,25 +117,43 @@ const CustomSidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
width='18'
height='18'
viewBox='0 0 18 18'
fill='none'
xmlns='http://www.w3.org/2000/svg'
>
<path
d='M6.10322 0.956299H2.53135C1.5751 0.956299 0.787598 1.7438 0.787598 2.70005V6.27192C0.787598 7.22817 1.5751 8.01567 2.53135 8.01567H6.10322C7.05947 8.01567 7.84697 7.22817 7.84697 6.27192V2.72817C7.8751 1.7438 7.0876 0.956299 6.10322 0.956299ZM6.60947 6.30005C6.60947 6.5813 6.38447 6.8063 6.10322 6.8063H2.53135C2.2501 6.8063 2.0251 6.5813 2.0251 6.30005V2.72817C2.0251 2.44692 2.2501 2.22192 2.53135 2.22192H6.10322C6.38447 2.22192 6.60947 2.44692 6.60947 2.72817V6.30005Z'
fill=''
/>
<path
d='M15.4689 0.956299H11.8971C10.9408 0.956299 10.1533 1.7438 10.1533 2.70005V6.27192C10.1533 7.22817 10.9408 8.01567 11.8971 8.01567H15.4689C16.4252 8.01567 17.2127 7.22817 17.2127 6.27192V2.72817C17.2127 1.7438 16.4252 0.956299 15.4689 0.956299ZM15.9752 6.30005C15.9752 6.5813 15.7502 6.8063 15.4689 6.8063H11.8971C11.6158 6.8063 11.3908 6.5813 11.3908 6.30005V2.72817C11.3908 2.44692 11.6158 2.22192 11.8971 2.22192H15.4689C15.7502 2.22192 15.9752 2.44692 15.9752 2.72817V6.30005Z'
fill=''
/>
<path
d='M6.10322 9.92822H2.53135C1.5751 9.92822 0.787598 10.7157 0.787598 11.672V15.2438C0.787598 16.2001 1.5751 16.9876 2.53135 16.9876H6.10322C7.05947 16.9876 7.84697 16.2001 7.84697 15.2438V11.7001C7.8751 10.7157 7.0876 9.92822 6.10322 9.92822ZM6.60947 15.272C6.60947 15.5532 6.38447 15.7782 6.10322 15.7782H2.53135C2.2501 15.7782 2.0251 15.5532 2.0251 15.272V11.7001C2.0251 11.4188 2.2501 11.1938 2.53135 11.1938H6.10322C6.38447 11.1938 6.60947 11.4188 6.60947 11.7001V15.272Z'
fill=''
/>
<path
d='M15.4689 9.92822H11.8971C10.9408 9.92822 10.1533 10.7157 10.1533 11.672V15.2438C10.1533 16.2001 10.9408 16.9876 11.8971 16.9876H15.4689C16.4252 16.9876 17.2127 16.2001 17.2127 15.2438V11.7001C17.2127 10.7157 16.4252 9.92822 15.4689 9.92822ZM15.9752 15.272C15.9752 15.5532 15.7502 15.7782 15.4689 15.7782H11.8971C11.6158 15.7782 11.3908 15.5532 11.3908 15.272V11.7001C11.3908 11.4188 11.6158 11.1938 11.8971 11.1938H15.4689C15.7502 11.1938 15.9752 11.4188 15.9752 11.7001V15.272Z'
fill=''
/>
<g transform='scale(0.03515625)'>
<g>
<g>
<path
d='M500.23,270.051h-74.54V212.66c0-6.501-5.271-11.77-11.77-11.77h-48.1l27.688-47.958l64.046,36.977
c1.804,1.043,3.837,1.577,5.885,1.577c1.019,0,2.044-0.133,3.046-0.401c3.017-0.809,5.586-2.78,7.147-5.484l20.598-35.678
c2.533-4.388,1.975-9.906-1.389-13.696C445.913,83.333,394.793,29.371,331.424,1.649c-5.491-2.402-11.913-0.294-14.91,4.899
l-38.253,66.256c-3.251,5.63-1.322,12.828,4.308,16.078l39.586,22.855l-69.394,120.189l-78.893-116.953l-2.194-16.818
c-0.237-1.813-0.892-3.544-1.914-5.059l-29.837-44.232c-3.636-5.39-10.952-6.81-16.339-3.176l-53.66,36.193
c-2.588,1.746-4.377,4.448-4.973,7.512c-0.596,3.064,0.051,6.24,1.796,8.828l29.837,44.232c1.02,1.513,2.379,2.767,3.968,3.665
l14.769,8.345l77.97,115.587H147.67l-46.458-95.485c-2.845-5.845-9.89-8.277-15.733-5.434c-5.845,2.845-8.278,9.888-5.434,15.733
l41.447,85.186H91.712l-18.556-42.205c-2.618-5.951-9.566-8.653-15.512-6.037c-5.951,2.616-8.655,9.561-6.038,15.512
l14.39,32.732H11.77c-6.5,0-11.77,5.269-11.77,11.77v64.736c0,6.501,5.271,11.77,11.77,11.77h20.598v141.241
c0,6.501,5.271,11.77,11.77,11.77h423.724c6.499,0,11.77-5.269,11.77-11.77V358.328h20.598c6.5,0,11.77-5.269,11.77-11.77
v-64.736C512,275.32,506.729,270.051,500.23,270.051z M402.15,224.43v45.621h-76.259l26.338-45.621H402.15z M304.533,74.381
l26.982-46.734c52.385,25.827,96.917,71.78,138.08,117.868l-10.464,18.122L304.533,74.381z M263.734,260.013
c0.005-0.008,0.007-0.016,0.012-0.025l78.799-136.482l30.578,17.654l-74.412,128.89h-40.774L263.734,260.013z M133.285,139
c-1.02-1.512-2.379-2.767-3.968-3.665l-14.769-8.345L92.846,94.815l34.144-23.029l21.702,32.171l2.194,16.818
c0.237,1.813,0.892,3.544,1.914,5.059l86.868,128.772l-8.917,15.444h-9.063L133.285,139z M456.092,438.952h-48.846
c-6.499,0-11.77,5.269-11.77,11.77s5.271,11.77,11.77,11.77h48.846v25.306H55.908v-25.306h48.846
c6.499,0,11.77-5.269,11.77-11.77s-5.271-11.77-11.77-11.77H55.908v-80.625h135.356v41.195c0,6.501,5.271,11.77,11.77,11.77
h105.931c6.499,0,11.77-5.269,11.77-11.77v-41.195h135.356V438.952z M214.805,387.752v-29.425h82.391v29.425H214.805z
M488.46,334.787H23.54v-41.195h464.92V334.787z'
/>
<path
d='M149.677,438.952H148.5c-6.499,0-11.77,5.269-11.77,11.77s5.271,11.77,11.77,11.77h1.177
c6.499,0,11.77-5.269,11.77-11.77S156.176,438.952,149.677,438.952z'
/>
<path
d='M362.323,462.492h1.177c6.499,0,11.77-5.269,11.77-11.77s-5.271-11.77-11.77-11.77h-1.177
c-6.499,0-11.77,5.269-11.77,11.77S355.824,462.492,362.323,462.492z'
/>
</g>
</g>
</g>
</svg>
ToolBoxes
</NavLink>
Expand Down
18 changes: 16 additions & 2 deletions app/src/client/components/DynamicFormBuilder.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,15 @@ interface DynamicFormBuilderProps {
jsonSchema: JsonSchema;
validationURL: string;
onSuccessCallback: (data: any) => void;
onCancelCallback: (data: any) => void;
}

const DynamicFormBuilder: React.FC<DynamicFormBuilderProps> = ({ jsonSchema, validationURL, onSuccessCallback }) => {
const DynamicFormBuilder: React.FC<DynamicFormBuilderProps> = ({
jsonSchema,
validationURL,
onSuccessCallback,
onCancelCallback,
}) => {
const { formData, handleChange, formErrors, setFormErrors } = useForm(jsonSchema);
const [isLoading, setIsLoading] = useState(false);

Expand Down Expand Up @@ -64,7 +70,15 @@ const DynamicFormBuilder: React.FC<DynamicFormBuilderProps> = ({ jsonSchema, val
disabled={isLoading}
data-testid='form-submit-button'
>
Submit
Save
</button>
<button
className='ml-3 rounded-md px-3.5 py-2.5 text-sm border border-airt-error text-airt-primary hover:bg-opacity-10 hover:bg-airt-error shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
disabled={isLoading}
data-testid='form-cancel-button'
onClick={onCancelCallback}
>
Cancel
</button>
</div>
</form>
Expand Down
4 changes: 4 additions & 0 deletions app/src/client/tests/DynamicFormBuilder.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ describe('DynamicFormBuilder', () => {
jsonSchema={jsonSchema}
validationURL='https://some-domain/some-route'
onSuccessCallback={vi.fn()}
onCancelCallback={vi.fn()}
/>
);
expect(screen.getByLabelText('Model')).toBeInTheDocument();
Expand All @@ -85,6 +86,7 @@ describe('DynamicFormBuilder', () => {
jsonSchema={jsonSchema}
validationURL='https://some-domain/some-route'
onSuccessCallback={onSuccessCallback}
onCancelCallback={vi.fn()}
/>
);

Expand Down Expand Up @@ -134,6 +136,7 @@ describe('DynamicFormBuilder', () => {
jsonSchema={jsonSchema}
validationURL='https://some-domain/some-route'
onSuccessCallback={onSuccessCallback}
onCancelCallback={vi.fn()}
/>
);

Expand All @@ -152,6 +155,7 @@ describe('DynamicFormBuilder', () => {
jsonSchema={jsonSchema}
validationURL='https://some-domain/some-route'
onSuccessCallback={vi.fn()}
onCancelCallback={vi.fn()}
/>
);

Expand Down

0 comments on commit a3ef247

Please sign in to comment.