Browse Source

feat(04-02): add external link to model page on provider website

- Add link icon next to model ID
- Opens Replicate or fal.ai model page in new tab
- Click doesn't trigger model selection (stopPropagation)
handoff-20260429-1057
shrimbly 6 months ago
parent
commit
59a238a21e
  1. 38
      src/components/modals/ModelSearchDialog.tsx

38
src/components/modals/ModelSearchDialog.tsx

@ -227,6 +227,16 @@ export function ModelSearchDialog({
}
};
// Get model page URL for the provider's website
const getModelUrl = (model: ProviderModel): string => {
if (model.provider === "replicate") {
return `https://replicate.com/${model.id}`;
} else if (model.provider === "fal") {
return `https://fal.ai/models/${model.id}`;
}
return "#";
};
// Get capability badges - show all capabilities to differentiate similar models
const getCapabilityBadges = (capabilities: ModelCapability[]) => {
const badges: React.ReactNode[] = [];
@ -478,9 +488,33 @@ export function ModelSearchDialog({
{model.name}
</div>
{/* Model ID - helps differentiate similar models */}
<div className="text-[10px] text-neutral-500 truncate mt-0.5 font-mono">
{/* Model ID with link to provider page */}
<div className="flex items-center gap-1.5 mt-0.5">
<span className="text-[10px] text-neutral-500 truncate font-mono">
{model.id}
</span>
<a
href={getModelUrl(model)}
target="_blank"
rel="noopener noreferrer"
onClick={(e) => e.stopPropagation()}
className="text-neutral-500 hover:text-neutral-300 transition-colors flex-shrink-0"
title={`View on ${model.provider === "fal" ? "fal.ai" : "Replicate"}`}
>
<svg
className="w-3 h-3"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
/>
</svg>
</a>
</div>
{/* Badges row */}

Loading…
Cancel
Save