Sync from https://github.com/felladrin/MiniSearch

.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,33 @@
+# 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="Qwen3-1.7B-q4f16_1-MLC"
+
+# The default model ID for WebLLM with F32 shaders.
+WEBLLM_DEFAULT_F32_MODEL_ID="Qwen3-1.7B-q4f32_1-MLC"
+
+# The default model ID for Wllama.
+WLLAMA_DEFAULT_MODEL_ID="qwen-3-0.6b"
+
+# 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)
+# "horde" -> AI Horde (Pre-configured)
+# "internal" -> $INTERNAL_OPENAI_COMPATIBLE_API_NAME
+DEFAULT_INFERENCE_TYPE="browser"

.github/hf-space-config.yml

@@ -0,0 +1,11 @@
+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

.github/workflows/ai-review.yml

@@ -0,0 +1,138 @@
+name: Review Pull Request with AI
+
+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:
+  ai-review:
+    if: ${{ !contains(github.event.pull_request.labels.*.name, 'skip-ai-review') }}
+    continue-on-error: true
+    runs-on: ubuntu-latest
+    name: AI Review
+    permissions:
+      pull-requests: write
+      contents: read
+    timeout-minutes: 30
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Create temporary directory
+        run: mkdir -p /tmp/pr_review
+
+      - name: Process PR description
+        id: process_pr
+        run: |
+          PR_BODY_ESCAPED=$(cat << 'EOF'
+          ${{ github.event.pull_request.body }}
+          EOF
+          )
+          PROCESSED_BODY=$(echo "$PR_BODY_ESCAPED" | sed -E 's/\[(.*?)\]\(.*?\)/\1/g')
+          echo "$PROCESSED_BODY" > /tmp/pr_review/processed_body.txt
+
+      - name: Fetch branches and output the diff
+        run: |
+          git fetch origin main:main
+          git fetch origin pull/${{ github.event.pull_request.number }}/head:pr-branch
+          git diff main..pr-branch > /tmp/pr_review/diff.txt
+
+      - name: Prepare review request
+        id: prepare_request
+        run: |
+          PR_TITLE=$(echo "${{ github.event.pull_request.title }}" | sed 's/[()]/\\&/g')
+          DIFF_CONTENT=$(cat /tmp/pr_review/diff.txt)
+          PROCESSED_BODY=$(cat /tmp/pr_review/processed_body.txt)
+
+          jq -n \
+            --arg model "${{ vars.OPENAI_COMPATIBLE_API_MODEL }}" \
+            --arg http_referer "${{ github.event.repository.html_url }}" \
+            --arg title "${{ github.event.repository.name }}" \
+            --arg system "You are an experienced developer reviewing a Pull Request. You focus only on what matters and provide concise, actionable feedback.
+
+          Review Context:
+          Repository Name: \"${{ github.event.repository.name }}\"
+          Repository Description: \"${{ github.event.repository.description }}\"
+          Branch: \"${{ github.event.pull_request.head.ref }}\"
+          PR Title: \"$PR_TITLE\"
+
+          Guidelines:
+          1. Only comment on issues that:
+            - Could cause bugs or security issues
+            - Significantly impact performance
+            - Make the code harder to maintain
+            - Violate critical best practices
+
+          2. For each issue:
+            - Point to the specific line/file
+            - Explain why it's a problem
+            - Suggest a concrete fix
+            
+          3. Praise exceptional solutions briefly, only if truly innovative
+
+          4. Skip commenting on:
+            - Minor style issues
+            - Obvious changes
+            - Working code that could be marginally improved
+            - Things that are just personal preference
+
+          Remember:
+          Less is more. If the code is good and working, just say so, with a short message." \
+            --arg user "This is the description of the pull request:
+          \`\`\`markdown
+          $PROCESSED_BODY
+          \`\`\`
+
+          And here is the diff of the changes, for you to review:
+          \`\`\`diff
+          $DIFF_CONTENT
+          \`\`\`" \
+            '{
+              "model": $model,
+              "messages": [
+                {"role": "system", "content": $system},
+                {"role": "user", "content": $user}
+              ],
+              "temperature": 0.7,
+              "top_p": 0.9
+            }' > /tmp/pr_review/request.json
+      - name: Get AI Review
+        id: ai_review
+        run: |
+          RESPONSE=$(curl -s ${{ vars.OPENAI_COMPATIBLE_API_BASE_URL }}/chat/completions \
+            -H "Content-Type: application/json" \
+            -H "Authorization: Bearer ${{ secrets.OPENAI_COMPATIBLE_API_KEY }}" \
+            -d @/tmp/pr_review/request.json)
+          
+          # Check for errors in the response
+          if echo "$RESPONSE" | jq -e '.object == "error"' > /dev/null; then
+            echo "Error from API:" >&2
+            ERROR_MSG=$(echo "$RESPONSE" | jq -r '.message.detail[0].msg // .message')
+            echo "$ERROR_MSG" >&2
+            exit 1
+          fi
+
+          echo "### Review" > /tmp/pr_review/response.txt
+          echo "" >> /tmp/pr_review/response.txt
+          echo "$RESPONSE" | jq -r '.choices[0].message.content' >> /tmp/pr_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: "### Review"
+
+      - 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/pr_review/response.txt
+          edit-mode: replace

.github/workflows/deploy-to-hugging-face.yml

@@ -0,0 +1,20 @@
+name: Deploy to Hugging Face
+
+on:
+  workflow_dispatch:
+
+jobs:
+  sync-to-hf:
+    name: Sync to Hugging Face 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: ".github/hf-space-config.yml"

.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/publish-docker-image.yml

@@ -0,0 +1,39 @@
+name: Publish Docker Image
+
+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

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

@@ -0,0 +1,26 @@
+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: "lts/*"
+          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
+        timeout-minutes: 1
+      - run: docker compose -f docker-compose.production.yml down

.gitignore

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

.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

.npmrc

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

Dockerfile

@@ -0,0 +1,95 @@
+FROM node:lts AS llama-builder
+
+ARG LLAMA_CPP_RELEASE_TAG="b5595"
+
+RUN apt-get update && apt-get install -y \
+  build-essential \
+  cmake \
+  ccache \
+  git \
+  curl
+
+RUN cd /tmp && \
+  git clone https://github.com/ggerganov/llama.cpp.git && \
+  cd llama.cpp && \
+  git checkout $LLAMA_CPP_RELEASE_TAG && \
+  cmake -B build -DGGML_NATIVE=OFF -DLLAMA_CURL=OFF && \
+  cmake --build build --config Release -j --target llama-server && \
+  mkdir -p /usr/local/lib/llama && \
+  find build -type f \( -name "libllama.so" -o -name "libmtmd.so" -o -name "libggml.so" -o -name "libggml-base.so" -o -name "libggml-cpu.so" \) -exec cp {} /usr/local/lib/llama/ \;
+
+FROM node:lts
+
+ENV PORT=7860
+EXPOSE $PORT
+
+ARG USERNAME=node
+ARG HOME_DIR=/home/${USERNAME}
+ARG APP_DIR=${HOME_DIR}/app
+
+RUN apt-get update && \
+  apt-get install -y --no-install-recommends \
+  python3 \
+  python3-venv && \
+  apt-get clean && \
+  rm -rf /var/lib/apt/lists/*
+
+RUN mkdir -p /usr/local/searxng /etc/searxng && \
+  chown -R ${USERNAME}:${USERNAME} /usr/local/searxng /etc/searxng && \
+  chmod 755 /etc/searxng
+
+WORKDIR /usr/local/searxng
+RUN python3 -m venv searxng-venv && \
+  chown -R ${USERNAME}:${USERNAME} /usr/local/searxng/searxng-venv && \
+  /usr/local/searxng/searxng-venv/bin/pip install --upgrade pip && \
+  /usr/local/searxng/searxng-venv/bin/pip install wheel setuptools pyyaml lxml
+
+RUN git clone https://github.com/searxng/searxng.git /usr/local/searxng/searxng-src && \
+  chown -R ${USERNAME}:${USERNAME} /usr/local/searxng/searxng-src
+
+ARG SEARXNG_SETTINGS_PATH="/etc/searxng/settings.yml"
+
+WORKDIR /usr/local/searxng/searxng-src
+RUN cp searx/settings.yml $SEARXNG_SETTINGS_PATH && \
+  chown ${USERNAME}:${USERNAME} $SEARXNG_SETTINGS_PATH && \
+  chmod 644 $SEARXNG_SETTINGS_PATH && \
+  sed -i 's/ultrasecretkey/'$(openssl rand -hex 32)'/g' $SEARXNG_SETTINGS_PATH && \
+  sed -i 's/- html/- json/' $SEARXNG_SETTINGS_PATH && \
+  /usr/local/searxng/searxng-venv/bin/pip install -e .
+
+COPY --from=llama-builder /tmp/llama.cpp/build/bin/llama-server /usr/local/bin/
+COPY --from=llama-builder /usr/local/lib/llama/* /usr/local/lib/
+RUN ldconfig /usr/local/lib
+
+USER ${USERNAME}
+
+WORKDIR ${APP_DIR}
+
+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
+ARG HOST
+ARG HMR_PORT
+ARG ALLOWED_HOSTS
+
+COPY --chown=${USERNAME}:${USERNAME} ./package.json ./package-lock.json ./.npmrc ./
+
+RUN npm ci
+
+COPY --chown=${USERNAME}:${USERNAME} . .
+
+RUN git config --global --add safe.directory ${APP_DIR} && \
+  npm run build
+
+HEALTHCHECK --interval=5m CMD curl -f http://localhost:7860/status || exit 1
+
+ENTRYPOINT [ "/bin/sh", "-c" ]
+
+CMD ["(cd /usr/local/searxng/searxng-src && /usr/local/searxng/searxng-venv/bin/python -m searx.webapp > /dev/null 2>&1) & (npx pm2 start ecosystem.config.cjs && npx pm2 logs)" ]

README.md

@@ -0,0 +1,127 @@
+---
+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>How do I search via Raycast?</summary>
+  <p>
+    You can add <a href="https://ray.so/quicklinks/shared?quicklinks=%7B%22link%22:%22https:%5C/%5C/felladrin-minisearch.hf.space%5C/?q%3D%7BQuery%7D%22,%22name%22:%22MiniSearch%22%7D" target="_blank">this Quicklink</a> to Raycast, so typing your query will open MiniSearch with the search results. You can also edit it to point to your own domain.
+  </p>
+  <img width="744" alt="image" src="https://github.com/user-attachments/assets/521dca22-c77b-42de-8cc8-9feb06f9a97e">
+</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>

biome.json

@@ -0,0 +1,34 @@
+{
+  "$schema": "https://biomejs.dev/schemas/latest/schema.json",
+  "vcs": {
+    "enabled": false,
+    "clientKind": "git",
+    "useIgnoreFile": false
+  },
+  "files": {
+    "ignoreUnknown": false
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space"
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "double"
+    }
+  },
+  "assist": {
+    "enabled": true,
+    "actions": {
+      "source": {
+        "organizeImports": "on"
+      }
+    }
+  }
+}

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,214 @@
+import {
+  ActionIcon,
+  Alert,
+  Badge,
+  Box,
+  Card,
+  Group,
+  ScrollArea,
+  Text,
+  Tooltip,
+} from "@mantine/core";
+import {
+  IconArrowsMaximize,
+  IconArrowsMinimize,
+  IconHandStop,
+  IconInfoCircle,
+  IconRefresh,
+  IconVolume2,
+} from "@tabler/icons-react";
+import type { PublishFunction } from "create-pubsub";
+import { usePubSub } from "create-pubsub/react";
+import { type ReactNode, useMemo, useState } from "react";
+import { addLogEntry } from "../../modules/logEntries";
+import { settingsPubSub } from "../../modules/pubSub";
+import { searchAndRespond } from "../../modules/textGeneration";
+import CopyIconButton from "./CopyIconButton";
+import FormattedMarkdown from "./FormattedMarkdown";
+
+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 [isSpeaking, setIsSpeaking] = useState(false);
+
+  const ConditionalScrollArea = useMemo(
+    () =>
+      ({ children }: { children: ReactNode }) => {
+        return settings.enableAiResponseScrolling ? (
+          <ScrollArea.Autosize mah={300} type="auto" offsetScrollbars>
+            {children}
+          </ScrollArea.Autosize>
+        ) : (
+          <Box>{children}</Box>
+        );
+      },
+    [settings.enableAiResponseScrolling],
+  );
+
+  function speakResponse(text: string) {
+    if (isSpeaking) {
+      self.speechSynthesis.cancel();
+      setIsSpeaking(false);
+      return;
+    }
+
+    const prepareTextForSpeech = (textToClean: string) => {
+      const withoutReasoning = textToClean.replace(
+        new RegExp(
+          `${settings.reasoningStartMarker}[\\s\\S]*?${settings.reasoningEndMarker}`,
+          "g",
+        ),
+        "",
+      );
+      const withoutLinks = withoutReasoning.replace(
+        /\[([^\]]+)\]\([^)]+\)/g,
+        "($1)",
+      );
+      const withoutMarkdown = withoutLinks.replace(/[#*`_~[\]]/g, "");
+      return withoutMarkdown.trim();
+    };
+
+    const utterance = new SpeechSynthesisUtterance(prepareTextForSpeech(text));
+
+    const voices = self.speechSynthesis.getVoices();
+
+    if (voices.length > 0 && settings.selectedVoiceId) {
+      const voice = voices.find(
+        (voice) => voice.voiceURI === settings.selectedVoiceId,
+      );
+
+      if (voice) {
+        utterance.voice = voice;
+        utterance.lang = voice.lang;
+      }
+    }
+
+    utterance.onerror = () => {
+      addLogEntry("Failed to speak response");
+      setIsSpeaking(false);
+    };
+
+    utterance.onend = () => setIsSpeaking(false);
+
+    setIsSpeaking(true);
+    self.speechSynthesis.speak(utterance);
+  }
+
+  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}>
+              {textGenerationState === "generating"
+                ? "Generating AI Response..."
+                : "AI Response"}
+            </Text>
+            {textGenerationState === "interrupted" && (
+              <Badge variant="light" color="yellow" size="xs">
+                Interrupted
+              </Badge>
+            )}
+          </Group>
+          <Group gap="xs" align="center">
+            {textGenerationState === "generating" ? (
+              <Tooltip label="Interrupt generation">
+                <ActionIcon
+                  onClick={() => setTextGenerationState("interrupted")}
+                  variant="subtle"
+                  color="gray"
+                >
+                  <IconHandStop size={16} />
+                </ActionIcon>
+              </Tooltip>
+            ) : (
+              <Tooltip label="Regenerate response">
+                <ActionIcon
+                  onClick={() => searchAndRespond()}
+                  variant="subtle"
+                  color="gray"
+                >
+                  <IconRefresh size={16} />
+                </ActionIcon>
+              </Tooltip>
+            )}
+            <Tooltip
+              label={isSpeaking ? "Stop speaking" : "Listen to response"}
+            >
+              <ActionIcon
+                onClick={() => speakResponse(response)}
+                variant="subtle"
+                color={isSpeaking ? "blue" : "gray"}
+              >
+                <IconVolume2 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>
+            )}
+            <CopyIconButton value={response} tooltipLabel="Copy response" />
+          </Group>
+        </Group>
+      </Card.Section>
+      <Card.Section withBorder>
+        <ConditionalScrollArea>
+          <FormattedMarkdown>{response}</FormattedMarkdown>
+        </ConditionalScrollArea>
+        {textGenerationState === "failed" && (
+          <Alert
+            variant="light"
+            color="yellow"
+            title="Failed to generate response"
+            icon={<IconInfoCircle />}
+          >
+            Could not generate response. Please try refreshing the page.
+          </Alert>
+        )}
+      </Card.Section>
+    </Card>
+  );
+}

client/components/AiResponse/AiResponseSection.tsx

@@ -0,0 +1,88 @@
+import { CodeHighlightAdapterProvider } from "@mantine/code-highlight";
+import { usePubSub } from "create-pubsub/react";
+import { useMemo } from "react";
+import {
+  modelLoadingProgressPubSub,
+  modelSizeInMegabytesPubSub,
+  queryPubSub,
+  responsePubSub,
+  settingsPubSub,
+  textGenerationStatePubSub,
+} from "../../modules/pubSub";
+import { shikiAdapter } from "../../modules/shiki";
+import "@mantine/code-highlight/styles.css";
+import AiModelDownloadAllowanceContent from "./AiModelDownloadAllowanceContent";
+import AiResponseContent from "./AiResponseContent";
+import ChatInterface from "./ChatInterface";
+import LoadingModelContent from "./LoadingModelContent";
+import PreparingContent from "./PreparingContent";
+
+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(() => {
+    if (!settings.enableAiResponse || textGenerationState === "idle") {
+      return null;
+    }
+
+    const generatingStates = [
+      "generating",
+      "interrupted",
+      "completed",
+      "failed",
+    ];
+    if (generatingStates.includes(textGenerationState)) {
+      return (
+        <CodeHighlightAdapterProvider adapter={shikiAdapter}>
+          <AiResponseContent
+            textGenerationState={textGenerationState}
+            response={response}
+            setTextGenerationState={setTextGenerationState}
+          />
+
+          {textGenerationState === "completed" && (
+            <ChatInterface initialQuery={query} initialResponse={response} />
+          )}
+        </CodeHighlightAdapterProvider>
+      );
+    }
+
+    if (textGenerationState === "loadingModel") {
+      return (
+        <LoadingModelContent
+          modelLoadingProgress={modelLoadingProgress}
+          modelSizeInMegabytes={modelSizeInMegabytes}
+        />
+      );
+    }
+
+    if (textGenerationState === "preparingToGenerate") {
+      return <PreparingContent textGenerationState={textGenerationState} />;
+    }
+
+    if (textGenerationState === "awaitingSearchResults") {
+      return <PreparingContent textGenerationState={textGenerationState} />;
+    }
+
+    if (textGenerationState === "awaitingModelDownloadAllowance") {
+      return <AiModelDownloadAllowanceContent />;
+    }
+
+    return null;
+  }, [
+    settings.enableAiResponse,
+    textGenerationState,
+    response,
+    query,
+    modelLoadingProgress,
+    modelSizeInMegabytes,
+    setTextGenerationState,
+  ]);
+}

client/components/AiResponse/ChatHeader.tsx

@@ -0,0 +1,33 @@
+import { Group, Text } from "@mantine/core";
+import type { ChatMessage } from "gpt-tokenizer/GptEncoding";
+import CopyIconButton from "./CopyIconButton";
+
+interface ChatHeaderProps {
+  messages: ChatMessage[];
+}
+
+function ChatHeader({ messages }: ChatHeaderProps) {
+  const getChatContent = () => {
+    return messages
+      .slice(2)
+      .map(
+        (msg, index) =>
+          `${index + 1}. ${msg.role?.toUpperCase()}\n\n${msg.content}`,
+      )
+      .join("\n\n");
+  };
+
+  return (
+    <Group justify="space-between">
+      <Text fw={500}>Follow-up questions</Text>
+      {messages.length > 2 && (
+        <CopyIconButton
+          value={getChatContent()}
+          tooltipLabel="Copy conversation"
+        />
+      )}
+    </Group>
+  );
+}
+
+export default ChatHeader;

client/components/AiResponse/ChatInputArea.tsx

@@ -0,0 +1,89 @@
+import { Button, Group, Textarea } from "@mantine/core";
+import { IconSend } from "@tabler/icons-react";
+import { usePubSub } from "create-pubsub/react";
+import {
+  chatGenerationStatePubSub,
+  chatInputPubSub,
+  followUpQuestionPubSub,
+} from "../../modules/pubSub";
+
+interface ChatInputAreaProps {
+  onKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+  handleSend: (textToSend?: string) => void;
+}
+
+function ChatInputArea({ onKeyDown, handleSend }: ChatInputAreaProps) {
+  const [input, setInput] = usePubSub(chatInputPubSub);
+  const [generationState] = usePubSub(chatGenerationStatePubSub);
+  const [followUpQuestion] = usePubSub(followUpQuestionPubSub);
+
+  const isGenerating =
+    generationState.isGeneratingResponse &&
+    !generationState.isGeneratingFollowUpQuestion;
+
+  const placeholder =
+    followUpQuestion || "Anything else you would like to know?";
+
+  const onChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setInput(event.target.value);
+  };
+  const handleKeyDownWithPlaceholder = (
+    event: React.KeyboardEvent<HTMLTextAreaElement>,
+  ) => {
+    if (input.trim() === "" && followUpQuestion) {
+      if (event.key === "Enter" && !event.shiftKey) {
+        event.preventDefault();
+        handleSend(followUpQuestion);
+        return;
+      }
+    }
+
+    onKeyDown(event);
+  };
+
+  const handleSendWithPlaceholder = () => {
+    if (input.trim() === "" && followUpQuestion) {
+      handleSend(followUpQuestion);
+    } else {
+      handleSend();
+    }
+  };
+
+  return (
+    <Group align="flex-end" style={{ position: "relative" }}>
+      <Textarea
+        size="sm"
+        aria-label="Chat input"
+        placeholder={placeholder}
+        value={input}
+        onChange={onChange}
+        onKeyDown={handleKeyDownWithPlaceholder}
+        autosize
+        minRows={1}
+        maxRows={4}
+        style={{ flexGrow: 1, paddingRight: "50px" }}
+        disabled={isGenerating}
+      />
+      <Button
+        aria-label="Send message"
+        size="sm"
+        variant="default"
+        onClick={handleSendWithPlaceholder}
+        loading={isGenerating}
+        style={{
+          height: "100%",
+          position: "absolute",
+          right: 0,
+          top: 0,
+          bottom: 0,
+          borderTopLeftRadius: 0,
+          borderBottomLeftRadius: 0,
+        }}
+      >
+        <IconSend size={16} />
+      </Button>
+    </Group>
+  );
+}
+
+export default ChatInputArea;

client/components/AiResponse/ChatInterface.tsx

@@ -0,0 +1,236 @@
+import { Card, Stack } from "@mantine/core";
+import { usePubSub } from "create-pubsub/react";
+import type { ChatMessage } from "gpt-tokenizer/GptEncoding";
+import { type KeyboardEvent, useCallback, useEffect, useState } from "react";
+import throttle from "throttleit";
+import { generateFollowUpQuestion } from "../../modules/followUpQuestions";
+import { handleEnterKeyDown } from "../../modules/keyboard";
+import { addLogEntry } from "../../modules/logEntries";
+import {
+  chatGenerationStatePubSub,
+  chatInputPubSub,
+  followUpQuestionPubSub,
+  getImageSearchResults,
+  getTextSearchResults,
+  settingsPubSub,
+  updateImageSearchResults,
+  updateLlmTextSearchResults,
+  updateTextSearchResults,
+} from "../../modules/pubSub";
+import { generateRelatedSearchQuery } from "../../modules/relatedSearchQuery";
+import { searchImages, searchText } from "../../modules/search";
+import { generateChatResponse } from "../../modules/textGeneration";
+import ChatHeader from "./ChatHeader";
+import ChatInputArea from "./ChatInputArea";
+import MessageList from "./MessageList";
+
+interface ChatInterfaceProps {
+  initialQuery?: string;
+  initialResponse?: string;
+}
+
+export default function ChatInterface({
+  initialQuery,
+  initialResponse,
+}: ChatInterfaceProps) {
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [input, setInput] = usePubSub(chatInputPubSub);
+  const [generationState, setGenerationState] = usePubSub(
+    chatGenerationStatePubSub,
+  );
+  const [, setFollowUpQuestion] = usePubSub(followUpQuestionPubSub);
+  const [previousFollowUpQuestions, setPreviousFollowUpQuestions] = useState<
+    string[]
+  >([]);
+  const [settings] = usePubSub(settingsPubSub);
+  const [streamedResponse, setStreamedResponse] = useState("");
+  const updateStreamedResponse = useCallback(
+    throttle((response: string) => {
+      setStreamedResponse(response);
+    }, 1000 / 12),
+    [],
+  );
+
+  const regenerateFollowUpQuestion = useCallback(
+    async (currentQuery: string, currentResponse: string) => {
+      if (!currentResponse || !currentQuery.trim()) return;
+
+      try {
+        setGenerationState({
+          isGeneratingResponse: false,
+          isGeneratingFollowUpQuestion: true,
+        });
+
+        const newQuestion = await generateFollowUpQuestion({
+          topic: currentQuery,
+          currentContent: currentResponse,
+          previousQuestions: previousFollowUpQuestions,
+        });
+
+        setPreviousFollowUpQuestions((prev) =>
+          [...prev, newQuestion].slice(-5),
+        );
+        setFollowUpQuestion(newQuestion);
+        setGenerationState({
+          isGeneratingResponse: false,
+          isGeneratingFollowUpQuestion: false,
+        });
+      } catch (_) {
+        setFollowUpQuestion("");
+        setGenerationState({
+          isGeneratingResponse: false,
+          isGeneratingFollowUpQuestion: false,
+        });
+      }
+    },
+    [setFollowUpQuestion, setGenerationState, previousFollowUpQuestions],
+  );
+
+  useEffect(() => {
+    if (messages.length === 0 && initialQuery && initialResponse) {
+      setMessages([
+        { role: "user", content: initialQuery },
+        { role: "assistant", content: initialResponse },
+      ]);
+      regenerateFollowUpQuestion(initialQuery, initialResponse);
+    }
+  }, [
+    initialQuery,
+    initialResponse,
+    messages.length,
+    regenerateFollowUpQuestion,
+  ]);
+
+  const handleSend = async (textToSend?: string) => {
+    const currentInput = textToSend ?? input;
+    if (currentInput.trim() === "" || generationState.isGeneratingResponse)
+      return;
+
+    const userMessage: ChatMessage = { role: "user", content: currentInput };
+    const newMessages: ChatMessage[] = [...messages, userMessage];
+
+    if (messages.length === 0) {
+      setPreviousFollowUpQuestions([]);
+    }
+
+    setMessages(newMessages);
+    setInput(textToSend ? input : "");
+    setGenerationState({
+      ...generationState,
+      isGeneratingResponse: true,
+    });
+    setFollowUpQuestion("");
+    setStreamedResponse("");
+
+    try {
+      const relatedQuery = await generateRelatedSearchQuery([...newMessages]);
+      const searchQuery = relatedQuery || currentInput;
+
+      if (settings.enableTextSearch) {
+        const freshResults = await searchText(
+          searchQuery,
+          settings.searchResultsLimit,
+        );
+
+        if (freshResults.length > 0) {
+          const existingUrls = new Set(
+            getTextSearchResults().map(([, , url]) => url),
+          );
+
+          const uniqueFreshResults = freshResults.filter(
+            ([, , url]) => !existingUrls.has(url),
+          );
+
+          if (uniqueFreshResults.length > 0) {
+            updateTextSearchResults([
+              ...getTextSearchResults(),
+              ...uniqueFreshResults,
+            ]);
+            updateLlmTextSearchResults(
+              uniqueFreshResults.slice(0, settings.searchResultsToConsider),
+            );
+          }
+        }
+      }
+
+      if (settings.enableImageSearch) {
+        searchImages(searchQuery, settings.searchResultsLimit)
+          .then((imageResults) => {
+            if (imageResults.length > 0) {
+              const existingUrls = new Set(
+                getImageSearchResults().map(([, url]) => url),
+              );
+
+              const uniqueFreshResults = imageResults.filter(
+                ([, url]) => !existingUrls.has(url),
+              );
+
+              if (uniqueFreshResults.length > 0) {
+                updateImageSearchResults([
+                  ...uniqueFreshResults,
+                  ...getImageSearchResults(),
+                ]);
+              }
+            }
+          })
+          .catch((error) => {
+            addLogEntry(`Error in follow-up image search: ${error}`);
+          });
+      }
+    } catch (error) {
+      addLogEntry(`Error in follow-up search: ${error}`);
+    }
+
+    try {
+      const finalResponse = await generateChatResponse(
+        newMessages,
+        updateStreamedResponse,
+      );
+
+      setMessages((prevMessages) => [
+        ...prevMessages,
+        { role: "assistant", content: finalResponse },
+      ]);
+
+      addLogEntry("AI response completed");
+
+      await regenerateFollowUpQuestion(currentInput, finalResponse);
+    } catch (error) {
+      addLogEntry(`Error in chat response: ${error}`);
+      setMessages((prevMessages) => [
+        ...prevMessages,
+        {
+          role: "assistant",
+          content: "Sorry, I encountered an error while generating a response.",
+        },
+      ]);
+    } finally {
+      setGenerationState({
+        ...generationState,
+        isGeneratingResponse: false,
+      });
+    }
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    handleEnterKeyDown(event, settings, handleSend);
+  };
+
+  return (
+    <Card withBorder shadow="sm" radius="md">
+      <Card.Section withBorder inheritPadding py="xs">
+        <ChatHeader messages={messages} />
+      </Card.Section>
+      <Stack gap="md" pt="md">
+        <MessageList
+          messages={
+            generationState.isGeneratingResponse
+              ? [...messages, { role: "assistant", content: streamedResponse }]
+              : messages
+          }
+        />
+        <ChatInputArea onKeyDown={handleKeyDown} handleSend={handleSend} />
+      </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/EnableAiResponsePrompt.tsx

@@ -0,0 +1,80 @@
+import {
+  ActionIcon,
+  Alert,
+  Button,
+  Flex,
+  Group,
+  Popover,
+  Stack,
+  Text,
+} from "@mantine/core";
+import { IconCheck, IconInfoCircle, IconX } from "@tabler/icons-react";
+
+interface EnableAiResponsePromptProps {
+  onAccept: () => void;
+  onDecline: () => void;
+}
+
+export default function EnableAiResponsePrompt({
+  onAccept,
+  onDecline,
+}: EnableAiResponsePromptProps) {
+  const helpContent = (
+    <Stack gap="xs" p="xs">
+      <Text size="sm">
+        MiniSearch is a web-searching app with an integrated AI assistant.
+      </Text>
+      <Text size="sm">
+        With AI Responses enabled, it will generate summaries and answer
+        questions based on search results.
+      </Text>
+      <Text size="sm">
+        If disabled, it will function as a classic web search tool.
+      </Text>
+      <Text size="sm" c="dimmed" component="em">
+        You can toggle this feature at anytime through the Menu.
+      </Text>
+    </Stack>
+  );
+
+  return (
+    <Alert variant="light" color="blue" p="xs">
+      <Flex align="center" gap="xs">
+        <Text fw={500}>Enable AI Responses?</Text>
+        <Popover
+          width={300}
+          styles={{ dropdown: { maxWidth: "92vw" } }}
+          position="bottom"
+          withArrow
+          shadow="md"
+        >
+          <Popover.Target>
+            <ActionIcon variant="subtle" color="blue" size="sm">
+              <IconInfoCircle size="1rem" />
+            </ActionIcon>
+          </Popover.Target>
+          <Popover.Dropdown>{helpContent}</Popover.Dropdown>
+        </Popover>
+        <div style={{ flex: 1 }} />
+        <Group>
+          <Button
+            variant="subtle"
+            color="gray"
+            leftSection={<IconX size="1rem" />}
+            onClick={onDecline}
+            size="xs"
+          >
+            No, thanks
+          </Button>
+          <Button
+            leftSection={<IconCheck size="1rem" />}
+            onClick={onAccept}
+            size="xs"
+          >
+            Yes, please
+          </Button>
+        </Group>
+      </Flex>
+    </Alert>
+  );
+}

client/components/AiResponse/ExpandableLink.tsx

@@ -0,0 +1,123 @@
+import type { MantineTheme } from "@mantine/core";
+import { Button } from "@mantine/core";
+import React from "react";
+
+interface ExpandableLinkProps {
+  href: string;
+  children: React.ReactNode;
+}
+
+export default function ExpandableLink({
+  href,
+  children,
+}: ExpandableLinkProps) {
+  const childContent = children?.toString() || "";
+  const firstChar = childContent.charAt(0);
+  const [isExpanded, setIsExpanded] = React.useState(true);
+  const timerRef = React.useRef<number | null>(null);
+
+  React.useEffect(() => {
+    timerRef.current = window.setTimeout(() => {
+      setIsExpanded(false);
+      timerRef.current = null;
+    }, 3000);
+
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, []);
+
+  const handleMouseEnter = () => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+    setIsExpanded(true);
+  };
+
+  const handleMouseLeave = () => {
+    timerRef.current = window.setTimeout(() => {
+      setIsExpanded(false);
+      timerRef.current = null;
+    }, 3000);
+  };
+
+  const fullTextRef = React.useRef<HTMLDivElement>(null);
+  const [fullTextWidth, setFullTextWidth] = React.useState(0);
+
+  React.useEffect(() => {
+    const measureText = () => {
+      if (fullTextRef.current) {
+        setFullTextWidth(fullTextRef.current.scrollWidth);
+      }
+    };
+
+    measureText();
+
+    window.addEventListener("resize", measureText);
+    return () => {
+      window.removeEventListener("resize", measureText);
+    };
+  }, []);
+
+  return (
+    <Button
+      component="a"
+      href={href}
+      target="_blank"
+      rel="nofollow noopener noreferrer"
+      variant="light"
+      color="gray"
+      size="compact-xs"
+      radius="xl"
+      style={(theme: MantineTheme) => ({
+        textDecoration: "none",
+        transform: "translateY(-2px)",
+        overflow: "hidden",
+        position: "relative",
+        width: isExpanded ? `${fullTextWidth + theme.spacing.md}px` : "2em",
+        transition: "width 0.3s ease-in-out",
+        textAlign: "center",
+      })}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      onFocus={handleMouseEnter}
+      onBlur={handleMouseLeave}
+    >
+      <span
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          opacity: isExpanded ? 0 : 1,
+          transition: "opacity 0.2s ease-in-out",
+        }}
+      >
+        {firstChar}
+      </span>
+      <span
+        ref={fullTextRef}
+        style={{
+          opacity: isExpanded ? 1 : 0,
+          transition: "opacity 0.3s ease-in-out",
+          visibility: isExpanded ? "visible" : "hidden",
+          whiteSpace: "nowrap",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          height: "100%",
+          position: "relative",
+        }}
+      >
+        {children}
+      </span>
+    </Button>
+  );
+}

client/components/AiResponse/FormattedMarkdown.tsx

@@ -0,0 +1,41 @@
+import { TypographyStylesProvider } from "@mantine/core";
+import { useReasoningContent } from "./hooks/useReasoningContent";
+import MarkdownRenderer from "./MarkdownRenderer";
+import ReasoningSection from "./ReasoningSection";
+
+interface FormattedMarkdownProps {
+  children: string;
+  className?: string;
+  enableCopy?: boolean;
+}
+
+export default function FormattedMarkdown({
+  children,
+  className = "",
+  enableCopy = true,
+}: FormattedMarkdownProps) {
+  const { reasoningContent, mainContent, isGenerating } =
+    useReasoningContent(children);
+
+  if (!children) {
+    return null;
+  }
+
+  return (
+    <TypographyStylesProvider p="lg">
+      {reasoningContent && (
+        <ReasoningSection
+          content={reasoningContent}
+          isGenerating={isGenerating}
+        />
+      )}
+      {!isGenerating && mainContent && (
+        <MarkdownRenderer
+          content={mainContent}
+          enableCopy={enableCopy}
+          className={className}
+        />
+      )}
+    </TypographyStylesProvider>
+  );
+}

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/MarkdownRenderer.tsx

@@ -0,0 +1,93 @@
+import { CodeHighlight } from "@mantine/code-highlight";
+import { Box, Code, Divider } from "@mantine/core";
+import React from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import Markdown from "react-markdown";
+import rehypeExternalLinks from "rehype-external-links";
+import remarkGfm from "remark-gfm";
+import ExpandableLink from "./ExpandableLink";
+
+interface MarkdownRendererProps {
+  content: string;
+  enableCopy?: boolean;
+  className?: string;
+}
+
+export default function MarkdownRenderer({
+  content,
+  enableCopy = true,
+  className = "",
+}: MarkdownRendererProps) {
+  if (!content) {
+    return null;
+  }
+
+  return (
+    <Box className={className}>
+      <Markdown
+        remarkPlugins={[remarkGfm]}
+        rehypePlugins={[
+          [
+            rehypeExternalLinks,
+            { target: "_blank", rel: ["nofollow", "noopener", "noreferrer"] },
+          ],
+        ]}
+        components={{
+          a(props) {
+            const { href, children } = props;
+            return (
+              <ExpandableLink href={href || ""}>{children}</ExpandableLink>
+            );
+          },
+          li(props) {
+            const { children } = props;
+            const processedChildren = React.Children.map(children, (child) => {
+              if (React.isValidElement(child) && child.type === "p") {
+                return (child.props as { children: React.ReactNode }).children;
+              }
+              return child;
+            });
+            return <li>{processedChildren}</li>;
+          },
+          hr() {
+            return <Divider variant="dashed" my="md" />;
+          },
+          pre(props) {
+            return <>{props.children}</>;
+          },
+          code(props) {
+            const { children, className, node } = props;
+            const codeContent = children?.toString().replace(/\n$/, "") ?? "";
+            let language = "text";
+
+            if (className) {
+              const languageMatch = /language-(\w+)/.exec(className);
+              if (languageMatch) language = languageMatch[1];
+            }
+
+            if (
+              language === "text" &&
+              node?.position?.end.line === node?.position?.start.line
+            ) {
+              return <Code>{codeContent}</Code>;
+            }
+
+            return (
+              <ErrorBoundary fallback={<Code block>{codeContent}</Code>}>
+                <CodeHighlight
+                  code={codeContent}
+                  language={language}
+                  radius="md"
+                  withCopyButton={enableCopy}
+                  mb="xs"
+                />
+              </ErrorBoundary>
+            );
+          },
+        }}
+      >
+        {content}
+      </Markdown>
+    </Box>
+  );
+}

client/components/AiResponse/MessageList.tsx

@@ -0,0 +1,59 @@
+import { Paper, Stack } from "@mantine/core";
+import type { ChatMessage } from "gpt-tokenizer/GptEncoding";
+import { memo } from "react";
+import FormattedMarkdown from "./FormattedMarkdown";
+
+interface MessageListProps {
+  messages: ChatMessage[];
+}
+
+interface MessageProps {
+  message: ChatMessage;
+  index: number;
+}
+
+const Message = memo(
+  function Message({ message, index }: MessageProps) {
+    return (
+      <Paper
+        key={`${message.role}-${index}`}
+        shadow="xs"
+        radius="xl"
+        p="sm"
+        maw="90%"
+        style={{
+          alignSelf: message.role === "user" ? "flex-end" : "flex-start",
+        }}
+      >
+        <FormattedMarkdown>{message.content}</FormattedMarkdown>
+      </Paper>
+    );
+  },
+  (prevProps, nextProps) => {
+    return (
+      prevProps.message.content === nextProps.message.content &&
+      prevProps.message.role === nextProps.message.role
+    );
+  },
+);
+
+const MessageList = memo(function MessageList({ messages }: MessageListProps) {
+  if (messages.length <= 2) return null;
+
+  return (
+    <Stack gap="md">
+      {messages
+        .slice(2)
+        .filter((message) => message.content.length > 0)
+        .map((message, index) => (
+          <Message
+            key={`${message.role}-${index}`}
+            message={message}
+            index={index}
+          />
+        ))}
+    </Stack>
+  );
+});
+
+export default MessageList;

client/components/AiResponse/PreparingContent.tsx

@@ -0,0 +1,33 @@
+import { Card, Skeleton, Stack, Text } from "@mantine/core";
+
+export default function PreparingContent({
+  textGenerationState,
+}: {
+  textGenerationState: string;
+}) {
+  const getStateText = () => {
+    if (textGenerationState === "awaitingSearchResults") {
+      return "Awaiting search results...";
+    }
+    if (textGenerationState === "preparingToGenerate") {
+      return "Preparing AI response...";
+    }
+    return null;
+  };
+
+  return (
+    <Card withBorder shadow="sm" radius="md">
+      <Card.Section withBorder inheritPadding py="xs">
+        <Text fw={500}>{getStateText()}</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/ReasoningSection.tsx

@@ -0,0 +1,71 @@
+import {
+  Box,
+  Collapse,
+  Flex,
+  Group,
+  Loader,
+  Text,
+  UnstyledButton,
+} from "@mantine/core";
+import { IconChevronDown, IconChevronRight } from "@tabler/icons-react";
+import { useState } from "react";
+import MarkdownRenderer from "./MarkdownRenderer";
+
+interface ReasoningSectionProps {
+  content: string;
+  isGenerating?: boolean;
+}
+
+export default function ReasoningSection({
+  content,
+  isGenerating = false,
+}: ReasoningSectionProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <Box mb="xs">
+      <UnstyledButton
+        onClick={() => setIsOpen(!isOpen)}
+        style={(theme) => ({
+          width: "100%",
+          padding: theme.spacing.xs,
+          borderStartStartRadius: theme.radius.md,
+          borderStartEndRadius: theme.radius.md,
+          borderEndEndRadius: !isOpen ? theme.radius.md : 0,
+          borderEndStartRadius: !isOpen ? theme.radius.md : 0,
+          backgroundColor: theme.colors.dark[8],
+          "&:hover": {
+            backgroundColor: theme.colors.dark[5],
+          },
+          cursor: isOpen ? "zoom-out" : "zoom-in",
+        })}
+      >
+        <Group gap={3}>
+          {isOpen ? (
+            <IconChevronDown size={16} />
+          ) : (
+            <IconChevronRight size={16} />
+          )}
+          <Flex align="center" gap={6}>
+            <Text size="sm" c="dimmed" fs="italic" span>
+              {isGenerating ? "Thinking" : "Thought Process"}
+            </Text>
+            {isGenerating && <Loader size="sm" color="dimmed" type="dots" />}
+          </Flex>
+        </Group>
+      </UnstyledButton>
+      <Collapse in={isOpen}>
+        <Box
+          style={(theme) => ({
+            backgroundColor: theme.colors.dark[8],
+            padding: theme.spacing.sm,
+            borderBottomLeftRadius: theme.radius.md,
+            borderBottomRightRadius: theme.radius.md,
+          })}
+        >
+          <MarkdownRenderer content={content} enableCopy={false} />
+        </Box>
+      </Collapse>
+    </Box>
+  );
+}

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/AiResponse/hooks/useReasoningContent.ts

@@ -0,0 +1,42 @@
+import { usePubSub } from "create-pubsub/react";
+import { useCallback } from "react";
+import { settingsPubSub } from "../../../modules/pubSub";
+
+export function useReasoningContent(text: string) {
+  const [settings] = usePubSub(settingsPubSub);
+
+  const extractReasoningAndMainContent = useCallback(
+    (text: string, startMarker: string, endMarker: string) => {
+      if (!text)
+        return { reasoningContent: "", mainContent: "", isGenerating: false };
+
+      if (!text.trim().startsWith(startMarker))
+        return { reasoningContent: "", mainContent: text, isGenerating: false };
+
+      const endIndex = text.indexOf(endMarker);
+
+      if (endIndex === -1) {
+        return {
+          reasoningContent: text.slice(startMarker.length),
+          mainContent: "",
+          isGenerating: true,
+        };
+      }
+
+      return {
+        reasoningContent: text.slice(startMarker.length, endIndex),
+        mainContent: text.slice(endIndex + endMarker.length),
+        isGenerating: false,
+      };
+    },
+    [],
+  );
+
+  const result = extractReasoningAndMainContent(
+    text,
+    settings.reasoningStartMarker,
+    settings.reasoningEndMarker,
+  );
+
+  return result;
+}

client/components/App/App.tsx

@@ -0,0 +1,100 @@
+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 { verifyStoredAccessKey } from "../../modules/accessKey";
+import MainPage from "../Pages/Main/MainPage";
+
+const AccessPage = lazy(() => import("../Pages/AccessPage"));
+
+export function App() {
+  useInitializeSettings();
+  const { hasValidatedAccessKey, isCheckingStoredKey, setValidatedAccessKey } =
+    useAccessKeyValidation();
+
+  if (isCheckingStoredKey) {
+    return null;
+  }
+
+  return (
+    <MantineProvider defaultColorScheme="dark">
+      <Notifications />
+      <Switch>
+        <Route path="/">
+          {VITE_ACCESS_KEYS_ENABLED && !hasValidatedAccessKey ? (
+            <AccessPage onAccessKeyValid={() => setValidatedAccessKey(true)} />
+          ) : (
+            <MainPage />
+          )}
+        </Route>
+      </Switch>
+    </MantineProvider>
+  );
+}
+
+/**
+ * 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 [state, setState] = useState({
+    settingsInitialized: false,
+  });
+
+  useEffect(() => {
+    if (state.settingsInitialized) return;
+
+    setSettings({ ...defaultSettings, ...settings });
+
+    setState({ settingsInitialized: true });
+
+    addLogEntry("Settings initialized");
+  }, [settings, setSettings, state.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 [state, setState] = useState({
+    hasValidatedAccessKey: false,
+    isCheckingStoredKey: true,
+  });
+
+  useEffect(() => {
+    async function checkStoredAccessKey() {
+      if (VITE_ACCESS_KEYS_ENABLED) {
+        const isValid = await verifyStoredAccessKey();
+        if (isValid)
+          setState((prev) => ({ ...prev, hasValidatedAccessKey: true }));
+      }
+      setState((prev) => ({ ...prev, isCheckingStoredKey: false }));
+    }
+
+    checkStoredAccessKey();
+  }, []);
+
+  return {
+    hasValidatedAccessKey: state.hasValidatedAccessKey,
+    isCheckingStoredKey: state.isCheckingStoredKey,
+    setValidatedAccessKey: (value: boolean) =>
+      setState((prev) => ({ ...prev, hasValidatedAccessKey: value })),
+  };
+}

client/components/Logs/LogsModal.tsx

@@ -0,0 +1,136 @@
+import {
+  Alert,
+  Button,
+  Center,
+  CloseButton,
+  Group,
+  Modal,
+  Pagination,
+  Table,
+  TextInput,
+  Tooltip,
+} from "@mantine/core";
+import { IconInfoCircle, IconSearch } from "@tabler/icons-react";
+import { usePubSub } from "create-pubsub/react";
+import { useCallback, useEffect, 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 [filterText, setFilterText] = useState("");
+
+  const logEntriesPerPage = 5;
+
+  const filteredLogEntries = useMemo(() => {
+    if (!filterText) return logEntries;
+    const lowerCaseFilter = filterText.toLowerCase();
+    return logEntries.filter((entry) =>
+      entry.message.toLowerCase().includes(lowerCaseFilter),
+    );
+  }, [logEntries, filterText]);
+
+  const logEntriesFromCurrentPage = useMemo(
+    () =>
+      filteredLogEntries.slice(
+        (page - 1) * logEntriesPerPage,
+        page * logEntriesPerPage,
+      ),
+    [filteredLogEntries, page],
+  );
+
+  useEffect(() => {
+    void filterText;
+    setPage(1);
+  }, [filterText]);
+
+  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>
+      <TextInput
+        placeholder="Filter logs..."
+        mb="md"
+        leftSection={<IconSearch size={16} />}
+        value={filterText}
+        onChange={(event) => setFilterText(event.currentTarget.value)}
+        rightSection={
+          filterText ? (
+            <Tooltip label="Clear filter" withArrow>
+              <CloseButton
+                size="sm"
+                onClick={() => setFilterText("")}
+                aria-label="Clear filter"
+              />
+            </Tooltip>
+          ) : null
+        }
+      />
+      <Table striped highlightOnHover withTableBorder>
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th style={{ width: 80 }}>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(filteredLogEntries.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 { lazy, Suspense, 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,70 @@
+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";
+
+interface AccessPageState {
+  accessKey: string;
+  error: string;
+}
+
+export default function AccessPage({
+  onAccessKeyValid,
+}: {
+  onAccessKeyValid: () => void;
+}) {
+  const [state, setState] = useState<AccessPageState>({
+    accessKey: "",
+    error: "",
+  });
+
+  const handleSubmit = async (formEvent: FormEvent<HTMLFormElement>) => {
+    formEvent.preventDefault();
+    setState((prev) => ({ ...prev, error: "" }));
+    try {
+      const isValid = await validateAccessKey(state.accessKey);
+      if (isValid) {
+        addLogEntry("Valid access key entered");
+        onAccessKeyValid();
+      } else {
+        setState((prev) => ({ ...prev, error: "Invalid access key" }));
+        addLogEntry("Invalid access key attempt");
+      }
+    } catch (error) {
+      setState((prev) => ({ ...prev, error: "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={state.accessKey}
+              onChange={({ target }) =>
+                setState((prev) => ({ ...prev, accessKey: target.value }))
+              }
+              placeholder="Enter your access key to continue"
+              required
+              autoFocus
+              error={state.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,81 @@
+import { Container, Stack } from "@mantine/core";
+import { usePubSub } from "create-pubsub/react";
+import { lazy, Suspense } from "react";
+import {
+  imageSearchStatePubSub,
+  queryPubSub,
+  settingsPubSub,
+  textGenerationStatePubSub,
+  textSearchStatePubSub,
+} from "../../../modules/pubSub";
+import { searchAndRespond } from "../../../modules/textGeneration";
+import SearchForm from "../../Search/Form/SearchForm";
+import MenuButton from "./Menu/MenuButton";
+
+const AiResponseSection = lazy(
+  () => import("../../AiResponse/AiResponseSection"),
+);
+const SearchResultsSection = lazy(
+  () => import("../../Search/Results/SearchResultsSection"),
+);
+const EnableAiResponsePrompt = lazy(
+  () => import("../../AiResponse/EnableAiResponsePrompt"),
+);
+
+export default function MainPage() {
+  const [query, updateQuery] = usePubSub(queryPubSub);
+  const [textSearchState] = usePubSub(textSearchStatePubSub);
+  const [imageSearchState] = usePubSub(imageSearchStatePubSub);
+  const [textGenerationState] = usePubSub(textGenerationStatePubSub);
+  const [settings, setSettings] = usePubSub(settingsPubSub);
+
+  const isQueryEmpty = query.length === 0;
+
+  return (
+    <Container>
+      <Stack py="md" mih="100vh" justify={isQueryEmpty ? "center" : undefined}>
+        <SearchForm
+          query={query}
+          updateQuery={updateQuery}
+          additionalButtons={<MenuButton />}
+        />
+        {!isQueryEmpty && (
+          <>
+            {settings.showEnableAiResponsePrompt && (
+              <Suspense>
+                <EnableAiResponsePrompt
+                  onAccept={() => {
+                    setSettings({
+                      ...settings,
+                      showEnableAiResponsePrompt: false,
+                      enableAiResponse: true,
+                    });
+                    searchAndRespond();
+                  }}
+                  onDecline={() => {
+                    setSettings({
+                      ...settings,
+                      showEnableAiResponsePrompt: false,
+                      enableAiResponse: false,
+                    });
+                  }}
+                />
+              </Suspense>
+            )}
+            {!settings.showEnableAiResponsePrompt &&
+              textGenerationState !== "idle" && (
+                <Suspense>
+                  <AiResponseSection />
+                </Suspense>
+              )}
+            {(textSearchState !== "idle" || imageSearchState !== "idle") && (
+              <Suspense>
+                <SearchResultsSection />
+              </Suspense>
+            )}
+          </>
+        )}
+      </Stack>
+    </Container>
+  );
+}

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

@@ -0,0 +1,208 @@
+import { Select, Slider, Stack, Switch, Text, TextInput } from "@mantine/core";
+import { useForm } from "@mantine/form";
+import { usePubSub } from "create-pubsub/react";
+import { useMemo } from "react";
+import { settingsPubSub } from "../../../../../modules/pubSub";
+import {
+  defaultSettings,
+  inferenceTypes,
+} from "../../../../../modules/settings";
+import { isWebGPUAvailable } from "../../../../../modules/webGpu";
+import { AIParameterSlider } from "./components/AIParameterSlider";
+import { BrowserSettings } from "./components/BrowserSettings";
+import { HordeSettings } from "./components/HordeSettings";
+import { OpenAISettings } from "./components/OpenAISettings";
+import { SystemPromptInput } from "./components/SystemPromptInput";
+import { useHordeModels } from "./hooks/useHordeModels";
+import { useHordeUserInfo } from "./hooks/useHordeUserInfo";
+import { useOpenAiModels } from "./hooks/useOpenAiModels";
+
+export default function AISettingsForm() {
+  const [settings, setSettings] = usePubSub(settingsPubSub);
+  const { openAiModels, useTextInput } = useOpenAiModels(settings);
+  const hordeModels = useHordeModels(settings);
+  const hordeUserInfo = useHordeUserInfo(settings);
+
+  const form = useForm({
+    initialValues: settings,
+    onValuesChange: setSettings,
+  });
+
+  const inferenceTypeSupportsMinP =
+    (form.values.inferenceType === "browser" &&
+      (!isWebGPUAvailable || !form.values.enableWebGpu)) ||
+    form.values.inferenceType === "horde";
+
+  const penaltySliderMarks = useMemo(
+    () => [
+      { value: -2.0, label: "-2.0" },
+      { value: 0.0, label: "0" },
+      { value: 2.0, label: "2.0" },
+    ],
+    [],
+  );
+
+  const probabilitySliderMarks = useMemo(
+    () =>
+      Array.from({ length: 3 }, (_, index) => ({
+        value: index / 2,
+        label: (index / 2).toString(),
+      })),
+    [],
+  );
+
+  const searchResultsToConsiderSliderMarks = useMemo(
+    () =>
+      Array.from({ length: 7 }, (_, index) => ({
+        value: index,
+        label: index.toString(),
+      })),
+    [],
+  );
+
+  const temperatureSliderMarks = useMemo(
+    () => [
+      { value: 0, label: "0" },
+      { value: 1, label: "1" },
+      { value: 2, label: "2" },
+    ],
+    [],
+  );
+
+  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={searchResultsToConsiderSliderMarks}
+            />
+          </Stack>
+
+          <Select
+            {...form.getInputProps("inferenceType")}
+            label="AI Processing Location"
+            data={inferenceTypes}
+            allowDeselect={false}
+          />
+
+          {form.values.inferenceType === "openai" && (
+            <OpenAISettings
+              form={form}
+              openAiModels={openAiModels}
+              useTextInput={useTextInput}
+            />
+          )}
+
+          {form.values.inferenceType === "horde" && (
+            <HordeSettings
+              form={form}
+              hordeUserInfo={hordeUserInfo}
+              hordeModels={hordeModels}
+            />
+          )}
+
+          {form.values.inferenceType === "browser" && (
+            <BrowserSettings
+              form={form}
+              isWebGPUAvailable={isWebGPUAvailable}
+            />
+          )}
+
+          <SystemPromptInput form={form} />
+
+          <AIParameterSlider
+            label="Temperature"
+            description="Controls randomness in responses. Lower values make responses more focused and deterministic, while higher values make them more creative and diverse."
+            defaultValue={defaultSettings.inferenceTemperature}
+            {...form.getInputProps("inferenceTemperature")}
+            min={0}
+            max={2}
+            step={0.01}
+            marks={temperatureSliderMarks}
+          />
+
+          <AIParameterSlider
+            label="Top P"
+            description="Controls diversity by limiting cumulative probability of tokens. Lower values make responses more focused, while higher values allow more variety."
+            defaultValue={defaultSettings.inferenceTopP}
+            {...form.getInputProps("inferenceTopP")}
+            min={0}
+            max={1}
+            step={0.01}
+            marks={probabilitySliderMarks}
+          />
+
+          {inferenceTypeSupportsMinP && (
+            <AIParameterSlider
+              label="Min P"
+              description="Sets a minimum probability for token selection. Helps to filter out very unlikely tokens, making responses more coherent."
+              defaultValue={defaultSettings.minP}
+              {...form.getInputProps("minP")}
+              min={0}
+              max={1}
+              step={0.01}
+              marks={probabilitySliderMarks}
+            />
+          )}
+
+          <AIParameterSlider
+            label="Frequency Penalty"
+            description="Reduces repetition by penalizing tokens based on their frequency. Higher values decrease the likelihood of repeating the same information."
+            defaultValue={defaultSettings.inferenceFrequencyPenalty}
+            {...form.getInputProps("inferenceFrequencyPenalty")}
+            min={-2.0}
+            max={2.0}
+            step={0.01}
+            marks={penaltySliderMarks}
+          />
+
+          <AIParameterSlider
+            label="Presence Penalty"
+            description="Encourages new topics by penalizing tokens that have appeared. Higher values increase the model's likelihood to talk about new topics."
+            defaultValue={defaultSettings.inferencePresencePenalty}
+            {...form.getInputProps("inferencePresencePenalty")}
+            min={-2.0}
+            max={2.0}
+            step={0.01}
+            marks={penaltySliderMarks}
+          />
+
+          <Stack gap="xs" mb="md">
+            <Text size="sm">Reasoning Section Parsing</Text>
+            <Text size="xs" c="dimmed">
+              Configure how the AI's reasoning section is parsed in the
+              response.
+            </Text>
+            <Stack gap="xs">
+              <TextInput
+                {...form.getInputProps("reasoningStartMarker")}
+                description="Start Marker, indicating the start of a reasoning section."
+              />
+              <TextInput
+                {...form.getInputProps("reasoningEndMarker")}
+                description="End Marker, indicating the end of a reasoning section."
+              />
+            </Stack>
+          </Stack>
+        </>
+      )}
+    </Stack>
+  );
+}

client/components/Pages/Main/Menu/AISettings/components/AIParameterSlider.tsx

@@ -0,0 +1,17 @@
+import { Slider, Stack, Text } from "@mantine/core";
+import type { AIParameterSliderProps } from "../types";
+
+export const AIParameterSlider = ({
+  label,
+  description,
+  defaultValue,
+  ...props
+}: AIParameterSliderProps) => (
+  <Stack gap="xs" mb="md">
+    <Text size="sm">{label}</Text>
+    <Text size="xs" c="dimmed">
+      {description} Defaults to {defaultValue}.
+    </Text>
+    <Slider {...props} />
+  </Stack>
+);

client/components/Pages/Main/Menu/AISettings/components/BrowserSettings.tsx

@@ -0,0 +1,60 @@
+import { NumberInput, Skeleton, Switch } from "@mantine/core";
+import type { UseFormReturnType } from "@mantine/form";
+import { lazy, Suspense } from "react";
+import type { defaultSettings } from "../../../../../../modules/settings";
+
+const WebLlmModelSelect = lazy(
+  () => import("../../../../../../components/AiResponse/WebLlmModelSelect"),
+);
+const WllamaModelSelect = lazy(
+  () => import("../../../../../../components/AiResponse/WllamaModelSelect"),
+);
+
+interface BrowserSettingsProps {
+  form: UseFormReturnType<typeof defaultSettings>;
+  isWebGPUAvailable: boolean;
+}
+
+export const BrowserSettings = ({
+  form,
+  isWebGPUAvailable,
+}: BrowserSettingsProps) => (
+  <>
+    {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."
+      />
+    )}
+
+    {isWebGPUAvailable && form.values.enableWebGpu ? (
+      <Suspense fallback={<Skeleton height={50} />}>
+        <WebLlmModelSelect
+          value={form.values.webLlmModelId}
+          onChange={(value: string) =>
+            form.setFieldValue("webLlmModelId", value)
+          }
+        />
+      </Suspense>
+    ) : (
+      <>
+        <Suspense fallback={<Skeleton height={50} />}>
+          <WllamaModelSelect
+            value={form.values.wllamaModelId}
+            onChange={(value: string) =>
+              form.setFieldValue("wllamaModelId", value)
+            }
+          />
+        </Suspense>
+        <NumberInput
+          label="CPU threads to use"
+          description="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."
+          min={1}
+          {...form.getInputProps("cpuThreads")}
+        />
+      </>
+    )}
+  </>
+);

client/components/Pages/Main/Menu/AISettings/components/HordeSettings.tsx

@@ -0,0 +1,44 @@
+import { Select, TextInput } from "@mantine/core";
+import type { UseFormReturnType } from "@mantine/form";
+import type { defaultSettings } from "../../../../../../modules/settings";
+import { aiHordeDefaultApiKey } from "../../../../../../modules/textGenerationWithHorde";
+import type { HordeUserInfo, ModelOption } from "../types";
+
+interface HordeSettingsProps {
+  form: UseFormReturnType<typeof defaultSettings>;
+  hordeUserInfo: HordeUserInfo | null;
+  hordeModels: ModelOption[];
+}
+
+export const HordeSettings = ({
+  form,
+  hordeUserInfo,
+  hordeModels,
+}: HordeSettingsProps) => (
+  <>
+    <TextInput
+      label="API Key"
+      description={
+        hordeUserInfo
+          ? `Logged in as ${
+              hordeUserInfo.username
+            } (${hordeUserInfo.kudos.toLocaleString()} kudos)`
+          : "By default, it's set to '0000000000', for anonymous access. However, anonymous accounts have the lowest priority when there's too many concurrent requests."
+      }
+      type="password"
+      {...form.getInputProps("hordeApiKey")}
+    />
+    {form.values.hordeApiKey.length > 0 &&
+      form.values.hordeApiKey !== aiHordeDefaultApiKey && (
+        <Select
+          label="Model"
+          description="Optional. When not selected, AI Horde will automatically choose an available model."
+          placeholder="Auto-selected"
+          data={hordeModels}
+          {...form.getInputProps("hordeModel")}
+          searchable
+          clearable
+        />
+      )}
+  </>
+);

client/components/Pages/Main/Menu/AISettings/components/OpenAISettings.tsx

@@ -0,0 +1,57 @@
+import { Group, Select, Text, TextInput } from "@mantine/core";
+import type { UseFormReturnType } from "@mantine/form";
+import { IconInfoCircle } from "@tabler/icons-react";
+import type { defaultSettings } from "../../../../../../modules/settings";
+import type { ModelOption } from "../types";
+
+interface OpenAISettingsProps {
+  form: UseFormReturnType<typeof defaultSettings>;
+  openAiModels: ModelOption[];
+  useTextInput: boolean;
+}
+
+export const OpenAISettings = ({
+  form,
+  openAiModels,
+  useTextInput,
+}: OpenAISettingsProps) => (
+  <>
+    <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."
+    />
+    {useTextInput ? (
+      <TextInput
+        {...form.getInputProps("openAiApiModel")}
+        label="API Model"
+        description="Enter the model identifier"
+      />
+    ) : (
+      <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
+      />
+    )}
+  </>
+);

client/components/Pages/Main/Menu/AISettings/components/SystemPromptInput.tsx

@@ -0,0 +1,102 @@
+import { Text, Textarea } from "@mantine/core";
+import type { UseFormReturnType } from "@mantine/form";
+import { defaultSettings } from "../../../../../../modules/settings";
+
+interface SystemPromptInputProps {
+  form: UseFormReturnType<typeof defaultSettings>;
+}
+
+export const SystemPromptInput = ({ form }: SystemPromptInputProps) => {
+  const isUsingCustomInstructions =
+    form.values.systemPrompt !== defaultSettings.systemPrompt;
+
+  const handleRestoreDefaultInstructions = () => {
+    form.setFieldValue("systemPrompt", defaultSettings.systemPrompt);
+  };
+
+  return (
+    <Textarea
+      size="sm"
+      label="Instructions for AI"
+      descriptionProps={{
+        // @ts-expect-error Mantine v7: `InputDescriptionProps` does not support `component`.
+        component: "div",
+      }}
+      description={
+        <>
+          <Text size="xs" component="span">
+            Customize instructions for the AI to tailor its responses.
+          </Text>
+          <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>
+
+          <Text size="xs" component="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.
+          </Text>
+
+          {isUsingCustomInstructions && (
+            <>
+              <br />
+              <br />
+              <Text size="xs" component="span">
+                Currently, you're using custom instructions. If you ever need to
+                restore the default instructions, you can do so by clicking{" "}
+                <Text
+                  component="span"
+                  size="xs"
+                  c="blue"
+                  style={{ cursor: "pointer" }}
+                  onClick={handleRestoreDefaultInstructions}
+                >
+                  here
+                </Text>
+                .
+              </Text>
+            </>
+          )}
+        </>
+      }
+      autosize
+      maxRows={10}
+      {...form.getInputProps("systemPrompt")}
+    />
+  );
+};

client/components/Pages/Main/Menu/AISettings/hooks/useHordeModels.ts

@@ -0,0 +1,35 @@
+import { useEffect, useState } from "react";
+import { addLogEntry } from "../../../../../../modules/logEntries";
+import type { defaultSettings } from "../../../../../../modules/settings";
+import { fetchHordeModels } from "../../../../../../modules/textGenerationWithHorde";
+import type { ModelOption } from "../types";
+
+type Settings = typeof defaultSettings;
+
+export const useHordeModels = (settings: Settings) => {
+  const [hordeModels, setHordeModels] = useState<ModelOption[]>([]);
+
+  useEffect(() => {
+    async function fetchAvailableHordeModels() {
+      try {
+        const models = await fetchHordeModels();
+        const formattedModels = models.map((model) => ({
+          label: model.name,
+          value: model.name,
+        }));
+        setHordeModels(formattedModels);
+      } catch (error) {
+        const errorMessage =
+          error instanceof Error ? error.message : String(error);
+        addLogEntry(`Error fetching AI Horde models: ${errorMessage}`);
+        setHordeModels([]);
+      }
+    }
+
+    if (settings.inferenceType === "horde") {
+      fetchAvailableHordeModels();
+    }
+  }, [settings.inferenceType]);
+
+  return hordeModels;
+};

client/components/Pages/Main/Menu/AISettings/hooks/useHordeUserInfo.ts

@@ -0,0 +1,43 @@
+import { useEffect, useState } from "react";
+import { addLogEntry } from "../../../../../../modules/logEntries";
+import type { defaultSettings } from "../../../../../../modules/settings";
+import {
+  aiHordeDefaultApiKey,
+  fetchHordeUserInfo,
+} from "../../../../../../modules/textGenerationWithHorde";
+import type { HordeUserInfo } from "../types";
+
+type Settings = typeof defaultSettings;
+
+export const useHordeUserInfo = (settings: Settings) => {
+  const [hordeUserInfo, setHordeUserInfo] = useState<HordeUserInfo | null>(
+    null,
+  );
+
+  useEffect(() => {
+    async function fetchUserInfo() {
+      try {
+        if (
+          settings.hordeApiKey &&
+          settings.hordeApiKey !== aiHordeDefaultApiKey
+        ) {
+          const userInfo = await fetchHordeUserInfo(settings.hordeApiKey);
+          setHordeUserInfo(userInfo);
+        } else {
+          setHordeUserInfo(null);
+        }
+      } catch (error) {
+        const errorMessage =
+          error instanceof Error ? error.message : String(error);
+        addLogEntry(`Error fetching AI Horde user info: ${errorMessage}`);
+        setHordeUserInfo(null);
+      }
+    }
+
+    if (settings.inferenceType === "horde") {
+      fetchUserInfo();
+    }
+  }, [settings.inferenceType, settings.hordeApiKey]);
+
+  return hordeUserInfo;
+};

client/components/Pages/Main/Menu/AISettings/hooks/useOpenAiModels.ts

@@ -0,0 +1,56 @@
+import { useEffect, useState } from "react";
+import { addLogEntry } from "../../../../../../modules/logEntries";
+import type { defaultSettings } from "../../../../../../modules/settings";
+import type { ModelOption } from "../types";
+
+type Settings = typeof defaultSettings;
+
+export const useOpenAiModels = (settings: Settings) => {
+  const [openAiModels, setOpenAiModels] = useState<ModelOption[]>([]);
+  const [useTextInput, setUseTextInput] = useState(false);
+
+  useEffect(() => {
+    async function fetchOpenAiModels() {
+      try {
+        const response = await fetch(`${settings.openAiApiBaseUrl}/models`, {
+          headers: {
+            Authorization: `Bearer ${settings.openAiApiKey}`,
+          },
+        });
+
+        if (!response.ok) {
+          throw new Error(`Failed to fetch models: ${response.statusText}`);
+        }
+
+        const data = await response.json();
+        const modelIds: string[] = data.data.map(
+          (model: { id: string }) => model.id,
+        );
+        const uniqueModelIds = [...new Set(modelIds)];
+        const models = uniqueModelIds.map((id) => ({
+          label: id,
+          value: id,
+        }));
+
+        setOpenAiModels(models);
+        setUseTextInput(!Array.isArray(models) || models.length === 0);
+      } catch (error) {
+        const errorMessage =
+          error instanceof Error ? error.message : String(error);
+        addLogEntry(`Error fetching OpenAI models: ${errorMessage}`);
+        setOpenAiModels([]);
+        setUseTextInput(true);
+      }
+    }
+
+    if (settings.inferenceType === "openai" && settings.openAiApiBaseUrl) {
+      fetchOpenAiModels();
+    }
+  }, [
+    settings.inferenceType,
+    settings.openAiApiBaseUrl,
+    settings.openAiApiKey,
+  ]);
+
+  return { openAiModels, useTextInput };
+};

client/components/Pages/Main/Menu/AISettings/types.ts

@@ -0,0 +1,15 @@
+export interface ModelOption {
+  label: string;
+  value: string;
+}
+
+export interface HordeUserInfo {
+  username: string;
+  kudos: number;
+}
+
+export interface AIParameterSliderProps extends Record<string, unknown> {
+  label: string;
+  description: string;
+  defaultValue: number;
+}

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

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