Model Runtime (#1858)

Co-authored-by: StyleZhang <jasonapring2015@outlook.com>
Co-authored-by: Garfield Dai <dai.hai@foxmail.com>
Co-authored-by: chenhe <guchenhe@gmail.com>
Co-authored-by: jyong <jyong@dify.ai>
Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: Yeuoly <admin@srmxy.cn>

web/app/components/header/account-setting/model-provider-page/model-selector/index.tsx

@@ -0,0 +1,100 @@
+import type { FC } from 'react'
+import { useState } from 'react'
+import type {
+  DefaultModel,
+  Model,
+  ModelItem,
+} from '../declarations'
+import { useCurrentProviderAndModel } from '../hooks'
+import ModelTrigger from './model-trigger'
+import EmptyTrigger from './empty-trigger'
+import Popup from './popup'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+
+type ModelSelectorProps = {
+  defaultModel?: DefaultModel
+  modelList: Model[]
+  triggerClassName?: string
+  popupClassName?: string
+  onSelect?: (model: DefaultModel) => void
+  readonly?: boolean
+}
+const ModelSelector: FC<ModelSelectorProps> = ({
+  defaultModel,
+  modelList,
+  triggerClassName,
+  popupClassName,
+  onSelect,
+  readonly,
+}) => {
+  const [open, setOpen] = useState(false)
+  const {
+    currentProvider,
+    currentModel,
+  } = useCurrentProviderAndModel(
+    modelList,
+    defaultModel,
+  )
+
+  const handleSelect = (provider: string, model: ModelItem) => {
+    setOpen(false)
+
+    if (onSelect)
+      onSelect({ provider, model: model.model })
+  }
+
+  const handleToggle = () => {
+    if (readonly)
+      return
+
+    setOpen(v => !v)
+  }
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement='bottom-start'
+      offset={4}
+    >
+      <div className='relative'>
+        <PortalToFollowElemTrigger
+          onClick={handleToggle}
+          className='block'
+        >
+          {
+            currentModel && currentProvider && (
+              <ModelTrigger
+                open={open}
+                provider={currentProvider}
+                model={currentModel}
+                className={triggerClassName}
+              />
+            )
+          }
+          {
+            !currentModel && (
+              <EmptyTrigger
+                open={open}
+                className={triggerClassName}
+              />
+            )
+          }
+        </PortalToFollowElemTrigger>
+        <PortalToFollowElemContent className={`z-[60] ${popupClassName}`}>
+          <Popup
+            defaultModel={defaultModel}
+            modelList={modelList}
+            onSelect={handleSelect}
+          />
+        </PortalToFollowElemContent>
+      </div>
+    </PortalToFollowElem>
+  )
+}
+
+export default ModelSelector