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

Add OllamaIcon to OptionLayout and update styles

Browse Source
This commit is contained in:
n4ze3m 2024-03-31 00:55:44 +05:30
parent ea56a2ffa2
commit 317011a6d2
3 changed files with 24 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,6 +18,7 @@ import {
import { getAllPrompts } from "~/libs/db" import { getAllPrompts } from "~/libs/db"
import { ShareBtn } from "~/components/Common/ShareBtn" import { ShareBtn } from "~/components/Common/ShareBtn"
import { useTranslation } from "react-i18next" import { useTranslation } from "react-i18next"
import { OllamaIcon } from "../Icons/Ollama"
export default function OptionLayout({ export default function OptionLayout({
children children
@ -73,7 +74,7 @@ export default function OptionLayout({
<div> <div>
<div> <div>
<div className="flex flex-col"> <div className="flex flex-col">
<div className="sticky top-0 z-[999] flex h-16 p-3 bg-white border-b dark:bg-[#171717] dark:border-gray-600"> <div className="sticky top-0 z-[999] flex h-16 p-3 bg-gray-50 border-b dark:bg-[#171717] dark:border-gray-600">
<div className="flex gap-2 items-center"> <div className="flex gap-2 items-center">
{pathname !== "/" && ( {pathname !== "/" && (
<div> <div>
@ -94,7 +95,7 @@ export default function OptionLayout({
<div> <div>
<button <button
onClick={clearChat} onClick={clearChat}
className="inline-flex items-center rounded-lg border dark:border-gray-700 bg-transparent px-3 py-3 text-sm font-medium leading-4 text-gray-800 dark:text-white disabled:opacity-50 "> className="inline-flex dark:bg-transparent bg-white items-center rounded-lg border dark:border-gray-700 bg-transparent px-3 py-3 text-sm font-medium leading-4 text-gray-800 dark:text-white disabled:opacity-50 ease-in-out transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white">
<SquarePen className="h-4 w-4 mr-3" /> <SquarePen className="h-4 w-4 mr-3" />
{t("newChat")} {t("newChat")}
</button> </button>
@ -109,16 +110,22 @@ export default function OptionLayout({
size="large" size="large"
loading={isModelsLoading || isModelsFetching} loading={isModelsLoading || isModelsFetching}
filterOption={(input, option) => filterOption={(input, option) =>
option!.label.toLowerCase().indexOf(input.toLowerCase()) >= option.label.key
0 || .toLowerCase()
option!.value.toLowerCase().indexOf(input.toLowerCase()) >= .indexOf(input.toLowerCase()) >= 0
0
} }
showSearch showSearch
placeholder={t("common:selectAModel")} placeholder={t("common:selectAModel")}
className="w-64 " className="w-64 "
options={models?.map((model) => ({ options={models?.map((model) => ({
label: model.name, label: (
<span
key={model.model}
className="flex flex-row gap-3 items-center">
<OllamaIcon className="w-5 h-5" />
{model.name}
</span>
),
value: model.model value: model.model
}))} }))}
/> />
@ -146,13 +153,13 @@ export default function OptionLayout({
label: ( label: (
<span <span
key={prompt.title} key={prompt.title}
className="flex flex-row justify-between items-center"> className="flex flex-row gap-3 items-center">
{prompt.title}
{prompt.is_system ? ( {prompt.is_system ? (
<ComputerIcon className="w-4 h-4" /> <ComputerIcon className="w-4 h-4" />
) : ( ) : (
<ZapIcon className="w-4 h-4" /> <ZapIcon className="w-4 h-4" />
)} )}
{prompt.title}
</span> </span>
), ),
value: prompt.id value: prompt.id
@ -166,8 +173,7 @@ export default function OptionLayout({
{pathname === "/" && messages.length > 0 && !streaming && ( {pathname === "/" && messages.length > 0 && !streaming && (
<ShareBtn messages={messages} /> <ShareBtn messages={messages} />
)} )}
<Tooltip title={t("githubRepository")} <Tooltip title={t("githubRepository")}>
>
<a <a
href="https://github.com/n4ze3m/page-assist" href="https://github.com/n4ze3m/page-assist"
target="_blank" target="_blank"
@ -175,8 +181,7 @@ export default function OptionLayout({
<GithubIcon className="w-6 h-6" /> <GithubIcon className="w-6 h-6" />
</a> </a>
</Tooltip> </Tooltip>
<Tooltip title={t("settings")} <Tooltip title={t("settings")}>
>
<NavLink <NavLink
to="/settings" to="/settings"
className="!text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"> className="!text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">

8
src/components/Option/Playground/PlaygroundEmpty.tsx
View File

@ -37,10 +37,10 @@ export const PlaygroundEmpty = () => {
return ( return (
<div className="mx-auto sm:max-w-xl px-4 mt-10"> <div className="mx-auto sm:max-w-xl px-4 mt-10">
<div className="rounded-lg justify-center items-center flex flex-col border p-8 bg-white dark:bg-[#262626] dark:border-gray-600"> <div className="rounded-lg justify-center items-center flex flex-col border p-8 bg-gray-50 dark:bg-[#262626] dark:border-gray-600">
{(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-pulse"></div>
<p className="dark:text-gray-400 text-gray-900"> <p className="dark:text-gray-400 text-gray-900">
{t("ollamaState.searching")} {t("ollamaState.searching")}
</p> </p>
@ -49,7 +49,7 @@ export const PlaygroundEmpty = () => {
{!isRefetching && ollamaStatus === "success" ? ( {!isRefetching && ollamaStatus === "success" ? (
ollamaInfo.isOk ? ( ollamaInfo.isOk ? (
<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-green-500 rounded-full"></div> <div className="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
<p className="dark:text-gray-400 text-gray-900"> <p className="dark:text-gray-400 text-gray-900">
{t("ollamaState.running")} {t("ollamaState.running")}
</p> </p>
@ -57,7 +57,7 @@ export const PlaygroundEmpty = () => {
) : ( ) : (
<div className="flex flex-col space-y-2 justify-center items-center"> <div className="flex flex-col space-y-2 justify-center items-center">
<div className="inline-flex space-x-2"> <div className="inline-flex space-x-2">
<div className="w-3 h-3 bg-red-500 rounded-full"></div> <div className="w-3 h-3 bg-red-500 rounded-full animate-pulse"></div>
<p className="dark:text-gray-400 text-gray-900"> <p className="dark:text-gray-400 text-gray-900">
{t("ollamaState.notRunning")} {t("ollamaState.notRunning")}
</p> </p>

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

@ -153,7 +153,7 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
} }
} }
return ( return (
<div className="px-3 pt-3 md:px-6 md:pt-6 md:bg-white dark:bg-[#262626] border rounded-t-xl dark:border-gray-600"> <div className="px-3 pt-3 md:px-6 md:pt-6 bg-gray-50 dark:bg-[#262626] border rounded-t-xl dark:border-gray-600">
<div <div
className={`h-full rounded-md shadow relative ${ className={`h-full rounded-md shadow relative ${
form.values.image.length === 0 ? "hidden" : "block" form.values.image.length === 0 ? "hidden" : "block"
@ -176,7 +176,7 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
</div> </div>
</div> </div>
<div> <div>
<div className="flex"> <div className="flex bg-white dark:bg-transparent">
<form <form
onSubmit={form.onSubmit(async (value) => { onSubmit={form.onSubmit(async (value) => {
if (!selectedModel || selectedModel.length === 0) { if (!selectedModel || selectedModel.length === 0) {