Skip to content

Commit

Permalink
Adds theme ligth in chatbot menu
Browse files Browse the repository at this point in the history
  • Loading branch information
@ap0k4
ap0k4 committed Oct 10, 2024
1 parent a571f9d commit 97271fe
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 34 deletions.
8 changes: 5 additions & 3 deletions packages/protolib/src/components/chatbot/components/Navbar/ChatHistory.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
))}
Expand All @@ -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>
Expand Down
61 changes: 30 additions & 31 deletions packages/protolib/src/components/chatbot/components/Navbar/Navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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 />
Expand All @@ -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}>
Expand All @@ -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>
Expand All @@ -163,4 +161,5 @@ export default function Navbar({
</Modal>
</>
);
}

}

0 comments on commit 97271fe

Please sign in to comment.