Spaces:
Running
Running
File size: 2,223 Bytes
7ac3a44 30b1aef 7ac3a44 30b1aef 7ac3a44 30b1aef | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | import React from 'react';
import { Badge, Button } from "../common/index";
export default function ConfigCard({ config, onAdd, isStaged, disabled }) {
const chunkParamEntries = Object.entries(config.chunk_params || {}).slice(0, 3);
const status = config.indexingStatus || "idle";
const statusLabel =
status === "indexing"
? "Indexing..."
: status === "ready"
? "Ready ✅"
: status === "already_exists"
? "Already indexed ✅"
: status === "error"
? "Index failed"
: "Not indexed";
const statusColor =
status === "indexing"
? "orange"
: status === "ready" || status === "already_exists"
? "green"
: status === "error"
? "red"
: "gray";
const canAdd = !disabled && !isStaged && status !== "indexing";
return (
<div className="rounded-2xl border border-gray-200 bg-white p-4 shadow-sm transition-transform duration-200 hover:-translate-y-0.5 hover:shadow-md">
<div className="flex items-start justify-between gap-3">
<div>
<h3 className="text-base font-semibold text-gray-900">{config.name}</h3>
<div className="mt-2 flex flex-wrap gap-2">
<Badge color="blue">top_k: {config.top_k}</Badge>
<Badge color="gray">threshold: {Number(config.threshold).toFixed(2)}</Badge>
<Badge color="orange">{config.chunk_strategy}</Badge>
<Badge color="gray">{config.embedding_model}</Badge>
{chunkParamEntries.map(([key, value]) => (
<Badge key={key} color="gray">
{key}: {Array.isArray(value) ? `[${value.length}]` : String(value)}
</Badge>
))}
<Badge color={statusColor}>{statusLabel}</Badge>
</div>
</div>
<Button
onClick={onAdd}
disabled={!canAdd}
variant={isStaged ? "secondary" : "primary"}
className="whitespace-nowrap"
>
{isStaged ? "Added" : "Add ➕"}
</Button>
</div>
<p className="mt-3 text-xs text-gray-400">
{config.isPreset ? "Preset configuration" : "Custom configuration"}
</p>
</div>
);
}
|