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

Add Sidepanel Settings Body component and update button styles in EmptySidePanel component

Browse Source
This commit is contained in:
n4ze3m
2024-02-04 00:56:42 +05:30
parent be3a4ed256
commit 5958e10354
9 changed files with 271 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -79,15 +79,17 @@ export const PlaygroundMessage = (props: Props) => {
</div>
{props.images && (
<div className="flex md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-3 m-auto w-full">
{props.images.map((image, index) => (
<div key={index} className="h-full rounded-md shadow relative">
<img
src={image}
alt="Uploaded"
className="h-full w-auto object-cover rounded-md min-w-[50px]"
/>
</div>
))}
{props.images
.filter((image) => image.length > 0)
.map((image, index) => (
<div key={index} className="h-full rounded-md shadow relative">
<img
src={image}
alt="Uploaded"
className="h-full w-auto object-cover rounded-md min-w-[50px]"
/>
</div>
))}
</div>
)}
</div>

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

@@ -79,7 +79,7 @@ export const EmptySidePanel = () => {
saveOllamaURL(ollamaURL)
refetch()
}}
className="bg-blue-500 mt-4 hover:bg-blue-600 text-white px-4 py-2 rounded-md">
className="bg-pink-500 mt-4 hover:bg-pink-600 text-white px-4 py-2 rounded-md dark:bg-pink-600 dark:hover:bg-pink-700">
Retry
</button>
</div>

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

@@ -57,7 +57,7 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
})
return (
<div className="p-3 md:p-6 md:bg-white dark:bg-[#0a0a0a] border rounded-t-xl border-black/10 dark:border-gray-900/50">
<div className="p-3 md:p-6 md:bg-white dark:bg-[#1a1919] border rounded-t-xl border-black/10 dark:border-gray-900/50">
<div className="flex-grow space-y-6 ">
{chatMode === "normal" && form.values.image && (
<div className="h-full rounded-md shadow relative">
@@ -136,7 +136,7 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
}
}}
ref={textareaRef}
className="pl-4 pr-2 py-2 w-full resize-none bg-transparent focus-within:outline-none sm:text-sm focus:ring-0 focus-visible:ring-0 ring-0 dark:ring-0 border-0 dark:text-gray-100"
className="px-2 py-2 w-full resize-none bg-transparent focus-within:outline-none sm:text-sm focus:ring-0 focus-visible:ring-0 ring-0 dark:ring-0 border-0 dark:text-gray-100"
required
rows={1}
tabIndex={0}
@@ -145,7 +145,7 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
/>
<button
disabled={isSending || form.values.message.length === 0}
className="mx-2 flex items-center justify-center w-10 h-10 text-white bg-black rounded-xl disabled:opacity-50">
className="ml-2 flex items-center justify-center w-10 h-10 text-white bg-black rounded-xl disabled:opacity-50">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"

177
src/components/Sidepanel/Settings/body.tsx Normal file
View File

@@ -0,0 +1,177 @@
import { useQuery } from "@tanstack/react-query"
import React from "react"
import {
getOllamaURL,
systemPromptForNonRag,
promptForRag,
setOllamaURL as saveOllamaURL,
setPromptForRag,
setSystemPromptForNonRag
} from "~services/ollama"
import { Skeleton, Radio } from "antd"
import { useDarkMode } from "~hooks/useDarkmode"
export const SettingsBody = () => {
const [ollamaURL, setOllamaURL] = React.useState<string>("")
const [systemPrompt, setSystemPrompt] = React.useState<string>("")
const [ragPrompt, setRagPrompt] = React.useState<string>("")
const [ragQuestionPrompt, setRagQuestionPrompt] = React.useState<string>("")
const [selectedValue, setSelectedValue] = React.useState<"normal" | "rag">(
"normal"
)
const { mode, toggleDarkMode } = useDarkMode()
const { data, status } = useQuery({
queryKey: ["sidebarSettings"],
queryFn: async () => {
const [ollamaURL, systemPrompt, ragPrompt] = await Promise.all([
getOllamaURL(),
systemPromptForNonRag(),
promptForRag()
])
return {
url: ollamaURL,
normalSystemPrompt: systemPrompt,
ragSystemPrompt: ragPrompt.ragPrompt,
ragQuestionPrompt: ragPrompt.ragQuestionPrompt
}
}
})
React.useEffect(() => {
if (data) {
setOllamaURL(data.url)
setSystemPrompt(data.normalSystemPrompt)
setRagPrompt(data.ragSystemPrompt)
setRagQuestionPrompt(data.ragQuestionPrompt)
}
}, [data])
if (status === "pending") {
return (
<div className="flex flex-col gap-4 p-4">
<Skeleton active />
<Skeleton active />
<Skeleton active />
<Skeleton active />
</div>
)
}
if (status === "error") {
return <div>Error</div>
}
return (
<div className="flex flex-col gap-4 p-4 max-w-2xl mx-auto lg:max-w-3xl xl:max-w-4xl 2xl:max-w-5xl">
<div className="border border-gray-300 dark:border-gray-700 rounded p-4">
<h2 className="text-md mb-4 font-semibold dark:text-white">
Ollama URL
</h2>
<input
className="w-full border border-gray-300 dark:border-gray-700 rounded p-2 dark:bg-black dark:text-white dark:placeholder-gray-400"
value={ollamaURL}
type="url"
onChange={(e) => setOllamaURL(e.target.value)}
placeholder="Enter Ollama URL here"
/>
<div className="flex justify-end">
<button
onClick={() => {
saveOllamaURL(ollamaURL)
}}
className="bg-pink-500 text-r mt-4 hover:bg-pink-600 text-white px-4 py-2 rounded-md dark:bg-pink-600 dark:hover:bg-pink-700">
Save
</button>
</div>
</div>
<div className="border border-gray-300 dark:border-gray-700 rounded p-4">
<h2 className="text-md font-semibold dark:text-white">Prompt</h2>
<div className="my-3 flex justify-end">
<Radio.Group
defaultValue={selectedValue}
onChange={(e) => setSelectedValue(e.target.value)}>
<Radio.Button value="normal">Normal</Radio.Button>
<Radio.Button value="rag">Rag</Radio.Button>
</Radio.Group>
</div>
{selectedValue === "normal" && (
<div>
<span className="text-md font-thin text-gray-500 dark:text-gray-400">
System Prompt
</span>
<textarea
className="w-full border border-gray-300 dark:border-gray-700 rounded p-2 dark:bg-black dark:text-white dark:placeholder-gray-400"
value={systemPrompt}
onChange={(e) => setSystemPrompt(e.target.value)}
/>
<div className="flex justify-end">
<button
onClick={() => {
setSystemPromptForNonRag(systemPrompt)
}}
className="bg-pink-500 text-r mt-4 hover:bg-pink-600 text-white px-4 py-2 rounded-md dark:bg-pink-600 dark:hover:bg-pink-700">
Save
</button>
</div>
</div>
)}
{selectedValue === "rag" && (
<div>
<div className="mb-3">
<span className="text-md font-thin text-gray-500 dark:text-gray-400">
System Prompt
</span>
<textarea
className="w-full border border-gray-300 dark:border-gray-700 rounded p-2 dark:bg-black dark:text-white dark:placeholder-gray-400"
value={ragPrompt}
onChange={(e) => setRagPrompt(e.target.value)}
/>
</div>
<div className="mb-3">
<span className="text-md font-thin text-gray-500 dark:text-gray-400">
Question Prompt
</span>
<textarea
className="w-full border border-gray-300 dark:border-gray-700 rounded p-2 dark:bg-black dark:text-white dark:placeholder-gray-400"
value={ragQuestionPrompt}
onChange={(e) => setRagQuestionPrompt(e.target.value)}
/>
</div>
<div className="flex justify-end">
<button
onClick={() => {
setPromptForRag(ragPrompt, ragQuestionPrompt)
}}
className="bg-pink-500 hover:bg-pink-600 text-white px-4 py-2 rounded-md dark:bg-pink-600 dark:hover:bg-pink-700">
Save
</button>
</div>
</div>
)}
</div>
<div className="border border-gray-300 dark:border-gray-700 rounded p-4">
<h2 className="text-md mb-4 font-semibold dark:text-white">Theme</h2>
{mode === "dark" ? (
<button
onClick={toggleDarkMode}
className="select-none w-full rounded-lg border border-gray-900 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-gray-900 transition-all hover:opacity-75 focus:ring focus:ring-gray-300 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none dark:border-gray-100 dark:text-white dark:hover:opacity-75 dark:focus:ring-dark dark:active:opacity-75 dark:disabled:pointer-events-none dark:disabled:opacity-50 dark:disabled:shadow-none">
Light Mode
</button>
) : (
<button
onClick={toggleDarkMode}
className="select-none w-full rounded-lg border border-gray-900 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-gray-900 transition-all hover:opacity-75 focus:ring focus:ring-gray-300 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none dark:border-gray-100 dark:text-white dark:hover:opacity-75 dark:focus:ring-dark dark:active:opacity-75 dark:disabled:pointer-events-none dark:disabled:opacity-50 dark:disabled:shadow-none">
Dark Mode
</button>
)}
</div>
</div>
)
}