scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-10-04 02:31:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 69

feat(ui): prompts/add_prompt_form to shadcn Dialog

Browse source 
- antd Modal/Button/Divider + @tremor TextInput + @ant-design
  UploadOutlined \u2192 shadcn Dialog/Button/Input + lucide Upload
  + native <hr className='border-border'>.
- antd Form/Select/Upload preserved since Form.Item drives validation
  and the antd Upload widget binds the file-list state.

Gates: TS \u2713 | Build \u2713.

Co-authored-by: yuneng-jiang <yuneng-berri@users.noreply.github.com>
This commit is contained in:
Cursor Agent 2026-04-23 13:54:57 +00:00
parent 8d88347800
commit 07c5420d03
No known key found for this signature in database
1 changed files with 74 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

121
ui/litellm-dashboard/src/components/prompts/add_prompt_form.tsx
View file

@ -1,7 +1,15 @@
import React, { useState } from "react";
import { Modal, Form, Select, Upload, Button, Divider } from "antd";
import { TextInput } from "@tremor/react";
import { UploadOutlined } from "@ant-design/icons";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Form, Select, Upload } from "antd";
import { Upload as UploadIcon } from "lucide-react";
import type { UploadFile, UploadProps } from "antd";
import { convertPromptFileToJson, createPromptCall } from "../networking";
import NotificationsManager from "../molecules/notifications_manager";
@ -51,6 +59,7 @@ const AddPromptForm: React.FC<AddPromptFormProps> = ({ visible, onClose, accessT
setLoading(true);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
let promptData: any = {};
if (promptIntegration === "dotprompt" && fileList.length > 0) {
@ -116,54 +125,72 @@ const AddPromptForm: React.FC<AddPromptFormProps> = ({ visible, onClose, accessT
};
return (
<Modal
title="Add New Prompt"
<Dialog
open={visible}
onCancel={handleCancel}
footer={[
<Button key="cancel" onClick={handleCancel}>
Cancel
</Button>,
<Button key="submit" loading={loading} onClick={handleSubmit}>
Create Prompt
</Button>,
]}
width={600}
onOpenChange={(o) => (!o ? handleCancel() : undefined)}
>
<Form form={form} layout="vertical" requiredMark={false}>
<Form.Item
label="Prompt ID"
name="prompt_id"
rules={[
{ required: true, message: "Please enter a prompt ID" },
{
pattern: /^[a-zA-Z0-9_-]+$/,
message: "Prompt ID can only contain letters, numbers, underscores, and hyphens",
},
]}
>
<TextInput placeholder="Enter unique prompt ID (e.g., my_prompt_id)" />
</Form.Item>
<DialogContent className="max-w-[600px]">
<DialogHeader>
<DialogTitle>Add New Prompt</DialogTitle>
</DialogHeader>
<Form form={form} layout="vertical" requiredMark={false}>
<Form.Item
label="Prompt ID"
name="prompt_id"
rules={[
{ required: true, message: "Please enter a prompt ID" },
{
pattern: /^[a-zA-Z0-9_-]+$/,
message:
"Prompt ID can only contain letters, numbers, underscores, and hyphens",
},
]}
>
<Input placeholder="Enter unique prompt ID (e.g., my_prompt_id)" />
</Form.Item>
<Form.Item label="Prompt Integration" name="prompt_integration" initialValue="dotprompt">
<Select value={promptIntegration} onChange={setPromptIntegration}>
<Option value="dotprompt">dotprompt</Option>
</Select>
</Form.Item>
<Form.Item
label="Prompt Integration"
name="prompt_integration"
initialValue="dotprompt"
>
<Select value={promptIntegration} onChange={setPromptIntegration}>
<Option value="dotprompt">dotprompt</Option>
</Select>
</Form.Item>
{promptIntegration === "dotprompt" && (
<>
<Divider />
<Form.Item label="Prompt File" extra="Upload a .prompt file that follows the Dotprompt specification">
<Upload {...uploadProps}>
<Button icon={<UploadOutlined />}>Select .prompt File</Button>
</Upload>
{fileList.length > 0 && <div className="mt-2 text-sm text-gray-600">Selected: {fileList[0].name}</div>}
</Form.Item>
</>
)}
</Form>
</Modal>
{promptIntegration === "dotprompt" && (
<>
<hr className="my-4 border-border" />
<Form.Item
label="Prompt File"
extra="Upload a .prompt file that follows the Dotprompt specification"
>
<Upload {...uploadProps}>
<Button variant="outline" type="button">
<UploadIcon className="h-4 w-4" />
Select .prompt File
</Button>
</Upload>
{fileList.length > 0 && (
<div className="mt-2 text-sm text-muted-foreground">
Selected: {fileList[0].name}
</div>
)}
</Form.Item>
</>
)}
</Form>
<DialogFooter>
<Button variant="outline" onClick={handleCancel}>
Cancel
</Button>
<Button onClick={handleSubmit} disabled={loading}>
{loading ? "Creating…" : "Create Prompt"}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
};