next-chat/app/components/config/index.tsx

import {
  ChatConfig,
  LLMProvider,
  LLMProviders,
  ModelConfig,
  ProviderConfig,
} from "@/app/store";
import { Updater } from "@/app/typing";
import { OpenAIModelConfig } from "./openai/model";
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;
  config: ModelConfig;
  updateConfig: Updater<ModelConfig>;
}) {
  if (props.provider === "openai") {
    return (
      <OpenAIModelConfig
        config={props.config.openai}
        updateConfig={(update) => {
          props.updateConfig((config) => update(config.openai));
        }}
        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}
      />
    );
  }

  return null;
}

export function ProviderConfigList(props: {
  provider: LLMProvider;
  config: ProviderConfig;
  updateConfig: Updater<ProviderConfig>;
}) {
  if (props.provider === "openai") {
    return (
      <OpenAIProviderConfig
        config={props.config.openai}
        updateConfig={(update) => {
          props.updateConfig((config) => update(config.openai));
        }}
      />
    );
  } else if (props.provider === "anthropic") {
    return (
      <AnthropicProviderConfig
        config={props.config.anthropic}
        updateConfig={(update) => {
          props.updateConfig((config) => update(config.anthropic));
        }}
      />
    );
  }

  return null;
}

export function ProviderSelectItem(props: {
  value: LLMProvider;
  update: (value: LLMProvider) => void;
}) {
  return (
    <ListItem title="服务提供商" subTitle="切换不同的模型提供商">
      <Select
        value={props.value}
        onChange={(e) => {
          props.update(e.target.value as LLMProvider);
        }}
      >
        {LLMProviders.map(([k, v]) => (
          <option value={v} key={k}>
            {k}
          </option>
        ))}
      </Select>
    </ListItem>
  );
}

export function ChatConfigList(props: {
  config: ChatConfig;
  updateConfig: (updater: (config: ChatConfig) => void) => void;
}) {
  return (
    <>
      <ListItem
        title={Locale.Settings.InjectSystemPrompts.Title}
        subTitle={Locale.Settings.InjectSystemPrompts.SubTitle}
      >
        <input
          type="checkbox"
          checked={props.config.enableInjectSystemPrompts}
          onChange={(e) =>
            props.updateConfig(
              (config) =>
                (config.enableInjectSystemPrompts = e.currentTarget.checked),
            )
          }
        ></input>
      </ListItem>

      <ListItem
        title={Locale.Settings.InputTemplate.Title}
        subTitle={Locale.Settings.InputTemplate.SubTitle}
      >
        <input
          type="text"
          value={props.config.template}
          onChange={(e) =>
            props.updateConfig(
              (config) => (config.template = e.currentTarget.value),
            )
          }
        ></input>
      </ListItem>

      <ListItem
        title={Locale.Settings.HistoryCount.Title}
        subTitle={Locale.Settings.HistoryCount.SubTitle}
      >
        <InputRange
          title={props.config.historyMessageCount.toString()}
          value={props.config.historyMessageCount}
          min="0"
          max="64"
          step="1"
          onChange={(e) =>
            props.updateConfig(
              (config) => (config.historyMessageCount = e.target.valueAsNumber),
            )
          }
        ></InputRange>
      </ListItem>

      <ListItem
        title={Locale.Settings.CompressThreshold.Title}
        subTitle={Locale.Settings.CompressThreshold.SubTitle}
      >
        <input
          type="number"
          min={500}
          max={4000}
          value={props.config.compressMessageLengthThreshold}
          onChange={(e) =>
            props.updateConfig(
              (config) =>
                (config.compressMessageLengthThreshold =
                  e.currentTarget.valueAsNumber),
            )
          }
        ></input>
      </ListItem>
      <ListItem title={Locale.Memory.Title} subTitle={Locale.Memory.Send}>
        <input
          type="checkbox"
          checked={props.config.sendMemory}
          onChange={(e) =>
            props.updateConfig(
              (config) => (config.sendMemory = e.currentTarget.checked),
            )
          }
        ></input>
      </ListItem>
    </>
  );
}