feat: add preset selection options and update translations for select preset

src/langbot/templates/metadata/pipeline/ai.yaml

@@ -118,6 +118,11 @@ stages:
           zh_Hans: 基础 URL
         type: string
         required: true
+        options:
+          - name: 'https://api.dify.ai/v1'
+            label:
+              en_US: Dify Cloud
+              zh_Hans: Dify 云服务
         default: 'https://api.dify.ai/v1'
       - name: base-prompt
         label:
@@ -341,6 +346,15 @@ stages:
           en_US: The base URL for the Coze API, please use https://api.coze.com for global Coze edition(coze.com).
           zh_Hans: Coze API 的基础 URL，请使用 https://api.coze.com 用于全球 Coze 版（coze.com）
         type: string
+        options:
+          - name: 'https://api.coze.cn'
+            label:
+              en_US: Coze China
+              zh_Hans: Coze 中国版
+          - name: 'https://api.coze.com'
+            label:
+              en_US: Coze Global
+              zh_Hans: Coze 全球版
         default: "https://api.coze.cn"
       - name: auto-save-history
         label:

web/src/app/home/components/dynamic-form/DynamicFormItemComponent.tsx

@@ -46,12 +46,19 @@ import {
   Sparkles,
   Info,
   Settings,
+  ChevronDown,
 } from 'lucide-react';
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from '@/components/ui/tooltip';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
 import ModelsDialog from '@/app/home/components/models-dialog/ModelsDialog';
 
 export default function DynamicFormItemComponent({
@@ -215,6 +222,40 @@ export default function DynamicFormItemComponent({
       );
 
     case DynamicFormItemType.STRING:
+      if (config.options && config.options.length > 0) {
+        return (
+          <div className="flex items-center gap-1.5 max-w-md">
+            <Input className="flex-1" {...field} />
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="icon"
+                  type="button"
+                  className="h-9 w-9 shrink-0 text-muted-foreground"
+                >
+                  <ChevronDown className="size-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                {config.options.map((option) => (
+                  <DropdownMenuItem
+                    key={option.name}
+                    onClick={() => field.onChange(option.name)}
+                  >
+                    <div className="flex flex-col gap-0.5">
+                      <span>{extractI18nObject(option.label)}</span>
+                      <span className="text-xs text-muted-foreground">
+                        {option.name}
+                      </span>
+                    </div>
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        );
+      }
       return <Input className="max-w-md" {...field} />;
 
     case DynamicFormItemType.TEXT:
@@ -276,7 +317,11 @@ export default function DynamicFormItemComponent({
           <SelectContent>
             <SelectGroup>
               {config.options?.map((option) => (
-                <SelectItem key={option.name} value={option.name}>
+                <SelectItem
+                  key={option.name}
+                  value={option.name}
+                  description={option.name}
+                >
                   {extractI18nObject(option.label)}
                 </SelectItem>
               ))}

web/src/components/ui/select.tsx

@@ -101,8 +101,11 @@ function SelectLabel({
 function SelectItem({
   className,
   children,
+  description,
   ...props
-}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+}: React.ComponentProps<typeof SelectPrimitive.Item> & {
+  description?: React.ReactNode;
+}) {
   return (
     <SelectPrimitive.Item
       data-slot="select-item"
@@ -117,7 +120,16 @@ function SelectItem({
           <CheckIcon className="size-4" />
         </SelectPrimitive.ItemIndicator>
       </span>
-      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+      {description != null ? (
+        <div className="flex flex-col gap-0.5">
+          <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+          <span className="text-xs text-muted-foreground leading-tight">
+            {description}
+          </span>
+        </div>
+      ) : (
+        <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+      )}
     </SelectPrimitive.Item>
   );
 }

web/src/i18n/locales/en-US.ts

@@ -46,6 +46,7 @@ const enUS = {
     confirmDelete: 'Confirm Delete',
     deleteConfirmation: 'Are you sure you want to delete this?',
     selectOption: 'Select an option',
+    selectPreset: 'Select Preset',
     required: 'Required',
     enable: 'Enable',
     name: 'Name',

web/src/i18n/locales/es-ES.ts

@@ -48,6 +48,7 @@ const esES = {
     confirmDelete: 'Confirmar eliminación',
     deleteConfirmation: '¿Estás seguro de que deseas eliminar esto?',
     selectOption: 'Selecciona una opción',
+    selectPreset: 'Seleccionar preajuste',
     required: 'Obligatorio',
     enable: 'Activar',
     name: 'Nombre',

web/src/i18n/locales/ja-JP.ts

@@ -47,6 +47,7 @@
     confirmDelete: '削除の確認',
     deleteConfirmation: '本当に削除しますか？',
     selectOption: 'オプションを選択',
+    selectPreset: 'プリセットを選択',
     required: '必須',
     enable: '有効にする',
     name: '名前',

web/src/i18n/locales/th-TH.ts

@@ -46,6 +46,7 @@ const thTH = {
     confirmDelete: 'ยืนยันการลบ',
     deleteConfirmation: 'คุณแน่ใจหรือไม่ว่าต้องการลบสิ่งนี้?',
     selectOption: 'เลือกตัวเลือก',
+    selectPreset: 'เลือกค่าที่ตั้งไว้',
     required: 'จำเป็น',
     enable: 'เปิดใช้งาน',
     name: 'ชื่อ',

web/src/i18n/locales/vi-VN.ts

@@ -46,6 +46,7 @@ const viVN = {
     confirmDelete: 'Xác nhận xóa',
     deleteConfirmation: 'Bạn có chắc chắn muốn xóa mục này không?',
     selectOption: 'Chọn một tùy chọn',
+    selectPreset: 'Chọn mẫu có sẵn',
     required: 'Bắt buộc',
     enable: 'Bật',
     name: 'Tên',

web/src/i18n/locales/zh-Hans.ts

@@ -45,6 +45,7 @@ const zhHans = {
     confirmDelete: '确认删除',
     deleteConfirmation: '你确定要删除这个吗？',
     selectOption: '选择一个选项',
+    selectPreset: '选择预设',
     required: '必填',
     enable: '是否启用',
     name: '名称',

web/src/i18n/locales/zh-Hant.ts

@@ -45,6 +45,7 @@ const zhHant = {
     confirmDelete: '確認刪除',
     deleteConfirmation: '您確定要刪除這個嗎？',
     selectOption: '選擇一個選項',
+    selectPreset: '選擇預設',
     required: '必填',
     enable: '是否啟用',
     name: '名稱',