33 lines
1.2 KiB
TypeScript
33 lines
1.2 KiB
TypeScript
import { LoraInfoPopover } from './LoraInfoPopover'
|
|
import type { components } from '../generated/backend-openapi'
|
|
|
|
type Sections = NonNullable<components['schemas']['LoraCatalogItem']['instructions']>
|
|
|
|
export interface SelectedLoraItem {
|
|
name: string
|
|
sections?: Sections
|
|
repoId?: string
|
|
isCommunity?: boolean
|
|
}
|
|
|
|
// The "currently selected LoRA(s)" bar shown above the prompt bar — a name + info popover
|
|
// per item, inline. Used for both the single active IC-LoRA and the list of plain LoRAs.
|
|
export function SelectedLoraInfo({ items }: { items: SelectedLoraItem[] }) {
|
|
if (items.length === 0) return null
|
|
return (
|
|
<div className="mb-2 flex flex-wrap items-center gap-x-4 gap-y-1 rounded-lg border border-zinc-800 bg-zinc-900/80 px-3 py-2 text-[11px] text-zinc-400">
|
|
{items.map((it, i) => (
|
|
<span key={i} className="inline-flex items-center gap-1">
|
|
<span className="font-semibold text-zinc-300">{it.name}</span>
|
|
<LoraInfoPopover
|
|
sections={it.sections ?? []}
|
|
name={it.name}
|
|
repoId={it.repoId}
|
|
isCommunity={it.isCommunity}
|
|
/>
|
|
</span>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|