fix/preview_functionality

.env.example

@@ -2,6 +2,10 @@
 ## Then get your OpenAI API Key here: https://platform.openai.com/account/api-keys
 OPENAI_API_KEY=XXXXXXXX
 
+## Set the preview to get the user to use their own API key - stored in browser local storage
+## If this is set to preview customer supplied key will be used if provided with a fallback to the above OPENAI_API_KEY
+NEXT_PUBLIC_VERCEL_ENV=preview
+
 # Update these with your Supabase details from your project settings > API
 # https://app.supabase.com/project/_/settings/api
 # In local dev you can get these by running `supabase status`.

app/api/chat/route.ts

@@ -10,19 +10,21 @@ import { nanoid } from '@/lib/utils'
 
 export const runtime = 'edge'
 
-const configuration = new Configuration({
-  apiKey: process.env.OPENAI_API_KEY
-})
+export async function POST(req: Request) {
+  const json = await req.json()
+  const { messages, previewToken } = json
+
+  // set configuration for OpenAI - api key set to previewToken from req otherwise use env variable
+  const configuration = new Configuration({
+    apiKey: previewToken || process.env.OPENAI_API_KEY
+  })
 
-const openai = new OpenAIApi(configuration)
+  const openai = new OpenAIApi(configuration)
 
-export async function POST(req: Request) {
   const cookieStore = cookies()
   const supabase = createRouteHandlerClient<Database>({
     cookies: () => cookieStore
   })
-  const json = await req.json()
-  const { messages, previewToken } = json
   const userId = (await auth({ cookieStore }))?.user.id
 
   if (!userId) {

components/chat.tsx

@@ -16,12 +16,13 @@ import {
   DialogHeader,
   DialogTitle
 } from '@/components/ui/dialog'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { Button } from './ui/button'
 import { Input } from './ui/input'
 import { toast } from 'react-hot-toast'
 
-const IS_PREVIEW = process.env.VERCEL_ENV === 'preview'
+// set IS_PREVIEW to true if the environment is a preview environment
+const IS_PREVIEW = process.env.NEXT_PUBLIC_VERCEL_ENV === 'preview'
 export interface ChatProps extends React.ComponentProps<'div'> {
   initialMessages?: Message[]
   id?: string
@@ -32,8 +33,24 @@ export function Chat({ id, initialMessages, className }: ChatProps) {
     'ai-token',
     null
   )
-  const [previewTokenDialog, setPreviewTokenDialog] = useState(IS_PREVIEW)
+  // initialize previewTokenDialog to false, To be set based on the preview flag later in useEffect to avoid hydration errors
+
+  const [previewTokenDialog, setPreviewTokenDialog] = useState(false)
   const [previewTokenInput, setPreviewTokenInput] = useState(previewToken ?? '')
+
+  useEffect(() => {
+    // if the environment is a preview environment and the preview token is not set, open the preview token dialog
+    setPreviewTokenDialog(IS_PREVIEW);
+
+    // reset the preview token and dialog when the component unmounts
+    return () => {
+      setPreviewTokenDialog(false)
+      setPreviewToken(null)
+      setPreviewTokenInput('')
+    }
+
+  }, []);
+
   const { messages, append, reload, stop, isLoading, input, setInput } =
     useChat({
       initialMessages,

package.json

@@ -30,6 +30,7 @@
     "ai": "^2.1.6",
     "class-variance-authority": "^0.6.1",
     "clsx": "^1.2.1",
+    "encoding": "^0.1.13",
     "focus-trap-react": "^10.1.1",
     "nanoid": "^4.0.2",
     "next": "13.4.10",