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 { Button } from './ui/button'
import { Input } from './ui/input' 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'> { export interface ChatProps extends React.ComponentProps<'div'> {
initialMessages?: Message[] initialMessages?: Message[]
id?: string id?: string
@ -31,9 +31,7 @@ export function Chat({ id, initialMessages, className }: ChatProps) {
'ai-token', 'ai-token',
null null
) )
const [previewTokenDialog, setPreviewTokenDialog] = useState( const [previewTokenDialog, setPreviewTokenDialog] = useState(IS_PREVIEW)
IS_PREVIEW && previewToken == null
)
const [previewTokenInput, setPreviewTokenInput] = useState(previewToken ?? '') const [previewTokenInput, setPreviewTokenInput] = useState(previewToken ?? '')
const { messages, append, reload, stop, isLoading, input, setInput } = const { messages, append, reload, stop, isLoading, input, setInput } =
useChat({ useChat({
@ -44,7 +42,6 @@ export function Chat({ id, initialMessages, className }: ChatProps) {
previewToken previewToken
} }
}) })
console.log(previewToken)
return ( return (
<> <>
<div className={cn('pb-[200px] pt-4 md:pt-10', className)}> <div className={cn('pb-[200px] pt-4 md:pt-10', className)}>
@ -67,43 +64,42 @@ export function Chat({ id, initialMessages, className }: ChatProps) {
input={input} input={input}
setInput={setInput} setInput={setInput}
/> />
{IS_PREVIEW && previewToken == null && (
<Dialog open={previewTokenDialog} onOpenChange={setPreviewTokenDialog}> <Dialog open={previewTokenDialog} onOpenChange={setPreviewTokenDialog}>
<DialogContent> <DialogContent>
<DialogHeader> <DialogHeader>
<DialogTitle>Enter your OpenAI Key</DialogTitle> <DialogTitle>Enter your OpenAI Key</DialogTitle>
<DialogDescription> <DialogDescription>
If you have not obtained your OpenAI API key, you can do so by{' '} If you have not obtained your OpenAI API key, you can do so by{' '}
<a <a
href="https://platform.openai.com/signup/" href="https://platform.openai.com/signup/"
className="underline" 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)
}}
> >
Save Token signing up
</Button> </a>{' '}
</DialogFooter> on the OpenAI website. This is only necessary for preview
</DialogContent> environments so that the open source community can test the app.
</Dialog> 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>
</> </>
) )
} }