102 lines
3.0 KiB
TypeScript
102 lines
3.0 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
import { type SourceDocumentUIPart, type SourceUrlUIPart } from "ai"
|
|
import { cn } from "cn"
|
|
|
|
import { Badge } from "@/registry/bases/radix/ui/badge"
|
|
import { IconPlaceholder } from "@/app/(app)/create/components/icon-placeholder"
|
|
|
|
type SourcePart = SourceDocumentUIPart | SourceUrlUIPart
|
|
|
|
function getHostname(url: string) {
|
|
try {
|
|
return new URL(url).hostname.replace(/^www\./, "")
|
|
} catch {
|
|
return url
|
|
}
|
|
}
|
|
|
|
export function PartSource({
|
|
part,
|
|
className,
|
|
}: { part: SourcePart } & Omit<React.ComponentProps<"div">, "part">) {
|
|
if (part.type === "source-url") {
|
|
return (
|
|
<a
|
|
data-slot="part-source"
|
|
data-type={part.type}
|
|
href={part.url}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className={cn(
|
|
"flex w-full max-w-full min-w-0 items-center gap-2 rounded-lg border bg-muted/40 p-3 text-sm transition-colors hover:bg-muted",
|
|
className
|
|
)}
|
|
>
|
|
<span className="flex size-8 shrink-0 items-center justify-center rounded-md bg-background text-muted-foreground">
|
|
<IconPlaceholder
|
|
lucide="ExternalLinkIcon"
|
|
tabler="IconExternalLink"
|
|
hugeicons="LinkSquare02Icon"
|
|
phosphor="ArrowSquareOutIcon"
|
|
remixicon="RiExternalLinkLine"
|
|
className="size-4"
|
|
/>
|
|
</span>
|
|
<span className="min-w-0 flex-1">
|
|
<span className="block truncate font-medium">
|
|
{part.title ?? part.url}
|
|
</span>
|
|
<span className="block truncate text-xs text-muted-foreground">
|
|
{getHostname(part.url)}
|
|
</span>
|
|
</span>
|
|
<Badge variant="outline" className="shrink-0">
|
|
URL
|
|
</Badge>
|
|
</a>
|
|
)
|
|
}
|
|
|
|
if (part.type === "source-document") {
|
|
return (
|
|
<div
|
|
data-slot="part-source"
|
|
data-type={part.type}
|
|
className={cn(
|
|
"flex w-full max-w-full min-w-0 items-start gap-2 rounded-lg border bg-muted/40 p-3 text-sm",
|
|
className
|
|
)}
|
|
>
|
|
<span className="flex size-8 shrink-0 items-center justify-center rounded-md bg-background text-muted-foreground">
|
|
<IconPlaceholder
|
|
lucide="FileSearchIcon"
|
|
tabler="IconFileSearch"
|
|
hugeicons="FileSearchIcon"
|
|
phosphor="FileSearchIcon"
|
|
remixicon="RiFileSearchLine"
|
|
className="size-4"
|
|
/>
|
|
</span>
|
|
<span className="min-w-0 flex-1">
|
|
<span className="block truncate font-medium">
|
|
{part.title ?? part.filename ?? "Document source"}
|
|
</span>
|
|
<span className="mt-0.5 block truncate text-xs text-muted-foreground">
|
|
{[part.filename, part.mediaType].filter(Boolean).join(" / ")}
|
|
</span>
|
|
<span className="mt-2 block text-xs text-muted-foreground">
|
|
Source ID: {part.sourceId}
|
|
</span>
|
|
</span>
|
|
<Badge variant="outline" className="shrink-0">
|
|
Document
|
|
</Badge>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return null
|
|
}
|