langwatch 0.0.1

package/example/components/chat-message.tsx

@@ -0,0 +1,80 @@
+// Inspired by Chatbot-UI and modified to fit the needs of this project
+// @see https://github.com/mckaywrigley/chatbot-ui/blob/main/components/Chat/ChatMessage.tsx
+
+import { Message } from 'ai'
+import remarkGfm from 'remark-gfm'
+import remarkMath from 'remark-math'
+
+import { cn } from '@/lib/utils'
+import { CodeBlock } from '@/components/ui/codeblock'
+import { MemoizedReactMarkdown } from '@/components/markdown'
+import { IconOpenAI, IconUser } from '@/components/ui/icons'
+import { ChatMessageActions } from '@/components/chat-message-actions'
+
+export interface ChatMessageProps {
+  message: Message
+}
+
+export function ChatMessage({ message, ...props }: ChatMessageProps) {
+  return (
+    <div
+      className={cn('group relative mb-4 flex items-start md:-ml-12')}
+      {...props}
+    >
+      <div
+        className={cn(
+          'flex size-8 shrink-0 select-none items-center justify-center rounded-md border shadow',
+          message.role === 'user'
+            ? 'bg-background'
+            : 'bg-primary text-primary-foreground'
+        )}
+      >
+        {message.role === 'user' ? <IconUser /> : <IconOpenAI />}
+      </div>
+      <div className="flex-1 px-1 ml-4 space-y-2 overflow-hidden">
+        <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 cursor-default animate-pulse">▍</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}
+                />
+              )
+            }
+          }}
+        >
+          {message.content}
+        </MemoizedReactMarkdown>
+        <ChatMessageActions message={message} />
+      </div>
+    </div>
+  )
+}

package/example/components/chat-panel.tsx

@@ -0,0 +1,139 @@
+import * as React from 'react'
+
+import { shareChat } from '@/app/actions'
+import { Button } from '@/components/ui/button'
+import { PromptForm } from '@/components/prompt-form'
+import { ButtonScrollToBottom } from '@/components/button-scroll-to-bottom'
+import { IconShare } from '@/components/ui/icons'
+import { FooterText } from '@/components/footer'
+import { ChatShareDialog } from '@/components/chat-share-dialog'
+import { useAIState, useActions, useUIState } from 'ai/rsc'
+import type { AI } from '@/lib/chat/actions'
+import { nanoid } from 'nanoid'
+import { UserMessage } from './stocks/message'
+
+export interface ChatPanelProps {
+  id?: string
+  title?: string
+  input: string
+  setInput: (value: string) => void
+  isAtBottom: boolean
+  scrollToBottom: () => void
+}
+
+export function ChatPanel({
+  id,
+  title,
+  input,
+  setInput,
+  isAtBottom,
+  scrollToBottom
+}: ChatPanelProps) {
+  const [aiState] = useAIState()
+  const [messages, setMessages] = useUIState<typeof AI>()
+  const { submitUserMessage } = useActions()
+  const [shareDialogOpen, setShareDialogOpen] = React.useState(false)
+
+  const exampleMessages = [
+    {
+      heading: 'What are the',
+      subheading: 'trending memecoins today?',
+      message: `What are the trending memecoins today?`
+    },
+    {
+      heading: 'What is the price of',
+      subheading: '$DOGE right now?',
+      message: 'What is the price of $DOGE right now?'
+    },
+    {
+      heading: 'I would like to buy',
+      subheading: '42 $DOGE',
+      message: `I would like to buy 42 $DOGE`
+    },
+    {
+      heading: 'What are some',
+      subheading: `recent events about $DOGE?`,
+      message: `What are some recent events about $DOGE?`
+    }
+  ]
+
+  return (
+    <div className="fixed inset-x-0 bottom-0 w-full bg-gradient-to-b from-muted/30 from-0% to-muted/30 to-50% duration-300 ease-in-out animate-in dark:from-background/10 dark:from-10% dark:to-background/80 peer-[[data-state=open]]:group-[]:lg:pl-[250px] peer-[[data-state=open]]:group-[]:xl:pl-[300px]">
+      <ButtonScrollToBottom
+        isAtBottom={isAtBottom}
+        scrollToBottom={scrollToBottom}
+      />
+
+      <div className="mx-auto sm:max-w-2xl sm:px-4">
+        <div className="mb-4 grid grid-cols-2 gap-2 px-4 sm:px-0">
+          {messages.length === 0 &&
+            exampleMessages.map((example, index) => (
+              <div
+                key={example.heading}
+                className={`cursor-pointer rounded-lg border bg-white p-4 hover:bg-zinc-50 dark:bg-zinc-950 dark:hover:bg-zinc-900 ${
+                  index > 1 && 'hidden md:block'
+                }`}
+                onClick={async () => {
+                  setMessages(currentMessages => [
+                    ...currentMessages,
+                    {
+                      id: nanoid(),
+                      display: <UserMessage>{example.message}</UserMessage>
+                    }
+                  ])
+
+                  const responseMessage = await submitUserMessage(
+                    example.message
+                  )
+
+                  setMessages(currentMessages => [
+                    ...currentMessages,
+                    responseMessage
+                  ])
+                }}
+              >
+                <div className="text-sm font-semibold">{example.heading}</div>
+                <div className="text-sm text-zinc-600">
+                  {example.subheading}
+                </div>
+              </div>
+            ))}
+        </div>
+
+        {messages?.length >= 2 ? (
+          <div className="flex h-12 items-center justify-center">
+            <div className="flex space-x-2">
+              {id && title ? (
+                <>
+                  <Button
+                    variant="outline"
+                    onClick={() => setShareDialogOpen(true)}
+                  >
+                    <IconShare className="mr-2" />
+                    Share
+                  </Button>
+                  <ChatShareDialog
+                    open={shareDialogOpen}
+                    onOpenChange={setShareDialogOpen}
+                    onCopy={() => setShareDialogOpen(false)}
+                    shareChat={shareChat}
+                    chat={{
+                      id,
+                      title,
+                      messages: aiState.messages
+                    }}
+                  />
+                </>
+              ) : null}
+            </div>
+          </div>
+        ) : null}
+
+        <div className="space-y-4 border-t bg-background px-4 py-2 shadow-lg sm:rounded-t-xl sm:border md:py-4">
+          <PromptForm input={input} setInput={setInput} />
+          <FooterText className="hidden sm:block" />
+        </div>
+      </div>
+    </div>
+  )
+}

package/example/components/chat-share-dialog.tsx

@@ -0,0 +1,95 @@
+'use client'
+
+import * as React from 'react'
+import { type DialogProps } from '@radix-ui/react-dialog'
+import { toast } from 'sonner'
+
+import { ServerActionResult, type Chat } from '@/lib/types'
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog'
+import { IconSpinner } from '@/components/ui/icons'
+import { useCopyToClipboard } from '@/lib/hooks/use-copy-to-clipboard'
+
+interface ChatShareDialogProps extends DialogProps {
+  chat: Pick<Chat, 'id' | 'title' | 'messages'>
+  shareChat: (id: string) => ServerActionResult<Chat>
+  onCopy: () => void
+}
+
+export function ChatShareDialog({
+  chat,
+  shareChat,
+  onCopy,
+  ...props
+}: ChatShareDialogProps) {
+  const { copyToClipboard } = useCopyToClipboard({ timeout: 1000 })
+  const [isSharePending, startShareTransition] = React.useTransition()
+
+  const copyShareLink = React.useCallback(
+    async (chat: Chat) => {
+      if (!chat.sharePath) {
+        return toast.error('Could not copy share link to clipboard')
+      }
+
+      const url = new URL(window.location.href)
+      url.pathname = chat.sharePath
+      copyToClipboard(url.toString())
+      onCopy()
+      toast.success('Share link copied to clipboard')
+    },
+    [copyToClipboard, onCopy]
+  )
+
+  return (
+    <Dialog {...props}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Share link to chat</DialogTitle>
+          <DialogDescription>
+            Anyone with the URL will be able to view the shared chat.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="p-4 space-y-1 text-sm border rounded-md">
+          <div className="font-medium">{chat.title}</div>
+          <div className="text-muted-foreground">
+            {chat.messages.length} messages
+          </div>
+        </div>
+        <DialogFooter className="items-center">
+          <Button
+            disabled={isSharePending}
+            onClick={() => {
+              // @ts-ignore
+              startShareTransition(async () => {
+                const result = await shareChat(chat.id)
+
+                if (result && 'error' in result) {
+                  toast.error(result.error)
+                  return
+                }
+
+                copyShareLink(result)
+              })
+            }}
+          >
+            {isSharePending ? (
+              <>
+                <IconSpinner className="mr-2 animate-spin" />
+                Copying...
+              </>
+            ) : (
+              <>Copy link</>
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/example/components/chat.tsx

@@ -0,0 +1,84 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import { ChatList } from '@/components/chat-list'
+import { ChatPanel } from '@/components/chat-panel'
+import { EmptyScreen } from '@/components/empty-screen'
+import { useLocalStorage } from '@/lib/hooks/use-local-storage'
+import { useEffect, useState } from 'react'
+import { useUIState, useAIState } from 'ai/rsc'
+import { Message, Session } from '@/lib/types'
+import { usePathname, useRouter } from 'next/navigation'
+import { useScrollAnchor } from '@/lib/hooks/use-scroll-anchor'
+import { toast } from 'sonner'
+
+export interface ChatProps extends React.ComponentProps<'div'> {
+  initialMessages?: Message[]
+  id?: string
+  session?: Session
+  missingKeys: string[]
+}
+
+export function Chat({ id, className, session, missingKeys }: ChatProps) {
+  const router = useRouter()
+  const path = usePathname()
+  const [input, setInput] = useState('')
+  const [messages] = useUIState()
+  const [aiState] = useAIState()
+
+  const [_, setNewChatId] = useLocalStorage('newChatId', id)
+
+  useEffect(() => {
+    if (session?.user) {
+      if (!path.includes('chat') && messages.length === 1) {
+        window.history.replaceState({}, '', `/chat/${id}`)
+      }
+    }
+  }, [id, path, session?.user, messages])
+
+  useEffect(() => {
+    const messagesLength = aiState.messages?.length
+    if (messagesLength === 2) {
+      router.refresh()
+    }
+  }, [aiState.messages, router])
+
+  useEffect(() => {
+    setNewChatId(id)
+  })
+
+  useEffect(() => {
+    missingKeys.map(key => {
+      toast.error(`Missing ${key} environment variable!`)
+    })
+  }, [missingKeys])
+
+  const { messagesRef, scrollRef, visibilityRef, isAtBottom, scrollToBottom } =
+    useScrollAnchor()
+
+  return (
+    <div
+      className="group w-full overflow-auto pl-0 peer-[[data-state=open]]:lg:pl-[250px] peer-[[data-state=open]]:xl:pl-[300px]"
+      ref={scrollRef}
+    >
+      <div
+        className={cn('pb-[200px] pt-4 md:pt-10', className)}
+        ref={messagesRef}
+      >
+        {messages.length ? (
+          <ChatList messages={messages} isShared={false} session={session} />
+        ) : (
+          <EmptyScreen />
+        )}
+        <div className="w-full h-px" ref={visibilityRef} />
+      </div>
+      <ChatPanel
+        id={id}
+        input={input}
+        setInput={setInput}
+        isAtBottom={isAtBottom}
+        scrollToBottom={scrollToBottom}
+      />
+    </div>
+  )
+}

package/example/components/clear-history.tsx

@@ -0,0 +1,75 @@
+'use client'
+
+import * as React from 'react'
+import { useRouter } from 'next/navigation'
+import { toast } from 'sonner'
+
+import { ServerActionResult } from '@/lib/types'
+import { Button } from '@/components/ui/button'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger
+} from '@/components/ui/alert-dialog'
+import { IconSpinner } from '@/components/ui/icons'
+
+interface ClearHistoryProps {
+  isEnabled: boolean
+  clearChats: () => ServerActionResult<void>
+}
+
+export function ClearHistory({
+  isEnabled = false,
+  clearChats
+}: ClearHistoryProps) {
+  const [open, setOpen] = React.useState(false)
+  const [isPending, startTransition] = React.useTransition()
+  const router = useRouter()
+
+  return (
+    <AlertDialog open={open} onOpenChange={setOpen}>
+      <AlertDialogTrigger asChild>
+        <Button variant="ghost" disabled={!isEnabled || isPending}>
+          {isPending && <IconSpinner className="mr-2" />}
+          Clear history
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This will permanently delete your chat history and remove your data
+            from our servers.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={isPending}>Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            disabled={isPending}
+            onClick={event => {
+              event.preventDefault()
+              startTransition(async () => {
+                const result = await clearChats()
+                if (result && 'error' in result) {
+                  toast.error(result.error)
+                  return
+                }
+
+                setOpen(false)
+              })
+            }}
+          >
+            {isPending && <IconSpinner className="mr-2 animate-spin" />}
+            Delete
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}

package/example/components/empty-screen.tsx

@@ -0,0 +1,38 @@
+import { UseChatHelpers } from 'ai/react'
+
+import { Button } from '@/components/ui/button'
+import { ExternalLink } from '@/components/external-link'
+import { IconArrowRight } from '@/components/ui/icons'
+
+export function EmptyScreen() {
+  return (
+    <div className="mx-auto max-w-2xl px-4">
+      <div className="flex flex-col gap-2 rounded-lg border bg-background p-8">
+        <h1 className="text-lg font-semibold">
+          Welcome to Next.js AI Chatbot!
+        </h1>
+        <p className="leading-normal text-muted-foreground">
+          This is an open source AI chatbot app template built with{' '}
+          <ExternalLink href="https://nextjs.org">Next.js</ExternalLink>, the{' '}
+          <ExternalLink href="https://sdk.vercel.ai">
+            Vercel AI SDK
+          </ExternalLink>
+          , and{' '}
+          <ExternalLink href="https://vercel.com/storage/kv">
+            Vercel KV
+          </ExternalLink>
+          .
+        </p>
+        <p className="leading-normal text-muted-foreground">
+          It uses{' '}
+          <ExternalLink href="https://vercel.com/blog/ai-sdk-3-generative-ui">
+            React Server Components
+          </ExternalLink>{' '}
+          to combine text with generative UI as output of the LLM. The UI state
+          is synced through the SDK so the model is aware of your interactions
+          as they happen.
+        </p>
+      </div>
+    </div>
+  )
+}

package/example/components/external-link.tsx

@@ -0,0 +1,29 @@
+export function ExternalLink({
+  href,
+  children
+}: {
+  href: string
+  children: React.ReactNode
+}) {
+  return (
+    <a
+      href={href}
+      target="_blank"
+      className="inline-flex flex-1 justify-center gap-1 leading-4 hover:underline"
+    >
+      <span>{children}</span>
+      <svg
+        aria-hidden="true"
+        height="7"
+        viewBox="0 0 6 6"
+        width="7"
+        className="opacity-70"
+      >
+        <path
+          d="M1.25215 5.54731L0.622742 4.9179L3.78169 1.75597H1.3834L1.38936 0.890915H5.27615V4.78069H4.40513L4.41109 2.38538L1.25215 5.54731Z"
+          fill="currentColor"
+        ></path>
+      </svg>
+    </a>
+  )
+}

package/example/components/footer.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+
+import { cn } from '@/lib/utils'
+import { ExternalLink } from '@/components/external-link'
+
+export function FooterText({ className, ...props }: React.ComponentProps<'p'>) {
+  return (
+    <p
+      className={cn(
+        'px-2 text-center text-xs leading-normal text-muted-foreground',
+        className
+      )}
+      {...props}
+    >
+      TypeScript SDK demo chatbot for{' '}
+      <ExternalLink href="https://langwatch.ai">LangWatch</ExternalLink>
+    </p>
+  )
+}

package/example/components/header.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react'
+import Link from 'next/link'
+
+import { cn } from '@/lib/utils'
+import { auth } from '@/auth'
+import { Button, buttonVariants } from '@/components/ui/button'
+import {
+  IconGitHub,
+  IconNextChat,
+  IconSeparator,
+  IconVercel
+} from '@/components/ui/icons'
+import { UserMenu } from '@/components/user-menu'
+import { SidebarMobile } from './sidebar-mobile'
+import { SidebarToggle } from './sidebar-toggle'
+import { ChatHistory } from './chat-history'
+import { Session } from '@/lib/types'
+
+async function UserOrLogin() {
+  const session = (await auth()) as Session
+  return (
+    <>
+      {session?.user ? (
+        <>
+          <SidebarMobile>
+            <ChatHistory userId={session.user.id} />
+          </SidebarMobile>
+          <SidebarToggle />
+        </>
+      ) : (
+        <Link href="/new" rel="nofollow">
+          <IconNextChat className="size-6 mr-2 dark:hidden" inverted />
+          <IconNextChat className="hidden size-6 mr-2 dark:block" />
+        </Link>
+      )}
+      <div className="flex items-center">
+        <IconSeparator className="size-6 text-muted-foreground/50" />
+        {session?.user ? (
+          <UserMenu user={session.user} />
+        ) : (
+          <Button variant="link" asChild className="-ml-2">
+            <Link href="/login">Login</Link>
+          </Button>
+        )}
+      </div>
+    </>
+  )
+}
+
+export function Header() {
+  return (
+    <header className="sticky top-0 z-50 flex items-center justify-between w-full h-16 px-4 border-b shrink-0 bg-gradient-to-b from-background/10 via-background/50 to-background/80 backdrop-blur-xl">
+      <div className="flex items-center">
+        <React.Suspense fallback={<div className="flex-1 overflow-auto" />}>
+          <UserOrLogin />
+        </React.Suspense>
+      </div>
+      <div className="flex items-center justify-end space-x-2">
+        <a
+          target="_blank"
+          href="https://github.com/vercel/nextjs-ai-chatbot/"
+          rel="noopener noreferrer"
+          className={cn(buttonVariants({ variant: 'outline' }))}
+        >
+          <IconGitHub />
+          <span className="hidden ml-2 md:flex">GitHub</span>
+        </a>
+        <a
+          href="https://vercel.com/templates/Next.js/nextjs-ai-chatbot"
+          target="_blank"
+          className={cn(buttonVariants())}
+        >
+          <IconVercel className="mr-2" />
+          <span className="hidden sm:block">Deploy to Vercel</span>
+          <span className="sm:hidden">Deploy</span>
+        </a>
+      </div>
+    </header>
+  )
+}

package/example/components/login-button.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import * as React from 'react'
+import { signIn } from 'next-auth/react'
+
+import { cn } from '@/lib/utils'
+import { Button, type ButtonProps } from '@/components/ui/button'
+import { IconGitHub, IconSpinner } from '@/components/ui/icons'
+
+interface LoginButtonProps extends ButtonProps {
+  showGithubIcon?: boolean
+  text?: string
+}
+
+export function LoginButton({
+  text = 'Login with GitHub',
+  showGithubIcon = true,
+  className,
+  ...props
+}: LoginButtonProps) {
+  const [isLoading, setIsLoading] = React.useState(false)
+  return (
+    <Button
+      variant="outline"
+      onClick={() => {
+        setIsLoading(true)
+        // next-auth signIn() function doesn't work yet at Edge Runtime due to usage of BroadcastChannel
+        signIn('github', { callbackUrl: `/` })
+      }}
+      disabled={isLoading}
+      className={cn(className)}
+      {...props}
+    >
+      {isLoading ? (
+        <IconSpinner className="mr-2 animate-spin" />
+      ) : showGithubIcon ? (
+        <IconGitHub className="mr-2" />
+      ) : null}
+      {text}
+    </Button>
+  )
+}