52:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T1f21,"use client"; import * as React from "react"; import { ChevronDown, ExternalLink } from "lucide-react"; import { ClaudeIcon, GrokIcon, OpenAIIcon, PerplexityIcon, V0Icon } from "@/registry/8starlabs-ui/ui/ai-icons"; import { cn } from "@/lib/utils"; import { Button } from "@/registry/8starlabs-ui/blocks/button"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/registry/8starlabs-ui/ui/dropdown-menu"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/registry/8starlabs-ui/ui/tooltip"; export type AiLinkName = "ChatGPT" | "Claude" | "Perplexity" | "Grok" | "v0"; export type OpenInChatLayout = "dropdown" | "horizontal"; export type OpenInChatIcon = React.ElementType>; export type AiLinkData = { baseUrl: string; paramName?: string; icon: OpenInChatIcon; }; export type OpenInChatContextValue = { prompt: string; layout: OpenInChatLayout; }; export type OpenInChatBaseProps = Omit< React.ComponentPropsWithoutRef<"div">, "align" > & { prompt: string; triggerLabel?: React.ReactNode; triggerClassName?: string; contentClassName?: string; align?: React.ComponentProps["align"]; side?: React.ComponentProps["side"]; }; export type OpenInChatDropdownProps = OpenInChatBaseProps & { layout?: "dropdown"; trigger?: React.ReactElement | null; }; export type OpenInChatHorizontalProps = OpenInChatBaseProps & { layout: "horizontal"; trigger?: never; }; export type OpenInChatProps = | OpenInChatDropdownProps | OpenInChatHorizontalProps; export type OpenInChatLinkProps = { baseUrl: string; paramName?: string; icon: OpenInChatIcon; label: string; prompt?: string; className?: string; }; const OpenInChatContext = React.createContext( null ); export const aiLinksDataMap: Record = { ChatGPT: { baseUrl: "https://chatgpt.com/", icon: OpenAIIcon }, Claude: { baseUrl: "https://claude.ai/new", icon: ClaudeIcon }, Perplexity: { baseUrl: "https://www.perplexity.ai/search/new", icon: PerplexityIcon }, Grok: { baseUrl: "https://grok.com/", icon: GrokIcon }, v0: { baseUrl: "https://v0.app/chat", icon: V0Icon } }; export function getPromptUrl( baseUrl: string, prompt: string, paramName: string = "q" ) { const url = new URL(baseUrl); url.searchParams.set(paramName, prompt); return url.toString(); } export function useOpenInChat() { const context = React.useContext(OpenInChatContext); if (!context) { throw new Error("OpenInChat links must be used inside OpenInChat."); } return context; } export default function OpenInChat({ prompt, children, layout = "dropdown", trigger, triggerLabel = "Open in chat", className, triggerClassName, contentClassName, align = "end", side, ...props }: OpenInChatProps) { const contextValue = React.useMemo( () => ({ prompt, layout }), [prompt, layout] ); const items = React.Children.count(children) > 0 ? children : (Object.entries(aiLinksDataMap) as [AiLinkName, AiLinkData][]).map( ([label, dat], idx) => ( ) ); if (layout === "horizontal") { return (

{triggerLabel ? {triggerLabel} : null} {items}

); } return (

{triggerLabel}

); } export function OpenInChatLink({ label, prompt, className, baseUrl, paramName = "q", icon }: OpenInChatLinkProps) { const { prompt: contextPrompt, layout } = useOpenInChat(); const href = getPromptUrl(baseUrl, prompt ?? contextPrompt, paramName); const Icon = icon; if (layout === "horizontal") { return ( ); } return ( Open in {label} } /> ); } export type OpenInChatProviderLinkProps = Pick< OpenInChatLinkProps, "prompt" | "className" >; export function OpenInChatGPT(params: OpenInChatProviderLinkProps) { const dat = aiLinksDataMap.ChatGPT; return ( ); } export function OpenInClaude(params: OpenInChatProviderLinkProps) { const dat = aiLinksDataMap.Claude; return ( ); } export function OpenInPerplexity(params: OpenInChatProviderLinkProps) { const dat = aiLinksDataMap.Perplexity; return ( ); } export function OpenInGrok(params: OpenInChatProviderLinkProps) { const dat = aiLinksDataMap.Grok; return ( ); } export function OpenInV0(params: OpenInChatProviderLinkProps) { const dat = aiLinksDataMap.v0; return ( ); } 55:Tc82,import { forwardRef } from "react"; import { siClaude, siPerplexity, siV0 } from "simple-icons/icons"; type BrandIconProps = React.ComponentProps<"svg">; type SimpleIconData = { path: string; }; function createSimpleIcon(icon: SimpleIconData, displayName: string) { const Component = forwardRef((props, ref) => ( )); Component.displayName = displayName; return Component; } export const OpenAIIcon = forwardRef( (props, ref) => ( ) ); export const ClaudeIcon = createSimpleIcon(siClaude, "Claude Icon"); export const PerplexityIcon = createSimpleIcon(siPerplexity, "Perplexity Icon"); export const V0Icon = createSimpleIcon(siV0, "v0 Icon"); export const GrokIcon = forwardRef( (props, ref) => ( ) ); 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","simple-icons",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/simple-icons","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"simple-icons"}]]}]}]]}],["$","$L52",null,{"namespace":"@8starlabs-ui","registryDependencies":["https://ui.8starlabs.com/r/button.json","https://ui.8starlabs.com/r/dropdown-menu.json","https://ui.8starlabs.com/r/tooltip.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/8starlabs-ui/blocks/open-in-chat.tsx","content":"$54","type":"registry:ui","target":"components/8starlabs-ui/open-in-chat.tsx"},{"path":"registry/8starlabs-ui/ui/ai-icons.tsx","content":"$55","type":"registry:ui","target":"components/8starlabs-ui/ai-icons.tsx"}],"className":"h-[70svh] min-h-80"}]]}]