diff options
| author | Ilan Bigio <ilan@openai.com> | 2024-12-16 13:06:08 -0800 |
|---|---|---|
| committer | Ilan Bigio <ilan@openai.com> | 2024-12-19 16:08:22 -0500 |
| commit | 20009aed53d8864c9204d43a17895168a777d2cc (patch) | |
| tree | 754dded819869bc34a8a2a02c66ea72dac1ccd24 /webapp/components/tool-configuration-dialog.tsx | |
Initial commit
Diffstat (limited to 'webapp/components/tool-configuration-dialog.tsx')
| -rw-r--r-- | webapp/components/tool-configuration-dialog.tsx | 104 |
1 files changed, 104 insertions, 0 deletions
diff --git a/webapp/components/tool-configuration-dialog.tsx b/webapp/components/tool-configuration-dialog.tsx new file mode 100644 index 0000000..7d3b9ea --- /dev/null +++ b/webapp/components/tool-configuration-dialog.tsx @@ -0,0 +1,104 @@ +import React from "react"; +import { Button } from "@/components/ui/button"; +import { + Dialog, + DialogContent, + DialogFooter, + DialogHeader, + DialogTitle, +} from "@/components/ui/dialog"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; +import { Textarea } from "@/components/ui/textarea"; +import { toolTemplates } from "@/lib/tool-templates"; +import { BackendTag } from "./backend-tag"; + +interface ToolConfigurationDialogProps { + open: boolean; + onOpenChange: (open: boolean) => void; + editingIndex: number | null; + selectedTemplate: string; + editingSchemaStr: string; + isJsonValid: boolean; + onTemplateChange: (val: string) => void; + onSchemaChange: (val: string) => void; + onSave: () => void; + backendTools: any[]; // schemas returned from the server +} + +export const ToolConfigurationDialog: React.FC< + ToolConfigurationDialogProps +> = ({ + open, + onOpenChange, + editingIndex, + selectedTemplate, + editingSchemaStr, + isJsonValid, + onTemplateChange, + onSchemaChange, + onSave, + backendTools, +}) => { + // Combine local templates and backend templates + const localTemplateOptions = toolTemplates.map((template) => ({ + ...template, + source: "local", + })); + + const backendTemplateOptions = backendTools.map((t: any) => ({ + ...t, + source: "backend", + })); + + const allTemplates = [...localTemplateOptions, ...backendTemplateOptions]; + + return ( + <Dialog open={open} onOpenChange={onOpenChange}> + <DialogContent className="sm:max-w-lg"> + <DialogHeader> + <DialogTitle> + {editingIndex === null ? "Add Tool" : "Edit Tool"} + </DialogTitle> + </DialogHeader> + <div className="space-y-4 py-4"> + <Select value={selectedTemplate} onValueChange={onTemplateChange}> + <SelectTrigger> + <SelectValue placeholder="Select a template (optional)" /> + </SelectTrigger> + <SelectContent> + {allTemplates.map((template) => ( + <SelectItem key={template.name} value={template.name}> + <span className="flex items-center"> + {template.name} + {template.source === "backend" && <BackendTag />} + </span> + </SelectItem> + ))} + </SelectContent> + </Select> + + <Textarea + className="min-h-[200px] font-mono text-sm" + value={editingSchemaStr} + onChange={(e) => onSchemaChange(e.target.value)} + placeholder="Enter tool JSON schema" + /> + </div> + <DialogFooter> + <Button variant="outline" onClick={() => onOpenChange(false)}> + Cancel + </Button> + <Button onClick={onSave} disabled={!isJsonValid}> + Save Changes + </Button> + </DialogFooter> + </DialogContent> + </Dialog> + ); +}; |
