From ed7e46b6ca0536399a046e53721d504be6d8d3a9 Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Mon, 2 Dec 2024 19:33:20 +0800
Subject: [PATCH] Feat: Add TestingForm #3221 (#3810)

### What problem does this PR solve?

Feat: Add TestingForm #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
---
 web/package-lock.json                         |  33 ++++
 web/package.json                              |   1 +
 web/src/components/ui/slider.tsx              |  49 ++++++
 web/src/components/ui/textarea.tsx            |  22 +++
 web/src/pages/dataset/testing/index.tsx       |  57 +++++-
 .../pages/dataset/testing/testing-form.tsx    | 163 ++++++++++++++++++
 web/tailwind.css                              |   2 +-
 7 files changed, 325 insertions(+), 2 deletions(-)
 create mode 100644 web/src/components/ui/slider.tsx
 create mode 100644 web/src/components/ui/textarea.tsx
 create mode 100644 web/src/pages/dataset/testing/testing-form.tsx

diff --git a/web/package-lock.json b/web/package-lock.json
index 9202ed867..f8380b436 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -23,6 +23,7 @@
         "@radix-ui/react-popover": "^1.1.2",
         "@radix-ui/react-select": "^2.1.2",
         "@radix-ui/react-separator": "^1.1.0",
+        "@radix-ui/react-slider": "^1.2.1",
         "@radix-ui/react-slot": "^1.1.0",
         "@radix-ui/react-switch": "^1.1.1",
         "@radix-ui/react-tabs": "^1.1.1",
@@ -4751,6 +4752,38 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-slider": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-slider/-/react-slider-1.2.1.tgz",
+      "integrity": "sha512-bEzQoDW0XP+h/oGbutF5VMWJPAl/UU8IJjr7h02SOHDIIIxq+cep8nItVNoBV+OMmahCdqdF38FTpmXoqQUGvw==",
+      "dependencies": {
+        "@radix-ui/number": "1.1.0",
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-collection": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
diff --git a/web/package.json b/web/package.json
index 00882e161..63ecd6930 100644
--- a/web/package.json
+++ b/web/package.json
@@ -34,6 +34,7 @@
     "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slider": "^1.2.1",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.1",
     "@radix-ui/react-tabs": "^1.1.1",
diff --git a/web/src/components/ui/slider.tsx b/web/src/components/ui/slider.tsx
new file mode 100644
index 000000000..f025182d9
--- /dev/null
+++ b/web/src/components/ui/slider.tsx
@@ -0,0 +1,49 @@
+'use client';
+
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      'relative flex w-full touch-none select-none items-center',
+      className,
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-colors-text-core-standard ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+type SliderProps = Omit<
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>,
+  'onChange' | 'value'
+> & { onChange: (value: number) => void; value: number };
+
+const FormSlider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  SliderProps
+>(({ onChange, value, ...props }, ref) => (
+  <Slider
+    ref={ref}
+    {...props}
+    value={[value]}
+    onValueChange={(vals) => {
+      onChange(vals[0]);
+    }}
+  ></Slider>
+));
+
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { FormSlider, Slider };
diff --git a/web/src/components/ui/textarea.tsx b/web/src/components/ui/textarea.tsx
new file mode 100644
index 000000000..63745407e
--- /dev/null
+++ b/web/src/components/ui/textarea.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<'textarea'>
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+Textarea.displayName = 'Textarea';
+
+export { Textarea };
diff --git a/web/src/pages/dataset/testing/index.tsx b/web/src/pages/dataset/testing/index.tsx
index 9d89a4073..e687d6c67 100644
--- a/web/src/pages/dataset/testing/index.tsx
+++ b/web/src/pages/dataset/testing/index.tsx
@@ -1,3 +1,58 @@
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import TestingForm from './testing-form';
+
+const list = new Array(15).fill({
+  content: `Lorem ipsum odor amet, consectetuer adipiscing elit. Ullamcorper vulputate id laoreet malesuada commodo molestie. Lectus convallis class euismod; consequat in curabitur. Ablandit praesent inceptos nibh placerat lectus fringilla finibus. Hac vivamus id scelerisque et gravida nec ligula et non. Consectetur eu himenaeos eget felis quis habitant tellus. Tellus commodo inceptos litora habitant per himenaeos faucibus pretium. Gravida velit pretium amet purus rhoncus taciti. `,
+});
+
 export default function RetrievalTesting() {
-  return <div>Retrieval testing</div>;
+  return (
+    <section className="flex divide-x border-l h-full">
+      <div className="p-4">
+        <TestingForm></TestingForm>
+      </div>
+      <div className="p-4 flex-1 ">
+        <h2 className="text-3xl font-bold mb-8 px-[10%]">
+          15 Results from 3 files
+        </h2>
+        <section className="flex flex-col gap-4 overflow-auto h-[85vh] px-[10%]">
+          {list.map((x, idx) => (
+            <Card
+              key={idx}
+              className="bg-colors-background-neutral-weak border-colors-outline-neutral-strong"
+            >
+              <CardHeader>
+                <CardTitle>
+                  <div className="flex gap-2 flex-wrap">
+                    <Badge
+                      variant="outline"
+                      className="bg-colors-background-inverse-strong p-2 rounded-xl text-base"
+                    >
+                      混合相似度 45.88
+                    </Badge>
+                    <Badge
+                      variant="outline"
+                      className="bg-colors-background-inverse-strong p-2 rounded-xl text-base"
+                    >
+                      关键词似度 45.88
+                    </Badge>
+                    <Badge
+                      variant="outline"
+                      className="bg-colors-background-inverse-strong p-2 rounded-xl text-base"
+                    >
+                      向量相似度 45.88
+                    </Badge>
+                  </div>
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-colors-text-neutral-strong">{x.content}</p>
+              </CardContent>
+            </Card>
+          ))}
+        </section>
+      </div>
+    </section>
+  );
 }
diff --git a/web/src/pages/dataset/testing/testing-form.tsx b/web/src/pages/dataset/testing/testing-form.tsx
new file mode 100644
index 000000000..ae6b01b46
--- /dev/null
+++ b/web/src/pages/dataset/testing/testing-form.tsx
@@ -0,0 +1,163 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { Button } from '@/components/ui/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { FormSlider } from '@/components/ui/slider';
+import { Textarea } from '@/components/ui/textarea';
+
+const formSchema = z.object({
+  username: z.number().min(2, {
+    message: 'Username must be at least 2 characters.',
+  }),
+  a: z.number().min(2, {
+    message: 'Username must be at least 2 characters.',
+  }),
+  b: z.string().min(2, {
+    message: 'Username must be at least 2 characters.',
+  }),
+  c: z.number().min(2, {
+    message: 'Username must be at least 2 characters.',
+  }),
+  d: z.string().min(2, {
+    message: 'Username must be at least 2 characters.',
+  }),
+});
+
+export default function TestingForm() {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      username: 0,
+    },
+  });
+
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    console.log(values);
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <FormField
+          control={form.control}
+          name="username"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Username</FormLabel>
+              <FormControl>
+                <FormSlider {...field}></FormSlider>
+              </FormControl>
+              <FormDescription>
+                This is your public display name.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="a"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Username</FormLabel>
+              <FormControl>
+                <FormSlider {...field}></FormSlider>
+              </FormControl>
+              <FormDescription>
+                This is your public display name.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="b"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Username</FormLabel>
+              <Select onValueChange={field.onChange} defaultValue={field.value}>
+                <FormControl>
+                  <SelectTrigger className="bg-colors-background-inverse-weak">
+                    <SelectValue placeholder="Select a verified email to display" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  <SelectItem value="m@example.com">m@example.com</SelectItem>
+                  <SelectItem value="m@google.com">m@google.com</SelectItem>
+                  <SelectItem value="m@support.com">m@support.com</SelectItem>
+                </SelectContent>
+              </Select>
+              <FormDescription>
+                This is your public display name.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="c"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Username</FormLabel>
+              <FormControl>
+                <FormSlider {...field}></FormSlider>
+              </FormControl>
+              <FormDescription>
+                This is your public display name.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="d"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Username</FormLabel>
+              <FormControl>
+                <Textarea
+                  {...field}
+                  className="bg-colors-background-inverse-weak"
+                ></Textarea>
+              </FormControl>
+              <FormDescription>
+                This is your public display name.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button
+          variant={'tertiary'}
+          size={'sm'}
+          type="submit"
+          className="w-full"
+        >
+          Test
+        </Button>
+      </form>
+    </Form>
+  );
+}
diff --git a/web/tailwind.css b/web/tailwind.css
index cb16f6b70..c42f613a3 100644
--- a/web/tailwind.css
+++ b/web/tailwind.css
@@ -132,7 +132,7 @@
     @apply border-border;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-colors-background-neutral-standard text-foreground;
     font-feature-settings:
       'rlig' 1,
       'calt' 1;