langwatch 0.0.1

package/example/lib/hooks/use-scroll-anchor.tsx

@@ -0,0 +1,86 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+export const useScrollAnchor = () => {
+  const messagesRef = useRef<HTMLDivElement>(null)
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const visibilityRef = useRef<HTMLDivElement>(null)
+
+  const [isAtBottom, setIsAtBottom] = useState(true)
+  const [isVisible, setIsVisible] = useState(false)
+
+  const scrollToBottom = useCallback(() => {
+    if (messagesRef.current) {
+      messagesRef.current.scrollIntoView({
+        block: 'end',
+        behavior: 'smooth'
+      })
+    }
+  }, [])
+
+  useEffect(() => {
+    if (messagesRef.current) {
+      if (isAtBottom && !isVisible) {
+        messagesRef.current.scrollIntoView({
+          block: 'end'
+        })
+      }
+    }
+  }, [isAtBottom, isVisible])
+
+  useEffect(() => {
+    const { current } = scrollRef
+
+    if (current) {
+      const handleScroll = (event: Event) => {
+        const target = event.target as HTMLDivElement
+        const offset = 25
+        const isAtBottom =
+          target.scrollTop + target.clientHeight >= target.scrollHeight - offset
+
+        setIsAtBottom(isAtBottom)
+      }
+
+      current.addEventListener('scroll', handleScroll, {
+        passive: true
+      })
+
+      return () => {
+        current.removeEventListener('scroll', handleScroll)
+      }
+    }
+  }, [])
+
+  useEffect(() => {
+    if (visibilityRef.current) {
+      let observer = new IntersectionObserver(
+        entries => {
+          entries.forEach(entry => {
+            if (entry.isIntersecting) {
+              setIsVisible(true)
+            } else {
+              setIsVisible(false)
+            }
+          })
+        },
+        {
+          rootMargin: '0px 0px -150px 0px'
+        }
+      )
+
+      observer.observe(visibilityRef.current)
+
+      return () => {
+        observer.disconnect()
+      }
+    }
+  })
+
+  return {
+    messagesRef,
+    scrollRef,
+    visibilityRef,
+    scrollToBottom,
+    isAtBottom,
+    isVisible
+  }
+}

package/example/lib/hooks/use-sidebar.tsx

@@ -0,0 +1,60 @@
+'use client'
+
+import * as React from 'react'
+
+const LOCAL_STORAGE_KEY = 'sidebar'
+
+interface SidebarContext {
+  isSidebarOpen: boolean
+  toggleSidebar: () => void
+  isLoading: boolean
+}
+
+const SidebarContext = React.createContext<SidebarContext | undefined>(
+  undefined
+)
+
+export function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error('useSidebarContext must be used within a SidebarProvider')
+  }
+  return context
+}
+
+interface SidebarProviderProps {
+  children: React.ReactNode
+}
+
+export function SidebarProvider({ children }: SidebarProviderProps) {
+  const [isSidebarOpen, setSidebarOpen] = React.useState(true)
+  const [isLoading, setLoading] = React.useState(true)
+
+  React.useEffect(() => {
+    const value = localStorage.getItem(LOCAL_STORAGE_KEY)
+    if (value) {
+      setSidebarOpen(JSON.parse(value))
+    }
+    setLoading(false)
+  }, [])
+
+  const toggleSidebar = () => {
+    setSidebarOpen(value => {
+      const newState = !value
+      localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(newState))
+      return newState
+    })
+  }
+
+  if (isLoading) {
+    return null
+  }
+
+  return (
+    <SidebarContext.Provider
+      value={{ isSidebarOpen, toggleSidebar, isLoading }}
+    >
+      {children}
+    </SidebarContext.Provider>
+  )
+}

package/example/lib/hooks/use-streamable-text.ts

@@ -0,0 +1,25 @@
+import { StreamableValue, readStreamableValue } from 'ai/rsc'
+import { useEffect, useState } from 'react'
+
+export const useStreamableText = (
+  content: string | StreamableValue<string>
+) => {
+  const [rawContent, setRawContent] = useState(
+    typeof content === 'string' ? content : ''
+  )
+
+  useEffect(() => {
+    ;(async () => {
+      if (typeof content === 'object') {
+        let value = ''
+        for await (const delta of readStreamableValue(content)) {
+          if (typeof delta === 'string') {
+            setRawContent((value = value + delta))
+          }
+        }
+      }
+    })()
+  }, [content])
+
+  return rawContent
+}

package/example/lib/types.ts

@@ -0,0 +1,41 @@
+import { CoreMessage } from 'ai'
+
+export type Message = CoreMessage & {
+  id: string
+}
+
+export interface Chat extends Record<string, any> {
+  id: string
+  title: string
+  createdAt: Date
+  userId: string
+  path: string
+  messages: Message[]
+  sharePath?: string
+}
+
+export type ServerActionResult<Result> = Promise<
+  | Result
+  | {
+      error: string
+    }
+>
+
+export interface Session {
+  user: {
+    id: string
+    email: string
+  }
+}
+
+export interface AuthResult {
+  type: string
+  message: string
+}
+
+export interface User extends Record<string, any> {
+  id: string
+  email: string
+  password: string
+  salt: string
+}

package/example/lib/utils.ts

@@ -0,0 +1,89 @@
+import { clsx, type ClassValue } from 'clsx'
+import { customAlphabet } from 'nanoid'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export const nanoid = customAlphabet(
+  '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz',
+  7
+) // 7-character random string
+
+export async function fetcher<JSON = any>(
+  input: RequestInfo,
+  init?: RequestInit
+): Promise<JSON> {
+  const res = await fetch(input, init)
+
+  if (!res.ok) {
+    const json = await res.json()
+    if (json.error) {
+      const error = new Error(json.error) as Error & {
+        status: number
+      }
+      error.status = res.status
+      throw error
+    } else {
+      throw new Error('An unexpected error occurred')
+    }
+  }
+
+  return res.json()
+}
+
+export function formatDate(input: string | number | Date): string {
+  const date = new Date(input)
+  return date.toLocaleDateString('en-US', {
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric'
+  })
+}
+
+export const formatNumber = (value: number) =>
+  new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD'
+  }).format(value)
+
+export const runAsyncFnWithoutBlocking = (
+  fn: (...args: any) => Promise<any>
+) => {
+  fn()
+}
+
+export const sleep = (ms: number) =>
+  new Promise(resolve => setTimeout(resolve, ms))
+
+export const getStringFromBuffer = (buffer: ArrayBuffer) =>
+  Array.from(new Uint8Array(buffer))
+    .map(b => b.toString(16).padStart(2, '0'))
+    .join('')
+
+export enum ResultCode {
+  InvalidCredentials = 'INVALID_CREDENTIALS',
+  InvalidSubmission = 'INVALID_SUBMISSION',
+  UserAlreadyExists = 'USER_ALREADY_EXISTS',
+  UnknownError = 'UNKNOWN_ERROR',
+  UserCreated = 'USER_CREATED',
+  UserLoggedIn = 'USER_LOGGED_IN'
+}
+
+export const getMessageFromCode = (resultCode: string) => {
+  switch (resultCode) {
+    case ResultCode.InvalidCredentials:
+      return 'Invalid credentials!'
+    case ResultCode.InvalidSubmission:
+      return 'Invalid submission, please try again!'
+    case ResultCode.UserAlreadyExists:
+      return 'User already exists, please log in!'
+    case ResultCode.UserCreated:
+      return 'User created, welcome!'
+    case ResultCode.UnknownError:
+      return 'Something went wrong, please try again!'
+    case ResultCode.UserLoggedIn:
+      return 'Logged in!'
+  }
+}

package/example/middleware.ts

@@ -0,0 +1,8 @@
+import NextAuth from 'next-auth'
+import { authConfig } from './auth.config'
+
+export default NextAuth(authConfig).auth
+
+export const config = {
+  matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)']
+}

package/example/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package/example/next.config.js

@@ -0,0 +1,13 @@
+/** @type {import('next').NextConfig} */
+module.exports = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'avatars.githubusercontent.com',
+        port: '',
+        pathname: '**'
+      }
+    ]
+  }
+}