feat(video): add model selection to video settings

Add ModelSetting component to allow selecting video generation models

src/renderer/src/pages/video/Video.tsx

@@ -9,6 +9,7 @@ export const Video = ({ video }: VideoProps) => {
   const { t } = useTranslation()
   return (
     <div className="flex h-full w-full items-center justify-center rounded-2xl bg-foreground-200">
+      {/* TODO: complete video widget */}
       {video && <video></video>}
       {video === undefined && t('video.undefined')}
       {video === null && (

src/renderer/src/pages/video/VideoPage.tsx

@@ -6,24 +6,29 @@ import { SystemProviderIds } from '@renderer/types'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
+import { ModelSetting } from './settings/ModelSetting'
 import { ProviderSetting } from './settings/ProviderSetting'
 import { VideoPanel } from './VideoPanel'
 
 export const VideoPage = () => {
   const { t } = useTranslation()
   const [providerId, setProviderId] = useState<string>(SystemProviderIds.openai)
+  const [modelId, setModelId] = useState('sora-2')
   return (
     <div className="flex flex-1 flex-col">
       <Navbar>
         <NavbarCenter style={{ borderRight: 'none' }}>{t('video.title')}</NavbarCenter>
       </Navbar>
       <div id="content-container" className="flex flex-1">
+        {/* Settings */}
         <div className="flex w-70 flex-col p-2">
           <ProviderSetting providerId={providerId} setProviderId={setProviderId} />
+          <ModelSetting providerId={providerId} modelId={modelId} setModelId={setModelId} />
         </div>
         <Divider orientation="vertical" />
         <VideoPanel />
         <Divider orientation="vertical" />
+        {/* Video list */}
         <div className="w-40"></div>
       </div>
     </div>

src/renderer/src/pages/video/settings/ModelSetting.tsx

@@ -0,0 +1,48 @@
+import { Select, SelectItem } from '@heroui/react'
+import { Model, SystemProviderId } from '@renderer/types'
+import { Dispatch, SetStateAction } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { SettingItem, SettingTitle } from './shared'
+
+export interface ModelSettingProps {
+  providerId: string
+  modelId: string
+  setModelId: Dispatch<SetStateAction<string>>
+}
+
+interface ModelSelectItem extends Model {
+  key: string
+  label: string
+}
+
+// Hard-encoded for now. We may implement a function to filter video generation model from provider.models.
+const videoModelsMap = {
+  openai: ['sora-2', 'sora-2-pro'] as const
+} as const satisfies Partial<Record<SystemProviderId, string[]>>
+
+export const ModelSetting = ({ providerId, modelId, setModelId }: ModelSettingProps) => {
+  const { t } = useTranslation()
+
+  const items: ModelSelectItem[] = videoModelsMap[providerId]?.map((m: string) => ({ key: m, label: m })) ?? []
+
+  return (
+    <SettingItem>
+      <SettingTitle name={t('common.model')} />
+      <Select
+        selectionMode="single"
+        items={items}
+        defaultSelectedKeys={[modelId]}
+        disallowEmptySelection
+        onSelectionChange={(keys) => {
+          if (keys.currentKey) setModelId(keys.currentKey)
+        }}>
+        {(model) => (
+          <SelectItem textValue={model.label}>
+            <span>{model.label}</span>
+          </SelectItem>
+        )}
+      </Select>
+    </SettingItem>
+  )
+}