langwatch 0.2.0 → 0.3.0-prerelease.1

package/example/components/sidebar-toggle.tsx

@@ -1,24 +0,0 @@
-'use client'
-
-import * as React from 'react'
-
-import { useSidebar } from '@/lib/hooks/use-sidebar'
-import { Button } from '@/components/ui/button'
-import { IconSidebar } from '@/components/ui/icons'
-
-export function SidebarToggle() {
-  const { toggleSidebar } = useSidebar()
-
-  return (
-    <Button
-      variant="ghost"
-      className="-ml-2 hidden size-9 p-0 lg:flex"
-      onClick={() => {
-        toggleSidebar()
-      }}
-    >
-      <IconSidebar className="size-6" />
-      <span className="sr-only">Toggle Sidebar</span>
-    </Button>
-  )
-}

package/example/components/sidebar.tsx

@@ -1,21 +0,0 @@
-'use client'
-
-import * as React from 'react'
-
-import { useSidebar } from '@/lib/hooks/use-sidebar'
-import { cn } from '@/lib/utils'
-
-export interface SidebarProps extends React.ComponentProps<'div'> {}
-
-export function Sidebar({ className, children }: SidebarProps) {
-  const { isSidebarOpen, isLoading } = useSidebar()
-
-  return (
-    <div
-      data-state={isSidebarOpen && !isLoading ? 'open' : 'closed'}
-      className={cn(className, 'h-full flex-col dark:bg-zinc-950')}
-    >
-      {children}
-    </div>
-  )
-}

package/example/components/signup-form.tsx

@@ -1,95 +0,0 @@
-'use client'
-
-import { useFormState, useFormStatus } from 'react-dom'
-import { signup } from '@/app/signup/actions'
-import Link from 'next/link'
-import { useEffect } from 'react'
-import { toast } from 'sonner'
-import { IconSpinner } from './ui/icons'
-import { getMessageFromCode } from '@/lib/utils'
-import { useRouter } from 'next/navigation'
-
-export default function SignupForm() {
-  const router = useRouter()
-  const [result, dispatch] = useFormState(signup, undefined)
-
-  useEffect(() => {
-    if (result) {
-      if (result.type === 'error') {
-        toast.error(getMessageFromCode(result.resultCode))
-      } else {
-        toast.success(getMessageFromCode(result.resultCode))
-        router.refresh()
-      }
-    }
-  }, [result, router])
-
-  return (
-    <form
-      action={dispatch}
-      className="flex flex-col items-center gap-4 space-y-3"
-    >
-      <div className="w-full flex-1 rounded-lg border bg-white px-6 pb-4 pt-8 shadow-md md:w-96 dark:bg-zinc-950">
-        <h1 className="mb-3 text-2xl font-bold">Sign up for an account!</h1>
-        <div className="w-full">
-          <div>
-            <label
-              className="mb-3 mt-5 block text-xs font-medium text-zinc-400"
-              htmlFor="email"
-            >
-              Email
-            </label>
-            <div className="relative">
-              <input
-                className="peer block w-full rounded-md border bg-zinc-50 px-2 py-[9px] text-sm outline-none placeholder:text-zinc-500 dark:border-zinc-800 dark:bg-zinc-950"
-                id="email"
-                type="email"
-                name="email"
-                placeholder="Enter your email address"
-                required
-              />
-            </div>
-          </div>
-          <div className="mt-4">
-            <label
-              className="mb-3 mt-5 block text-xs font-medium text-zinc-400"
-              htmlFor="password"
-            >
-              Password
-            </label>
-            <div className="relative">
-              <input
-                className="peer block w-full rounded-md border bg-zinc-50 px-2 py-[9px] text-sm outline-none placeholder:text-zinc-500 dark:border-zinc-800 dark:bg-zinc-950"
-                id="password"
-                type="password"
-                name="password"
-                placeholder="Enter password"
-                required
-                minLength={6}
-              />
-            </div>
-          </div>
-        </div>
-        <LoginButton />
-      </div>
-
-      <Link href="/login" className="flex flex-row gap-1 text-sm text-zinc-400">
-        Already have an account?
-        <div className="font-semibold underline">Log in</div>
-      </Link>
-    </form>
-  )
-}
-
-function LoginButton() {
-  const { pending } = useFormStatus()
-
-  return (
-    <button
-      className="my-4 flex h-10 w-full flex-row items-center justify-center rounded-md bg-zinc-900 p-2 text-sm font-semibold text-zinc-100 hover:bg-zinc-800 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200"
-      aria-disabled={pending}
-    >
-      {pending ? <IconSpinner /> : 'Create account'}
-    </button>
-  )
-}

package/example/components/stocks/events-skeleton.tsx

@@ -1,31 +0,0 @@
-const placeholderEvents = [
-  {
-    date: '2022-10-01',
-    headline: 'NVIDIA releases new AI-powered graphics card',
-    description:
-      'NVIDIA unveils the latest graphics card infused with AI capabilities, revolutionizing gaming and rendering experiences.'
-  }
-]
-
-export const EventsSkeleton = () => {
-  return (
-    <div className="-mt-2 flex w-full flex-col gap-2 py-4">
-      {placeholderEvents.map(event => (
-        <div
-          key={event.date}
-          className="flex shrink-0 flex-col gap-1 rounded-lg bg-zinc-800 p-4"
-        >
-          <div className="w-fit rounded-md bg-zinc-700 text-sm text-transparent">
-            {event.date}
-          </div>
-          <div className="w-fit rounded-md bg-zinc-700 text-transparent">
-            {event.headline}
-          </div>
-          <div className="w-auto rounded-md bg-zinc-700 text-transparent">
-            {event.description.slice(0, 70)}...
-          </div>
-        </div>
-      ))}
-    </div>
-  )
-}

package/example/components/stocks/events.tsx

@@ -1,30 +0,0 @@
-import { format, parseISO } from 'date-fns'
-
-interface Event {
-  date: string
-  headline: string
-  description: string
-}
-
-export function Events({ props: events }: { props: Event[] }) {
-  return (
-    <div className="-mt-2 flex w-full flex-col gap-2 py-4">
-      {events.map(event => (
-        <div
-          key={event.date}
-          className="flex shrink-0 flex-col gap-1 rounded-lg bg-zinc-800 p-4"
-        >
-          <div className="text-sm text-zinc-400">
-            {format(parseISO(event.date), 'dd LLL, yyyy')}
-          </div>
-          <div className="text-base font-bold text-zinc-200">
-            {event.headline}
-          </div>
-          <div className="text-zinc-500">
-            {event.description.slice(0, 70)}...
-          </div>
-        </div>
-      ))}
-    </div>
-  )
-}

package/example/components/stocks/index.tsx

@@ -1,36 +0,0 @@
-'use client'
-
-import dynamic from 'next/dynamic'
-import { StockSkeleton } from './stock-skeleton'
-import { StocksSkeleton } from './stocks-skeleton'
-import { EventsSkeleton } from './events-skeleton'
-
-export { spinner } from './spinner'
-export { BotCard, BotMessage, SystemMessage } from './message'
-
-const Stock = dynamic(() => import('./stock').then(mod => mod.Stock), {
-  ssr: false,
-  loading: () => <StockSkeleton />
-})
-
-const Purchase = dynamic(
-  () => import('./stock-purchase').then(mod => mod.Purchase),
-  {
-    ssr: false,
-    loading: () => (
-      <div className="h-[375px] rounded-xl border bg-zinc-950 p-4 text-green-400 sm:h-[314px]" />
-    )
-  }
-)
-
-const Stocks = dynamic(() => import('./stocks').then(mod => mod.Stocks), {
-  ssr: false,
-  loading: () => <StocksSkeleton />
-})
-
-const Events = dynamic(() => import('./events').then(mod => mod.Events), {
-  ssr: false,
-  loading: () => <EventsSkeleton />
-})
-
-export { Stock, Purchase, Stocks, Events }

package/example/components/stocks/message.tsx

@@ -1,134 +0,0 @@
-'use client'
-
-import { IconOpenAI, IconUser } from '@/components/ui/icons'
-import { cn } from '@/lib/utils'
-import { spinner } from './spinner'
-import { CodeBlock } from '../ui/codeblock'
-import { MemoizedReactMarkdown } from '../markdown'
-import remarkGfm from 'remark-gfm'
-import remarkMath from 'remark-math'
-import { StreamableValue, useStreamableValue } from 'ai/rsc'
-import { useStreamableText } from '@/lib/hooks/use-streamable-text'
-
-// Different types of message bubbles.
-
-export function UserMessage({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="group relative flex items-start md:-ml-12">
-      <div className="flex size-[25px] shrink-0 select-none items-center justify-center rounded-md border bg-background shadow-sm">
-        <IconUser />
-      </div>
-      <div className="ml-4 flex-1 space-y-2 overflow-hidden pl-2">
-        {children}
-      </div>
-    </div>
-  )
-}
-
-export function BotMessage({
-  content,
-  className
-}: {
-  content: string | StreamableValue<string>
-  className?: string
-}) {
-  const text = useStreamableText(content)
-
-  return (
-    <div className={cn('group relative flex items-start md:-ml-12', className)}>
-      <div className="flex size-[24px] shrink-0 select-none items-center justify-center rounded-md border bg-primary text-primary-foreground shadow-sm">
-        <IconOpenAI />
-      </div>
-      <div className="ml-4 flex-1 space-y-2 overflow-hidden px-1">
-        <MemoizedReactMarkdown
-          className="prose break-words dark:prose-invert prose-p:leading-relaxed prose-pre:p-0"
-          remarkPlugins={[remarkGfm, remarkMath]}
-          components={{
-            p({ children }) {
-              return <p className="mb-2 last:mb-0">{children}</p>
-            },
-            code({ node, inline, className, children, ...props }) {
-              if (children.length) {
-                if (children[0] == '▍') {
-                  return (
-                    <span className="mt-1 animate-pulse cursor-default">▍</span>
-                  )
-                }
-
-                children[0] = (children[0] as string).replace('`▍`', '▍')
-              }
-
-              const match = /language-(\w+)/.exec(className || '')
-
-              if (inline) {
-                return (
-                  <code className={className} {...props}>
-                    {children}
-                  </code>
-                )
-              }
-
-              return (
-                <CodeBlock
-                  key={Math.random()}
-                  language={(match && match[1]) || ''}
-                  value={String(children).replace(/\n$/, '')}
-                  {...props}
-                />
-              )
-            }
-          }}
-        >
-          {text}
-        </MemoizedReactMarkdown>
-      </div>
-    </div>
-  )
-}
-
-export function BotCard({
-  children,
-  showAvatar = true
-}: {
-  children: React.ReactNode
-  showAvatar?: boolean
-}) {
-  return (
-    <div className="group relative flex items-start md:-ml-12">
-      <div
-        className={cn(
-          'flex size-[24px] shrink-0 select-none items-center justify-center rounded-md border bg-primary text-primary-foreground shadow-sm',
-          !showAvatar && 'invisible'
-        )}
-      >
-        <IconOpenAI />
-      </div>
-      <div className="ml-4 flex-1 pl-2">{children}</div>
-    </div>
-  )
-}
-
-export function SystemMessage({ children }: { children: React.ReactNode }) {
-  return (
-    <div
-      className={
-        'mt-2 flex items-center justify-center gap-2 text-xs text-gray-500'
-      }
-    >
-      <div className={'max-w-[600px] flex-initial p-2'}>{children}</div>
-    </div>
-  )
-}
-
-export function SpinnerMessage() {
-  return (
-    <div className="group relative flex items-start md:-ml-12">
-      <div className="flex size-[24px] shrink-0 select-none items-center justify-center rounded-md border bg-primary text-primary-foreground shadow-sm">
-        <IconOpenAI />
-      </div>
-      <div className="ml-4 h-[24px] flex flex-row items-center flex-1 space-y-2 overflow-hidden px-1">
-        {spinner}
-      </div>
-    </div>
-  )
-}

package/example/components/stocks/spinner.tsx

@@ -1,16 +0,0 @@
-'use client'
-
-export const spinner = (
-  <svg
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.5"
-    viewBox="0 0 24 24"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    xmlns="http://www.w3.org/2000/svg"
-    className="size-5 animate-spin stroke-zinc-400"
-  >
-    <path d="M12 3v3m6.366-.366-2.12 2.12M21 12h-3m.366 6.366-2.12-2.12M12 21v-3m-6.366.366 2.12-2.12M3 12h3m-.366-6.366 2.12 2.12"></path>
-  </svg>
-)

package/example/components/stocks/stock-purchase.tsx

@@ -1,146 +0,0 @@
-'use client'
-
-import { useId, useState } from 'react'
-import { useActions, useAIState, useUIState } from 'ai/rsc'
-import { formatNumber } from '@/lib/utils'
-
-import type { AI } from '@/lib/chat/vercel-ai'
-
-interface Purchase {
-  numberOfShares?: number
-  symbol: string
-  price: number
-  status: 'requires_action' | 'completed' | 'expired'
-}
-
-export function Purchase({
-  props: { numberOfShares, symbol, price, status = 'expired' }
-}: {
-  props: Purchase
-}) {
-  const [value, setValue] = useState(numberOfShares || 100)
-  const [purchasingUI, setPurchasingUI] = useState<null | React.ReactNode>(null)
-  const [aiState, setAIState] = useAIState<typeof AI>()
-  const [, setMessages] = useUIState<typeof AI>()
-  const { confirmPurchase } = useActions()
-
-  // Unique identifier for this UI component.
-  const id = useId()
-
-  // Whenever the slider changes, we need to update the local value state and the history
-  // so LLM also knows what's going on.
-  function onSliderChange(e: React.ChangeEvent<HTMLInputElement>) {
-    const newValue = Number(e.target.value)
-    setValue(newValue)
-
-    // Insert a hidden history info to the list.
-    const message = {
-      role: 'system' as const,
-      content: `[User has changed to purchase ${newValue} shares of ${name}. Total cost: $${(
-        newValue * price
-      ).toFixed(2)}]`,
-
-      // Identifier of this UI component, so we don't insert it many times.
-      id
-    }
-
-    // If last history state is already this info, update it. This is to avoid
-    // adding every slider change to the history.
-    if (aiState.messages[aiState.messages.length - 1]?.id === id) {
-      setAIState({
-        ...aiState,
-        messages: [...aiState.messages.slice(0, -1), message]
-      })
-
-      return
-    }
-
-    // If it doesn't exist, append it to history.
-    setAIState({ ...aiState, messages: [...aiState.messages, message] })
-  }
-
-  return (
-    <div className="p-4 text-green-400 border rounded-xl bg-zinc-950">
-      <div className="inline-block float-right px-2 py-1 text-xs rounded-full bg-white/10">
-        +1.23% ↑
-      </div>
-      <div className="text-lg text-zinc-300">{symbol}</div>
-      <div className="text-3xl font-bold">${price}</div>
-      {purchasingUI ? (
-        <div className="mt-4 text-zinc-200">{purchasingUI}</div>
-      ) : status === 'requires_action' ? (
-        <>
-          <div className="relative pb-6 mt-6">
-            <p>Shares to purchase</p>
-            <input
-              id="labels-range-input"
-              type="range"
-              value={value}
-              onChange={onSliderChange}
-              min="10"
-              max="1000"
-              className="w-full h-1 rounded-lg appearance-none cursor-pointer bg-zinc-600 accent-green-500 dark:bg-zinc-700"
-            />
-            <span className="absolute text-xs bottom-1 start-0 text-zinc-400">
-              10
-            </span>
-            <span className="absolute text-xs -translate-x-1/2 bottom-1 start-1/3 text-zinc-400 rtl:translate-x-1/2">
-              100
-            </span>
-            <span className="absolute text-xs -translate-x-1/2 bottom-1 start-2/3 text-zinc-400 rtl:translate-x-1/2">
-              500
-            </span>
-            <span className="absolute text-xs bottom-1 end-0 text-zinc-400">
-              1000
-            </span>
-          </div>
-
-          <div className="mt-6">
-            <p>Total cost</p>
-            <div className="flex flex-wrap items-center text-xl font-bold sm:items-end sm:gap-2 sm:text-3xl">
-              <div className="flex flex-col basis-1/3 tabular-nums sm:basis-auto sm:flex-row sm:items-center sm:gap-2">
-                {value}
-                <span className="mb-1 text-sm font-normal text-zinc-600 sm:mb-0 dark:text-zinc-400">
-                  shares
-                </span>
-              </div>
-              <div className="text-center basis-1/3 sm:basis-auto">×</div>
-              <span className="flex flex-col basis-1/3 tabular-nums sm:basis-auto sm:flex-row sm:items-center sm:gap-2">
-                ${price}
-                <span className="mb-1 ml-1 text-sm font-normal text-zinc-600 sm:mb-0 dark:text-zinc-400">
-                  per share
-                </span>
-              </span>
-              <div className="pt-2 mt-2 text-center border-t basis-full border-t-zinc-700 sm:mt-0 sm:basis-auto sm:border-0 sm:pt-0 sm:text-left">
-                = <span>{formatNumber(value * price)}</span>
-              </div>
-            </div>
-          </div>
-
-          <button
-            className="w-full px-4 py-2 mt-6 font-bold bg-green-400 rounded-lg text-zinc-900 hover:bg-green-500"
-            onClick={async () => {
-              const response = await confirmPurchase(symbol, price, value)
-              setPurchasingUI(response.purchasingUI)
-
-              // Insert a new system message to the UI.
-              setMessages((currentMessages: any) => [
-                ...currentMessages,
-                response.newMessage
-              ])
-            }}
-          >
-            Purchase
-          </button>
-        </>
-      ) : status === 'completed' ? (
-        <p className="mb-2 text-white">
-          You have successfully purchased {value} ${symbol}. Total cost:{' '}
-          {formatNumber(value * price)}
-        </p>
-      ) : status === 'expired' ? (
-        <p className="mb-2 text-white">Your checkout session has expired!</p>
-      ) : null}
-    </div>
-  )
-}

package/example/components/stocks/stock-skeleton.tsx

@@ -1,22 +0,0 @@
-export const StockSkeleton = () => {
-  return (
-    <div className="rounded-xl border border-zinc-800 bg-zinc-950 p-4 text-green-400">
-      <div className="float-right inline-block w-fit rounded-full bg-zinc-700 px-2 py-1 text-xs text-transparent">
-        xxxxxxx
-      </div>
-      <div className="mb-1 w-fit rounded-md bg-zinc-700 text-lg text-transparent">
-        xxxx
-      </div>
-      <div className="w-fit rounded-md bg-zinc-700 text-3xl font-bold text-transparent">
-        xxxx
-      </div>
-      <div className="text mt-1 w-fit rounded-md bg-zinc-700 text-xs text-transparent">
-        xxxxxx xxx xx xxxx xx xxx
-      </div>
-
-      <div className="relative -mx-4 cursor-col-resize">
-        <div style={{ height: 146 }}></div>
-      </div>
-    </div>
-  )
-}