feat(ui): make ui more reactive

.github/workflows/docker-build.yaml

@@ -4,6 +4,7 @@ on:
   push:
     branches:
       - master
+      - canary
   release:
     types: [published]
 
@@ -43,6 +44,19 @@ jobs:
             -t itzcrazykns1337/${IMAGE_NAME}:amd64 \
             --push .
 
+      - name: Build and push AMD64 Canary Docker image
+        if: github.ref == 'refs/heads/canary' && github.event_name == 'push'
+        run: |
+          DOCKERFILE=app.dockerfile
+          IMAGE_NAME=perplexica
+          docker buildx build --platform linux/amd64 \
+            --cache-from=type=registry,ref=itzcrazykns1337/${IMAGE_NAME}:canary-amd64 \
+            --cache-to=type=inline \
+            --provenance false \
+            -f $DOCKERFILE \
+            -t itzcrazykns1337/${IMAGE_NAME}:canary-amd64 \
+            --push .
+
       - name: Build and push AMD64 release Docker image
         if: github.event_name == 'release'
         run: |
@@ -91,6 +105,19 @@ jobs:
             -t itzcrazykns1337/${IMAGE_NAME}:arm64 \
             --push .
 
+      - name: Build and push ARM64 Canary Docker image
+        if: github.ref == 'refs/heads/canary' && github.event_name == 'push'
+        run: |
+          DOCKERFILE=app.dockerfile
+          IMAGE_NAME=perplexica
+          docker buildx build --platform linux/arm64 \
+            --cache-from=type=registry,ref=itzcrazykns1337/${IMAGE_NAME}:canary-arm64 \
+            --cache-to=type=inline \
+            --provenance false \
+            -f $DOCKERFILE \
+            -t itzcrazykns1337/${IMAGE_NAME}:canary-arm64 \
+            --push .
+
       - name: Build and push ARM64 release Docker image
         if: github.event_name == 'release'
         run: |
@@ -128,6 +155,15 @@ jobs:
             --amend itzcrazykns1337/${IMAGE_NAME}:arm64
           docker manifest push itzcrazykns1337/${IMAGE_NAME}:main
 
+      - name: Create and push multi-arch manifest for canary
+        if: github.ref == 'refs/heads/canary' && github.event_name == 'push'
+        run: |
+          IMAGE_NAME=perplexica
+          docker manifest create itzcrazykns1337/${IMAGE_NAME}:canary \
+            --amend itzcrazykns1337/${IMAGE_NAME}:canary-amd64 \
+            --amend itzcrazykns1337/${IMAGE_NAME}:canary-arm64
+          docker manifest push itzcrazykns1337/${IMAGE_NAME}:canary
+
       - name: Create and push multi-arch manifest for releases
         if: github.event_name == 'release'
         run: |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "perplexica-frontend",
-  "version": "1.11.0-rc2",
+  "version": "1.11.0-rc3",
   "license": "MIT",
   "author": "ItzCrazyKns",
   "scripts": {
@@ -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",

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">

tailwind.config.ts

@@ -2,17 +2,17 @@ import type { Config } from 'tailwindcss';
 import type { DefaultColors } from 'tailwindcss/types/generated/colors';
 
 const themeDark = (colors: DefaultColors) => ({
-  50: '#111116',
+  50: '#0d1117',
-  100: '#1f202b',
+  100: '#161b22',
-  200: '#2d2f3f',
+  200: '#21262d',
-  300: '#3a3c4c',
+  300: '#30363d',
 });
 
 const themeLight = (colors: DefaultColors) => ({
   50: '#ffffff',
-  100: '#f1f5f9',
+  100: '#f6f8fa',
-  200: '#c4c7c5',
+  200: '#d0d7de',
-  300: '#9ca3af',
+  300: '#afb8c1',
 });
 
 const config: Config = {
@@ -49,6 +49,6 @@ const config: Config = {
       },
     },
   },
-  plugins: [require('@tailwindcss/typography')],
+  plugins: [require('@tailwindcss/typography'), require('@headlessui/tailwindcss')({ prefix: 'headless' })],
 };
 export default config;

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"