@inferencesh/ui 0.0.0-stage → 0.1.2

package/src/components/code-block/tokenizer.ts

@@ -0,0 +1,290 @@
+import type { Token, TokenType, LanguageDefinition } from './types'
+import { getLanguage } from './languages'
+
+export interface TokenizeContext {
+  /** Whether we're inside a multiline template literal */
+  inTemplateLiteral?: boolean
+  /** Whether we're inside a multiline comment */
+  inMultilineComment?: boolean
+}
+
+/**
+ * Get the keyword type for a word in a given language
+ */
+function getKeywordType(word: string, lang: LanguageDefinition): TokenType | null {
+  const { keywords } = lang
+
+  if (keywords.import?.has(word)) return 'keyword-import'
+  if (keywords.declaration?.has(word)) return 'keyword-declaration'
+  if (keywords.control?.has(word)) return 'keyword-control'
+  if (keywords.value?.has(word)) return 'keyword-value'
+  if (keywords.type?.has(word)) return 'type'
+  if (keywords.other?.has(word)) return 'keyword-other'
+
+  return null
+}
+
+/**
+ * Try to match a pattern at the start of the remaining code
+ */
+function tryMatch(remaining: string, patterns: RegExp[] | undefined): string | null {
+  if (!patterns) return null
+
+  for (const pattern of patterns) {
+    const match = remaining.match(pattern)
+    if (match) {
+      return match[0]
+    }
+  }
+
+  return null
+}
+
+/**
+ * Check if language supports JSX
+ */
+function isJsxLanguage(languageName: string): boolean {
+  const jsxLangs = ['javascript', 'typescript', 'jsx', 'tsx', 'js', 'ts']
+  return jsxLangs.includes(languageName.toLowerCase())
+}
+
+/**
+ * Check if language is JSON
+ */
+function isJsonLanguage(languageName: string): boolean {
+  return ['json', 'jsonc'].includes(languageName.toLowerCase())
+}
+
+/**
+ * Heuristic: detect if a line likely starts inside a JSX tag
+ * This handles multi-line JSX where attributes are on separate lines
+ *
+ * Patterns that suggest we're inside a JSX tag:
+ * - Line starts with whitespace + attribute pattern (word followed by = and { or " or ')
+ * - Line starts with whitespace + />
+ * - Line starts with whitespace + > followed by content or closing tag
+ */
+function detectJsxContext(code: string): boolean {
+  // Check for: whitespace + /> (self-closing)
+  if (/^\s+\/>/.test(code)) {
+    return true
+  }
+  // Check for: whitespace + > (closing bracket, but not >= operator)
+  if (/^\s+>(?!=)/.test(code)) {
+    return true
+  }
+  // Check for JSX attribute: whitespace + word + = + { or " or ' (not word=word which is normal code)
+  // This distinguishes "  propName={" from "  const x ="
+  if (/^\s+[a-zA-Z_][a-zA-Z0-9_-]*\s*=\s*[{{"']/.test(code)) {
+    return true
+  }
+  // Check for: whitespace + { (JSX expression in attribute value on its own line)
+  if (/^\s+\{\s*$/.test(code) || /^\s+\{[^}]*$/.test(code)) {
+    return true
+  }
+  return false
+}
+
+/**
+ * Tokenize a line of code with context for multiline constructs
+ */
+export function tokenize(
+  code: string,
+  languageName: string,
+  context?: TokenizeContext
+): { tokens: Token[]; context: TokenizeContext } {
+  const lang = getLanguage(languageName)
+  const tokens: Token[] = []
+  let remaining = code
+  const supportsJsx = isJsxLanguage(languageName)
+  const isJson = isJsonLanguage(languageName)
+
+  // Carry over context from previous line
+  let inTemplateLiteral = context?.inTemplateLiteral ?? false
+
+  // If we're inside a template literal from a previous line, treat the whole line as a string
+  // until we find a closing backtick
+  if (inTemplateLiteral) {
+    const closingIndex = remaining.indexOf('`')
+    if (closingIndex === -1) {
+      // No closing backtick, entire line is part of string
+      tokens.push({ type: 'string', content: remaining })
+      return { tokens, context: { inTemplateLiteral: true } }
+    } else {
+      // Found closing backtick
+      const stringPart = remaining.slice(0, closingIndex + 1)
+      tokens.push({ type: 'string', content: stringPart })
+      remaining = remaining.slice(closingIndex + 1)
+      inTemplateLiteral = false
+      // Continue tokenizing the rest of the line
+    }
+  }
+
+  // Track if we're inside a JSX tag (between < and >)
+  // Use heuristic to detect if line starts in JSX context
+  let inJsxTag = supportsJsx && detectJsxContext(code) && !inTemplateLiteral
+
+  while (remaining.length > 0) {
+    let matched = false
+
+    // Try to match comments (but not in JSX tag context)
+    if (!inJsxTag && lang?.patterns.comment) {
+      const comment = tryMatch(remaining, lang.patterns.comment)
+      if (comment) {
+        tokens.push({ type: 'comment', content: comment })
+        remaining = remaining.slice(comment.length)
+        matched = true
+        continue
+      }
+    }
+
+    // JSX handling for JS/TS languages
+    if (supportsJsx) {
+      // Opening tag: <Component or <div or </Component
+      const jsxOpenTag = remaining.match(/^<\/?([A-Z][a-zA-Z0-9]*|[a-z][a-z0-9-]*)/)
+      if (jsxOpenTag) {
+        // Push the < or </
+        const bracket = remaining[0] === '<' && remaining[1] === '/' ? '</' : '<'
+        tokens.push({ type: 'punctuation', content: bracket })
+        remaining = remaining.slice(bracket.length)
+
+        // Push the tag name
+        const tagName = jsxOpenTag[1]
+        tokens.push({ type: 'tag', content: tagName })
+        remaining = remaining.slice(tagName.length)
+
+        inJsxTag = true
+        matched = true
+        continue
+      }
+
+      // Self-closing /> or closing >
+      if (inJsxTag) {
+        if (remaining.startsWith('/>')) {
+          tokens.push({ type: 'punctuation', content: '/>' })
+          remaining = remaining.slice(2)
+          inJsxTag = false
+          matched = true
+          continue
+        }
+        if (remaining.startsWith('>')) {
+          tokens.push({ type: 'punctuation', content: '>' })
+          remaining = remaining.slice(1)
+          inJsxTag = false
+          matched = true
+          continue
+        }
+
+        // JSX attribute: propName= or propName (boolean) or propName (before />)
+        const jsxAttr = remaining.match(/^([a-zA-Z_][a-zA-Z0-9_-]*)(?=\s*=|\s*\/>|\s*>|\s+[a-zA-Z_]|\s*$)/)
+        if (jsxAttr) {
+          tokens.push({ type: 'attribute', content: jsxAttr[1] })
+          remaining = remaining.slice(jsxAttr[1].length)
+          matched = true
+          continue
+        }
+      }
+    }
+
+    // Try to match strings
+    if (lang?.patterns.string) {
+      const str = tryMatch(remaining, lang.patterns.string)
+      if (str) {
+        // In JSON, check if this string is a key (followed by :)
+        const afterStr = remaining.slice(str.length)
+        const isJsonKey = isJson && /^\s*:/.test(afterStr)
+        tokens.push({ type: isJsonKey ? 'property' : 'string', content: str })
+        remaining = remaining.slice(str.length)
+        matched = true
+        continue
+      }
+
+      // Check for template literal that starts but doesn't end (multiline)
+      // Only trigger if we're AT a backtick and it doesn't close on this line
+      if (remaining[0] === '`') {
+        // Template literal starts but no closing backtick on this line
+        tokens.push({ type: 'string', content: remaining })
+        return { tokens, context: { inTemplateLiteral: true } }
+      }
+    }
+
+    // Fallback string patterns for unknown languages
+    if (!lang) {
+      const doubleStr = remaining.match(/^"(?:[^"\\]|\\.)*"/)
+      if (doubleStr) {
+        tokens.push({ type: 'string', content: doubleStr[0] })
+        remaining = remaining.slice(doubleStr[0].length)
+        matched = true
+        continue
+      }
+
+      const singleStr = remaining.match(/^'(?:[^'\\]|\\.)*'/)
+      if (singleStr) {
+        tokens.push({ type: 'string', content: singleStr[0] })
+        remaining = remaining.slice(singleStr[0].length)
+        matched = true
+        continue
+      }
+    }
+
+    // Numbers
+    const number = remaining.match(/^-?\b\d+\.?\d*(?:e[+-]?\d+)?\b/i)
+    if (number) {
+      tokens.push({ type: 'number', content: number[0] })
+      remaining = remaining.slice(number[0].length)
+      matched = true
+      continue
+    }
+
+    // Keywords and identifiers (when not in JSX tag)
+    const word = remaining.match(/^[a-zA-Z_$][a-zA-Z0-9_$]*/)
+    if (word) {
+      const afterWord = remaining.slice(word[0].length)
+      // Check if this is an object property key (word followed by : but not ::)
+      const isPropertyKey = /^\s*:(?!:)/.test(afterWord)
+
+      let tokenType: TokenType | null = null
+      if (isPropertyKey) {
+        tokenType = 'property'
+      } else if (lang && !inJsxTag) {
+        tokenType = getKeywordType(word[0], lang)
+      }
+
+      tokens.push({
+        type: tokenType,
+        content: word[0],
+      })
+      remaining = remaining.slice(word[0].length)
+      matched = true
+      continue
+    }
+
+    // Operators (common across most languages)
+    const operator = remaining.match(
+      /^(?:===|!==|==|!=|<=|>=|=>|->|::|\.\.\.?|\?\?|\?\.|&&|\|\||[+\-*/%<>=!&|^~?:])/
+    )
+    if (operator) {
+      tokens.push({ type: 'operator', content: operator[0] })
+      remaining = remaining.slice(operator[0].length)
+      matched = true
+      continue
+    }
+
+    // Punctuation
+    const punct = remaining.match(/^[{}[\]();,.<>]/)
+    if (punct) {
+      tokens.push({ type: 'punctuation', content: punct[0] })
+      remaining = remaining.slice(punct[0].length)
+      matched = true
+      continue
+    }
+
+    // Default: single character (whitespace, etc.)
+    if (!matched) {
+      tokens.push({ type: null, content: remaining[0] })
+      remaining = remaining.slice(1)
+    }
+  }
+
+  return { tokens, context: { inTemplateLiteral } }
+}

package/src/components/code-block/types.ts

@@ -0,0 +1,38 @@
+export type TokenType =
+  | 'comment'
+  | 'string'
+  | 'keyword-import'      // import, export, from, as
+  | 'keyword-declaration' // const, let, var, function, class, type, interface
+  | 'keyword-control'     // if, else, return, for, while
+  | 'keyword-value'       // true, false, null, undefined
+  | 'keyword-other'       // new, this, typeof, etc.
+  | 'number'
+  | 'function'
+  | 'property'
+  | 'operator'
+  | 'punctuation'
+  | 'type'                // type annotations in TS
+  | 'tag'                 // JSX/HTML tag names
+  | 'attribute'           // JSX/HTML attributes
+
+export interface Token {
+  type: TokenType | null
+  content: string
+}
+
+export interface LanguageDefinition {
+  name: string
+  aliases: string[]
+  keywords: {
+    import?: Set<string>
+    declaration?: Set<string>
+    control?: Set<string>
+    value?: Set<string>
+    other?: Set<string>
+    type?: Set<string>
+  }
+  patterns: {
+    comment?: RegExp[]
+    string?: RegExp[]
+  }
+}

package/src/components/code-block/utils.ts

@@ -0,0 +1,39 @@
+import React from 'react'
+
+/**
+ * Extract text content from React children
+ * Handles strings, numbers, arrays, and nested elements
+ */
+export function getTextContent(node: React.ReactNode): string {
+  if (typeof node === 'string') return node
+  if (typeof node === 'number') return String(node)
+  if (!node) return ''
+  if (Array.isArray(node)) return node.map(getTextContent).join('')
+  if (React.isValidElement(node)) {
+    return getTextContent((node.props as { children?: React.ReactNode }).children)
+  }
+  return ''
+}
+
+/**
+ * Split code into lines, removing trailing empty line if present
+ */
+export function splitLines(code: string): string[] {
+  const lines = code.split('\n')
+  if (lines.length > 1 && lines[lines.length - 1] === '') {
+    lines.pop()
+  }
+  return lines
+}
+
+/**
+ * Copy text to clipboard
+ */
+export async function copyToClipboard(text: string): Promise<boolean> {
+  try {
+    await navigator.clipboard.writeText(text)
+    return true
+  } catch {
+    return false
+  }
+}

package/src/components/code.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+import { useMemo } from 'react'
+import { tokenize } from './code-block/tokenizer'
+import { getTokenStyle } from './code-block/styles'
+import { normalizeLanguage } from './code-block/languages'
+
+function HighlightedCode({ code, language }: { code: string; language: string }) {
+  const tokens = useMemo(() => tokenize(code.trim(), language).tokens, [code, language])
+
+  return (
+    <>
+      {tokens.map((token, i) => {
+        const style = getTokenStyle(token.type)
+        return style ? (
+          <span key={i} className={style}>{token.content}</span>
+        ) : (
+          <span key={i}>{token.content}</span>
+        )
+      })}
+    </>
+  )
+}
+
+interface CodeProps {
+  code: string
+  language: string
+  title?: string
+  className?: string
+}
+
+export function Code({ code, language, title, className = '' }: CodeProps) {
+  const normalizedLang = normalizeLanguage(language)
+
+  return (
+    <div className={`rounded-lg border border-border bg-muted/40 dark:bg-muted/30 overflow-hidden text-xs max-h-96 overflow-y-auto ${className}`}>
+      {title && (
+        <div className="flex items-center justify-between px-4 py-2 border-b border-border/30 bg-muted/50">
+          <span className="text-xs font-mono text-muted-foreground">{title}</span>
+          <span className="text-xs text-muted-foreground/50">{language}</span>
+        </div>
+      )}
+      <pre className="whitespace-pre-wrap font-mono leading-relaxed p-4">
+        <HighlightedCode code={code} language={normalizedLang} />
+      </pre>
+    </div>
+  )
+}

package/src/components/cookie-consent.tsx

@@ -0,0 +1,137 @@
+import { CookieIcon } from "lucide-react";
+import { Button } from "../shadcn/button";
+import { cn } from "../utils/cn";
+import { useEffect, useState } from "react";
+
+const cookieDomain =
+  typeof window !== "undefined" &&
+  window.location.hostname.endsWith(".inference.sh")
+    ? "; domain=.inference.sh"
+    : "";
+
+interface CookieConsentProps {
+  variant?: "default" | "small";
+  demo?: boolean;
+  onAccept?: () => void;
+  onDecline?: () => void;
+}
+
+export default function CookieConsent({
+  variant = "default",
+  demo = false,
+  onAccept,
+  onDecline,
+}: CookieConsentProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [hide, setHide] = useState(false);
+
+  const accept = (): void => {
+    setIsOpen(false);
+    document.cookie = `cookieConsent=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/${cookieDomain}`;
+    setTimeout(() => setHide(true), 700);
+    onAccept?.();
+  };
+
+  const decline = (): void => {
+    setIsOpen(false);
+    setTimeout(() => setHide(true), 700);
+    onDecline?.();
+  };
+
+  useEffect(() => {
+    try {
+      if (document.cookie.includes("cookieConsent=true")) {
+        if (!demo) {
+          setHide(true);
+          return;
+        }
+      }
+      setIsOpen(true);
+    } catch {
+      // ignore
+    }
+  }, [demo]);
+
+  return variant !== "small" ? (
+    <div
+      className={cn(
+        "fixed z-[200] bottom-0 left-0 right-0 sm:left-4 sm:bottom-4 w-full sm:max-w-md duration-700",
+        !isOpen
+          ? "transition-[opacity,transform] translate-y-8 opacity-0"
+          : "transition-[opacity,transform] translate-y-0 opacity-100",
+        hide && "hidden",
+      )}
+    >
+      <div className="dark:bg-card bg-background rounded-md m-3 border shadow-lg">
+        <div className="grid gap-2">
+          <div className="border-b h-14 flex items-center justify-between p-4">
+            <p className="text-lg font-medium">we use cookies</p>
+            <CookieIcon className="h-[1.2rem] w-[1.2rem]" />
+          </div>
+          <div className="p-4">
+            <p className="text-sm font-normal text-start">
+              we use cookies to ensure you get the best experience on our
+              website. for more information on how we use cookies, please see our
+              cookie policy.
+              <br />
+              <br />
+              <span className="text-xs">
+                by clicking &quot;
+                <span className="font-medium opacity-80">accept</span>&quot;,
+                you agree to our use of cookies.
+              </span>
+              <br />
+              <a href="#" className="text-xs underline">
+                learn more.
+              </a>
+            </p>
+          </div>
+          <div className="flex gap-2 p-4 py-5 border-t dark:bg-background/20">
+            <Button onClick={accept} className="flex-1">
+              accept
+            </Button>
+            <Button onClick={decline} className="flex-1" variant="secondary">
+              decline
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  ) : (
+    <div
+      className={cn(
+        "fixed z-[200] bottom-0 left-0 right-0 sm:left-4 sm:bottom-4 w-full sm:max-w-md duration-700",
+        !isOpen
+          ? "transition-[opacity,transform] translate-y-8 opacity-0"
+          : "transition-[opacity,transform] translate-y-0 opacity-100",
+        hide && "hidden",
+      )}
+    >
+      <div className="m-3 dark:bg-card bg-background border rounded-lg">
+        <div className="flex items-center justify-between p-3">
+          <p className="text-lg font-medium">we use cookies</p>
+          <CookieIcon className="h-[1.2rem] w-[1.2rem]" />
+        </div>
+        <div className="p-3 -mt-2">
+          <p className="text-sm text-left text-muted-foreground">
+            we use cookies to ensure you get the best experience on our website.
+            for more information on how we use cookies, please see our cookie
+            policy.
+          </p>
+        </div>
+        <div className="p-3 flex items-center gap-2 mt-2 border-t">
+          <Button onClick={accept} className="flex-1 h-9 rounded-full">
+            accept
+          </Button>
+          <Button
+            onClick={decline}
+            className="flex-1 h-9 rounded-full"
+            variant="outline"
+          >
+            decline
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/copy-button.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import { Check, Copy } from "lucide-react"
+
+import { Button } from "../shadcn/button"
+import { useCopyToClipboard } from "../hooks/use-copy-to-clipboard"
+import { cn } from "cn"
+
+type CopyButtonProps = {
+  content: string
+  copyMessage?: string
+}
+
+export function CopyButton({ content, copyMessage }: CopyButtonProps) {
+  const { isCopied, handleCopy } = useCopyToClipboard({
+    text: content,
+    copyMessage,
+  })
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      className="relative h-6 w-6"
+      aria-label="Copy to clipboard"
+      onClick={handleCopy}
+    >
+      <div className="absolute inset-0 flex items-center justify-center">
+        <Check
+          className={cn(
+            "h-4 w-4 transition-transform ease-in-out",
+            isCopied ? "scale-100" : "scale-0"
+          )}
+        />
+      </div>
+      <Copy
+        className={cn(
+          "h-4 w-4 transition-transform ease-in-out",
+          isCopied ? "scale-0" : "scale-100"
+        )}
+      />
+    </Button>
+  )
+}