ModelItem() — ui Function Reference

Architecture documentation for the ModelItem() function in model-selector.tsx from the ui codebase.

Function tsx ApplicationExhibition PlaygroundAI

Entity Profile

ApplicationExhibition→ PlaygroundAI→ ModelItem() — ui Function Reference

Dependency Diagram

graph TD
  6f1a453f_6fce_0e91_6535_b7ec0d143559["ModelItem()"]
  2675e614_cc7d_cd7d_6072_fe38d59c01af["model-selector.tsx"]
  6f1a453f_6fce_0e91_6535_b7ec0d143559 -->|defined in| 2675e614_cc7d_cd7d_6072_fe38d59c01af
  style 6f1a453f_6fce_0e91_6535_b7ec0d143559 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(app)/examples/playground/components/model-selector.tsx lines 135–163

function ModelItem({ model, isSelected, onSelect, onPeek }: ModelItemProps) {
  const ref = React.useRef<HTMLDivElement>(null)

  useMutationObserver(ref, (mutations) => {
    mutations.forEach((mutation) => {
      if (
        mutation.type === "attributes" &&
        mutation.attributeName === "aria-selected" &&
        ref.current?.getAttribute("aria-selected") === "true"
      ) {
        onPeek(model)
      }
    })
  })

  return (
    <CommandItem
      key={model.id}
      onSelect={onSelect}
      ref={ref}
      className="data-[selected=true]:bg-primary data-[selected=true]:text-primary-foreground"
    >
      {model.name}
      <Check
        className={cn("ml-auto", isSelected ? "opacity-100" : "opacity-0")}
      />
    </CommandItem>
  )
}