playgroudにモデル選択を追加

apps/web/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@conform-to/react": "^1.1.5",
     "@conform-to/zod": "^1.1.5",
+    "@icons-pack/react-simple-icons": "^10.0.0",
     "@peace-net/shared": "workspace:*",
     "@peace-net/ui": "workspace:*",
     "@squircle-js/react": "^1.2.0",

apps/web/src/app/(main)/dashboard/(palygroud)/components/playground-form.tsx

@@ -2,13 +2,15 @@
 
 import { getFormProps, useForm } from '@conform-to/react'
 import { getZodConstraint, parseWithZod } from '@conform-to/zod'
+import { SiAnthropic, SiGoogle, SiOpenai } from '@icons-pack/react-simple-icons'
 import { Button } from '@peace-net/ui/components/ui/button'
 import { Label } from '@peace-net/ui/components/ui/label'
 import { Loader2Icon, PlayIcon } from 'lucide-react'
 import { useActionState } from 'react'
 
 import { Field, FieldError } from '~/components/common/field'
 import { RadioGroupConform } from '~/components/conform/radio-group'
+import { SelectConform } from '~/components/conform/select'
 import { SliderConform } from '~/components/conform/slider'
 import { TextareaConform } from '~/components/conform/textarea'
 
@@ -41,6 +43,9 @@ export function PlaygroundForm() {
       score_threshold: isSuccessResult(lastResult)
         ? lastResult.value.score_threshold
         : 0.5,
+      model: isSuccessResult(lastResult)
+        ? lastResult.value.model
+        : 'gpt-4o-mini',
       result: isSuccessResult(lastResult) ? lastResult.value.result : '',
     },
   })
@@ -95,6 +100,29 @@ export function PlaygroundForm() {
             )}
           </Field>
         )}
+        <Field>
+          <Label htmlFor={fields.model.id}>使用するAIモデル</Label>
+          <SelectConform
+            placeholder="AIモデルを選択"
+            meta={fields.model}
+            items={[
+              { value: 'gpt-4o-mini', name: 'GPT-4o mini', Icon: SiOpenai },
+              {
+                value: 'claude-3-haiku',
+                name: 'Claude 3 Haiku',
+                Icon: SiAnthropic,
+              },
+              {
+                value: 'gemini-1.5-flash',
+                name: 'Gemini 1.5 Flash',
+                Icon: SiGoogle,
+              },
+            ]}
+          />
+          {fields.model.errors && (
+            <FieldError>{fields.model.errors}</FieldError>
+          )}
+        </Field>
         <Field>
           <Label htmlFor={fields.text.id}>テキスト</Label>
           <TextareaConform

apps/web/src/app/(main)/dashboard/(palygroud)/schemas/index.ts

@@ -1,3 +1,4 @@
+import { modelsSchema } from '@peace-net/shared/schemas/model'
 import { z } from 'zod'
 
 export const playgroundSchema = z.object({
@@ -9,6 +10,7 @@ export const playgroundSchema = z.object({
     .min(1, { message: 'テキストは1文字以上で入力してください' })
     .max(500, { message: 'テキストは500文字以下で入力してください' }),
   score_threshold: z.number().max(1).min(0.1).optional().default(0.5),
+  model: modelsSchema.optional().default('gpt-4o-mini'),
   result: z.any().optional(),
   isLimitReached: z.boolean().optional(),
 })

apps/web/src/components/conform/select.tsx

@@ -0,0 +1,77 @@
+import {
+  type FieldMetadata,
+  unstable_useControl as useControl,
+} from '@conform-to/react'
+import type { IconType} from '@icons-pack/react-simple-icons';
+import { SiReact } from '@icons-pack/react-simple-icons'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@peace-net/ui/components/ui/select'
+import type { ComponentProps, ElementRef } from 'react'
+import { useRef } from 'react'
+
+export const SelectConform = ({
+  meta,
+  items,
+  placeholder,
+  ...props
+}: {
+  meta: FieldMetadata<string>
+  items: Array<{ name: string; value: string; Icon?: IconType }>
+  placeholder: string
+} & ComponentProps<typeof Select>) => {
+  const selectRef = useRef<ElementRef<typeof SelectTrigger>>(null)
+  const control = useControl(meta)
+
+  return (
+    <>
+      <select
+        name={meta.name}
+        defaultValue={meta.initialValue ?? ''}
+        className="sr-only"
+        ref={control.register}
+        aria-hidden
+        tabIndex={-1}
+        onFocus={() => {
+          selectRef.current?.focus()
+        }}
+      >
+        <option value="" />
+        {items.map((option) => (
+          <option key={option.value} value={option.value} />
+        ))}
+      </select>
+
+      <Select
+        {...props}
+        value={control.value ?? ''}
+        onValueChange={control.change}
+        onOpenChange={(open) => {
+          if (!open) {
+            control.blur()
+          }
+        }}
+      >
+        <SelectTrigger>
+          <SelectValue placeholder={placeholder} />
+        </SelectTrigger>
+        <SelectContent>
+          {items.map((item) => {
+            return (
+              <SelectItem key={item.value} value={item.value}>
+                <div className="flex items-center gap-1.5">
+                  {item.Icon && <item.Icon size={16} />}
+                  {item.name}
+                </div>
+              </SelectItem>
+            )
+          })}
+        </SelectContent>
+      </Select>
+    </>
+  )
+}

packages/ui/src/components/ui/select.tsx

@@ -125,7 +125,7 @@ const SelectItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
+        <Check className="h-4 w-4 text-teal-500" />
       </SelectPrimitive.ItemIndicator>
     </span>