feat: allow user to use gpt-4

src/components/ConversationView/index.tsx

@@ -217,6 +217,9 @@ const ConversationView = () => {
     if (settingStore.setting.openAIApiConfig?.endpoint) {
       requestHeaders["x-openai-endpoint"] = settingStore.setting.openAIApiConfig?.endpoint;
     }
+    if (settingStore.setting.openAIApiConfig?.model) {
+      requestHeaders["x-openai-model"] = settingStore.setting.openAIApiConfig?.model;
+    }
     const rawRes = await fetch("/api/chat", {
       method: "POST",
       body: JSON.stringify({
@@ -311,7 +314,7 @@ const ConversationView = () => {
           messages: usageMessageList,
         },
         {
-          headers: session?.user.id ? { Authorization: `Bearer ${session?.user.id}` } : undefined,
+          headers: requestHeaders,
         }
       )
       .catch(() => {

src/components/OpenAIApiConfigView.tsx

@@ -3,14 +3,31 @@ import { useTranslation } from "react-i18next";
 import { useDebounce } from "react-use";
 import { useSettingStore } from "@/store";
 import { OpenAIApiConfig } from "@/types";
+import Radio from "./kit/Radio";
 import TextField from "./kit/TextField";
-
+import Tooltip from "./kit/Tooltip";
 const OpenAIApiConfigView = () => {
   const { t } = useTranslation();
   const settingStore = useSettingStore();
   const [openAIApiConfig, setOpenAIApiConfig] = useState(settingStore.setting.openAIApiConfig);
   const [maskKey, setMaskKey] = useState(true);
 
+  const models = [
+    {
+      id: "gpt-3.5-turbo",
+      title: `GPT-3.5 (${t("setting.openai-api-configuration.quota-per-ask", { count: 1 })})`,
+      disabled: false,
+      tooltip: "",
+    },
+    // Disable GPT-4 if user doesn't provide key (because SQL Chat own key hasn't been whitelisted yet).
+    {
+      id: "gpt-4",
+      title: `GPT-4 (${t("setting.openai-api-configuration.quota-per-ask", { count: 10 })})`,
+      disabled: !settingStore.setting.openAIApiConfig.key,
+      tooltip: t("setting.openai-api-configuration.provide-gpt4-key"),
+    },
+  ];
+
   const maskedKey = (str: string) => {
     if (str.length < 7) {
       return str;
@@ -37,21 +54,58 @@ const OpenAIApiConfigView = () => {
     setMaskKey(false);
   };
 
+  const modelRadio = (model: any) => {
+    return (
+      <div key={model.id} className="flex items-center">
+        <Radio
+          value={model.id}
+          disabled={model.disabled}
+          checked={openAIApiConfig.model === model.id}
+          onChange={(value) => handleSetOpenAIApiConfig({ model: value })}
+        />
+        <label htmlFor={model.id} className="ml-3 block text-sm font-medium leading-6 text-gray-900">
+          {model.title}
+        </label>
+      </div>
+    );
+  };
+
   return (
     <>
       <div className="w-full border border-gray-200 dark:border-zinc-700 p-4 rounded-lg">
-        <div className="flex flex-col">
-          <label className="mb-1">OpenAI API Key</label>
+        <div>
+          <label className="text-base font-semibold text-gray-900">{t("setting.openai-api-configuration.model")}</label>
+          <p className="text-sm text-gray-500">{t("setting.openai-api-configuration.model-description")}</p>
+          <fieldset className="mt-4">
+            <div className="space-y-4 sm:flex sm:items-center sm:space-x-10 sm:space-y-0">
+              {models.map((model) =>
+                model.disabled ? (
+                  <Tooltip key={model.id} title={model.tooltip} side="top">
+                    {modelRadio(model)}
+                  </Tooltip>
+                ) : (
+                  modelRadio(model)
+                )
+              )}
+            </div>
+          </fieldset>
+        </div>
+        <div className="flex flex-col mt-4">
+          <label className="text-base font-semibold text-gray-900">OpenAI API Key</label>
+          <p className="text-sm text-gray-500">{t("setting.openai-api-configuration.key-description")}</p>
           <TextField
+            className="mt-4"
             placeholder="OpenAI API Key"
             value={maskKey ? maskedKey(openAIApiConfig.key) : openAIApiConfig.key}
             onChange={(value) => handleSetOpenAIApiConfig({ key: value })}
           />
         </div>
-        <div className="flex flex-col mt-3">
-          <label className="mb-1">API Endpoint</label>
+        <div className="flex flex-col mt-4">
+          <label className="text-base font-semibold text-gray-900">OpenAI API Endpoint</label>
+          <p className="text-sm text-gray-500">{t("setting.openai-api-configuration.endpoint-description")}</p>
           <TextField
-            placeholder="OpenAI API Endpoint"
+            className="mt-4"
+            placeholder="API Endpoint"
             value={openAIApiConfig.endpoint}
             onChange={(value) => handleSetOpenAIApiConfig({ endpoint: value })}
           />

src/components/kit/Radio.tsx

@@ -0,0 +1,39 @@
+import { HTMLInputTypeAttribute } from "react";
+
+interface Props {
+  value: string;
+  onChange?: (value: string) => void;
+  type?: HTMLInputTypeAttribute;
+  className?: string;
+  disabled?: boolean;
+  checked?: boolean;
+}
+
+const getDefaultProps = () => ({
+  value: "",
+  onChange: () => {},
+  type: "radio",
+  className: "",
+  disabled: false,
+  checked: false,
+});
+
+const Radio = (props: Props) => {
+  const { value, disabled, className, type, checked, onChange } = {
+    ...getDefaultProps(),
+    ...props,
+  };
+
+  return (
+    <input
+      className={`${className || ""} h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600`}
+      type={type}
+      disabled={disabled}
+      value={value}
+      checked={checked}
+      onChange={(e) => onChange(e.target.value)}
+    />
+  );
+};
+
+export default Radio;