e0e41d7e21
- 新增 Bell、Collect 和 NotCollect 图标组件 - 优化 History 组件，添加隐藏 logo 功能 - 调整 Message 组件样式，移除不必要的代码 - 更新 Scene 组件 Header 颜色 - 注释掉 tailwind.css 中的 arimo 字体权重
517 lines
18 KiB
TypeScript
517 lines
18 KiB
TypeScript
import { useForm } from "@mantine/form"
|
|
import { useMutation, useQueryClient } from "@tanstack/react-query"
|
|
import React, { useMemo } from "react"
|
|
import useDynamicTextareaSize from "~/hooks/useDynamicTextareaSize"
|
|
import { toBase64 } from "~/libs/to-base64"
|
|
import { useMessageOption } from "~/hooks/useMessageOption"
|
|
import {
|
|
Button,
|
|
Checkbox,
|
|
Dropdown,
|
|
Image,
|
|
MenuProps,
|
|
Switch,
|
|
Tooltip
|
|
} from "antd"
|
|
import { useWebUI } from "~/store/webui"
|
|
import { defaultEmbeddingModelForRag } from "~/services/ollama"
|
|
import { ImageIcon, MicIcon, StopCircleIcon, X } from "lucide-react"
|
|
import { getVariable } from "@/utils/select-variable"
|
|
import { useTranslation } from "react-i18next"
|
|
// import { KnowledgeSelect } from "../Knowledge/KnowledgeSelect"
|
|
import { useSpeechRecognition } from "@/hooks/useSpeechRecognition"
|
|
import { PiGlobe, PiNetwork } from "react-icons/pi"
|
|
import { handleChatInputKeyDown } from "@/utils/key-down"
|
|
import { getIsSimpleInternetSearch } from "@/services/search"
|
|
|
|
type Props = {
|
|
dropedFile: File | undefined
|
|
}
|
|
|
|
export const PlaygroundForm = ({ dropedFile }: Props) => {
|
|
const { t } = useTranslation(["playground", "common"])
|
|
const inputRef = React.useRef<HTMLInputElement>(null)
|
|
const [typing, setTyping] = React.useState<boolean>(false)
|
|
const {
|
|
onSubmit,
|
|
selectedModel,
|
|
chatMode,
|
|
speechToTextLanguage,
|
|
stopStreamingRequest,
|
|
streaming: isSending,
|
|
webSearch,
|
|
setWebSearch,
|
|
iodSearch,
|
|
setIodSearch,
|
|
selectedQuickPrompt,
|
|
textareaRef,
|
|
setSelectedQuickPrompt,
|
|
selectedKnowledge,
|
|
temporaryChat,
|
|
useOCR,
|
|
setUseOCR,
|
|
defaultInternetSearchOn
|
|
} = useMessageOption()
|
|
|
|
const isMobile = () => {
|
|
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
|
|
navigator.userAgent
|
|
)
|
|
}
|
|
|
|
const textAreaFocus = () => {
|
|
if (textareaRef.current) {
|
|
if (
|
|
textareaRef.current.selectionStart === textareaRef.current.selectionEnd
|
|
) {
|
|
if (!isMobile()) {
|
|
textareaRef.current.focus()
|
|
} else {
|
|
textareaRef.current.blur()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
const form = useForm({
|
|
initialValues: {
|
|
message: "",
|
|
image: ""
|
|
}
|
|
})
|
|
|
|
React.useEffect(() => {
|
|
textAreaFocus()
|
|
if (defaultInternetSearchOn) {
|
|
setWebSearch(true)
|
|
}
|
|
}, [])
|
|
|
|
React.useEffect(() => {
|
|
if (defaultInternetSearchOn) {
|
|
setWebSearch(true)
|
|
}
|
|
}, [defaultInternetSearchOn])
|
|
|
|
const onInputChange = async (
|
|
e: React.ChangeEvent<HTMLInputElement> | File
|
|
) => {
|
|
if (e instanceof File) {
|
|
const base64 = await toBase64(e)
|
|
form.setFieldValue("image", base64)
|
|
} else {
|
|
if (e.target.files) {
|
|
const base64 = await toBase64(e.target.files[0])
|
|
form.setFieldValue("image", base64)
|
|
}
|
|
}
|
|
}
|
|
const handlePaste = (e: React.ClipboardEvent) => {
|
|
if (e.clipboardData.files.length > 0) {
|
|
onInputChange(e.clipboardData.files[0])
|
|
}
|
|
}
|
|
React.useEffect(() => {
|
|
if (dropedFile) {
|
|
onInputChange(dropedFile)
|
|
}
|
|
}, [dropedFile])
|
|
|
|
useDynamicTextareaSize(textareaRef, form.values.message, 300)
|
|
|
|
const {
|
|
transcript,
|
|
isListening,
|
|
resetTranscript,
|
|
start: startListening,
|
|
stop: stopSpeechRecognition,
|
|
supported: browserSupportsSpeechRecognition
|
|
} = useSpeechRecognition()
|
|
const { sendWhenEnter, setSendWhenEnter } = useWebUI()
|
|
|
|
React.useEffect(() => {
|
|
if (isListening) {
|
|
form.setFieldValue("message", transcript)
|
|
}
|
|
}, [transcript])
|
|
|
|
React.useEffect(() => {
|
|
if (selectedQuickPrompt) {
|
|
const word = getVariable(selectedQuickPrompt)
|
|
form.setFieldValue("message", selectedQuickPrompt)
|
|
if (word) {
|
|
textareaRef.current?.focus()
|
|
const interval = setTimeout(() => {
|
|
textareaRef.current?.setSelectionRange(word.start, word.end)
|
|
setSelectedQuickPrompt(null)
|
|
}, 100)
|
|
return () => {
|
|
clearInterval(interval)
|
|
}
|
|
}
|
|
}
|
|
}, [selectedQuickPrompt])
|
|
|
|
const queryClient = useQueryClient()
|
|
|
|
const { mutateAsync: sendMessage } = useMutation({
|
|
mutationFn: onSubmit,
|
|
onSuccess: () => {
|
|
textAreaFocus()
|
|
queryClient.invalidateQueries({
|
|
queryKey: ["fetchChatHistory"]
|
|
})
|
|
},
|
|
onError: (error) => {
|
|
textAreaFocus()
|
|
}
|
|
})
|
|
|
|
const handleKeyDown = (e: React.KeyboardEvent) => {
|
|
if (import.meta.env.BROWSER !== "firefox") {
|
|
if (e.key === "Process" || e.key === "229") return
|
|
}
|
|
if (
|
|
handleChatInputKeyDown({
|
|
e,
|
|
sendWhenEnter,
|
|
typing,
|
|
isSending
|
|
})
|
|
) {
|
|
e.preventDefault()
|
|
stopListening()
|
|
form.onSubmit(async (value) => {
|
|
if (value.message.trim().length === 0 && value.image.length === 0) {
|
|
return
|
|
}
|
|
if (!selectedModel || selectedModel.length === 0) {
|
|
form.setFieldError("message", t("formError.noModel"))
|
|
return
|
|
}
|
|
if (webSearch) {
|
|
const defaultEM = await defaultEmbeddingModelForRag()
|
|
const simpleSearch = await getIsSimpleInternetSearch()
|
|
if (!defaultEM && !simpleSearch) {
|
|
form.setFieldError("message", t("formError.noEmbeddingModel"))
|
|
return
|
|
}
|
|
}
|
|
form.reset()
|
|
textAreaFocus()
|
|
await sendMessage({
|
|
image: value.image,
|
|
message: value.message.trim()
|
|
})
|
|
})()
|
|
}
|
|
}
|
|
|
|
const stopListening = async () => {
|
|
if (isListening) {
|
|
stopSpeechRecognition()
|
|
}
|
|
}
|
|
|
|
const iodSearchItems = useMemo<MenuProps["items"]>(() => {
|
|
return [
|
|
{
|
|
key: 0,
|
|
label: (
|
|
<p
|
|
onClick={() => {
|
|
setIodSearch(true)
|
|
}}>
|
|
<p
|
|
className={`${iodSearch ? "text-[#0057ff]" : "text-[#000000d9]"} flex items-center gap-1 mb-1`}>
|
|
<PiNetwork className="h-5 w-5" />开
|
|
</p>
|
|
<p className="text-[#00000080]">输出带数联网的回答</p>
|
|
</p>
|
|
)
|
|
},
|
|
{
|
|
key: 1,
|
|
label: (
|
|
<p
|
|
onClick={() => {
|
|
setIodSearch(false)
|
|
}}>
|
|
<p
|
|
className={`${!iodSearch ? "text-[#0057ff]" : "text-[#000000d9]"} flex items-center gap-1 mb-1`}>
|
|
<PiNetwork className="h-5 w-5" /> 关闭
|
|
</p>
|
|
<p className="text-[#00000080]">快速直接回答</p>
|
|
</p>
|
|
)
|
|
}
|
|
]
|
|
}, [iodSearch])
|
|
|
|
return (
|
|
<div className="flex w-full flex-col items-center pt-1 px-5 pb-4">
|
|
<div className="relative z-10 flex w-full flex-col items-center justify-center gap-2 text-base">
|
|
<div className="relative flex w-full flex-row justify-center gap-2 lg:w-5/5">
|
|
<div
|
|
className={`shadow-xl relative w-full max-w-[65rem] p-1 rounded-xl bg-gradient-to-br from-white/90 via-blue-50/90 to-cyan-50/90 backdrop-blur-lg border border-blue-100/70 cursor-pointer hover:shadow-blue-100/60 transition-all duration-500`}>
|
|
<div
|
|
className={`border-b border-gray-200 dark:border-gray-600 relative ${
|
|
form.values.image.length === 0 ? "hidden" : "block"
|
|
}`}>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
form.setFieldValue("image", "")
|
|
}}
|
|
className="absolute top-1 left-1 flex items-center justify-center z-10 bg-white dark:bg-[#262626] p-0.5 rounded-full hover:bg-gray-100 dark:hover:bg-gray-600 text-black dark:text-gray-100">
|
|
<X className="h-4 w-4" />
|
|
</button>{" "}
|
|
<Image
|
|
src={form.values.image}
|
|
alt="Uploaded Image"
|
|
preview={false}
|
|
className="rounded-md max-h-32"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<div className={`flex bg-transparent `}>
|
|
<form
|
|
onSubmit={form.onSubmit(async (value) => {
|
|
stopListening()
|
|
if (!selectedModel || selectedModel.length === 0) {
|
|
form.setFieldError("message", t("formError.noModel"))
|
|
return
|
|
}
|
|
if (webSearch) {
|
|
const defaultEM = await defaultEmbeddingModelForRag()
|
|
const simpleSearch = await getIsSimpleInternetSearch()
|
|
if (!defaultEM && !simpleSearch) {
|
|
form.setFieldError(
|
|
"message",
|
|
t("formError.noEmbeddingModel")
|
|
)
|
|
return
|
|
}
|
|
}
|
|
if (
|
|
value.message.trim().length === 0 &&
|
|
value.image.length === 0
|
|
) {
|
|
return
|
|
}
|
|
form.reset()
|
|
textAreaFocus()
|
|
await sendMessage({
|
|
image: value.image,
|
|
message: value.message.trim()
|
|
})
|
|
})}
|
|
className="shrink-0 flex-grow flex flex-col items-center ">
|
|
<input
|
|
id="file-upload"
|
|
name="file-upload"
|
|
type="file"
|
|
className="sr-only"
|
|
ref={inputRef}
|
|
accept="image/*"
|
|
multiple={false}
|
|
onChange={onInputChange}
|
|
/>
|
|
<div className="w-full flex flex-col dark:border-gray-600 p-2">
|
|
<textarea
|
|
onCompositionStart={() => {
|
|
if (import.meta.env.BROWSER !== "firefox") {
|
|
setTyping(true)
|
|
}
|
|
}}
|
|
onCompositionEnd={() => {
|
|
if (import.meta.env.BROWSER !== "firefox") {
|
|
setTyping(false)
|
|
}
|
|
}}
|
|
onKeyDown={(e) => handleKeyDown(e)}
|
|
ref={textareaRef}
|
|
className="px-2 py-2 w-full resize-none bg-transparent focus-within:outline-none focus:ring-0 focus-visible:ring-0 ring-0 dark:ring-0 border-0 dark:text-gray-100"
|
|
onPaste={handlePaste}
|
|
rows={1}
|
|
style={{ minHeight: "35px" }}
|
|
tabIndex={0}
|
|
placeholder={t("form.textarea.placeholder")}
|
|
{...form.getInputProps("message")}
|
|
/>
|
|
<div className="mt-2 flex justify-between items-center">
|
|
<div className="flex">
|
|
{!selectedKnowledge && (
|
|
<div>
|
|
{/* 展示隐藏深度搜索*/}
|
|
<Tooltip
|
|
title={t("tooltip.searchInternet")}
|
|
className="hidden">
|
|
<div className="inline-flex items-center gap-2">
|
|
<PiGlobe
|
|
className={`h-5 w-5 dark:text-gray-300 `}
|
|
/>
|
|
<Switch
|
|
value={webSearch}
|
|
onChange={(e) => setWebSearch(e)}
|
|
checkedChildren={t("form.webSearch.on")}
|
|
unCheckedChildren={t("form.webSearch.off")}
|
|
/>
|
|
</div>
|
|
</Tooltip>
|
|
<Dropdown
|
|
menu={{ items: iodSearchItems }}
|
|
placement="bottom"
|
|
trigger={["click"]}
|
|
arrow>
|
|
<Button
|
|
color="default"
|
|
variant="filled"
|
|
size="large"
|
|
className="w-full mt-4 hover:!bg-[#0057ff1a]"
|
|
style={
|
|
iodSearch
|
|
? {
|
|
color: "#0057ff",
|
|
background: "#0057ff0f",
|
|
border: "1px solid #0066ff26"
|
|
}
|
|
: {}
|
|
}>
|
|
<PiNetwork className="h-5 w-5" />
|
|
数联网深度搜索{iodSearch ? "：开" : ""}
|
|
</Button>
|
|
</Dropdown>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="flex !justify-end gap-1">
|
|
{!selectedKnowledge && (
|
|
<Tooltip title={t("tooltip.uploadImage")}>
|
|
<Button
|
|
color="default"
|
|
variant="text"
|
|
onClick={() => {
|
|
inputRef.current?.click()
|
|
}}
|
|
className={`!px-[5px] flex items-center justify-center dark:text-gray-300 ${
|
|
chatMode === "rag" ? "hidden" : "block"
|
|
}`}>
|
|
<ImageIcon stroke-width={1} className="h-5 w-5" />
|
|
</Button>
|
|
</Tooltip>
|
|
)}
|
|
|
|
{browserSupportsSpeechRecognition && (
|
|
<Tooltip title={t("tooltip.speechToText")}>
|
|
<Button
|
|
color="default"
|
|
variant="text"
|
|
onClick={async () => {
|
|
if (isListening) {
|
|
stopSpeechRecognition()
|
|
} else {
|
|
resetTranscript()
|
|
startListening({
|
|
continuous: true,
|
|
lang: speechToTextLanguage
|
|
})
|
|
}
|
|
}}
|
|
className={`flex items-center justify-center dark:text-gray-300 !px-[5px]`}>
|
|
{!isListening ? (
|
|
<MicIcon stroke-width={1} className="h-5 w-5" />
|
|
) : (
|
|
<div className="relative">
|
|
<span className="animate-ping absolute inline-flex h-3 w-3 rounded-full bg-red-400 opacity-75"></span>
|
|
<MicIcon
|
|
stroke-width={1}
|
|
className="h-5 w-5"
|
|
/>
|
|
</div>
|
|
)}
|
|
</Button>
|
|
</Tooltip>
|
|
)}
|
|
{/*<KnowledgeSelect />*/}
|
|
|
|
{!isSending ? (
|
|
<Dropdown.Button
|
|
type="default"
|
|
htmlType="submit"
|
|
disabled={isSending}
|
|
// icon={
|
|
// <svg
|
|
// xmlns="http://www.w3.org/2000/svg"
|
|
// fill="none"
|
|
// viewBox="0 0 24 24"
|
|
// strokeWidth={1.5}
|
|
// stroke="currentColor"
|
|
// className="w-5 h-5">
|
|
// <path
|
|
// strokeLinecap="round"
|
|
// strokeLinejoin="round"
|
|
// d="m19.5 8.25-7.5 7.5-7.5-7.5"
|
|
// />
|
|
// </svg>
|
|
// }
|
|
menu={{
|
|
items: [
|
|
{
|
|
key: 1,
|
|
label: (
|
|
<Checkbox
|
|
checked={sendWhenEnter}
|
|
onChange={(e) =>
|
|
setSendWhenEnter(e.target.checked)
|
|
}>
|
|
{t("sendWhenEnter")}
|
|
</Checkbox>
|
|
)
|
|
},
|
|
{
|
|
key: 2,
|
|
label: (
|
|
<Checkbox
|
|
checked={useOCR}
|
|
onChange={(e) =>
|
|
setUseOCR(e.target.checked)
|
|
}>
|
|
{t("useOCR")}
|
|
</Checkbox>
|
|
)
|
|
}
|
|
]
|
|
}}>
|
|
<div className="inline-flex gap-2">
|
|
{t("common:submit")}
|
|
</div>
|
|
</Dropdown.Button>
|
|
) : (
|
|
<Tooltip title={t("tooltip.stopStreaming")}>
|
|
<button
|
|
type="button"
|
|
onClick={stopStreamingRequest}
|
|
className="text-gray-800 dark:text-gray-300">
|
|
<StopCircleIcon className="h-6 w-6" />
|
|
</button>
|
|
</Tooltip>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
{form.errors.message && (
|
|
<div className="text-red-500 text-center text-sm mt-1">
|
|
{form.errors.message}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|