refactor: replace antd with shadcn/ui

2026-06-02 03:55:55 +00:00 · 2025-05-07 18:06:44 +08:00
parent f5cee8b6b5
commit d2fb0dd749
28 changed files with 2907 additions and 225 deletions
--- a/web/components.json
+++ b/web/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/global.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
--- a/web/next
+++ b/web/next
--- a/web/package-lock.json
+++ b/web/package-lock.json
--- a/web/package.json
+++ b/web/package.json
@@ -12,13 +12,30 @@
  },
  "dependencies": {
    "@ant-design/v5-patch-for-react-19": "^1.0.3",
+    "@hookform/resolvers": "^5.0.1",
+    "@radix-ui/react-checkbox": "^1.3.1",
+    "@radix-ui/react-dialog": "^1.1.13",
+    "@radix-ui/react-label": "^2.1.6",
+    "@radix-ui/react-select": "^2.2.4",
+    "@radix-ui/react-slot": "^1.2.2",
+    "@radix-ui/react-toggle": "^1.1.8",
+    "@radix-ui/react-toggle-group": "^1.1.9",
+    "@tailwindcss/postcss": "^4.1.5",
    "antd": "^5.24.6",
    "axios": "^1.8.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
    "lodash": "^4.17.21",
+    "lucide-react": "^0.507.0",
    "next": "15.2.4",
+    "postcss": "^8.5.3",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
-    "uuidjs": "^5.1.0"
+    "react-hook-form": "^7.56.2",
+    "tailwind-merge": "^3.2.0",
+    "tailwindcss": "^4.1.5",
+    "uuidjs": "^5.1.0",
+    "zod": "^3.24.4"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
@@ -33,6 +50,7 @@
    "husky": "^9.1.7",
    "lint-staged": "^15.5.1",
    "prettier": "^3.5.3",
+    "tw-animate-css": "^1.2.9",
    "typescript": "^5.8.3",
    "typescript-eslint": "^8.31.1"
  }
--- a/web/postcss.config.mjs
+++ b/web/postcss.config.mjs
@@ -0,0 +1,6 @@
+const config = {
+    plugins: {
+      "@tailwindcss/postcss": {},
+    },
+  };
+  export default config;
--- a/web/src/app/global.css
+++ b/web/src/app/global.css
@@ -1,12 +1,8 @@
-* {
-    margin: 0;
-    padding: 0;
-}

 :root {
   /* 适用于 Firefox 的滚动条 */
   scrollbar-color: rgba(0, 0, 0, 0.2) transparent; /* 滑块颜色 + 轨道颜色 */
-   scrollbar-width: thin; /* auto | thin | none */
+   scrollbar-width: thin; /* auto | thin | none */ --radius: 0.625rem; --background: oklch(1 0 0); --foreground: oklch(0.141 0.005 285.823); --card: oklch(1 0 0); --card-foreground: oklch(0.141 0.005 285.823); --popover: oklch(1 0 0); --popover-foreground: oklch(0.141 0.005 285.823); --primary: oklch(0.21 0.006 285.885); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.967 0.001 286.375); --secondary-foreground: oklch(0.21 0.006 285.885); --muted: oklch(0.967 0.001 286.375); --muted-foreground: oklch(0.552 0.016 285.938); --accent: oklch(0.967 0.001 286.375); --accent-foreground: oklch(0.21 0.006 285.885); --destructive: oklch(0.577 0.245 27.325); --border: oklch(0.92 0.004 286.32); --input: oklch(0.92 0.004 286.32); --ring: oklch(0.705 0.015 286.067); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.141 0.005 285.823); --sidebar-primary: oklch(0.21 0.006 285.885); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.967 0.001 286.375); --sidebar-accent-foreground: oklch(0.21 0.006 285.885); --sidebar-border: oklch(0.92 0.004 286.32); --sidebar-ring: oklch(0.705 0.015 286.067);
 }

 /* WebKit 内核浏览器定制 */
@@ -35,3 +31,90 @@
        -ms-overflow-style: -ms-autohiding-scrollbar; /* 自动隐藏滚动条 */
    }
 }
+
+@import "tailwindcss";
+
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+    --radius-sm: calc(var(--radius) - 4px);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) + 4px);
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    --color-card: var(--card);
+    --color-card-foreground: var(--card-foreground);
+    --color-popover: var(--popover);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-secondary: var(--secondary);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-accent: var(--accent);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-destructive: var(--destructive);
+    --color-border: var(--border);
+    --color-input: var(--input);
+    --color-ring: var(--ring);
+    --color-chart-1: var(--chart-1);
+    --color-chart-2: var(--chart-2);
+    --color-chart-3: var(--chart-3);
+    --color-chart-4: var(--chart-4);
+    --color-chart-5: var(--chart-5);
+    --color-sidebar: var(--sidebar);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-ring: var(--sidebar-ring);
+}
+
+.dark {
+    --background: oklch(0.141 0.005 285.823);
+    --foreground: oklch(0.985 0 0);
+    --card: oklch(0.21 0.006 285.885);
+    --card-foreground: oklch(0.985 0 0);
+    --popover: oklch(0.21 0.006 285.885);
+    --popover-foreground: oklch(0.985 0 0);
+    --primary: oklch(0.92 0.004 286.32);
+    --primary-foreground: oklch(0.21 0.006 285.885);
+    --secondary: oklch(0.274 0.006 286.033);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.274 0.006 286.033);
+    --muted-foreground: oklch(0.705 0.015 286.067);
+    --accent: oklch(0.274 0.006 286.033);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.704 0.191 22.216);
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 15%);
+    --ring: oklch(0.552 0.016 285.938);
+    --chart-1: oklch(0.488 0.243 264.376);
+    --chart-2: oklch(0.696 0.17 162.48);
+    --chart-3: oklch(0.769 0.188 70.08);
+    --chart-4: oklch(0.627 0.265 303.9);
+    --chart-5: oklch(0.645 0.246 16.439);
+    --sidebar: oklch(0.21 0.006 285.885);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.274 0.006 286.033);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(1 0 0 / 10%);
+    --sidebar-ring: oklch(0.552 0.016 285.938);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+    }
+  body {
+    @apply bg-background text-foreground;
+    }
+}
--- a/web/src/app/home/bots/components/bot-card/botCard.module.css
+++ b/web/src/app/home/bots/components/bot-card/botCard.module.css
@@ -28,7 +28,7 @@
 .basicInfoContainer {
    display: flex;
    flex-direction: column;
-    gap: 0.6rem;
+    gap: 0.2rem;
 }

 .basicInfoNameContainer {
--- a/web/src/app/home/models/LLMConfig.module.css
+++ b/web/src/app/home/models/LLMConfig.module.css
@@ -3,12 +3,6 @@
    height: 100%;
 }

-.modalContainer {
-    width: 100%;
-    /*height: calc(100vh - 200px);*/
-    margin-top: 20px;
-}
-
 .modelListContainer {
    align-self: flex-start;
    justify-self: flex-start;
--- a/web/src/app/home/models/component/llm-card/LLMCard.module.css
+++ b/web/src/app/home/models/component/llm-card/LLMCard.module.css
@@ -19,6 +19,7 @@
    flex-direction: row;
    gap: 0.8rem;
    user-select: none;
+    /* background-color: aqua; */
 }

 .iconImage {
@@ -31,7 +32,7 @@
 .basicInfoContainer {
    display: flex;
    flex-direction: column;
-    gap: 0.6rem;
+    gap: 0.2rem;
 }

 .basicInfoText {
--- a/web/src/app/home/models/component/llm-card/LLMCard.tsx
+++ b/web/src/app/home/models/component/llm-card/LLMCard.tsx
@@ -1,5 +1,6 @@
 import styles from './LLMCard.module.css';
 import { LLMCardVO } from '@/app/home/models/component/llm-card/LLMCardVO';
+import { Button } from '@/components/ui/button';

 function checkAbilityBadges(abilities: string[]) {

--- a/web/src/app/home/models/component/llm-form/ChooseRequesterEntity.ts
+++ b/web/src/app/home/models/component/llm-form/ChooseRequesterEntity.ts
--- a/web/src/app/home/models/component/llm-form/LLMForm.tsx
+++ b/web/src/app/home/models/component/llm-form/LLMForm.tsx
@@ -1,12 +1,69 @@
 import styles from '@/app/home/models/LLMConfig.module.css';
-import { Button, Form, Input, Select, SelectProps, Space, Modal } from 'antd';
+import { SelectProps } from 'antd';
 import { ICreateLLMField } from '@/app/home/models/ICreateLLMField';
 import { useEffect, useState } from 'react';
-import { IChooseRequesterEntity } from '@/app/home/models/component/llm-form/ChooseAdapterEntity';
+import { IChooseRequesterEntity } from '@/app/home/models/component/llm-form/ChooseRequesterEntity';
 import { httpClient } from '@/app/infra/http/HttpClient';
 import { LLMModel } from '@/app/infra/api/api-types';
 import { UUID } from 'uuidjs';

+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogFooter,
+} from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Checkbox } from "@/components/ui/checkbox"
+
+const extraArgSchema = z.object({
+  key: z.string().min(1, { message: '键名不能为空' }),
+  type: z.enum(['string', 'number', 'boolean']),
+  value: z.string(),
+}).superRefine((data, ctx) => {
+  if (data.type === 'number' && isNaN(Number(data.value))) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: "必须是有效的数字",
+      path: ['value'],
+    });
+  }
+  if (data.type === 'boolean' && data.value !== 'true' && data.value !== 'false') {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: "必须是 true 或 false",
+      path: ['value'],
+    });
+  }
+});
+
+const formSchema = z.object({
+  name: z.string().min(1, { message: '模型名称不能为空' }),
+  model_provider: z.string().min(1, { message: '模型供应商不能为空' }),
+  url: z.string().min(1, { message: '请求URL不能为空' }),
+  api_key: z.string().min(1, { message: 'API Key不能为空' }),
+  abilities: z.array(z.string()),
+  extra_args: z.array(extraArgSchema).optional(),
+})
+
 export default function LLMForm({
  editMode,
  initLLMId,
@@ -16,40 +73,97 @@ export default function LLMForm({
 }: {
  editMode: boolean;
  initLLMId?: string;
-  onFormSubmit: (value: ICreateLLMField) => void;
-  onFormCancel: (value: ICreateLLMField) => void;
+  onFormSubmit: (value: z.infer<typeof formSchema>) => void;
+  onFormCancel: () => void;
  onLLMDeleted: () => void;
 }) {
-  const [form] = Form.useForm<ICreateLLMField>();
-  const extraOptions: SelectProps['options'] = [];
-  const [initValue] = useState<ICreateLLMField>();
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: '',
+      model_provider: '',
+      url: '',
+      api_key: '',
+      abilities: [],
+      extra_args: [],
+    },
+  });
+
+  const [extraArgs, setExtraArgs] = useState<{key: string, type: 'string' | 'number' | 'boolean', value: string}[]>([]);
+
  const [showDeleteConfirmModal, setShowDeleteConfirmModal] = useState(false);
  const abilityOptions: SelectProps['options'] = [
+    {
+      label: '视觉能力',
+      value: 'vision',
+    },
    {
      label: '函数调用',
      value: 'func_call',
    },
-    {
-      label: '图像识别',
-      value: 'vision',
-    },
  ];
  const [requesterNameList, setRequesterNameList] = useState<
    IChooseRequesterEntity[]
  >([]);
+  const [requesterDefaultURLList, setRequesterDefaultURLList] = useState<
+    string[]
+  >([]);

  useEffect(() => {
    initLLMModelFormComponent();
    if (editMode && initLLMId) {
      getLLMConfig(initLLMId).then((val) => {
-        form.setFieldsValue(val);
+        form.setValue('name', val.name);
+        form.setValue('model_provider', val.model_provider);
+        form.setValue('url', val.url);
+        form.setValue('api_key', val.api_key);
+        form.setValue('abilities', val.abilities as ("vision" | "func_call")[]); 
+        // 转换extra_args为新格式
+        if(val.extra_args) {
+          const args = val.extra_args.map(arg => {
+            const [key, value] = arg.split(':');
+            let type: 'string' | 'number' | 'boolean' = 'string';
+            if(!isNaN(Number(value))) {
+              type = 'number';
+            } else if(value === 'true' || value === 'false') {
+              type = 'boolean';
+            }
+            return {
+              key,
+              type,
+              value
+            };
+          });
+          setExtraArgs(args);
+          form.setValue('extra_args', args);
+        }
      });
    } else {
-      form.resetFields();
+      form.reset();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

+  const addExtraArg = () => {
+    setExtraArgs([...extraArgs, {key: '', type: 'string', value: ''}]);
+  };
+
+  const updateExtraArg = (index: number, field: 'key' | 'type' | 'value', value: string) => {
+    const newArgs = [...extraArgs];
+    newArgs[index] = {
+      ...newArgs[index],
+      [field]: value
+    };
+    setExtraArgs(newArgs);
+    form.setValue('extra_args', newArgs);
+  };
+
+  const removeExtraArg = (index: number) => {
+    const newArgs = extraArgs.filter((_, i) => i !== index);
+    setExtraArgs(newArgs);
+    form.setValue('extra_args', newArgs);
+  };
+
  async function initLLMModelFormComponent() {
    const requesterNameList = await httpClient.getProviderRequesters();
    setRequesterNameList(
@@ -60,6 +174,17 @@ export default function LLMForm({
        };
      }),
    );
+    setRequesterDefaultURLList(
+      requesterNameList.requesters.map((item) => {
+        const config = item.spec.config;
+        for (let i = 0; i < config.length; i++) {
+          if (config[i].name == 'base_url') {
+            return config[i].default;
+          }
+        }
+        return '';
+      }),
+    );
  }

  async function getLLMConfig(id: string): Promise<ICreateLLMField> {
@@ -75,42 +200,35 @@ export default function LLMForm({
      model_provider: llmModel.model.requester,
      url: llmModel.model.requester_config?.base_url,
      api_key: llmModel.model.api_keys[0],
-      abilities: llmModel.model.abilities,
+      abilities: llmModel.model.abilities || [],
      extra_args: fakeExtraArgs,
    };
  }

-  function handleFormSubmit(value: ICreateLLMField) {
+  function handleFormSubmit(value: z.infer<typeof formSchema>) {
    if (editMode) {
      // 暂不支持更改模型
      // onSaveEdit(value)
    } else {
      onCreateLLM(value);
    }
-    form.resetFields();
+    form.reset();
  }

-  // function onSaveEdit(value: ICreateLLMField) {
-  //     const requestParam: LLMModel = {
-  //         uuid: UUID.generate(),
-  //         name: value.name,
-  //         description: "",
-  //         requester: value.model_provider,
-  //         requester_config: {
-  //             "base_url": value.url,
-  //             "timeout": 120
-  //         },
-  //         extra_args: value.extra_args,
-  //         api_keys: [value.api_key],
-  //         abilities: value.abilities,
-  //         // created_at: 'Sun Apr 27 2025 21:56:35 GMT+0800',
-  //         // updated_at: 'Sun Apr 27 2025 21:56:35 GMT+0800',
-  //     };
-  //     httpClient.createProviderLLMModel(requestParam).then(r => console.log(r))
-  // }
-
-  function onCreateLLM(value: ICreateLLMField) {
+  function onCreateLLM(value: z.infer<typeof formSchema>) {
    console.log('create llm', value);
+    // 转换extra_args为对象格式
+    const extraArgsObj: Record<string, any> = {};
+    value.extra_args?.forEach(arg => {
+      if(arg.type === 'number') {
+        extraArgsObj[arg.key] = Number(arg.value);
+      } else if(arg.type === 'boolean') {
+        extraArgsObj[arg.key] = arg.value === 'true';
+      } else {
+        extraArgsObj[arg.key] = arg.value;
+      }
+    });
+
    const requestParam: LLMModel = {
      uuid: UUID.generate(),
      name: value.name,
@@ -120,11 +238,9 @@ export default function LLMForm({
        base_url: value.url,
        timeout: 120,
      },
-      extra_args: value.extra_args,
+      extra_args: extraArgsObj,
      api_keys: [value.api_key],
      abilities: value.abilities,
-      // created_at: 'Sun Apr 27 2025 21:56:35 GMT+0800',
-      // updated_at: 'Sun Apr 27 2025 21:56:35 GMT+0800',
    };
    httpClient.createProviderLLMModel(requestParam).then(() => {
      onFormSubmit(value);
@@ -143,145 +259,221 @@ export default function LLMForm({

  return (
    <div className={styles.modalContainer}>
-      <Modal
-        open={showDeleteConfirmModal}
-        title={'删除确认'}
-        onCancel={() => setShowDeleteConfirmModal(false)}
-        footer={
-          <div
-            style={{
-              width: '170px',
-              display: 'flex',
-              flexDirection: 'row',
-              justifyContent: 'space-between',
-            }}
-          >
-            <Button
-              danger
-              onClick={() => {
-                deleteModel();
-                setShowDeleteConfirmModal(false);
-              }}
-            >
-              确认删除
-            </Button>
-            <Button
-              onClick={() => {
-                setShowDeleteConfirmModal(false);
-              }}
-            >
+
+      <Dialog open={showDeleteConfirmModal} onOpenChange={setShowDeleteConfirmModal}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>删除确认</DialogTitle>
+          </DialogHeader>
+          <DialogDescription>
+            你确定要删除这个模型吗？
+          </DialogDescription>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setShowDeleteConfirmModal(false)}>
              取消
            </Button>
-          </div>
-        }
-      >
-        你确定要删除这个模型吗？
-      </Modal>
-      <Form
-        form={form}
-        labelCol={{ span: 4 }}
-        wrapperCol={{ span: 14 }}
-        layout="horizontal"
-        initialValues={{
-          ...initValue,
-        }}
-        onFinish={handleFormSubmit}
-        clearOnDestroy={true}
-        disabled={editMode}
-      >
-        <Form.Item<ICreateLLMField>
-          label={'模型名称'}
-          name={'name'}
-          rules={[{ required: true, message: '该项为必填项哦～' }]}
-        >
-          <Input
-            placeholder={'为自己的大模型取个好听的名字～'}
-            style={{ width: 260 }}
-          ></Input>
-        </Form.Item>
-
-        <Form.Item<ICreateLLMField>
-          label={'模型供应商'}
-          name={'model_provider'}
-          rules={[{ required: true, message: '该项为必填项哦～' }]}
-        >
-          <Select
-            style={{ width: 120 }}
-            onChange={() => {}}
-            options={requesterNameList}
-          />
-        </Form.Item>
-
-        <Form.Item<ICreateLLMField>
-          label={'请求URL'}
-          name={'url'}
-          rules={[{ required: true, message: '该项为必填项哦～' }]}
-        >
-          <Input
-            placeholder="请求地址，一般是API提供商提供的URL"
-            style={{ width: 500 }}
-          ></Input>
-        </Form.Item>
-
-        <Form.Item<ICreateLLMField>
-          label={'API Key'}
-          name={'api_key'}
-          rules={[{ required: true, message: '该项为必填项哦～' }]}
-        >
-          <Input placeholder="你的API Key" style={{ width: 500 }}></Input>
-        </Form.Item>
-
-        <Form.Item<ICreateLLMField> label={'开启能力'} name={'abilities'}>
-          <Select
-            mode="tags"
-            style={{ width: 500 }}
-            placeholder="选择模型能力，输入回车可自定义能力"
-            onChange={handleAbilitiesChange}
-            options={abilityOptions}
-          />
-        </Form.Item>
-
-        <Form.Item<ICreateLLMField> label={'其他参数'} name={'extra_args'}>
-          <Select
-            mode="tags"
-            style={{ width: 500 }}
-            placeholder="输入后回车可自定义其他参数，例 key:value"
-            onChange={handleAbilitiesChange}
-            options={extraOptions}
-          />
-        </Form.Item>
-
-        <Form.Item wrapperCol={{ offset: 4, span: 14 }}>
-          <Space>
-            {!editMode && (
-              <Button type="primary" htmlType="submit">
-                提交
+            <Button variant="destructive" onClick={() => {
+              deleteModel();
+              setShowDeleteConfirmModal(false);
+            }}>
+              确认删除
            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(handleFormSubmit)} className="space-y-8">
+          <div className="space-y-4">
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>模型名称<span className="text-red-500">*</span></FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                  <FormDescription>
+                    请填写供应商向您提供的模型名称
+                  </FormDescription>
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="model_provider"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>模型供应商<span className="text-red-500">*</span></FormLabel>
+                  <FormControl>
+                    <Select onValueChange={(value) => {
+                      field.onChange(value);
+                      const index = requesterNameList.findIndex(item => item.value === value);
+                      if(index !== -1) {
+                        form.setValue('url', requesterDefaultURLList[index]);
+                      }
+                    }} value={field.value}>
+                      <SelectTrigger className="w-[180px]">
+                        <SelectValue placeholder="选择模型供应商" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectGroup>
+                          {requesterNameList.map((item) => (
+                            <SelectItem key={item.value} value={item.value}>
+                              {item.label}
+                            </SelectItem>
+                          ))}
+                        </SelectGroup>
+                      </SelectContent>
+                    </Select>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="url"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>请求URL<span className="text-red-500">*</span></FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="api_key"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>API Key<span className="text-red-500">*</span></FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="abilities"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>能力</FormLabel>
+                  <div className="mb-0">
+                    <FormDescription>
+                      选择模型能力
+                    </FormDescription>
+                  </div>
+                  {abilityOptions.map((item) => (
+                    <FormField
+                      key={item.value}
+                      control={form.control}
+                      name="abilities"
+                      render={({ field }) => {
+                        return (
+                          <FormItem
+                            key={item.value}
+                            className="flex flex-row items-start space-x-1 space-y-0"
+                          >
+                            <FormControl>
+                              <Checkbox
+                                checked={Array.isArray(field.value) && field.value?.includes(item.value)}
+                                onCheckedChange={(checked) => {
+                                  return checked
+                                    ? field.onChange([...(field.value || []), item.value])
+                                    : field.onChange(
+                                        field.value?.filter(
+                                          (value) => value !== item.value
+                                        )
+                                      )
+                                }}
+                              />
+                            </FormControl>
+                            <FormLabel className="font-normal">
+                              {item.label}
+                            </FormLabel>
+                          </FormItem>
+                        )
+                      }}
+                    />
+                  ))}
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormItem>
+              <FormLabel>额外参数</FormLabel>
+              <div className="space-y-2">
+                {extraArgs.map((arg, index) => (
+                  <div key={index} className="flex gap-2">
+                    <Input 
+                      placeholder="键名"
+                      value={arg.key}
+                      onChange={(e) => updateExtraArg(index, 'key', e.target.value)}
+                    />
+                    <Select 
+                      value={arg.type}
+                      onValueChange={(value) => updateExtraArg(index, 'type', value)}
+                    >
+                      <SelectTrigger className="w-[120px]">
+                        <SelectValue placeholder="类型" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="string">字符串</SelectItem>
+                        <SelectItem value="number">数字</SelectItem>
+                        <SelectItem value="boolean">布尔值</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <Input 
+                      placeholder="值"
+                      value={arg.value}
+                      onChange={(e) => updateExtraArg(index, 'value', e.target.value)}
+                    />
+                    <button 
+                      type="button"
+                      className="p-2 hover:bg-gray-100 rounded"
+                      onClick={() => removeExtraArg(index)}
+                    >
+                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5 text-red-500">
+                        <path d="M7 4V2H17V4H22V6H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V6H2V4H7ZM6 6V20H18V6H6ZM9 9H11V17H9V9ZM13 9H15V17H13V9Z"></path>
+                      </svg>
+                    </button>
+                  </div>
+                ))}
+                <Button type="button" variant="outline" onClick={addExtraArg}>
+                  添加参数
+                </Button>
+              </div>
+              <FormDescription>
+                将在请求时附加到请求体中，如 max_tokens, temperature, top_p 等
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+            
+          </div>
+          <DialogFooter>
+            {!editMode && (
+              <Button type="submit">提交</Button>
            )}
            {editMode && (
-              <Button
-                color="danger"
-                variant="solid"
-                onClick={() => {
-                  setShowDeleteConfirmModal(true);
-                }}
-                disabled={false}
-              >
+              <Button type="button" variant="destructive" onClick={() => setShowDeleteConfirmModal(true)}>
                删除
              </Button>
            )}
-            <Button
-              htmlType="button"
-              onClick={() => {
-                onFormCancel(form.getFieldsValue());
-              }}
-              disabled={false}
-            >
+            <Button type="button" onClick={() => onFormCancel()}>
              取消
            </Button>
-          </Space>
-        </Form.Item>
+          </DialogFooter>
+        </form>
      </Form>
+
    </div>
  );
 }
--- a/web/src/app/home/models/page.tsx
+++ b/web/src/app/home/models/page.tsx
@@ -4,12 +4,20 @@ import { useState, useEffect } from 'react';
 import { LLMCardVO } from '@/app/home/models/component/llm-card/LLMCardVO';
 import styles from './LLMConfig.module.css';
 import EmptyAndCreateComponent from '@/app/home/components/empty-and-create-component/EmptyAndCreateComponent';
-import { Modal } from 'antd';
 import LLMCard from '@/app/home/models/component/llm-card/LLMCard';
 import LLMForm from '@/app/home/models/component/llm-form/LLMForm';
 import CreateCardComponent from '@/app/infra/basic-component/create-card-component/CreateCardComponent';
 import { httpClient } from '@/app/infra/http/HttpClient';
 import { LLMModel } from '@/app/infra/api/api-types';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+

 export default function LLMConfigPage() {
  const [cardList, setCardList] = useState<LLMCardVO[]>([]);
@@ -41,7 +49,7 @@ export default function LLMConfigPage() {
            name: model.name,
            providerLabel: requesterNameList.find((item) => item.value === model.requester)?.label || model.requester.substring(0, 10),
            baseURL: model.requester_config?.base_url,
-            abilities: model.abilities,
+            abilities: model.abilities || [],
          });
        });
        console.log('get llmModelList', llmModelList);
@@ -67,16 +75,12 @@ export default function LLMConfigPage() {

  return (
    <div className={styles.configPageContainer}>
-      <Modal
-        title={isEditForm ? '预览模型' : '创建模型'}
-        centered
-        open={modalOpen}
-        destroyOnClose={true}
-        onOk={() => setModalOpen(false)}
-        onCancel={() => setModalOpen(false)}
-        width={700}
-        footer={null}
-      >
+
+      <Dialog open={modalOpen} onOpenChange={setModalOpen}>
+        <DialogContent className="w-[700px] p-6">
+          <DialogHeader>
+            <DialogTitle>{isEditForm ? '预览模型' : '创建模型'}</DialogTitle>
+          </DialogHeader>
          <LLMForm
            editMode={isEditForm}
            initLLMId={nowSelectedLLM?.id}
@@ -92,7 +96,9 @@ export default function LLMConfigPage() {
              getLLMModelList();
            }}
          />
-      </Modal>
+        </DialogContent>
+      </Dialog>
+
      {cardList.length > 0 && (
        <div className={`${styles.modelListContainer}`}>

--- a/web/src/app/home/pipelines/components/pipeline-card/PipelineCard.tsx
+++ b/web/src/app/home/pipelines/components/pipeline-card/PipelineCard.tsx
@@ -1,5 +1,6 @@
 import styles from './pipelineCard.module.css';
 import { PipelineCardVO } from '@/app/home/pipelines/components/pipeline-card/PipelineCardVO';
+import { Button } from '@/components/ui/button';

 export default function PipelineCard({
  cardVO,
--- a/web/src/app/home/pipelines/page.tsx
+++ b/web/src/app/home/pipelines/page.tsx
@@ -8,6 +8,7 @@ import { PipelineCardVO } from '@/app/home/pipelines/components/pipeline-card/Pi
 import PipelineCard from '@/app/home/pipelines/components/pipeline-card/PipelineCard';
 import { PipelineFormEntity } from '@/app/home/pipelines/components/pipeline-form/PipelineFormEntity';
 import styles from './pipelineConfig.module.css';
+import { Button } from '@/components/ui/button';

 export default function PluginConfigPage() {
  const [modalOpen, setModalOpen] = useState<boolean>(false);
@@ -72,6 +73,7 @@ export default function PluginConfigPage() {

  return (
    <div className={styles.configPageContainer}>
+      
      <Modal
        title={isEditForm ? '编辑流水线' : '创建流水线'}
        centered
--- a/web/src/app/infra/api/api-types/index.ts
+++ b/web/src/app/infra/api/api-types/index.ts
@@ -46,9 +46,9 @@ export interface LLMModel {
    base_url: string;
    timeout: number;
  };
-  extra_args: object;
+  extra_args?: object;
  api_keys: string[];
-  abilities: string[];
+  abilities?: string[];
  // created_at: string;
  // updated_at: string;
 }
--- a/web/src/components/ui/alert.tsx
+++ b/web/src/components/ui/alert.tsx
@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }
--- a/web/src/components/ui/button.tsx
+++ b/web/src/components/ui/button.tsx
@@ -0,0 +1,59 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
--- a/web/src/components/ui/checkbox.tsx
+++ b/web/src/components/ui/checkbox.tsx
@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }
--- a/web/src/components/ui/dialog.tsx
+++ b/web/src/components/ui/dialog.tsx
@@ -0,0 +1,135 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content>) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+          <XIcon />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
--- a/web/src/components/ui/form.tsx
+++ b/web/src/components/ui/form.tsx
@@ -0,0 +1,167 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  useFormState,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState } = useFormContext()
+  const formState = useFormState({ name: fieldContext.name })
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+function FormItem({ className, ...props }: React.ComponentProps<"div">) {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div
+        data-slot="form-item"
+        className={cn("grid gap-2", className)}
+        {...props}
+      />
+    </FormItemContext.Provider>
+  )
+}
+
+function FormLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      data-slot="form-label"
+      data-error={!!error}
+      className={cn("data-[error=true]:text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      data-slot="form-description"
+      id={formDescriptionId}
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message ?? "") : props.children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      data-slot="form-message"
+      id={formMessageId}
+      className={cn("text-destructive text-sm", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+}
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}
--- a/web/src/components/ui/input.tsx
+++ b/web/src/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
--- a/web/src/components/ui/label.tsx
+++ b/web/src/components/ui/label.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
--- a/web/src/components/ui/select.tsx
+++ b/web/src/components/ui/select.tsx
@@ -0,0 +1,185 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}
--- a/web/src/components/ui/toggle-group.tsx
+++ b/web/src/components/ui/toggle-group.tsx
@@ -0,0 +1,73 @@
+"use client"
+
+import * as React from "react"
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import { type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "@/components/ui/toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: "default",
+  variant: "default",
+})
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  children,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <ToggleGroupPrimitive.Root
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      className={cn(
+        "group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
+        className
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  )
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
+  VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        "min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+}
+
+export { ToggleGroup, ToggleGroupItem }
--- a/web/src/components/ui/toggle.tsx
+++ b/web/src/components/ui/toggle.tsx
@@ -0,0 +1,47 @@
+"use client"
+
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }
--- a/web/src/lib/utils.ts
+++ b/web/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
--- a/web/web@0.1.0
+++ b/web/web@0.1.0