From 317011a6d2f4d5105806b155a88365b35c81f6fe Mon Sep 17 00:00:00 2001
From: n4ze3m <n4ze3m@gmail.com>
Date: Sun, 31 Mar 2024 00:55:44 +0530
Subject: [PATCH] Add OllamaIcon to OptionLayout and update styles

---
 src/components/Layouts/Layout.tsx             | 31 +++++++++++--------
 .../Option/Playground/PlaygroundEmpty.tsx     |  8 ++---
 .../Option/Playground/PlaygroundForm.tsx      |  4 +--
 3 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/src/components/Layouts/Layout.tsx b/src/components/Layouts/Layout.tsx
index 26ac2a5..23e36db 100644
--- a/src/components/Layouts/Layout.tsx
+++ b/src/components/Layouts/Layout.tsx
@@ -18,6 +18,7 @@ import {
 import { getAllPrompts } from "~/libs/db"
 import { ShareBtn } from "~/components/Common/ShareBtn"
 import { useTranslation } from "react-i18next"
+import { OllamaIcon } from "../Icons/Ollama"
 
 export default function OptionLayout({
   children
@@ -73,7 +74,7 @@ export default function OptionLayout({
     <div>
       <div>
         <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">
               {pathname !== "/" && (
                 <div>
@@ -94,7 +95,7 @@ export default function OptionLayout({
               <div>
                 <button
                   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" />
                   {t("newChat")}
                 </button>
@@ -109,16 +110,22 @@ export default function OptionLayout({
                   size="large"
                   loading={isModelsLoading || isModelsFetching}
                   filterOption={(input, option) =>
-                    option!.label.toLowerCase().indexOf(input.toLowerCase()) >=
-                      0 ||
-                    option!.value.toLowerCase().indexOf(input.toLowerCase()) >=
-                      0
+                    option.label.key
+                      .toLowerCase()
+                      .indexOf(input.toLowerCase()) >= 0
                   }
                   showSearch
                   placeholder={t("common:selectAModel")}
                   className="w-64 "
                   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
                   }))}
                 />
@@ -146,13 +153,13 @@ export default function OptionLayout({
                     label: (
                       <span
                         key={prompt.title}
-                        className="flex flex-row justify-between items-center">
-                        {prompt.title}
+                        className="flex flex-row gap-3 items-center">
                         {prompt.is_system ? (
                           <ComputerIcon className="w-4 h-4" />
                         ) : (
                           <ZapIcon className="w-4 h-4" />
                         )}
+                        {prompt.title}
                       </span>
                     ),
                     value: prompt.id
@@ -166,8 +173,7 @@ export default function OptionLayout({
                   {pathname === "/" && messages.length > 0 && !streaming && (
                     <ShareBtn messages={messages} />
                   )}
-                  <Tooltip title={t("githubRepository")}
-                  >
+                  <Tooltip title={t("githubRepository")}>
                     <a
                       href="https://github.com/n4ze3m/page-assist"
                       target="_blank"
@@ -175,8 +181,7 @@ export default function OptionLayout({
                       <GithubIcon className="w-6 h-6" />
                     </a>
                   </Tooltip>
-                  <Tooltip title={t("settings")}
-                  >
+                  <Tooltip title={t("settings")}>
                     <NavLink
                       to="/settings"
                       className="!text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
diff --git a/src/components/Option/Playground/PlaygroundEmpty.tsx b/src/components/Option/Playground/PlaygroundEmpty.tsx
index 81771da..6636605 100644
--- a/src/components/Option/Playground/PlaygroundEmpty.tsx
+++ b/src/components/Option/Playground/PlaygroundEmpty.tsx
@@ -37,10 +37,10 @@ export const PlaygroundEmpty = () => {
 
   return (
     <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) && (
           <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">
               {t("ollamaState.searching")}
             </p>
@@ -49,7 +49,7 @@ export const PlaygroundEmpty = () => {
         {!isRefetching && ollamaStatus === "success" ? (
           ollamaInfo.isOk ? (
             <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">
                 {t("ollamaState.running")}
               </p>
@@ -57,7 +57,7 @@ export const PlaygroundEmpty = () => {
           ) : (
             <div className="flex flex-col space-y-2 justify-center items-center">
               <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">
                   {t("ollamaState.notRunning")}
                 </p>
diff --git a/src/components/Option/Playground/PlaygroundForm.tsx b/src/components/Option/Playground/PlaygroundForm.tsx
index 6776732..87c6005 100644
--- a/src/components/Option/Playground/PlaygroundForm.tsx
+++ b/src/components/Option/Playground/PlaygroundForm.tsx
@@ -153,7 +153,7 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
     }
   }
   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
         className={`h-full rounded-md shadow relative ${
           form.values.image.length === 0 ? "hidden" : "block"
@@ -176,7 +176,7 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
         </div>
       </div>
       <div>
-        <div className="flex">
+        <div className="flex bg-white dark:bg-transparent">
           <form
             onSubmit={form.onSubmit(async (value) => {
               if (!selectedModel || selectedModel.length === 0) {