refactor add modal

src/components/Common/Playground/EditMessageForm.tsx

@@ -49,13 +49,13 @@ export const EditMessageForm = (props: Props) => {
       <div className="flex justify-center space-x-2 mt-2">
         <button
           aria-label={t("save")}
-          className="bg-black px-2.5 py-2 rounded-md text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-gray-500 hover:bg-gray-900">
+          className="bg-black px-2.5 py-2 rounded-lg text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-gray-500 hover:bg-gray-900">
           {props.isBot ? t("save") : t("saveAndSubmit")}
         </button>
         <button
           onClick={props.onClose}
           aria-label={t("cancel")}
-          className="border dark:border-gray-600 px-2.5 py-2 rounded-md text-gray-700 dark:text-gray-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-gray-500 hover:bg-gray-100 dark:hover:bg-gray-900">
+          className="border dark:border-gray-600 px-2.5 py-2 rounded-lg text-gray-700 dark:text-gray-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-gray-500 hover:bg-gray-100 dark:hover:bg-gray-900">
           {t("cancel")}
         </button>
       </div>

src/components/Option/Models/AddOllamaModelModal.tsx

@@ -0,0 +1,67 @@
+import { useForm } from "@mantine/form"
+import { useMutation } from "@tanstack/react-query"
+import { Input, Modal, notification } from "antd"
+import { Download } from "lucide-react"
+import { useTranslation } from "react-i18next"
+
+type Props = {
+  open: boolean
+  setOpen: (open: boolean) => void
+}
+
+export const AddOllamaModelModal: React.FC<Props> = ({ open, setOpen }) => {
+  const { t } = useTranslation(["settings", "common", "openai"])
+
+  const form = useForm({
+    initialValues: {
+      model: ""
+    }
+  })
+
+  const pullModel = async (modelName: string) => {
+    notification.info({
+      message: t("manageModels.notification.pullModel"),
+      description: t("manageModels.notification.pullModelDescription", {
+        modelName
+      })
+    })
+
+    setOpen(false)
+
+    form.reset()
+
+    browser.runtime.sendMessage({
+      type: "pull_model",
+      modelName
+    })
+
+    return true
+  }
+
+  const { mutate: pullOllamaModel } = useMutation({
+    mutationFn: pullModel
+  })
+  return (
+    <Modal
+      footer={null}
+      open={open}
+      title={t("manageModels.modal.title")}
+      onCancel={() => setOpen(false)}>
+      <form onSubmit={form.onSubmit((values) => pullOllamaModel(values.model))}>
+        <Input
+          {...form.getInputProps("model")}
+          required
+          placeholder={t("manageModels.modal.placeholder")}
+          size="large"
+        />
+
+        <button
+          type="submit"
+          className="inline-flex justify-center w-full text-center mt-4 items-center rounded-md border border-transparent bg-black px-2 py-2 text-sm font-medium leading-4 text-white shadow-sm hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:bg-white dark:text-gray-800 dark:hover:bg-gray-100 dark:focus:ring-gray-500 dark:focus:ring-offset-gray-100 disabled:opacity-50 ">
+          <Download className="w-5 h-5 mr-3" />
+          {t("manageModels.modal.pull")}
+        </button>
+      </form>
+    </Modal>
+  )
+}

src/components/Option/Models/index.tsx

@@ -1,18 +1,11 @@
-import { useMutation, } from "@tanstack/react-query"
+import { Segmented } from "antd"
-import {
-  notification,
-  Modal,
-  Input,
-  Segmented
-} from "antd"
 import dayjs from "dayjs"
 import relativeTime from "dayjs/plugin/relativeTime"
 import { useState } from "react"
-import { useForm } from "@mantine/form"
-import { Download } from "lucide-react"
 import { useTranslation } from "react-i18next"
 import { OllamaModelsTable } from "./OllamaModelsTable"
 import { CustomModelsTable } from "./CustomModelsTable"
+import { AddOllamaModelModal } from "./AddOllamaModelModal"
 
 dayjs.extend(relativeTime)
 
@@ -22,36 +15,6 @@ export const ModelsBody = () => {
 
   const { t } = useTranslation(["settings", "common", "openai"])
 
-  const form = useForm({
-    initialValues: {
-      model: ""
-    }
-  })
-
-  const pullModel = async (modelName: string) => {
-    notification.info({
-      message: t("manageModels.notification.pullModel"),
-      description: t("manageModels.notification.pullModelDescription", {
-        modelName
-      })
-    })
-
-    setOpen(false)
-
-    form.reset()
-
-    browser.runtime.sendMessage({
-      type: "pull_model",
-      modelName
-    })
-
-    return true
-  }
-
-  const { mutate: pullOllamaModel } = useMutation({
-    mutationFn: pullModel
-  })
-
   return (
     <div>
       <div>
@@ -60,7 +23,11 @@ export const ModelsBody = () => {
           <div className="-ml-4 -mt-2 flex flex-wrap items-center justify-end sm:flex-nowrap">
             <div className="ml-4 mt-2 flex-shrink-0">
               <button
-                onClick={() => setOpen(true)}
+                onClick={() => {
+                  if (segmented === "ollama") {
+                    setOpen(true)
+                  }
+                }}
                 className="inline-flex items-center rounded-md border border-transparent bg-black px-2 py-2 text-md font-medium leading-4 text-white shadow-sm hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:bg-white dark:text-gray-800 dark:hover:bg-gray-100 dark:focus:ring-gray-500 dark:focus:ring-offset-gray-100 disabled:opacity-50">
                 {t("manageModels.addBtn")}
               </button>
@@ -88,28 +55,7 @@ export const ModelsBody = () => {
         {segmented === "ollama" ? <OllamaModelsTable /> : <CustomModelsTable />}
       </div>
 
-      <Modal
+      <AddOllamaModelModal open={open} setOpen={setOpen} />
-        footer={null}
-        open={open}
-        title={t("manageModels.modal.title")}
-        onCancel={() => setOpen(false)}>
-        <form
-          onSubmit={form.onSubmit((values) => pullOllamaModel(values.model))}>
-          <Input
-            {...form.getInputProps("model")}
-            required
-            placeholder={t("manageModels.modal.placeholder")}
-            size="large"
-          />
-
-          <button
-            type="submit"
-            className="inline-flex justify-center w-full text-center mt-4 items-center rounded-md border border-transparent bg-black px-2 py-2 text-sm font-medium leading-4 text-white shadow-sm hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:bg-white dark:text-gray-800 dark:hover:bg-gray-100 dark:focus:ring-gray-500 dark:focus:ring-offset-gray-100 disabled:opacity-50 ">
-            <Download className="w-5 h-5 mr-3" />
-            {t("manageModels.modal.pull")}
-          </button>
-        </form>
-      </Modal>
     </div>
   )
 }

src/db/models.ts

@@ -10,6 +10,7 @@ type Model = {
   name: string
   provider_id: string
   lookup: string
+  model_type: string
   db_type: string
 }
 export const generateID = () => {
@@ -140,7 +141,8 @@ export const createManyModels = async (
       lookup: `${item.model_id}_${item.provider_id}`,
       id: `${item.model_id}_${generateID()}`,
       db_type: "openai_model",
-      name: item.name.replaceAll(/accounts\/[^\/]+\/models\//g, "")
+      name: item.name.replaceAll(/accounts\/[^\/]+\/models\//g, ""),
+      model_type: "chat"
     }
   })
 
@@ -168,7 +170,8 @@ export const createModel = async (
     name,
     provider_id,
     lookup: `${model_id}_${provider_id}`,
-    db_type: "openai_model"
+    db_type: "openai_model",
+    model_type: "chat"
   }
   await db.create(model)
   return model

src/i18n/index.ts

@@ -41,11 +41,6 @@ i18n
             de: de
         },
         fallbackLng: "en",
-        detection: {
-            order: ['localStorage', 'navigator'],
-            caches: ['localStorage']
-        },
-        supportedLngs: supportedLanguages,
         lng: localStorage.getItem("i18nextLng") || "en",
     });