obsidian-plugin/logancyang_obsidian-copilot
1
0
Fork 0
mirror of https://github.com/logancyang/obsidian-copilot.git synced 2026-07-22 07:50:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: Optimize Embedding model setting UX. (#1076)

Browse source
This commit is contained in:
Emt-lin 2025-01-23 06:48:36 +08:00 committed by GitHub
parent d888b00add
commit 49fee3a175
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 87 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
src/settings/v2/components/BasicSettings.tsx
View file

@ -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),

66
src/settings/v2/components/ModelTable.tsx
View file

@ -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>