npm - langwatch - Versions diffs - 0.0.1 - Mend

langwatch 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (132) hide show

package/.eslintrc.cjs +37 -0
package/README.md +3 -0
package/dist/chunk-GOA2HL4A.mjs +269 -0
package/dist/chunk-GOA2HL4A.mjs.map +1 -0
package/dist/index.d.mts +82 -0
package/dist/index.d.ts +82 -0
package/dist/index.js +940 -0
package/dist/index.js.map +1 -0
package/dist/index.mjs +666 -0
package/dist/index.mjs.map +1 -0
package/dist/utils-s3gGR6vj.d.mts +209 -0
package/dist/utils-s3gGR6vj.d.ts +209 -0
package/dist/utils.d.mts +3 -0
package/dist/utils.d.ts +3 -0
package/dist/utils.js +263 -0
package/dist/utils.js.map +1 -0
package/dist/utils.mjs +7 -0
package/dist/utils.mjs.map +1 -0
package/example/.env.example +12 -0
package/example/.eslintrc.json +26 -0
package/example/LICENSE +13 -0
package/example/README.md +10 -0
package/example/app/(chat)/chat/[id]/page.tsx +60 -0
package/example/app/(chat)/layout.tsx +14 -0
package/example/app/(chat)/page.tsx +22 -0
package/example/app/actions.ts +156 -0
package/example/app/globals.css +76 -0
package/example/app/layout.tsx +64 -0
package/example/app/login/actions.ts +71 -0
package/example/app/login/page.tsx +18 -0
package/example/app/new/page.tsx +5 -0
package/example/app/opengraph-image.png +0 -0
package/example/app/share/[id]/page.tsx +58 -0
package/example/app/signup/actions.ts +111 -0
package/example/app/signup/page.tsx +18 -0
package/example/app/twitter-image.png +0 -0
package/example/auth.config.ts +42 -0
package/example/auth.ts +45 -0
package/example/components/button-scroll-to-bottom.tsx +36 -0
package/example/components/chat-history.tsx +49 -0
package/example/components/chat-list.tsx +52 -0
package/example/components/chat-message-actions.tsx +40 -0
package/example/components/chat-message.tsx +80 -0
package/example/components/chat-panel.tsx +139 -0
package/example/components/chat-share-dialog.tsx +95 -0
package/example/components/chat.tsx +84 -0
package/example/components/clear-history.tsx +75 -0
package/example/components/empty-screen.tsx +38 -0
package/example/components/external-link.tsx +29 -0
package/example/components/footer.tsx +19 -0
package/example/components/header.tsx +80 -0
package/example/components/login-button.tsx +42 -0
package/example/components/login-form.tsx +97 -0
package/example/components/markdown.tsx +9 -0
package/example/components/prompt-form.tsx +115 -0
package/example/components/providers.tsx +17 -0
package/example/components/sidebar-actions.tsx +125 -0
package/example/components/sidebar-desktop.tsx +19 -0
package/example/components/sidebar-footer.tsx +16 -0
package/example/components/sidebar-item.tsx +124 -0
package/example/components/sidebar-items.tsx +42 -0
package/example/components/sidebar-list.tsx +38 -0
package/example/components/sidebar-mobile.tsx +31 -0
package/example/components/sidebar-toggle.tsx +24 -0
package/example/components/sidebar.tsx +21 -0
package/example/components/signup-form.tsx +95 -0
package/example/components/stocks/events-skeleton.tsx +31 -0
package/example/components/stocks/events.tsx +30 -0
package/example/components/stocks/index.tsx +36 -0
package/example/components/stocks/message.tsx +134 -0
package/example/components/stocks/spinner.tsx +16 -0
package/example/components/stocks/stock-purchase.tsx +146 -0
package/example/components/stocks/stock-skeleton.tsx +22 -0
package/example/components/stocks/stock.tsx +210 -0
package/example/components/stocks/stocks-skeleton.tsx +9 -0
package/example/components/stocks/stocks.tsx +67 -0
package/example/components/tailwind-indicator.tsx +14 -0
package/example/components/theme-toggle.tsx +31 -0
package/example/components/ui/alert-dialog.tsx +141 -0
package/example/components/ui/badge.tsx +36 -0
package/example/components/ui/button.tsx +57 -0
package/example/components/ui/codeblock.tsx +148 -0
package/example/components/ui/dialog.tsx +122 -0
package/example/components/ui/dropdown-menu.tsx +205 -0
package/example/components/ui/icons.tsx +507 -0
package/example/components/ui/input.tsx +25 -0
package/example/components/ui/label.tsx +26 -0
package/example/components/ui/select.tsx +164 -0
package/example/components/ui/separator.tsx +31 -0
package/example/components/ui/sheet.tsx +140 -0
package/example/components/ui/sonner.tsx +31 -0
package/example/components/ui/switch.tsx +29 -0
package/example/components/ui/textarea.tsx +24 -0
package/example/components/ui/tooltip.tsx +30 -0
package/example/components/user-menu.tsx +53 -0
package/example/components.json +17 -0
package/example/lib/chat/actions.tsx +606 -0
package/example/lib/hooks/use-copy-to-clipboard.tsx +33 -0
package/example/lib/hooks/use-enter-submit.tsx +23 -0
package/example/lib/hooks/use-local-storage.ts +24 -0
package/example/lib/hooks/use-scroll-anchor.tsx +86 -0
package/example/lib/hooks/use-sidebar.tsx +60 -0
package/example/lib/hooks/use-streamable-text.ts +25 -0
package/example/lib/types.ts +41 -0
package/example/lib/utils.ts +89 -0
package/example/middleware.ts +8 -0
package/example/next-env.d.ts +5 -0
package/example/next.config.js +13 -0
package/example/package-lock.json +9249 -0
package/example/package.json +77 -0
package/example/pnpm-lock.yaml +5712 -0
package/example/postcss.config.js +6 -0
package/example/prettier.config.cjs +34 -0
package/example/public/apple-touch-icon.png +0 -0
package/example/public/favicon-16x16.png +0 -0
package/example/public/favicon.ico +0 -0
package/example/public/next.svg +1 -0
package/example/public/thirteen.svg +1 -0
package/example/public/vercel.svg +1 -0
package/example/tailwind.config.ts +81 -0
package/example/tsconfig.json +35 -0
package/package.json +45 -0
package/src/helpers.ts +64 -0
package/src/index.test.ts +255 -0
package/src/index.ts +397 -0
package/src/server/types/.gitkeep +0 -0
package/src/types.ts +69 -0
package/src/utils.ts +134 -0
package/ts-to-zod.config.js +18 -0
package/tsconfig.json +32 -0
package/tsup.config.ts +10 -0
package/vitest.config.ts +8 -0

package/example/app/globals.css ADDED Viewed

@@ -0,0 +1,76 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 10% 3.9%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+  }
+}
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/example/app/layout.tsx ADDED Viewed

@@ -0,0 +1,64 @@
+import { GeistSans } from 'geist/font/sans'
+import { GeistMono } from 'geist/font/mono'
+import '@/app/globals.css'
+import { cn } from '@/lib/utils'
+import { TailwindIndicator } from '@/components/tailwind-indicator'
+import { Providers } from '@/components/providers'
+import { Header } from '@/components/header'
+import { Toaster } from '@/components/ui/sonner'
+export const metadata = {
+  metadataBase: process.env.VERCEL_URL
+    ? new URL(`https://${process.env.VERCEL_URL}`)
+    : undefined,
+  title: {
+    default: 'Next.js AI Chatbot',
+    template: `%s - Next.js AI Chatbot`
+  },
+  description: 'An AI-powered chatbot template built with Next.js and Vercel.',
+  icons: {
+    icon: '/favicon.ico',
+    shortcut: '/favicon-16x16.png',
+    apple: '/apple-touch-icon.png'
+  }
+}
+export const viewport = {
+  themeColor: [
+    { media: '(prefers-color-scheme: light)', color: 'white' },
+    { media: '(prefers-color-scheme: dark)', color: 'black' }
+  ]
+}
+interface RootLayoutProps {
+  children: React.ReactNode
+}
+export default function RootLayout({ children }: RootLayoutProps) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body
+        className={cn(
+          'font-sans antialiased',
+          GeistSans.variable,
+          GeistMono.variable
+        )}
+      >
+        <Toaster position="top-center" />
+        <Providers
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <div className="flex flex-col min-h-screen">
+            <Header />
+            <main className="flex flex-col flex-1 bg-muted/50">{children}</main>
+          </div>
+          <TailwindIndicator />
+        </Providers>
+      </body>
+    </html>
+  )
+}

package/example/app/login/actions.ts ADDED Viewed

@@ -0,0 +1,71 @@
+'use server'
+import { signIn } from '@/auth'
+import { User } from '@/lib/types'
+import { AuthError } from 'next-auth'
+import { z } from 'zod'
+import { kv } from '@vercel/kv'
+import { ResultCode } from '@/lib/utils'
+export async function getUser(email: string) {
+  const user = await kv.hgetall<User>(`user:${email}`)
+  return user
+}
+interface Result {
+  type: string
+  resultCode: ResultCode
+}
+export async function authenticate(
+  _prevState: Result | undefined,
+  formData: FormData
+): Promise<Result | undefined> {
+  try {
+    const email = formData.get('email')
+    const password = formData.get('password')
+    const parsedCredentials = z
+      .object({
+        email: z.string().email(),
+        password: z.string().min(6)
+      })
+      .safeParse({
+        email,
+        password
+      })
+    if (parsedCredentials.success) {
+      await signIn('credentials', {
+        email,
+        password,
+        redirect: false
+      })
+      return {
+        type: 'success',
+        resultCode: ResultCode.UserLoggedIn
+      }
+    } else {
+      return {
+        type: 'error',
+        resultCode: ResultCode.InvalidCredentials
+      }
+    }
+  } catch (error) {
+    if (error instanceof AuthError) {
+      switch (error.type) {
+        case 'CredentialsSignin':
+          return {
+            type: 'error',
+            resultCode: ResultCode.InvalidCredentials
+          }
+        default:
+          return {
+            type: 'error',
+            resultCode: ResultCode.UnknownError
+          }
+      }
+    }
+  }
+}

package/example/app/login/page.tsx ADDED Viewed

@@ -0,0 +1,18 @@
+import { auth } from '@/auth'
+import LoginForm from '@/components/login-form'
+import { Session } from '@/lib/types'
+import { redirect } from 'next/navigation'
+export default async function LoginPage() {
+  const session = (await auth()) as Session
+  if (session) {
+    redirect('/')
+  }
+  return (
+    <main className="flex flex-col p-4">
+      <LoginForm />
+    </main>
+  )
+}

package/example/app/new/page.tsx ADDED Viewed

@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation'
+export default async function NewPage() {
+  redirect('/')
+}

package/example/app/opengraph-image.png ADDED Viewed

Binary file

package/example/app/share/[id]/page.tsx ADDED Viewed

@@ -0,0 +1,58 @@
+import { type Metadata } from 'next'
+import { notFound, redirect } from 'next/navigation'
+import { formatDate } from '@/lib/utils'
+import { getSharedChat } from '@/app/actions'
+import { ChatList } from '@/components/chat-list'
+import { FooterText } from '@/components/footer'
+import { AI, UIState, getUIStateFromAIState } from '@/lib/chat/actions'
+export const runtime = 'edge'
+export const preferredRegion = 'home'
+interface SharePageProps {
+  params: {
+    id: string
+  }
+}
+export async function generateMetadata({
+  params
+}: SharePageProps): Promise<Metadata> {
+  const chat = await getSharedChat(params.id)
+  return {
+    title: chat?.title.slice(0, 50) ?? 'Chat'
+  }
+}
+export default async function SharePage({ params }: SharePageProps) {
+  const chat = await getSharedChat(params.id)
+  if (!chat || !chat?.sharePath) {
+    notFound()
+  }
+  const uiState: UIState = getUIStateFromAIState(chat)
+  return (
+    <>
+      <div className="flex-1 space-y-6">
+        <div className="border-b bg-background px-4 py-6 md:px-6 md:py-8">
+          <div className="mx-auto max-w-2xl">
+            <div className="space-y-1 md:-mx-8">
+              <h1 className="text-2xl font-bold">{chat.title}</h1>
+              <div className="text-sm text-muted-foreground">
+                {formatDate(chat.createdAt)} · {chat.messages.length} messages
+              </div>
+            </div>
+          </div>
+        </div>
+        <AI>
+          <ChatList messages={uiState} isShared={true} />
+        </AI>
+      </div>
+      <FooterText className="py-8" />
+    </>
+  )
+}

package/example/app/signup/actions.ts ADDED Viewed

@@ -0,0 +1,111 @@
+'use server'
+import { signIn } from '@/auth'
+import { ResultCode, getStringFromBuffer } from '@/lib/utils'
+import { z } from 'zod'
+import { kv } from '@vercel/kv'
+import { getUser } from '../login/actions'
+import { AuthError } from 'next-auth'
+export async function createUser(
+  email: string,
+  hashedPassword: string,
+  salt: string
+) {
+  const existingUser = await getUser(email)
+  if (existingUser) {
+    return {
+      type: 'error',
+      resultCode: ResultCode.UserAlreadyExists
+    }
+  } else {
+    const user = {
+      id: crypto.randomUUID(),
+      email,
+      password: hashedPassword,
+      salt
+    }
+    await kv.hmset(`user:${email}`, user)
+    return {
+      type: 'success',
+      resultCode: ResultCode.UserCreated
+    }
+  }
+}
+interface Result {
+  type: string
+  resultCode: ResultCode
+}
+export async function signup(
+  _prevState: Result | undefined,
+  formData: FormData
+): Promise<Result | undefined> {
+  const email = formData.get('email') as string
+  const password = formData.get('password') as string
+  const parsedCredentials = z
+    .object({
+      email: z.string().email(),
+      password: z.string().min(6)
+    })
+    .safeParse({
+      email,
+      password
+    })
+  if (parsedCredentials.success) {
+    const salt = crypto.randomUUID()
+    const encoder = new TextEncoder()
+    const saltedPassword = encoder.encode(password + salt)
+    const hashedPasswordBuffer = await crypto.subtle.digest(
+      'SHA-256',
+      saltedPassword
+    )
+    const hashedPassword = getStringFromBuffer(hashedPasswordBuffer)
+    try {
+      const result = await createUser(email, hashedPassword, salt)
+      if (result.resultCode === ResultCode.UserCreated) {
+        await signIn('credentials', {
+          email,
+          password,
+          redirect: false
+        })
+      }
+      return result
+    } catch (error) {
+      if (error instanceof AuthError) {
+        switch (error.type) {
+          case 'CredentialsSignin':
+            return {
+              type: 'error',
+              resultCode: ResultCode.InvalidCredentials
+            }
+          default:
+            return {
+              type: 'error',
+              resultCode: ResultCode.UnknownError
+            }
+        }
+      } else {
+        return {
+          type: 'error',
+          resultCode: ResultCode.UnknownError
+        }
+      }
+    }
+  } else {
+    return {
+      type: 'error',
+      resultCode: ResultCode.InvalidCredentials
+    }
+  }
+}

package/example/app/signup/page.tsx ADDED Viewed

@@ -0,0 +1,18 @@
+import { auth } from '@/auth'
+import SignupForm from '@/components/signup-form'
+import { Session } from '@/lib/types'
+import { redirect } from 'next/navigation'
+export default async function SignupPage() {
+  const session = (await auth()) as Session
+  if (session) {
+    redirect('/')
+  }
+  return (
+    <main className="flex flex-col p-4">
+      <SignupForm />
+    </main>
+  )
+}

package/example/app/twitter-image.png ADDED Viewed

Binary file

package/example/auth.config.ts ADDED Viewed

@@ -0,0 +1,42 @@
+import type { NextAuthConfig } from 'next-auth'
+export const authConfig = {
+  secret: process.env.AUTH_SECRET,
+  pages: {
+    signIn: '/login',
+    newUser: '/signup'
+  },
+  callbacks: {
+    async authorized({ auth, request: { nextUrl } }) {
+      const isLoggedIn = !!auth?.user
+      const isOnLoginPage = nextUrl.pathname.startsWith('/login')
+      const isOnSignupPage = nextUrl.pathname.startsWith('/signup')
+      if (isLoggedIn) {
+        if (isOnLoginPage || isOnSignupPage) {
+          return Response.redirect(new URL('/', nextUrl))
+        }
+      }
+      return true
+    },
+    async jwt({ token, user }) {
+      if (user) {
+        token = { ...token, id: user.id }
+      }
+      return token
+    },
+    async session({ session, token }) {
+      if (token) {
+        const { id } = token as { id: string }
+        const { user } = session
+        session = { ...session, user: { ...user, id } }
+      }
+      return session
+    }
+  },
+  providers: []
+} satisfies NextAuthConfig

package/example/auth.ts ADDED Viewed

@@ -0,0 +1,45 @@
+import NextAuth from 'next-auth'
+import Credentials from 'next-auth/providers/credentials'
+import { authConfig } from './auth.config'
+import { z } from 'zod'
+import { getStringFromBuffer } from './lib/utils'
+import { getUser } from './app/login/actions'
+export const { auth, signIn, signOut } = NextAuth({
+  ...authConfig,
+  providers: [
+    Credentials({
+      async authorize(credentials) {
+        const parsedCredentials = z
+          .object({
+            email: z.string().email(),
+            password: z.string().min(6)
+          })
+          .safeParse(credentials)
+        if (parsedCredentials.success) {
+          const { email, password } = parsedCredentials.data
+          const user = await getUser(email)
+          if (!user) return null
+          const encoder = new TextEncoder()
+          const saltedPassword = encoder.encode(password + user.salt)
+          const hashedPasswordBuffer = await crypto.subtle.digest(
+            'SHA-256',
+            saltedPassword
+          )
+          const hashedPassword = getStringFromBuffer(hashedPasswordBuffer)
+          if (hashedPassword === user.password) {
+            return user
+          } else {
+            return null
+          }
+        }
+        return null
+      }
+    })
+  ]
+})

package/example/components/button-scroll-to-bottom.tsx ADDED Viewed

@@ -0,0 +1,36 @@
+'use client'
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+import { Button, type ButtonProps } from '@/components/ui/button'
+import { IconArrowDown } from '@/components/ui/icons'
+interface ButtonScrollToBottomProps extends ButtonProps {
+  isAtBottom: boolean
+  scrollToBottom: () => void
+}
+export function ButtonScrollToBottom({
+  className,
+  isAtBottom,
+  scrollToBottom,
+  ...props
+}: ButtonScrollToBottomProps) {
+  return (
+    <Button
+      variant="outline"
+      size="icon"
+      className={cn(
+        'absolute right-4 top-1 z-10 bg-background transition-opacity duration-300 sm:right-8 md:top-2',
+        isAtBottom ? 'opacity-0' : 'opacity-100',
+        className
+      )}
+      onClick={() => scrollToBottom()}
+      {...props}
+    >
+      <IconArrowDown />
+      <span className="sr-only">Scroll to bottom</span>
+    </Button>
+  )
+}

package/example/components/chat-history.tsx ADDED Viewed

@@ -0,0 +1,49 @@
+import * as React from 'react'
+import Link from 'next/link'
+import { cn } from '@/lib/utils'
+import { SidebarList } from '@/components/sidebar-list'
+import { buttonVariants } from '@/components/ui/button'
+import { IconPlus } from '@/components/ui/icons'
+interface ChatHistoryProps {
+  userId?: string
+}
+export async function ChatHistory({ userId }: ChatHistoryProps) {
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex items-center justify-between p-4">
+        <h4 className="text-sm font-medium">Chat History</h4>
+      </div>
+      <div className="mb-2 px-2">
+        <Link
+          href="/"
+          className={cn(
+            buttonVariants({ variant: 'outline' }),
+            'h-10 w-full justify-start bg-zinc-50 px-4 shadow-none transition-colors hover:bg-zinc-200/40 dark:bg-zinc-900 dark:hover:bg-zinc-300/10'
+          )}
+        >
+          <IconPlus className="-translate-x-2 stroke-2" />
+          New Chat
+        </Link>
+      </div>
+      <React.Suspense
+        fallback={
+          <div className="flex flex-col flex-1 px-4 space-y-4 overflow-auto">
+            {Array.from({ length: 10 }).map((_, i) => (
+              <div
+                key={i}
+                className="w-full h-6 rounded-md shrink-0 animate-pulse bg-zinc-200 dark:bg-zinc-800"
+              />
+            ))}
+          </div>
+        }
+      >
+        {/* @ts-ignore */}
+        <SidebarList userId={userId} />
+      </React.Suspense>
+    </div>
+  )
+}

package/example/components/chat-list.tsx ADDED Viewed

@@ -0,0 +1,52 @@
+import { Separator } from '@/components/ui/separator'
+import { UIState } from '@/lib/chat/actions'
+import { Session } from '@/lib/types'
+import Link from 'next/link'
+import { ExclamationTriangleIcon } from '@radix-ui/react-icons'
+export interface ChatList {
+  messages: UIState
+  session?: Session
+  isShared: boolean
+}
+export function ChatList({ messages, session, isShared }: ChatList) {
+  if (!messages.length) {
+    return null
+  }
+  return (
+    <div className="relative mx-auto max-w-2xl px-4">
+      {!isShared && !session ? (
+        <>
+          <div className="group relative mb-4 flex items-start md:-ml-12">
+            <div className="bg-background flex size-[25px] shrink-0 select-none items-center justify-center rounded-md border shadow-sm">
+              <ExclamationTriangleIcon />
+            </div>
+            <div className="ml-4 flex-1 space-y-2 overflow-hidden px-1">
+              <p className="text-muted-foreground leading-normal">
+                Please{' '}
+                <Link href="/login" className="underline">
+                  log in
+                </Link>{' '}
+                or{' '}
+                <Link href="/signup" className="underline">
+                  sign up
+                </Link>{' '}
+                to save and revisit your chat history!
+              </p>
+            </div>
+          </div>
+          <Separator className="my-4" />
+        </>
+      ) : null}
+      {messages.map((message, index) => (
+        <div key={message.id}>
+          {message.display}
+          {index < messages.length - 1 && <Separator className="my-4" />}
+        </div>
+      ))}
+    </div>
+  )
+}

package/example/components/chat-message-actions.tsx ADDED Viewed

@@ -0,0 +1,40 @@
+'use client'
+import { type Message } from 'ai'
+import { Button } from '@/components/ui/button'
+import { IconCheck, IconCopy } from '@/components/ui/icons'
+import { useCopyToClipboard } from '@/lib/hooks/use-copy-to-clipboard'
+import { cn } from '@/lib/utils'
+interface ChatMessageActionsProps extends React.ComponentProps<'div'> {
+  message: Message
+}
+export function ChatMessageActions({
+  message,
+  className,
+  ...props
+}: ChatMessageActionsProps) {
+  const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2000 })
+  const onCopy = () => {
+    if (isCopied) return
+    copyToClipboard(message.content)
+  }
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-end transition-opacity group-hover:opacity-100 md:absolute md:-right-10 md:-top-2 md:opacity-0',
+        className
+      )}
+      {...props}
+    >
+      <Button variant="ghost" size="icon" onClick={onCopy}>
+        {isCopied ? <IconCheck /> : <IconCopy />}
+        <span className="sr-only">Copy message</span>
+      </Button>
+    </div>
+  )
+}