asasvirtuais 0.1.0

package/components/table/fixed.tsx

@@ -0,0 +1,59 @@
+import { Table, TableCell, TableColumnHeader, TableColumnProps, TableRow } from '@chakra-ui/react/table'
+import { FunctionComponent, PropsWithChildren, ReactNode } from 'react'
+
+export type FixedTableProps = Table.RootProps & { guide: ReactNode }
+
+export default function FixedTable( { children, guide, ...props } : FixedTableProps ) {
+
+    return (
+        <Table.ScrollArea>
+            <Table.Root tableLayout='fixed' {...props}>
+                <Table.Header position='sticky' top={0} zIndex={2}>
+                    {guide}
+                </Table.Header>
+                <Table.Body zIndex={1}>
+                    {children}
+                </Table.Body>
+                <Table.Footer position='sticky' bottom={0} zIndex={2}>
+                    {guide}
+                </Table.Footer>
+            </Table.Root>
+        </Table.ScrollArea>
+    )
+}
+
+type TitleSizes = {
+    [KEY in string]: {
+        label: string,
+        width: TableColumnProps['w'],
+    }
+}
+
+type FixedTableComponents<T extends TitleSizes> = {
+    Components: {
+        [K in keyof T] : {
+            Header: FunctionComponent,
+            Data: FunctionComponent<PropsWithChildren>
+        }
+    },
+    HeadersRow: FunctionComponent,
+}
+export const makeFixedTableComponents = <T extends TitleSizes>(titleSizes: T): FixedTableComponents<T> => {
+    const Components = Object.fromEntries(
+        Object.entries(titleSizes).map(([key, {label, width}]) => [key, {
+            Header: () => <TableColumnHeader w={width}>{label}</TableColumnHeader>,
+            Data: ({children}: PropsWithChildren) => <TableCell w={width}>{children}</TableCell>,
+        }])
+    )
+    const HeadersRow = () => (
+        <TableRow>
+            {Object.entries(Components).map(([key, { Header }], i) => (
+                <Header key={key + i}/>
+            ))}
+        </TableRow>
+    )
+    return {
+        Components,
+        HeadersRow,
+    } as unknown as FixedTableComponents<T>
+}

package/components/table/key-value.tsx

@@ -0,0 +1,19 @@
+import { Table } from '@chakra-ui/react/table'
+
+export type KeyValueTableProps = Table.RootProps & { values: { [K in string | number]: string | number } }
+
+export default function KeyValueTable( { children, ...props } : KeyValueTableProps ) {
+
+    return (
+        <Table.Root variant='outline' {...props}>
+            <Table.Body zIndex={1}>
+                {Object.entries(props.values).map(([key, value]) => (
+                    <Table.Row key={key}>
+                        <Table.ColumnHeader>{key}</Table.ColumnHeader>
+                        <Table.Cell>{value}</Table.Cell>
+                    </Table.Row>
+                ))}
+            </Table.Body>
+        </Table.Root>
+    )
+}

package/components/ui/color-mode.tsx

@@ -0,0 +1,108 @@
+"use client"
+
+import type { IconButtonProps, SpanProps } from "@chakra-ui/react"
+import { ClientOnly, IconButton, Skeleton, Span } from "@chakra-ui/react"
+import { ThemeProvider, useTheme } from "next-themes"
+import type { ThemeProviderProps } from "next-themes"
+import * as React from "react"
+import { LuMoon, LuSun } from "react-icons/lu"
+
+export interface ColorModeProviderProps extends ThemeProviderProps {}
+
+export function ColorModeProvider(props: ColorModeProviderProps) {
+  return (
+    <ThemeProvider attribute="class" disableTransitionOnChange {...props} />
+  )
+}
+
+export type ColorMode = "light" | "dark"
+
+export interface UseColorModeReturn {
+  colorMode: ColorMode
+  setColorMode: (colorMode: ColorMode) => void
+  toggleColorMode: () => void
+}
+
+export function useColorMode(): UseColorModeReturn {
+  const { resolvedTheme, setTheme, forcedTheme } = useTheme()
+  const colorMode = forcedTheme || resolvedTheme
+  const toggleColorMode = () => {
+    setTheme(resolvedTheme === "dark" ? "light" : "dark")
+  }
+  return {
+    colorMode: colorMode as ColorMode,
+    setColorMode: setTheme,
+    toggleColorMode,
+  }
+}
+
+export function useColorModeValue<T>(light: T, dark: T) {
+  const { colorMode } = useColorMode()
+  return colorMode === "dark" ? dark : light
+}
+
+export function ColorModeIcon() {
+  const { colorMode } = useColorMode()
+  return colorMode === "dark" ? <LuMoon /> : <LuSun />
+}
+
+interface ColorModeButtonProps extends Omit<IconButtonProps, "aria-label"> {}
+
+export const ColorModeButton = React.forwardRef<
+  HTMLButtonElement,
+  ColorModeButtonProps
+>(function ColorModeButton(props, ref) {
+  const { toggleColorMode } = useColorMode()
+  return (
+    <ClientOnly fallback={<Skeleton boxSize="8" />}>
+      <IconButton
+        onClick={toggleColorMode}
+        variant="ghost"
+        aria-label="Toggle color mode"
+        size="sm"
+        ref={ref}
+        {...props}
+        css={{
+          _icon: {
+            width: "5",
+            height: "5",
+          },
+        }}
+      >
+        <ColorModeIcon />
+      </IconButton>
+    </ClientOnly>
+  )
+})
+
+export const LightMode = React.forwardRef<HTMLSpanElement, SpanProps>(
+  function LightMode(props, ref) {
+    return (
+      <Span
+        color="fg"
+        display="contents"
+        className="chakra-theme light"
+        colorPalette="gray"
+        colorScheme="light"
+        ref={ref}
+        {...props}
+      />
+    )
+  },
+)
+
+export const DarkMode = React.forwardRef<HTMLSpanElement, SpanProps>(
+  function DarkMode(props, ref) {
+    return (
+      <Span
+        color="fg"
+        display="contents"
+        className="chakra-theme dark"
+        colorPalette="gray"
+        colorScheme="dark"
+        ref={ref}
+        {...props}
+      />
+    )
+  },
+)

package/components/ui/provider.tsx

@@ -0,0 +1,15 @@
+"use client"
+
+import { ChakraProvider, defaultSystem } from "@chakra-ui/react"
+import {
+  ColorModeProvider,
+  type ColorModeProviderProps,
+} from "./color-mode"
+
+export function Provider(props: ColorModeProviderProps) {
+  return (
+    <ChakraProvider value={defaultSystem}>
+      <ColorModeProvider {...props} />
+    </ChakraProvider>
+  )
+}

package/components/ui/toaster.tsx

@@ -0,0 +1,43 @@
+"use client"
+
+import {
+  Toaster as ChakraToaster,
+  Portal,
+  Spinner,
+  Stack,
+  Toast,
+  createToaster,
+} from "@chakra-ui/react"
+
+export const toaster = createToaster({
+  placement: "bottom-end",
+  pauseOnPageIdle: true,
+})
+
+export const Toaster = () => {
+  return (
+    <Portal>
+      <ChakraToaster toaster={toaster} insetInline={{ mdDown: "4" }}>
+        {(toast) => (
+          <Toast.Root width={{ md: "sm" }}>
+            {toast.type === "loading" ? (
+              <Spinner size="sm" color="blue.solid" />
+            ) : (
+              <Toast.Indicator />
+            )}
+            <Stack gap="1" flex="1" maxWidth="100%">
+              {toast.title && <Toast.Title>{toast.title}</Toast.Title>}
+              {toast.description && (
+                <Toast.Description>{toast.description}</Toast.Description>
+              )}
+            </Stack>
+            {toast.action && (
+              <Toast.ActionTrigger>{toast.action.label}</Toast.ActionTrigger>
+            )}
+            {toast.closable && <Toast.CloseTrigger />}
+          </Toast.Root>
+        )}
+      </ChakraToaster>
+    </Portal>
+  )
+}

package/components/ui/tooltip.tsx

@@ -0,0 +1,46 @@
+import { Tooltip as ChakraTooltip, Portal } from "@chakra-ui/react"
+import * as React from "react"
+
+export interface TooltipProps extends ChakraTooltip.RootProps {
+  showArrow?: boolean
+  portalled?: boolean
+  portalRef?: React.RefObject<HTMLElement>
+  content: React.ReactNode
+  contentProps?: ChakraTooltip.ContentProps
+  disabled?: boolean
+}
+
+export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
+  function Tooltip(props, ref) {
+    const {
+      showArrow,
+      children,
+      disabled,
+      portalled = true,
+      content,
+      contentProps,
+      portalRef,
+      ...rest
+    } = props
+
+    if (disabled) return children
+
+    return (
+      <ChakraTooltip.Root {...rest}>
+        <ChakraTooltip.Trigger asChild>{children}</ChakraTooltip.Trigger>
+        <Portal disabled={!portalled} container={portalRef}>
+          <ChakraTooltip.Positioner>
+            <ChakraTooltip.Content ref={ref} {...contentProps}>
+              {showArrow && (
+                <ChakraTooltip.Arrow>
+                  <ChakraTooltip.ArrowTip />
+                </ChakraTooltip.Arrow>
+              )}
+              {content}
+            </ChakraTooltip.Content>
+          </ChakraTooltip.Positioner>
+        </Portal>
+      </ChakraTooltip.Root>
+    )
+  },
+)

package/hooks/useBoolean.tsx

@@ -0,0 +1,11 @@
+'use client'
+import { useCallback, useState } from 'react'
+
+export default function useBoolean(initial: boolean = false) {
+    const [value, setValue] = useState(initial)
+    const on = () => setValue(true)
+    const off = () => setValue(false)
+    const toggle = () => setValue(prev => !prev)
+    const conditionalValue = useCallback( (a: any, b: any) => value ? a : b, [value] )
+    return [value, { on, off, toggle } as const, conditionalValue] as const
+}

package/hooks/useForwardAs.tsx

@@ -0,0 +1,29 @@
+/** Goal: combine List (which has context) with Stack (which is more geared towards CSS for Flex utility)
+ * Issue: <StackList as='menu'/> the as prop overwrites the as={Stack}
+ * Solution: The as prop has to be reapplied, so inside StackList as={<Stack as={as}}} />
+ *  Issue: That prevents props from being passed to Stack
+ *  Solution: use forwardRef as={forwardRef(({as, ...props}, ref) => <Stack ref={ref} as={as} {...props} /> )}
+ *   Issue: This is clearly a case to apply recursion.
+ *   Issue: as={forwardRef(...)} results in components being created dynamically, which might cause undesired rerenders
+ * 
+ */
+import { useMemo, forwardRef, ElementType } from 'react'
+
+export default function useForwardAs<C extends ElementType, AS extends ElementType>(Component: C, AsComponent?: AS): C {
+
+    // @ts-expect-error
+    return useMemo(() => (
+            forwardRef((props, ref) => {
+            if (AsComponent)
+                if (typeof AsComponent === 'string')
+                    // @ts-expect-error
+                    return <Component ref={ref} {...props} as={AsComponent} />
+                else
+                    // @ts-expect-error
+                    return <AsComponent ref={ref} {...props} as={Component} />
+            else
+                // @ts-expect-error
+                return <Component ref={ref} {...props} />
+        })
+    ), [AsComponent]) as C
+}

package/hooks/useHash copy.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+
+export default function useHash() {
+
+    const [hash, _setHash] = useState<string>('')
+
+    useEffect(() => {
+
+        const handleHashChange = () => {
+            _setHash(window.location.hash.slice(1))
+        }
+
+        handleHashChange()
+
+        window.addEventListener('hashchange', handleHashChange)
+
+        return () => window.removeEventListener('hashchange', handleHashChange)
+    }, [])
+
+    const setHash = useCallback((hash: string) => {
+        window.location.hash = hash
+    }, [])
+
+    return [hash, setHash] as const
+}

package/hooks/useHash.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+
+export default function useHash() {
+
+    const [hash, _setHash] = useState<string>('')
+
+    useEffect(() => {
+
+        const handleHashChange = () => {
+            _setHash(window.location.hash.slice(1))
+        }
+
+        handleHashChange()
+
+        window.addEventListener('hashchange', handleHashChange)
+
+        return () => window.removeEventListener('hashchange', handleHashChange)
+    }, [])
+
+    const setHash = useCallback((hash: string) => {
+        window.location.hash = hash
+    }, [])
+
+    return [hash, setHash] as const
+}

package/hooks/useIsMobile.tsx

@@ -0,0 +1,6 @@
+'use client'
+import { useBreakpointValue } from '@chakra-ui/react'
+
+export default function useIsMobile() {
+    return useBreakpointValue({ base: true, md: false }, { ssr: false })
+}

package/hooks/useOAuthTokens.ts

@@ -0,0 +1,97 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react'
+import { clientTokenStorage } from '@/lib/client-token-storage'
+
+interface TokenInfo {
+    platform: string
+    isConnected: boolean
+    expiresAt?: string
+}
+
+export function useOAuthTokens() {
+    const [tokens, setTokens] = useState<Record<string, TokenInfo>>({})
+    const [isLoading, setIsLoading] = useState(true)
+
+    const loadTokens = useCallback(async () => {
+        try {
+            setIsLoading(true)
+            
+            // First, fetch token status from server
+            const response = await fetch('/api/oauth/tokens')
+            if (response.ok) {
+                const data = await response.json()
+                const serverTokens: Record<string, TokenInfo> = {}
+                
+                if (data.tokens) {
+                    data.tokens.forEach((token: TokenInfo) => {
+                        serverTokens[token.platform] = token
+                    })
+                }
+                
+                setTokens(serverTokens)
+            }
+            
+            // Also check local storage for any tokens
+            const localTokens = await clientTokenStorage.getAllTokens()
+            if (localTokens.length > 0) {
+                setTokens(prev => {
+                    const updated = { ...prev }
+                    localTokens.forEach(token => {
+                        updated[token.platform] = {
+                            platform: token.platform,
+                            isConnected: true,
+                            expiresAt: token.expiresAt
+                        }
+                    })
+                    return updated
+                })
+            }
+        } catch (error) {
+            console.error('Failed to load tokens:', error)
+        } finally {
+            setIsLoading(false)
+        }
+    }, [])
+
+    useEffect(() => {
+        loadTokens()
+    }, [loadTokens])
+
+    const refreshTokenStatus = useCallback(async (platform: string) => {
+        try {
+            const response = await fetch(`/api/oauth/tokens?platform=${platform}`)
+            if (response.ok) {
+                const data = await response.json()
+                setTokens(prev => ({
+                    ...prev,
+                    [platform]: {
+                        platform,
+                        isConnected: data.isConnected,
+                        expiresAt: data.expiresAt
+                    }
+                }))
+                
+                // Also update local storage
+                if (data.accessToken) {
+                    await clientTokenStorage.storeToken({
+                        id: platform,
+                        platform,
+                        accessToken: data.accessToken,
+                        expiresAt: data.expiresAt,
+                        lastRefreshed: new Date().toISOString()
+                    })
+                }
+            }
+        } catch (error) {
+            console.error(`Failed to refresh token status for ${platform}:`, error)
+        }
+    }, [])
+
+    return {
+        tokens,
+        isLoading,
+        refreshTokenStatus,
+        reloadAllTokens: loadTokens
+    }
+}

package/hooks/useOpenRouterModels.ts

@@ -0,0 +1,80 @@
+'use client'
+import { useState, useEffect } from 'react'
+
+export interface OpenRouterModel {
+  id: string
+  name: string
+  description?: string
+  context_length?: number
+  pricing?: {
+    prompt?: string
+    completion?: string
+  }
+  architecture?: {
+    modality?: string
+  }
+}
+
+interface UseOpenRouterModelsResult {
+  models: OpenRouterModel[]
+  loading: boolean
+  error: string | null
+}
+
+export function useOpenRouterModels(): UseOpenRouterModelsResult {
+  const [models, setModels] = useState<OpenRouterModel[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    async function fetchModels() {
+      try {
+        setLoading(true)
+        setError(null)
+
+        const response = await fetch('https://openrouter.ai/api/v1/models', {
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        })
+
+        if (!response.ok) {
+          throw new Error(`Failed to fetch models: ${response.statusText}`)
+        }
+
+        const data = await response.json()
+        
+        // Filter and sort models for better UX
+        const filteredModels = data.data
+          ?.filter((model: any) => 
+            model.id && 
+            model.name && 
+            !model.id.includes(':free') // Exclude free models for cleaner list
+          )
+          ?.sort((a: any, b: any) => a.name.localeCompare(b.name))
+          ?.slice(0, 50) || [] // Limit to 50 models for performance
+
+        setModels(filteredModels)
+      } catch (err) {
+        console.error('Error fetching OpenRouter models:', err)
+        setError(err instanceof Error ? err.message : 'Unknown error occurred')
+        
+        // Fallback to default models
+        setModels([
+          { id: 'openrouter/auto', name: 'Auto (Recommended)' },
+          { id: 'anthropic/claude-3.5-sonnet', name: 'Claude 3.5 Sonnet' },
+          { id: 'openai/gpt-4o', name: 'GPT-4o' },
+          { id: 'openai/gpt-4o-mini', name: 'GPT-4o Mini' },
+          { id: 'google/gemini-pro', name: 'Gemini Pro' },
+          { id: 'meta-llama/llama-3.1-8b-instruct', name: 'Llama 3.1 8B' },
+        ])
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchModels()
+  }, [])
+
+  return { models, loading, error }
+}

package/lib/auth0.ts

@@ -0,0 +1,11 @@
+import { Auth0Client } from '@auth0/nextjs-auth0/server'
+import { redirect } from 'next/navigation'
+
+export const auth0 = new Auth0Client()
+
+export async function authenticate() {
+    const session = await auth0.getSession()
+    if (! session?.user)
+        return redirect('/auth/login')
+    return session.user
+}

package/lib/blob.ts

@@ -0,0 +1,3 @@
+import { put, del, getDownloadUrl } from '@vercel/blob'
+
+export const blob = { put, del, getDownloadUrl }