From bea66e88113a7154e05b8ad3d949d659d2933691 Mon Sep 17 00:00:00 2001
From: anc95 <1481988258@qq.com>
Date: Wed, 6 Mar 2024 13:09:52 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E8=87=AA=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89=E6=A8=A1=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/api/openai.ts              | 37 +------------
 src/options/setting-form/open-api.tsx | 77 +++++++++++++++++----------
 2 files changed, 50 insertions(+), 64 deletions(-)

diff --git a/src/common/api/openai.ts b/src/common/api/openai.ts
index 0872632..9c40079 100644
--- a/src/common/api/openai.ts
+++ b/src/common/api/openai.ts
@@ -170,42 +170,7 @@ export const useModels = () => {
   // });
 
   return useMemo(() => {
-    return [
-      {
-        id: 'gpt-3.5-turbo',
-        description:
-          'Most capable GPT-3.5 model and optimized for chat at 1/10th the cost of text-davinci-003. Will be updated with our latest model iteration.',
-        price: '$0.0015 / 1K tokens, $0.002 / 1K output tokens',
-      },
-      {
-        id: 'gpt-3.5-turbo-16k',
-        description:
-          'Same capabilities as the standard gpt-3.5-turbo model but with 4 times the context.',
-        price: '$0.003 / 1K input tokens, $0.004 / 1K input tokens',
-      },
-      {
-        id: 'gpt-4',
-        description:
-          'Make sure you have access to gpt-4 before using it. With broad general knowledge and domain expertise, GPT-4 can follow complex instructions in natural language and solve difficult problems with accuracy.',
-        price: '$0.03 / 1K input tokens, $0.06 / 1K output tokens',
-      },
-      {
-        id: 'text-davinci-003',
-        description:
-          'Can do any language task with better quality, longer output, and consistent instruction-following than the curie, babbage, or ada models. Also supports inserting completions within text.',
-        price: '$0.02 / 1K tokens',
-      },
-      {
-        id: 'text-davinci-edit-001',
-        price: '$0.02 / 1K tokens',
-        description: 'Better for text edits',
-      },
-      {
-        id: 'code-davinci-edit-001',
-        price: '$0.02 / 1K tokens',
-        description: 'Better for code edits',
-      },
-    ]
+    return ['gpt-3.5-turbo', 'gpt-4', 'gpt-4-32k']
   }, [])
 }
 
diff --git a/src/options/setting-form/open-api.tsx b/src/options/setting-form/open-api.tsx
index ed8cf82..18ece95 100644
--- a/src/options/setting-form/open-api.tsx
+++ b/src/options/setting-form/open-api.tsx
@@ -16,7 +16,6 @@ import i18next from 'i18next'
 import { ServiceProvider } from '../types'
 
 export const OPENAISettings: React.FC = () => {
-  const models = useModels()
   const value = Form.useWatch('serviceProvider')
 
   if (value !== ServiceProvider.OpenAI) {
@@ -50,7 +49,6 @@ export const OPENAISettings: React.FC = () => {
         name="model"
         label={i18next.t('Model')}
         required
-        requiredMark
         tooltip={
           <a
             className="text-blue-300"
@@ -60,20 +58,13 @@ export const OPENAISettings: React.FC = () => {
           </a>
         }
       >
-        <Radio.Group className="flex flex-wrap gap-4">
-          {models.map((m) => (
-            <Radio key={m.id} className="" value={m.id}>
-              <ModelCard {...m} />
-            </Radio>
-          ))}
-        </Radio.Group>
+        <FormModelSelect />
       </Form.Item>
       <Form.Item
         className="col-span-5"
         name="temperature"
         label={i18next.t('Temperature')}
         required
-        requiredMark
         tooltip={
           <a
             className="text-blue-300"
@@ -157,26 +148,56 @@ const ConnectionTest: React.FC = () => {
   )
 }
 
-const ModelCard: React.FC<{
-  id: string
-  price: string
-  description: string
-}> = ({ id, price, description }) => {
-  const model = Form.useWatch('model')
+const ModelCard: React.FC<
+  React.PropsWithChildren<{ tooltip: string; model: string }>
+> = ({ model, tooltip, children }) => {
+  const m = Form.useWatch('model')
+  const content = (
+    <div
+      className={cx(
+        'border border-gray-100 hover:rounded-lg rounded-md hover:shadow-sm transition-all duration-300 p-3  bg-zinc-100 flex flex-col gap-2',
+        m === model ? '!border-black' : ''
+      )}
+    >
+      <div className="font-semibold text-sm">{children ? children : model}</div>
+    </div>
+  )
+
+  if (tooltip) {
+    return <Tooltip title={tooltip}>{content}</Tooltip>
+  }
+
+  return content
+}
+
+const FormModelSelect: React.FC<{
+  value?: string
+  onChange?: (v: string) => void
+}> = ({ value, onChange }) => {
+  const models = useModels()
 
   return (
-    <Tooltip title={description}>
-      <div
-        className={cx(
-          'border border-gray-100 hover:rounded-lg rounded-md hover:shadow-sm transition-all duration-300 p-3  bg-zinc-100 flex flex-col gap-2',
-          model === id ? '!border-black' : ''
-        )}
-      >
-        <div className="font-semibold text-sm">{id}</div>
-        <Tag className="!text-xs" color="gold-inverse">
-          {price}
-        </Tag>
+    <>
+      <Input
+        placeholder={i18next.t('Model')}
+        value={value}
+        onChange={(e) => {
+          onChange?.(e.target.value)
+        }}
+      />
+      <div className="flex items-center gap-2 py-2">
+        {models.map((m) => (
+          <div
+            className="px-1 bg-orange-300 hover:bg-orange-400 cursor-pointer text-white rounded-md text-xs"
+            onClick={() => {
+              onChange?.(m)
+            }}
+            key={m}
+          >
+            {m}
+          </div>
+        ))}
       </div>
-    </Tooltip>
+    </>
   )
 }