-
Notifications
You must be signed in to change notification settings - Fork 52
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
1639 - client - Add PropertyJsonSchemaBuilder component
- Loading branch information
Showing
4 changed files
with
247 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
125 changes: 125 additions & 0 deletions
125
.../components/Properties/components/PropertyJsonSchemaBuilder/PropertyJsonSchemaBuilder.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,125 @@ | ||
| import {SchemaRecordType} from '@/components/JsonSchemaBuilder/utils/types'; | ||
| import RequiredMark from '@/components/RequiredMark'; | ||
| import {Button} from '@/components/ui/button'; | ||
| import {Label} from '@/components/ui/label'; | ||
| import {Tooltip, TooltipContent, TooltipTrigger} from '@/components/ui/tooltip'; | ||
| import InputTypeSwitchButton from '@/pages/platform/workflow-editor/components/Properties/components/InputTypeSwitchButton'; | ||
| import PropertyJsonSchemaBuilderSheet from '@/pages/platform/workflow-editor/components/Properties/components/PropertyJsonSchemaBuilder/PropertyJsonSchemaBuilderSheet'; | ||
| import useWorkflowEditorStore from '@/pages/platform/workflow-editor/stores/useWorkflowEditorStore'; | ||
| import {ExclamationTriangleIcon, QuestionMarkCircledIcon} from '@radix-ui/react-icons'; | ||
| import React, {ReactNode, forwardRef} from 'react'; | ||
| import {twMerge} from 'tailwind-merge'; | ||
|
|
||
| interface PropertyJsonSchemaBuilderProps { | ||
| description?: string; | ||
| error?: boolean; | ||
| errorMessage?: string; | ||
| handleInputTypeSwitchButtonClick?: () => void; | ||
| label?: string; | ||
| leadingIcon?: ReactNode; | ||
| locale?: string; | ||
| name: string; | ||
| onChange?: (newSchema: SchemaRecordType) => void; | ||
| required?: boolean; | ||
| schema: SchemaRecordType; | ||
| } | ||
|
|
||
| const PropertyJsonSchemaBuilder = forwardRef<HTMLButtonElement, PropertyJsonSchemaBuilderProps>( | ||
| ( | ||
| { | ||
| description, | ||
| error, | ||
| errorMessage, | ||
| handleInputTypeSwitchButtonClick, | ||
| label, | ||
| leadingIcon, | ||
| locale, | ||
| name, | ||
| onChange, | ||
| required, | ||
| schema, | ||
| }, | ||
| ref | ||
| ) => { | ||
| const {setShowPropertyJsonSchemaBuilder, showPropertyJsonSchemaBuilder} = useWorkflowEditorStore(); | ||
|
|
||
| return ( | ||
| <> | ||
| <fieldset className="mb-3 w-full"> | ||
| {label && ( | ||
| <div className="flex w-full items-center justify-between"> | ||
| <div className="flex items-center"> | ||
| <Label className={twMerge(description && 'mr-1', 'leading-normal')} htmlFor={name}> | ||
| {label} | ||
|
|
||
| {required && <RequiredMark />} | ||
| </Label> | ||
|
|
||
| {description && ( | ||
| <Tooltip> | ||
| <TooltipTrigger> | ||
| <QuestionMarkCircledIcon /> | ||
| </TooltipTrigger> | ||
|
|
||
| <TooltipContent>{description}</TooltipContent> | ||
| </Tooltip> | ||
| )} | ||
| </div> | ||
|
|
||
| {handleInputTypeSwitchButtonClick && ( | ||
| <InputTypeSwitchButton | ||
| handleClick={handleInputTypeSwitchButtonClick} | ||
| mentionInput={false} | ||
| /> | ||
| )} | ||
| </div> | ||
| )} | ||
|
|
||
| <div className={twMerge([label && 'mt-1', leadingIcon && 'relative'])}> | ||
| <div className={twMerge(leadingIcon && 'relative flex w-full rounded-md')}> | ||
| {leadingIcon && ( | ||
| <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center rounded-l-md border border-input bg-gray-100 px-3"> | ||
| {leadingIcon} | ||
| </div> | ||
| )} | ||
|
|
||
| <Button | ||
| className="ml-10 flex-1 rounded-l-none" | ||
| onClick={() => setShowPropertyJsonSchemaBuilder(true)} | ||
| ref={ref} | ||
| variant="outline" | ||
| > | ||
| Open JSON Schema Builder | ||
| </Button> | ||
|
|
||
| {error && ( | ||
| <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3"> | ||
| <ExclamationTriangleIcon aria-hidden="true" className="size-5 text-red-500" /> | ||
| </div> | ||
| )} | ||
| </div> | ||
| </div> | ||
|
|
||
| {error && ( | ||
| <p className="mt-2 text-sm text-destructive" id={`${name}-error`} role="alert"> | ||
| {errorMessage || 'This field is required.'} | ||
| </p> | ||
| )} | ||
| </fieldset> | ||
|
|
||
| {showPropertyJsonSchemaBuilder && ( | ||
| <PropertyJsonSchemaBuilderSheet | ||
| locale={locale} | ||
| onChange={onChange} | ||
| onClose={() => setShowPropertyJsonSchemaBuilder(false)} | ||
| schema={schema} | ||
| /> | ||
| )} | ||
| </> | ||
| ); | ||
| } | ||
| ); | ||
|
|
||
| PropertyJsonSchemaBuilder.displayName = 'PropertyJsonSchemaBuilder'; | ||
|
|
||
| export default PropertyJsonSchemaBuilder; |
67 changes: 67 additions & 0 deletions
67
...onents/Properties/components/PropertyJsonSchemaBuilder/PropertyJsonSchemaBuilderSheet.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| import JsonSchemaBuilder from '@/components/JsonSchemaBuilder/JsonSchemaBuilder'; | ||
| import {SchemaRecordType} from '@/components/JsonSchemaBuilder/utils/types'; | ||
| import {Sheet, SheetContent, SheetHeader, SheetTitle} from '@/components/ui/sheet'; | ||
| import {Tabs, TabsContent, TabsList, TabsTrigger} from '@/components/ui/tabs'; | ||
| import Editor from '@monaco-editor/react'; | ||
| import React from 'react'; | ||
|
|
||
| interface PropertyJsonSchemaBuilderSheetProps { | ||
| locale?: string; | ||
| onChange?: (newSchema: SchemaRecordType) => void; | ||
| onClose?: () => void; | ||
| schema: SchemaRecordType; | ||
| } | ||
|
|
||
| const PropertyJsonSchemaBuilderSheet = ({locale, onChange, onClose, schema}: PropertyJsonSchemaBuilderSheetProps) => { | ||
| return ( | ||
| <Sheet onOpenChange={onClose} open> | ||
| <SheetContent | ||
| className="flex w-11/12 flex-col gap-0 p-0 sm:max-w-screen-lg" | ||
| onFocusOutside={(event) => event.preventDefault()} | ||
| onPointerDownOutside={(event) => event.preventDefault()} | ||
| > | ||
| <Tabs className="flex size-full flex-col" defaultValue="designer"> | ||
| <SheetHeader> | ||
| <div className="p-4"> | ||
| <div className="mr-8 flex items-center justify-between"> | ||
| <div className="flex flex-col"> | ||
| <SheetTitle>JSON Schema Builder</SheetTitle> | ||
|
|
||
| <SheetHeader> | ||
| Define desired response format for the output returned by the model | ||
| </SheetHeader> | ||
| </div> | ||
|
|
||
| <TabsList> | ||
| <TabsTrigger value="designer">Designer</TabsTrigger> | ||
|
|
||
| <TabsTrigger value="editor">Editor</TabsTrigger> | ||
| </TabsList> | ||
| </div> | ||
| </div> | ||
| </SheetHeader> | ||
|
|
||
| <div className="flex-1 overflow-y-auto px-4"> | ||
| <TabsContent className="" value="designer"> | ||
| <JsonSchemaBuilder locale={locale} onChange={onChange} schema={schema} /> | ||
| </TabsContent> | ||
|
|
||
| <TabsContent className="h-full" value="editor"> | ||
| <Editor | ||
| defaultLanguage="json" | ||
| onChange={(value) => { | ||
| if (value && onChange) { | ||
| onChange(JSON.parse(value)); | ||
| } | ||
| }} | ||
| value={JSON.stringify(schema, null, 4)} | ||
| /> | ||
| </TabsContent> | ||
| </div> | ||
| </Tabs> | ||
| </SheetContent> | ||
| </Sheet> | ||
| ); | ||
| }; | ||
|
|
||
| export default PropertyJsonSchemaBuilderSheet; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters