From 49fee3a175d05bcf9bb3f486c39af0e5fbe80f20 Mon Sep 17 00:00:00 2001
From: Emt-lin <41323133+Emt-lin@users.noreply.github.com>
Date: Thu, 23 Jan 2025 06:48:36 +0800
Subject: [PATCH] feat: Optimize Embedding model setting UX. (#1076)

---
 src/settings/v2/components/BasicSettings.tsx | 52 ++++++++++++++-
 src/settings/v2/components/ModelTable.tsx    | 66 +++++++++++---------
 2 files changed, 87 insertions(+), 31 deletions(-)

diff --git a/src/settings/v2/components/BasicSettings.tsx b/src/settings/v2/components/BasicSettings.tsx
index 03f3b3bd..b2639e6f 100644
--- a/src/settings/v2/components/BasicSettings.tsx
+++ b/src/settings/v2/components/BasicSettings.tsx
@@ -238,11 +238,59 @@ const BasicSettings: React.FC<BasicSettingsProps> = ({ indexVaultToVectorStore }
           <SettingItem
             type="select"
             title="Embedding Model"
-            description="Select the Embedding model to use"
+            description={
+              <div className="space-y-2">
+                <div className="flex items-center gap-1.5">
+                  <span className="leading-none font-medium text-accent">
+                    Core Feature: Powers Semantic Search & QA
+                  </span>
+                  <Popover
+                    open={openPopoverIds.has("embedding-model-help")}
+                    onOpenChange={(open) => {
+                      if (open) {
+                        handlePopoverOpen("embedding-model-help");
+                      } else {
+                        handlePopoverClose("embedding-model-help");
+                      }
+                    }}
+                  >
+                    <PopoverTrigger asChild>
+                      <HelpCircle
+                        className="h-5 w-5 sm:h-4 sm:w-4 cursor-pointer text-muted hover:text-accent translate-y-[1px]"
+                        onMouseEnter={() => handlePopoverOpen("embedding-model-help")}
+                        onMouseLeave={() => handlePopoverClose("embedding-model-help")}
+                      />
+                    </PopoverTrigger>
+                    <PopoverContent
+                      container={modalContainer}
+                      className="w-[90vw] max-w-[400px] p-4 bg-primary border border-solid border-border shadow-sm"
+                      side="bottom"
+                      align="center"
+                      sideOffset={5}
+                      onMouseEnter={() => handlePopoverOpen("embedding-model-help")}
+                      onMouseLeave={() => handlePopoverClose("embedding-model-help")}
+                    >
+                      <div className="space-y-2">
+                        <p className="text-sm text-muted mb-3">
+                          This model converts text into vector representations, essential for
+                          semantic search and QA functionality.
+                        </p>
+                        <p className="text-sm font-medium">Changing the embedding model will:</p>
+                        <ul className="text-xs text-muted list-disc pl-4 space-y-1">
+                          <li>Require rebuilding your vault&#39;s vector index</li>
+                          <li>Affect semantic search quality</li>
+                          <li>Impact QA feature performance</li>
+                        </ul>
+                      </div>
+                    </PopoverContent>
+                  </Popover>
+                </div>
+              </div>
+            }
             value={settings.embeddingModelKey}
             onChange={handleSetDefaultEmbeddingModel}
             options={settings.activeEmbeddingModels
-              .filter((m) => m.enabled)
+              // .filter((m) => m.enabled)
               .map((model) => ({
                 label: `${model.name} (${getProviderLabel(model.provider)})`,
                 value: getModelKeyFromModel(model),
diff --git a/src/settings/v2/components/ModelTable.tsx b/src/settings/v2/components/ModelTable.tsx
index f7988695..e991d6e7 100644
--- a/src/settings/v2/components/ModelTable.tsx
+++ b/src/settings/v2/components/ModelTable.tsx
@@ -68,7 +68,7 @@ const ModelCard: React.FC<{
                 <Pencil className="h-4 w-4" />
               </Button>
             )}
-            {onDelete && (
+            {onDelete && !model.core && (
               <Button
                 variant="ghost"
                 size="icon"
@@ -91,15 +91,17 @@ const ModelCard: React.FC<{
       >
         <CardContent className="p-3 pt-0">
           <div className="flex justify-around">
-            <div className="flex items-center gap-2">
-              <span className="text-sm">Enabled</span>
-              <Checkbox
-                checked={model.enabled}
-                onCheckedChange={(checked: boolean) =>
-                  onUpdateModel({ ...model, enabled: checked })
-                }
-              />
-            </div>
+            {!model.isEmbeddingModel && (
+              <div className="flex items-center gap-2">
+                <span className="text-sm">Enabled</span>
+                <Checkbox
+                  checked={model.enabled}
+                  onCheckedChange={(checked: boolean) =>
+                    onUpdateModel({ ...model, enabled: checked })
+                  }
+                />
+              </div>
+            )}
             <div className="flex items-center gap-2">
               <span className="text-sm">CORS</span>
               <Checkbox
@@ -124,6 +126,8 @@ export const ModelTable: React.FC<ModelTableProps> = ({
   onUpdateModel,
   title,
 }) => {
+  const isEmbeddingModel = models.length > 0 && models[0].isEmbeddingModel;
+
   return (
     <div className="mb-4">
       {/* Desktop View */}
@@ -133,7 +137,7 @@ export const ModelTable: React.FC<ModelTableProps> = ({
             <TableRow>
               <TableHead>Model</TableHead>
               <TableHead>Provider</TableHead>
-              <TableHead className="text-center">Enable</TableHead>
+              {!isEmbeddingModel && <TableHead className="text-center">Enable</TableHead>}
               <TableHead className="text-center">CORS</TableHead>
               <TableHead className="w-[100px] text-center">Actions</TableHead>
             </TableRow>
@@ -146,16 +150,18 @@ export const ModelTable: React.FC<ModelTableProps> = ({
               >
                 <TableCell>{model.name}</TableCell>
                 <TableCell>{getProviderLabel(model.provider)}</TableCell>
-                <TableCell className="text-center">
-                  <Checkbox
-                    id={`${getModelKeyFromModel(model)}-enabled`}
-                    checked={model.enabled}
-                    onCheckedChange={(checked: boolean) =>
-                      onUpdateModel({ ...model, enabled: checked })
-                    }
-                    className="mx-auto"
-                  />
-                </TableCell>
+                {!isEmbeddingModel && (
+                  <TableCell className="text-center">
+                    <Checkbox
+                      id={`${getModelKeyFromModel(model)}-enabled`}
+                      checked={model.enabled}
+                      onCheckedChange={(checked: boolean) =>
+                        onUpdateModel({ ...model, enabled: checked })
+                      }
+                      className="mx-auto"
+                    />
+                  </TableCell>
+                )}
                 <TableCell className="text-center">
                   <Checkbox
                     id={`${getModelKeyFromModel(model)}-enableCors`}
@@ -178,14 +184,16 @@ export const ModelTable: React.FC<ModelTableProps> = ({
                         <Pencil className="h-4 w-4" />
                       </Button>
                     )}
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      onClick={() => onDelete(getModelKeyFromModel(model))}
-                      className="shadow-sm hover:shadow-md transition-shadow"
-                    >
-                      <Trash2 className="h-4 w-4" />
-                    </Button>
+                    {!model.core && (
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        onClick={() => onDelete(getModelKeyFromModel(model))}
+                        className="shadow-sm hover:shadow-md transition-shadow"
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    )}
                   </div>
                 </TableCell>
               </TableRow>