[V0_FILE]typescriptreact:file="components/ui/scroll-area.tsx" "use client" import * as React from "react" import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area" import { cn } from "@/lib/utils" const ScrollArea = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} )) ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName const ScrollBar = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, orientation = "vertical", ...props }, ref) => ( )) ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName export { ScrollArea, ScrollBar } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" import type * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", }, }, defaultVariants: { variant: "default", }, }, ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return

} export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="app/api/websocket-proxy/route.ts" import type { NextRequest } from "next/server" export async function GET(request: NextRequest) { // This endpoint will explain how to use the proxy return new Response( JSON.stringify({ message: "This is a WebSocket proxy endpoint. It should be used with a WebSocket client.", usage: "Connect to /api/websocket-proxy as a WebSocket endpoint", }), { status: 200, headers: { "Content-Type": "application/json", }, }, ) } [V0_FILE]typescriptreact:file="app/actions.ts" "use server" import { unstable_noStore as noStore } from "next/cache" // This is a server action that will fetch data from the WebSocket server // We'll use a regular HTTP fetch as a workaround export async function fetchVehicleData() { noStore() try { // Instead of WebSocket, we'll use a regular HTTP request to a similar endpoint // This is a workaround since we can't directly use WebSockets in server actions const response = await fetch( "http://147.93.107.88:5000/api/vehicleData?vehicleID=3434373738&userLat=13.0827&userLon=80.2707", { next: { revalidate: 0 }, cache: "no-store", }, ) if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`) } const data = await response.json() return { success: true, data } } catch (error) { console.error("Error fetching vehicle data:", error) return { success: false, error: error instanceof Error ? error.message : "An unknown error occurred", } } } [V0_FILE]typescriptreact:file="components/client-only-solution.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { ScrollArea } from "@/components/ui/scroll-area" import { RefreshCw, AlertCircle } from "lucide-react" export default function ClientOnlySolution() { const [messages, setMessages] = useState([]) const [error, setError] = useState(null) const [isLoading, setIsLoading] = useState(false) const fetchData = async () => { setIsLoading(true) setError(null) try { setMessages((prev) => [...prev, "Attempting to fetch data..."]) // Using a CORS proxy to bypass CORS restrictions const proxyUrl = "https://cors-anywhere.herokuapp.com/" const targetUrl = "http://147.93.107.88:5000/api/vehicleData?vehicleID=3434373738&userLat=13.0827&userLon=80.2707" const response = await fetch(proxyUrl + targetUrl) if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`) } const data = await response.json() setMessages((prev) => [...prev, JSON.stringify(data, null, 2)]) } catch (err) { setError(`Failed to fetch data: ${err instanceof Error ? err.message : String(err)}`) setMessages((prev) => [...prev, `Error: ${err instanceof Error ? err.message : String(err)}`]) } finally { setIsLoading(false) } } const clearMessages = () => { setMessages([]) } return ( Client-Only Solution

{error && (

{error}

)}

Messages

{messages.length === 0 ? (

No data received yet

) : (

{messages.map((msg, index) => (

                    {msg}

))}

)}

Note: This solution uses a CORS proxy to fetch data from the server

You may need to visit{" "} https://cors-anywhere.herokuapp.com/corsdemo {" "} to temporarily enable the demo CORS proxy

) } [V0_FILE]typescriptreact:file="components/websocket-client.tsx" "use client" import { useState, useEffect, useRef } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { ScrollArea } from "@/components/ui/scroll-area" import { Wifi, WifiOff, RefreshCw, AlertCircle } from "lucide-react" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" export default function WebSocketClient() { // Default WebSocket URL const defaultWsUrl = "ws://147.93.107.88:5000/ws/livetrack?vehicleID=3434373738&userLat=13.0827&userLon=80.2707" const [wsUrl, setWsUrl] = useState(defaultWsUrl) const [inputUrl, setInputUrl] = useState(defaultWsUrl) const [isConnected, setIsConnected] = useState(false) const [messages, setMessages] = useState([]) const [error, setError] = useState(null) const [isLoading, setIsLoading] = useState(false) const wsRef = useRef(null) const updateUrl = () => { setWsUrl(inputUrl) setMessages((prev) => [...prev, `WebSocket URL updated to: ${inputUrl}`]) // If already connected, disconnect first if (isConnected && wsRef.current) { wsRef.current.close() } } const connect = () => { try { setIsLoading(true) setError(null) // Close existing connection if any if (wsRef.current) { wsRef.current.close() } setMessages((prev) => [...prev, `Attempting to connect to: ${wsUrl}`]) // Check if we're in a secure context trying to connect to an insecure WebSocket if (typeof window !== "undefined" && window.location.protocol === "https:" && wsUrl.startsWith("ws:")) { setMessages((prev) => [ ...prev, "⚠️ Warning: Attempting to connect to an insecure WebSocket (ws://) from a secure page (https://). " + "This may be blocked by the browser. Consider using wss:// instead.", ]) } const ws = new WebSocket(wsUrl) ws.onopen = () => { setIsConnected(true) setMessages((prev) => [...prev, "✅ Connection established"]) setIsLoading(false) } ws.onmessage = (event) => { try { // Try to parse as JSON for prettier display const data = JSON.parse(event.data) setMessages((prev) => [...prev, JSON.stringify(data, null, 2)]) } catch { // If not JSON, display as is setMessages((prev) => [...prev, event.data]) } } ws.onerror = (event) => { setError("WebSocket error occurred. This could be due to connection issues or mixed content restrictions.") setIsLoading(false) } ws.onclose = (event) => { setIsConnected(false) setMessages((prev) => [ ...prev, `Connection closed (Code: ${event.code}${event.reason ? `, Reason: ${event.reason}` : ""})`, ]) wsRef.current = null } wsRef.current = ws } catch (err) { setError(`Failed to connect: ${err instanceof Error ? err.message : String(err)}`) setIsLoading(false) } } const disconnect = () => { if (wsRef.current) { wsRef.current.close() setIsConnected(false) } } const clearMessages = () => { setMessages([]) } // Clean up on unmount useEffect(() => { return () => { if (wsRef.current) { wsRef.current.close() } } }, []) return ( WebSocket Client

{isConnected ? ( Connected ) : ( Disconnected )}

WebSocket URL

setInputUrl(e.target.value)} placeholder="Enter WebSocket URL" className="flex-1" />

{window?.location.protocol === "https:" && wsUrl.startsWith("ws:") && (

You're on HTTPS but using an insecure WebSocket (ws://). This may be blocked by your browser.

)}

{error && (

{error} {window?.location.protocol === "https:" && wsUrl.startsWith("ws:") && (

Possible solution: Try using a secure WebSocket URL (wss://) instead of ws://, or access this page over HTTP instead of HTTPS.

)}

Messages

{messages.length === 0 ? (

No messages received yet

) : (

{messages.map((msg, index) => (

                    {msg}

))}

)}

Current WebSocket URL: {wsUrl}

{typeof window !== "undefined" &&

Page Protocol: {window.location.protocol}

}

) } [V0_FILE]typescriptreact:file="components/ui/input.tsx" import * as React from "react" import { cn } from "@/lib/utils" export interface InputProps extends React.InputHTMLAttributes {} const Input = React.forwardRef(({ className, type, ...props }, ref) => { return ( ) }) Input.displayName = "Input" export { Input } [V0_FILE]typescriptreact:file="components/ui/label.tsx" "use client" import * as React from "react" import * as LabelPrimitive from "@radix-ui/react-label" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70") const Label = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, ...props }, ref) => ( )) Label.displayName = LabelPrimitive.Root.displayName export { Label } [V0_FILE]typescriptreact:file="app/page.tsx" import WebSocketTester from "@/components/websocket-tester" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/ui/tabs.tsx" "use client" import * as React from "react" import * as TabsPrimitive from "@radix-ui/react-tabs" import { cn } from "@/lib/utils" const Tabs = TabsPrimitive.Root const TabsList = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsList.displayName = TabsPrimitive.List.displayName const TabsTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsTrigger.displayName = TabsPrimitive.Trigger.displayName const TabsContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsContent.displayName = TabsPrimitive.Content.displayName export { Tabs, TabsList, TabsTrigger, TabsContent } [V0_FILE]typescriptreact:file="components/ui/textarea.tsx" import * as React from "react" import { cn } from "@/lib/utils" export interface TextareaProps extends React.TextareaHTMLAttributes {} const Textarea = React.forwardRef(({ className, ...props }, ref) => { return (

)
})
Textarea.displayName = "Textarea"

export { Textarea }
[V0_FILE]typescriptreact:file="components/ui/switch.tsx"
"use client"

import * as React from "react"
import * as SwitchPrimitives from "@radix-ui/react-switch"

import { cn } from "@/lib/utils"

const Switch = React.forwardRef<
  React.ElementRef<typeof SwitchPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
>(({ className, ...props }, ref) => (
  <SwitchPrimitives.Root
    className={cn(
      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
      className,
    )}
    {...props}
    ref={ref}
  >
    <SwitchPrimitives.Thumb
      className={cn(
        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
      )}
    />
  </SwitchPrimitives.Root>
))
Switch.displayName = SwitchPrimitives.Root.displayName

export { Switch }
[V0_FILE]typescriptreact:file="components/ui/separator.tsx"
"use client"

import * as React from "react"
import * as SeparatorPrimitive from "@radix-ui/react-separator"

import { cn } from "@/lib/utils"

const Separator = React.forwardRef<
  React.ElementRef<typeof SeparatorPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
>(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
  <SeparatorPrimitive.Root
    ref={ref}
    decorative={decorative}
    orientation={orientation}
    className={cn("shrink-0 bg-border", orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", className)}
    {...props}
  />
))
Separator.displayName = SeparatorPrimitive.Root.displayName

export { Separator }
[V0_FILE]typescriptreact:file="components/ui/select.tsx"
"use client"

import * as React from "react"
import * as SelectPrimitive from "@radix-ui/react-select"
import { Check, ChevronDown, ChevronUp } from "lucide-react"

import { cn } from "@/lib/utils"

const Select = SelectPrimitive.Root

const SelectGroup = SelectPrimitive.Group

const SelectValue = SelectPrimitive.Value

const SelectTrigger = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.Trigger
    ref={ref}
    className={cn(
      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
      className,
    )}
    {...props}
  >
    {children}
    <SelectPrimitive.Icon asChild>
      <ChevronDown className="h-4 w-4 opacity-50" />
    </SelectPrimitive.Icon>
  </SelectPrimitive.Trigger>
))
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName

const SelectScrollUpButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.ScrollUpButton
    ref={ref}
    className={cn("flex cursor-default items-center justify-center py-1", className)}
    {...props}
  >
    <ChevronUp className="h-4 w-4" />
  </SelectPrimitive.ScrollUpButton>
))
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName

const SelectScrollDownButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.ScrollDownButton
    ref={ref}
    className={cn("flex cursor-default items-center justify-center py-1", className)}
    {...props}
  >
    <ChevronDown className="h-4 w-4" />
  </SelectPrimitive.ScrollDownButton>
))
SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName

const SelectContent = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
>(({ className, children, position = "popper", ...props }, ref) => (
  <SelectPrimitive.Portal>
    <SelectPrimitive.Content
      ref={ref}
      className={cn(
        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        position === "popper" &&
          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
        className,
      )}
      position={position}
      {...props}
    >
      <SelectScrollUpButton />
      <SelectPrimitive.Viewport
        className={cn(
          "p-1",
          position === "popper" &&
            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
        )}
      >
        {children}
      </SelectPrimitive.Viewport>
      <SelectScrollDownButton />
    </SelectPrimitive.Content>
  </SelectPrimitive.Portal>
))
SelectContent.displayName = SelectPrimitive.Content.displayName

const SelectLabel = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.Label ref={ref} className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)} {...props} />
))
SelectLabel.displayName = SelectPrimitive.Label.displayName

const SelectItem = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className,
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <SelectPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </SelectPrimitive.ItemIndicator>
    </span>

<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
  </SelectPrimitive.Item>
))
SelectItem.displayName = SelectPrimitive.Item.displayName

const SelectSeparator = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
))
SelectSeparator.displayName = SelectPrimitive.Separator.displayName

export {
  Select,
  SelectGroup,
  SelectValue,
  SelectTrigger,
  SelectContent,
  SelectLabel,
  SelectItem,
  SelectSeparator,
  SelectScrollUpButton,
  SelectScrollDownButton,
}
[V0_FILE]typescriptreact:file="components/ui/toaster.tsx"
"use client"

import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "@/components/ui/toast"
import { useToast } from "@/components/ui/use-toast"

export function Toaster() {
  const { toasts } = useToast()

return (
    <ToastProvider>
      {toasts.map(({ id, title, description, action, ...props }) => (
        <Toast key={id} {...props}>
          <div className="grid gap-1">
            {title && <ToastTitle>{title}</ToastTitle>}
            {description && <ToastDescription>{description}</ToastDescription>}
          </div>
          {action}
          <ToastClose />
        </Toast>
      ))}
      <ToastViewport />
    </ToastProvider>
  )
}
[V0_FILE]typescriptreact:file="components/ui/toast.tsx"
"use client"

import * as React from "react"
import * as ToastPrimitives from "@radix-ui/react-toast"
import { cva, type VariantProps } from "class-variance-authority"
import { X } from "lucide-react"

import { cn } from "@/lib/utils"

const ToastProvider = ToastPrimitives.Provider

const ToastViewport = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Viewport>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Viewport
    ref={ref}
    className={cn(
      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
      className,
    )}
    {...props}
  />
))
ToastViewport.displayName = ToastPrimitives.Viewport.displayName

const toastVariants = cva(
  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
  {
    variants: {
      variant: {
        default: "border bg-background text-foreground",
        destructive: "destructive group border-destructive bg-destructive text-destructive-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  },
)

const Toast = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
>(({ className, variant, ...props }, ref) => {
  return <ToastPrimitives.Root ref={ref} className={cn(toastVariants({ variant }), className)} {...props} />
})
Toast.displayName = ToastPrimitives.Root.displayName

const ToastAction = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Action>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Action
    ref={ref}
    className={cn(
      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
      className,
    )}
    {...props}
  />
))
ToastAction.displayName = ToastPrimitives.Action.displayName

const ToastClose = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Close>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Close
    ref={ref}
    className={cn(
      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
      className,
    )}
    toast-close=""
    {...props}
  >
    <X className="h-4 w-4" />
  </ToastPrimitives.Close>
))
ToastClose.displayName = ToastPrimitives.Close.displayName

const ToastTitle = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Title>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Title ref={ref} className={cn("text-sm font-semibold", className)} {...props} />
))
ToastTitle.displayName = ToastPrimitives.Title.displayName

const ToastDescription = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Description>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Description ref={ref} className={cn("text-sm opacity-90", className)} {...props} />
))
ToastDescription.displayName = ToastPrimitives.Description.displayName

type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>

type ToastActionElement = React.ReactElement<typeof ToastAction>

export {
  type ToastProps,
  type ToastActionElement,
  ToastProvider,
  ToastViewport,
  Toast,
  ToastTitle,
  ToastDescription,
  ToastClose,
  ToastAction,
}
[V0_FILE]typescript:file="components/ui/use-toast.ts" isQuickEdit="true"
"use client"

import type React from "react"

// Simplified version of the toast hook
import { useState } from "react"

type ToastProps = {
  id: string
  title?: string
  description?: string
  action?: React.ReactNode
  variant?: "default" | "destructive"
  duration?: number
}

export function useToast() {
  const [toasts, setToasts] = useState<ToastProps[]>([])

const toast = ({ title, description, action, variant, duration = 5000 }: Omit<ToastProps, "id">) => {
    const id = Math.random().toString(36).substring(2, 9)
    const newToast = { id, title, description, action, variant, duration }

setToasts((prevToasts) => [...prevToasts, newToast])

if (duration > 0) {
      setTimeout(() => {
        setToasts((prevToasts) => prevToasts.filter((toast) => toast.id !== id))
      }, duration)
    }

return id
  }

const dismiss = (id: string) => {
    setToasts((prevToasts) => prevToasts.filter((toast) => toast.id !== id))
  }

return {
    toast,
    dismiss,
    toasts,
  }
}
[V0_FILE]typescriptreact:file="components/websocket-tester.tsx"
"use client"

import type React from "react"

import { useState, useEffect, useRef } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Switch } from "@/components/ui/switch"
import { Separator } from "@/components/ui/separator"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  Wifi,
  WifiOff,
  RefreshCw,
  AlertCircle,
  Send,
  Save,
  Trash2,
  Download,
  Upload,
  Info,
  MessageSquare,
  History,
  ChevronRight,
  X,
  Check,
  Copy,
  ShieldAlert,
  ShieldCheck,
} from "lucide-react"
import { format } from "date-fns"
import { useToast } from "@/components/ui/use-toast"
import { Toaster } from "@/components/ui/toaster"

// Message types
type MessageType = "sent" | "received" | "info" | "error"

interface Message {
  id: string
  type: MessageType
  content: string
  timestamp: Date
  raw?: string
}

// Connection preset type
interface ConnectionPreset {
  id: string
  name: string
  url: string
}

export default function WebSocketTester() {
  const { toast } = useToast()

// State
  const [wsUrl, setWsUrl] = useState("")
  const [inputUrl, setInputUrl] = useState("")
  const [isConnected, setIsConnected] = useState(false)
  const [messages, setMessages] = useState<Message[]>([])
  const [error, setError] = useState<string | null>(null)
  const [isLoading, setIsLoading] = useState(false)
  const [messageToSend, setMessageToSend] = useState("")
  const [autoScroll, setAutoScroll] = useState(true)
  const [activeTab, setActiveTab] = useState("connection")
  const [presetName, setPresetName] = useState("")
  const [presets, setPresets] = useState<ConnectionPreset[]>([])
  const [selectedPreset, setSelectedPreset] = useState<string | null>(null)
  const [connectionInfo, setConnectionInfo] = useState({
    status: "Disconnected",
    duration: "0s",
    messagesReceived: 0,
    messagesSent: 0,
    lastActivity: "-",
  })
  const [isSecureContext, setIsSecureContext] = useState(false)

// Refs
  const wsRef = useRef<WebSocket | null>(null)
  const messagesEndRef = useRef<HTMLDivElement>(null)
  const connectionStartTimeRef = useRef<Date | null>(null)
  const durationIntervalRef = useRef<NodeJS.Timeout | null>(null)

// Check if we're in a secure context (HTTPS)
  useEffect(() => {
    if (typeof window !== "undefined") {
      setIsSecureContext(window.location.protocol === "https:")
    }
  }, [])

// Load presets from localStorage on mount
  useEffect(() => {
    const savedPresets = localStorage.getItem("wsPresets")
    if (savedPresets) {
      try {
        setPresets(JSON.parse(savedPresets))
      } catch (e) {
        console.error("Failed to parse saved presets", e)
      }
    }
  }, [])

// Save presets to localStorage when they change
  useEffect(() => {
    localStorage.setItem("wsPresets", JSON.stringify(presets))
  }, [presets])

// Auto scroll to bottom of messages
  useEffect(() => {
    if (autoScroll && messagesEndRef.current) {
      messagesEndRef.current.scrollIntoView({ behavior: "smooth" })
    }
  }, [messages, autoScroll])

// Update connection duration
  useEffect(() => {
    if (isConnected && connectionStartTimeRef.current) {
      const updateDuration = () => {
        if (connectionStartTimeRef.current) {
          const now = new Date()
          const diff = now.getTime() - connectionStartTimeRef.current.getTime()
          const seconds = Math.floor(diff / 1000)
          const minutes = Math.floor(seconds / 60)
          const hours = Math.floor(minutes / 60)

let durationStr = ""
          if (hours > 0) {
            durationStr += `${hours}h `
          }
          if (minutes > 0 || hours > 0) {
            durationStr += `${minutes % 60}m `
          }
          durationStr += `${seconds % 60}s`

setConnectionInfo((prev) => ({ ...prev, duration: durationStr }))
        }
      }

updateDuration()
      durationIntervalRef.current = setInterval(updateDuration, 1000)
    }

return () => {
      if (durationIntervalRef.current) {
        clearInterval(durationIntervalRef.current)
      }
    }
  }, [isConnected])

// Helper to add a message to the list
  const addMessage = (content: string, type: MessageType, raw?: string) => {
    const newMessage: Message = {
      id: Date.now().toString(),
      type,
      content,
      timestamp: new Date(),
      raw,
    }
    setMessages((prev) => [...prev, newMessage])

// Update connection info
    setConnectionInfo((prev) => ({
      ...prev,
      lastActivity: format(new Date(), "HH:mm:ss"),
      messagesReceived: type === "received" ? prev.messagesReceived + 1 : prev.messagesReceived,
      messagesSent: type === "sent" ? prev.messagesSent + 1 : prev.messagesSent,
    }))
  }

// Update WebSocket URL
  const updateUrl = () => {
    setWsUrl(inputUrl)
    addMessage(`WebSocket URL updated to: ${inputUrl}`, "info")

// If already connected, disconnect first
    if (isConnected && wsRef.current) {
      wsRef.current.close()
    }
  }

// Convert ws:// to wss:// for secure contexts
  const getSecureUrl = (url: string) => {
    if (url.startsWith("ws://")) {
      return url.replace("ws://", "wss://")
    }
    return url
  }

// Try to connect with wss:// if on HTTPS and ws:// fails
  const trySecureConnection = () => {
    if (isSecureContext && wsUrl.startsWith("ws://")) {
      const secureUrl = getSecureUrl(wsUrl)
      addMessage(`Attempting secure connection with: ${secureUrl}`, "info")

try {
        const ws = new WebSocket(secureUrl)

ws.onopen = () => {
          setIsConnected(true)
          setIsLoading(false)
          connectionStartTimeRef.current = new Date()
          setConnectionInfo((prev) => ({
            ...prev,
            status: "Connected",
            lastActivity: format(new Date(), "HH:mm:ss"),
          }))
          addMessage("✅ Connection established using secure WebSocket (wss://)", "info")
          toast({
            title: "Connected",
            description: "Secure WebSocket connection established successfully",
            duration: 3000,
          })

// Update the URL to the secure version
          setWsUrl(secureUrl)
          setInputUrl(secureUrl)
        }

ws.onmessage = handleWebSocketMessage
        ws.onerror = handleWebSocketError
        ws.onclose = handleWebSocketClose

wsRef.current = ws
      } catch (err) {
        setError(`Failed to establish secure connection: ${err instanceof Error ? err.message : String(err)}`)
        setIsLoading(false)
      }
    } else {
      setIsLoading(false)
    }
  }

// Handle WebSocket message
  const handleWebSocketMessage = (event: MessageEvent) => {
    try {
      // Try to parse as JSON for prettier display
      let displayContent = ""
      const rawContent = event.data

try {
        const data = JSON.parse(event.data)
        displayContent = JSON.stringify(data, null, 2)
      } catch {
        // If not JSON, display as is
        displayContent = event.data
      }

addMessage(displayContent, "received", rawContent)
    } catch (err) {
      addMessage(`Error processing message: ${err}`, "error")
    }
  }

// Handle WebSocket error
  const handleWebSocketError = () => {
    setError("WebSocket error occurred. This could be due to connection issues or mixed content restrictions.")
    setIsLoading(false)
    addMessage("❌ WebSocket error occurred", "error")

// Try secure connection if on HTTPS and using ws://
    if (isSecureContext && wsUrl.startsWith("ws://")) {
      addMessage("Attempting to use secure WebSocket (wss://) instead...", "info")
      trySecureConnection()
    }
  }

// Handle WebSocket close
  const handleWebSocketClose = (event: CloseEvent) => {
    setIsConnected(false)
    connectionStartTimeRef.current = null
    if (durationIntervalRef.current) {
      clearInterval(durationIntervalRef.current)
    }
    setConnectionInfo((prev) => ({
      ...prev,
      status: "Disconnected",
      lastActivity: format(new Date(), "HH:mm:ss"),
    }))
    addMessage(`Connection closed (Code: ${event.code}${event.reason ? `, Reason: ${event.reason}` : ""})`, "info")
    wsRef.current = null
    toast({
      title: "Disconnected",
      description: `WebSocket connection closed (Code: ${event.code})`,
      duration: 3000,
    })
  }

// Connect to WebSocket
  const connect = () => {
    try {
      setIsLoading(true)
      setError(null)

// Close existing connection if any
      if (wsRef.current) {
        wsRef.current.close()
      }

addMessage(`Attempting to connect to: ${wsUrl}`, "info")

// Check if we're in a secure context trying to connect to an insecure WebSocket
      if (isSecureContext && wsUrl.startsWith("ws://")) {
        addMessage(
          "⚠️ Warning: Attempting to connect to an insecure WebSocket (ws://) from a secure page (https://). " +
            "This may be blocked by the browser. If connection fails, we'll try wss:// automatically.",
          "info",
        )
      }

const ws = new WebSocket(wsUrl)

ws.onopen = () => {
        setIsConnected(true)
        setIsLoading(false)
        connectionStartTimeRef.current = new Date()
        setConnectionInfo((prev) => ({
          ...prev,
          status: "Connected",
          lastActivity: format(new Date(), "HH:mm:ss"),
        }))
        addMessage("✅ Connection established", "info")
        toast({
          title: "Connected",
          description: "WebSocket connection established successfully",
          duration: 3000,
        })
      }

ws.onmessage = handleWebSocketMessage
      ws.onerror = handleWebSocketError
      ws.onclose = handleWebSocketClose

wsRef.current = ws
    } catch (err) {
      setError(`Failed to connect: ${err instanceof Error ? err.message : String(err)}`)
      setIsLoading(false)
      addMessage(`❌ ${err instanceof Error ? err.message : String(err)}`, "error")

// Try secure connection if on HTTPS and using ws://
      if (isSecureContext && wsUrl.startsWith("ws://")) {
        trySecureConnection()
      }
    }
  }

// Suggest secure URL
  const suggestSecureUrl = () => {
    if (inputUrl.startsWith("ws://")) {
      const secureUrl = getSecureUrl(inputUrl)
      setInputUrl(secureUrl)
      toast({
        title: "URL Updated",
        description: "Converted to secure WebSocket URL (wss://)",
        duration: 2000,
      })
    }
  }

// Disconnect from WebSocket
  const disconnect = () => {
    if (wsRef.current) {
      wsRef.current.close()
    }
  }

// Send a message through the WebSocket
  const sendMessage = () => {
    if (wsRef.current && isConnected && messageToSend.trim()) {
      try {
        wsRef.current.send(messageToSend)
        addMessage(messageToSend, "sent")
        setMessageToSend("")
      } catch (err) {
        addMessage(`Failed to send message: ${err}`, "error")
      }
    }
  }

// Clear all messages
  const clearMessages = () => {
    setMessages([])
    setConnectionInfo((prev) => ({
      ...prev,
      messagesReceived: 0,
      messagesSent: 0,
    }))
    toast({
      title: "Messages Cleared",
      description: "All message history has been cleared",
      duration: 2000,
    })
  }

// Save current URL as a preset
  const savePreset = () => {
    if (presetName.trim() && inputUrl.trim()) {
      const newPreset: ConnectionPreset = {
        id: Date.now().toString(),
        name: presetName,
        url: inputUrl,
      }
      setPresets((prev) => [...prev, newPreset])
      setPresetName("")
      toast({
        title: "Preset Saved",
        description: `"${presetName}" has been saved to your presets`,
        duration: 2000,
      })
    }
  }

// Load a preset
  const loadPreset = (presetId: string) => {
    const preset = presets.find((p) => p.id === presetId)
    if (preset) {
      setInputUrl(preset.url)
      setWsUrl(preset.url)
      setSelectedPreset(presetId)
      toast({
        title: "Preset Loaded",
        description: `"${preset.name}" has been loaded`,
        duration: 2000,
      })
    }
  }

// Delete a preset
  const deletePreset = (presetId: string) => {
    setPresets((prev) => prev.filter((p) => p.id !== presetId))
    if (selectedPreset === presetId) {
      setSelectedPreset(null)
    }
    toast({
      title: "Preset Deleted",
      description: "The preset has been removed",
      duration: 2000,
    })
  }

// Export presets to JSON
  const exportPresets = () => {
    const dataStr = JSON.stringify(presets, null, 2)
    const dataUri = `data:application/json;charset=utf-8,${encodeURIComponent(dataStr)}`
    const exportFileDefaultName = `websocket-presets-${format(new Date(), "yyyy-MM-dd")}.json`

const linkElement = document.createElement("a")
    linkElement.setAttribute("href", dataUri)
    linkElement.setAttribute("download", exportFileDefaultName)
    linkElement.click()
  }

// Import presets from JSON
  const importPresets = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0]
    if (!file) return

const reader = new FileReader()
    reader.onload = (e) => {
      try {
        const importedPresets = JSON.parse(e.target?.result as string)
        if (Array.isArray(importedPresets)) {
          setPresets(importedPresets)
          toast({
            title: "Presets Imported",
            description: `${importedPresets.length} presets have been imported`,
            duration: 2000,
          })
        }
      } catch (err) {
        toast({
          title: "Import Failed",
          description: "The file could not be parsed as valid presets",
          variant: "destructive",
          duration: 3000,
        })
      }
    }
    reader.readAsText(file)
    // Reset the input
    event.target.value = ""
  }

// Copy message to clipboard
  const copyToClipboard = (text: string) => {
    navigator.clipboard.writeText(text)
    toast({
      title: "Copied to Clipboard",
      description: "Message content copied to clipboard",
      duration: 2000,
    })
  }

// Format timestamp
  const formatTimestamp = (date: Date) => {
    return format(date, "HH:mm:ss")
  }

// Get message class based on type
  const getMessageClass = (type: MessageType) => {
    switch (type) {
      case "sent":
        return "bg-blue-50 border-blue-200 text-blue-800 dark:bg-blue-900/20 dark:border-blue-800 dark:text-blue-300"
      case "received":
        return "bg-green-50 border-green-200 text-green-800 dark:bg-green-900/20 dark:border-green-800 dark:text-green-300"
      case "info":
        return "bg-gray-50 border-gray-200 text-gray-800 dark:bg-gray-800/40 dark:border-gray-700 dark:text-gray-300"
      case "error":
        return "bg-red-50 border-red-200 text-red-800 dark:bg-red-900/20 dark:border-red-800 dark:text-red-300"
      default:
        return "bg-gray-50 border-gray-200 text-gray-800 dark:bg-gray-800/40 dark:border-gray-700 dark:text-gray-300"
    }
  }

// Get message icon based on type
  const getMessageIcon = (type: MessageType) => {
    switch (type) {
      case "sent":
        return <Send className="w-4 h-4 text-blue-500 dark:text-blue-400" />
      case "received":
        return <MessageSquare className="w-4 h-4 text-green-500 dark:text-green-400" />
      case "info":
        return <Info className="w-4 h-4 text-gray-500 dark:text-gray-400" />
      case "error":
        return <AlertCircle className="w-4 h-4 text-red-500 dark:text-red-400" />
      default:
        return <Info className="w-4 h-4 text-gray-500 dark:text-gray-400" />
    }
  }

return (
    <div className="container mx-auto p-4 max-w-6xl">
      <div className="flex flex-col space-y-4">
        <header className="flex items-center justify-between py-4">
          <div className="flex items-center gap-2">
            <div className="bg-primary p-2 rounded-md">
              <Wifi className="h-6 w-6 text-primary-foreground" />
            </div>
            <div>
              <h1 className="text-2xl font-bold">WebSocket Tester</h1>
              <p className="text-sm text-muted-foreground">Test and debug WebSocket connections</p>
            </div>
          </div>
          <div className="flex items-center gap-2">
            <Badge
              variant="outline"
              className={`px-3 py-1 ${
                isConnected
                  ? "bg-green-100 text-green-800 border-green-300 dark:bg-green-900/30 dark:text-green-300 dark:border-green-800"
                  : "bg-gray-100 text-gray-800 border-gray-300 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-700"
              }`}
            >
              {isConnected ? <Wifi className="w-3 h-3 mr-1 animate-pulse" /> : <WifiOff className="w-3 h-3 mr-1" />}
              {isConnected ? "Connected" : "Disconnected"}
            </Badge>
            <Badge
              variant="outline"
              className={`px-3 py-1 ${
                isSecureContext
                  ? "bg-green-100 text-green-800 border-green-300 dark:bg-green-900/30 dark:text-green-300 dark:border-green-800"
                  : "bg-amber-100 text-amber-800 border-amber-300 dark:bg-amber-900/30 dark:text-amber-300 dark:border-amber-800"
              }`}
            >
              {isSecureContext ? <ShieldCheck className="w-3 h-3 mr-1" /> : <ShieldAlert className="w-3 h-3 mr-1" />}
              {isSecureContext ? "HTTPS" : "HTTP"}
            </Badge>
          </div>
        </header>

<div className="grid grid-cols-1 lg:grid-cols-4 gap-4">
          {/* Left panel - Connection controls */}
          <div className="lg:col-span-1">
            <Card>
              <CardContent className="p-4 space-y-4">
                <Tabs defaultValue="connection" value={activeTab} onValueChange={setActiveTab}>
                  <TabsList className="grid grid-cols-3 mb-4">
                    <TabsTrigger value="connection">Connection</TabsTrigger>
                    <TabsTrigger value="presets">Presets</TabsTrigger>
                    <TabsTrigger value="info">Info</TabsTrigger>
                  </TabsList>

<TabsContent value="connection" className="space-y-4">
                    <div className="space-y-2">
                      <Label htmlFor="wsUrl">WebSocket URL</Label>
                      <div className="flex gap-2">
                        <Input
                          id="wsUrl"
                          value={inputUrl}
                          onChange={(e) => setInputUrl(e.target.value)}
                          placeholder="Enter WebSocket URL"
                          className="flex-1"
                        />
                        <Button onClick={updateUrl} variant="outline" size="icon" title="Update URL">
                          <Check className="h-4 w-4" />
                        </Button>
                        {isSecureContext && (
                          <Button
                            onClick={suggestSecureUrl}
                            variant="outline"
                            size="icon"
                            title="Convert to secure WebSocket URL (wss://)"
                            disabled={!inputUrl.startsWith("ws://")}
                          >
                            <ShieldCheck className="h-4 w-4" />
                          </Button>
                        )}
                      </div>
                      {isSecureContext && inputUrl.startsWith("ws://") && (
                        <div className="text-amber-600 text-sm flex items-center gap-1 mt-1">
                          <AlertCircle className="w-4 h-4" />
                          <span>
                            You're on HTTPS but using an insecure WebSocket (ws://). This may be blocked by your
                            browser. Consider using wss:// instead.
                          </span>
                        </div>
                      )}
                    </div>

<div className="flex flex-col gap-2">
                      <Button
                        onClick={connect}
                        disabled={isConnected || isLoading || !wsUrl.trim()}
                        className="flex items-center gap-1 w-full"
                      >
                        {isLoading ? (
                          <RefreshCw className="w-4 h-4 animate-spin" />
                        ) : isConnected ? (
                          <Check className="w-4 h-4" />
                        ) : (
                          <Wifi className="w-4 h-4" />
                        )}
                        {isLoading ? "Connecting..." : isConnected ? "Connected" : "Connect"}
                      </Button>
                      <Button onClick={disconnect} disabled={!isConnected} variant="outline" className="w-full">
                        <WifiOff className="w-4 h-4 mr-2" />
                        Disconnect
                      </Button>
                    </div>

<div className="space-y-2">
                      <Label htmlFor="message">Send Message</Label>
                      <Textarea
                        id="message"
                        value={messageToSend}
                        onChange={(e) => setMessageToSend(e.target.value)}
                        placeholder="Enter message to send"
                        disabled={!isConnected}
                        className="min-h-[80px]"
                      />
                      <Button onClick={sendMessage} disabled={!isConnected || !messageToSend.trim()} className="w-full">
                        <Send className="w-4 h-4 mr-2" />
                        Send
                      </Button>
                    </div>

<div className="flex items-center space-x-2">
                      <Switch id="auto-scroll" checked={autoScroll} onCheckedChange={setAutoScroll} />
                      <Label htmlFor="auto-scroll">Auto-scroll to new messages</Label>
                    </div>

<Button onClick={clearMessages} variant="outline" className="w-full">
                      <Trash2 className="w-4 h-4 mr-2" />
                      Clear Messages
                    </Button>
                  </TabsContent>

<TabsContent value="presets" className="space-y-4">
                    <div className="space-y-2">
                      <Label htmlFor="presetName">Preset Name</Label>
                      <Input
                        id="presetName"
                        value={presetName}
                        onChange={(e) => setPresetName(e.target.value)}
                        placeholder="My WebSocket Connection"
                      />
                    </div>

<Button onClick={savePreset} disabled={!presetName.trim() || !inputUrl.trim()} className="w-full">
                      <Save className="w-4 h-4 mr-2" />
                      Save Current URL as Preset
                    </Button>

<div className="space-y-2">
                      <Label>Saved Presets</Label>
                      {presets.length === 0 ? (
                        <div className="text-center py-4 text-muted-foreground text-sm">No presets saved yet</div>
                      ) : (
                        <ScrollArea className="h-[200px]">
                          <div className="space-y-2">
                            {presets.map((preset) => (
                              <div
                                key={preset.id}
                                className={`flex items-center justify-between p-2 rounded border ${
                                  selectedPreset === preset.id
                                    ? "bg-primary/10 border-primary"
                                    : "bg-card border-border"
                                }`}
                              >
                                <div className="truncate flex-1">
                                  <div className="font-medium">{preset.name}</div>
                                  <div className="text-xs text-muted-foreground truncate">{preset.url}</div>
                                </div>
                                <div className="flex gap-1">
                                  <Button
                                    variant="ghost"
                                    size="icon"
                                    onClick={() => loadPreset(preset.id)}
                                    title="Load preset"
                                  >
                                    <ChevronRight className="h-4 w-4" />
                                  </Button>
                                  <Button
                                    variant="ghost"
                                    size="icon"
                                    onClick={() => deletePreset(preset.id)}
                                    title="Delete preset"
                                  >
                                    <X className="h-4 w-4" />
                                  </Button>
                                </div>
                              </div>
                            ))}
                          </div>
                        </ScrollArea>
                      )}
                    </div>

<div className="flex gap-2">
                      <Button
                        onClick={exportPresets}
                        variant="outline"
                        className="flex-1"
                        disabled={presets.length === 0}
                      >
                        <Download className="w-4 h-4 mr-2" />
                        Export
                      </Button>
                      <div className="relative flex-1">
                        <Button variant="outline" className="w-full">
                          <Upload className="w-4 h-4 mr-2" />
                          Import
                        </Button>
                        <input
                          type="file"
                          accept=".json"
                          onChange={importPresets}
                          className="absolute inset-0 opacity-0 cursor-pointer"
                        />
                      </div>
                    </div>
                  </TabsContent>

<TabsContent value="info" className="space-y-4">
                    <div className="space-y-2">
                      <h3 className="font-medium">Connection Status</h3>
                      <div className="grid grid-cols-2 gap-2 text-sm">
                        <div className="text-muted-foreground">Status:</div>
                        <div
                          className={`font-medium ${
                            isConnected ? "text-green-600 dark:text-green-400" : "text-gray-600 dark:text-gray-400"
                          }`}
                        >
                          {connectionInfo.status}
                        </div>

<div className="text-muted-foreground">Duration:</div>
                        <div className="font-medium">{connectionInfo.duration}</div>

<div className="text-muted-foreground">Messages Received:</div>
                        <div className="font-medium">{connectionInfo.messagesReceived}</div>

<div className="text-muted-foreground">Messages Sent:</div>
                        <div className="font-medium">{connectionInfo.messagesSent}</div>

<div className="text-muted-foreground">Last Activity:</div>
                        <div className="font-medium">{connectionInfo.lastActivity}</div>

<div className="text-muted-foreground">Current URL:</div>
                        <div className="font-medium truncate" title={wsUrl}>
                          {wsUrl || "None"}
                        </div>

<div className="text-muted-foreground">Page Protocol:</div>
                        <div className="font-medium">{isSecureContext ? "HTTPS (Secure)" : "HTTP (Insecure)"}</div>
                      </div>
                    </div>

<div className="space-y-2">
                      <h3 className="font-medium">About WebSocket Tester</h3>
                      <p className="text-sm text-muted-foreground">
                        This tool allows you to test WebSocket connections, send and receive messages, and debug
                        connection issues.
                      </p>
                      <div className="text-sm text-muted-foreground space-y-2">
                        <div className="flex items-start gap-1">
                          <Info className="w-4 h-4 mt-0.5 flex-shrink-0" />
                          <span>
                            <strong>HTTP vs HTTPS:</strong> This app works on both HTTP and HTTPS pages. However, there
                            are important security considerations:
                          </span>
                        </div>
                        <ul className="list-disc pl-6 space-y-1">
                          <li>
                            On <strong>HTTP pages</strong>: Both ws:// and wss:// connections are allowed
                          </li>
                          <li>
                            On <strong>HTTPS pages</strong>: Only wss:// connections are allowed by browsers
                          </li>
                          <li>If a ws:// connection fails on HTTPS, we'll automatically try wss:// instead</li>
                        </ul>
                      </div>
                    </div>
                  </TabsContent>
                </Tabs>
              </CardContent>
            </Card>
          </div>

{/* Right panel - Messages */}
          <div className="lg:col-span-3">
            <Card className="h-full">
              <div className="p-4 border-b flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <History className="w-4 h-4" />
                  <h2 className="font-medium">Message History</h2>
                </div>
                <div className="flex items-center gap-2">
                  <Select
                    value={activeTab === "connection" ? "all" : activeTab}
                    onValueChange={(value) => setActiveTab(value)}
                  >
                    <SelectTrigger className="w-[140px]">
                      <SelectValue placeholder="Filter messages" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">All Messages</SelectItem>
                      <SelectItem value="connection">Connection</SelectItem>
                      <SelectItem value="presets">Presets</SelectItem>
                      <SelectItem value="info">Info</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>

<ScrollArea className="h-[calc(100vh-16rem)] p-4">
                {messages.length === 0 ? (
                  <div className="flex flex-col items-center justify-center h-full text-center p-8">
                    <MessageSquare className="w-12 h-12 text-muted-foreground mb-4 opacity-20" />
                    <h3 className="text-lg font-medium">No Messages Yet</h3>
                    <p className="text-muted-foreground mt-1">
                      Connect to a WebSocket server to start receiving messages
                    </p>
                  </div>
                ) : (
                  <div className="space-y-2">
                    {messages.map((message) => (
                      <div key={message.id} className={`p-3 rounded-md border ${getMessageClass(message.type)}`}>
                        <div className="flex items-center justify-between mb-1">
                          <div className="flex items-center gap-1 text-xs">
                            {getMessageIcon(message.type)}
                            <span className="font-medium">
                              {message.type.charAt(0).toUpperCase() + message.type.slice(1)}
                            </span>
                          </div>
                          <div className="flex items-center gap-2">
                            <span className="text-xs text-muted-foreground">{formatTimestamp(message.timestamp)}</span>
                            <Button
                              variant="ghost"
                              size="icon"
                              className="h-6 w-6"
                              onClick={() => copyToClipboard(message.content)}
                              title="Copy to clipboard"
                            >
                              <Copy className="h-3 w-3" />
                            </Button>
                          </div>
                        </div>
                        <pre className="whitespace-pre-wrap break-all text-sm font-mono">{message.content}</pre>
                      </div>
                    ))}
                    <div ref={messagesEndRef} />
                  </div>
                )}
              </ScrollArea>

{error && (
                <div className="p-3 m-4 bg-red-100 border border-red-300 text-red-800 rounded-md flex items-start gap-2 dark:bg-red-900/20 dark:border-red-800 dark:text-red-300">
                  <AlertCircle className="w-5 h-5 mt-0.5 flex-shrink-0" />
                  <div>
                    {error}
                    {isSecureContext && wsUrl.startsWith("ws://") && (
                      <div className="mt-2">
                        <strong>Possible solution:</strong> Try using a secure WebSocket URL (wss://) instead of ws://,
                        or access this page over HTTP instead of HTTPS.
                      </div>
                    )}
                  </div>
                </div>
              )}
            </Card>
          </div>
        </div>
      </div>
      <Toaster />
    </div>
  )
}</article></body></html>