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

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',
-  100: '#1f202b',
-  200: '#2d2f3f',
-  300: '#3a3c4c',
+  50: '#0d1117',
+  100: '#161b22',
+  200: '#21262d',
+  300: '#30363d',
 });
 
 const themeLight = (colors: DefaultColors) => ({
   50: '#ffffff',
-  100: '#f1f5f9',
-  200: '#c4c7c5',
-  300: '#9ca3af',
+  100: '#f6f8fa',
+  200: '#d0d7de',
+  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"