iod/page-assist
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add bottom fade mask utility and enhance Playground layout

Browse Source
This commit is contained in:
n4ze3m 2025-02-07 23:49:40 +05:30
parent 1eae319d10
commit a46156847d
10 changed files with 624 additions and 347 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -1,6 +1,7 @@
# Page Assist # Page Assist
[![Join dialoqbase #welcome](https://img.shields.io/badge/discord-join%20chat-blue.svg)](https://discord.gg/bu54382uBd) [![Join dialoqbase #welcome](https://img.shields.io/badge/discord-join%20chat-blue.svg)](https://discord.gg/bu54382uBd)
[![Twitter Follow](https://img.shields.io/twitter/follow/page_assist?style=social)](https://twitter.com/page_assist)
Page Assist is an open-source browser extension that provides a sidebar and web UI for your local AI model. It allows you to interact with your model from any webpage. Page Assist is an open-source browser extension that provides a sidebar and web UI for your local AI model. It allows you to interact with your model from any webpage.
## Installation ## Installation

6
src/assets/tailwind.css
View File

@ -13,6 +13,12 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
@layer utilities {
.mask-bottom-fade {
mask-image: linear-gradient(0deg, transparent 0, #000 160px);
-webkit-mask-image: linear-gradient(0deg, transparent 0, #000 160px);
}
}

20
src/components/Common/Playground/Message.tsx
View File

@ -52,8 +52,8 @@ export const PlaygroundMessage = (props: Props) => {
const { t } = useTranslation("common") const { t } = useTranslation("common")
const { cancel, isSpeaking, speak } = useTTS() const { cancel, isSpeaking, speak } = useTTS()
return ( return (
<div className="group w-full text-gray-800 dark:text-gray-100"> <div className="group relative flex w-full max-w-3xl flex-col items-end justify-center pb-2 md:px-4 lg:w-4/5 text-gray-800 dark:text-gray-100">
<div className="text-base md:max-w-2xl lg:max-w-xl xl:max-w-3xl flex lg:px-0 m-auto w-full"> {/* <div className="text-base md:max-w-2xl lg:max-w-xl xl:max-w-3xl flex lg:px-0 m-auto w-full"> */}
<div className="flex flex-row gap-4 md:gap-6 p-4 m-auto w-full"> <div className="flex flex-row gap-4 md:gap-6 p-4 m-auto w-full">
<div className="w-8 flex flex-col relative items-end"> <div className="w-8 flex flex-col relative items-end">
<div className="relative h-7 w-7 p-1 rounded-sm text-white flex items-center justify-center text-opacity-100r"> <div className="relative h-7 w-7 p-1 rounded-sm text-white flex items-center justify-center text-opacity-100r">
@ -197,12 +197,12 @@ export const PlaygroundMessage = (props: Props) => {
<div <div
className={`space-x-2 gap-2 mt-3 flex ${ className={`space-x-2 gap-2 mt-3 flex ${
props.currentMessageIndex !== props.totalMessages - 1 props.currentMessageIndex !== props.totalMessages - 1
// there is few style issue so i am commenting this out for v1.4.5 release ? // there is few style issue so i am commenting this out for v1.4.5 release
// next release we will fix this // next release we will fix this
// ? "invisible group-hover:visible" "invisible group-hover:visible"
? "hidden group-hover:flex" : // ? "hidden group-hover:flex"
// "" ""
: "flex" // : "flex"
}`}> }`}>
{props.isTTSEnabled && ( {props.isTTSEnabled && (
<Tooltip title={t("tts")}> <Tooltip title={t("tts")}>
@ -213,7 +213,7 @@ export const PlaygroundMessage = (props: Props) => {
cancel() cancel()
} else { } else {
speak({ speak({
utterance: removeReasoning(props.message), utterance: removeReasoning(props.message)
}) })
} }
}} }}
@ -292,7 +292,7 @@ export const PlaygroundMessage = (props: Props) => {
)} )}
</div> </div>
</div> </div>
</div> {/* </div> */}
</div> </div>
) )
} }

3
src/components/Layouts/Header.tsx
View File

@ -89,9 +89,10 @@ export const Header: React.FC<Props> = ({
} }
} }
return ( return (
<div <div
className={`sticky top-0 z-[999] flex h-16 p-3 bg-gray-50 border-b dark:bg-[#171717] dark:border-gray-600 ${ className={`absolute top-0 z-10 w-full flex h-14 p-3 bg-gray-50 border-b dark:bg-[#171717] dark:border-gray-600 ${
temporaryChat && "!bg-gray-200 dark:!bg-black" temporaryChat && "!bg-gray-200 dark:!bg-black"
}`}> }`}>
<div className="flex gap-2 items-center"> <div className="flex gap-2 items-center">

127
src/components/Layouts/Layout.tsx
View File

@ -36,72 +36,75 @@ export default function OptionLayout({
const { setSystemPrompt } = useStoreChatModelSettings() const { setSystemPrompt } = useStoreChatModelSettings()
return ( return (
<> <div className="flex h-full w-full">
<div className="flex flex-col min-h-screen"> <main className="relative h-dvh w-full">
<Header <div className="relative z-10 w-full">
setSidebarOpen={setSidebarOpen} <Header
setOpenModelSettings={setOpenModelSettings} setSidebarOpen={setSidebarOpen}
/> setOpenModelSettings={setOpenModelSettings}
<main className="flex-1">{children}</main> />
</div> </div>
{/* <div className="relative flex h-full flex-col items-center"> */}
{children}
{/* </div> */}
<Drawer
title={
<div className="flex items-center justify-between">
{t("sidebarTitle")}
<Drawer <Tooltip
title={ title={t(
<div className="flex items-center justify-between"> "settings:generalSettings.system.deleteChatHistory.label"
{t("sidebarTitle")} )}
placement="right">
<Tooltip <button
title={t( onClick={async () => {
"settings:generalSettings.system.deleteChatHistory.label" const confirm = window.confirm(
)} t(
placement="right"> "settings:generalSettings.system.deleteChatHistory.confirm"
<button )
onClick={async () => {
const confirm = window.confirm(
t(
"settings:generalSettings.system.deleteChatHistory.confirm"
) )
)
if (confirm) { if (confirm) {
const db = new PageAssitDatabase() const db = new PageAssitDatabase()
await db.deleteAllChatHistory() await db.deleteAllChatHistory()
await queryClient.invalidateQueries({ await queryClient.invalidateQueries({
queryKey: ["fetchChatHistory"] queryKey: ["fetchChatHistory"]
}) })
clearChat() clearChat()
} }
}} }}
className="text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100"> className="text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100">
<EraserIcon className="size-5" /> <EraserIcon className="size-5" />
</button> </button>
</Tooltip> </Tooltip>
</div> </div>
} }
placement="left" placement="left"
closeIcon={null} closeIcon={null}
onClose={() => setSidebarOpen(false)}
open={sidebarOpen}>
<Sidebar
onClose={() => setSidebarOpen(false)} onClose={() => setSidebarOpen(false)}
setMessages={setMessages} open={sidebarOpen}>
setHistory={setHistory} <Sidebar
setHistoryId={setHistoryId} onClose={() => setSidebarOpen(false)}
setSelectedModel={setSelectedModel} setMessages={setMessages}
setSelectedSystemPrompt={setSelectedSystemPrompt} setHistory={setHistory}
clearChat={clearChat} setHistoryId={setHistoryId}
historyId={historyId} setSelectedModel={setSelectedModel}
setSystemPrompt={setSystemPrompt} setSelectedSystemPrompt={setSelectedSystemPrompt}
temporaryChat={temporaryChat} clearChat={clearChat}
history={history} historyId={historyId}
/> setSystemPrompt={setSystemPrompt}
</Drawer> temporaryChat={temporaryChat}
history={history}
/>
</Drawer>
<CurrentChatModelSettings <CurrentChatModelSettings
open={openModelSettings} open={openModelSettings}
setOpen={setOpenModelSettings} setOpen={setOpenModelSettings}
useDrawer useDrawer
/> />
</> </main>
</div>
) )
} }

41
src/components/Option/Playground/Playground.tsx
View File

@ -11,6 +11,8 @@ import {
} from "@/db" } from "@/db"
import { getLastUsedChatSystemPrompt } from "@/services/model-settings" import { getLastUsedChatSystemPrompt } from "@/services/model-settings"
import { useStoreChatModelSettings } from "@/store/model" import { useStoreChatModelSettings } from "@/store/model"
import { useSmartScroll } from "@/hooks/useSmartScroll"
import { ChevronDown } from "lucide-react"
export const Playground = () => { export const Playground = () => {
const drop = React.useRef<HTMLDivElement>(null) const drop = React.useRef<HTMLDivElement>(null)
@ -21,9 +23,14 @@ export const Playground = () => {
setHistoryId, setHistoryId,
setHistory, setHistory,
setMessages, setMessages,
setSelectedSystemPrompt setSelectedSystemPrompt,
streaming
} = useMessageOption() } = useMessageOption()
const { setSystemPrompt } = useStoreChatModelSettings() const { setSystemPrompt } = useStoreChatModelSettings()
const { containerRef, isAtBottom, scrollToBottom } = useSmartScroll(
messages,
streaming
)
const [dropState, setDropState] = React.useState< const [dropState, setDropState] = React.useState<
"idle" | "dragging" | "error" "idle" | "dragging" | "error"
@ -125,23 +132,25 @@ export const Playground = () => {
return ( return (
<div <div
ref={drop} ref={drop}
className={`${ className={`relative flex h-full flex-col items-center ${
dropState === "dragging" ? "bg-gray-100 dark:bg-gray-800 z-10" : "" dropState === "dragging" ? "bg-gray-100 dark:bg-gray-800" : ""
} bg-white dark:bg-[#171717]`}> } bg-white dark:bg-[#171717]`}>
<PlaygroundChat /> <div
ref={containerRef}
<div className="flex flex-col items-center"> 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">
<div className="flex-grow"> <PlaygroundChat />
<div className="w-full flex justify-center"> </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 justify-center items-center"> {!isAtBottom && (
<div className="relative h-full flex-1 items-center justify-center md:flex-col"> <div className="fixed bottom-36 z-20 left-0 right-0 flex justify-center">
<PlaygroundForm dropedFile={dropedFile} /> <button
</div> onClick={scrollToBottom}
</div> className="bg-white border border-gray-100 dark:border-none dark:bg-white/20 p-1.5 rounded-full pointer-events-auto">
</div> <ChevronDown className="size-4 text-gray-600 dark:text-gray-300" />
</button>
</div> </div>
</div> )}
<PlaygroundForm dropedFile={dropedFile} />
</div> </div>
</div> </div>
) )

27
src/components/Option/Playground/PlaygroundChat.tsx
View File

@ -3,8 +3,6 @@ import { useMessageOption } from "~/hooks/useMessageOption"
import { PlaygroundEmpty } from "./PlaygroundEmpty" import { PlaygroundEmpty } from "./PlaygroundEmpty"
import { PlaygroundMessage } from "~/components/Common/Playground/Message" import { PlaygroundMessage } from "~/components/Common/Playground/Message"
import { MessageSourcePopup } from "@/components/Common/Playground/MessageSourcePopup" import { MessageSourcePopup } from "@/components/Common/Playground/MessageSourcePopup"
import { useSmartScroll } from "~/hooks/useSmartScroll"
import { ChevronDown } from "lucide-react"
export const PlaygroundChat = () => { export const PlaygroundChat = () => {
const { const {
@ -18,18 +16,11 @@ export const PlaygroundChat = () => {
const [isSourceOpen, setIsSourceOpen] = React.useState(false) const [isSourceOpen, setIsSourceOpen] = React.useState(false)
const [source, setSource] = React.useState<any>(null) const [source, setSource] = React.useState<any>(null)
const { containerRef, isAtBottom, scrollToBottom } = useSmartScroll(
messages,
streaming
)
return ( return (
<> <>
<div <div className="relative flex w-full flex-col items-center pt-16 pb-4">
ref={containerRef}
className="custom-scrollbar grow flex flex-col md:translate-x-0 transition-transform duration-300 ease-in-out overflow-y-auto h-[calc(100vh-160px)]">
{messages.length === 0 && ( {messages.length === 0 && (
<div className="mt-32"> <div className="mt-32 w-full">
<PlaygroundEmpty /> <PlaygroundEmpty />
</div> </div>
)} )}
@ -59,19 +50,9 @@ export const PlaygroundChat = () => {
reasoningTimeTaken={message?.reasoning_time_taken} reasoningTimeTaken={message?.reasoning_time_taken}
/> />
))} ))}
{messages.length > 0 && (
<div className="w-full h-10 flex-shrink-0"></div>
)}
</div> </div>
{!isAtBottom && ( <div className="w-full pb-[157px]"></div>
<div className="fixed bottom-36 z-20 left-0 right-0 flex justify-center">
<button
onClick={scrollToBottom}
className="bg-white border border-gray-100 dark:border-none dark:bg-white/20 p-1.5 rounded-full pointer-events-auto">
<ChevronDown className="size-4 text-gray-600 dark:text-gray-300" />
</button>
</div>
)}
<MessageSourcePopup <MessageSourcePopup
open={isSourceOpen} open={isSourceOpen}
setOpen={setIsSourceOpen} setOpen={setIsSourceOpen}

729
src/components/Option/Playground/PlaygroundForm.tsx
View File

@ -205,241 +205,506 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
} }
return ( return (
<div <div className="flex w-full flex-col items-center p-2 pt-1 sm:px-4 pb-4">
className={`px-3 pt-3 bg-gray-100 dark:bg-[#262626] border rounded-t-xl dark:border-gray-600 <form className="relative z-10 flex w-full flex-col items-center justify-center gap-2 text-base">
${temporaryChat && "!bg-gray-200 dark:!bg-black "} <div className="relative flex w-full flex-row justify-center gap-2 lg:w-4/5">
`}> <div
<div className={` bg-gray-100 dark:bg-[#262626] relative w-full max-w-[45rem] p-1 backdrop-blur-lg duration-100 sm:rounded-3xl border rounded-2xl dark:border-gray-600
className={`h-full rounded-md shadow relative ${ ${temporaryChat && "!bg-gray-200 dark:!bg-black "}
form.values.image.length === 0 ? "hidden" : "block" `}>
}`}> <div
<div className="relative"> className={`h-full shadow relative ${
<Image form.values.image.length === 0 ? "hidden" : "block"
src={form.values.image} }`}>
alt="Uploaded Image" <div className="relative">
width={180} <Image
preview={false} src={form.values.image}
className="rounded-md" alt="Uploaded Image"
/> width={180}
<button preview={false}
onClick={() => { className="rounded-md"
form.setFieldValue("image", "") />
}} <button
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"> onClick={() => {
<X className="h-5 w-5" /> form.setFieldValue("image", "")
</button> }}
</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> <X className="h-5 w-5" />
<div> </button>
<div
className={`flex rounded-t-xl bg-white dark:bg-transparent ${
temporaryChat && "!bg-gray-100 dark:!bg-black"
}`}>
<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()
if (!defaultEM) {
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 border-x border-t flex flex-col dark:border-gray-600 rounded-t-xl 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: "30px" }}
tabIndex={0}
placeholder={t("form.textarea.placeholder")}
{...form.getInputProps("message")}
/>
<div className="mt-2 flex justify-between items-center">
<div className="flex">
{!selectedKnowledge && (
<Tooltip title={t("tooltip.searchInternet")}>
<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>
)}
</div>
<div className="flex !justify-end gap-3">
{!selectedKnowledge && (
<Tooltip title={t("tooltip.uploadImage")}>
<button
type="button"
onClick={() => {
inputRef.current?.click()
}}
className={`flex items-center justify-center dark:text-gray-300 ${
chatMode === "rag" ? "hidden" : "block"
}`}>
<ImageIcon className="h-5 w-5" />
</button>
</Tooltip>
)}
{browserSupportsSpeechRecognition && (
<Tooltip title={t("tooltip.speechToText")}>
<button
type="button"
onClick={async () => {
if (isListening) {
stopSpeechRecognition()
} 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>
)}
<KnowledgeSelect />
{!isSending ? (
<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={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> </div>
</form> <div>
</div> <div
{form.errors.message && ( className={`flex bg-transparent ${
<div className="text-red-500 text-center text-sm mt-1"> temporaryChat && "!bg-gray-100 dark:!bg-black"
{form.errors.message} }`}>
<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()
if (!defaultEM) {
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 && (
<Tooltip title={t("tooltip.searchInternet")}>
<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>
)}
</div>
<div className="flex !justify-end gap-3">
{!selectedKnowledge && (
<Tooltip title={t("tooltip.uploadImage")}>
<button
type="button"
onClick={() => {
inputRef.current?.click()
}}
className={`flex items-center justify-center dark:text-gray-300 ${
chatMode === "rag" ? "hidden" : "block"
}`}>
<ImageIcon className="h-5 w-5" />
</button>
</Tooltip>
)}
{browserSupportsSpeechRecognition && (
<Tooltip title={t("tooltip.speechToText")}>
<button
type="button"
onClick={async () => {
if (isListening) {
stopSpeechRecognition()
} 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>
)}
<KnowledgeSelect />
{!isSending ? (
<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={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>
</form>
</div>
{form.errors.message && (
<div className="text-red-500 text-center text-sm mt-1">
{form.errors.message}
</div>
)}
</div>
</div> </div>
)} </div>
</form>
</div>
)
return (
<div className="flex w-full flex-col items-center p-2 pt-1 sm:px-4 sm:pb-4 md:pb-6">
<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-4/5">
<div
className={` bg-gray-100 dark:bg-[#262626] border rounded-2xl dark:border-gray-600
${temporaryChat && "!bg-gray-200 dark:!bg-black "}
`}>
<div
className={`h-full shadow relative ${
form.values.image.length === 0 ? "hidden" : "block"
}`}>
<div className="relative">
<Image
src={form.values.image}
alt="Uploaded Image"
width={180}
preview={false}
className="rounded-md"
/>
<button
onClick={() => {
form.setFieldValue("image", "")
}}
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>
</div>
</div>
<div>
<div
className={`flex bg-white dark:bg-transparent ${
temporaryChat && "!bg-gray-100 dark:!bg-black"
}`}>
<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()
if (!defaultEM) {
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 && (
<Tooltip title={t("tooltip.searchInternet")}>
<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>
)}
</div>
<div className="flex !justify-end gap-3">
{!selectedKnowledge && (
<Tooltip title={t("tooltip.uploadImage")}>
<button
type="button"
onClick={() => {
inputRef.current?.click()
}}
className={`flex items-center justify-center dark:text-gray-300 ${
chatMode === "rag" ? "hidden" : "block"
}`}>
<ImageIcon className="h-5 w-5" />
</button>
</Tooltip>
)}
{browserSupportsSpeechRecognition && (
<Tooltip title={t("tooltip.speechToText")}>
<button
type="button"
onClick={async () => {
if (isListening) {
stopSpeechRecognition()
} 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>
)}
<KnowledgeSelect />
{!isSending ? (
<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={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>
</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>
) )

4
src/routes/option-index.tsx
View File

@ -1,10 +1,10 @@
import OptionLayout from "~/components/Layouts/Layout" import OptionLayout from "~/components/Layouts/Layout"
import { Playground } from "~/components/Option/Playground/Playground" import { Playground } from "~/components/Option/Playground/Playground"
const OptionIndex = () => { const OptionIndex = () => {
return ( return (
<OptionLayout> <OptionLayout>
<Playground /> <Playground />
</OptionLayout> </OptionLayout>
) )
} }

11
tailwind.config.js
View File

@ -3,5 +3,16 @@ module.exports = {
mode: "jit", mode: "jit",
darkMode: "class", darkMode: "class",
content: ["./src/**/*.tsx"], content: ["./src/**/*.tsx"],
theme: {
extend: {
backgroundImage: {
'bottom-mask-light': 'linear-gradient(0deg, transparent 0, #ffffff 160px)',
'bottom-mask-dark': 'linear-gradient(0deg, transparent 0, #171717 160px)',
},
maskImage: {
'bottom-fade': 'linear-gradient(0deg, transparent 0, #000 160px)',
}
}
},
plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography")] plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography")]
} }