enhancement: remote engine model (#4560)

* enhancement: add option delete model remote engine

* enhancement: add menu delete remote engine models

extensions/engine-management-extension/rolldown.config.mjs

@@ -16,7 +16,7 @@ export default defineConfig([
       CORTEX_ENGINE_VERSION: JSON.stringify('v0.1.49'),
       DEFAULT_REMOTE_ENGINES: JSON.stringify(engines),
       DEFAULT_REMOTE_MODELS: JSON.stringify(models),
-      DEFAULT_REQUEST_PAYLOAD_TRANSFORM: JSON.stringify('{{ tojson(value) }}'),
+      DEFAULT_REQUEST_PAYLOAD_TRANSFORM: JSON.stringify(`{ {% set first = true %} {% for key, value in input_request %} {% if key == "messages" or key == "model" or key == "temperature" or key == "store" or key == "max_tokens" or key == "stream" or key == "presence_penalty" or key == "metadata" or key == "frequency_penalty" or key == "tools" or key == "tool_choice" or key == "logprobs" or key == "top_logprobs" or key == "logit_bias" or key == "n" or key == "modalities" or key == "prediction" or key == "response_format" or key == "service_tier" or key == "seed" or key == "stop" or key == "stream_options" or key == "top_p" or key == "parallel_tool_calls" or key == "user" %} {% if not first %},{% endif %} "{{ key }}": {{ tojson(value) }} {% set first = false %} {% endif %} {% endfor %} }`),
       DEFAULT_RESPONSE_BODY_TRANSFORM: JSON.stringify(
         '{ {% set first = true %} {% for key, value in input_request %} {% if key == "choices" or key == "created" or key == "model" or key == "service_tier" or key == "stream" or key == "object" or key == "usage" %} {% if not first %},{% endif %} "{{ key }}": {{ tojson(value) }} {% set first = false %} {% endif %} {% endfor %} }'
       ),

web/screens/Settings/Engines/DeleteEngineVariant.tsx

@@ -25,7 +25,7 @@ const DeleteEngineVariant = ({
 
   return (
     <Modal
-      title={<span>Delete {variant.name}</span>}
+      title={<span>Delete Variant</span>}
       open={open}
       onOpenChange={() => setOpen(!open)}
       trigger={
@@ -39,7 +39,8 @@ const DeleteEngineVariant = ({
       content={
         <div>
           <p className="text-[hsla(var(--text-secondary))]">
-            Are you sure you want to delete this variant?
+            Are you sure you want to delete {variant.name}? This action cannot
+            be undone.
           </p>
           <div className="mt-4 flex justify-end gap-x-2">
             <ModalClose

web/screens/Settings/Engines/ModalDeleteModel.tsx

@@ -0,0 +1,62 @@
+import { memo, useState } from 'react'
+
+import { Model } from '@janhq/core'
+import { Button, Modal, ModalClose } from '@janhq/joi'
+
+import { Trash2Icon } from 'lucide-react'
+
+import useDeleteModel from '@/hooks/useDeleteModel'
+
+const ModalDeleteModel = ({ model }: { model: Model }) => {
+  const [open, setOpen] = useState(false)
+
+  const { deleteModel } = useDeleteModel()
+
+  return (
+    <Modal
+      title={<span>Delete Model</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 {model.id}? 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={() => {
+                  deleteModel(model)
+                }}
+                autoFocus
+              >
+                Yes
+              </Button>
+            </ModalClose>
+          </div>
+        </div>
+      }
+    />
+  )
+}
+
+export default memo(ModalDeleteModel)

web/screens/Settings/Engines/RemoteEngineSettings.tsx

@@ -28,6 +28,7 @@ import { updateEngine, useGetEngines } from '@/hooks/useEngineManagement'
 import { getTitleByEngine } from '@/utils/modelEngine'
 
 import ModalAddModel from './ModalAddModel'
+import ModalDeleteModel from './ModalDeleteModel'
 
 import { downloadedModelsAtom } from '@/helpers/atoms/Model.atom'
 
@@ -218,6 +219,7 @@ const RemoteEngineSettings = ({
                               >
                                 {item.name}
                               </h6>
+                              <ModalDeleteModel model={item} />
                             </div>
                           </div>
                         </div>