From 47350b34ecf2b1785f003ef2b2af58c1efdb9e85 Mon Sep 17 00:00:00 2001
From: ItzCrazyKns <95534749+ItzCrazyKns@users.noreply.github.com>
Date: Wed, 8 Oct 2025 22:19:58 +0530
Subject: [PATCH] feat(ui): make ui more reactive

---
 package.json                                 | 1 +
 src/components/MessageInputActions/Focus.tsx | 2 +-
 tailwind.config.ts                           | 2 +-
 yarn.lock                                    | 5 +++++
 4 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index eab322b..6a2debf 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@headlessui/react": "^2.2.0",
+    "@headlessui/tailwindcss": "^0.2.2",
     "@iarna/toml": "^2.2.5",
     "@icons-pack/react-simple-icons": "^12.3.0",
     "@langchain/anthropic": "^0.3.24",
diff --git a/src/components/MessageInputActions/Focus.tsx b/src/components/MessageInputActions/Focus.tsx
index 9256aa7..9b2c95b 100644
--- a/src/components/MessageInputActions/Focus.tsx
+++ b/src/components/MessageInputActions/Focus.tsx
@@ -63,7 +63,7 @@ const Focus = () => {
     <Popover className="relative w-full max-w-[15rem] md:max-w-md lg:max-w-lg mt-[6.5px]">
       <PopoverButton
         type="button"
-        className=" text-black/50 dark:text-white/50 rounded-xl hover:bg-light-secondary dark:hover:bg-dark-secondary active:scale-95 transition duration-200 hover:text-black dark:hover:text-white"
+        className="active:border-none headless-open:text-black dark:headless-open:text-white text-black/50 dark:text-white/50 rounded-xl hover:bg-light-secondary dark:hover:bg-dark-secondary active:scale-95 transition duration-200 hover:text-black dark:hover:text-white"
       >
         {focusMode !== 'webSearch' ? (
           <div className="flex flex-row items-center space-x-1">
diff --git a/tailwind.config.ts b/tailwind.config.ts
index b4c6ba0..1b1a08b 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -49,6 +49,6 @@ const config: Config = {
       },
     },
   },
-  plugins: [require('@tailwindcss/typography')],
+  plugins: [require('@tailwindcss/typography'), require('@headlessui/tailwindcss')({ prefix: 'headless' })],
 };
 export default config;
diff --git a/yarn.lock b/yarn.lock
index 00569ce..ab38dd5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -407,6 +407,11 @@
     "@react-aria/interactions" "^3.21.3"
     "@tanstack/react-virtual" "^3.8.1"
 
+"@headlessui/tailwindcss@^0.2.2":
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/@headlessui/tailwindcss/-/tailwindcss-0.2.2.tgz#8ebde73fabca72d48636ea56ae790209dc5f0d49"
+  integrity sha512-xNe42KjdyA4kfUKLLPGzME9zkH7Q3rOZ5huFihWNWOQFxnItxPB3/67yBI8/qBfY8nwBRx5GHn4VprsoluVMGw==
+
 "@huggingface/jinja@^0.2.2":
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/@huggingface/jinja/-/jinja-0.2.2.tgz#faeb205a9d6995089bef52655ddd8245d3190627"