chore: delete custom engine (#4581)

* chore: delete custom engine

* chore: fix linter

web/screens/Settings/Engines/ModalDeleteCustomEngine.tsx

@@ -0,0 +1,60 @@
+import { memo, useState } from 'react'
+
+import { InferenceEngine } from '@janhq/core'
+import { Button, Modal, ModalClose } from '@janhq/joi'
+
+import { Trash2Icon } from 'lucide-react'
+
+import { uninstallEngine } from '@/hooks/useEngineManagement'
+
+const ModalDeleteCustomEngine = ({ engine }: { engine: InferenceEngine }) => {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <Modal
+      title={<span>Delete Engine</span>}
+      open={open}
+      onOpenChange={() => setOpen(!open)}
+      trigger={
+        <Button theme="icon" variant="outline" onClick={() => setOpen(!open)}>
+          <Trash2Icon
+            size={14}
+            className="text-[hsla(var(--text-secondary))]"
+          />
+        </Button>
+      }
+      content={
+        <div>
+          <p className="text-[hsla(var(--text-secondary))]">
+            Are you sure you want to delete {engine}? This action cannot be
+            undone.
+          </p>
+          <div className="mt-4 flex justify-end gap-x-2">
+            <ModalClose
+              asChild
+              onClick={(e) => {
+                setOpen(!open)
+                e.stopPropagation()
+              }}
+            >
+              <Button theme="ghost">No</Button>
+            </ModalClose>
+            <ModalClose asChild>
+              <Button
+                theme="destructive"
+                onClick={() => {
+                  uninstallEngine(engine, {})
+                }}
+                autoFocus
+              >
+                Yes
+              </Button>
+            </ModalClose>
+          </div>
+        </div>
+      }
+    />
+  )
+}
+
+export default memo(ModalDeleteCustomEngine)

web/screens/Settings/Engines/RemoteEngineItem.tsx

@@ -8,6 +8,10 @@ import { SettingsIcon } from 'lucide-react'
 
 import { getTitleByEngine } from '@/utils/modelEngine'
 
+import { getLogoEngine } from '@/utils/modelEngine'
+
+import ModalDeleteCustomEngine from './ModalDeleteCustomEngine'
+
 import { showSettingActiveRemoteEngineAtom } from '@/helpers/atoms/Extension.atom'
 import { selectedSettingAtom } from '@/helpers/atoms/Setting.atom'
 
@@ -18,7 +22,7 @@ const RemoteEngineItems = ({
   values: EngineConfig[]
 }) => {
   const setSelectedSetting = useSetAtom(selectedSettingAtom)
-
+  const customEngineLogo = getLogoEngine(engine)
   const [showSettingActiveRemoteEngine, setShowSettingActiveRemoteEngineAtom] =
     useAtom(showSettingActiveRemoteEngineAtom)
 
@@ -60,6 +64,7 @@ const RemoteEngineItems = ({
               checked={!showSettingActiveRemoteEngine.includes(engine)}
               onChange={() => onSwitchChange(engine)}
             />
+            {!customEngineLogo && <ModalDeleteCustomEngine engine={engine} />}
             <Button
               theme="icon"
               variant="outline"

web/screens/Settings/Engines/RemoteEngineSettings.tsx

@@ -27,6 +27,8 @@ import { updateEngine, useGetEngines } from '@/hooks/useEngineManagement'
 
 import { getTitleByEngine } from '@/utils/modelEngine'
 
+import { getLogoEngine } from '@/utils/modelEngine'
+
 import ModalAddModel from './ModalAddModel'
 import ModalDeleteModel from './ModalDeleteModel'
 
@@ -43,6 +45,8 @@ const RemoteEngineSettings = ({
   const remoteModels = downloadedModels.filter((e) => e.engine === name)
   const [isActiveAdvanceSetting, setisActiveAdvanceSetting] = useState(false)
 
+  const customEngineLogo = getLogoEngine(name)
+
   const engine =
     engines &&
     Object.entries(engines)
@@ -134,17 +138,25 @@ const RemoteEngineSettings = ({
                 <div className="w-full sm:w-3/4">
                   <h6 className="line-clamp-1 font-semibold">API Key</h6>
                   <p className="mt-1 text-[hsla(var(--text-secondary))]">
-                    Enter your authentication key to activate this engine.
-                    {engine.engine && engine.url && (
+                    {!customEngineLogo ? (
                       <span>
-                        &nbsp;Get your API key from{' '}
-                        <a
-                          target="_blank"
-                          href={engine.url}
-                          className="text-[hsla(var(--app-link))]"
-                        >
-                          {getTitleByEngine(engine.engine)}.
-                        </a>
+                        Enter your authentication key to activate this engine.{' '}
+                      </span>
+                    ) : (
+                      <span>
+                        Enter your authentication key to activate this engine.
+                        {engine.engine && engine.url && (
+                          <span>
+                            &nbsp;Get your API key from{' '}
+                            <a
+                              target="_blank"
+                              href={engine.url}
+                              className="text-[hsla(var(--app-link))]"
+                            >
+                              {getTitleByEngine(engine.engine)}.
+                            </a>
+                          </span>
+                        )}
                       </span>
                     )}
                   </p>