Sync to HuggingFace Spaces

.dockerignore

@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+

.editorconfig

@@ -0,0 +1,7 @@
+[*]
+charset = utf-8
+insert_final_newline = true
+end_of_line = lf
+indent_style = space
+indent_size = 2
+max_line_length = 80

.env.example

@@ -0,0 +1,32 @@
+# A comma-separated list of access keys. Example: `ACCESS_KEYS="ABC123,JUD71F,HUWE3"`. Leave blank for unrestricted access.
+ACCESS_KEYS=""
+
+# The timeout in hours for access key validation. Set to 0 to require validation on every page load.
+ACCESS_KEY_TIMEOUT_HOURS="24"
+
+# The default model ID for WebLLM with F16 shaders.
+WEBLLM_DEFAULT_F16_MODEL_ID="SmolLM2-360M-Instruct-q0f16-MLC"
+
+# The default model ID for WebLLM with F32 shaders.
+WEBLLM_DEFAULT_F32_MODEL_ID="SmolLM2-360M-Instruct-q0f32-MLC"
+
+# The default model ID for Wllama.
+WLLAMA_DEFAULT_MODEL_ID="smollm2-360m"
+
+# The base URL for the internal OpenAI compatible API. Example: `INTERNAL_OPENAI_COMPATIBLE_API_BASE_URL="https://api.openai.com/v1"`. Leave blank to disable internal OpenAI compatible API.
+INTERNAL_OPENAI_COMPATIBLE_API_BASE_URL=""
+
+# The access key for the internal OpenAI compatible API.
+INTERNAL_OPENAI_COMPATIBLE_API_KEY=""
+
+# The model for the internal OpenAI compatible API.
+INTERNAL_OPENAI_COMPATIBLE_API_MODEL=""
+
+# The name of the internal OpenAI compatible API, displayed in the UI.
+INTERNAL_OPENAI_COMPATIBLE_API_NAME="Internal API"
+
+# The type of inference to use by default. The possible values are:
+# "browser" -> In the browser (Private)
+# "openai" -> Remote Server (API)
+# "internal" -> $INTERNAL_OPENAI_COMPATIBLE_API_NAME
+DEFAULT_INFERENCE_TYPE="browser"

.github/workflows/deploy.yml

@@ -0,0 +1,54 @@
+name: Deploy
+
+on:
+  workflow_dispatch:
+
+jobs:
+  build-and-push-image:
+    name: Publish Docker image to GitHub Packages
+    runs-on: ubuntu-latest
+    env:
+      REGISTRY: ghcr.io
+      IMAGE_NAME: ${{ github.repository }}
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+      - name: Log in to the Container registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          platforms: linux/amd64,linux/arm64
+
+  sync-to-hf:
+    name: Sync to HuggingFace Spaces
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          lfs: true
+      - uses: JacobLinCool/huggingface-sync@v1
+        with:
+          github: ${{ secrets.GITHUB_TOKEN }}
+          user: ${{ vars.HF_SPACE_OWNER }}
+          space: ${{ vars.HF_SPACE_NAME }}
+          token: ${{ secrets.HF_TOKEN }}
+          configuration: "hf-space-config.yml"

.github/workflows/llama-cpp.yml

@@ -0,0 +1,112 @@
+name: Review Pull Request with LlamaCPP
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+    branches: ["main"]
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  llama-cpp:
+    if: ${{ !contains(github.event.pull_request.labels.*.name, 'skip-ai-review') }}
+    continue-on-error: true
+    runs-on: ubuntu-latest
+    name: LlamaCPP
+    permissions:
+      pull-requests: write
+      contents: read
+    timeout-minutes: 30
+    env:
+      LLAMA_CPP_COMMIT: 42ae10bbcd7b56f29a302c86796542a6dadf46c9
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Fetch branches and output the diff in this step
+        run: |
+          git fetch origin main:main
+          git fetch origin pull/${{ github.event.pull_request.number }}/head:pr-branch
+          mkdir -p /tmp/llama_review
+          git diff main..pr-branch > /tmp/llama_review/diff.txt
+
+      - name: Write prompt to file
+        id: build_prompt
+        run: |
+          PR_TITLE=$(echo "${{ github.event.pull_request.title }}" | sed 's/[()]/\\&/g')
+          DIFF_CONTENT=$(cat /tmp/llama_review/diff.txt)
+          echo "<|im_start|>system
+          You are a senior software engineer working ${{ github.event.repository.name }}, which has the following description: \"${{ github.event.repository.description }}\".
+          You are currently reviewing a pull request titled \"$PR_TITLE\", from the branch \"${{ github.event.pull_request.head.ref }}\".<|im_end|>
+          <|im_start|>user
+          Write a high-quality review of the following changes:
+          \`\`\`diff
+          $DIFF_CONTENT
+          \`\`\`
+          <|im_end|>
+          <|im_start|>assistant
+          ### Pull Request Review
+
+          #### Summary" > /tmp/llama_review/prompt.txt
+
+      - name: Show Prompt
+        run: cat /tmp/llama_review/prompt.txt
+
+      - name: Cache LlamaCPP
+        id: cache_llama_cpp
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/llama.cpp/
+          key: llama-cpp-${{ runner.os }}-${{ env.LLAMA_CPP_COMMIT }}
+
+      - name: Clone and build LlamaCPP
+        if: steps.cache_llama_cpp.outputs.cache-hit != 'true'
+        run: |
+          git clone https://github.com/ggerganov/llama.cpp.git
+          cd llama.cpp
+          git checkout ${{ env.LLAMA_CPP_COMMIT }}
+          make -j llama-cli
+          mkdir -p ~/.cache/llama.cpp/
+          cp llama-cli ~/.cache/llama.cpp/
+          curl -L -o ~/.cache/llama.cpp/Qwen2.5-Coder-3B-Instruct-Q8_0.gguf https://huggingface.co/unsloth/Qwen2.5-Coder-3B-Instruct-GGUF/resolve/main/Qwen2.5-Coder-3B-Instruct-Q8_0.gguf
+
+      - name: Copy LlamaCPP to /usr/local/bin/
+        run: cp ~/.cache/llama.cpp/llama-cli /usr/local/bin/
+
+      - name: Run LlamaCPP
+        run: |
+          PROMPT=$(cat /tmp/llama_review/prompt.txt)
+          llama-cli \
+            -m ~/.cache/llama.cpp/Qwen2.5-Coder-3B-Instruct-Q8_0.gguf \
+            -p "$PROMPT" \
+            -e \
+            --ctx-size 32768 \
+            -np 1 \
+            -t -1 \
+            -n -1 \
+            --temp 0.7 \
+            --top-p 0.9 \
+            --min-p 0.1 \
+            --top-k 0 \
+            --no-display-prompt > /tmp/llama_review/response.txt
+
+      - name: Show Response
+        run: cat /tmp/llama_review/response.txt
+
+      - name: Find Comment
+        uses: peter-evans/find-comment@v3
+        id: find_comment
+        with:
+          issue-number: ${{ github.event.pull_request.number }}
+          comment-author: "github-actions[bot]"
+          body-includes: "[end of text]"
+
+      - name: Post or Update PR Review
+        uses: peter-evans/create-or-update-comment@v4
+        with:
+          comment-id: ${{ steps.find_comment.outputs.comment-id }}
+          issue-number: ${{ github.event.pull_request.number }}
+          body-path: /tmp/llama_review/response.txt
+          edit-mode: replace

.github/workflows/on-pull-request-to-main.yml

@@ -0,0 +1,9 @@
+name: On Pull Request To Main
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+    branches: ["main"]
+jobs:
+  test-lint-ping:
+    if: ${{ !contains(github.event.pull_request.labels.*.name, 'skip-test-lint-ping') }}
+    uses: ./.github/workflows/reusable-test-lint-ping.yml

.github/workflows/on-push-to-main.yml

@@ -0,0 +1,7 @@
+name: On Push To Main
+on:
+  push:
+    branches: ["main"]
+jobs:
+  test-lint-ping:
+    uses: ./.github/workflows/reusable-test-lint-ping.yml

.github/workflows/reusable-test-lint-ping.yml

@@ -0,0 +1,25 @@
+on:
+  workflow_call:
+jobs:
+  check-code-quality:
+    name: Check Code Quality
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "npm"
+      - run: npm ci --ignore-scripts
+      - run: npm test
+      - run: npm run lint
+  check-docker-container:
+    needs: [check-code-quality]
+    name: Check Docker Container
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - run: docker compose -f docker-compose.production.yml up -d
+      - name: Check if main page is available
+        run: until curl -s -o /dev/null -w "%{http_code}" localhost:7860 | grep 200; do sleep 1; done
+      - run: docker compose -f docker-compose.production.yml down

.github/workflows/update-searxng-docker-image.yml

@@ -0,0 +1,44 @@
+name: Update SearXNG Docker Image
+
+on:
+  schedule:
+    - cron: "0 14 * * *"
+  workflow_dispatch:
+
+permissions:
+  contents: write
+
+jobs:
+  update-searxng-image:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Get latest SearXNG image tag
+        id: get_latest_tag
+        run: |
+          LATEST_TAG=$(curl -s "https://hub.docker.com/v2/repositories/searxng/searxng/tags/?page_size=3&ordering=last_updated" | jq -r '.results[] | select(.name != "latest-build-cache" and .name != "latest") | .name' | head -n 1)
+          echo "LATEST_TAG=${LATEST_TAG}" >> $GITHUB_OUTPUT
+
+      - name: Update Dockerfile
+        run: |
+          sed -i 's|FROM searxng/searxng:.*|FROM searxng/searxng:${{ steps.get_latest_tag.outputs.LATEST_TAG }}|' Dockerfile
+
+      - name: Check for changes
+        id: git_status
+        run: |
+          git diff --exit-code || echo "changes=true" >> $GITHUB_OUTPUT
+
+      - name: Commit and push if changed
+        if: steps.git_status.outputs.changes == 'true'
+        run: |
+          git config --local user.email "github-actions[bot]@users.noreply.github.com"
+          git config --local user.name "github-actions[bot]"
+          git add Dockerfile
+          git commit -m "Update SearXNG Docker image to tag ${{ steps.get_latest_tag.outputs.LATEST_TAG }}"
+          git push
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -0,0 +1,7 @@
+node_modules
+.DS_Store
+/client/dist
+/server/models
+.vscode
+/vite-build-stats.html
+.env

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps = true

Dockerfile

@@ -0,0 +1,82 @@
+# Use the SearXNG image as the base
+FROM searxng/searxng:2024.11.17-10d3af84b
+
+# Set the default port to 7860 if not provided
+ENV PORT=7860
+
+# Expose the port specified by the PORT environment variable
+EXPOSE $PORT
+
+# Install necessary packages using Alpine's package manager
+RUN apk add --update \
+  nodejs \
+  npm \
+  git \
+  build-base \
+  cmake \
+  ccache
+
+# Set the SearXNG settings folder path
+ARG SEARXNG_SETTINGS_FOLDER=/etc/searxng
+
+# Modify SearXNG configuration:
+# 1. Change output format from HTML to JSON
+# 2. Remove user switching in the entrypoint script
+# 3. Create and set permissions for the settings folder
+RUN sed -i 's/- html/- json/' /usr/local/searxng/searx/settings.yml \
+  && sed -i 's/su-exec searxng:searxng //' /usr/local/searxng/dockerfiles/docker-entrypoint.sh \
+  && mkdir -p ${SEARXNG_SETTINGS_FOLDER}  \
+  && chmod 777 ${SEARXNG_SETTINGS_FOLDER}
+
+# Set up user and directory structure
+ARG USERNAME=user
+ARG HOME_DIR=/home/${USERNAME}
+ARG APP_DIR=${HOME_DIR}/app
+
+# Create a non-root user and set up the application directory
+RUN adduser -D -u 1000 ${USERNAME} \
+  && mkdir -p ${APP_DIR} \
+  && chown -R ${USERNAME}:${USERNAME} ${HOME_DIR}
+
+# Switch to the non-root user
+USER ${USERNAME}
+
+# Set the working directory to the application directory
+WORKDIR ${APP_DIR}
+
+# Define environment variables that can be passed to the container during build.
+# This approach allows for dynamic configuration without relying on a `.env` file,
+# which might not be suitable for all deployment scenarios.
+ARG ACCESS_KEYS
+ARG ACCESS_KEY_TIMEOUT_HOURS
+ARG WEBLLM_DEFAULT_F16_MODEL_ID
+ARG WEBLLM_DEFAULT_F32_MODEL_ID
+ARG WLLAMA_DEFAULT_MODEL_ID
+ARG INTERNAL_OPENAI_COMPATIBLE_API_BASE_URL
+ARG INTERNAL_OPENAI_COMPATIBLE_API_KEY
+ARG INTERNAL_OPENAI_COMPATIBLE_API_MODEL
+ARG INTERNAL_OPENAI_COMPATIBLE_API_NAME
+ARG DEFAULT_INFERENCE_TYPE
+
+# Copy package.json, package-lock.json, and .npmrc files
+COPY --chown=${USERNAME}:${USERNAME} ./package.json ./package.json
+COPY --chown=${USERNAME}:${USERNAME} ./package-lock.json ./package-lock.json
+COPY --chown=${USERNAME}:${USERNAME} ./.npmrc ./.npmrc
+
+# Install Node.js dependencies
+RUN npm ci
+
+# Copy the rest of the application files
+COPY --chown=${USERNAME}:${USERNAME} . .
+
+# Configure Git to treat the app directory as safe
+RUN git config --global --add safe.directory ${APP_DIR}
+
+# Build the application
+RUN npm run build
+
+# Set the entrypoint to use a shell
+ENTRYPOINT [ "/bin/sh", "-c" ]
+
+# Run SearXNG in the background and start the Node.js application using PM2
+CMD [ "(/usr/local/searxng/dockerfiles/docker-entrypoint.sh -f > /dev/null 2>&1) & (npx pm2 start ecosystem.config.cjs && npx pm2 logs production-server)" ]

README.md

@@ -0,0 +1,131 @@
+---
+title: MiniSearch
+emoji: 👌🔍
+colorFrom: yellow
+colorTo: yellow
+sdk: docker
+short_description: Minimalist web-searching app with browser-based AI assistant
+pinned: true
+custom_headers:
+  cross-origin-embedder-policy: require-corp
+  cross-origin-opener-policy: same-origin
+  cross-origin-resource-policy: cross-origin
+---
+
+# MiniSearch
+
+A minimalist web-searching app with an AI assistant that runs directly from your browser.
+
+Live demo: https://felladrin-minisearch.hf.space
+
+## Screenshot
+
+![MiniSearch Screenshot](https://github.com/user-attachments/assets/f8d72a8e-a725-42e9-9358-e6ebade2acb2)
+
+## Features
+
+- **Privacy-focused**: [No tracking, no ads, no data collection](https://docs.searxng.org/own-instance.html#how-does-searxng-protect-privacy)
+- **Easy to use**: Minimalist yet intuitive interface for all users
+- **Cross-platform**: Models run inside the browser, both on desktop and mobile
+- **Integrated**: Search from the browser address bar by setting it as the default search engine
+- **Efficient**: Models are loaded and cached only when needed
+- **Customizable**: Tweakable settings for search results and text generation
+- **Open-source**: [The code is available for inspection and contribution at GitHub](https://github.com/felladrin/MiniSearch)
+
+## Prerequisites
+
+- [Docker](https://docs.docker.com/get-docker/)
+
+## Getting started
+
+Here are the easiest ways to get started with MiniSearch. Pick the one that suits you best.
+
+**Option 1** - Use [MiniSearch's Docker Image](https://github.com/felladrin/MiniSearch/pkgs/container/minisearch) by running in your terminal:
+
+```bash
+docker run -p 7860:7860 ghcr.io/felladrin/minisearch:main
+```
+
+**Option 2** - Add MiniSearch's Docker Image to your existing Docker Compose file:
+
+```yaml
+services:
+  minisearch:
+    image: ghcr.io/felladrin/minisearch:main
+    ports:
+      - "7860:7860"
+```
+
+**Option 3** - Build from source by [downloading the repository files](https://github.com/felladrin/MiniSearch/archive/refs/heads/main.zip) and running:
+
+```bash
+docker compose -f docker-compose.production.yml up --build
+```
+
+Once the container is running, open http://localhost:7860 in your browser and start searching!
+
+## Frequently asked questions
+
+<details>
+  <summary>How do I search via the browser's address bar?</summary>
+  <p>
+    You can set MiniSearch as your browser's address-bar search engine using the pattern <code>http://localhost:7860/?q=%s</code>, in which your search term replaces <code>%s</code>.
+  </p>
+</details>
+
+<details>
+  <summary>Can I use custom models via OpenAI-Compatible API?</summary>
+  <p>
+    Yes! For this, open the Menu and change the "AI Processing Location" to <code>Remote server (API)</code>. Then configure the Base URL, and optionally set an API Key and a Model to use.
+  </p>
+</details>
+
+<details>
+  <summary>How do I restrict the access to my MiniSearch instance via password?</summary>
+  <p>
+    Create a <code>.env</code> file and set a value for <code>ACCESS_KEYS</code>. Then reset the MiniSearch docker container.
+  </p>
+  <p>
+    For example, if you to set the password to <code>PepperoniPizza</code>, then this is what you should add to your <code>.env</code>:<br/>
+    <code>ACCESS_KEYS="PepperoniPizza"</code>
+  </p>
+  <p>
+    You can find more examples in the <code>.env.example</code> file.
+  </p>
+</details>
+
+<details>
+  <summary>I want to serve MiniSearch to other users, allowing them to use my own OpenAI-Compatible API key, but without revealing it to them. Is it possible?</summary>
+  <p>Yes! In MiniSearch, we call this text-generation feature "Internal OpenAI-Compatible API". To use this it:</p>
+  <ol>
+    <li>Set up your OpenAI-Compatible API endpoint by configuring the following environment variables in your <code>.env</code> file:
+      <ul>
+        <li><code>INTERNAL_OPENAI_COMPATIBLE_API_BASE_URL</code>: The base URL for your API</li>
+        <li><code>INTERNAL_OPENAI_COMPATIBLE_API_KEY</code>: Your API access key</li>
+        <li><code>INTERNAL_OPENAI_COMPATIBLE_API_MODEL</code>: The model to use</li>
+        <li><code>INTERNAL_OPENAI_COMPATIBLE_API_NAME</code>: The name to display in the UI</li>
+      </ul>
+    </li>
+    <li>Restart MiniSearch server.</li>
+    <li>In the MiniSearch menu, select the new option (named as per your <code>INTERNAL_OPENAI_COMPATIBLE_API_NAME</code> setting) from the "AI Processing Location" dropdown.</li>
+  </ol>
+</details>
+
+<details>
+  <summary>How can I contribute to the development of this tool?</summary>
+  <p>Fork this repository and clone it. Then, start the development server by running the following command:</p>
+  <p><code>docker compose up</code></p>
+  <p>Make your changes, push them to your fork, and open a pull request! All contributions are welcome!</p>
+</details>
+
+<details>
+  <summary>Why is MiniSearch built upon SearXNG's Docker Image and using a single image instead of composing it from multiple services?</summary>
+  <p>There are a few reasons for this:</p>
+  <ul>
+    <li>MiniSearch utilizes SearXNG as its meta-search engine.</li>
+    <li>Manual installation of SearXNG is not trivial, so we use the docker image they provide, which has everything set up.</li>
+    <li>SearXNG only provides a Docker Image based on Alpine Linux.</li>
+    <li>The user of the image needs to be customized in a specific way to run on HuggingFace Spaces, where MiniSearch's demo runs.</li>
+    <li>HuggingFace only accepts a single docker image. It doesn't run docker compose or multiple images, unfortunately.</li>
+  </ul>
+</details>

biome.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+  "vcs": {
+    "enabled": false,
+    "clientKind": "git",
+    "useIgnoreFile": false
+  },
+  "files": {
+    "ignoreUnknown": false,
+    "ignore": []
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space"
+  },
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "double"
+    }
+  }
+}

client/components/AiResponse/AiModelDownloadAllowanceContent.tsx

@@ -0,0 +1,62 @@
+import { Alert, Button, Group, Text } from "@mantine/core";
+import { IconCheck, IconInfoCircle, IconX } from "@tabler/icons-react";
+import { usePubSub } from "create-pubsub/react";
+import { useState } from "react";
+import { addLogEntry } from "../../modules/logEntries";
+import { settingsPubSub } from "../../modules/pubSub";
+
+export default function AiModelDownloadAllowanceContent() {
+  const [settings, setSettings] = usePubSub(settingsPubSub);
+  const [hasDeniedDownload, setDeniedDownload] = useState(false);
+
+  const handleAccept = () => {
+    setSettings({
+      ...settings,
+      allowAiModelDownload: true,
+    });
+    addLogEntry("User allowed the AI model download");
+  };
+
+  const handleDecline = () => {
+    setDeniedDownload(true);
+    addLogEntry("User denied the AI model download");
+  };
+
+  return hasDeniedDownload ? null : (
+    <Alert
+      variant="light"
+      color="blue"
+      title="Allow AI model download?"
+      icon={<IconInfoCircle />}
+    >
+      <Text size="sm" mb="md">
+        To obtain AI responses, a language model needs to be downloaded to your
+        browser. Enabling this option lets the app store it and load it
+        instantly on subsequent uses.
+      </Text>
+      <Text size="sm" mb="md">
+        Please note that the download size ranges from 100 MB to 4 GB, depending
+        on the model you select in the Menu, so it's best to avoid using mobile
+        data for this.
+      </Text>
+      <Group justify="flex-end" mt="md">
+        <Button
+          variant="subtle"
+          color="gray"
+          leftSection={<IconX size="1rem" />}
+          onClick={handleDecline}
+          size="xs"
+        >
+          Not now
+        </Button>
+        <Button
+          leftSection={<IconCheck size="1rem" />}
+          onClick={handleAccept}
+          size="xs"
+        >
+          Allow download
+        </Button>
+      </Group>
+    </Alert>
+  );
+}

client/components/AiResponse/AiResponseContent.tsx

@@ -0,0 +1,164 @@
+import {
+  ActionIcon,
+  Alert,
+  Badge,
+  Box,
+  Card,
+  Group,
+  ScrollArea,
+  Text,
+  Tooltip,
+} from "@mantine/core";
+import {
+  IconArrowsMaximize,
+  IconArrowsMinimize,
+  IconHandStop,
+  IconInfoCircle,
+  IconRefresh,
+} from "@tabler/icons-react";
+import type { PublishFunction } from "create-pubsub";
+import { usePubSub } from "create-pubsub/react";
+import { type ReactNode, Suspense, lazy, useMemo } from "react";
+import { match } from "ts-pattern";
+import { settingsPubSub } from "../../modules/pubSub";
+import { searchAndRespond } from "../../modules/textGeneration";
+
+const FormattedMarkdown = lazy(() => import("./FormattedMarkdown"));
+const CopyIconButton = lazy(() => import("./CopyIconButton"));
+
+export default function AiResponseContent({
+  textGenerationState,
+  response,
+  setTextGenerationState,
+}: {
+  textGenerationState: string;
+  response: string;
+  setTextGenerationState: PublishFunction<
+    | "failed"
+    | "awaitingSearchResults"
+    | "preparingToGenerate"
+    | "idle"
+    | "loadingModel"
+    | "generating"
+    | "interrupted"
+    | "completed"
+  >;
+}) {
+  const [settings, setSettings] = usePubSub(settingsPubSub);
+
+  const ConditionalScrollArea = useMemo(
+    () =>
+      ({ children }: { children: ReactNode }) => {
+        return settings.enableAiResponseScrolling ? (
+          <ScrollArea.Autosize mah={300} type="auto" offsetScrollbars>
+            {children}
+          </ScrollArea.Autosize>
+        ) : (
+          <Box>{children}</Box>
+        );
+      },
+    [settings.enableAiResponseScrolling],
+  );
+
+  return (
+    <Card withBorder shadow="sm" radius="md">
+      <Card.Section withBorder inheritPadding py="xs">
+        <Group justify="space-between">
+          <Group gap="xs" align="center">
+            <Text fw={500}>
+              {match(textGenerationState)
+                .with("generating", () => "Generating AI Response...")
+                .otherwise(() => "AI Response")}
+            </Text>
+            {match(textGenerationState)
+              .with("interrupted", () => (
+                <Badge variant="light" color="yellow" size="xs">
+                  Interrupted
+                </Badge>
+              ))
+              .otherwise(() => null)}
+          </Group>
+          <Group gap="xs" align="center">
+            {match(textGenerationState)
+              .with("generating", () => (
+                <Tooltip label="Interrupt generation">
+                  <ActionIcon
+                    onClick={() => setTextGenerationState("interrupted")}
+                    variant="subtle"
+                    color="gray"
+                  >
+                    <IconHandStop size={16} />
+                  </ActionIcon>
+                </Tooltip>
+              ))
+              .otherwise(() => (
+                <Tooltip label="Regenerate response">
+                  <ActionIcon
+                    onClick={() => searchAndRespond()}
+                    variant="subtle"
+                    color="gray"
+                  >
+                    <IconRefresh size={16} />
+                  </ActionIcon>
+                </Tooltip>
+              ))}
+            {settings.enableAiResponseScrolling ? (
+              <Tooltip label="Show full response without scroll bar">
+                <ActionIcon
+                  onClick={() => {
+                    setSettings({
+                      ...settings,
+                      enableAiResponseScrolling: false,
+                    });
+                  }}
+                  variant="subtle"
+                  color="gray"
+                >
+                  <IconArrowsMaximize size={16} />
+                </ActionIcon>
+              </Tooltip>
+            ) : (
+              <Tooltip label="Enable scroll bar">
+                <ActionIcon
+                  onClick={() => {
+                    setSettings({
+                      ...settings,
+                      enableAiResponseScrolling: true,
+                    });
+                  }}
+                  variant="subtle"
+                  color="gray"
+                >
+                  <IconArrowsMinimize size={16} />
+                </ActionIcon>
+              </Tooltip>
+            )}
+            <Suspense>
+              <CopyIconButton value={response} tooltipLabel="Copy response" />
+            </Suspense>
+          </Group>
+        </Group>
+      </Card.Section>
+      <Card.Section withBorder>
+        <ConditionalScrollArea>
+          <Suspense>
+            <FormattedMarkdown>{response}</FormattedMarkdown>
+          </Suspense>
+        </ConditionalScrollArea>
+        {match(textGenerationState)
+          .with("failed", () => (
+            <Alert
+              variant="light"
+              color="yellow"
+              title="Failed to generate response"
+              icon={<IconInfoCircle />}
+            >
+              Could not generate response. It's possible that your browser or
+              your system is out of memory.
+            </Alert>
+          ))
+          .otherwise(() => null)}
+      </Card.Section>
+    </Card>
+  );
+}

client/components/AiResponse/AiResponseSection.tsx

@@ -0,0 +1,92 @@
+import { usePubSub } from "create-pubsub/react";
+import { Suspense, lazy, useMemo } from "react";
+import { Pattern, match } from "ts-pattern";
+import {
+  modelLoadingProgressPubSub,
+  modelSizeInMegabytesPubSub,
+  queryPubSub,
+  responsePubSub,
+  settingsPubSub,
+  textGenerationStatePubSub,
+} from "../../modules/pubSub";
+
+const AiResponseContent = lazy(() => import("./AiResponseContent"));
+const PreparingContent = lazy(() => import("./PreparingContent"));
+const LoadingModelContent = lazy(() => import("./LoadingModelContent"));
+const ChatInterface = lazy(() => import("./ChatInterface"));
+const AiModelDownloadAllowanceContent = lazy(
+  () => import("./AiModelDownloadAllowanceContent"),
+);
+
+export default function AiResponseSection() {
+  const [query] = usePubSub(queryPubSub);
+  const [response] = usePubSub(responsePubSub);
+  const [textGenerationState, setTextGenerationState] = usePubSub(
+    textGenerationStatePubSub,
+  );
+  const [modelLoadingProgress] = usePubSub(modelLoadingProgressPubSub);
+  const [settings] = usePubSub(settingsPubSub);
+  const [modelSizeInMegabytes] = usePubSub(modelSizeInMegabytesPubSub);
+
+  return useMemo(
+    () =>
+      match([settings.enableAiResponse, textGenerationState])
+        .with([true, Pattern.not("idle").select()], (textGenerationState) =>
+          match(textGenerationState)
+            .with(
+              Pattern.union("generating", "interrupted", "completed", "failed"),
+              (textGenerationState) => (
+                <>
+                  <Suspense>
+                    <AiResponseContent
+                      textGenerationState={textGenerationState}
+                      response={response}
+                      setTextGenerationState={setTextGenerationState}
+                    />
+                  </Suspense>
+                  {textGenerationState === "completed" && (
+                    <Suspense>
+                      <ChatInterface
+                        initialQuery={query}
+                        initialResponse={response}
+                      />
+                    </Suspense>
+                  )}
+                </>
+              ),
+            )
+            .with("awaitingModelDownloadAllowance", () => (
+              <Suspense>
+                <AiModelDownloadAllowanceContent />
+              </Suspense>
+            ))
+            .with("loadingModel", () => (
+              <Suspense>
+                <LoadingModelContent
+                  modelLoadingProgress={modelLoadingProgress}
+                  modelSizeInMegabytes={modelSizeInMegabytes}
+                />
+              </Suspense>
+            ))
+            .with(
+              Pattern.union("awaitingSearchResults", "preparingToGenerate"),
+              (textGenerationState) => (
+                <Suspense>
+                  <PreparingContent textGenerationState={textGenerationState} />
+                </Suspense>
+              ),
+            )
+            .exhaustive(),
+        )
+        .otherwise(() => null),
+    [
+      settings,
+      textGenerationState,
+      setTextGenerationState,
+      modelLoadingProgress,
+      response,
+      query,
+      modelSizeInMegabytes,
+    ],
+  );
+}

client/components/AiResponse/ChatInterface.tsx

@@ -0,0 +1,195 @@
+import {
+  Button,
+  Card,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  Textarea,
+} from "@mantine/core";
+import { IconSend } from "@tabler/icons-react";
+import { usePubSub } from "create-pubsub/react";
+import type { ChatMessage } from "gpt-tokenizer/GptEncoding";
+import {
+  type KeyboardEvent,
+  Suspense,
+  lazy,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { match } from "ts-pattern";
+import { addLogEntry } from "../../modules/logEntries";
+import { settingsPubSub } from "../../modules/pubSub";
+import { generateChatResponse } from "../../modules/textGeneration";
+
+const FormattedMarkdown = lazy(() => import("./FormattedMarkdown"));
+const CopyIconButton = lazy(() => import("./CopyIconButton"));
+
+export default function ChatInterface({
+  initialQuery,
+  initialResponse,
+}: {
+  initialQuery: string;
+  initialResponse: string;
+}) {
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [input, setInput] = useState("");
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [streamedResponse, setStreamedResponse] = useState("");
+  const latestResponseRef = useRef("");
+  const [settings] = usePubSub(settingsPubSub);
+
+  useEffect(() => {
+    setMessages([
+      { role: "user", content: initialQuery },
+      { role: "assistant", content: initialResponse },
+    ]);
+  }, [initialQuery, initialResponse]);
+
+  const handleSend = async () => {
+    if (input.trim() === "" || isGenerating) return;
+
+    const newMessages: ChatMessage[] = [
+      ...messages,
+      { role: "user", content: input },
+    ];
+    setMessages(newMessages);
+    setInput("");
+    setIsGenerating(true);
+    setStreamedResponse("");
+    latestResponseRef.current = "";
+
+    try {
+      addLogEntry("User sent a follow-up question");
+      await generateChatResponse(newMessages, (partialResponse) => {
+        setStreamedResponse(partialResponse);
+        latestResponseRef.current = partialResponse;
+      });
+      setMessages((prevMessages) => [
+        ...prevMessages,
+        { role: "assistant", content: latestResponseRef.current },
+      ]);
+      addLogEntry("AI responded to follow-up question");
+    } catch (error) {
+      addLogEntry(`Error generating chat response: ${error}`);
+      setMessages((prevMessages) => [
+        ...prevMessages,
+        {
+          role: "assistant",
+          content: "Sorry, I encountered an error while generating a response.",
+        },
+      ]);
+    } finally {
+      setIsGenerating(false);
+      setStreamedResponse("");
+    }
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    match([event, settings.enterToSubmit])
+      .with([{ code: "Enter", shiftKey: false }, true], () => {
+        event.preventDefault();
+        handleSend();
+      })
+      .with([{ code: "Enter", shiftKey: true }, false], () => {
+        event.preventDefault();
+        handleSend();
+      })
+      .otherwise(() => undefined);
+  };
+
+  const getChatContent = () => {
+    return messages
+      .slice(2)
+      .map(
+        (msg, index) =>
+          `${index + 1}. ${msg.role?.toUpperCase()}\n\n${msg.content}`,
+      )
+      .join("\n\n");
+  };
+
+  return (
+    <Card withBorder shadow="sm" radius="md">
+      <Card.Section withBorder inheritPadding py="xs">
+        <Group justify="space-between">
+          <Text fw={500}>Follow-up questions</Text>
+          {messages.length > 2 && (
+            <Suspense>
+              <CopyIconButton
+                value={getChatContent()}
+                tooltipLabel="Copy conversation"
+              />
+            </Suspense>
+          )}
+        </Group>
+      </Card.Section>
+      <Stack gap="md" pt="md">
+        {messages.slice(2).length > 0 && (
+          <Stack gap="md">
+            {messages.slice(2).map((message, index) => (
+              <Paper
+                key={`${message.role}-${index}`}
+                shadow="xs"
+                radius="xl"
+                p="sm"
+                maw="90%"
+                style={{
+                  alignSelf:
+                    message.role === "user" ? "flex-end" : "flex-start",
+                }}
+              >
+                <Suspense>
+                  <FormattedMarkdown>{message.content}</FormattedMarkdown>
+                </Suspense>
+              </Paper>
+            ))}
+            {isGenerating && streamedResponse.length > 0 && (
+              <Paper
+                shadow="xs"
+                radius="xl"
+                p="sm"
+                maw="90%"
+                style={{ alignSelf: "flex-start" }}
+              >
+                <Suspense>
+                  <FormattedMarkdown>{streamedResponse}</FormattedMarkdown>
+                </Suspense>
+              </Paper>
+            )}
+          </Stack>
+        )}
+        <Group align="flex-end" style={{ position: "relative" }}>
+          <Textarea
+            placeholder="Anything else you would like to know?"
+            value={input}
+            onChange={(event) => setInput(event.currentTarget.value)}
+            onKeyDown={handleKeyDown}
+            autosize
+            minRows={1}
+            maxRows={4}
+            style={{ flexGrow: 1, paddingRight: "50px" }}
+            disabled={isGenerating}
+          />
+          <Button
+            size="sm"
+            variant="default"
+            onClick={handleSend}
+            loading={isGenerating}
+            style={{
+              height: "100%",
+              position: "absolute",
+              right: 0,
+              top: 0,
+              bottom: 0,
+              borderTopLeftRadius: 0,
+              borderBottomLeftRadius: 0,
+            }}
+          >
+            <IconSend size={16} />
+          </Button>
+        </Group>
+      </Stack>
+    </Card>
+  );
+}

client/components/AiResponse/CopyIconButton.tsx

@@ -0,0 +1,32 @@
+import { ActionIcon, CopyButton, Tooltip } from "@mantine/core";
+import { IconCheck, IconCopy } from "@tabler/icons-react";
+
+interface CopyIconButtonProps {
+  value: string;
+  tooltipLabel?: string;
+}
+
+export default function CopyIconButton({
+  value,
+  tooltipLabel = "Copy",
+}: CopyIconButtonProps) {
+  return (
+    <CopyButton value={value} timeout={2000}>
+      {({ copied, copy }) => (
+        <Tooltip
+          label={copied ? "Copied" : tooltipLabel}
+          withArrow
+          position="right"
+        >
+          <ActionIcon
+            color={copied ? "teal" : "gray"}
+            variant="subtle"
+            onClick={copy}
+          >
+            {copied ? <IconCheck size={16} /> : <IconCopy size={16} />}
+          </ActionIcon>
+        </Tooltip>
+      )}
+    </CopyButton>
+  );
+}

client/components/AiResponse/FormattedMarkdown.tsx

@@ -0,0 +1,38 @@
+import { TypographyStylesProvider } from "@mantine/core";
+import Markdown from "react-markdown";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import syntaxHighlighterStyle from "react-syntax-highlighter/dist/esm/styles/prism/one-dark";
+
+const FormattedMarkdown = ({ children }: { children: string }) => {
+  return (
+    <TypographyStylesProvider p="md">
+      <Markdown
+        components={{
+          code(props) {
+            const { children, className, node, ref, ...rest } = props;
+            void node;
+            const languageMatch = /language-(\w+)/.exec(className || "");
+            return languageMatch ? (
+              <SyntaxHighlighter
+                {...rest}
+                ref={ref as never}
+                language={languageMatch[1]}
+                style={syntaxHighlighterStyle}
+              >
+                {children?.toString().replace(/\n$/, "") ?? ""}
+              </SyntaxHighlighter>
+            ) : (
+              <code {...rest} className={className}>
+                {children}
+              </code>
+            );
+          },
+        }}
+      >
+        {children}
+      </Markdown>
+    </TypographyStylesProvider>
+  );
+};
+
+export default FormattedMarkdown;

client/components/AiResponse/LoadingModelContent.tsx

@@ -0,0 +1,40 @@
+import { Card, Group, Progress, Stack, Text } from "@mantine/core";
+
+export default function LoadingModelContent({
+  modelLoadingProgress,
+  modelSizeInMegabytes,
+}: {
+  modelLoadingProgress: number;
+  modelSizeInMegabytes: number;
+}) {
+  const isLoadingStarting = modelLoadingProgress === 0;
+  const isLoadingComplete = modelLoadingProgress === 100;
+  const percent =
+    isLoadingComplete || isLoadingStarting ? 100 : modelLoadingProgress;
+  const strokeColor = percent === 100 ? "#52c41a" : "#3385ff";
+  const downloadedSize = (modelSizeInMegabytes * modelLoadingProgress) / 100;
+  const sizeText = `${downloadedSize.toFixed(0)} MB / ${modelSizeInMegabytes.toFixed(0)} MB`;
+
+  return (
+    <Card withBorder shadow="sm" radius="md">
+      <Card.Section withBorder inheritPadding py="xs">
+        <Text fw={500}>Loading AI...</Text>
+      </Card.Section>
+      <Card.Section withBorder inheritPadding py="md">
+        <Stack gap="xs">
+          <Progress color={strokeColor} value={percent} animated />
+          {!isLoadingStarting && (
+            <Group justify="space-between">
+              <Text size="sm" c="dimmed">
+                {sizeText}
+              </Text>
+              <Text size="sm" c="dimmed">
+                {percent.toFixed(1)}%
+              </Text>
+            </Group>
+          )}
+        </Stack>
+      </Card.Section>
+    </Card>
+  );
+}

client/components/AiResponse/PreparingContent.tsx

@@ -0,0 +1,29 @@
+import { Card, Skeleton, Stack, Text } from "@mantine/core";
+import { match } from "ts-pattern";
+
+export default function PreparingContent({
+  textGenerationState,
+}: {
+  textGenerationState: string;
+}) {
+  return (
+    <Card withBorder shadow="sm" radius="md">
+      <Card.Section withBorder inheritPadding py="xs">
+        <Text fw={500}>
+          {match(textGenerationState)
+            .with("awaitingSearchResults", () => "Awaiting search results...")
+            .with("preparingToGenerate", () => "Preparing AI response...")
+            .otherwise(() => null)}
+        </Text>
+      </Card.Section>
+      <Card.Section withBorder inheritPadding py="md">
+        <Stack>
+          <Skeleton height={8} radius="xl" />
+          <Skeleton height={8} width="70%" radius="xl" />
+          <Skeleton height={8} radius="xl" />
+          <Skeleton height={8} width="43%" radius="xl" />
+        </Stack>
+      </Card.Section>
+    </Card>
+  );
+}

client/components/AiResponse/WebLlmModelSelect.tsx

@@ -0,0 +1,81 @@
+import { type ComboboxItem, Select } from "@mantine/core";
+import { prebuiltAppConfig } from "@mlc-ai/web-llm";
+import { useCallback, useEffect, useState } from "react";
+import { isF16Supported } from "../../modules/webGpu";
+
+export default function WebLlmModelSelect({
+  value,
+  onChange,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+}) {
+  const [webGpuModels] = useState<ComboboxItem[]>(() => {
+    const models = prebuiltAppConfig.model_list
+      .filter((model) => {
+        const isSmall = isSmallModel(model);
+        const suffix = getModelSuffix(isF16Supported, isSmall);
+        return model.model_id.endsWith(suffix);
+      })
+      .sort((a, b) => (a.vram_required_MB ?? 0) - (b.vram_required_MB ?? 0))
+      .map((model) => {
+        const modelSizeInMegabytes =
+          Math.round(model.vram_required_MB ?? 0) || "N/A";
+        const isSmall = isSmallModel(model);
+        const suffix = getModelSuffix(isF16Supported, isSmall);
+        const modelName = model.model_id.replace(suffix, "");
+
+        return {
+          label: `${modelSizeInMegabytes} MB • ${modelName}`,
+          value: model.model_id,
+        };
+      });
+
+    return models;
+  });
+
+  useEffect(() => {
+    const isCurrentModelValid = webGpuModels.some(
+      (model) => model.value === value,
+    );
+
+    if (!isCurrentModelValid && webGpuModels.length > 0) {
+      onChange(webGpuModels[0].value);
+    }
+  }, [onChange, webGpuModels, value]);
+
+  const handleChange = useCallback(
+    (value: string | null) => {
+      if (value) onChange(value);
+    },
+    [onChange],
+  );
+
+  return (
+    <Select
+      value={value}
+      onChange={handleChange}
+      label="AI Model"
+      description="Select the model to use for AI responses."
+      data={webGpuModels}
+      allowDeselect={false}
+      searchable
+    />
+  );
+}
+
+type ModelConfig = (typeof prebuiltAppConfig.model_list)[number];
+
+const smallModels = ["SmolLM2-135M", "SmolLM2-360M"] as const;
+
+function isSmallModel(model: ModelConfig) {
+  return smallModels.some((smallModel) =>
+    model.model_id.startsWith(smallModel),
+  );
+}
+
+function getModelSuffix(isF16: boolean, isSmall: boolean) {
+  if (isSmall) return isF16 ? "-q0f16-MLC" : "-q0f32-MLC";
+
+  return isF16 ? "-q4f16_1-MLC" : "-q4f32_1-MLC";
+}

client/components/AiResponse/WllamaModelSelect.tsx

@@ -0,0 +1,42 @@
+import { type ComboboxItem, Select } from "@mantine/core";
+import { useEffect, useState } from "react";
+import { wllamaModels } from "../../modules/wllama";
+
+export default function WllamaModelSelect({
+  value,
+  onChange,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+}) {
+  const [wllamaModelOptions] = useState<ComboboxItem[]>(
+    Object.entries(wllamaModels)
+      .sort(([, a], [, b]) => a.fileSizeInMegabytes - b.fileSizeInMegabytes)
+      .map(([value, { label, fileSizeInMegabytes }]) => ({
+        label: `${fileSizeInMegabytes} MB • ${label}`,
+        value,
+      })),
+  );
+
+  useEffect(() => {
+    const isCurrentModelValid = wllamaModelOptions.some(
+      (model) => model.value === value,
+    );
+
+    if (!isCurrentModelValid && wllamaModelOptions.length > 0) {
+      onChange(wllamaModelOptions[0].value);
+    }
+  }, [onChange, wllamaModelOptions, value]);
+
+  return (
+    <Select
+      value={value}
+      onChange={(value) => value && onChange(value)}
+      label="AI Model"
+      description="Select the model to use for AI responses."
+      data={wllamaModelOptions}
+      allowDeselect={false}
+      searchable
+    />
+  );
+}

client/components/App/App.tsx

@@ -0,0 +1,97 @@
+import { MantineProvider } from "@mantine/core";
+import { Route, Switch } from "wouter";
+import "@mantine/core/styles.css";
+import { Notifications } from "@mantine/notifications";
+import { usePubSub } from "create-pubsub/react";
+import { lazy, useEffect, useState } from "react";
+import { addLogEntry } from "../../modules/logEntries";
+import { settingsPubSub } from "../../modules/pubSub";
+import { defaultSettings } from "../../modules/settings";
+import "@mantine/notifications/styles.css";
+import { match } from "ts-pattern";
+import { verifyStoredAccessKey } from "../../modules/accessKey";
+
+const MainPage = lazy(() => import("../Pages/Main/MainPage"));
+const AccessPage = lazy(() => import("../Pages/AccessPage"));
+
+export function App() {
+  useInitializeSettings();
+  const { hasValidatedAccessKey, isCheckingStoredKey, setValidatedAccessKey } =
+    useAccessKeyValidation();
+
+  return match(isCheckingStoredKey)
+    .with(false, () => (
+      <MantineProvider defaultColorScheme="dark">
+        <Notifications />
+        <Switch>
+          <Route path="/">
+            {match([VITE_ACCESS_KEYS_ENABLED, hasValidatedAccessKey])
+              .with([true, false], () => (
+                <AccessPage
+                  onAccessKeyValid={() => setValidatedAccessKey(true)}
+                />
+              ))
+              .otherwise(() => (
+                <MainPage />
+              ))}
+          </Route>
+        </Switch>
+      </MantineProvider>
+    ))
+    .otherwise(() => null);
+}
+
+/**
+ * A custom React hook that initializes the application settings.
+ *
+ * @returns The initialized settings object.
+ *
+ * @remarks
+ * This hook uses the `usePubSub` hook to access and update the settings state.
+ * It initializes the settings by merging the default settings with any existing settings.
+ * The initialization is performed once when the component mounts.
+ */
+function useInitializeSettings() {
+  const [settings, setSettings] = usePubSub(settingsPubSub);
+  const [settingsInitialized, setSettingsInitialized] = useState(false);
+
+  useEffect(() => {
+    if (settingsInitialized) return;
+
+    setSettings({ ...defaultSettings, ...settings });
+
+    setSettingsInitialized(true);
+
+    addLogEntry("Settings initialized");
+  }, [settings, setSettings, settingsInitialized]);
+
+  return settings;
+}
+
+/**
+ * A custom React hook that validates the stored access key on mount.
+ *
+ * @returns An object containing the validation state and loading state
+ */
+function useAccessKeyValidation() {
+  const [hasValidatedAccessKey, setValidatedAccessKey] = useState(false);
+  const [isCheckingStoredKey, setCheckingStoredKey] = useState(true);
+
+  useEffect(() => {
+    async function checkStoredAccessKey() {
+      if (VITE_ACCESS_KEYS_ENABLED) {
+        const isValid = await verifyStoredAccessKey();
+        if (isValid) setValidatedAccessKey(true);
+      }
+      setCheckingStoredKey(false);
+    }
+
+    checkStoredAccessKey();
+  }, []);
+
+  return {
+    hasValidatedAccessKey,
+    isCheckingStoredKey,
+    setValidatedAccessKey,
+  };
+}

client/components/Logs/LogsModal.tsx

@@ -0,0 +1,101 @@
+import {
+  Alert,
+  Button,
+  Center,
+  Group,
+  Modal,
+  Pagination,
+  Table,
+} from "@mantine/core";
+import { IconInfoCircle } from "@tabler/icons-react";
+import { usePubSub } from "create-pubsub/react";
+import { useCallback, useMemo, useState } from "react";
+import { logEntriesPubSub } from "../../modules/logEntries";
+
+export default function LogsModal({
+  opened,
+  onClose,
+}: {
+  opened: boolean;
+  onClose: () => void;
+}) {
+  const [logEntries] = usePubSub(logEntriesPubSub);
+
+  const [page, setPage] = useState(1);
+
+  const logEntriesPerPage = 5;
+
+  const logEntriesFromCurrentPage = useMemo(
+    () =>
+      logEntries.slice(
+        (page - 1) * logEntriesPerPage,
+        page * logEntriesPerPage,
+      ),
+    [logEntries, page],
+  );
+
+  const downloadLogsAsJson = useCallback(() => {
+    const jsonString = JSON.stringify(logEntries, null, 2);
+    const blob = new Blob([jsonString], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = "logs.json";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  }, [logEntries]);
+
+  return (
+    <Modal opened={opened} onClose={onClose} size="xl" title="Logs">
+      <Alert variant="light" color="blue" icon={<IconInfoCircle />} mb="md">
+        <Group justify="space-between" align="center">
+          <span>
+            This information is stored solely in your browser for personal use.
+            It isn't sent automatically and is retained for debugging purposes
+            should you need to{" "}
+            <a
+              href="https://github.com/felladrin/MiniSearch/issues/new?labels=bug&template=bug_report.yml"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              report a bug
+            </a>
+            .
+          </span>
+          <Button onClick={downloadLogsAsJson} size="xs" data-autofocus>
+            Download Logs
+          </Button>
+        </Group>
+      </Alert>
+      <Table striped highlightOnHover withTableBorder>
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th>Time</Table.Th>
+            <Table.Th>Message</Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          {logEntriesFromCurrentPage.map((entry, index) => (
+            <Table.Tr key={`${entry.timestamp}-${index}`}>
+              <Table.Td>
+                {new Date(entry.timestamp).toLocaleTimeString()}
+              </Table.Td>
+              <Table.Td>{entry.message}</Table.Td>
+            </Table.Tr>
+          ))}
+        </Table.Tbody>
+      </Table>
+      <Center>
+        <Pagination
+          total={Math.ceil(logEntries.length / logEntriesPerPage)}
+          value={page}
+          onChange={setPage}
+          size="sm"
+          mt="md"
+        />
+      </Center>
+    </Modal>
+  );
+}

client/components/Logs/ShowLogsButton.tsx

@@ -0,0 +1,42 @@
+import { Button, Center, Loader, Stack, Text } from "@mantine/core";
+import { Suspense, lazy, useState } from "react";
+import { addLogEntry } from "../../modules/logEntries";
+
+const LogsModal = lazy(() => import("./LogsModal"));
+
+export default function ShowLogsButton() {
+  const [isLogsModalOpen, setLogsModalOpen] = useState(false);
+
+  const handleShowLogsButtonClick = () => {
+    addLogEntry("User opened the logs modal");
+    setLogsModalOpen(true);
+  };
+
+  const handleCloseLogsButtonClick = () => {
+    addLogEntry("User closed the logs modal");
+    setLogsModalOpen(false);
+  };
+
+  return (
+    <Stack gap="xs">
+      <Suspense
+        fallback={
+          <Center>
+            <Loader color="gray" type="bars" />
+          </Center>
+        }
+      >
+        <Button size="sm" onClick={handleShowLogsButtonClick} variant="default">
+          Show logs
+        </Button>
+        <Text size="xs" c="dimmed">
+          View session logs for debugging.
+        </Text>
+        <LogsModal
+          opened={isLogsModalOpen}
+          onClose={handleCloseLogsButtonClick}
+        />
+      </Suspense>
+    </Stack>
+  );
+}

client/components/Pages/AccessPage.tsx

@@ -0,0 +1,61 @@
+import { Button, Container, Stack, TextInput, Title } from "@mantine/core";
+import { type FormEvent, useState } from "react";
+import { validateAccessKey } from "../../modules/accessKey";
+import { addLogEntry } from "../../modules/logEntries";
+
+export default function AccessPage({
+  onAccessKeyValid,
+}: {
+  onAccessKeyValid: () => void;
+}) {
+  const [accessKey, setAccessKey] = useState("");
+  const [error, setError] = useState("");
+
+  const handleSubmit = async (formEvent: FormEvent<HTMLFormElement>) => {
+    formEvent.preventDefault();
+    setError("");
+    try {
+      const isValid = await validateAccessKey(accessKey);
+      if (isValid) {
+        addLogEntry("Valid access key entered");
+        onAccessKeyValid();
+      } else {
+        setError("Invalid access key");
+        addLogEntry("Invalid access key attempt");
+      }
+    } catch (error) {
+      setError("Error validating access key");
+      addLogEntry(`Error validating access key: ${error}`);
+    }
+  };
+
+  return (
+    <Container size="xs">
+      <Stack p="lg" mih="100vh" justify="center">
+        <Title order={2} ta="center">
+          Access Restricted
+        </Title>
+        <form onSubmit={handleSubmit}>
+          <Stack gap="xs">
+            <TextInput
+              value={accessKey}
+              onChange={({ target }) => setAccessKey(target.value)}
+              placeholder="Enter your access key to continue"
+              required
+              autoFocus
+              error={error}
+              styles={{
+                input: {
+                  textAlign: "center",
+                },
+              }}
+            />
+            <Button size="xs" type="submit">
+              Submit
+            </Button>
+          </Stack>
+        </form>
+      </Stack>
+    </Container>
+  );
+}

client/components/Pages/Main/MainPage.tsx

@@ -0,0 +1,65 @@
+import { Center, Container, Loader, Stack } from "@mantine/core";
+import { usePubSub } from "create-pubsub/react";
+import { Suspense } from "react";
+import { lazy } from "react";
+import { Pattern, match } from "ts-pattern";
+import {
+  queryPubSub,
+  searchStatePubSub,
+  textGenerationStatePubSub,
+} from "../../../modules/pubSub";
+
+const AiResponseSection = lazy(
+  () => import("../../AiResponse/AiResponseSection"),
+);
+const SearchResultsSection = lazy(
+  () => import("../../Search/Results/SearchResultsSection"),
+);
+const MenuButton = lazy(() => import("./Menu/MenuButton"));
+const SearchForm = lazy(() => import("../../Search/Form/SearchForm"));
+
+export default function MainPage() {
+  const [query, updateQuery] = usePubSub(queryPubSub);
+  const [searchState] = usePubSub(searchStatePubSub);
+  const [textGenerationState] = usePubSub(textGenerationStatePubSub);
+
+  return (
+    <Container>
+      <Stack
+        py="md"
+        mih="100vh"
+        justify={match(query)
+          .with(Pattern.string.length(0), () => "center")
+          .otherwise(() => undefined)}
+      >
+        <Suspense
+          fallback={
+            <Center>
+              <Loader type="bars" />
+            </Center>
+          }
+        >
+          <SearchForm
+            query={query}
+            updateQuery={updateQuery}
+            additionalButtons={<MenuButton />}
+          />
+        </Suspense>
+        {match(textGenerationState)
+          .with(Pattern.not("idle"), () => (
+            <Suspense>
+              <AiResponseSection />
+            </Suspense>
+          ))
+          .otherwise(() => null)}
+        {match(searchState)
+          .with(Pattern.not("idle"), () => (
+            <Suspense>
+              <SearchResultsSection />
+            </Suspense>
+          ))
+          .otherwise(() => null)}
+      </Stack>
+    </Container>
+  );
+}

client/components/Pages/Main/Menu/AISettingsForm.tsx

@@ -0,0 +1,366 @@
+import {
+  Group,
+  NumberInput,
+  Select,
+  Skeleton,
+  Slider,
+  Stack,
+  Switch,
+  Text,
+  TextInput,
+  Textarea,
+} from "@mantine/core";
+import { useForm } from "@mantine/form";
+import { IconInfoCircle } from "@tabler/icons-react";
+import { usePubSub } from "create-pubsub/react";
+import { Suspense, lazy, useEffect, useState } from "react";
+import { Pattern, match } from "ts-pattern";
+import { addLogEntry } from "../../../../modules/logEntries";
+import { getOpenAiClient } from "../../../../modules/openai";
+import { settingsPubSub } from "../../../../modules/pubSub";
+import { defaultSettings, inferenceTypes } from "../../../../modules/settings";
+import { isWebGPUAvailable } from "../../../../modules/webGpu";
+
+const WebLlmModelSelect = lazy(
+  () => import("../../../AiResponse/WebLlmModelSelect"),
+);
+const WllamaModelSelect = lazy(
+  () => import("../../../AiResponse/WllamaModelSelect"),
+);
+
+export default function AISettingsForm() {
+  const [settings, setSettings] = usePubSub(settingsPubSub);
+  const [openAiModels, setOpenAiModels] = useState<
+    {
+      label: string;
+      value: string;
+    }[]
+  >([]);
+  const [openAiApiModelError, setOpenAiApiModelError] = useState<
+    string | undefined
+  >(undefined);
+
+  const form = useForm({
+    initialValues: settings,
+    onValuesChange: setSettings,
+  });
+
+  useEffect(() => {
+    async function fetchOpenAiModels() {
+      try {
+        const openai = getOpenAiClient({
+          baseURL: settings.openAiApiBaseUrl,
+          apiKey: settings.openAiApiKey,
+        });
+        const response = await openai.models.list();
+        const models = response.data.map((model) => ({
+          label: model.id,
+          value: model.id,
+        }));
+        setOpenAiModels(models);
+        setOpenAiApiModelError(undefined);
+      } catch (error) {
+        const errorMessage =
+          error instanceof Error ? error.message : String(error);
+        addLogEntry(`Error fetching OpenAI models: ${errorMessage}`);
+        setOpenAiModels([]);
+        setOpenAiApiModelError(errorMessage);
+      }
+    }
+
+    if (settings.inferenceType === "openai" && settings.openAiApiBaseUrl) {
+      fetchOpenAiModels();
+    }
+  }, [
+    settings.inferenceType,
+    settings.openAiApiBaseUrl,
+    settings.openAiApiKey,
+  ]);
+
+  useEffect(() => {
+    if (openAiApiModelError === form.errors.openAiApiModel) return;
+
+    form.setFieldError("openAiApiModel", openAiApiModelError);
+  }, [openAiApiModelError, form.setFieldError, form.errors.openAiApiModel]);
+
+  useEffect(() => {
+    if (openAiModels.length > 0) {
+      const hasNoModelSelected = !form.values.openAiApiModel;
+      const isModelInvalid = !openAiModels.find(
+        (model) => model.value === form.values.openAiApiModel,
+      );
+
+      if (hasNoModelSelected || isModelInvalid) {
+        form.setFieldValue("openAiApiModel", openAiModels[0].value);
+      }
+    }
+  }, [openAiModels, form.setFieldValue, form.values.openAiApiModel]);
+
+  const isUsingCustomInstructions =
+    form.values.systemPrompt !== defaultSettings.systemPrompt;
+
+  const handleRestoreDefaultInstructions = () => {
+    form.setFieldValue("systemPrompt", defaultSettings.systemPrompt);
+  };
+
+  const suggestedCpuThreads =
+    (navigator.hardwareConcurrency &&
+      Math.max(
+        defaultSettings.cpuThreads,
+        navigator.hardwareConcurrency - 2,
+      )) ??
+    defaultSettings.cpuThreads;
+
+  return (
+    <Stack gap="md">
+      <Switch
+        label="AI Response"
+        {...form.getInputProps("enableAiResponse", {
+          type: "checkbox",
+        })}
+        labelPosition="left"
+        description="Enable or disable AI-generated responses to your queries. When disabled, you'll only see web search results."
+      />
+
+      {form.values.enableAiResponse && (
+        <>
+          <Stack gap="xs" mb="md">
+            <Text size="sm">Search results to consider</Text>
+            <Text size="xs" c="dimmed">
+              Determines the number of search results to consider when
+              generating AI responses. A higher value may enhance accuracy, but
+              it will also increase response time.
+            </Text>
+            <Slider
+              {...form.getInputProps("searchResultsToConsider")}
+              min={0}
+              max={6}
+              marks={Array.from({ length: 7 }, (_, index) => ({
+                value: index,
+                label: index.toString(),
+              }))}
+            />
+          </Stack>
+
+          <Select
+            {...form.getInputProps("inferenceType")}
+            label="AI Processing Location"
+            data={inferenceTypes}
+            allowDeselect={false}
+          />
+
+          {form.values.inferenceType === "openai" && (
+            <>
+              <TextInput
+                {...form.getInputProps("openAiApiBaseUrl")}
+                label="API Base URL"
+                placeholder="http://localhost:11434/v1"
+                required
+              />
+              <Group gap="xs">
+                <IconInfoCircle size={16} />
+                <Text size="xs" c="dimmed" flex={1}>
+                  You may need to add{" "}
+                  <em>
+                    {`${self.location.protocol}//${self.location.hostname}`}
+                  </em>{" "}
+                  to the list of allowed network origins in your API server
+                  settings.
+                </Text>
+              </Group>
+              <TextInput
+                {...form.getInputProps("openAiApiKey")}
+                label="API Key"
+                type="password"
+                description="Optional, as local API servers usually do not require it."
+              />
+              <Select
+                {...form.getInputProps("openAiApiModel")}
+                label="API Model"
+                data={openAiModels}
+                description="Optional, as some API servers don't provide a model list."
+                allowDeselect={false}
+                disabled={openAiModels.length === 0}
+                searchable
+              />
+            </>
+          )}
+
+          {form.values.inferenceType === "browser" && (
+            <>
+              {isWebGPUAvailable && (
+                <Switch
+                  label="WebGPU"
+                  {...form.getInputProps("enableWebGpu", {
+                    type: "checkbox",
+                  })}
+                  labelPosition="left"
+                  description="Enable or disable WebGPU usage. When disabled, the app will use the CPU instead."
+                />
+              )}
+
+              {match([isWebGPUAvailable, form.values.enableWebGpu])
+                .with([true, true], () => (
+                  <Suspense fallback={<Skeleton height={50} />}>
+                    <WebLlmModelSelect
+                      value={form.values.webLlmModelId}
+                      onChange={(value) =>
+                        form.setFieldValue("webLlmModelId", value)
+                      }
+                    />
+                  </Suspense>
+                ))
+                .with([false, Pattern.any], [Pattern.any, false], () => (
+                  <>
+                    <Suspense fallback={<Skeleton height={50} />}>
+                      <WllamaModelSelect
+                        value={form.values.wllamaModelId}
+                        onChange={(value) =>
+                          form.setFieldValue("wllamaModelId", value)
+                        }
+                      />
+                    </Suspense>
+                    <NumberInput
+                      label="CPU threads to use"
+                      description={
+                        <>
+                          <span>
+                            Number of threads to use for the AI model. Lower
+                            values will use less CPU but may take longer to
+                            respond. A value that is too high may cause the app
+                            to hang.
+                          </span>
+                          {suggestedCpuThreads > defaultSettings.cpuThreads && (
+                            <span>
+                              {" "}
+                              The default value is{" "}
+                              <Text
+                                component="span"
+                                size="xs"
+                                c="blue"
+                                style={{ cursor: "pointer" }}
+                                onClick={() =>
+                                  form.setFieldValue(
+                                    "cpuThreads",
+                                    defaultSettings.cpuThreads,
+                                  )
+                                }
+                              >
+                                {defaultSettings.cpuThreads}
+                              </Text>
+                              , but based on the number of logical processors in
+                              your CPU, the suggested value is{" "}
+                              <Text
+                                component="span"
+                                size="xs"
+                                c="blue"
+                                style={{ cursor: "pointer" }}
+                                onClick={() =>
+                                  form.setFieldValue(
+                                    "cpuThreads",
+                                    suggestedCpuThreads,
+                                  )
+                                }
+                              >
+                                {suggestedCpuThreads}
+                              </Text>
+                              .
+                            </span>
+                          )}
+                        </>
+                      }
+                      min={1}
+                      {...form.getInputProps("cpuThreads")}
+                    />
+                  </>
+                ))
+                .otherwise(() => null)}
+            </>
+          )}
+
+          <Textarea
+            label="Instructions for AI"
+            descriptionProps={{ component: "div" }}
+            description={
+              <>
+                <span>
+                  Customize instructions for the AI to tailor its responses.
+                </span>
+                <br />
+                <span>For example:</span>
+                <ul>
+                  <li>
+                    Specify preferences
+                    <ul>
+                      <li>
+                        <em>"use simple language"</em>
+                      </li>
+                      <li>
+                        <em>"provide step-by-step explanations"</em>
+                      </li>
+                    </ul>
+                  </li>
+                  <li>
+                    Set a response style
+                    <ul>
+                      <li>
+                        <em>"answer in a friendly tone"</em>
+                      </li>
+                      <li>
+                        <em>"write your response in Spanish"</em>
+                      </li>
+                    </ul>
+                  </li>
+                  <li>
+                    Provide context about the audience
+                    <ul>
+                      <li>
+                        <em>"you're talking to a high school student"</em>
+                      </li>
+                      <li>
+                        <em>
+                          "consider that your audience is composed of
+                          professionals in the field of graphic design"
+                        </em>
+                      </li>
+                    </ul>
+                  </li>
+                </ul>
+                <span>
+                  The special tag <em>{"{{searchResults}}"}</em> will be
+                  replaced with the search results, while{" "}
+                  <em>{"{{dateTime}}"}</em> will be replaced with the current
+                  date and time.
+                </span>
+                {isUsingCustomInstructions && (
+                  <>
+                    <br />
+                    <br />
+                    <span>
+                      Currently, you're using custom instructions. If you ever
+                      need to restore the default instructions, you can do so by
+                      clicking
+                    </span>{" "}
+                    <Text
+                      component="span"
+                      size="xs"
+                      c="blue"
+                      style={{ cursor: "pointer" }}
+                      onClick={handleRestoreDefaultInstructions}
+                    >
+                      here
+                    </Text>
+                    <span>.</span>
+                  </>
+                )}
+              </>
+            }
+            autosize
+            maxRows={10}
+            {...form.getInputProps("systemPrompt")}
+          />
+        </>
+      )}
+    </Stack>
+  );
+}

client/components/Pages/Main/Menu/ActionsForm.tsx

@@ -0,0 +1,18 @@
+import { Stack } from "@mantine/core";
+import { Suspense, lazy } from "react";
+
+const ClearDataButton = lazy(() => import("./ClearDataButton"));
+const ShowLogsButton = lazy(() => import("../../../Logs/ShowLogsButton"));
+
+export default function ActionsForm() {
+  return (
+    <Stack gap="lg">
+      <Suspense>
+        <ClearDataButton />
+      </Suspense>
+      <Suspense>
+        <ShowLogsButton />
+      </Suspense>
+    </Stack>
+  );
+}

client/components/Pages/Main/Menu/ClearDataButton.tsx

@@ -0,0 +1,59 @@
+import { Button, Stack, Text } from "@mantine/core";
+import { useState } from "react";
+import { useLocation } from "wouter";
+import { addLogEntry } from "../../../../modules/logEntries";
+
+export default function ClearDataButton() {
+  const [isClearingData, setIsClearingData] = useState(false);
+  const [hasClearedData, setHasClearedData] = useState(false);
+  const [, navigate] = useLocation();
+
+  const handleClearDataButtonClick = async () => {
+    const sureToDelete = self.confirm(
+      "Are you sure you want to reset the settings and delete all files in cache?",
+    );
+
+    if (!sureToDelete) return;
+
+    addLogEntry("User initiated data clearing");
+
+    setIsClearingData(true);
+
+    self.localStorage.clear();
+
+    for (const cacheName of await self.caches.keys()) {
+      await self.caches.delete(cacheName);
+    }
+
+    for (const databaseInfo of await self.indexedDB.databases()) {
+      if (databaseInfo.name) self.indexedDB.deleteDatabase(databaseInfo.name);
+    }
+
+    setIsClearingData(false);
+
+    setHasClearedData(true);
+
+    addLogEntry("All data cleared successfully");
+
+    navigate("/", { replace: true });
+
+    self.location.reload();
+  };
+
+  return (
+    <Stack gap="xs">
+      <Button
+        onClick={handleClearDataButtonClick}
+        variant="default"
+        loading={isClearingData}
+        loaderProps={{ type: "bars" }}
+        disabled={hasClearedData}
+      >
+        {hasClearedData ? "Data cleared" : "Clear all data"}
+      </Button>
+      <Text size="xs" c="dimmed">
+        Reset settings and delete all files in cache to free up space.
+      </Text>
+    </Stack>
+  );
+}

client/components/Pages/Main/Menu/InterfaceSettingsForm.tsx

@@ -0,0 +1,45 @@
+import {
+  Stack,
+  Switch,
+  useComputedColorScheme,
+  useMantineColorScheme,
+} from "@mantine/core";
+import { useForm } from "@mantine/form";
+import { usePubSub } from "create-pubsub/react";
+import { settingsPubSub } from "../../../../modules/pubSub";
+
+export default function InterfaceSettingsForm() {
+  const [settings, setSettings] = usePubSub(settingsPubSub);
+  const form = useForm({
+    initialValues: settings,
+    onValuesChange: setSettings,
+  });
+  const { setColorScheme } = useMantineColorScheme();
+  const computedColorScheme = useComputedColorScheme("light");
+
+  const toggleColorScheme = () => {
+    setColorScheme(computedColorScheme === "dark" ? "light" : "dark");
+  };
+
+  return (
+    <Stack gap="md">
+      <Switch
+        label="Dark Mode"
+        checked={computedColorScheme === "dark"}
+        onChange={toggleColorScheme}
+        labelPosition="left"
+        description="Enable or disable the dark color scheme."
+        styles={{ labelWrapper: { width: "100%" } }}
+      />
+
+      <Switch
+        {...form.getInputProps("enterToSubmit", {
+          type: "checkbox",
+        })}
+        label="Enter to Submit"
+        labelPosition="left"
+        description="Enable or disable using Enter key to submit the search query. When disabled, you'll need to click the Search button or use Shift+Enter to submit."
+      />
+    </Stack>
+  );
+}

client/components/Pages/Main/Menu/MenuButton.tsx

@@ -0,0 +1,53 @@
+import { Button } from "@mantine/core";
+import { Suspense, lazy, useCallback, useEffect, useState } from "react";
+import { addLogEntry } from "../../../../modules/logEntries";
+
+const MenuDrawer = lazy(() => import("./MenuDrawer"));
+
+export default function MenuButton() {
+  const [isDrawerOpen, setDrawerOpen] = useState(false);
+  const [isDrawerLoaded, setDrawerLoaded] = useState(false);
+
+  const openDrawer = useCallback(() => {
+    setDrawerOpen(true);
+    addLogEntry("User opened the menu");
+  }, []);
+
+  const closeDrawer = useCallback(() => {
+    setDrawerOpen(false);
+    addLogEntry("User closed the menu");
+  }, []);
+
+  const handleDrawerLoad = useCallback(() => {
+    if (!isDrawerLoaded) {
+      addLogEntry("Menu drawer loaded");
+      setDrawerLoaded(true);
+    }
+  }, [isDrawerLoaded]);
+
+  return (
+    <>
+      <Button
+        size="xs"
+        onClick={openDrawer}
+        variant="default"
+        loading={isDrawerOpen && !isDrawerLoaded}
+      >
+        Menu
+      </Button>
+      {(isDrawerOpen || isDrawerLoaded) && (
+        <Suspense fallback={<SuspenseListener onUnload={handleDrawerLoad} />}>
+          <MenuDrawer onClose={closeDrawer} opened={isDrawerOpen} />
+        </Suspense>
+      )}
+    </>
+  );
+}
+
+function SuspenseListener({ onUnload }: { onUnload: () => void }) {
+  useEffect(() => {
+    return () => onUnload();
+  }, [onUnload]);
+
+  return null;
+}

client/components/Pages/Main/Menu/MenuDrawer.tsx

@@ -0,0 +1,111 @@
+import {
+  Accordion,
+  ActionIcon,
+  Center,
+  Drawer,
+  type DrawerProps,
+  FocusTrap,
+  Group,
+  HoverCard,
+  Stack,
+} from "@mantine/core";
+import { IconBrandGithub } from "@tabler/icons-react";
+import prettyMilliseconds from "pretty-ms";
+import { Suspense, lazy } from "react";
+import { repository } from "../../../../../package.json";
+import { addLogEntry } from "../../../../modules/logEntries";
+import { getSemanticVersion } from "../../../../modules/stringFormatters";
+
+const AISettingsForm = lazy(() => import("./AISettingsForm"));
+const SearchSettingsForm = lazy(() => import("./SearchSettingsForm"));
+const InterfaceSettingsForm = lazy(() => import("./InterfaceSettingsForm"));
+const ActionsForm = lazy(() => import("./ActionsForm"));
+
+export default function MenuDrawer(drawerProps: DrawerProps) {
+  const repoName = repository.url.split("/").pop();
+
+  return (
+    <Drawer
+      {...drawerProps}
+      position="right"
+      size="md"
+      title={
+        <Group gap="xs">
+          <ActionIcon
+            variant="subtle"
+            component="a"
+            color="var(--mantine-color-text)"
+            href={repository.url}
+            target="_blank"
+            onClick={() => addLogEntry("User clicked the GitHub link")}
+          >
+            <IconBrandGithub size={16} />
+          </ActionIcon>
+          <HoverCard shadow="md" withArrow>
+            <HoverCard.Target>
+              <Center>{repoName}</Center>
+            </HoverCard.Target>
+            <HoverCard.Dropdown>
+              <Stack gap="xs">
+                <Center>{repoName}</Center>
+                <Center>
+                  {`v${getSemanticVersion(VITE_BUILD_DATE_TIME)}+${VITE_COMMIT_SHORT_HASH}`}
+                </Center>
+                <Center>
+                  Released{" "}
+                  {prettyMilliseconds(
+                    new Date().getTime() -
+                      new Date(VITE_BUILD_DATE_TIME).getTime(),
+                    {
+                      compact: true,
+                      verbose: true,
+                    },
+                  )}{" "}
+                  ago
+                </Center>
+              </Stack>
+            </HoverCard.Dropdown>
+          </HoverCard>
+        </Group>
+      }
+    >
+      <FocusTrap.InitialFocus />
+      <Drawer.Body>
+        <Accordion variant="separated" multiple>
+          <Accordion.Item value="aiSettings">
+            <Accordion.Control>AI Settings</Accordion.Control>
+            <Accordion.Panel>
+              <Suspense>
+                <AISettingsForm />
+              </Suspense>
+            </Accordion.Panel>
+          </Accordion.Item>
+          <Accordion.Item value="searchSettings">
+            <Accordion.Control>Search Settings</Accordion.Control>
+            <Accordion.Panel>
+              <Suspense>
+                <SearchSettingsForm />
+              </Suspense>
+            </Accordion.Panel>
+          </Accordion.Item>
+          <Accordion.Item value="interfaceSettings">
+            <Accordion.Control>Interface Settings</Accordion.Control>
+            <Accordion.Panel>
+              <Suspense>
+                <InterfaceSettingsForm />
+              </Suspense>
+            </Accordion.Panel>
+          </Accordion.Item>
+          <Accordion.Item value="actions">
+            <Accordion.Control>Actions</Accordion.Control>
+            <Accordion.Panel>
+              <Suspense>
+                <ActionsForm />
+              </Suspense>
+            </Accordion.Panel>
+          </Accordion.Item>
+        </Accordion>
+      </Drawer.Body>
+    </Drawer>
+  );
+}

client/components/Pages/Main/Menu/SearchSettingsForm.tsx

@@ -0,0 +1,43 @@
+import { Slider, Stack, Switch, Text } from "@mantine/core";
+import { useForm } from "@mantine/form";
+import { usePubSub } from "create-pubsub/react";
+import { settingsPubSub } from "../../../../modules/pubSub";
+
+export default function SearchSettingsForm() {
+  const [settings, setSettings] = usePubSub(settingsPubSub);
+  const form = useForm({
+    initialValues: settings,
+    onValuesChange: setSettings,
+  });
+
+  return (
+    <Stack gap="md">
+      <Stack gap="xs" mb="md">
+        <Text size="sm">Search Results Limit</Text>
+        <Text size="xs" c="dimmed">
+          Maximum number of search results to fetch. A higher value provides
+          more results but may increase search time.
+        </Text>
+        <Slider
+          {...form.getInputProps("searchResultsLimit")}
+          min={5}
+          max={30}
+          step={5}
+          marks={[5, 10, 15, 20, 25, 30].map((value) => ({
+            value,
+            label: value.toString(),
+          }))}
+        />
+      </Stack>
+
+      <Switch
+        {...form.getInputProps("enableImageSearch", {
+          type: "checkbox",
+        })}
+        label="Image Search"
+        labelPosition="left"
+        description="Enable or disable image search results. When enabled, relevant images will be displayed alongside web search results."
+      />
+    </Stack>
+  );
+}

client/components/Search/Form/SearchForm.tsx

@@ -0,0 +1,140 @@
+import { Button, Group, Stack, Textarea } from "@mantine/core";
+import { usePubSub } from "create-pubsub/react";
+import {
+  type ChangeEvent,
+  type KeyboardEvent,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { Pattern, match } from "ts-pattern";
+import { useLocation } from "wouter";
+import { addLogEntry } from "../../../modules/logEntries";
+import { postMessageToParentWindow } from "../../../modules/parentWindow";
+import { settingsPubSub } from "../../../modules/pubSub";
+import { getRandomQuerySuggestion } from "../../../modules/querySuggestions";
+import { sleepUntilIdle } from "../../../modules/sleep";
+import { searchAndRespond } from "../../../modules/textGeneration";
+
+export default function SearchForm({
+  query,
+  updateQuery,
+  additionalButtons,
+}: {
+  query: string;
+  updateQuery: (query: string) => void;
+  additionalButtons?: ReactNode;
+}) {
+  const textAreaRef = useRef<HTMLTextAreaElement>(null);
+  const [textAreaValue, setTextAreaValue] = useState(query);
+  const defaultSuggestedQuery = "Anything you need!";
+  const [suggestedQuery, setSuggestedQuery] = useState(defaultSuggestedQuery);
+  const [, navigate] = useLocation();
+  const [settings] = usePubSub(settingsPubSub);
+
+  const handleMount = useCallback(async () => {
+    await sleepUntilIdle();
+    searchAndRespond();
+  }, []);
+
+  const handleInitialSuggestion = useCallback(async () => {
+    const suggestion = await getRandomQuerySuggestion();
+    setSuggestedQuery(suggestion);
+  }, []);
+
+  useEffect(() => {
+    handleMount();
+    handleInitialSuggestion();
+  }, [handleMount, handleInitialSuggestion]);
+
+  const handleInputChange = async (event: ChangeEvent<HTMLTextAreaElement>) => {
+    const text = event.target.value;
+
+    setTextAreaValue(text);
+
+    if (text.length === 0) {
+      setSuggestedQuery(await getRandomQuerySuggestion());
+    }
+  };
+
+  const handleClearButtonClick = async () => {
+    setSuggestedQuery(await getRandomQuerySuggestion());
+    setTextAreaValue("");
+    textAreaRef.current?.focus();
+    addLogEntry("User cleaned the search query field");
+  };
+
+  const startSearching = useCallback(() => {
+    const queryToEncode = match(textAreaValue.trim())
+      .with(Pattern.string.minLength(1), () => textAreaValue)
+      .otherwise(() => suggestedQuery);
+
+    setTextAreaValue(queryToEncode);
+
+    const queryString = `q=${encodeURIComponent(queryToEncode)}`;
+
+    postMessageToParentWindow({ queryString, hash: "" });
+
+    navigate(`/?${queryString}`, { replace: true });
+
+    updateQuery(queryToEncode);
+
+    searchAndRespond();
+
+    addLogEntry(
+      `User submitted a search with ${queryToEncode.length} characters length`,
+    );
+  }, [textAreaValue, suggestedQuery, updateQuery, navigate]);
+
+  const handleSubmit = (event: { preventDefault: () => void }) => {
+    event.preventDefault();
+    startSearching();
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    match([event, settings.enterToSubmit])
+      .with(
+        [{ code: "Enter", shiftKey: false }, true],
+        [{ code: "Enter", shiftKey: true }, false],
+        () => handleSubmit(event),
+      )
+      .otherwise(() => undefined);
+  };
+
+  return (
+    <form onSubmit={handleSubmit} style={{ width: "100%" }}>
+      <Stack gap="xs">
+        <Textarea
+          value={textAreaValue}
+          placeholder={suggestedQuery}
+          ref={textAreaRef}
+          onKeyDown={handleKeyDown}
+          onChange={handleInputChange}
+          autosize
+          minRows={1}
+          maxRows={8}
+          autoFocus
+        />
+        <Group gap="xs">
+          {match(textAreaValue)
+            .with(Pattern.string.minLength(1), () => (
+              <Button
+                size="xs"
+                onClick={handleClearButtonClick}
+                variant="default"
+              >
+                Clear
+              </Button>
+            ))
+            .otherwise(() => null)}
+          <Button size="xs" type="submit" variant="default" flex={1}>
+            Search
+          </Button>
+          {additionalButtons}
+        </Group>
+      </Stack>
+    </form>
+  );
+}

client/components/Search/Results/Graphical/ImageResultsList.tsx

@@ -0,0 +1,120 @@
+import { Carousel } from "@mantine/carousel";
+import { Button, Group, Stack, Text, Transition, rem } from "@mantine/core";
+import { useEffect, useState } from "react";
+import type { SearchResults } from "../../../../modules/search";
+import "@mantine/carousel/styles.css";
+import Lightbox from "yet-another-react-lightbox";
+import Captions from "yet-another-react-lightbox/plugins/captions";
+import "yet-another-react-lightbox/styles.css";
+import "yet-another-react-lightbox/plugins/captions.css";
+import { addLogEntry } from "../../../../modules/logEntries";
+import { getHostname } from "../../../../modules/stringFormatters";
+
+export default function ImageResultsList({
+  imageResults,
+}: {
+  imageResults: SearchResults["imageResults"];
+}) {
+  const [isLightboxOpen, setLightboxOpen] = useState(false);
+  const [lightboxIndex, setLightboxIndex] = useState(0);
+  const [canStartTransition, setCanStartTransition] = useState(false);
+
+  useEffect(() => {
+    setCanStartTransition(true);
+  }, []);
+
+  const handleImageClick = (index: number) => {
+    setLightboxIndex(index);
+    setLightboxOpen(true);
+  };
+
+  const imageStyle = {
+    objectFit: "cover",
+    height: rem(180),
+    width: rem(240),
+    borderRadius: rem(4),
+    border: `${rem(2)} solid var(--mantine-color-default-border)`,
+    cursor: "zoom-in",
+  } as const;
+
+  return (
+    <>
+      <Carousel slideSize="0" slideGap="xs" align="start" dragFree loop>
+        {imageResults.map(([title, sourceUrl, thumbnailUrl], index) => (
+          <Transition
+            key={`${title}-${sourceUrl}-${thumbnailUrl}`}
+            mounted={canStartTransition}
+            transition="fade"
+            timingFunction="ease"
+            enterDelay={index * 250}
+            duration={1500}
+          >
+            {(styles) => (
+              <Carousel.Slide style={styles}>
+                <img
+                  alt={title}
+                  src={thumbnailUrl}
+                  onClick={() => handleImageClick(index)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      handleImageClick(index);
+                    }
+                  }}
+                  style={imageStyle}
+                />
+              </Carousel.Slide>
+            )}
+          </Transition>
+        ))}
+      </Carousel>
+      <Lightbox
+        open={isLightboxOpen}
+        close={() => setLightboxOpen(false)}
+        plugins={[Captions]}
+        index={lightboxIndex}
+        slides={imageResults.map(([title, url, thumbnailUrl, sourceUrl]) => ({
+          src: thumbnailUrl,
+          description: (
+            <Stack align="center" gap="md">
+              {title && (
+                <Text component="cite" ta="center">
+                  {title}
+                </Text>
+              )}
+              <Group align="center" justify="center" gap="xs">
+                <Button
+                  variant="subtle"
+                  component="a"
+                  size="xs"
+                  href={sourceUrl}
+                  target="_blank"
+                  title="Click to see the image in full size"
+                  rel="noopener noreferrer"
+                  onClick={() => {
+                    addLogEntry("User visited an image result in full size");
+                  }}
+                >
+                  View in full resolution
+                </Button>
+                <Button
+                  variant="subtle"
+                  component="a"
+                  href={url}
+                  target="_blank"
+                  size="xs"
+                  title="Click to visit the page where the image was found"
+                  rel="noopener noreferrer"
+                  onClick={() => {
+                    addLogEntry("User visited an image result source");
+                  }}
+                >
+                  Visit {getHostname(url)}
+                </Button>
+              </Group>
+            </Stack>
+          ),
+        }))}
+      />
+    </>
+  );
+}

client/components/Search/Results/SearchResultsSection.tsx

@@ -0,0 +1,132 @@
+import {
+  Alert,
+  AspectRatio,
+  Divider,
+  Group,
+  Skeleton,
+  Space,
+  Stack,
+  em,
+} from "@mantine/core";
+import { useMediaQuery } from "@mantine/hooks";
+import { IconInfoCircle } from "@tabler/icons-react";
+import { usePubSub } from "create-pubsub/react";
+import { Suspense, lazy, useMemo } from "react";
+import { Pattern, match } from "ts-pattern";
+import {
+  searchResultsPubSub,
+  searchStatePubSub,
+  settingsPubSub,
+} from "../../../modules/pubSub";
+import type { SearchResults } from "../../../modules/search";
+import type { Settings } from "../../../modules/settings";
+
+const ImageResultsList = lazy(() => import("./Graphical/ImageResultsList"));
+const SearchResultsList = lazy(() => import("./Textual/SearchResultsList"));
+
+export default function SearchResultsSection() {
+  const [searchResults] = usePubSub(searchResultsPubSub);
+  const [searchState] = usePubSub(searchStatePubSub);
+  const [settings] = usePubSub(settingsPubSub);
+
+  return useMemo(
+    () =>
+      match(searchState)
+        .with("running", () => <RunningSearchContent />)
+        .with("failed", () => <FailedSearchContent />)
+        .with("completed", () => (
+          <CompletedSearchContent
+            searchResults={searchResults}
+            settings={settings}
+          />
+        ))
+        .otherwise(() => null),
+    [searchState, searchResults, settings],
+  );
+}
+
+function RunningSearchContent() {
+  const hasSmallScreen = useMediaQuery(`(max-width: ${em(530)})`);
+  const numberOfSquareSkeletons = hasSmallScreen ? 4 : 6;
+  const skeletonIds = Array.from(
+    { length: numberOfSquareSkeletons },
+    (_, i) => `skeleton-${i}`,
+  );
+
+  return (
+    <>
+      <Divider
+        mb="sm"
+        variant="dashed"
+        labelPosition="center"
+        label="Searching the web..."
+      />
+      <Stack>
+        <Group>
+          {skeletonIds.map((id) => (
+            <AspectRatio key={id} ratio={1} flex={1}>
+              <Skeleton />
+            </AspectRatio>
+          ))}
+        </Group>
+        <Stack>
+          <Skeleton height={8} radius="xl" />
+          <Skeleton height={8} width="87%" radius="xl" />
+          <Skeleton height={8} radius="xl" />
+          <Skeleton height={8} width="70%" radius="xl" />
+          <Skeleton height={8} radius="xl" />
+          <Skeleton height={8} width="52%" radius="xl" />
+          <Skeleton height={8} radius="xl" />
+          <Skeleton height={8} width="63%" radius="xl" />
+        </Stack>
+      </Stack>
+    </>
+  );
+}
+
+function FailedSearchContent() {
+  return (
+    <>
+      <Divider
+        mb="sm"
+        variant="dashed"
+        labelPosition="center"
+        label="Search Results"
+      />
+      <Alert
+        variant="light"
+        color="yellow"
+        title="No results found"
+        icon={<IconInfoCircle />}
+      >
+        It looks like your current search did not return any results. Try
+        refining your search by adding more keywords or rephrasing your query.
+      </Alert>
+    </>
+  );
+}
+
+function CompletedSearchContent({
+  searchResults,
+  settings,
+}: {
+  searchResults: SearchResults;
+  settings: Settings;
+}) {
+  return (
+    <>
+      <Divider variant="dashed" labelPosition="center" label="Search Results" />
+      {match([settings.enableImageSearch, searchResults.imageResults.length])
+        .with([true, Pattern.number.positive()], () => (
+          <Suspense>
+            <ImageResultsList imageResults={searchResults.imageResults} />
+            <Space h={8} />
+          </Suspense>
+        ))
+        .otherwise(() => null)}
+      <Suspense>
+        <SearchResultsList searchResults={searchResults.textResults} />
+      </Suspense>
+    </>
+  );
+}

client/components/Search/Results/Textual/SearchResultsList.tsx

@@ -0,0 +1,87 @@
+import {
+  Flex,
+  Stack,
+  Text,
+  Tooltip,
+  Transition,
+  UnstyledButton,
+  em,
+} from "@mantine/core";
+import { useMediaQuery } from "@mantine/hooks";
+import { useEffect, useState } from "react";
+import { addLogEntry } from "../../../../modules/logEntries";
+import type { SearchResults } from "../../../../modules/search";
+import { getHostname } from "../../../../modules/stringFormatters";
+
+export default function SearchResultsList({
+  searchResults,
+}: {
+  searchResults: SearchResults["textResults"];
+}) {
+  const shouldDisplayDomainBelowTitle = useMediaQuery(
+    `(max-width: ${em(720)})`,
+  );
+  const [canStartTransition, setCanStartTransition] = useState(false);
+
+  useEffect(() => {
+    setCanStartTransition(true);
+  }, []);
+
+  return (
+    <Stack gap={40}>
+      {searchResults.map(([title, snippet, url], index) => (
+        <Transition
+          key={url}
+          mounted={canStartTransition}
+          transition="fade"
+          timingFunction="ease"
+          enterDelay={index * 200}
+          duration={750}
+        >
+          {(styles) => (
+            <Stack gap={16} style={styles}>
+              <Flex
+                gap={shouldDisplayDomainBelowTitle ? 0 : 16}
+                justify="space-between"
+                align="flex-start"
+                direction={shouldDisplayDomainBelowTitle ? "column" : "row"}
+              >
+                <UnstyledButton
+                  variant="transparent"
+                  component="a"
+                  href={url}
+                  target="_blank"
+                  onClick={() => {
+                    addLogEntry("User clicked a text result");
+                  }}
+                >
+                  <Text fw="bold" c="var(--mantine-color-blue-light-color)">
+                    {title}
+                  </Text>
+                </UnstyledButton>
+                <Tooltip label={url}>
+                  <UnstyledButton
+                    variant="transparent"
+                    component="a"
+                    href={url}
+                    target="_blank"
+                    fs="italic"
+                    ta="end"
+                    onClick={() => {
+                      addLogEntry("User clicked a text result");
+                    }}
+                  >
+                    {getHostname(url)}
+                  </UnstyledButton>
+                </Tooltip>
+              </Flex>
+              <Text size="sm" c="dimmed" style={{ wordWrap: "break-word" }}>
+                {snippet}
+              </Text>
+            </Stack>
+          )}
+        </Transition>
+      ))}
+    </Stack>
+  );
+}

client/index.html

@@ -0,0 +1,36 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, user-scalable=no"
+    />
+    <meta
+      name="description"
+      content="Minimalist web-searching app with an AI assistant that is always available and runs directly from your browser."
+    />
+    <meta itemprop="name" content="MiniSearch" />
+    <meta
+      itemprop="description"
+      content="Minimalist web-searching app with an AI assistant that is always available and runs directly from your browser."
+    />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="MiniSearch" />
+    <meta
+      property="og:description"
+      content="Minimalist web-searching app with an AI assistant that is always available and runs directly from your browser."
+    />
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:title" content="MiniSearch" />
+    <meta
+      name="twitter:description"
+      content="Minimalist web-searching app with an AI assistant that is always available and runs directly from your browser."
+    />
+    <title>MiniSearch</title>
+    <link rel="icon" href="/favicon.png" />
+  </head>
+  <body>
+    <script type="module" src="./index.tsx"></script>
+  </body>
+</html>

client/index.tsx

@@ -0,0 +1,9 @@
+import { createRoot } from "react-dom/client";
+import { App } from "./components/App/App";
+import { addLogEntry } from "./modules/logEntries";
+
+createRoot(document.body.appendChild(document.createElement("div"))).render(
+  <App />,
+);
+
+addLogEntry("App initialized");

client/modules/accessKey.ts

@@ -0,0 +1,95 @@
+import { notifications } from "@mantine/notifications";
+import { argon2id } from "hash-wasm";
+import { addLogEntry } from "./logEntries";
+
+const ACCESS_KEY_STORAGE_KEY = "accessKeyHash";
+
+interface StoredAccessKey {
+  hash: string;
+  timestamp: number;
+}
+
+async function hashAccessKey(accessKey: string): Promise<string> {
+  const salt = new Uint8Array(16);
+  crypto.getRandomValues(salt);
+
+  return argon2id({
+    password: accessKey,
+    salt,
+    parallelism: 1,
+    iterations: 16,
+    memorySize: 512,
+    hashLength: 8,
+    outputType: "encoded",
+  });
+}
+
+export async function validateAccessKey(accessKey: string): Promise<boolean> {
+  try {
+    const hash = await hashAccessKey(accessKey);
+    const response = await fetch("/api/validate-access-key", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ accessKeyHash: hash }),
+    });
+    const data = await response.json();
+
+    if (data.valid) {
+      const storedData: StoredAccessKey = {
+        hash,
+        timestamp: Date.now(),
+      };
+      localStorage.setItem(ACCESS_KEY_STORAGE_KEY, JSON.stringify(storedData));
+      addLogEntry("Access key hash stored");
+    }
+
+    return data.valid;
+  } catch (error) {
+    addLogEntry(`Error validating access key: ${error}`);
+    notifications.show({
+      title: "Error validating access key",
+      message: "Please contact the administrator",
+      color: "red",
+      position: "top-right",
+    });
+    return false;
+  }
+}
+
+export async function verifyStoredAccessKey(): Promise<boolean> {
+  if (VITE_ACCESS_KEY_TIMEOUT_HOURS === 0) return false;
+
+  const storedData = localStorage.getItem(ACCESS_KEY_STORAGE_KEY);
+  if (!storedData) return false;
+
+  try {
+    const { hash, timestamp }: StoredAccessKey = JSON.parse(storedData);
+
+    const expirationTime = VITE_ACCESS_KEY_TIMEOUT_HOURS * 60 * 60 * 1000;
+    if (Date.now() - timestamp > expirationTime) {
+      localStorage.removeItem(ACCESS_KEY_STORAGE_KEY);
+      addLogEntry("Stored access key expired");
+      return false;
+    }
+
+    const response = await fetch("/api/validate-access-key", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ accessKeyHash: hash }),
+    });
+
+    const data = await response.json();
+    if (!data.valid) {
+      localStorage.removeItem(ACCESS_KEY_STORAGE_KEY);
+      addLogEntry("Stored access key is no longer valid");
+      return false;
+    }
+
+    addLogEntry("Using stored access key");
+    return true;
+  } catch (error) {
+    addLogEntry(`Error verifying stored access key: ${error}`);
+    localStorage.removeItem(ACCESS_KEY_STORAGE_KEY);
+    return false;
+  }
+}

client/modules/logEntries.ts

@@ -0,0 +1,20 @@
+import { createPubSub } from "create-pubsub";
+
+type LogEntry = {
+  timestamp: string;
+  message: string;
+};
+
+export const logEntriesPubSub = createPubSub<LogEntry[]>([]);
+
+const [updateLogEntries, , getLogEntries] = logEntriesPubSub;
+
+export function addLogEntry(message: string) {
+  updateLogEntries([
+    ...getLogEntries(),
+    {
+      timestamp: new Date().toISOString(),
+      message,
+    },
+  ]);
+}

client/modules/openai.ts

@@ -0,0 +1,16 @@
+import OpenAI, { type ClientOptions } from "openai";
+
+export function getOpenAiClient({
+  baseURL,
+  apiKey,
+}: {
+  baseURL: ClientOptions["baseURL"];
+  apiKey: ClientOptions["apiKey"];
+}) {
+  return new OpenAI({
+    baseURL,
+    apiKey,
+    dangerouslyAllowBrowser: true,
+    defaultHeaders: { "X-Stainless-Retry-Count": null },
+  });
+}

client/modules/parentWindow.ts

@@ -0,0 +1,5 @@
+export function postMessageToParentWindow(message: unknown) {
+  const parentWindow = self.parent;
+  const targetOrigin = parentWindow?.[0]?.location?.ancestorOrigins?.[0];
+  if (targetOrigin) parentWindow.postMessage(message, targetOrigin);
+}

client/modules/pubSub.ts

@@ -0,0 +1,106 @@
+import { createPubSub } from "create-pubsub";
+import throttle from "throttleit";
+import { addLogEntry } from "./logEntries";
+import { defaultSettings } from "./settings";
+
+function createLocalStoragePubSub<T>(localStorageKey: string, defaultValue: T) {
+  const localStorageValue = localStorage.getItem(localStorageKey);
+  const localStoragePubSub = createPubSub(
+    localStorageValue ? (JSON.parse(localStorageValue) as T) : defaultValue,
+  );
+
+  const [, onValueChange] = localStoragePubSub;
+
+  onValueChange((value) =>
+    localStorage.setItem(localStorageKey, JSON.stringify(value)),
+  );
+
+  return localStoragePubSub;
+}
+
+const querySuggestionsPubSub = createLocalStoragePubSub<string[]>(
+  "querySuggestions",
+  [],
+);
+
+const lastSearchTokenHashPubSub = createLocalStoragePubSub(
+  "lastSearchTokenHash",
+  "",
+);
+
+export const [updateLastSearchTokenHash, , getLastSearchTokenHash] =
+  lastSearchTokenHashPubSub;
+
+export const [updateQuerySuggestions, , getQuerySuggestions] =
+  querySuggestionsPubSub;
+
+export const queryPubSub = createPubSub(
+  new URLSearchParams(self.location.search).get("q") ?? "",
+);
+
+export const [, , getQuery] = queryPubSub;
+
+export const responsePubSub = createPubSub("");
+
+export const updateResponse = throttle(responsePubSub[0], 1000 / 12);
+
+export const searchResultsPubSub = createPubSub<
+  import("./search").SearchResults
+>({
+  textResults: [],
+  imageResults: [],
+});
+
+export const [updateSearchResults, , getSearchResults] = searchResultsPubSub;
+
+export const [updateSearchPromise, , getSearchPromise] = createPubSub<
+  Promise<import("./search").SearchResults>
+>(Promise.resolve({ textResults: [], imageResults: [] }));
+
+export const textGenerationStatePubSub = createPubSub<
+  | "idle"
+  | "awaitingModelDownloadAllowance"
+  | "loadingModel"
+  | "awaitingSearchResults"
+  | "preparingToGenerate"
+  | "generating"
+  | "interrupted"
+  | "failed"
+  | "completed"
+>("idle");
+
+export const [updateTextGenerationState, , getTextGenerationState] =
+  textGenerationStatePubSub;
+
+const [, listenToTextGenerationStateChanges] = textGenerationStatePubSub;
+
+listenToTextGenerationStateChanges((textGenerationState) => {
+  addLogEntry(`Text generation state changed to '${textGenerationState}'`);
+});
+
+export const searchStatePubSub = createPubSub<
+  "idle" | "running" | "failed" | "completed"
+>("idle");
+
+export const [updateSearchState] = searchStatePubSub;
+
+const [, listenToSearchStateChanges] = searchStatePubSub;
+
+listenToSearchStateChanges((searchState) => {
+  addLogEntry(`Search state changed to '${searchState}'`);
+});
+
+export const modelLoadingProgressPubSub = createPubSub(0);
+
+export const [updateModelLoadingProgress] = modelLoadingProgressPubSub;
+
+export const settingsPubSub = createLocalStoragePubSub(
+  "settings",
+  defaultSettings,
+);
+
+export const [, listenToSettingsChanges, getSettings] = settingsPubSub;
+
+export const modelSizeInMegabytesPubSub = createPubSub(0);
+
+export const [updateModelSizeInMegabytes] = modelSizeInMegabytesPubSub;

client/modules/querySuggestions.ts

@@ -0,0 +1,31 @@
+import { addLogEntry } from "./logEntries";
+import { getQuerySuggestions, updateQuerySuggestions } from "./pubSub";
+
+export async function getRandomQuerySuggestion() {
+  if (getQuerySuggestions().length === 0) await refillQuerySuggestions(25);
+
+  const querySuggestions = getQuerySuggestions();
+
+  const randomQuerySuggestion = querySuggestions.pop() as string;
+
+  updateQuerySuggestions(querySuggestions);
+
+  return randomQuerySuggestion;
+}
+
+async function refillQuerySuggestions(limit?: number) {
+  const querySuggestionsFileUrl = new URL(
+    "/query-suggestions.json",
+    self.location.origin,
+  );
+
+  const fetchResponse = await fetch(querySuggestionsFileUrl.toString());
+
+  const querySuggestionsList: string[] = await fetchResponse.json();
+
+  updateQuerySuggestions(
+    querySuggestionsList.sort(() => Math.random() - 0.5).slice(0, limit),
+  );
+
+  addLogEntry(`Query suggestions refilled with ${limit} suggestions`);
+}

client/modules/search.ts

@@ -0,0 +1,159 @@
+import { name } from "../../package.json";
+import { addLogEntry } from "./logEntries";
+import { getSearchTokenHash } from "./searchTokenHash";
+
+export type SearchResults = {
+  textResults: [title: string, snippet: string, url: string][];
+  imageResults: [
+    title: string,
+    url: string,
+    thumbnailUrl: string,
+    sourceUrl: string,
+  ][];
+};
+
+/**
+ * Creates a cached version of a search function using IndexedDB for storage.
+ *
+ * @param fn - The original search function to be cached.
+ * @returns A new function that wraps the original, adding caching functionality.
+ *
+ * This function implements a caching mechanism for search results using IndexedDB.
+ * It stores search results with a 15-minute time-to-live (TTL) to improve performance
+ * for repeated searches. The cache is automatically cleaned of expired entries.
+ *
+ * The returned function behaves as follows:
+ * 1. Checks IndexedDB for a cached result matching the query.
+ * 2. If a valid (non-expired) cached result exists, it is returned immediately.
+ * 3. Otherwise, the original search function is called, and its result is both
+ *    returned and stored in the cache for future use.
+ *
+ * If IndexedDB is not available, the function falls back to using the original
+ * search function without caching.
+ */
+function cacheSearchWithIndexedDB(
+  fn: (query: string, limit?: number) => Promise<SearchResults>,
+): (query: string, limit?: number) => Promise<SearchResults> {
+  const storeName = "searches";
+  const timeToLive = 15 * 60 * 1000;
+
+  async function openDB(): Promise<IDBDatabase> {
+    return new Promise((resolve, reject) => {
+      const request = indexedDB.open(name, 1);
+      request.onerror = () => reject(request.error);
+      request.onsuccess = () => {
+        const db = request.result;
+        cleanExpiredCache(db);
+        resolve(db);
+      };
+      request.onupgradeneeded = (event) => {
+        const db = (event.target as IDBOpenDBRequest).result;
+        db.createObjectStore(storeName);
+      };
+    });
+  }
+
+  async function cleanExpiredCache(db: IDBDatabase): Promise<void> {
+    const transaction = db.transaction(storeName, "readwrite");
+    const store = transaction.objectStore(storeName);
+    const currentTime = Date.now();
+
+    return new Promise((resolve) => {
+      const request = store.openCursor();
+      request.onsuccess = (event) => {
+        const cursor = (event.target as IDBRequest).result;
+        if (cursor) {
+          if (currentTime - cursor.value.timestamp >= timeToLive) {
+            cursor.delete();
+          }
+          cursor.continue();
+        } else {
+          resolve();
+        }
+      };
+    });
+  }
+
+  /**
+   * Generates a hash for a given query string.
+   *
+   * This function implements a simple hash algorithm:
+   * 1. It iterates through each character in the query string.
+   * 2. For each character, it updates the hash value using bitwise operations.
+   * 3. The final hash is converted to a 32-bit integer.
+   * 4. The result is returned as a base-36 string representation.
+   *
+   * @param query - The input string to be hashed.
+   * @returns A string representation of the hash in base-36.
+   */
+  function hashQuery(query: string): string {
+    return query
+      .split("")
+      .reduce((acc, char) => ((acc << 5) - acc + char.charCodeAt(0)) | 0, 0)
+      .toString(36);
+  }
+
+  const dbPromise = openDB();
+
+  return async (query: string, limit?: number): Promise<SearchResults> => {
+    addLogEntry("Starting new search");
+    if (!indexedDB) return fn(query, limit);
+
+    const db = await dbPromise;
+    const transaction = db.transaction(storeName, "readwrite");
+    const store = transaction.objectStore(storeName);
+    const key = hashQuery(query);
+    const cachedResult = await new Promise<
+      | {
+          results: SearchResults;
+          timestamp: number;
+        }
+      | undefined
+    >((resolve) => {
+      const request = store.get(key);
+      request.onerror = () => resolve(undefined);
+      request.onsuccess = () => resolve(request.result);
+    });
+
+    if (cachedResult && Date.now() - cachedResult.timestamp < timeToLive) {
+      addLogEntry(
+        `Search cache hit, returning cached results containing ${cachedResult.results.textResults.length} texts and ${cachedResult.results.imageResults.length} images`,
+      );
+      return cachedResult.results;
+    }
+
+    addLogEntry("Search cache miss, fetching new results");
+
+    const results = await fn(query, limit);
+
+    const writeTransaction = db.transaction(storeName, "readwrite");
+    const writeStore = writeTransaction.objectStore(storeName);
+    writeStore.put({ results, timestamp: Date.now() }, key);
+
+    addLogEntry(
+      `Search completed with ${results.textResults.length} text results and ${results.imageResults.length} image results`,
+    );
+
+    return results;
+  };
+}
+
+export const search = cacheSearchWithIndexedDB(
+  async (query: string, limit?: number): Promise<SearchResults> => {
+    const searchUrl = new URL("/search", self.location.origin);
+
+    searchUrl.searchParams.set("q", query);
+
+    searchUrl.searchParams.set("token", await getSearchTokenHash());
+
+    if (limit && limit > 0) {
+      searchUrl.searchParams.set("limit", limit.toString());
+    }
+
+    const response = await fetch(searchUrl.toString());
+
+    return response.ok
+      ? response.json()
+      : { textResults: [], imageResults: [] };
+  },
+);

client/modules/searchTokenHash.ts

@@ -0,0 +1,41 @@
+import { argon2Verify, argon2id } from "hash-wasm";
+import { addLogEntry } from "./logEntries";
+import { getLastSearchTokenHash, updateLastSearchTokenHash } from "./pubSub";
+
+export async function getSearchTokenHash() {
+  const password = VITE_SEARCH_TOKEN;
+  const lastSearchTokenHash = getLastSearchTokenHash();
+
+  try {
+    const lastSearchTokenHashIsValid = await argon2Verify({
+      password,
+      hash: lastSearchTokenHash,
+    });
+
+    if (lastSearchTokenHashIsValid) {
+      addLogEntry("Using cached search token hash");
+      return lastSearchTokenHash;
+    }
+  } catch (error) {
+    void error;
+  }
+
+  const salt = new Uint8Array(16);
+  crypto.getRandomValues(salt);
+
+  const newSearchTokenHash = await argon2id({
+    password,
+    salt,
+    parallelism: 1,
+    iterations: 16,
+    memorySize: 512,
+    hashLength: 8,
+    outputType: "encoded",
+  });
+
+  updateLastSearchTokenHash(newSearchTokenHash);
+
+  addLogEntry("New search token hash generated");
+
+  return newSearchTokenHash;
+}