Sources

"use client";import { memo, useState, type ComponentProps } from "react";import { FileTextIcon } from "lucide-react";import type { VariantProps } from "class-variance-authority";import type { SourceMessagePartComponent } from "@assistant-ui/react";import { cn } from "@/lib/utils";import { Badge, badgeVariants } from "./badge";const extractDomain = (url: string): string => {  try {    return new URL(url).hostname.replace(/^www\./, "");  } catch {    return url;  }};const defaultFaviconUrl = (domain: string) =>  `https://icons.duckduckgo.com/ip3/${domain}.ico`;function SourceIcon({  url,  className,  faviconUrl = defaultFaviconUrl,  ...props}: ComponentProps<"span"> & {  url: string;  faviconUrl?: (domain: string) => string;}) {  const domain = extractDomain(url);  const src = faviconUrl(domain);  const [errorSrc, setErrorSrc] = useState<string | undefined>(undefined);  const hasError = errorSrc === src;  if (hasError) {    return (      <span        data-slot="source-icon-fallback"        className={cn(          "bg-muted flex size-3 shrink-0 items-center justify-center rounded-sm text-[10px] font-medium",          className,        )}        {...props}      >        {domain.charAt(0).toUpperCase() || "?"}      </span>    );  }  return (    <img      data-slot="source-icon"      src={src}      alt=""      className={cn("size-3 shrink-0 rounded-sm", className)}      onError={() => setErrorSrc(src)}      {...(props as ComponentProps<"img">)}    />  );}function SourceTitle({ className, ...props }: ComponentProps<"span">) {  return (    <span      data-slot="source-title"      className={cn("max-w-37.5 truncate", className)}      {...props}    />  );}function DocumentSourceIcon({ className, ...props }: ComponentProps<"span">) {  return (    <span      data-slot="source-document-icon"      className={cn(        "text-muted-foreground flex size-3 shrink-0 items-center justify-center",        className,      )}      {...props}    >      <FileTextIcon className="size-3" />    </span>  );}export type SourceProps = ComponentProps<"a"> &  VariantProps<typeof badgeVariants>;function Source({  className,  variant,  size,  target = "_blank",  rel = "noopener noreferrer",  ...props}: SourceProps) {  return (    <a      data-slot="source"      className={cn(        badgeVariants({ variant, size }),        "focus-visible:border-ring focus-visible:ring-ring/50 cursor-pointer outline-none focus-visible:ring-[3px]",        className,      )}      target={target}      rel={rel}      {...props}    />  );}const SourcesImpl: SourceMessagePartComponent = (part) => {  if (part.sourceType === "url" && part.url) {    const domain = extractDomain(part.url);    const displayTitle = part.title || domain;    return (      <Source href={part.url}>        <SourceIcon url={part.url} />        <SourceTitle>{displayTitle}</SourceTitle>      </Source>    );  }  if (part.sourceType === "document") {    return (      <Badge        variant="secondary"        className="focus-visible:border-ring focus-visible:ring-ring/50 outline-none focus-visible:ring-[3px]"      >        <span data-slot="source" className="inline-flex items-center gap-1.5">          <DocumentSourceIcon />          <SourceTitle>{part.title}</SourceTitle>        </span>      </Badge>    );  }  return null;};const Sources = memo(SourcesImpl) as unknown as SourceMessagePartComponent & {  Root: typeof Source;  Icon: typeof SourceIcon;  Title: typeof SourceTitle;};Sources.displayName = "Sources";Sources.Root = Source;Sources.Icon = SourceIcon;Sources.Title = SourceTitle;export {  Sources,  Source,  SourceIcon,  SourceTitle,  badgeVariants as sourceVariants,};

"use client";import type { ComponentProps } from "react";import { mergeProps } from "@base-ui/react/merge-props";import { useRender } from "@base-ui/react/use-render";import { cva, type VariantProps } from "class-variance-authority";import { cn } from "@/lib/utils";const badgeVariants = cva(  "inline-flex items-center justify-center gap-1 rounded-md text-xs font-medium transition-colors [&_svg]:size-3 [&_svg]:shrink-0",  {    variants: {      variant: {        outline:          "border-input text-muted-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground border bg-transparent",        secondary:          "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/80",        muted:          "bg-muted text-muted-foreground [a&]:hover:bg-muted/80 [a&]:hover:text-foreground",        ghost:          "text-muted-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground bg-transparent",        info: "bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300 [a&]:hover:bg-blue-100/80",        warning:          "bg-amber-100 text-amber-700 dark:bg-amber-900/50 dark:text-amber-300 [a&]:hover:bg-amber-100/80",        success:          "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/50 dark:text-emerald-300 [a&]:hover:bg-emerald-100/80",        destructive:          "bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-300 [a&]:hover:bg-red-100/80",      },      size: {        sm: "px-1.5 py-0.5",        default: "px-2 py-1",        lg: "px-2.5 py-1.5 text-sm",      },    },    defaultVariants: {      variant: "outline",      size: "default",    },  },);export type BadgeProps = useRender.ComponentProps<"span"> &  VariantProps<typeof badgeVariants>;function Badge({ className, variant, size, render, ...props }: BadgeProps) {  const dataProps = {    "data-slot": "badge",    "data-variant": variant,    "data-size": size,  } as ComponentProps<"span">;  return useRender({    defaultTagName: "span",    props: mergeProps<"span">(      dataProps,      {        className: cn(badgeVariants({ variant, size }), className),      },      props,    ),    render,  });}export { Badge, badgeVariants };