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",
@@ -20,7 +21,6 @@
     "@langchain/core": "^0.3.66",
     "@langchain/google-genai": "^0.2.15",
     "@langchain/groq": "^0.2.3",
-    "@langchain/langgraph": "^0.4.9",
     "@langchain/ollama": "^0.2.3",
     "@langchain/openai": "^0.6.2",
     "@langchain/textsplitters": "^0.1.0",

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

src/lib/db/migrate.ts

@@ -2,9 +2,12 @@ import Database from 'better-sqlite3';
 import path from 'path';
 import fs from 'fs';
 
-const db = new Database(path.join(process.cwd(), 'data', 'db.sqlite'));
+const DATA_DIR = process.env.DATA_DIR || process.cwd();
+const dbPath = path.join(DATA_DIR, './data/db.sqlite');
 
-const migrationsFolder = path.join(process.cwd(), 'drizzle');
+const db = new Database(dbPath);
+
+const migrationsFolder = path.join(DATA_DIR, 'drizzle');
 
 db.exec(`
   CREATE TABLE IF NOT EXISTS ran_migrations (
@@ -54,7 +57,7 @@ fs.readdirSync(migrationsFolder)
                         id INTEGER PRIMARY KEY,
                         type TEXT NOT NULL,
                         chatId TEXT NOT NULL,
-                        createdAt TEXT NOT NULL,
+                        createdAt TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,
                         messageId TEXT NOT NULL,
                         content TEXT,
                         sources TEXT DEFAULT '[]'
@@ -67,8 +70,10 @@ fs.readdirSync(migrationsFolder)
                 `);
 
         messages.forEach((msg: any) => {
-          if (msg.type === 'user') {
+          while (typeof msg.metadata === 'string') {
             msg.metadata = JSON.parse(msg.metadata || '{}');
+          }
+          if (msg.type === 'user') {
             insertMessage.run(
               'user',
               msg.chatId,
@@ -78,7 +83,6 @@ fs.readdirSync(migrationsFolder)
               '[]',
             );
           } else if (msg.type === 'assistant') {
-            msg.metadata = JSON.parse(msg.metadata || '{}');
             insertMessage.run(
               'assistant',
               msg.chatId,

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"
@@ -661,33 +666,6 @@
     groq-sdk "^0.19.0"
     zod "^3.22.4"
 
-"@langchain/langgraph-checkpoint@^0.1.1":
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/@langchain/langgraph-checkpoint/-/langgraph-checkpoint-0.1.1.tgz#500569a02af4b85172d775de63eeba06afa0c189"
-  integrity sha512-h2bP0RUikQZu0Um1ZUPErQLXyhzroJqKRbRcxYRTAh49oNlsfeq4A3K4YEDRbGGuyPZI/Jiqwhks1wZwY73AZw==
-  dependencies:
-    uuid "^10.0.0"
-
-"@langchain/langgraph-sdk@~0.1.0":
-  version "0.1.9"
-  resolved "https://registry.yarnpkg.com/@langchain/langgraph-sdk/-/langgraph-sdk-0.1.9.tgz#5442bd1a4257b5d94927af6e09b0aed341ae8a1d"
-  integrity sha512-7WEDHtbI3pYPUiiHq+dPaF92ZN2W7lqObdpK0X+roa8zPdHUjve/HiqYuKNWS12u1N+L5QIuQWqZvVNvUA7BfQ==
-  dependencies:
-    "@types/json-schema" "^7.0.15"
-    p-queue "^6.6.2"
-    p-retry "4"
-    uuid "^9.0.0"
-
-"@langchain/langgraph@^0.4.9":
-  version "0.4.9"
-  resolved "https://registry.yarnpkg.com/@langchain/langgraph/-/langgraph-0.4.9.tgz#470a238ea98662d6ec9dfc42859a00acad00fc81"
-  integrity sha512-+rcdTGi4Ium4X/VtIX3Zw4RhxEkYWpwUyz806V6rffjHOAMamg6/WZDxpJbrP33RV/wJG1GH12Z29oX3Pqq3Aw==
-  dependencies:
-    "@langchain/langgraph-checkpoint" "^0.1.1"
-    "@langchain/langgraph-sdk" "~0.1.0"
-    uuid "^10.0.0"
-    zod "^3.25.32"
-
 "@langchain/ollama@^0.2.3":
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/@langchain/ollama/-/ollama-0.2.3.tgz#4868e66db4fc480f08c42fc652274abbab0416f0"
@@ -966,11 +944,6 @@
   resolved "https://registry.yarnpkg.com/@types/html-to-text/-/html-to-text-9.0.4.tgz#4a83dd8ae8bfa91457d0b1ffc26f4d0537eff58c"
   integrity sha512-pUY3cKH/Nm2yYrEmDlPR1mR7yszjGx4DrwPjQ702C4/D5CwHuZTgZdIdwPkRbcuhs7BAh2L5rg3CL5cbRiGTCQ==
 
-"@types/json-schema@^7.0.15":
-  version "7.0.15"
-  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
-  integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
-
 "@types/json5@^0.0.29":
   version "0.0.29"
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
@@ -5165,7 +5138,7 @@ uuid@^11.1.0:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-11.1.0.tgz#9549028be1753bb934fc96e2bca09bb4105ae912"
   integrity sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==
 
-uuid@^9.0.0, uuid@^9.0.1:
+uuid@^9.0.1:
   version "9.0.1"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.1.tgz#e188d4c8853cc722220392c424cd637f32293f30"
   integrity sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==