159 lines
4.3 KiB
TypeScript
159 lines
4.3 KiB
TypeScript
'use client'
|
|
|
|
import { usePathname, useRouter, useSearchParams } from 'next/navigation'
|
|
import { useEffect, useRef, useState } from 'react'
|
|
|
|
import Textarea from 'react-textarea-autosize'
|
|
|
|
import { useEnterSubmit } from '@/lib/hooks/use-enter-submit'
|
|
import { cn } from '@/lib/utils'
|
|
import { Button, buttonVariants } from '@/components/ui/button'
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipTrigger
|
|
} from '@/components/ui/tooltip'
|
|
import { IconArrowElbow, IconHome } from '@/components/ui/icons'
|
|
import { UseChatHelpers } from 'ai/react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { PrefetchKind } from 'next/dist/client/components/router-reducer/router-reducer-types'
|
|
|
|
|
|
export interface PromptIndexProps {
|
|
onSubmit?: (value: string) => void
|
|
isLoading?: boolean
|
|
id: string
|
|
}
|
|
|
|
export function PromptFormIndex({
|
|
onSubmit,
|
|
// input,
|
|
// setInput,
|
|
isLoading,
|
|
id
|
|
}: PromptIndexProps) {
|
|
const router = useRouter()
|
|
const { t } = useTranslation();
|
|
|
|
const { formRef, onKeyDown } = useEnterSubmit()
|
|
const [input, setInput] = useState<string>('')
|
|
// const inputRef = useRef<HTMLTextAreaElement>(null)
|
|
|
|
// useEffect(() => {
|
|
// if (inputRef.current) {
|
|
// inputRef.current.focus()
|
|
// }
|
|
// }, [])
|
|
|
|
const searchParams = useSearchParams()
|
|
const pathname = usePathname()
|
|
const q = searchParams.get('q')
|
|
|
|
console.log("----PromptFormIndex----", pathname, q, ["/", "/zh-CN/"].includes(pathname))
|
|
|
|
|
|
return (
|
|
<form
|
|
onSubmit={async (e) => {
|
|
e.preventDefault()
|
|
// if (!inputRef.current) {
|
|
// return
|
|
// }
|
|
|
|
if (!input?.trim() || isLoading) {
|
|
return
|
|
}
|
|
setInput('')
|
|
|
|
// const url = `/chat/${id}?q=${input}`
|
|
// if (["/", "/zh-CN/"].includes(pathname)) {
|
|
// // router.push(`/`, { shallow: false })
|
|
|
|
// console.log("--onSubmit--", e, input, url)
|
|
// router.push(url, { scroll: false })
|
|
// } else {
|
|
// router.prefetch(url, {
|
|
// kind: PrefetchKind.FULL
|
|
// })
|
|
|
|
// history.pushState({}, '', url)
|
|
// history.go(1)
|
|
|
|
|
|
|
|
// }
|
|
|
|
if (!!onSubmit) {
|
|
await onSubmit(input)
|
|
}
|
|
|
|
|
|
// inputRef.current.value = ""
|
|
|
|
// router.prefetch(url, {
|
|
// kind: PrefetchKind.FULL
|
|
// })
|
|
|
|
// history.pushState({}, '', url)
|
|
// history.go(1)
|
|
|
|
|
|
}}
|
|
ref={formRef}
|
|
>
|
|
|
|
<div className="relative flex w-full grow flex-col overflow-hidden px-8 sm:rounded-full sm:border-none sm:px-4 bg-[#b2b2b233]" >
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
{/* <Button
|
|
onClick={() => {
|
|
router.push(`/`, { shallow: false })
|
|
}}
|
|
className={cn(
|
|
buttonVariants({ size: 'sm', variant: 'secondary' }),
|
|
'absolute left-0 top-4 h-8 w-8 rounded-full border p-0 sm:left-4'
|
|
)}
|
|
>
|
|
<IconHome />
|
|
<span className="sr-only">New Chat</span>
|
|
</Button> */}
|
|
</TooltipTrigger>
|
|
<TooltipContent>New Chat</TooltipContent>
|
|
</Tooltip>
|
|
<Textarea
|
|
// ref={inputRef}
|
|
tabIndex={0}
|
|
onKeyDown={onKeyDown}
|
|
rows={1}
|
|
value={input}
|
|
onChange={e => {
|
|
// console.log("----onChange----", e)
|
|
setInput(e.target.value);
|
|
|
|
}}
|
|
placeholder={t("chat.describe_your_intent")}
|
|
spellCheck={false}
|
|
className="min-h-[50px] w-full border-none resize-none bg-transparent px-0 py-[1rem] focus-within:outline-none sm:text-sm placeholder:text-[#666666]"
|
|
/>
|
|
<div className="absolute right-0 top-1 sm:right-2 ">
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
className="bg-baclbtn h-11 sm:rounded-full px-6 disabled:bg-[#B2B2B2] disabled:opacity-100 text-[1.125rem]"
|
|
type="submit"
|
|
// size="icon"
|
|
disabled={!input.trim()}
|
|
>
|
|
{/* <IconArrowElbow className="fill-white" /> */}
|
|
<span >{t("chat.send")} </span>
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>{t("chat.send_message")}</TooltipContent>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
)
|
|
}
|
|
|