feat: add claude and bard

app/components/config/anthropic/model.tsx

@@ -0,0 +1,79 @@
+import { ModelConfig } from "@/app/store";
+import { ModelConfigProps } from "../types";
+import { ListItem, Select } from "../../ui-lib";
+import Locale from "@/app/locales";
+import { InputRange } from "../../input-range";
+
+export function AnthropicModelConfig(
+  props: ModelConfigProps<ModelConfig["anthropic"]>,
+) {
+  return (
+    <>
+      <ListItem title={Locale.Settings.Model}>
+        <Select
+          value={props.config.model}
+          onChange={(e) => {
+            props.updateConfig(
+              (config) => (config.model = e.currentTarget.value),
+            );
+          }}
+        >
+          {props.models.map((v, i) => (
+            <option value={v.name} key={i} disabled={!v.available}>
+              {v.name}
+            </option>
+          ))}
+        </Select>
+      </ListItem>
+      <ListItem
+        title={Locale.Settings.Temperature.Title}
+        subTitle={Locale.Settings.Temperature.SubTitle}
+      >
+        <InputRange
+          value={props.config.temperature?.toFixed(1)}
+          min="0"
+          max="1" // lets limit it to 0-1
+          step="0.1"
+          onChange={(e) => {
+            props.updateConfig(
+              (config) => (config.temperature = e.currentTarget.valueAsNumber),
+            );
+          }}
+        ></InputRange>
+      </ListItem>
+      <ListItem
+        title={Locale.Settings.TopP.Title}
+        subTitle={Locale.Settings.TopP.SubTitle}
+      >
+        <InputRange
+          value={(props.config.top_p ?? 1).toFixed(1)}
+          min="0"
+          max="1"
+          step="0.1"
+          onChange={(e) => {
+            props.updateConfig(
+              (config) => (config.top_p = e.currentTarget.valueAsNumber),
+            );
+          }}
+        ></InputRange>
+      </ListItem>
+      <ListItem
+        title={Locale.Settings.MaxTokens.Title}
+        subTitle={Locale.Settings.MaxTokens.SubTitle}
+      >
+        <input
+          type="number"
+          min={100}
+          max={100000}
+          value={props.config.max_tokens_to_sample}
+          onChange={(e) =>
+            props.updateConfig(
+              (config) =>
+                (config.max_tokens_to_sample = e.currentTarget.valueAsNumber),
+            )
+          }
+        ></input>
+      </ListItem>
+    </>
+  );
+}

app/components/config/anthropic/provider.tsx

@@ -0,0 +1,70 @@
+import { ProviderConfig } from "@/app/store";
+import { ProviderConfigProps } from "../types";
+import { ListItem, PasswordInput } from "../../ui-lib";
+import Locale from "@/app/locales";
+import { REMOTE_API_HOST } from "@/app/constant";
+
+export function AnthropicProviderConfig(
+  props: ProviderConfigProps<ProviderConfig["anthropic"]>,
+) {
+  return (
+    <>
+      <ListItem
+        title={Locale.Settings.Endpoint.Title}
+        subTitle={Locale.Settings.Endpoint.SubTitle}
+      >
+        <input
+          type="text"
+          value={props.config.endpoint}
+          placeholder={REMOTE_API_HOST}
+          onChange={(e) =>
+            props.updateConfig(
+              (config) => (config.endpoint = e.currentTarget.value),
+            )
+          }
+        ></input>
+      </ListItem>
+      <ListItem
+        title={Locale.Settings.Token.Title}
+        subTitle={Locale.Settings.Token.SubTitle}
+      >
+        <PasswordInput
+          value={props.config.apiKey}
+          type="text"
+          placeholder={Locale.Settings.Token.Placeholder}
+          onChange={(e) => {
+            props.updateConfig(
+              (config) => (config.apiKey = e.currentTarget.value),
+            );
+          }}
+        />
+      </ListItem>
+      <ListItem title={"Anthropic Version"} subTitle={"填写 API 版本号"}>
+        <PasswordInput
+          value={props.config.version}
+          type="text"
+          onChange={(e) => {
+            props.updateConfig(
+              (config) => (config.version = e.currentTarget.value),
+            );
+          }}
+        />
+      </ListItem>
+      <ListItem
+        title={Locale.Settings.CustomModel.Title}
+        subTitle={Locale.Settings.CustomModel.SubTitle}
+      >
+        <input
+          type="text"
+          value={props.config.customModels}
+          placeholder="model1,model2,model3"
+          onChange={(e) =>
+            props.updateConfig(
+              (config) => (config.customModels = e.currentTarget.value),
+            )
+          }
+        ></input>
+      </ListItem>
+    </>
+  );
+}

app/components/config/index.tsx

@@ -11,6 +11,10 @@ import { OpenAIProviderConfig } from "./openai/provider";
 import { ListItem, Select } from "../ui-lib";
 import Locale from "@/app/locales";
 import { InputRange } from "../input-range";
+import { OpenAIConfig } from "@/app/client/openai/config";
+import { AnthropicModelConfig } from "./anthropic/model";
+import { AnthropicConfig } from "@/app/client/anthropic/config";
+import { AnthropicProviderConfig } from "./anthropic/provider";
 
 export function ModelConfigList(props: {
   provider: LLMProvider;
@@ -24,16 +28,17 @@ export function ModelConfigList(props: {
         updateConfig={(update) => {
           props.updateConfig((config) => update(config.openai));
         }}
-        models={[
-          {
-            name: "gpt-3.5-turbo",
-            available: true,
-          },
-          {
-            name: "gpt-4",
-            available: true,
-          },
-        ]}
+        models={OpenAIConfig.provider.models}
+      />
+    );
+  } else if (props.provider === "anthropic") {
+    return (
+      <AnthropicModelConfig
+        config={props.config.anthropic}
+        updateConfig={(update) => {
+          props.updateConfig((config) => update(config.anthropic));
+        }}
+        models={AnthropicConfig.provider.models}
       />
     );
   }
@@ -55,6 +60,15 @@ export function ProviderConfigList(props: {
         }}
       />
     );
+  } else if (props.provider === "anthropic") {
+    return (
+      <AnthropicProviderConfig
+        config={props.config.anthropic}
+        updateConfig={(update) => {
+          props.updateConfig((config) => update(config.anthropic));
+        }}
+      />
+    );
   }
 
   return null;

app/components/config/openai/provider.tsx

@@ -3,6 +3,8 @@ import { ProviderConfigProps } from "../types";
 import { ListItem, PasswordInput } from "../../ui-lib";
 import Locale from "@/app/locales";
 import { REMOTE_API_HOST } from "@/app/constant";
+import { IconButton } from "../../button";
+import ReloadIcon from "@/app/icons/reload.svg";
 
 export function OpenAIProviderConfig(
   props: ProviderConfigProps<ProviderConfig["openai"]>,
@@ -58,6 +60,7 @@ export function OpenAIProviderConfig(
       <ListItem title="自动拉取可用模型" subTitle="尝试拉取所有可用模型">
         <input
           type="checkbox"
+          style={{ marginLeft: 10 }}
           checked={props.config.autoFetchModels}
           onChange={(e) =>
             props.updateConfig(

app/components/model-config.tsx

@@ -1,139 +0,0 @@
-import { ModalConfigValidator, ModelConfig, useAppConfig } from "../store";
-
-import Locale from "../locales";
-import { InputRange } from "./input-range";
-import { ListItem, Select } from "./ui-lib";
-
-export function _ModelConfigList(props: {
-  modelConfig: ModelConfig;
-  updateConfig: (updater: (config: ModelConfig) => void) => void;
-}) {
-  return null;
-  /*
-  const config = useAppConfig();
-
-  return (
-    <>
-      <ListItem title={Locale.Settings.Model}>
-        <Select
-          value={props.modelConfig.model}
-          onChange={(e) => {
-            props.updateConfig(
-              (config) =>
-                (config.model = ModalConfigValidator.model(
-                  e.currentTarget.value,
-                )),
-            );
-          }}
-        >
-          {config.allModels().map((v, i) => (
-            <option value={v.name} key={i} disabled={!v.available}>
-              {v.name}
-            </option>
-          ))}
-        </Select>
-      </ListItem>
-      <ListItem
-        title={Locale.Settings.Temperature.Title}
-        subTitle={Locale.Settings.Temperature.SubTitle}
-      >
-        <InputRange
-          value={props.modelConfig.temperature?.toFixed(1)}
-          min="0"
-          max="1" // lets limit it to 0-1
-          step="0.1"
-          onChange={(e) => {
-            props.updateConfig(
-              (config) =>
-                (config.temperature = ModalConfigValidator.temperature(
-                  e.currentTarget.valueAsNumber,
-                )),
-            );
-          }}
-        ></InputRange>
-      </ListItem>
-      <ListItem
-        title={Locale.Settings.TopP.Title}
-        subTitle={Locale.Settings.TopP.SubTitle}
-      >
-        <InputRange
-          value={(props.modelConfig.top_p ?? 1).toFixed(1)}
-          min="0"
-          max="1"
-          step="0.1"
-          onChange={(e) => {
-            props.updateConfig(
-              (config) =>
-                (config.top_p = ModalConfigValidator.top_p(
-                  e.currentTarget.valueAsNumber,
-                )),
-            );
-          }}
-        ></InputRange>
-      </ListItem>
-      <ListItem
-        title={Locale.Settings.MaxTokens.Title}
-        subTitle={Locale.Settings.MaxTokens.SubTitle}
-      >
-        <input
-          type="number"
-          min={100}
-          max={100000}
-          value={props.modelConfig.max_tokens}
-          onChange={(e) =>
-            props.updateConfig(
-              (config) =>
-                (config.max_tokens = ModalConfigValidator.max_tokens(
-                  e.currentTarget.valueAsNumber,
-                )),
-            )
-          }
-        ></input>
-      </ListItem>
-      <ListItem
-        title={Locale.Settings.PresencePenalty.Title}
-        subTitle={Locale.Settings.PresencePenalty.SubTitle}
-      >
-        <InputRange
-          value={props.modelConfig.presence_penalty?.toFixed(1)}
-          min="-2"
-          max="2"
-          step="0.1"
-          onChange={(e) => {
-            props.updateConfig(
-              (config) =>
-                (config.presence_penalty =
-                  ModalConfigValidator.presence_penalty(
-                    e.currentTarget.valueAsNumber,
-                  )),
-            );
-          }}
-        ></InputRange>
-      </ListItem>
-
-      <ListItem
-        title={Locale.Settings.FrequencyPenalty.Title}
-        subTitle={Locale.Settings.FrequencyPenalty.SubTitle}
-      >
-        <InputRange
-          value={props.modelConfig.frequency_penalty?.toFixed(1)}
-          min="-2"
-          max="2"
-          step="0.1"
-          onChange={(e) => {
-            props.updateConfig(
-              (config) =>
-                (config.frequency_penalty =
-                  ModalConfigValidator.frequency_penalty(
-                    e.currentTarget.valueAsNumber,
-                  )),
-            );
-          }}
-        ></InputRange>
-      </ListItem>
-
-      
-    </>
-  );
-  */
-}

app/components/settings.tsx

@@ -37,8 +37,6 @@ import {
   useUpdateStore,
   useAccessStore,
   useAppConfig,
-  LLMProvider,
-  LLMProviders,
 } from "../store";
 
 import Locale, {
@@ -578,22 +576,6 @@ export function Settings() {
     console.log("[Update] remote version ", updateStore.remoteVersion);
   }
 
-  const usage = {
-    used: updateStore.used,
-    subscription: updateStore.subscription,
-  };
-  const [loadingUsage, setLoadingUsage] = useState(false);
-  function checkUsage(force = false) {
-    if (accessStore.hideBalanceQuery) {
-      return;
-    }
-
-    setLoadingUsage(true);
-    updateStore.updateUsage(force).finally(() => {
-      setLoadingUsage(false);
-    });
-  }
-
   const accessStore = useAccessStore();
   const enabledAccessControl = useMemo(
     () => accessStore.enabledAccessControl(),
@@ -610,7 +592,6 @@ export function Settings() {
   useEffect(() => {
     // checks per minutes
     checkUpdate();
-    showUsage && checkUsage();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -806,6 +787,28 @@ export function Settings() {
           </ListItem>
         </List>
 
+        <List>
+          {showAccessCode ? (
+            <ListItem
+              title={Locale.Settings.AccessCode.Title}
+              subTitle={Locale.Settings.AccessCode.SubTitle}
+            >
+              <PasswordInput
+                value={accessStore.accessCode}
+                type="text"
+                placeholder={Locale.Settings.AccessCode.Placeholder}
+                onChange={(e) => {
+                  accessStore.update(
+                    (config) => (config.accessCode = e.currentTarget.value),
+                  );
+                }}
+              />
+            </ListItem>
+          ) : (
+            <></>
+          )}
+        </List>
+
         <SyncItems />
 
         <List>
@@ -875,56 +878,6 @@ export function Settings() {
           </ListItem>
         </List>
 
-        <List>
-          {showAccessCode ? (
-            <ListItem
-              title={Locale.Settings.AccessCode.Title}
-              subTitle={Locale.Settings.AccessCode.SubTitle}
-            >
-              <PasswordInput
-                value={accessStore.accessCode}
-                type="text"
-                placeholder={Locale.Settings.AccessCode.Placeholder}
-                onChange={(e) => {
-                  accessStore.update(
-                    (config) => (config.accessCode = e.currentTarget.value),
-                  );
-                }}
-              />
-            </ListItem>
-          ) : (
-            <></>
-          )}
-
-          {!accessStore.hideUserApiKey ? <></> : null}
-
-          {!accessStore.hideBalanceQuery ? (
-            <ListItem
-              title={Locale.Settings.Usage.Title}
-              subTitle={
-                showUsage
-                  ? loadingUsage
-                    ? Locale.Settings.Usage.IsChecking
-                    : Locale.Settings.Usage.SubTitle(
-                        usage?.used ?? "[?]",
-                        usage?.subscription ?? "[?]",
-                      )
-                  : Locale.Settings.Usage.NoAccess
-              }
-            >
-              {!showUsage || loadingUsage ? (
-                <div />
-              ) : (
-                <IconButton
-                  icon={<ResetIcon></ResetIcon>}
-                  text={Locale.Settings.Usage.Check}
-                  onClick={() => checkUsage(true)}
-                />
-              )}
-            </ListItem>
-          ) : null}
-        </List>
-
         <List>
           <ProviderSelectItem
             value={config.globalMaskConfig.provider}