feat: add model management UI

This commit introduces a new UI for managing models within the OpenAI integration. This UI allows users to view, add, and delete OpenAI models associated with their OpenAI providers. It includes functionality to fetch and refresh model lists, as well as to search for specific models. These changes enhance the user experience by offering greater control over their OpenAI model interactions.

This commit also includes improvements to the existing OpenAI configuration UI, enabling users to seamlessly manage multiple OpenAI providers and associated models.

src/db/models.ts

@@ -0,0 +1,176 @@
+import { getOpenAIConfigById as providerInfo } from "./openai"
+
+type Model = {
+  id: string
+  model_id: string
+  name: string
+  provider_id: string
+  lookup: string
+  db_type: string
+}
+export const generateID = () => {
+  return "model-xxxx-xxxx-xxx-xxxx".replace(/[x]/g, () => {
+    const r = Math.floor(Math.random() * 16)
+    return r.toString(16)
+  })
+}
+
+export const removeModelPrefix = (id: string) => {
+  return id.replace(/^model-/, "")
+}
+export class ModelDb {
+  db: chrome.storage.StorageArea
+
+  constructor() {
+    this.db = chrome.storage.local
+  }
+
+  getAll = async (): Promise<Model[]> => {
+    return new Promise((resolve, reject) => {
+      this.db.get(null, (result) => {
+        if (chrome.runtime.lastError) {
+          reject(chrome.runtime.lastError)
+        } else {
+          const data = Object.keys(result).map((key) => result[key])
+          resolve(data)
+        }
+      })
+    })
+  }
+
+  create = async (model: Model): Promise<void> => {
+    return new Promise((resolve, reject) => {
+      this.db.set({ [model.id]: model }, () => {
+        if (chrome.runtime.lastError) {
+          reject(chrome.runtime.lastError)
+        } else {
+          resolve()
+        }
+      })
+    })
+  }
+
+  getById = async (id: string): Promise<Model> => {
+    return new Promise((resolve, reject) => {
+      this.db.get(id, (result) => {
+        if (chrome.runtime.lastError) {
+          reject(chrome.runtime.lastError)
+        } else {
+          resolve(result[id])
+        }
+      })
+    })
+  }
+
+  update = async (model: Model): Promise<void> => {
+    return new Promise((resolve, reject) => {
+      this.db.set({ [model.id]: model }, () => {
+        if (chrome.runtime.lastError) {
+          reject(chrome.runtime.lastError)
+        } else {
+          resolve()
+        }
+      })
+    })
+  }
+
+  delete = async (id: string): Promise<void> => {
+    return new Promise((resolve, reject) => {
+      this.db.remove(id, () => {
+        if (chrome.runtime.lastError) {
+          reject(chrome.runtime.lastError)
+        } else {
+          resolve()
+        }
+      })
+    })
+  }
+
+  deleteAll = async (): Promise<void> => {
+    return new Promise((resolve, reject) => {
+      this.db.clear(() => {
+        if (chrome.runtime.lastError) {
+          reject(chrome.runtime.lastError)
+        } else {
+          resolve()
+        }
+      })
+    })
+  }
+}
+
+export const createManyModels = async (
+  data: { model_id: string; name: string; provider_id: string }[]
+) => {
+  const db = new ModelDb()
+
+  const models = data.map((item) => {
+    return {
+      ...item,
+      lookup: `${item.model_id}_${item.provider_id}`,
+      id: `${item.model_id}_${generateID()}`,
+      db_type: "openai_model"
+    }
+  })
+
+  for (const model of models) {
+    const isExist = await isLookupExist(model.lookup)
+
+    if (isExist) {
+      continue
+    }
+
+    await db.create(model)
+  }
+}
+
+export const createModel = async (
+  model_id: string,
+  name: string,
+  provider_id: string
+) => {
+  const db = new ModelDb()
+  const id = generateID()
+  const model: Model = {
+    id: `${model_id}_${id}`,
+    model_id,
+    name,
+    provider_id,
+    lookup: `${model_id}_${provider_id}`,
+    db_type: "openai_model"
+  }
+  await db.create(model)
+  return model
+}
+
+export const getModelInfo = async (id: string) => {
+  const db = new ModelDb()
+  const model = await db.getById(id)
+  return model
+}
+
+export const getAllCustomModels = async () => {
+  const db = new ModelDb()
+  const models = (await db.getAll()).filter(
+    (model) => model.db_type === "openai_model"
+  )
+  const modelsWithProvider = await Promise.all(
+    models.map(async (model) => {
+      const provider = await providerInfo(model.provider_id)
+      return { ...model, provider }
+    })
+  )
+  return modelsWithProvider
+}
+
+export const deleteModel = async (id: string) => {
+  const db = new ModelDb()
+  await db.delete(id)
+}
+
+export const isLookupExist = async (lookup: string) => {
+  const db = new ModelDb()
+  const models = await db.getAll()
+  const model = models.find((model) => model.lookup === lookup)
+  return model ? true : false
+}

src/db/openai.ts

@@ -1,9 +1,12 @@
+import { cleanUrl } from "@/libs/clean-url"
+
 type OpenAIModelConfig = {
     id: string
     name: string
     baseUrl: string
     apiKey?: string
     createdAt: number
+    db_type: string
 }
 export const generateID = () => {
     return "openai-xxxx-xxx-xxxx".replace(/[x]/g, () => {
@@ -95,9 +98,10 @@ export const addOpenAICofig = async ({ name, baseUrl, apiKey }: { name: string,
     const config: OpenAIModelConfig = {
         id,
         name,
-        baseUrl,
+        baseUrl: cleanUrl(baseUrl),
         apiKey,
-        createdAt: Date.now()
+        createdAt: Date.now(),
+        db_type: "openai"
     }
     await openaiDb.create(config)
     return id
@@ -107,7 +111,7 @@ export const addOpenAICofig = async ({ name, baseUrl, apiKey }: { name: string,
 export const getAllOpenAIConfig = async () => {
     const openaiDb = new OpenAIModelDb()
     const configs = await openaiDb.getAll()
-    return configs
+    return configs.filter(config => config.db_type === "openai")
 }
 
 export const updateOpenAIConfig = async ({ id, name, baseUrl, apiKey }: { id: string, name: string, baseUrl: string, apiKey: string }) => {
@@ -115,9 +119,10 @@ export const updateOpenAIConfig = async ({ id, name, baseUrl, apiKey }: { id: st
     const config: OpenAIModelConfig = {
         id,
         name,
-        baseUrl,
+        baseUrl: cleanUrl(baseUrl),
         apiKey,
-        createdAt: Date.now()
+        createdAt: Date.now(),
+        db_type: "openai"
     }
 
     await openaiDb.update(config)
@@ -137,10 +142,18 @@ export const updateOpenAIConfigApiKey = async (id: string, { name, baseUrl, apiK
     const config: OpenAIModelConfig = {
         id,
         name,
-        baseUrl,
+        baseUrl: cleanUrl(baseUrl),
         apiKey,
-        createdAt: Date.now()
+        createdAt: Date.now(),
+        db_type: "openai"
     }
 
     await openaiDb.update(config)
+}
+
+
+export const getOpenAIConfigById = async (id: string) => {
+    const openaiDb = new OpenAIModelDb()
+    const config = await openaiDb.getById(id)
+    return config
 }