From 97271fe969f66beb3b84b6c7b015b3acbf577795 Mon Sep 17 00:00:00 2001
From: Noemi Blazquez <ap0calipse@gmail.com>
Date: Thu, 10 Oct 2024 12:38:21 +0200
Subject: [PATCH] Adds theme ligth in chatbot menu

---
 .../chatbot/components/Navbar/ChatHistory.tsx |  8 ++-
 .../chatbot/components/Navbar/Navbar.tsx      | 61 +++++++++----------
 2 files changed, 35 insertions(+), 34 deletions(-)

diff --git a/packages/protolib/src/components/chatbot/components/Navbar/ChatHistory.tsx b/packages/protolib/src/components/chatbot/components/Navbar/ChatHistory.tsx
index 36399aaea..b13266b94 100644
--- a/packages/protolib/src/components/chatbot/components/Navbar/ChatHistory.tsx
+++ b/packages/protolib/src/components/chatbot/components/Navbar/ChatHistory.tsx
@@ -5,14 +5,16 @@ export default function ChatHistory() {
   const chatsHistory = useChat(selectChatsHistory);
 
   return (
-    <div className="my-4 text-[#ECECF1] px-2 h-full">
+    <div className="my-4 px-2 h-full text-gray-800 dark:text-[#ECECF1]">
       {Object.keys(chatsHistory).length > 0 &&
         Object.keys(chatsHistory)
           .sort((a, b) => priority.indexOf(a) - priority.indexOf(b))
           .map((month) => {
             return (
               <div key={month}>
-                <h3 className=" text-sm my-2 text-[#8E8EA0] pl-2">{month}</h3>
+                <h3 className="text-sm my-2 pl-2 text-gray-600 dark:text-[#8E8EA0]">
+                  {month}
+                </h3>
                 {chatsHistory[month].map((chatId, i) => (
                   <ChatRef key={chatId.id + i} chat={chatId} />
                 ))}
@@ -21,7 +23,7 @@ export default function ChatHistory() {
           })}
       {Object.keys(chatsHistory).length === 0 && (
         <div className="h-full flex justify-center items-center">
-          <p className="text-center text-gray-400">No chats yet</p>
+          <p className="text-center text-gray-500 dark:text-gray-400">No chats yet</p>
         </div>
       )}
     </div>
diff --git a/packages/protolib/src/components/chatbot/components/Navbar/Navbar.tsx b/packages/protolib/src/components/chatbot/components/Navbar/Navbar.tsx
index b23582499..e2029ed5f 100644
--- a/packages/protolib/src/components/chatbot/components/Navbar/Navbar.tsx
+++ b/packages/protolib/src/components/chatbot/components/Navbar/Navbar.tsx
@@ -48,20 +48,27 @@ export default function Navbar({
     <>
       <div
         className={classnames(
-          "navwrap fixed duration-500 top-0 left-0 bottom-0 right-0 md:right-[calc(100vw-260px)] z-30 md:bg-opacity-0 ",
-          { "bg-opacity-60 ": active, "opacity-0 pointer-events-none": !active }
+          "navwrap fixed duration-500 top-0 left-0 bottom-0 right-0 md:right-[calc(100vw-260px)] z-30 md:bg-opacity-0",
+          {
+            "bg-opacity-60": active,
+            "opacity-0 pointer-events-none": !active,
+          }
         )}
       >
         <nav
           className={classnames(
-            " absolute left-0 bottom-0 top-0  md:flex-grow-1 w-9/12 md:w-[260px] bg-[#171717] text-white z-10 flex flex-col transition duration-500",
-            { "translate-x-0": active, "-translate-x-[150%]": !active }
+            "absolute left-0 bottom-0 top-0 md:flex-grow-1 w-9/12 md:w-[260px] flex flex-col transition duration-500",
+            "bg-[#f8f8f8] dark:bg-[#171717] text-black dark:text-white", // Cambiamos el fondo y el texto según el tema
+            {
+              "translate-x-0": active,
+              "-translate-x-[150%]": !active,
+            }
           )}
         >
-          <div className="flex mb-2  items-center justify-between gap-2 p-2">
+          <div className="flex mb-2 items-center justify-between gap-2 p-2">
             <button
               type="button"
-              className=" border border-gray-500 p-2 w-full  md:w-auto  rounded-md text-left flex-grow flex"
+              className="border border-gray-300 dark:border-gray-500 p-2 w-full md:w-auto rounded-md text-left flex-grow flex bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800" // Ajustes para fondo claro y oscuro
               onClick={addNewChat}
             >
               <span className="mr-2 text-xl">
@@ -71,7 +78,7 @@ export default function Navbar({
             </button>
             <button
               type="button"
-              className="border h-10 w-10 border-gray-500 rounded-md p-2 hidden md:inline-block text-gray-200"
+              className="border h-10 w-10 border-gray-300 dark:border-gray-500 rounded-md p-2 hidden md:inline-block text-gray-800 dark:text-gray-200" // Cambios en el color del borde y texto
               onClick={() => setActive(false)}
             >
               <PanelLeft />
@@ -80,18 +87,17 @@ export default function Navbar({
           <div className="history overflow-y-auto h-[calc(100%-60px)]">
             <ChatHistory />
           </div>
-          <div className="account  font-bold  z-20 bg-[#171717] border-t border-gray-500 shadow  ">
-            <div className=" self-stretch mr-4 w-full mb-2">
+          <div className="account font-bold z-20 bg-[#f8f8f8] dark:bg-[#171717] border-t border-gray-300 dark:border-gray-500 shadow"> {/* Cambios en el color del fondo y bordes */}
+            <div className="self-stretch mr-4 w-full mb-2">
               <select
                 value={selectedModal}
                 onChange={(e) => setModal(e.target.value as ModalList)}
-                className="border border-gray-300 block w-full p-2.5  dark:text-white"
+                className="border border-gray-300 dark:border-gray-500 block w-full p-2.5 text-black dark:text-white bg-transparent" // Ajustes para tema claro y oscuro
               >
                 {Object.keys(groupedModels).map((group) => (
                   <optgroup
                     label={group.toUpperCase()}
                     key={group}
-                    // disabled={group.startsWith("dall-e")}
                   >
                     {groupedModels[group].map((modal) => (
                       <option value={modal} key={modal}>
@@ -105,51 +111,43 @@ export default function Navbar({
             <div className="[&>.options]:focus-within:visible">
               <button
                 type="button"
-                className="px-2 relative py-2 inline-flex w-full items-center hover:bg-gray-700 transition group "
+                className="px-2 relative py-2 inline-flex w-full items-center hover:bg-gray-100 dark:hover:bg-gray-700 transition group bg-transparent text-black dark:text-white" // Ajuste para que el botón también respete los temas
               >
-                <Avatar className=" h-11 w-11" />
-
+                <Avatar className="h-11 w-11" />
                 <span className="p-2">{name}</span>
-                <span className=" ml-auto  text-gray-400 text-2xl ">
+                <span className="ml-auto text-gray-400 dark:text-gray-200 text-2xl">
                   <MoreHorizontal />
                 </span>
               </button>
-              <div className="options absolute bottom-12 rounded-md left-0 right-0 bg-gray-800 font-normal invisible transition  m-2 z-30 text-gray-300 ">
+              <div className="options absolute bottom-12 rounded-md left-0 right-0 bg-gray-100 dark:bg-gray-800 font-normal invisible transition m-2 z-30 text-gray-800 dark:text-gray-300"> {/* Colores ajustados */}
                 <button
-                  className=" p-2   hover:bg-gray-700 w-full text-left flex items-center"
+                  className="p-2 hover:bg-gray-200 dark:hover:bg-gray-700 w-full text-left flex items-center"
                   onClick={() => setSystemMessageModalVisible(true)}
                 >
-                  <span className="mr-2 p-1 text-xl  flex items-center">
+                  <span className="mr-2 p-1 text-xl flex items-center">
                     <MessageSquare />
                   </span>
                   <span>Custom instructions</span>
                 </button>
                 <button
-                  className=" p-2   hover:bg-gray-700 w-full text-left flex items-center"
+                  className="p-2 hover:bg-gray-200 dark:hover:bg-gray-700 w-full text-left flex items-center"
                   onClick={() => setModalVisible(true)}
                 >
-                  <span className="mr-2 p-1  text-xl flex items-center">
+                  <span className="mr-2 p-1 text-xl flex items-center">
                     <SettingsIcon />
                   </span>
                   <span>Settings</span>
                 </button>
-                <div className="h-[1px] bg-gray-300"></div>
-                {/* maybe in future i will add authentication */}
-                {/* <button className=" p-2   hover:bg-gray-700  w-full  text-left flex items-center">
-                  <span className="mr-2 p-1 text-xl flex items-center">
-                    <IonIcon icon={logOutOutline} />
-                  </span>
-                  <span>Log out</span>
-                </button> */}
+                <div className="h-[1px] bg-gray-300 dark:bg-gray-700"></div>
               </div>
             </div>
           </div>
           <button
             type="button"
             onClick={() => setActive(false)}
-            className="close md:hidden absolute top-2 h-10 w-10 border-2 -right-10  p-2 flex items-center justify-center"
+            className="close md:hidden absolute top-2 h-10 w-10 border-2 -right-10 p-2 flex items-center justify-center text-gray-800 dark:text-white"
           >
-            <span className=" text-2xl flex">
+            <span className="text-2xl flex">
               <X />
             </span>
           </button>
@@ -163,4 +161,5 @@ export default function Navbar({
       </Modal>
     </>
   );
-}
+  
+}  
\ No newline at end of file