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

refactor: enhance Sidepanel layout and structure for improved usability and responsiveness

Browse Source
This commit is contained in:
n4ze3m 2025-02-08 16:01:47 +05:30
parent d315a39793
commit 7b8ba1404d
5 changed files with 333 additions and 312 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Sidepanel/Chat/body.tsx
View File

@ -23,7 +23,8 @@ export const SidePanelBody = () => {
}
})
return (
<div className="grow flex flex-col md:translate-x-0 transition-transform duration-300 ease-in-out">
<>
<div className="relative flex w-full flex-col items-center pt-16 pb-4">
{messages.length === 0 && <EmptySidePanel />}
{messages.map((message, index) => (
<PlaygroundMessage
@ -52,13 +53,15 @@ export const SidePanelBody = () => {
reasoningTimeTaken={message?.reasoning_time_taken}
/>
))}
<div className="w-full h-48 flex-shrink-0"></div>
<div ref={divRef} />
</div>
<div className="w-full pb-[157px]"></div>
<MessageSourcePopup
open={isSourceOpen}
setOpen={setIsSourceOpen}
source={source}
/>
</div>
</>
)
}

4
src/components/Sidepanel/Chat/empty.tsx
View File

@ -134,8 +134,8 @@ export const EmptySidePanel = () => {
}
return (
<div className="mx-auto sm:max-w-md 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="mx-auto sm:max-w-lg px-4 mt-10">
<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) && (
<div className="inline-flex items-center space-x-2">
<div className="w-3 h-3 bg-blue-500 rounded-full animate-bounce"></div>

32
src/components/Sidepanel/Chat/form.tsx
View File

@ -226,9 +226,14 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
}, [defaultChatWithWebsite])
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 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={`h-full rounded-md shadow relative ${
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={`h-full shadow relative ${
form.values.image.length === 0 ? "hidden" : "block"
}`}>
<div className="relative">
@ -259,14 +264,20 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
if (chatMode === "rag") {
const defaultEM = await defaultEmbeddingModelForRag()
if (!defaultEM) {
form.setFieldError("message", t("formError.noEmbeddingModel"))
form.setFieldError(
"message",
t("formError.noEmbeddingModel")
)
return
}
}
if (webSearch) {
const defaultEM = await defaultEmbeddingModelForRag()
if (!defaultEM) {
form.setFieldError("message", t("formError.noEmbeddingModel"))
form.setFieldError(
"message",
t("formError.noEmbeddingModel")
)
return
}
}
@ -295,7 +306,7 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
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">
<div className="w-full flex flex-col p-1">
<textarea
onKeyDown={(e) => handleKeyDown(e)}
ref={textareaRef}
@ -436,7 +447,9 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
<Checkbox
checked={chatMode === "rag"}
onChange={(e) => {
setChatMode(e.target.checked ? "rag" : "normal")
setChatMode(
e.target.checked ? "rag" : "normal"
)
}}>
{t("common:chatWithCurrentPage")}
</Checkbox>
@ -447,7 +460,9 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
label: (
<Checkbox
checked={useOCR}
onChange={(e) => setUseOCR(e.target.checked)}>
onChange={(e) =>
setUseOCR(e.target.checked)
}>
{t("useOCR")}
</Checkbox>
)
@ -493,5 +508,8 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
)}
</div>
</div>
</div>
</div>
</div>
)
}

2
src/components/Sidepanel/Chat/header.tsx
View File

@ -40,7 +40,7 @@ export const SidepanelHeader = () => {
const [sidebarOpen, setSidebarOpen] = React.useState(false)
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">
<img
className="h-6 w-auto"

24
src/routes/sidepanel-chat.tsx
View File

@ -126,25 +126,25 @@ const SidepanelChat = () => {
}, [bgMsg])
return (
<div
ref={drop}
className={`flex ${
dropState === "dragging" && chatMode === "normal"
? "bg-neutral-200 dark:bg-gray-800 z-10"
: "bg-neutral-50 dark:bg-[#171717]"
} flex-col min-h-screen mx-auto max-w-7xl`}>
<div className="sticky top-0 z-10">
<div className="flex h-full w-full">
<main className="relative h-dvh w-full">
<div className="relative z-10 w-full">
<SidepanelHeader />
</div>
<div
ref={drop}
className={`relative flex h-full flex-col items-center ${
dropState === "dragging" ? "bg-gray-100 dark:bg-gray-800" : ""
} bg-white dark:bg-[#171717]`}>
<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="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">
<div className="absolute bottom-0 w-full">
<SidepanelForm dropedFile={dropedFile} />
</div>
</div>
</div>
</main>
</div>
)
}