dmitry.galkin/chatbot-template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix hydration

Browse source
This commit is contained in:
Jared Palmer 2023-06-16 16:46:45 -04:00
parent d10abef8da
commit 11757ebbe0
1 changed files with 37 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

78
components/chat.tsx
View file

@ -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 (
<>
<div className={cn('pb-[200px] pt-4 md:pt-10', className)}>
@ -67,43 +64,42 @@ export function Chat({ id, initialMessages, className }: ChatProps) {
input={input}
setInput={setInput}
/>
{IS_PREVIEW && previewToken == null && (
<Dialog open={previewTokenDialog} onOpenChange={setPreviewTokenDialog}>
<DialogContent>
<DialogHeader>
<DialogTitle>Enter your OpenAI Key</DialogTitle>
<DialogDescription>
If you have not obtained your OpenAI API key, you can do so by{' '}
<a
href="https://platform.openai.com/signup/"
className="underline"
>
signing up
</a>{' '}
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&apos;s local storage
under the name <code className="font-mono">ai-token</code>.
</DialogDescription>
</DialogHeader>
<Input
value={previewTokenInput}
placeholder="OpenAI API key"
onChange={e => setPreviewTokenInput(e.target.value)}
/>
<DialogFooter className="items-center">
<Button
onClick={() => {
setPreviewToken(previewTokenInput)
setPreviewTokenDialog(false)
}}
<Dialog open={previewTokenDialog} onOpenChange={setPreviewTokenDialog}>
<DialogContent>
<DialogHeader>
<DialogTitle>Enter your OpenAI Key</DialogTitle>
<DialogDescription>
If you have not obtained your OpenAI API key, you can do so by{' '}
<a
href="https://platform.openai.com/signup/"
className="underline"
>
Save Token
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
)}
signing up
</a>{' '}
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&apos;s local storage under
the name <code className="font-mono">ai-token</code>.
</DialogDescription>
</DialogHeader>
<Input
value={previewTokenInput}
placeholder="OpenAI API key"
onChange={e => setPreviewTokenInput(e.target.value)}
/>
<DialogFooter className="items-center">
<Button
onClick={() => {
setPreviewToken(previewTokenInput)
setPreviewTokenDialog(false)
}}
>
Save Token
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</>
)
}