From c040a5c425bf3e351533709580ad942cc245f0d0 Mon Sep 17 00:00:00 2001 From: Jared Palmer Date: Fri, 16 Jun 2023 16:30:15 -0400 Subject: [PATCH 1/6] Implement preview token for oss --- app/api/chat/route.ts | 18 ++++------ components/chat.tsx | 63 ++++++++++++++++++++++++++++++++-- lib/hooks/use-local-storage.ts | 24 +++++++++++++ 3 files changed, 92 insertions(+), 13 deletions(-) create mode 100644 lib/hooks/use-local-storage.ts diff --git a/app/api/chat/route.ts b/app/api/chat/route.ts index 450ae72..0024ea4 100644 --- a/app/api/chat/route.ts +++ b/app/api/chat/route.ts @@ -7,16 +7,6 @@ import { nanoid } from '@/lib/utils' export const runtime = 'edge' -const configuration = new Configuration({ - apiKey: process.env.OPENAI_API_KEY -}) - -const openai = new OpenAIApi(configuration) - -if (!process.env.OPENAI_API_KEY) { - throw new Error('Missing env var from OpenAI') -} - export async function POST(req: Request) { const session = await auth() if (session == null) { @@ -24,7 +14,13 @@ export async function POST(req: Request) { } const json = await req.json() - const { messages } = json + const { messages, previewToken } = json + + const configuration = new Configuration({ + apiKey: previewToken || process.env.OPENAI_API_KEY + }) + + const openai = new OpenAIApi(configuration) const res = await openai.createChatCompletion({ model: 'gpt-3.5-turbo', diff --git a/components/chat.tsx b/components/chat.tsx index 165a77b..496e1bc 100644 --- a/components/chat.tsx +++ b/components/chat.tsx @@ -7,22 +7,44 @@ import { ChatList } from '@/components/chat-list' import { ChatPanel } from '@/components/chat-panel' import { EmptyScreen } from '@/components/empty-screen' import { ChatScrollAnchor } from '@/components/chat-scroll-anchor' +import { useLocalStorage } from '@/lib/hooks/use-local-storage' +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle +} from '@/components/ui/dialog' +import { useState } from 'react' +import { Button } from './ui/button' +import { Input } from './ui/input' +const IS_PREVIEW = true || process.env.VERCEL_ENV === 'preview' export interface ChatProps extends React.ComponentProps<'div'> { initialMessages?: Message[] id?: string } export function Chat({ id, initialMessages, className }: ChatProps) { + const [previewToken, setPreviewToken] = useLocalStorage( + 'ai-token', + null + ) + const [previewTokenDialog, setPreviewTokenDialog] = useState( + IS_PREVIEW && previewToken == null + ) + const [previewTokenInput, setPreviewTokenInput] = useState(previewToken ?? '') const { messages, append, reload, stop, isLoading, input, setInput } = useChat({ initialMessages, id, body: { - id + id, + previewToken } }) - + console.log(previewToken) return ( <>
@@ -45,6 +67,43 @@ export function Chat({ id, initialMessages, className }: ChatProps) { input={input} setInput={setInput} /> + {IS_PREVIEW && previewToken == null && ( + + + + Enter your OpenAI Key + + If you have not obtained your OpenAI API key, you can do so by{' '} + + signing up + {' '} + on the OpenAI website. This is only necessary for preview + environments so that the open source community can test the app. + The token will be saved to your browser's local storage + under the name ai-token. + + + setPreviewTokenInput(e.target.value)} + /> + + + + + + )} ) } diff --git a/lib/hooks/use-local-storage.ts b/lib/hooks/use-local-storage.ts new file mode 100644 index 0000000..19f6b7e --- /dev/null +++ b/lib/hooks/use-local-storage.ts @@ -0,0 +1,24 @@ +import { useEffect, useState } from 'react' + +export const useLocalStorage = ( + key: string, + initialValue: T +): [T, (value: T) => void] => { + const [storedValue, setStoredValue] = useState(initialValue) + + useEffect(() => { + // Retrieve from localStorage + const item = window.localStorage.getItem(key) + if (item) { + setStoredValue(JSON.parse(item)) + } + }, [key]) + + const setValue = (value: T) => { + // Save state + setStoredValue(value) + // Save to localStorage + window.localStorage.setItem(key, JSON.stringify(value)) + } + return [storedValue, setValue] +} From d1b8f1626120baae474446e3cbe2451c40d716ed Mon Sep 17 00:00:00 2001 From: Jared Palmer Date: Fri, 16 Jun 2023 16:32:19 -0400 Subject: [PATCH 2/6] Really test out the key --- app/api/chat/route.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/app/api/chat/route.ts b/app/api/chat/route.ts index 0024ea4..ec1ce73 100644 --- a/app/api/chat/route.ts +++ b/app/api/chat/route.ts @@ -8,9 +8,11 @@ import { nanoid } from '@/lib/utils' export const runtime = 'edge' export async function POST(req: Request) { - const session = await auth() - if (session == null) { - return new Response('Unauthorized', { status: 401 }) + if (process.env.VERCEL_ENV !== 'preview') { + const session = await auth() + if (session == null) { + return new Response('Unauthorized', { status: 401 }) + } } const json = await req.json() From 8b47fbd9e4cbc3e91aa553f690e8a09c00980651 Mon Sep 17 00:00:00 2001 From: Jared Palmer Date: Fri, 16 Jun 2023 16:33:47 -0400 Subject: [PATCH 3/6] Fix deploy --- app/api/chat/route.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/app/api/chat/route.ts b/app/api/chat/route.ts index ec1ce73..5500723 100644 --- a/app/api/chat/route.ts +++ b/app/api/chat/route.ts @@ -4,20 +4,21 @@ import { Configuration, OpenAIApi } from 'openai-edge' import { auth } from '@/auth' import { nanoid } from '@/lib/utils' +import { Session } from 'inspector' export const runtime = 'edge' export async function POST(req: Request) { + const json = await req.json() + const { messages, previewToken } = json + let session: Session if (process.env.VERCEL_ENV !== 'preview') { - const session = await auth() + session = await auth() if (session == null) { return new Response('Unauthorized', { status: 401 }) } } - const json = await req.json() - const { messages, previewToken } = json - const configuration = new Configuration({ apiKey: previewToken || process.env.OPENAI_API_KEY }) From 8459ac8c6322a1d2986409c3fe4b2dc1dc25a4b7 Mon Sep 17 00:00:00 2001 From: Jared Palmer Date: Fri, 16 Jun 2023 16:35:27 -0400 Subject: [PATCH 4/6] Tweak route --- app/api/chat/route.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/app/api/chat/route.ts b/app/api/chat/route.ts index 5500723..338210d 100644 --- a/app/api/chat/route.ts +++ b/app/api/chat/route.ts @@ -4,16 +4,15 @@ import { Configuration, OpenAIApi } from 'openai-edge' import { auth } from '@/auth' import { nanoid } from '@/lib/utils' -import { Session } from 'inspector' export const runtime = 'edge' export async function POST(req: Request) { const json = await req.json() const { messages, previewToken } = json - let session: Session + const session = await auth() + if (process.env.VERCEL_ENV !== 'preview') { - session = await auth() if (session == null) { return new Response('Unauthorized', { status: 401 }) } From 11757ebbe0deefbcf9011457299d52d81ea831dd Mon Sep 17 00:00:00 2001 From: Jared Palmer Date: Fri, 16 Jun 2023 16:46:45 -0400 Subject: [PATCH 5/6] Fix hydration --- components/chat.tsx | 78 +++++++++++++++++++++------------------------ 1 file changed, 37 insertions(+), 41 deletions(-) diff --git a/components/chat.tsx b/components/chat.tsx index 496e1bc..78bad46 100644 --- a/components/chat.tsx +++ b/components/chat.tsx @@ -20,7 +20,7 @@ import { useState } from 'react' import { Button } from './ui/button' import { Input } from './ui/input' -const IS_PREVIEW = true || process.env.VERCEL_ENV === 'preview' +const IS_PREVIEW = process.env.VERCEL_ENV === 'preview' export interface ChatProps extends React.ComponentProps<'div'> { initialMessages?: Message[] id?: string @@ -31,9 +31,7 @@ export function Chat({ id, initialMessages, className }: ChatProps) { 'ai-token', null ) - const [previewTokenDialog, setPreviewTokenDialog] = useState( - IS_PREVIEW && previewToken == null - ) + const [previewTokenDialog, setPreviewTokenDialog] = useState(IS_PREVIEW) const [previewTokenInput, setPreviewTokenInput] = useState(previewToken ?? '') const { messages, append, reload, stop, isLoading, input, setInput } = useChat({ @@ -44,7 +42,6 @@ export function Chat({ id, initialMessages, className }: ChatProps) { previewToken } }) - console.log(previewToken) return ( <>
@@ -67,43 +64,42 @@ export function Chat({ id, initialMessages, className }: ChatProps) { input={input} setInput={setInput} /> - {IS_PREVIEW && previewToken == null && ( - - - - Enter your OpenAI Key - - If you have not obtained your OpenAI API key, you can do so by{' '} - - signing up - {' '} - on the OpenAI website. This is only necessary for preview - environments so that the open source community can test the app. - The token will be saved to your browser's local storage - under the name ai-token. - - - setPreviewTokenInput(e.target.value)} - /> - - - - - - )} + signing up + {' '} + on the OpenAI website. This is only necessary for preview + environments so that the open source community can test the app. + The token will be saved to your browser's local storage under + the name ai-token. + + + setPreviewTokenInput(e.target.value)} + /> + + + + + ) } From 9a407de5a20b7eeeda8ac37bed0244e71f559c14 Mon Sep 17 00:00:00 2001 From: Jared Palmer Date: Fri, 16 Jun 2023 16:47:18 -0400 Subject: [PATCH 6/6] Fix parameters for chat --- app/api/chat/route.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/app/api/chat/route.ts b/app/api/chat/route.ts index 338210d..6bb781d 100644 --- a/app/api/chat/route.ts +++ b/app/api/chat/route.ts @@ -28,10 +28,6 @@ export async function POST(req: Request) { model: 'gpt-3.5-turbo', messages, temperature: 0.7, - top_p: 1, - frequency_penalty: 1, - max_tokens: 500, - n: 1, stream: true })