Open In Chat

1"use client";
2 
3import * as React from "react";
4import { ChevronDown, ExternalLink } from "lucide-react";
5 
6import {
7  ClaudeIcon,
8  GrokIcon,
9  OpenAIIcon,
10  PerplexityIcon,
11  V0Icon
12} from "@/registry/8starlabs-ui/ui/ai-icons";
13import { cn } from "@/lib/utils";
14import { Button } from "@/registry/8starlabs-ui/blocks/button";
15import {
16  DropdownMenu,
17  DropdownMenuContent,
18  DropdownMenuItem,
19  DropdownMenuTrigger
20} from "@/registry/8starlabs-ui/ui/dropdown-menu";
21import {
22  Tooltip,
23  TooltipContent,
24  TooltipProvider,
25  TooltipTrigger
26} from "@/registry/8starlabs-ui/ui/tooltip";
27 
28export type AiLinkName = "ChatGPT" | "Claude" | "Perplexity" | "Grok" | "v0";
29export type OpenInChatLayout = "dropdown" | "horizontal";
30 
31export type OpenInChatIcon = React.ElementType<React.ComponentProps<"svg">>;
32 
33export type AiLinkData = {
34  baseUrl: string;
35  paramName?: string;
36  icon: OpenInChatIcon;
37};
38 
39export type OpenInChatContextValue = {
40  prompt: string;
41  layout: OpenInChatLayout;
42};
43 
44export type OpenInChatBaseProps = Omit<
45  React.ComponentPropsWithoutRef<"div">,
46  "align"
47> & {
48  prompt: string;
49  triggerLabel?: React.ReactNode;
50  triggerClassName?: string;
51  contentClassName?: string;
52  align?: React.ComponentProps<typeof DropdownMenuContent>["align"];
53  side?: React.ComponentProps<typeof DropdownMenuContent>["side"];
54};
55 
56export type OpenInChatDropdownProps = OpenInChatBaseProps & {
57  layout?: "dropdown";
58  trigger?: React.ReactElement | null;
59};
60 
61export type OpenInChatHorizontalProps = OpenInChatBaseProps & {
62  layout: "horizontal";
63  trigger?: never;
64};
65 
66export type OpenInChatProps =
67  | OpenInChatDropdownProps
68  | OpenInChatHorizontalProps;
69 
70export type OpenInChatLinkProps = {
71  baseUrl: string;
72  paramName?: string;
73  icon: OpenInChatIcon;
74  label: string;
75  prompt?: string;
76  className?: string;
77};
78 
79const OpenInChatContext = React.createContext<OpenInChatContextValue | null>(
80  null
81);
82 
83export const aiLinksDataMap: Record<AiLinkName, AiLinkData> = {
84  ChatGPT: {
85    baseUrl: "https://chatgpt.com/",
86    icon: OpenAIIcon
87  },
88  Claude: {
89    baseUrl: "https://claude.ai/new",
90    icon: ClaudeIcon
91  },
92  Perplexity: {
93    baseUrl: "https://www.perplexity.ai/search/new",
94    icon: PerplexityIcon
95  },
96  Grok: {
97    baseUrl: "https://grok.com/",
98    icon: GrokIcon
99  },
100  v0: {
101    baseUrl: "https://v0.app/chat",
102    icon: V0Icon
103  }
104};
105 
106export function getPromptUrl(
107  baseUrl: string,
108  prompt: string,
109  paramName: string = "q"
110) {
111  const url = new URL(baseUrl);
112// … truncated