ai-web-preview

1'use client';
2 
3import { ChevronDownIcon } from 'lucide-react';
4import type { ComponentProps, ReactNode } from 'react';
5import { createContext, useContext, useState } from 'react';
6import { Button } from '@repo/shadcn-ui/components/ui/button';
7import {
8  Collapsible,
9  CollapsibleContent,
10  CollapsibleTrigger,
11} from '@repo/shadcn-ui/components/ui/collapsible';
12import { Input } from '@repo/shadcn-ui/components/ui/input';
13import {
14  Tooltip,
15  TooltipContent,
16  TooltipProvider,
17  TooltipTrigger,
18} from '@repo/shadcn-ui/components/ui/tooltip';
19import { cn } from '@repo/shadcn-ui/lib/utils';
20 
21export type AIWebPreviewContextValue = {
22  url: string;
23  setUrl: (url: string) => void;
24  consoleOpen: boolean;
25  setConsoleOpen: (open: boolean) => void;
26};
27 
28const AIWebPreviewContext = createContext<AIWebPreviewContextValue | null>(null);
29 
30const useAIWebPreview = () => {
31  const context = useContext(AIWebPreviewContext);
32  if (!context) {
33    throw new Error('AIWebPreview components must be used within a AIWebPreview');
34  }
35  return context;
36};
37 
38export type AIWebPreviewProps = ComponentProps<'div'> & {
39  defaultUrl?: string;
40  onUrlChange?: (url: string) => void;
41};
42 
43export const AIWebPreview = ({
44  className,
45  children,
46  defaultUrl = '',
47  onUrlChange,
48  ...props
49}: AIWebPreviewProps) => {
50  const [url, setUrl] = useState(defaultUrl);
51  const [consoleOpen, setConsoleOpen] = useState(false);
52 
53  const handleUrlChange = (newUrl: string) => {
54    setUrl(newUrl);
55    onUrlChange?.(newUrl);
56  };
57 
58  const contextValue: AIWebPreviewContextValue = {
59    url,
60    setUrl: handleUrlChange,
61    consoleOpen,
62    setConsoleOpen,
63  };
64 
65  return (
66    <AIWebPreviewContext.Provider value={contextValue}>
67      <div
68        className={cn('flex size-full flex-col rounded-lg border bg-card', className)}
69        {...props}
70      >
71        {children}
72      </div>
73    </AIWebPreviewContext.Provider>
74  );
75};
76 
77export type AIWebPreviewNavigationProps = ComponentProps<'div'>;
78 
79export const AIWebPreviewNavigation = ({ className, children, ...props }: AIWebPreviewNavigationProps) => (
80  <div className={cn('flex items-center gap-1 border-b p-2', className)} {...props}>
81    {children}
82  </div>
83);
84 
85export type AIWebPreviewNavigationButtonProps = ComponentProps<typeof Button> & {
86  tooltip?: string;
87};
88 
89export const AIWebPreviewNavigationButton = ({
90  onClick,
91  disabled,
92  tooltip,
93  children,
94  ...props
95}: AIWebPreviewNavigationButtonProps) => (
96  <TooltipProvider>
97    <Tooltip>
98// … truncated