refactor: enhance Sidepanel layout and structure for improved usability and responsiveness
This commit is contained in:
n4ze3m
parent
d315a39793
commit
7b8ba1404d
@ -23,42 +23,45 @@ export const SidePanelBody = () => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
return (
|
return (
|
||||||
<div className="grow flex flex-col md:translate-x-0 transition-transform duration-300 ease-in-out">
|
<>
|
||||||
{messages.length === 0 && <EmptySidePanel />}
|
<div className="relative flex w-full flex-col items-center pt-16 pb-4">
|
||||||
{messages.map((message, index) => (
|
{messages.length === 0 && <EmptySidePanel />}
|
||||||
<PlaygroundMessage
|
{messages.map((message, index) => (
|
||||||
key={index}
|
<PlaygroundMessage
|
||||||
isBot={message.isBot}
|
key={index}
|
||||||
message={message.message}
|
isBot={message.isBot}
|
||||||
name={message.name}
|
message={message.message}
|
||||||
images={message.images || []}
|
name={message.name}
|
||||||
currentMessageIndex={index}
|
images={message.images || []}
|
||||||
totalMessages={messages.length}
|
currentMessageIndex={index}
|
||||||
onRengerate={regenerateLastMessage}
|
totalMessages={messages.length}
|
||||||
message_type={message.messageType}
|
onRengerate={regenerateLastMessage}
|
||||||
isProcessing={streaming}
|
message_type={message.messageType}
|
||||||
isSearchingInternet={isSearchingInternet}
|
isProcessing={streaming}
|
||||||
sources={message.sources}
|
isSearchingInternet={isSearchingInternet}
|
||||||
onEditFormSubmit={(value) => {
|
sources={message.sources}
|
||||||
editMessage(index, value, !message.isBot)
|
onEditFormSubmit={(value) => {
|
||||||
}}
|
editMessage(index, value, !message.isBot)
|
||||||
onSourceClick={(data) => {
|
}}
|
||||||
setSource(data)
|
onSourceClick={(data) => {
|
||||||
setIsSourceOpen(true)
|
setSource(data)
|
||||||
}}
|
setIsSourceOpen(true)
|
||||||
isTTSEnabled={ttsEnabled}
|
}}
|
||||||
generationInfo={message?.generationInfo}
|
isTTSEnabled={ttsEnabled}
|
||||||
isStreaming={streaming}
|
generationInfo={message?.generationInfo}
|
||||||
reasoningTimeTaken={message?.reasoning_time_taken}
|
isStreaming={streaming}
|
||||||
/>
|
reasoningTimeTaken={message?.reasoning_time_taken}
|
||||||
))}
|
/>
|
||||||
<div className="w-full h-48 flex-shrink-0"></div>
|
))}
|
||||||
<div ref={divRef} />
|
<div ref={divRef} />
|
||||||
|
</div>
|
||||||
|
<div className="w-full pb-[157px]"></div>
|
||||||
|
|
||||||
<MessageSourcePopup
|
<MessageSourcePopup
|
||||||
open={isSourceOpen}
|
open={isSourceOpen}
|
||||||
setOpen={setIsSourceOpen}
|
setOpen={setIsSourceOpen}
|
||||||
source={source}
|
source={source}
|
||||||
/>
|
/>
|
||||||
</div>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -134,8 +134,8 @@ export const EmptySidePanel = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="mx-auto sm:max-w-md px-4 mt-10">
|
<div className="mx-auto sm:max-w-lg px-4 mt-10">
|
||||||
<div className="rounded-lg justify-center items-center flex flex-col border dark:border-gray-700 p-8 bg-white dark:bg-[#262626] shadow-sm">
|
<div className="rounded-lg justify-center items-center flex flex-col border border-gray-300 dark:border-gray-700 p-8 bg-white dark:bg-[#262626] shadow-sm">
|
||||||
{(ollamaStatus === "pending" || isRefetching) && (
|
{(ollamaStatus === "pending" || isRefetching) && (
|
||||||
<div className="inline-flex items-center space-x-2">
|
<div className="inline-flex items-center space-x-2">
|
||||||
<div className="w-3 h-3 bg-blue-500 rounded-full animate-bounce"></div>
|
<div className="w-3 h-3 bg-blue-500 rounded-full animate-bounce"></div>
|
||||||
|
|||||||
@ -226,271 +226,289 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
|
|||||||
}, [defaultChatWithWebsite])
|
}, [defaultChatWithWebsite])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="px-3 pt-3 md:px-6 md:pt-6 bg-white dark:bg-[#262626] border rounded-t-xl border-gray-300 dark:border-gray-600">
|
<div className="flex w-full flex-col items-center p-2 pt-1 pb-4">
|
||||||
<div
|
<div className="relative z-10 flex w-full flex-col items-center justify-center gap-2 text-base">
|
||||||
className={`h-full rounded-md shadow relative ${
|
<div className="relative flex w-full flex-row justify-center gap-2 lg:w-4/5">
|
||||||
form.values.image.length === 0 ? "hidden" : "block"
|
<div
|
||||||
}`}>
|
className={` bg-neutral-50 dark:bg-[#262626] relative w-full max-w-[48rem] p-1 backdrop-blur-lg duration-100 border border-gray-300 rounded-xl dark:border-gray-600
|
||||||
<div className="relative">
|
`}>
|
||||||
<Image
|
<div
|
||||||
src={form.values.image}
|
className={`h-full shadow relative ${
|
||||||
alt="Uploaded Image"
|
form.values.image.length === 0 ? "hidden" : "block"
|
||||||
width={180}
|
}`}>
|
||||||
preview={false}
|
<div className="relative">
|
||||||
className="rounded-md"
|
<Image
|
||||||
/>
|
src={form.values.image}
|
||||||
<button
|
alt="Uploaded Image"
|
||||||
onClick={() => {
|
width={180}
|
||||||
form.setFieldValue("image", "")
|
preview={false}
|
||||||
}}
|
className="rounded-md"
|
||||||
className="flex items-center justify-center absolute top-0 m-2 bg-white dark:bg-[#262626] p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-600 text-black dark:text-gray-100">
|
/>
|
||||||
<X className="h-5 w-5" />
|
<button
|
||||||
</button>
|
onClick={() => {
|
||||||
</div>
|
form.setFieldValue("image", "")
|
||||||
</div>
|
}}
|
||||||
<div>
|
className="flex items-center justify-center absolute top-0 m-2 bg-white dark:bg-[#262626] p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-600 text-black dark:text-gray-100">
|
||||||
<div className="flex">
|
<X className="h-5 w-5" />
|
||||||
<form
|
</button>
|
||||||
onSubmit={form.onSubmit(async (value) => {
|
|
||||||
if (!selectedModel || selectedModel.length === 0) {
|
|
||||||
form.setFieldError("message", t("formError.noModel"))
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (chatMode === "rag") {
|
|
||||||
const defaultEM = await defaultEmbeddingModelForRag()
|
|
||||||
if (!defaultEM) {
|
|
||||||
form.setFieldError("message", t("formError.noEmbeddingModel"))
|
|
||||||
return
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (webSearch) {
|
|
||||||
const defaultEM = await defaultEmbeddingModelForRag()
|
|
||||||
if (!defaultEM) {
|
|
||||||
form.setFieldError("message", t("formError.noEmbeddingModel"))
|
|
||||||
return
|
|
||||||
}
|
|
||||||
}
|
|
||||||
await stopListening()
|
|
||||||
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 border-x border-t border-gray-300 flex flex-col dark:border-gray-600 rounded-t-xl p-2">
|
|
||||||
<textarea
|
|
||||||
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: "60px" }}
|
|
||||||
tabIndex={0}
|
|
||||||
onCompositionStart={() => {
|
|
||||||
if (import.meta.env.BROWSER !== "firefox") {
|
|
||||||
setTyping(true)
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
onCompositionEnd={() => {
|
|
||||||
if (import.meta.env.BROWSER !== "firefox") {
|
|
||||||
setTyping(false)
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
placeholder={t("form.textarea.placeholder")}
|
|
||||||
{...form.getInputProps("message")}
|
|
||||||
/>
|
|
||||||
<div className="flex mt-4 justify-end gap-3">
|
|
||||||
{chatMode !== "vision" && (
|
|
||||||
<Tooltip title={t("tooltip.searchInternet")}>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setWebSearch(!webSearch)}
|
|
||||||
className={`inline-flex items-center gap-2 ${
|
|
||||||
chatMode === "rag" ? "hidden" : "block"
|
|
||||||
}`}>
|
|
||||||
{webSearch ? (
|
|
||||||
<PiGlobe className="h-5 w-5 text-blue-600 dark:text-blue-400" />
|
|
||||||
) : (
|
|
||||||
<PiGlobeX className="h-5 w-5 text-gray-600 dark:text-gray-400" />
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</Tooltip>
|
|
||||||
)}
|
|
||||||
<ModelSelect />
|
|
||||||
{browserSupportsSpeechRecognition && (
|
|
||||||
<Tooltip title={t("tooltip.speechToText")}>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={async () => {
|
|
||||||
if (isListening) {
|
|
||||||
stopListening()
|
|
||||||
} else {
|
|
||||||
resetTranscript()
|
|
||||||
startListening({
|
|
||||||
continuous: true,
|
|
||||||
lang: speechToTextLanguage
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
className={`flex items-center justify-center dark:text-gray-300`}>
|
|
||||||
{!isListening ? (
|
|
||||||
<MicIcon 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 className="h-5 w-5" />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</Tooltip>
|
|
||||||
)}
|
|
||||||
<Tooltip title={t("tooltip.vision")}>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => {
|
|
||||||
if (chatMode === "vision") {
|
|
||||||
setChatMode("normal")
|
|
||||||
} else {
|
|
||||||
setChatMode("vision")
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
disabled={chatMode === "rag"}
|
|
||||||
className={`flex items-center justify-center dark:text-gray-300 ${
|
|
||||||
chatMode === "rag" ? "hidden" : "block"
|
|
||||||
} disabled:opacity-50`}>
|
|
||||||
{chatMode === "vision" ? (
|
|
||||||
<EyeIcon className="h-5 w-5" />
|
|
||||||
) : (
|
|
||||||
<EyeOffIcon className="h-5 w-5" />
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</Tooltip>
|
|
||||||
<Tooltip title={t("tooltip.uploadImage")}>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => {
|
|
||||||
inputRef.current?.click()
|
|
||||||
}}
|
|
||||||
disabled={chatMode === "vision"}
|
|
||||||
className={`flex items-center justify-center disabled:opacity-50 dark:text-gray-300 ${
|
|
||||||
chatMode === "rag" ? "hidden" : "block"
|
|
||||||
}`}>
|
|
||||||
<ImageIcon className="h-5 w-5" />
|
|
||||||
</button>
|
|
||||||
</Tooltip>
|
|
||||||
{!streaming ? (
|
|
||||||
<Dropdown.Button
|
|
||||||
htmlType="submit"
|
|
||||||
disabled={isSending}
|
|
||||||
className="!justify-end !w-auto"
|
|
||||||
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={chatMode === "rag"}
|
|
||||||
onChange={(e) => {
|
|
||||||
setChatMode(e.target.checked ? "rag" : "normal")
|
|
||||||
}}>
|
|
||||||
{t("common:chatWithCurrentPage")}
|
|
||||||
</Checkbox>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 3,
|
|
||||||
label: (
|
|
||||||
<Checkbox
|
|
||||||
checked={useOCR}
|
|
||||||
onChange={(e) => setUseOCR(e.target.checked)}>
|
|
||||||
{t("useOCR")}
|
|
||||||
</Checkbox>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}}>
|
|
||||||
<div className="inline-flex gap-2">
|
|
||||||
{sendWhenEnter ? (
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth="2"
|
|
||||||
className="h-5 w-5"
|
|
||||||
viewBox="0 0 24 24">
|
|
||||||
<path d="M9 10L4 15 9 20"></path>
|
|
||||||
<path d="M20 4v7a4 4 0 01-4 4H4"></path>
|
|
||||||
</svg>
|
|
||||||
) : null}
|
|
||||||
{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>
|
</div>
|
||||||
</form>
|
<div>
|
||||||
</div>
|
<div className="flex">
|
||||||
{form.errors.message && (
|
<form
|
||||||
<div className="text-red-500 text-center text-sm mt-1">
|
onSubmit={form.onSubmit(async (value) => {
|
||||||
{form.errors.message}
|
if (!selectedModel || selectedModel.length === 0) {
|
||||||
|
form.setFieldError("message", t("formError.noModel"))
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (chatMode === "rag") {
|
||||||
|
const defaultEM = await defaultEmbeddingModelForRag()
|
||||||
|
if (!defaultEM) {
|
||||||
|
form.setFieldError(
|
||||||
|
"message",
|
||||||
|
t("formError.noEmbeddingModel")
|
||||||
|
)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (webSearch) {
|
||||||
|
const defaultEM = await defaultEmbeddingModelForRag()
|
||||||
|
if (!defaultEM) {
|
||||||
|
form.setFieldError(
|
||||||
|
"message",
|
||||||
|
t("formError.noEmbeddingModel")
|
||||||
|
)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
await stopListening()
|
||||||
|
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 p-1">
|
||||||
|
<textarea
|
||||||
|
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: "60px" }}
|
||||||
|
tabIndex={0}
|
||||||
|
onCompositionStart={() => {
|
||||||
|
if (import.meta.env.BROWSER !== "firefox") {
|
||||||
|
setTyping(true)
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
onCompositionEnd={() => {
|
||||||
|
if (import.meta.env.BROWSER !== "firefox") {
|
||||||
|
setTyping(false)
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
placeholder={t("form.textarea.placeholder")}
|
||||||
|
{...form.getInputProps("message")}
|
||||||
|
/>
|
||||||
|
<div className="flex mt-4 justify-end gap-3">
|
||||||
|
{chatMode !== "vision" && (
|
||||||
|
<Tooltip title={t("tooltip.searchInternet")}>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setWebSearch(!webSearch)}
|
||||||
|
className={`inline-flex items-center gap-2 ${
|
||||||
|
chatMode === "rag" ? "hidden" : "block"
|
||||||
|
}`}>
|
||||||
|
{webSearch ? (
|
||||||
|
<PiGlobe className="h-5 w-5 text-blue-600 dark:text-blue-400" />
|
||||||
|
) : (
|
||||||
|
<PiGlobeX className="h-5 w-5 text-gray-600 dark:text-gray-400" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
|
<ModelSelect />
|
||||||
|
{browserSupportsSpeechRecognition && (
|
||||||
|
<Tooltip title={t("tooltip.speechToText")}>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={async () => {
|
||||||
|
if (isListening) {
|
||||||
|
stopListening()
|
||||||
|
} else {
|
||||||
|
resetTranscript()
|
||||||
|
startListening({
|
||||||
|
continuous: true,
|
||||||
|
lang: speechToTextLanguage
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className={`flex items-center justify-center dark:text-gray-300`}>
|
||||||
|
{!isListening ? (
|
||||||
|
<MicIcon 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 className="h-5 w-5" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
|
<Tooltip title={t("tooltip.vision")}>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => {
|
||||||
|
if (chatMode === "vision") {
|
||||||
|
setChatMode("normal")
|
||||||
|
} else {
|
||||||
|
setChatMode("vision")
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
disabled={chatMode === "rag"}
|
||||||
|
className={`flex items-center justify-center dark:text-gray-300 ${
|
||||||
|
chatMode === "rag" ? "hidden" : "block"
|
||||||
|
} disabled:opacity-50`}>
|
||||||
|
{chatMode === "vision" ? (
|
||||||
|
<EyeIcon className="h-5 w-5" />
|
||||||
|
) : (
|
||||||
|
<EyeOffIcon className="h-5 w-5" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</Tooltip>
|
||||||
|
<Tooltip title={t("tooltip.uploadImage")}>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => {
|
||||||
|
inputRef.current?.click()
|
||||||
|
}}
|
||||||
|
disabled={chatMode === "vision"}
|
||||||
|
className={`flex items-center justify-center disabled:opacity-50 dark:text-gray-300 ${
|
||||||
|
chatMode === "rag" ? "hidden" : "block"
|
||||||
|
}`}>
|
||||||
|
<ImageIcon className="h-5 w-5" />
|
||||||
|
</button>
|
||||||
|
</Tooltip>
|
||||||
|
{!streaming ? (
|
||||||
|
<Dropdown.Button
|
||||||
|
htmlType="submit"
|
||||||
|
disabled={isSending}
|
||||||
|
className="!justify-end !w-auto"
|
||||||
|
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={chatMode === "rag"}
|
||||||
|
onChange={(e) => {
|
||||||
|
setChatMode(
|
||||||
|
e.target.checked ? "rag" : "normal"
|
||||||
|
)
|
||||||
|
}}>
|
||||||
|
{t("common:chatWithCurrentPage")}
|
||||||
|
</Checkbox>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 3,
|
||||||
|
label: (
|
||||||
|
<Checkbox
|
||||||
|
checked={useOCR}
|
||||||
|
onChange={(e) =>
|
||||||
|
setUseOCR(e.target.checked)
|
||||||
|
}>
|
||||||
|
{t("useOCR")}
|
||||||
|
</Checkbox>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}}>
|
||||||
|
<div className="inline-flex gap-2">
|
||||||
|
{sendWhenEnter ? (
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
className="h-5 w-5"
|
||||||
|
viewBox="0 0 24 24">
|
||||||
|
<path d="M9 10L4 15 9 20"></path>
|
||||||
|
<path d="M20 4v7a4 4 0 01-4 4H4"></path>
|
||||||
|
</svg>
|
||||||
|
) : null}
|
||||||
|
{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>
|
||||||
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
@ -40,7 +40,7 @@ export const SidepanelHeader = () => {
|
|||||||
const [sidebarOpen, setSidebarOpen] = React.useState(false)
|
const [sidebarOpen, setSidebarOpen] = React.useState(false)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex px-3 justify-between bg-white dark:bg-[#171717] border-b border-gray-300 dark:border-gray-700 py-4 items-center">
|
<div className=" px-3 justify-between bg-white dark:bg-[#171717] border-b border-gray-300 dark:border-gray-700 py-4 items-center absolute top-0 z-10 flex h-14 w-full">
|
||||||
<div className="focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-700 flex items-center dark:text-white">
|
<div className="focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-700 flex items-center dark:text-white">
|
||||||
<img
|
<img
|
||||||
className="h-6 w-auto"
|
className="h-6 w-auto"
|
||||||
|
|||||||
@ -126,25 +126,25 @@ const SidepanelChat = () => {
|
|||||||
}, [bgMsg])
|
}, [bgMsg])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div className="flex h-full w-full">
|
||||||
ref={drop}
|
<main className="relative h-dvh w-full">
|
||||||
className={`flex ${
|
<div className="relative z-10 w-full">
|
||||||
dropState === "dragging" && chatMode === "normal"
|
<SidepanelHeader />
|
||||||
? "bg-neutral-200 dark:bg-gray-800 z-10"
|
</div>
|
||||||
: "bg-neutral-50 dark:bg-[#171717]"
|
<div
|
||||||
} flex-col min-h-screen mx-auto max-w-7xl`}>
|
ref={drop}
|
||||||
<div className="sticky top-0 z-10">
|
className={`relative flex h-full flex-col items-center ${
|
||||||
<SidepanelHeader />
|
dropState === "dragging" ? "bg-gray-100 dark:bg-gray-800" : ""
|
||||||
</div>
|
} bg-white dark:bg-[#171717]`}>
|
||||||
<SidePanelBody />
|
<div className="custom-scrollbar bg-bottom-mask-light dark:bg-bottom-mask-dark mask-bottom-fade will-change-mask flex h-full w-full flex-col items-center overflow-x-hidden overflow-y-auto px-5">
|
||||||
|
<SidePanelBody />
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="bottom-0 w-full bg-transparent border-0 fixed pt-2">
|
<div className="absolute bottom-0 w-full">
|
||||||
<div className="stretch mx-2 flex flex-row gap-3 md:mx-4 lg:mx-auto lg:max-w-2xl xl:max-w-3xl">
|
|
||||||
<div className="relative flex flex-col h-full flex-1 items-stretch md:flex-col">
|
|
||||||
<SidepanelForm dropedFile={dropedFile} />
|
<SidepanelForm dropedFile={dropedFile} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user