feat: model-item

web/app/components/base/icons/assets/vender/line/arrows/chevron-down-double.svg

+<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="chevron-down-double">
+<path id="Icon" d="M3.5 7L6 9.5L8.5 7M3.5 3.5L6 6L8.5 3.5" stroke="#667085" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

web/app/components/base/icons/src/vender/line/arrows/ChevronDownDouble.json

+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "12",
+			"height": "13",
+			"viewBox": "0 0 12 13",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"id": "chevron-down-double"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"id": "Icon",
+							"d": "M3.5 7L6 9.5L8.5 7M3.5 3.5L6 6L8.5 3.5",
+							"stroke": "currentColor",
+							"stroke-width": "1.25",
+							"stroke-linecap": "round",
+							"stroke-linejoin": "round"
+						},
+						"children": []
+					}
+				]
+			}
+		]
+	},
+	"name": "ChevronDownDouble"
+}
\ No newline at end of file

web/app/components/base/icons/src/vender/line/arrows/ChevronDownDouble.tsx

+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './ChevronDownDouble.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+export default Icon

web/app/components/base/icons/src/vender/line/arrows/index.ts

 export { default as ArrowNarrowLeft } from './ArrowNarrowLeft'
 export { default as ArrowUpRight } from './ArrowUpRight'
+export { default as ChevronDownDouble } from './ChevronDownDouble'
 export { default as ChevronDown } from './ChevronDown'
 export { default as ChevronRight } from './ChevronRight'
 export { default as RefreshCw05 } from './RefreshCw05'

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

+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ModelSelector from './model-selector'
 import ModelCard from './model-card'
+import ModelItem from './model-item'
+import { ChevronDownDouble } from '@/app/components/base/icons/src/vender/line/arrows'
+
+const MODEL_LIST = [
+  {
+    key: 'azure',
+    type: 'specific',
+  },
+  {
+    key: 'replicate',
+    type: 'specific',
+  },
+  {
+    key: 'hugging-face',
+    type: 'customized',
+  },
+  {
+    key: 'tongyi',
+    type: 'customized',
+  },
+]
 
 const ModelPage = () => {
   const { t } = useTranslation()
+  const [showMoreModel, setShowMoreModel] = useState(false)
 
   return (
     <div className='pt-1'>
@@ -23,6 +46,19 @@ const ModelPage = () => {
         <ModelCard />
         <ModelCard type='anthropic' />
       </div>
+      {
+        MODEL_LIST.slice(0, showMoreModel ? MODEL_LIST.length : 3).map(model => (
+          <ModelItem key={model.key} type={model.type} />
+        ))
+      }
+      {
+        !showMoreModel && (
+          <div className='inline-flex items-center px-1 h-[26px] cursor-pointer' onClick={() => setShowMoreModel(true)}>
+            <ChevronDownDouble className='mr-1 w-3 h-3 text-gray-500' />
+            <div className='text-xs font-medium text-gray-500'>{t('common.modelProvider.showMoreModelProvider')}</div>
+          </div>
+        )
+      }
     </div>
   )
 }

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

+import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import Button from '@/app/components/base/button'
+
+type ModelItemProps = {
+  type?: string
+}
+
+const ModelItem: FC<ModelItemProps> = ({
+  type = 'specific',
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className='flex justify-between items-center mb-2 px-4 h-14 bg-gray-50 rounded-xl'>
+      <div />
+      <Button className='!px-3 !h-7 rounded-md bg-white !text-xs font-medium text-gray-700'>{t(`common.operation.${type === 'specific' ? 'add' : 'setup'}`)}</Button>
+    </div>
+  )
+}
+
+export default ModelItem

web/i18n/lang/common.en.ts

@@ -23,6 +23,7 @@ const translation = {
     lineBreak: 'Line break',
     sure: 'I\'m sure',
     download: 'Download',
+    setup: 'Setup',
   },
   placeholder: {
     input: 'Please enter',

web/i18n/lang/common.zh.ts

@@ -23,6 +23,7 @@ const translation = {
     lineBreak: '换行',
     sure: '我确定',
     download: '下载',
+    setup: '设置',
   },
   placeholder: {
     input: '请输入',