Eslint: use aggressive configuration, from create-t3-app

2026-05-11 14:10:15 -07:00 · 2023-11-11 17:32:32 -08:00
824 changed files with 16935 additions and 81638 deletions
@@ -1,43 +0,0 @@
-# big-AGI non-code files
-/docs/
-/dist/
-README.md
-
-# Ignore build and log files
-Dockerfile
-/.dockerignore
-
-# Node build artifacts
-/node_modules
-/.pnp
-.pnp.js
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# versioning
-.git/
-.github/
-
-# IDEs
-.idea/
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-.pnpm-debug.log*
-
-# local env files
-.env*.local
-
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts
@@ -1,3 +1,59 @@
 {
-  "extends": "next/core-web-vitals"
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": true
+  },
+  "plugins": [
+    "@typescript-eslint"
+  ],
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:@typescript-eslint/recommended-type-checked",
+    "plugin:@typescript-eslint/stylistic-type-checked"
+  ],
+  "ignorePatterns": [
+    "next.config.js",
+    "node_modules/**/*",
+    "out/**/*",
+    ".next/**/*",
+    ".vercel/**/*"
+  ],
+  "rules": {
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-inferrable-types": "off",
+    "@typescript-eslint/no-namespace": "off",
+    "@typescript-eslint/no-redundant-type-constituents": "off",
+    "@typescript-eslint/no-unsafe-argument": "off",
+    "@typescript-eslint/no-unsafe-assignment": "off",
+    "@typescript-eslint/no-unsafe-call": "off",
+    "@typescript-eslint/no-unsafe-member-access": "off",
+    "@typescript-eslint/no-unsafe-return": "off",
+    "@typescript-eslint/prefer-nullish-coalescing": "off",
+    "@typescript-eslint/unbound-method": "off",
+
+    "@typescript-eslint/array-type": "off",
+    "@typescript-eslint/consistent-type-definitions": "off",
+    "@typescript-eslint/consistent-type-imports": "off",
+    /*"@typescript-eslint/consistent-type-imports": [
+      "warn",
+      {
+        "prefer": "type-imports",
+        "fixStyle": "separate-type-imports"
+      }
+    ],*/
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      {
+        "argsIgnorePattern": "^_"
+      }
+    ],
+    "@typescript-eslint/no-misused-promises": [
+      2,
+      {
+        "checksVoidReturn": {
+          "attributes": false
+        }
+      }
+    ]
+  }
 }
@@ -1,13 +0,0 @@
-# These are supported funding model platforms
-
-github: enricoros # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
-patreon: # Replace with a single Patreon username
-open_collective: # Replace with a single Open Collective username
-ko_fi: # Replace with a single Ko-fi username
-tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
-community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
-liberapay: # Replace with a single Liberapay username
-issuehunt: # Replace with a single IssueHunt username
-otechie: # Replace with a single Otechie username
-lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
-custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
@@ -1,32 +0,0 @@
-name: 🐞 Bug Report
-description: Create a report to help us improve
-title: '[BUG]'
-labels: [ 'type: bug' ]
-body:
-  - type: markdown
-    attributes:
-      value: Thank you for reporting a bug.
-  - type: textarea
-    attributes:
-      label: Description
-      description: (required) Please provide a clear description. Please also provide the steps to reproduce.
-      placeholder: 'Concise description + steps to reproduce.'
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: Device and browser
-      description: '(required) Please specify your Mobile/Desktop device, OS version, browser.'
-      placeholder: 'Device: (e.g., iPhone 16, Pixel 9, PC, Macbook...), OS: (e.g., iOS 17, Windows 12), Browser: (e.g., Chrome 119, Safari 18, Firefox..)'
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: Screenshots and more
-      placeholder: 'Attach screenshots, or add any additional context here.'
-  - type: checkboxes
-    attributes:
-      label: Willingness to Contribute
-      description: We appreciate contributions - would you be willing to submit a pull request?
-      options:
-        - label: '🙋‍♂️ Yes, I would like to contribute a fix.'
@@ -1,132 +0,0 @@
---
-name: Maintainers-Release
-about: Maintainers
-title: Release 1.2.3
-labels: ''
-assignees: enricoros
-
---
-
-## Release checklist:
-
- [x] Create a new [Release Issue](https://github.com/enricoros/big-AGI/issues/new?assignees=enricoros&projects=enricoros/4&template=maintainers-release.md&title=Release+1.2.3)
-  - [ ] Replace 1.1.0 with the _former_ release, and _1.2.3_ with THIS
- [ ] Update the [Roadmap](https://github.com/users/enricoros/projects/4/views/2) calling out shipped features
- [ ] Create and update a [Milestone](https://github.com/enricoros/big-agi/milestones) for the release
-  - [ ] Assign this task
-  - [ ] Assign all the shipped roadmap Issues
-  - [ ] Assign the relevant [recently closed Isssues](https://github.com/enricoros/big-agi/issues?q=is%3Aclosed+sort%3Aupdated-desc)
- Code changes:
-  - [ ] Create a release branch 'release-x.y.z': `git checkout -b release-1.2.3`
-  - [ ] Create a temporary tag `git tag v1.2.3 && git push opensource --tags`
-  - [ ] Create a [New Draft GitHub Release](https://github.com/enricoros/big-agi/releases/new), and generate the automated changelog (for new contributors)
-  - [ ] Update the release version in package.json, and `npm i`
-  - [ ] Update the in-app News version number
-  - [ ] Update in-app News [src/apps/news/news.data.tsx](/src/apps/news/news.data.tsx)
-  - [ ] Update in-app Cover graphics
-  - [ ] Update the README.md with the new release
-  - [ ] Copy the highlights to the [docs/changelog.md](/docs/changelog.md)
- Release:
-  - [ ] merge onto main `git checkout main && git merge --no-ff release-1.2.3`
-  - [ ] re-tag `git tag -f v1.2.3 && git push opensource --tags -f`
-  - [ ] verify deployment on Vercel
-  - [ ] verify container on GitHub Packages
-  - [ ] update the GitHub release
-  - [ ] push as stable `git push opensource main:main-stable`
- Announce:
-  - [ ] Discord announcement
-  - [ ] Twitter announcement
-
-### Links
-
- Milestone: https://github.com/enricoros/big-AGI/milestone/X
- GitHub release: https://github.com/enricoros/big-AGI/releases/tag/v1.2.3
- Former release task: #...
-
-## Artifacts Generation
-
-```markdown
-You help me generate the following collateral for the new release of my opensource application called big-AGI. The new release is 1.2.3.
-To familiarize yourself with the application, the following are the Website and the GitHub README.md.
-```
-
- paste the URL: https://big-agi.com
- drag & drop: [README.md](https://raw.githubusercontent.com/enricoros/big-AGI/v2-dev/README.md)
-
-```markdown
-I am announcing a new version, 1.2.3.
-For reference, the following was the collateral for 1.1.0 (Discord announcement, GitHub Release, in-app-news file news.data.tsx).
-```
-
- paste the former: `discord announcement`,
- `GitHub release`,
- `news.data.tsx`,
- `changelog.md`
-
-```markdown
-The following are the new developments for 1.2.3:
-
- ...
- git log --pretty=format:"%h %an %B" v1.1.0..v1.2.3 | clip
-```
-
- paste the link to the milestone (closed) and each individual issue (content will be downloaded)
- paste the output of the git log command
-
-### news.data.tsx
-
-```markdown
-I need the following from you:
-
-1. a table summarizing all the new features in 1.2.3 with the following columns: 4 words description (exactly what it is), short description, usefulness (what it does for the user), significance, link to the issue number (not the commit)), which will be used for the artifacts later
-2. then double-check the git log to see if there are any features of significance that are not in the table
-3. then score each feature in terms of importance for users (1-10), relative impact of the feature (1-10, where 10 applies to the broadest user base), and novelty and uniqueness (1-10, where 10 is truly unique and novel from what exists already)
-4. then improve the table, in decreasing order of importance for features, fixing any detail that's missing, in particular check if there are commits of significance from a user or developer point of view, which are not contained in the table
-5. then I want you then to update the news.data.tsx for the new release
-```
-
-### release name
-
-```markdown
-please brainstorm 10 different names for this release. see the former names here: https://big-agi.com/blog
-```
-
-You can follow with 'What do you think of Modelmorphic?' or other selected name
-
-### cover images
-
-```markdown
-Great, now I need to generate images for this. Before I used the following prompts (2 releases before).
-
-// An image of a capybara sculpted entirely from black cotton candy, set against a minimalist backdrop with splashes of bright, contrasting sparkles. The capybara is using a computer with split screen made of origami, split keyboard and is wearing origami sunglasses with very different split reflections. Split halves are very contrasting. Close up photography, bokeh, white background.
-import coverV113 from '../../../public/images/covers/release-cover-v1.13.0.png';
-// An image of a capybara sculpted entirely from black cotton candy, set against a minimalist backdrop with splashes of bright, contrasting sparkles. The capybara is calling on a 3D origami old-school pink telephone and the camera is zooming on the telephone. Close up photography, bokeh, white background.
-import coverV112 from '../../../public/images/covers/release-cover-v1.12.0.png';
-
-What can I do now as far as images? Give me 4 prompt ideas with the same style as looks as the former, but different scene or action
-```
-
-### Readme (and Changelog)
-
-```markdown
-I need you to update the README.md and the with the new release.
-Attaching the in-app news, with my language for you to improve on, but keep the tone.
-```
-
-### GitHub release
-
-```markdown
-Please create the 1.2.3 Release Notes for GitHub, following the format of the 1.1.0 GitHub release notes attached before.
-Use a truthful and honest tone, understanding that people's time and attention span is short.
-Today is 2024-XXXX-YYYY.
-```
-
-Now paste-attachment the former release notes (or 1.5.0 which was accurate and great), including the new contributors and
-some stats (# of commits, etc.), and roll it for the new release.
-
-### Discord announcement
-
-```markdown
-Can you generate my 1.2.3 big-AGI discord announcement from the GitHub Release announcement?
-Please keep the formatting and stye of the discord announcement for 1.1.0, but with the new messaging above.
-```
@@ -1,18 +0,0 @@
---
-name: Roadmap request
-about: Suggest a roadmap item
-title: "[Roadmap]"
-labels: ''
-assignees: ''
-
---
-
-**Why**
-(replace this text with yours) The reason behind the request - we love it to be framed for "users will be able to do x" rather than quick-aging hype-tech-of-the-day requests
-
-**Description**
-Clear and concise description of what you want to happen.
-
-**Requirements**
-If you can, Please break-down the changes use cases, UX, technology, architecture, etc.
- [ ] ...
@@ -7,16 +7,11 @@
 # To get a newer version, you will need to update the SHA.
 # You can also reference a tag or branch, but the action may change without warning.

-name: Create and publish Docker images
+name: Create and publish a Docker image

 on:
  push:
-    branches:
-      - v2-dev
-      #- v1-dev # Disabled because this is not needed anymore
-      #- v1-stable  # Disabled as the v* tag is used for stable releases
-    tags:
-      - 'v*'  # Trigger on version tags (e.g., v1.7.0)
+    branches: ['main']

 env:
  REGISTRY: ghcr.io
@@ -28,22 +23,13 @@ jobs:
    permissions:
      contents: read
      packages: write
-      security-events: write

    steps:
      - name: Checkout repository
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
+        uses: actions/checkout@v3

      - name: Log in to the Container registry
-        uses: docker/login-action@v3
+        uses: docker/login-action@65b78e6e13532edd9afa3aa52ac7964289d1a9c1
        with:
          registry: ${{ env.REGISTRY }}
          username: ${{ github.actor }}
@@ -51,35 +37,14 @@ jobs:

      - name: Extract metadata (tags, labels) for Docker
        id: meta
-        uses: docker/metadata-action@v5
+        uses: docker/metadata-action@9ec57ed1fcdbf14dcef7dfbe97b2010124a938b7
        with:
          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
-          tags: |
-            type=raw,value=development,enable=${{ github.ref == 'refs/heads/v2-dev' }} # For v2-dev branch
-            type=raw,value=stable,enable=${{ github.ref == 'refs/heads/v1-stable' }}
-            type=ref,event=tag  # Use the tag name as a tag for tag builds
-            type=semver,pattern={{version}}  # Generate semantic versioning tags for tag builds
-            type=sha,format=short,prefix=sha- # Just in case none of the above applies
-          labels: |
-            org.opencontainers.image.title=Big-AGI
-            org.opencontainers.image.description=Generative AI suite powered by state-of-the-art models
-            org.opencontainers.image.source=${{ github.server_url }}/${{ github.repository }}
-            org.opencontainers.image.documentation=https://big-agi.com

      - name: Build and push Docker image
-        uses: docker/build-push-action@v6
+        uses: docker/build-push-action@f2a1d5e99d037542a71f64918e516c093c6f3fc4
        with:
          context: .
-          file: Dockerfile
-          platforms: linux/amd64,linux/arm64
          push: true
          tags: ${{ steps.meta.outputs.tags }}
          labels: ${{ steps.meta.outputs.labels }}
-          build-args: |
-            NEXT_PUBLIC_GA4_MEASUREMENT_ID=${{ secrets.GA4_MEASUREMENT_ID }}
-          # Enable build cache (future)
-          #cache-from: type=gha
-          #cache-to: type=gha,mode=max
-          # Enable provenance and SBOM (future)
-          #provenance: true
-          #sbom: true
@@ -1,12 +1,5 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

-# Frontend Build: ignore API files disabled for this build
-/app/**/*.backup
-
-# Supabase - ignored for now
-/supabase/
-/*.sql
-
 # dependencies
 /node_modules
 /.pnp
@@ -17,7 +10,6 @@

 # next.js
 /.next/
-/dist/
 /out/

 # production
@@ -45,11 +37,4 @@ yarn-error.log*
 next-env.d.ts

 # other
-.idea/
-
-# Ingore k8s/env-secret.yaml
-./k8s/env-secret.yaml
-/certificates
-.env*.local
-/.run/dev (ENV).run.xml
-/src/modules/3rdparty/aider/scratch*
+.idea/
@@ -1,66 +1,42 @@
-# Base
-FROM node:22-alpine AS base
-ENV NEXT_TELEMETRY_DISABLED 1
+# Test
+FROM node:18-alpine as test-target
+ENV NODE_ENV=development
+ENV PATH $PATH:/usr/src/app/node_modules/.bin

-# Dependencies
-FROM base AS deps
-WORKDIR /app
+WORKDIR /usr/src/app

-# Dependency files
-COPY package*.json ./
-COPY src/server/prisma ./src/server/prisma
+COPY package*.json prisma/ ./

-# link ssl3 for latest Alpine
-RUN sh -c '[ ! -e /lib/libssl.so.3 ] && ln -s /usr/lib/libssl.so.3 /lib/libssl.so.3 || echo "Link already exists"'
+# CI and release builds should use npm ci to fully respect the lockfile.
+# Local development may use npm install for opportunistic package updates.
+ARG npm_install_command=ci
+RUN npm $npm_install_command

-# Install dependencies, including dev (release builds should use npm ci)
-ENV NODE_ENV development
-RUN npm ci
-
-
-# Builder
-FROM base AS builder
-WORKDIR /app
-
-# Optional argument to configure GA4 at build time (see: docs/deploy-analytics.md)
-ARG NEXT_PUBLIC_GA4_MEASUREMENT_ID
-ENV NEXT_PUBLIC_GA4_MEASUREMENT_ID=${NEXT_PUBLIC_GA4_MEASUREMENT_ID}
-
-# Copy development deps and source
-COPY --from=deps /app/node_modules ./node_modules
 COPY . .

-# Build the application
-ENV NODE_ENV production
+# Build
+FROM test-target as build-target
+ENV NODE_ENV=production
+
+# Use build tools, installed as development packages, to produce a release build.
 RUN npm run build

-# Reduce installed packages to production-only
+# Reduce installed packages to production-only.
 RUN npm prune --production

+# Archive
+FROM node:18-alpine as archive-target
+ENV NODE_ENV=production
+ENV PATH $PATH:/usr/src/app/node_modules/.bin

-# Runner
-FROM base AS runner
-WORKDIR /app
+WORKDIR /usr/src/app

-# As user
-RUN addgroup --system --gid 1001 nodejs
-RUN adduser --system --uid 1001 nextjs
-
-# Copy Built app
-COPY --from=builder --chown=nextjs:nodejs /app/public ./public
-COPY --from=builder --chown=nextjs:nodejs /app/.next ./.next
-COPY --from=builder --chown=nextjs:nodejs /app/node_modules ./node_modules
-COPY --from=builder --chown=nextjs:nodejs /app/src/server/prisma ./src/server/prisma
-
-# Minimal ENV for production
-ENV NODE_ENV production
-ENV PATH $PATH:/app/node_modules/.bin
-
-# Run as non-root user
-USER nextjs
+# Include only the release build and production packages.
+COPY --from=build-target /usr/src/app/node_modules node_modules
+COPY --from=build-target /usr/src/app/.next .next
+COPY --from=build-target /usr/src/app/public public

 # Expose port 3000 for the application to listen on
 EXPOSE 3000

-# Start the application
 CMD ["next", "start"]
@@ -1,6 +1,6 @@
 MIT License

-Copyright (c) 2023-2024 Enrico Ros
+Copyright (c) 2023 Enrico Ros

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -1,244 +1,201 @@
-# BIG-AGI 🧠✨
+# `BIG-AGI` 🤖💬

-Welcome to big-AGI, the AI suite for professionals that need function, form,
-simplicity, and speed. Powered by the latest models from 12 vendors and
-open-source servers, `big-AGI` offers best-in-class Chats,
-[Beams](https://github.com/enricoros/big-AGI/issues/470),
-and [Calls](https://github.com/enricoros/big-AGI/issues/354) with AI personas,
-visualizations, coding, drawing, side-by-side chatting, and more -- all wrapped in a polished UX.
+Welcome to `big-AGI` 👋 your personal AGI application
+powered by OpenAI GPT-4 and beyond. Designed for smart humans and super-heroes,
+this responsive web app comes with Personas, Drawing, Code Execution, PDF imports, Voice support,
+data Rendering, AGI functions, chats and much more. Comes with plenty of `#big-AGI-energy` 🚀

-Stay ahead of the curve with big-AGI. 🚀 Pros & Devs love big-AGI. 🤖
-
-[![Official Website](https://img.shields.io/badge/BIG--AGI.com-%23096bde?style=for-the-badge&logo=vercel&label=launch)](https://big-agi.com)
-
-> 🚀 Big-AGI 2 is launching Q4 2024. Be the first to experience it before the public release.
->
-> 👉 [Apply for Early Access](https://y2rjg0zillz.typeform.com/to/ZSADpr5u?utm_source=gh-2&utm_medium=readme&utm_campaign=ea2)
+[![Official Website](https://img.shields.io/badge/BIG--AGI.com-%23096bde?style=for-the-badge&logo=vercel&label=demo)](https://big-agi.com)

 Or fork & run on Vercel

-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fenricoros%2Fbig-AGI&env=OPENAI_API_KEY&envDescription=Backend%20API%20keys%2C%20optional%20and%20may%20be%20overridden%20by%20the%20UI.&envLink=https%3A%2F%2Fgithub.com%2Fenricoros%2Fbig-AGI%2Fblob%2Fmain%2Fdocs%2Fenvironment-variables.md&project-name=big-AGI)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fenricoros%2Fbig-agi&env=OPENAI_API_KEY,OPENAI_API_HOST&envDescription=OpenAI%20KEY%20for%20your%20deployment.%20Set%20HOST%20only%20if%20non-default.)

-### New Version
+## ✨ Key Features 👊

-This repository contains two main versions:
+![Ask away, paste a ton, copy the gems](docs/pixels/big-AGI-compo1.png)

- Big-AGI 2: next-generation, bringing the most advanced AI experience
-  - `v2-dev`: V2 development branch, the exciting one, future default
- Big-AGI Stable: as deployed on big-agi.com
-  - `v1-dev`: V1 development branch (this branch)
-  - `v1-stable`: Current stable version
+- **AI Personas**
+- **Polished UI**: installable web app, mobile-friendly, token counters, etc.
+- **Fast UX**: Microphone, Camera OCR, Drag files, Voice Synthesis
+- **Models**: [OpenAI](https://platform.openai.com/overview), [Anthropic](https://www.anthropic.com/product), [Azure](https://oai.azure.com/), [OpenRouter](https://openrouter.ai/), [Local models](https://github.com/oobabooga/text-generation-webui), and more
+- **Private**: use your own API keys and self-host if you like
+- **Advanced**: PDF import & Summarization, code execution
+- **Integrations**: ElevenLabs, Helicone, Paste.gg, Prodia and more

-Note: After the V2 release in Q4, `v2-dev` will become the default branch and `v1-dev` will reach EOL.
-
-### Quick links: 👉 [roadmap](https://github.com/users/enricoros/projects/4/views/2) 👉 [installation](docs/installation.md) 👉 [documentation](docs/README.md)
-
-### What's New in 1.16.1...1.16.8 · Sep 13, 2024 (patch releases)
-
- 1.16.8: OpenAI ChatGPT-4o Latest (o1-preview and o1-mini are supported in Big-AGI 2)
- 1.16.7: OpenAI support for GPT-4o 2024-08-06
- 1.16.6: Groq support for Llama 3.1 models
- 1.16.5: GPT-4o Mini support
- 1.16.4: 8192 tokens support for Claude 3.5 Sonnet
- 1.16.3: Anthropic Claude 3.5 Sonnet model support
- 1.16.2: Improve web downloads, as text, markdown, or HTML
- 1.16.2: Proper support for Gemini models
- 1.16.2: Added the latest Mistral model
- 1.16.2: Tokenizer support for gpt-4o
- 1.16.2: Updates to Beam
- 1.16.1: Support for the new OpenAI GPT-4o 2024-05-13 model
-
-### What's New in 1.16.0 · May 9, 2024 · Crystal Clear
-
- [Beam](https://big-agi.com/blog/beam-multi-model-ai-reasoning) core and UX improvements based on user feedback
- Chat cost estimation 💰 (enable it in Labs / hover the token counter)
- Save/load chat files with Ctrl+S / Ctrl+O on desktop
- Major enhancements to the Auto-Diagrams tool
- YouTube Transcriber Persona for chatting with video content, [#500](https://github.com/enricoros/big-AGI/pull/500)
- Improved formula rendering (LaTeX), and dark-mode diagrams, [#508](https://github.com/enricoros/big-AGI/issues/508), [#520](https://github.com/enricoros/big-AGI/issues/520)
- Models update: **Anthropic**, **Groq**, **Ollama**, **OpenAI**, **OpenRouter**, **Perplexity**
- Code soft-wrap, chat text selection toolbar, 3x faster on Apple silicon, and more [#517](https://github.com/enricoros/big-AGI/issues/517), [507](https://github.com/enricoros/big-AGI/pull/507)
-
-#### 3,000 Commits Milestone · April 7, 2024
-
-![big-AGI Milestone](https://github.com/enricoros/big-AGI/assets/32999/47fddbb1-9bd6-4b58-ace4-781dfcb80923)
-
- 🥇 Today we <b>celebrate commit 3000</b> in just over one year, and going stronger 🚀
- 📢️ Thanks everyone for your support and words of love for Big-AGI, we are committed to creating the best AI experiences for everyone.
-
-### What's New in 1.15.0 · April 1, 2024 · Beam
-
- ⚠️ [**Beam**: the multi-model AI chat](https://big-agi.com/blog/beam-multi-model-ai-reasoning). find better answers, faster - a game-changer for brainstorming, decision-making, and creativity. [#443](https://github.com/enricoros/big-AGI/issues/443)
- Managed Deployments **Auto-Configuration**: simplify the UI models setup with backend-set models. [#436](https://github.com/enricoros/big-AGI/issues/436)
- Message **Starring ⭐**: star important messages within chats, to attach them later. [#476](https://github.com/enricoros/big-AGI/issues/476)
- Enhanced the default Persona
- Fixes to Gemini models and SVGs, improvements to UI and icons
- 1.15.1: Support for Gemini Pro 1.5 and OpenAI Turbo models
- Beast release, over 430 commits, 10,000+ lines changed: [release notes](https://github.com/enricoros/big-AGI/releases/tag/v1.15.0), and changes [v1.14.1...v1.15.0](https://github.com/enricoros/big-AGI/compare/v1.14.1...v1.15.0)
-
-<details>
-<summary>What's New in 1.14.1 · March 7, 2024 · Modelmorphic</summary>
-
- **Anthropic** [Claude-3](https://www.anthropic.com/news/claude-3-family) model family support. [#443](https://github.com/enricoros/big-AGI/issues/443)
- New **[Perplexity](https://www.perplexity.ai/)** and **[Groq](https://groq.com/)** integration (thanks @Penagwin). [#407](https://github.com/enricoros/big-AGI/issues/407), [#427](https://github.com/enricoros/big-AGI/issues/427)
- **[LocalAI](https://localai.io/models/)** deep integration, including support for [model galleries](https://github.com/enricoros/big-AGI/issues/411)
- **Mistral** Large and Google **Gemini 1.5** support
- Performance optimizations: runs [much faster](https://twitter.com/enricoros/status/1756553038293303434?utm_source=localhost:3000&utm_medium=big-agi), saves lots of power, reduces memory usage
- Enhanced UX with auto-sizing charts, refined search and folder functionalities, perfected scaling
- And with more UI improvements, documentation, bug fixes (20 tickets), and developer enhancements
-
-</details>
-
-<details>
-<summary>What's New in 1.13.0 · Feb 8, 2024 · Multi + Mind</summary>
-
-https://github.com/enricoros/big-AGI/assets/32999/01732528-730e-41dc-adc7-511385686b13
-
- **Side-by-Side Split Windows**: multitask with parallel conversations. [#208](https://github.com/enricoros/big-AGI/issues/208)
- **Multi-Chat Mode**: message everyone, all at once. [#388](https://github.com/enricoros/big-AGI/issues/388)
- **Export tables as CSV**: big thanks to @aj47. [#392](https://github.com/enricoros/big-AGI/pull/392)
- Adjustable text size: customize density. [#399](https://github.com/enricoros/big-AGI/issues/399)
- Dev2 Persona Technology Preview
- Better looking chats with improved spacing, fonts, and menus
- More: new video player, [LM Studio tutorial](https://github.com/enricoros/big-AGI/blob/main/docs/config-local-lmstudio.md) (thanks @aj47), [MongoDB support](https://github.com/enricoros/big-AGI/blob/main/docs/deploy-database.md) (thanks @ranfysvalle02), and speedups
-
-</details>
-
-<details>
-<summary>What's New in 1.12.0 · Jan 26, 2024 · AGI Hotline</summary>
-
-https://github.com/enricoros/big-AGI/assets/32999/95ceb03c-945d-4fdd-9a9f-3317beb54f3f
-
- **Voice Calls**: real-time voice call your personas out of the blue or in relation to a chat [#354](https://github.com/enricoros/big-AGI/issues/354)
- Support **OpenAI 0125** Models. [#364](https://github.com/enricoros/big-AGI/issues/364)
- Rename or Auto-Rename chats.  [#222](https://github.com/enricoros/big-AGI/issues/222), [#360](https://github.com/enricoros/big-AGI/issues/360)
- More control over **Link Sharing** [#356](https://github.com/enricoros/big-AGI/issues/356)
- **Accessibility** to screen readers [#358](https://github.com/enricoros/big-AGI/issues/358)
- Export chats to Markdown [#337](https://github.com/enricoros/big-AGI/issues/337)
- Paste tables from Excel [#286](https://github.com/enricoros/big-AGI/issues/286)
- Ollama model updates and context window detection fixes [#309](https://github.com/enricoros/big-AGI/issues/309)
-
-</details>
-
-<details>
-<summary>What's New in 1.11.0 · Jan 16, 2024 · Singularity</summary>
-
-https://github.com/enricoros/big-AGI/assets/1590910/a6b8e172-0726-4b03-a5e5-10cfcb110c68
-
- **Find chats**: search in titles and content, with frequency ranking. [#329](https://github.com/enricoros/big-AGI/issues/329)
- **Commands**: command auto-completion (type '/'). [#327](https://github.com/enricoros/big-AGI/issues/327)
- **[Together AI](https://www.together.ai/products#inference)** inference platform support (good speed and newer models). [#346](https://github.com/enricoros/big-AGI/issues/346)
- Persona Creator history, deletion, custom creation, fix llm API timeouts
- Enable adding up to five custom OpenAI-compatible endpoints
- Developer enhancements: new 'Actiles' framework
-
-</details>
-
-<details>
-<summary>What's New in 1.10.0 · Jan 6, 2024 · The Year of AGI</summary>
-
- **New UI**: for both desktop and mobile, sets the stage for future scale. [#201](https://github.com/enricoros/big-AGI/issues/201)
- **Conversation Folders**: enhanced conversation organization. [#321](https://github.com/enricoros/big-AGI/issues/321)
- **[LM Studio](https://lmstudio.ai/)** support and improved token management
- Resizable panes in split-screen conversations.
- Large performance optimizations
- Developer enhancements: new UI framework, updated documentation for proxy settings on browserless/docker
-
-</details>
-
-For full details and former releases, check out the [changelog](docs/changelog.md).
-
-## 👉 Key Features ✨
-
-| ![Advanced AI](https://img.shields.io/badge/Advanced%20AI-32383e?style=for-the-badge&logo=ai&logoColor=white) | ![100+ AI Models](https://img.shields.io/badge/100%2B%20AI%20Models-32383e?style=for-the-badge&logo=ai&logoColor=white) | ![Flow-state UX](https://img.shields.io/badge/Flow--state%20UX-32383e?style=for-the-badge&logo=flow&logoColor=white) | ![Privacy First](https://img.shields.io/badge/Privacy%20First-32383e?style=for-the-badge&logo=privacy&logoColor=white) | ![Advanced Tools](https://img.shields.io/badge/Fun%20To%20Use-f22a85?style=for-the-badge&logo=tools&logoColor=white) |  
-|---------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------| 
-| **Chat**<br/>**Call**<br/>**Beam**<br/>**Draw**, ...                                                          | Local & Cloud<br/>Open & Closed<br/>Cheap & Heavy<br/>Google, Mistral, ...                                              | Attachments<br/>Diagrams<br/>Multi-Chat<br/>Mobile-first UI                                                          | Stored Locally<br/>Easy self-Host<br/>Local actions<br/>Data = Gold                                                    | AI Personas<br/>Voice Modes<br/>Screen Capture<br/>Camera + OCR                                                      |
-
-![big-AGI screenshot](docs/pixels/big-AGI-compo-20240201_small.png)
-
-You can easily configure 100s of AI models in big-AGI:
-
-| **AI models**       | _supported vendors_                                                                                                                                                                                                             |
-|:--------------------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| Opensource Servers  | [LocalAI](https://localai.io/) (multimodal) · [Ollama](https://ollama.com/)                                                                                                                                                     |
-| Local Servers       | [LM Studio](https://lmstudio.ai/)                                                                                                                                                                                               |
-| Multimodal services | [Azure](https://azure.microsoft.com/en-us/products/ai-services/openai-service) · [Google Gemini](https://ai.google.dev/) · [OpenAI](https://platform.openai.com/docs/overview)                                                  |
-| Language services   | [Anthropic](https://anthropic.com) · [Groq](https://wow.groq.com/) · [Mistral](https://mistral.ai/) · [OpenRouter](https://openrouter.ai/) · [Perplexity](https://www.perplexity.ai/) · [Together AI](https://www.together.ai/) | 
-| Image services      | [Prodia](https://prodia.com/) (SDXL)                                                                                                                                                                                            | 
-| Speech services     | [ElevenLabs](https://elevenlabs.io) (Voice synthesis / cloning)                                                                                                                                                                 | 
-
-Add extra functionality with these integrations:
-
-| **More**     | _integrations_                                                                                                 |
-|:-------------|:---------------------------------------------------------------------------------------------------------------| 
-| Web Browse   | [Browserless](https://www.browserless.io/) · [Puppeteer](https://pptr.dev/)-based                              |
-| Web Search   | [Google CSE](https://programmablesearchengine.google.com/)                                                     |
-| Code Editors | [CodePen](https://codepen.io/pen/) · [StackBlitz](https://stackblitz.com/) · [JSFiddle](https://jsfiddle.net/) |
-| Sharing      | [Paste.gg](https://paste.gg/) (Paste chats)                                                                    | 
-| Tracking     | [Helicone](https://www.helicone.ai) (LLM Observability)                                                        | 
-
-[//]: # (- [x] **Flow-state UX** for uncompromised productivity)
-
-[//]: # (- [x] **AI Personas**: Tailor your AI interactions with customizable personas)
-
-[//]: # (- [x] **Sleek UI/UX**: A smooth, intuitive, and mobile-responsive interface)
-
-[//]: # (- [x] **Efficient Interaction**: Voice commands, OCR, and drag-and-drop file uploads)
-
-[//]: # (- [x] **Privacy First**: Self-host and use your own API keys for full control)
-
-[//]: # (- [x] **Advanced Tools**: Execute code, import PDFs, and summarize documents)
-
-[//]: # (- [x] **Seamless Integrations**: Enhance functionality with various third-party services)
-
-[//]: # (- [x] **Open Roadmap**: Contribute to the progress of big-AGI)
-
-<br/>
-
-## 🚀 Installation
-
-To get started with big-AGI, follow our comprehensive [Installation Guide](docs/installation.md).
-The guide covers various installation options, whether you're spinning it up on
-your local computer, deploying on Vercel, on Cloudflare, or rolling it out
-through Docker.
-
-Whether you're a developer, system integrator, or enterprise user, you'll find step-by-step instructions
-to set up big-AGI quickly and easily.
-
-[![Installation Guide](https://img.shields.io/badge/Installation%20Guide-blue?style=for-the-badge&logo=read-the-docs&logoColor=white)](docs/installation.md)
-
-Or bring your API keys and jump straight into our free instance on [big-AGI.com](https://big-agi.com).
-
-<br/>
-
-# 🌟 Get Involved!
+## 💖 Support

 [//]: # ([![Official Discord]&#40;https://img.shields.io/discord/1098796266906980422?label=discord&logo=discord&logoColor=%23fff&style=for-the-badge&#41;]&#40;https://discord.gg/MkH4qj2Jp9&#41;)
 [![Official Discord](https://discordapp.com/api/guilds/1098796266906980422/widget.png?style=banner2)](https://discord.gg/MkH4qj2Jp9)

- [ ] 📢️ [**Chat with us** on Discord](https://discord.gg/MkH4qj2Jp9)
- [ ] ⭐ **Give us a star** on GitHub 👆
- [ ] 🚀 **Do you like code**? You'll love this gem of a project! [_Pick up a task!_](https://github.com/users/enricoros/projects/4/views/4) - _easy_ to _pro_
- [ ] 💡 Got a feature suggestion? [_Add your roadmap ideas_](https://github.com/enricoros/big-agi/issues/new?&template=roadmap-request.md)
- [ ] ✨ [Deploy](docs/installation.md) your [fork](docs/customizations.md) for your friends and family, or [customize it for work](docs/customizations.md)
+* Enjoy the hosted open-source app on [big-AGI.com](https://big-agi.com)
+* [Chat with us](https://discord.gg/MkH4qj2Jp9)
+* Deploy your [fork](https://github.com/enricoros/big-agi/fork) for your friends and family
+* send PRs! ...
+  🎭[Editing Personas](https://github.com/enricoros/big-agi/issues/35),
+  🧩[Reasoning Systems](https://github.com/enricoros/big-agi/issues/36),
+  🌐[Community Templates](https://github.com/enricoros/big-agi/issues/35),
+  and [your big-IDEAs](https://github.com/enricoros/big-agi/issues/new?labels=RFC&body=Describe+the+idea)

 <br/>

-[//]: # ([![GitHub stars]&#40;https://img.shields.io/github/stars/enricoros/big-agi&#41;]&#40;https://github.com/enricoros/big-agi/stargazers&#41;)
+## 🧠 Latest Drops

-[//]: # ([![GitHub forks]&#40;https://img.shields.io/github/forks/enricoros/big-agi&#41;]&#40;https://github.com/enricoros/big-agi/network&#41;)
+#### Next

-[//]: # ([![GitHub pull requests]&#40;https://img.shields.io/github/issues-pr/enricoros/big-agi&#41;]&#40;https://github.com/enricoros/big-agi/pulls&#41;)
+- **Cloudflare API Gateway** support
+- **Helicone for Anthropic** support
+- **Text Tools** - incl. highlight differences

-[//]: # ([![License]&#40;https://img.shields.io/github/license/enricoros/big-agi&#41;]&#40;https://github.com/enricoros/big-agi/LICENSE&#41;)
+#### 1.4.0: Sept/Oct: scale OUT

-## 📜 Licensing
+- **Expanded Model Support**: Azure and [OpenRouter](https://openrouter.ai/docs#models) models, including gpt-4-32k
+- **Share and clone** conversations with public links
+- Removed the 20 chats hard limit ([Ashesh3](https://github.com/enricoros/big-agi/pull/158))
+- Latex Rendering
+- Augmented Chat modes (Labs)

-Big-AGI incorporates third-party software components that are subject
-to separate license terms. For detailed information about these
-components and their respective licenses, please refer to
-the [Third-Party Notices](src/modules/3rdparty/THIRD_PARTY_NOTICES.md).
+#### July/Aug: More Better Faster

---
+- **Camera OCR** - real-world AI - take a picture of a text, and chat with it
+- **Anthropic models** support, e.g. Claude
+- **Backup/Restore** - save chats, and restore them later
+- **[Local model support with Oobabooga server](docs/config-local-oobabooga)** - run your own LLMs!
+- **Flatten conversations** - conversations summarizer with 4 modes
+- **Fork conversations** - create a new chat, to experiment with different endings
+- New commands: /s to add a System message, and /a for an Assistant message
+- New Chat modes: Write-only - just appends the message, without assistant response
+- Fix STOP generation - in sync with the Vercel team to fix a long-standing NextJS issue
+- Fixes on the HTML block - particularly useful to see error pages

-2023-2024 · Enrico Ros x [Big-AGI](https://big-agi.com) · Like this project? Leave a star! 💫⭐
+#### June: scale UP
+
+- **[New OpenAI Models](https://openai.com/blog/function-calling-and-other-api-updates) support** - 0613 models, including 16k and 32k
+- **Cleaner UI** - with rationalized Settings, Modals, and Configurators
+- **Dynamic Models Configurator** - easy connection with different model vendors
+- **Multiple Model Vendors Support** framework to support many LLM vendors
+- **Per-model Options** (temperature, tokens, etc.) for fine-tuning AI behavior to your needs
+- Support for GPT-4-32k
+- Improved Dialogs and Messages
+- Much Enhanced DX: TRPC integration, modularization, pluggable UI, etc
+
+#### April / May: more #big-agi-energy
+
+- **[Google Search](docs/pixels/feature_react_google.png)** active in ReAct - add your keys to Settings > Google
+  Search
+- **[Reason+Act](docs/pixels/feature_react_turn_on.png)** preview feature - activate with 2-taps on the 'Chat' button
+- **[Image Generation](docs/pixels/feature_imagine_command.png)** using Prodia (BYO Keys) - /imagine - or menu option
+- **[Voice Synthesis](docs/pixels/feature_voice_1.png)** 📣 with ElevenLabs, including selection of custom voices
+- **[Precise Token Counter](docs/pixels/feature_token_counter.png)** 📈 extra-useful to pack the context window
+- **[Install Mobile APP](docs/pixels/feature_pwa.png)** 📲 looks like native (@harlanlewis)
+- **[UI language](docs/pixels/feature_language.png)** with auto-detect, and future app language! (@tbodyston)
+- **PDF Summarization** 🧩🤯 - ask questions to a PDF! (@fredliubojin)
+- **Code Execution: [Codepen](https://codepen.io/)/[Replit](https://replit.com/)** 💻 (@harlanlewis)
+- **[SVG Drawing](docs/pixels/feature_svg_drawing.png)** - draw with AI 🎨
+- Chats: multiple chats, AI titles, Import/Export, Selection mode
+- Rendering: Markdown, SVG, improved Code blocks
+- Integrations: OpenAI organization ID
+- [Cloudflare deployment instructions](docs/deploy-cloudflare.md),
+  [awesome-agi](https://github.com/enricoros/awesome-agi)
+- [Typing Avatars](docs/pixels/gif_typing_040123.gif) ⌨️
+  <!-- p><a href="docs/pixels/gif_typing_040123.gif"><img src="docs/pixels/gif_typing_040123.gif" width='700' alt="New Typing Avatars"/></a></p -->
+
+#### March: first release
+
+- **[AI Personas](docs/pixels/feature_purpose_two.png)** - including Code, Science, Corporate, and Chat 🎭
+- **Privacy**: user-owned API keys 🔑 and localStorage 🛡️
+- **Context** - Attach or [Drag & Drop files](docs/pixels/feature_drop_target.png) to add them to the prompt 📁
+- **Syntax highlighting** - for multiple languages 🌈
+- **Code Execution: Sandpack** -
+  [now on branch]((https://github.com/enricoros/big-agi/commit/f678a0d463d5e9cf0733f577e11bd612b7902d89)) `variant-code-execution`
+- Chat with GPT-4 and 3.5 Turbo 🧠💨
+- Real-time streaming of AI responses ⚡
+- **Voice Input** 🎙️ - works great on Chrome / Windows
+- Integration: **[Paste.gg](docs/pixels/feature_paste_gg.png)** integration for chat sharing 📥
+- Integration: **[Helicone](https://www.helicone.ai/)** integration for API observability 📊
+- 🌙 Dark model - Wide mode ⛶
+
+<br/>
+
+## Why this? 💡
+
+Because the official Chat ___lacks important features___, is ___more limited than the api___, at times
+___slow or unavailable___, and you cannot deploy it yourself, remix it, add features, or share it with
+your friends.
+Our users report that ___big-AGI is faster___, ___more reliable___, and ___features rich___
+with features that matter to them.
+
+![Much features, so fun](docs/pixels/big-AGI-compo2b.png)
+
+## Develop 🧩
+
+![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=&logo=typescript&logoColor=white)
+![React](https://img.shields.io/badge/React-61DAFB?style=&logo=react&logoColor=black)
+![Next.js](https://img.shields.io/badge/Next.js-000000?style=&logo=vercel&logoColor=white)
+
+Clone this repo, install the dependencies, and run the development server:
+
+```bash
+git clone https://github.com/enricoros/big-agi.git
+cd big-agi
+npm install
+npm run dev
+```
+
+Now the app should be running on `http://localhost:3000`
+
+### Integrations:
+
+* [ElevenLabs](https://elevenlabs.io/) Voice Synthesis (bring your own voice too) - Settings > Text To Speech
+* [Helicone](https://www.helicone.ai/) LLM Observability Platform - Models > OpenAI > Advanced > API Host: 'oai.hconeai.com'
+* [Paste.gg](https://paste.gg/) Paste Sharing - Chat Menu > Share via paste.gg
+* [Prodia](https://prodia.com/) Image Generation - Settings > Image Generation > Api Key & Model
+
+## Deploy with Docker 🐳
+
+For more detailed information on deploying with Docker, please refer to the [docker deployment documentation](docs/deploy-docker.md).
+
+### 🔧 Locally built image
+
+> Firstly, write all your API keys and env vars to an `.env` file, and make sure the env file is using *both build and run*.
+> See [docs/environment-variables.md](docs/environment-variables.md) for a list of all environment variables.
+
+```bash
+
+```bash
+docker build -t big-agi .
+docker run --detach 'big-agi'
+``` 
+
+### Pre-built image
+
+> Warning: the UI will still be asking for keys, as the image was built without the API keys
+
+```bash
+docker-compose up
+```
+
+## Deploy with Cloudflare Pages ☁️
+
+Please refer to the [Cloudflare deployment documentation](docs/deploy-cloudflare.md).
+
+## Deploy with Vercel 🚀
+
+Create your GitHub fork, create a Vercel project over that fork, and deploy it. Or press the button below for convenience.
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fenricoros%2Fbig-agi&env=OPENAI_API_KEY,OPENAI_API_HOST&envDescription=OpenAI%20KEY%20for%20your%20deployment.%20Set%20HOST%20only%20if%20non-default.)
+
+
+
+<br/>
+
+This project is licensed under the MIT License.
+
+[![GitHub stars](https://img.shields.io/github/stars/enricoros/big-agi)](https://github.com/enricoros/big-agi/stargazers)
+[![GitHub forks](https://img.shields.io/github/forks/enricoros/big-agi)](https://github.com/enricoros/big-agi/network)
+[![GitHub pull requests](https://img.shields.io/github/issues-pr/enricoros/big-agi)](https://github.com/enricoros/big-agi/pulls)
+[![License](https://img.shields.io/github/license/enricoros/big-agi)](https://github.com/enricoros/big-agi/LICENSE)
+
+[//]: # ([![GitHub issues]&#40;https://img.shields.io/github/issues/enricoros/big-agi&#41;]&#40;https://github.com/enricoros/big-agi/issues&#41;)
+
+Made with 💙
@@ -1,24 +0,0 @@
-import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
-
-import { appRouterCloud } from '~/server/trpc/trpc.router-cloud';
-import { createTRPCFetchContext } from '~/server/trpc/trpc.server';
-
-const handlerNodeRoutes = (req: Request) => fetchRequestHandler({
-  endpoint: '/api/cloud',
-  router: appRouterCloud,
-  req,
-  createContext: createTRPCFetchContext,
-  onError:
-    process.env.NODE_ENV === 'development'
-      ? ({ path, error }) => console.error(`❌ tRPC-cloud failed on ${path ?? 'unk-path'}: ${error.message}`)
-      : undefined,
-});
-
-
-// NOTE: the following statement breaks the build on non-pro deployments, and conditionals don't work either
-//       so we resorted to raising the timeout from 10s to 25s in the vercel.json file instead
-// export const maxDuration = 25;
-
-export const runtime = 'nodejs';
-export const dynamic = 'force-dynamic';
-export { handlerNodeRoutes as GET, handlerNodeRoutes as POST };
@@ -1,18 +0,0 @@
-import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
-
-import { appRouterEdge } from '~/server/trpc/trpc.router-edge';
-import { createTRPCFetchContext } from '~/server/trpc/trpc.server';
-
-const handlerEdgeRoutes = (req: Request) => fetchRequestHandler({
-  endpoint: '/api/edge',
-  router: appRouterEdge,
-  req,
-  createContext: createTRPCFetchContext,
-  onError:
-    process.env.NODE_ENV === 'development'
-      ? ({ path, error }) => console.error(`❌ tRPC-edge failed on ${path ?? 'unk-path'}: ${error.message}`)
-      : undefined,
-});
-
-export const runtime = 'edge';
-export { handlerEdgeRoutes as GET, handlerEdgeRoutes as POST };
@@ -0,0 +1,52 @@
+import { createEmptyReadableStream, safeErrorString, serverFetchOrThrow } from '~/server/wire';
+
+import { elevenlabsAccess, elevenlabsVoiceId, ElevenlabsWire, speechInputSchema } from '~/modules/elevenlabs/elevenlabs.router';
+
+
+/* NOTE: Why does this file even exist?
+
+This file is a workaround for a limitation in tRPC; it does not support ArrayBuffer responses,
+and that would force us to use base64 encoding for the audio data, which would be a waste of
+bandwidth. So instead, we use this file to make the request to ElevenLabs, and then return the
+response as an ArrayBuffer. Unfortunately this means duplicating the code in the server-side
+and client-side vs. the tRPC implementation. So at lease we recycle the input structures.
+
+*/
+const handler = async (req: Request) => {
+  try {
+
+    // construct the upstream request
+    const {
+      elevenKey, text, voiceId, nonEnglish,
+      streaming, streamOptimization,
+    } = speechInputSchema.parse(await req.json());
+    const path = `/v1/text-to-speech/${elevenlabsVoiceId(voiceId)}` + (streaming ? `/stream?optimize_streaming_latency=${streamOptimization || 1}` : '');
+    const { headers, url } = elevenlabsAccess(elevenKey, path);
+    const body: ElevenlabsWire.TTSRequest = {
+      text: text,
+      ...(nonEnglish && { model_id: 'eleven_multilingual_v1' }),
+    };
+
+    // elevenlabs POST
+    const upstreamResponse: Response = await serverFetchOrThrow(url, 'POST', headers, body);
+
+    // NOTE: this is disabled, as we pass-through what we get upstream for speed, as it is not worthy
+    //       to wait for the entire audio to be downloaded before we send it to the client
+    // if (!streaming) {
+    //   const audioArrayBuffer = await upstreamResponse.arrayBuffer();
+    //   return new NextResponse(audioArrayBuffer, { status: 200, headers: { 'Content-Type': 'audio/mpeg' } });
+    // }
+
+    // stream the data to the client
+    const audioReadableStream = upstreamResponse.body || createEmptyReadableStream();
+    return new Response(audioReadableStream, { status: 200, headers: { 'Content-Type': 'audio/mpeg' } });
+
+  } catch (error: any) {
+    const fetchOrVendorError = safeErrorString(error) + (error?.cause ? ' · ' + error.cause : '');
+    console.log(`api/elevenlabs/speech: fetch issue: ${fetchOrVendorError}`);
+    return new Response(`[Issue] elevenlabs: ${fetchOrVendorError}`, { status: 500 });
+  }
+};
+
+export const runtime = 'edge';
+export { handler as POST };
@@ -0,0 +1,2 @@
+export const runtime = 'edge';
+export { openaiStreamingRelayHandler as POST } from '~/modules/llms/transports/server/openai/openai.streaming';
@@ -0,0 +1,19 @@
+import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
+
+import { appRouterEdge } from '~/server/api/trpc.router';
+import { createTRPCFetchContext } from '~/server/api/trpc.server';
+
+const handlerEdgeRoutes = (req: Request) =>
+  fetchRequestHandler({
+    router: appRouterEdge,
+    endpoint: '/api/trpc-edge',
+    req,
+    createContext: createTRPCFetchContext,
+    onError:
+      process.env.NODE_ENV === 'development'
+        ? ({ path, error }) => console.error(`❌ tRPC-edge failed on ${path ?? '<no-path>'}:`, error)
+        : undefined,
+  });
+
+export const runtime = 'edge';
+export { handlerEdgeRoutes as GET, handlerEdgeRoutes as POST };
@@ -0,0 +1,19 @@
+import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
+
+import { appRouterNode } from '~/server/api/trpc.router';
+import { createTRPCFetchContext } from '~/server/api/trpc.server';
+
+const handlerNodeRoutes = (req: Request) =>
+  fetchRequestHandler({
+    router: appRouterNode,
+    endpoint: '/api/trpc-node',
+    req,
+    createContext: createTRPCFetchContext,
+    onError:
+      process.env.NODE_ENV === 'development'
+        ? ({ path, error }) => console.error(`❌ tRPC-node failed on ${path ?? '<no-path>'}:`, error)
+        : undefined,
+  });
+
+export const runtime = 'nodejs';
+export { handlerNodeRoutes as GET, handlerNodeRoutes as POST };
@@ -1,12 +1,8 @@
-# Very simple docker-compose file to run the app on http://localhost:3000 (or http://127.0.0.1:3000).
-#
-# For more examples, such runnin big-AGI alongside a web browsing service, see the `docs/docker` folder.
-
 version: '3.9'

 services:
  big-agi:
-    image: ghcr.io/enricoros/big-agi:latest
+    image: ghcr.io/enricoros/big-agi:main
    ports:
      - "3000:3000"
    env_file:
@@ -1,70 +0,0 @@
-# AIX dispatch server - API features comparison
-
-This is updated as of 2024-07-09, and includes the latest features and capabilities of the three major AI APIs: Anthropic, Gemini, and OpenAI.
-The comparison covers a wide range of features, including function calling, vision, system instructions, etc.
-
-| Feature Category                         | Specific Feature              | Anthropic                                                          | Gemini                                                           | OpenAI                                                              |
-|------------------------------------------|-------------------------------|--------------------------------------------------------------------|------------------------------------------------------------------|---------------------------------------------------------------------|
-| **Message Structure**                    |
-|                                          | Role types                    | user, assistant                                                    | user, model                                                      | user, assistant, system, tool                                       |
-|                                          | Named participants            | No                                                                 | No                                                               | Yes                                                                 |
-|                                          | Content array                 | Yes                                                                | Yes                                                              | Yes                                                                 |
-| **Content Types and Multimodal Support** |
-|                                          | Text generation               | Yes                                                                | Yes                                                              | Yes                                                                 |
-|                                          | Image understanding           | Yes                                                                | Yes                                                              | Yes                                                                 |
-|                                          | Audio processing              | No                                                                 | **Yes**                                                          | No                                                                  |
-|                                          | Video processing              | No                                                                 | **Yes**                                                          | No                                                                  |
-| **Image Handling**                       |
-|                                          | Supported formats             | JPEG, PNG, GIF, WebP                                               | JPEG, PNG, WebP, HEIC, HEIF                                      | PNG, JPEG, WebP, non-animated GIF                                   |
-|                                          | Max image size                | 5MB per image                                                      | (20MB per prompt)                                                | 20MB per image                                                      |
-|                                          | Image detail level            | N/A                                                                | N/A                                                              | **Low, high, auto**                                                 |
-|                                          | Image resolution              | max: 1568x1568                                                     | min: 768x768, max: 3072x3072                                     | min: 512x512, max: 2048 x 2048                                      |
-|                                          | Token calculation for images  | (width * height)/750; max 1,600                                    | 258 tokens                                                       | 85 + 170 * {patches}                                                |
-|                                          | Image retention               | Deleted after processing                                           | Not specified                                                    | Deleted after processing                                            |
-| **Audio and Video Handling**             |
-|                                          | Audio formats                 | N/A                                                                | WAV, MP3, AIFF, AAC, OGG, FLAC                                   | N/A                                                                 |
-|                                          | Video formats                 | N/A                                                                | MP4, MPEG, MOV, AVI, MPG, WebM, WMV, 3GPP                        | N/A                                                                 |
-| **System Instructions and Tool Use**     |
-|                                          | System instructions           | Yes (array of text blocks)                                         | Yes (parts array)                                                | Yes (as system message)                                             |
-| **Function/Tool Handling**               |
-|                                          | Parallel tool calls           | No                                                                 | No                                                               | **Yes**                                                             |
-|                                          | Tool Declaration              | Defined in `tools` array                                           | Defined in `tools` array                                         | Defined in `tools` array                                            |
-|                                          | FC name restrictions          | Yes                                                                | Yes (max 63 chars)                                               | Yes (max 64 chars)                                                  |
-|                                          | FC declaration                | name, description, input_schema                                    | name, description, parameters                                    | name, description, parameters                                       |
-|                                          | FC options structure          | JSON Schema for input                                              | Object with properties                                           | JSON Schema for parameters                                          |
-|                                          | FC Force invocation           | Via `tool_choice` parameter                                        | Via `toolConfig` parameter                                       | Via `tool_choice` parameter                                         |
-|                                          | FC Model invocation           | Model generates a `tool_use` block with predicted parameters       | Generates a `functionCall` part with predicted parameters        | Generates a message.`tool_calls` item with predicted arguments      |
-|                                          | FC Execution                  | Client-side                                                        | Client-side                                                      | Client-side                                                         |
-|                                          | FC Result injection           | Client appends a `user` message with a `tool_result` content block | Client appends a `function` message with `functionResponse` part | Client sends a new `tool` message with `tool_call_id` and `content` |
-|                                          | Built-in Code execution       | No                                                                 | **Yes**                                                          | No                                                                  |
-|                                          | Tool use with vision          | Yes                                                                | Yes                                                              | Yes                                                                 |
-| **Generation Configuration**             |
-|                                          | temperature                   | Yes                                                                | Yes                                                              | Yes                                                                 |
-|                                          | max_tokens                    | Yes                                                                | Yes                                                              | Yes                                                                 |
-|                                          | stop_sequences                | Yes                                                                | Yes                                                              | Yes                                                                 |
-|                                          | top_k                         | Yes                                                                | Yes                                                              | **No**                                                              |
-|                                          | top_p                         | Yes                                                                | Yes                                                              | Yes                                                                 |
-|                                          | seed                          | No                                                                 | No                                                               | **Yes**                                                             |
-|                                          | Multiple candidates           | No                                                                 | No                                                               | Yes (with 'n' parameter, breaks streaming?)                         |
-| **Streaming and Response Structure**     |
-|                                          | Streaming support             | Yes                                                                | Yes                                                              | Yes                                                                 |
-|                                          | Streaming initiation          | stream=true                                                        | streamGenerateContent path                                       | stream=true                                                         |
-|                                          | Streaming event types         | **Multiple specific types**                                        | Not specified                                                    | Single delta type                                                   |
-|                                          | Response container            | content (array)                                                    | candidates (array)                                               | choices (array)                                                     |
-| **Usage Metrics and Error Handling**     |
-|                                          | Token counts                  | Yes                                                                | Yes                                                              | Yes                                                                 |
-|                                          | Detailed token breakdown      | input, output                                                      | prompt, cached, candidates, total                                | prompt, completion, total                                           |
-|                                          | Usage in stream               | No                                                                 | No                                                               | **Optional**                                                        |
-|                                          | Error handling in response    | Not specified                                                      | Not specified                                                    | **Yes (undocumented)**                                              |
-|                                          | Error handling in stream      | Not specified                                                      | Not specified                                                    | **Yes (undocumented)**                                              |
-| **Advanced Features**                    |
-|                                          | JSON mode                     | **Partial (via structured prompts)**                               | **Yes (responseMimeType)**                                       | **Yes**                                                             |
-|                                          | Output consistency techniques | **Yes (multiple methods)**                                         | Not specified                                                    | Not specified                                                       |
-|                                          | Logprobs                      | No                                                                 | No                                                               | **Yes (disabled in schema)**                                        |
-|                                          | System fingerprint            | No                                                                 | No                                                               | **Yes**                                                             |
-|                                          | Semantic caching              | No                                                                 | **Yes**                                                          | No                                                                  |
-|                                          | Assistant prefill             | **Yes**                                                            | No                                                               | No                                                                  |
-|                                          | Preferred formatting          | **XML tags, JSON**                                                 | Not specified                                                    | Markdown                                                            |
-| **Safety and Compliance**                |
-|                                          | Safety settings in request    | **Stop sequences**                                                 | **Detailed category-based**                                      | **Moderation API**                                                  |
-|                                          | Safety feedback in response   | Yes                                                                | Yes                                                              | Not specified                                                       |
@@ -1,62 +0,0 @@
-# Big-AGI Documentation
-
-Information you need to get started, configure, and use big-AGI productively.
-
-## Getting Started
-
-Guides for basic big-AGI features:
-
- **[Enabling Microphone for Speech Recognition](help-feature-microphone.md)**: Instructions to
-  allow speech recognition in browsers and apps.
-
-## AI Model Configuration
-
-Detailed guides to configure AI models and advanced features in big-AGI.
-
-> 👉 The following applies to users of big-AGI.com, as the public instance is empty and requires user configuration.
-
- **Cloud AI Services**:
-  - **[Azure OpenAI](config-azure-openai.md)**
-  - **[OpenRouter](config-openrouter.md)**
-  - Easy API key setup: **Anthropic**, **Deepseek**, **Google AI**, **Groq**, **Mistral**, **OpenAI**, **OpenPipe**, **Perplexity**, **TogetherAI**, **xAI**
-
-
- **Local AI Integrations**:
-  - **[LocalAI](config-local-localai.md)**
-  - **[LM Studio](config-local-lmstudio.md)**
-  - **[Ollama](config-local-ollama.md)**
-
-
- **Enhanced AI Features**:
-  - **[Web Browsing](config-feature-browse.md)**: Enable web page download through third-party services or your own cloud (advanced)
-  - **Web Search**: Google Search API (see '[Environment Variables](environment-variables.md)')
-  - **Image Generation**: DALL·E 3 and 2, or Prodia API for Stable Diffusion XL
-  - **Voice Synthesis**: ElevenLabs API for voice generation
-
-## Deployment & Customization
-
-> 👉 The following applies to developers and experts who deploy their own big-AGI instance.
-
-For deploying a custom big-AGI instance:
-
- **[Installation Guide](installation.md)**: Set up your own big-AGI instance
-  - Source build or pre-built options
-  - Local, cloud, or on-premises deployment
-
-
- **Advanced Setup**:
-  - **[Source Code Customization Guide](customizations.md)**: Modify the source code
-  - **[Access Control](deploy-authentication.md)**: Optional, add basic user authentication
-  - **[Database Setup](deploy-database.md)**: Optional, enables "Chat Link Sharing"
-  - **[Reverse Proxy](deploy-reverse-proxy.md)**: Optional, enables custom domains and SSL
-  - **[Environment Variables](environment-variables.md)**: Pre-configures models and services
-
-## Community & Support
-
-Connect with the growing big-AGI community:
-
- Visit our [GitHub repository](https://github.com/enricoros/big-AGI) for source code and issue tracking
- Check the latest updates and features on [Changelog](changelog.md) or the in-app [News](https://get.big-agi.com/news)
- Connect with us and other users on [Discord](https://discord.gg/MkH4qj2Jp9) for discussions, help, and sharing your experiences with big-AGI
-
-Thank you for choosing big-AGI. We're excited to give you the best tools to amplify yourself.
@@ -1,242 +0,0 @@
-## Changelog
-
-This is a high-level changelog. Calls out some of the high level features batched
-by release.
-
- For the live roadmap, please see [the GitHub project](https://github.com/users/enricoros/projects/4/views/2)
-
-### 1.17.0 - Jun 2024
-
- milestone: [1.17.0](https://github.com/enricoros/big-agi/milestone/17)
- work in progress: [big-AGI open roadmap](https://github.com/users/enricoros/projects/4/views/2), [help here](https://github.com/users/enricoros/projects/4/views/4)
-
-### What's New in 1.16.1...1.16.8 · Sep 13, 2024 (patch releases)
-
- 1.16.8: OpenAI ChatGPT-4o Latest (o1-preview and o1-mini are supported in Big-AGI 2)
- 1.16.7: OpenAI support for GPT-4o 2024-08-06
- 1.16.6: Groq support for Llama 3.1 models
- 1.16.5: GPT-4o Mini support
- 1.16.4: 8192 tokens support for Claude 3.5 Sonnet
- 1.16.3: Anthropic Claude 3.5 Sonnet model support
- 1.16.2: Improve web downloads, as text, markdown, or HTML
- 1.16.2: Proper support for Gemini models
- 1.16.2: Added the latest Mistral model
- 1.16.2: Tokenizer support for gpt-4o
- 1.16.2: Updates to Beam
- 1.16.1: Support for the new OpenAI GPT-4o 2024-05-13 model
-
-### What's New in 1.16.0 · May 9, 2024 · Crystal Clear
-
- [Beam](https://big-agi.com/blog/beam-multi-model-ai-reasoning) core and UX improvements based on user feedback
- Chat cost estimation 💰 (enable it in Labs / hover the token counter)
- Save/load chat files with Ctrl+S / Ctrl+O on desktop
- Major enhancements to the Auto-Diagrams tool
- YouTube Transcriber Persona for chatting with video content, [#500](https://github.com/enricoros/big-AGI/pull/500)
- Improved formula rendering (LaTeX), and dark-mode diagrams, [#508](https://github.com/enricoros/big-AGI/issues/508), [#520](https://github.com/enricoros/big-AGI/issues/520)
- Models update: **Anthropic**, **Groq**, **Ollama**, **OpenAI**, **OpenRouter**, **Perplexity**
- Code soft-wrap, chat text selection toolbar, 3x faster on Apple silicon, and more [#517](https://github.com/enricoros/big-AGI/issues/517), [507](https://github.com/enricoros/big-AGI/pull/507)
- Developers: update the LLMs data structures
-
-### What's New in 1.15.1 · April 10, 2024 (minor release, models support)
-
- Support for the newly released Gemini Pro 1.5 models
- Support for the new OpenAI 2024-04-09 Turbo models
- Resilience fixes after the large success of 1.15.0
-
-### What's New in 1.15.0 · April 1, 2024 · Beam
-
- ⚠️ [**Beam**: the multi-model AI chat](https://big-agi.com/blog/beam-multi-model-ai-reasoning). find better answers, faster - a game-changer for brainstorming, decision-making, and creativity. [#443](https://github.com/enricoros/big-AGI/issues/443)
- Managed Deployments **Auto-Configuration**: simplify the UI mdoels setup with backend-set models. [#436](https://github.com/enricoros/big-AGI/issues/436)
- Message **Starring ⭐**: star important messages within chats, to attach them later. [#476](https://github.com/enricoros/big-AGI/issues/476)
- Enhanced the default Persona
- Fixes to Gemini models and SVGs, improvements to UI and icons
- Beast release, over 430 commits, 10,000+ lines changed: [release notes](https://github.com/enricoros/big-AGI/releases/tag/v1.15.0), and changes [v1.14.1...v1.15.0](https://github.com/enricoros/big-AGI/compare/v1.14.1...v1.15.0)
-
-### What's New in 1.14.1 · March 7, 2024 · Modelmorphic
-
- **Anthropic** [Claude-3](https://www.anthropic.com/news/claude-3-family) model family support. [#443](https://github.com/enricoros/big-AGI/issues/443)
- New **[Perplexity](https://www.perplexity.ai/)** and **[Groq](https://groq.com/)** integration (thanks @Penagwin). [#407](https://github.com/enricoros/big-AGI/issues/407), [#427](https://github.com/enricoros/big-AGI/issues/427)
- **[LocalAI](https://localai.io/models/)** deep integration, including support for [model galleries](https://github.com/enricoros/big-AGI/issues/411)
- **Mistral** Large and Google **Gemini 1.5** support
- Performance optimizations: runs [much faster](https://twitter.com/enricoros/status/1756553038293303434?utm_source=localhost:3000&utm_medium=big-agi), saves lots of power, reduces memory usage
- Enhanced UX with auto-sizing charts, refined search and folder functionalities, perfected scaling
- And with more UI improvements, documentation, bug fixes (20 tickets), and developer enhancements
- [Release notes](https://github.com/enricoros/big-AGI/releases/tag/v1.14.0), and changes [v1.13.1...v1.14.0](https://github.com/enricoros/big-AGI/compare/v1.13.1...v1.14.0) (233 commits, 8,000+ lines changed)
-
-### What's New in 1.13.0 · Feb 8, 2024 · Multi + Mind
-
-https://github.com/enricoros/big-AGI/assets/32999/01732528-730e-41dc-adc7-511385686b13
-
- **Side-by-Side Split Windows**: multitask with parallel conversations. [#208](https://github.com/enricoros/big-AGI/issues/208)
- **Multi-Chat Mode**: message everyone, all at once. [#388](https://github.com/enricoros/big-AGI/issues/388)
- **Export tables as CSV**: big thanks to @aj47. [#392](https://github.com/enricoros/big-AGI/pull/392)
- Adjustable text size: customize density. [#399](https://github.com/enricoros/big-AGI/issues/399)
- Dev2 Persona Technology Preview
- Better looking chats with improved spacing, fonts, and menus
- More: new video player, [LM Studio tutorial](https://github.com/enricoros/big-AGI/blob/main/docs/config-local-lmstudio.md) (thanks @aj47), [MongoDB support](https://github.com/enricoros/big-AGI/blob/main/docs/deploy-database.md) (thanks @ranfysvalle02), and speedups
-
-### What's New in 1.12.0 · Jan 26, 2024 · AGI Hotline
-
-https://github.com/enricoros/big-AGI/assets/32999/95ceb03c-945d-4fdd-9a9f-3317beb54f3f
-
- **Voice Calls**: real-time voice call your personas out of the blue or in relation to a chat [#354](https://github.com/enricoros/big-AGI/issues/354)
- Support **OpenAI 0125** Models. [#364](https://github.com/enricoros/big-AGI/issues/364)
- Rename or Auto-Rename chats.  [#222](https://github.com/enricoros/big-AGI/issues/222), [#360](https://github.com/enricoros/big-AGI/issues/360)
- More control over **Link Sharing** [#356](https://github.com/enricoros/big-AGI/issues/356)
- **Accessibility** to screen readers [#358](https://github.com/enricoros/big-AGI/issues/358)
- Export chats to Markdown [#337](https://github.com/enricoros/big-AGI/issues/337)
- Paste tables from Excel [#286](https://github.com/enricoros/big-AGI/issues/286)
- Ollama model updates and context window detection fixes [#309](https://github.com/enricoros/big-AGI/issues/309)
-
-### What's New in 1.11.0 · Jan 16, 2024 · Singularity
-
-https://github.com/enricoros/big-AGI/assets/1590910/a6b8e172-0726-4b03-a5e5-10cfcb110c68
-
- **Find chats**: search in titles and content, with frequency ranking. [#329](https://github.com/enricoros/big-AGI/issues/329)
- **Commands**: command auto-completion (type '/'). [#327](https://github.com/enricoros/big-AGI/issues/327)
- **[Together AI](https://www.together.ai/products#inference)** inference platform support (good speed and newer models). [#346](https://github.com/enricoros/big-AGI/issues/346)
- Persona Creator history, deletion, custom creation, fix llm API timeouts
- Enable adding up to five custom OpenAI-compatible endpoints
- Developer enhancements: new 'Actiles' framework
-
-### What's New in 1.10.0 · Jan 6, 2024 · The Year of AGI
-
- **New UI**: for both desktop and mobile, sets the stage for future scale. [#201](https://github.com/enricoros/big-AGI/issues/201)
- **Conversation Folders**: enhanced conversation organization. [#321](https://github.com/enricoros/big-AGI/issues/321)
- **[LM Studio](https://lmstudio.ai/)** support and improved token management
- Resizable panes in split-screen conversations.
- Large performance optimizations
- Developer enhancements: new UI framework, updated documentation for proxy settings on browserless/docker
-
-### What's New in 1.9.0 · Dec 28, 2023 · Creative Horizons
-
- **DALL·E 3 integration** for enhanced image generation. [#212](https://github.com/enricoros/big-AGI/issues/212)
- **Perfect scrolling mechanics** across devices. [#304](https://github.com/enricoros/big-AGI/issues/304)
- Persona creation now supports **text input**. [#287](https://github.com/enricoros/big-AGI/pull/287)
- Openrouter updates for better model management and rate limit handling
- Image drawing UX improvements
- Layout fix for Firefox users
- Developer enhancements: Text2Image subsystem, Optima layout, ScrollToBottom library, Panes library, and Llms subsystem updates.
-
-### What's New in 1.8.0 · Dec 20, 2023 · To The Moon And Back
-
- **Google Gemini Support**: Use the newest Google models. [#275](https://github.com/enricoros/big-agi/issues/275)
- **Mistral Platform**: Mixtral and future models support. [#273](https://github.com/enricoros/big-agi/issues/273)
- **Diagram Instructions**. Thanks to @joriskalz! [#280](https://github.com/enricoros/big-agi/pull/280)
- Ollama Chats: Enhanced chatting experience. [#270](https://github.com/enricoros/big-agi/issues/270)
- Mac Shortcuts Fix: Improved UX on Mac
- **Single-Tab Mode**: Data integrity with single window. [#268](https://github.com/enricoros/big-agi/issues/268)
- **Updated Models**: Latest Ollama (v0.1.17) and OpenRouter models
- Official Downloads: Easy access to the latest big-AGI on [big-AGI.com](https://big-agi.com)
- For developers: [troubleshot networking](https://github.com/enricoros/big-AGI/issues/276#issuecomment-1858591483), fixed Vercel deployment, cleaned up the LLMs/Streaming framework
-
-### What's New in 1.7.0 · Dec 11, 2023 · Attachment Theory
-
- **Attachments System Overhaul**: Drag, paste, link, snap, text, images, PDFs and more. [#251](https://github.com/enricoros/big-agi/issues/251)
- **Desktop Webcam Capture**: Image capture now available as Labs feature. [#253](https://github.com/enricoros/big-agi/issues/253)
- **Independent Browsing**: Full browsing support with Browserless. [Learn More](https://github.com/enricoros/big-agi/blob/main/docs/config-feature-browse.md)
- **Overheat LLMs**: Push the creativity with higher LLM temperatures. [#256](https://github.com/enricoros/big-agi/issues/256)
- **Model Options Shortcut**: Quick adjust with `Ctrl+Shift+O`
- Optimized Voice Input and Performance
- Latest Ollama models
- For developers: **Password Protection**: HTTP Basic Auth. [Learn How](https://github.com/enricoros/big-agi/blob/main/docs/deploy-authentication.md)
-
-### What's New in 1.6.0 - Nov 28, 2023 · Surf's Up
-
- **Web Browsing**: Download web pages within chats - [browsing guide](https://github.com/enricoros/big-agi/blob/main/docs/config-feature-browse.md)
- **Branching Discussions**: Create new conversations from any message
- **Keyboard Navigation**: Swift chat navigation with new shortcuts (e.g. ctrl+alt+left/right)
- **Performance Boost**: Faster rendering for a smoother experience
- **UI Enhancements**: Refined interface based on user feedback
- **New Features**: Anthropic Claude 2.1, `/help` command, and Flattener tool
- **For Developers**: Code quality upgrades and snackbar notifications
-
-### What's New in 1.5.0 - Nov 19, 2023 · Loaded
-
- **Continued Voice**: Engage with hands-free interaction for a seamless experience
- **Visualization Tool**: Create data representations with our new visualization capabilities
- **Ollama Local Models**: Leverage local models support with our comprehensive guide
- **Text Tools**: Enjoy tools including highlight differences to refine your content
- **Mermaid Diagramming**: Render complex diagrams with our Mermaid language support
- **OpenAI 1106 Chat Models**: Experience the cutting-edge capabilities of the latest OpenAI models
- **SDXL Support**: Enhance your image generation with SDXL support for Prodia
- **Cloudflare OpenAI API Gateway**: Integrate with Cloudflare for a robust API gateway
- **Helicone for Anthropic**: Utilize Helicone's tools for Anthropic models
-
-For Developers:
-
- Runtime Server-Side configuration:  https://github.com/enricoros/big-agi/issues/189. Env vars are
-  not required to be set at build time anymore. The frontend will roundtrip to the backend at the
-  first request to get the configuration. See
-  https://github.com/enricoros/big-agi/blob/main/src/modules/backend/backend.router.ts.
- CloudFlare developers: please change the deployment command to
-  `rm app/api/cloud/[trpc]/route.ts && npx @cloudflare/next-on-pages@1`,
-  as we transitioned to the App router in NextJS 14. The documentation in
-  [docs/deploy-cloudflare.md](../docs/deploy-cloudflare.md) is updated
-
-### 1.4.0: Sept/Oct: scale OUT
-
- **Expanded Model Support**: Azure and [OpenRouter](https://openrouter.ai/docs#models) models, including gpt-4-32k
- **Share and clone** conversations with public links
- Removed the 20 chats hard limit ([Ashesh3](https://github.com/enricoros/big-agi/pull/158))
- Latex Rendering
- Augmented Chat modes (Labs)
-
-### July/Aug: More Better Faster
-
- **Camera OCR** - real-world AI - take a picture of a text, and chat with it
- **Anthropic models** support, e.g. Claude
- **Backup/Restore** - save chats, and restore them later
- **Flatten conversations** - conversations summarizer with 4 modes
- **Fork conversations** - create a new chat, to try with different endings
- New commands: /s to add a System message, and /a for an Assistant message
- New Chat modes: Write-only - just appends the message, without assistant response
- Fix STOP generation - in sync with the Vercel team to fix a long-standing NextJS issue
- Fixes on the HTML block - particularly useful to see error pages
-
-### June: scale UP
-
- **[New OpenAI Models](https://openai.com/blog/function-calling-and-other-api-updates) support** - 0613 models, including 16k and 32k
- **Cleaner UI** - with rationalized Settings, Modals, and Configurators
- **Dynamic Models Configurator** - easy connection with different model vendors
- **Multiple Model Vendors Support** framework to support many LLM vendors
- **Per-model Options** (temperature, tokens, etc.) for fine-tuning AI behavior to your needs
- Support for GPT-4-32k
- Improved Dialogs and Messages
- Much Enhanced DX: TRPC integration, modularization, pluggable UI, etc
-
-### April / May: more #big-agi-energy
-
- **[Google Search](../docs/pixels/feature_react_google.png)** active in ReAct - add your keys to Settings > Google
-  Search
- **[Reason+Act](../docs/pixels/feature_react_turn_on.png)** preview feature - activate with 2-taps on the 'Chat' button
- **[Image Generation](../docs/pixels/feature_imagine_command.png)** using Prodia (BYO Keys) - /imagine - or menu option
- **[Voice Synthesis](../docs/pixels/feature_voice_1.png)** 📣 with ElevenLabs, including selection of custom voices
- **[Precise Token Counter](../docs/pixels/feature_token_counter.png)** 📈 extra-useful to pack the context window
- **[Install Mobile APP](../docs/pixels/feature_pwa.png)** 📲 looks like native (@harlanlewis)
- **[UI language](../docs/pixels/feature_language.png)** with auto-detect, and future app language! (@tbodyston)
- **PDF Summarization** 🧩🤯 - ask questions to a PDF! (@fredliubojin)
- **Code Execution: [Codepen](https://codepen.io/)** 💻 (@harlanlewis)
- **[SVG Drawing](../docs/pixels/feature_svg_drawing.png)** - draw with AI 🎨
- Chats: multiple chats, AI titles, Import/Export, Selection mode
- Rendering: Markdown, SVG, improved Code blocks
- Integrations: OpenAI organization ID
- [Cloudflare deployment instructions](../docs/deploy-cloudflare.md),
-  [awesome-agi](https://github.com/enricoros/awesome-agi)
- [Typing Avatars](../docs/pixels/gif_typing_040123.gif) ⌨️
-  <!-- p><a href="../docs/pixels/gif_typing_040123.gif"><img src="../docs/pixels/gif_typing_040123.gif" width='700' alt="New Typing Avatars"/></a></p -->
-
-### March: first release
-
- **[AI Personas](../docs/pixels/feature_purpose_two.png)** - including Code, Science, Corporate, and Chat 🎭
- **Privacy**: user-owned API keys 🔑 and localStorage 🛡️
- **Context** - Attach or [Drag & Drop files](../docs/pixels/feature_drop_target.png) to add them to the prompt 📁
- **Syntax highlighting** - for multiple languages 🌈
- **Code Execution: Sandpack** -
-  [now on branch]((https://github.com/enricoros/big-agi/commit/f678a0d463d5e9cf0733f577e11bd612b7902d89)) `variant-code-execution`
- Chat with GPT-4 and 3.5 Turbo 🧠💨
- Real-time streaming of AI responses ⚡
- **Voice Input** 🎙️ - works great on Chrome / Windows
- Integration: **[Paste.gg](../docs/pixels/feature_paste_gg.png)** integration for chat sharing 📥
- Integration: **[Helicone](https://www.helicone.ai/)** integration for API observability 📊
- 🌙 Dark model - Wide mode ⛶
@@ -20,9 +20,6 @@ If you have an `API Endpoint` and `API Key`, you can configure big-AGI as follow
 The deployed models are now available in the application. If you don't have a configured
 Azure OpenAI service instance, continue with the next section.

-In addition to using the UI, configuration can also be done using
-[environment variables](environment-variables.md).
-
 ## Setting Up Azure

 ### Step 1: Azure Account & Subscription
@@ -1,118 +0,0 @@
-# Browse Functionality in big-AGI 🌐
-
-Allows users to load web pages across various components of `big-AGI`. This feature is supported by Puppeteer-based
-browsing services, which are the most common way to render web pages in a headless environment.
-
-Once configured, the Browsing service provides the following functionality:
-
- ✅ **Paste a URL**: Simply paste/drag a URL into the chat, and `big-AGI` will load and attach the page (very effective)
- ✅ **Use /browse**: Type `/browse [URL]` in the chat to command `big-AGI` to load the specified web page
- ✅ **ReAct**: ReAct will automatically use the `loadURL()` function whenever a URL is encountered
-
-It does not yet support the following functionality:
-
- ✖️ **Auto-browsing by LLMs**: if an LLM encounters a URL, it will NOT load the page and will likely respond
-  that it cannot browse the web - No technical limitation, just haven't gotten to implement this yet outside of `/react` yet
-
-First of all, you need to procure a Puppteer web browsing service endpoint. `big-AGI` supports services like:
-
-| Service                                                                              | Working | Type        | Location       | Special Features                            |
-|--------------------------------------------------------------------------------------|---------|-------------|----------------|---------------------------------------------|
-| [BrightData Scraping Browser](https://brightdata.com/products/scraping-browser)      | Yes     | Proprietary | Cloud          | Advanced scraping tools, global IP pool     |
-| [Cloudflare Browser Rendering](https://developers.cloudflare.com/browser-rendering/) | ?       | Proprietary | Cloud          | Integrated CDN, optimized browser rendering |
-| ⬇️ [Browserless 2.0](#-browserless-20)                                               | Okay    | OpenSource  | Local (Docker) | Parallelism, debug viewer, advanced APIs    |
-| ⬇️ [Your Chrome Browser (ALPHA)](#-your-own-chrome-browser)                          | Alpha   | Proprietary | Local (Chrome) | Personal, experimental use (ALPHA!)         |
-| other Puppeteer-based WSS Services                                                   | ?       | Varied      | Cloud/Local    | Service-specific features                   |
-
-## Configuration
-
-1. **Procure an Endpoint**
-   - Ensure that your browsing service is running (remote or local) and has a WebSocket endpoint available
-   - Write down the address: `wss://${auth}@{some host}:{port}`, or ws:// for local services on your machine
-
-2. **Configure `big-AGI`**
-   - navigate to **Preferences** > **Tools** > **Browse**
-   - Enter the 'wss://...' connection string provided by your browsing service
-
-3. **Enable Features**: Choose which browse-related features you want to enable:
-   - **Attach URLs**: Automatically load and attach a page when pasting a URL into the composer
-   - **/browse Command**: Use the `/browse` command in the chat to load a web page
-   - **ReAct**: Enable the `loadURL()` function in ReAct for advanced interactions
-
-### 🌐 Browserless 2.0
-
-[Browserless 2.0](https://github.com/browserless/browserless) is a Docker-based service that provides a headless
-browsing experience compatible with `big-AGI`. An open-source solution that simplifies web automation tasks,
-in a scalable manner.
-
-Launch Browserless with:
-
-```bash
-docker run -p 9222:3000 browserless/chrome:latest
-```
-
-Now you can use the following connection string in `big-AGI`: `ws://127.0.0.1:9222`.
-You can also browse to [http://127.0.0.1:9222](http://127.0.0.1:9222) to see the Browserless debug viewer
-and configure some options.
-
-The chat agent won't be able to access the web sites if the browserless container does not have direct Internet access. You can resolve the issue by defining internet proxy for the running container. You can then use the evironment file in the a `docker-compose.yaml
-
-```
- browserless:
-    image: browserless/chrome:latest
-    env_file:
-      - .env
-    ports:
-      - "9222:3000"  # Map host's port 9222 to container's port 3000
-    environment:
-      - MAX_CONCURRENT_SESSIONS=10
-```
-
-You can then add the proxy lines to your `.env` file.
-
-```
-https_proxy=http://PROXY-IP:PROXY-PORT
-http_proxy=http://PROXY-IP:PROXY-PORT
-```
-
-This is how you can define it in a one liner docker
-`docker run --env https_proxy=http://PROXY-IP:PROXY-PORT --env http_proxy=http://PROXY-IP:PROXY-PORT -p 9222:3000 browserless/chrome:latest `
-
-Note: if you are using `docker-compose`, please see the
-[docker/docker-compose-browserless.yaml](docker/docker-compose-browserless.yaml) file for an example
-on how to run `big-AGI` and Browserless simultaneously in a single application.
-
-
-### 🌐 Your own Chrome browser
-
-***EXPERIMENTAL - UNTESTED*** - You can use your own Chrome browser as a browsing service, by configuring it to expose
-a WebSocket endpoint.
-
- close all the Chrome instances (on Windows, check the Task Manager if still running)
- start Chrome with the following command line options (on Windows, you can edit the shortcut properties):
-  - `--remote-debugging-port=9222`
- go to http://localhost:9222/json/version and copy the `webSocketDebuggerUrl` value
-  - it should be something like: `ws://localhost:9222/...`
- paste the value into the Endpoint configuration (see point 2 in the configuration)
-
-### Server-Side Configuration
-
-You can set the Puppeteer WebSocket endpoint (`PUPPETEER_WSS_ENDPOINT`) in the deployment before running it.
-This is useful for self-hosted instances or when you want to pre-configure the endpoint for all users, and will
-allow your to skip points 2 and 3 above.
-
-Always deploy your own user authentication, authorization and security solution. For this feature, the tRPC
-route that provides browsing service, shall be secured with a user authentication and authorization solution,
-to prevent unauthorized access to the browsing service.
-
-## Support
-
-If you encounter any issues or have questions about configuring the browse functionality, join our community on Discord for support and discussions.
-
-[![Official Discord](https://discordapp.com/api/guilds/1098796266906980422/widget.png?style=banner2)](https://discord.gg/MkH4qj2Jp9)
-
---
-
-Enjoy the enhanced browsing experience within `big-AGI` and explore the web without ever leaving your chat!
-
-Last updated on Feb 27, 2024 ([edit on GitHub](https://github.com/enricoros/big-AGI/edit/main/docs/config-feature-browse.md))
@@ -1,54 +0,0 @@
-# Integrating LM Studio with big-AGI
-
-Quickly set up LM Studio with big-AGI to run local and open LLMs on your computer for enhanced privacy and control over AI interactions.
-
-## Video Tutorial
-
-For a visual step-by-step guide, watch our [YouTube tutorial](https://www.youtube.com/watch?v=MqXzxVokMDk).
-
-[![Running big-AGI locally with LM Studio YouTube Tutorial](http://img.youtube.com/vi/MqXzxVokMDk/0.jpg)](http://www.youtube.com/watch?v=MqXzxVokMDk "Running big-AGI locally with LM Studio")
-
-
-## Quick Setup Guide
-
-### Installing big-AGI
-
-Clone and set up big-AGI:
-
-```bash
-git clone https://github.com/enricoros/big-agi.git && cd big-agi
-npm install # Or: yarn install
-npm run dev # Or: yarn dev
-# If missing dependencies:
-npm install @mui/material # Or: yarn add @mui/material
-```
-
-### Configuring LM Studio
-
-Ensure LM Studio is running (default: [http://localhost:1234](http://localhost:1234)).
-Check the URL and modify if different.
-1. Download local models in LM Studio
-2. Start the LM Studio server
-3. Optionally. Check the logs
-
-### Integration in big-AGI
-
-1. In big-AGI, navigate to **Models** > **Add** > **LM Studio**
-2. Enter the API URL: `http://localhost:1234` (modify if different)
-3. Refresh by clicking on the `Models` button to load models from LM Studio
-
-In addition to using the UI, configuration can also be done using
-[environment variables](environment-variables.md).
-
-## Troubleshooting
-
- **Missing @mui/material**: Execute `npm install @mui/material` or `yarn add @mui/material`
- **Connection Issues**: Check LM Studio's URL and ensure it's operational
-
-
-## Further Assistance
-
-Advanced configurations and more:
-
- big-AGI Community: [Discord](https://discord.gg/MkH4qj2Jp9)
- LM Studio: [LM Studio home page](https://lmstudio.ai/)
@@ -1,64 +1,34 @@
-# Run your models with `LocalAI` x `big-AGI`
+# Local LLM integration with `localai`

-[LocalAI](https://localai.io) lets you run your AI models locally, or in the cloud. It supports text, image, asr, speech, and more models.
+Integrate local Large Language Models (LLMs) with [LocalAI](https://localai.io).

-We are deepening the integration between the two products. As of the time of writing, we integrate the following features:
+_Last updated Nov 7, 2023_

- ✅ [Text generation](https://localai.io/features/text-generation/) with GPTs
- ✅ [Function calling](https://localai.io/features/openai-functions/) by GPTs 🆕
- ✅ [Model Gallery](https://localai.io/models/) to list and install models
- ✖️ [Vision API](https://localai.io/features/gpt-vision/) for image chats
- ✖️ [Image generation](https://localai.io/features/image-generation) with stable diffusion
- ✖️ [Audio to Text](https://localai.io/features/audio-to-text/)
- ✖️ [Text to Audio](https://localai.io/features/text-to-audio/)
- ✖️ [Embeddings generation](https://localai.io/features/embeddings/)
- ✖️ [Constrained grammars](https://localai.io/features/constrained_grammars/) (JSON output)
- ✖️ Voice cloning 🆕
-
-_Last updated Feb 21, 2024_
-
-## Guide
+## Instructions

 ### LocalAI installation and configuration

 Follow the guide at: https://localai.io/basics/getting_started/

- verify it works by browsing to [http://localhost:8080/v1/models](http://localhost:8080/v1/models)
-  (or the IP:Port of the machine, if running remotely) and seeing listed the model(s) you downloaded
-  listed in the JSON response.
+For instance with [Use luna-ai-llama2 with docker compose](https://localai.io/basics/getting_started/#example-use-luna-ai-llama2-model-with-docker-compose):

-### Integration: chat with LocalAI
+- clone LocalAI
+- get the model
+- copy the prompt template
+- start docker
+    - -> the server will be listening on `localhost:8080`
+    - verify it works by going to [http://localhost:8080/v1/models](http://localhost:8080/v1/models) on
+      your browser and seeing listed the model you downloaded
+
+### Integrating LocalAI with big-AGI

 - Go to Models > Add a model source of type: **LocalAI**
- Enter the default address: `http://localhost:8080`, or the address of your localAI cloud instance
-  ![configure models](pixels/config-localai-1-models.png)
-  - If running remotely, replace localhost with the IP of the machine. Make sure to use the **IP:Port** format
- Load the models (click on `Models 🔄`)
- Select the model and chat
+- Enter the address: `http://localhost:8080` (default)
+    - If running remotely, replace localhost with the IP of the machine. Make sure to use the **IP:Port** format
+- Load the models
+- Select model & Chat

-In addition to using the UI, configuration can also be done using
-[environment variables](environment-variables.md).
-
-### Integration: Models Gallery
-
-If the running LocalAI instance is configured with a [Model Gallery](https://localai.io/models/):
-
- Go to Models > LocalAI
- Click on `Gallery Admin`
- Select the models to install, and view installation progress
-  ![img.png](pixels/config-localai-2-gallery.png)
-
-## Troubleshooting
-
-##### Unknown Context Window Size
-
-At the time of writing, LocalAI does not publish the model `context window size`.
-Every model is assumed to be capable of chatting, and with a context window of 4096 tokens.
-Please update the [src/modules/llms/transports/server/openai/models/models.data.ts](../src/modules/llms/server/openai/models/models.data.ts)
-file with the mapping information between LocalAI model IDs and names/descriptions/tokens, etc.
-
-# 🤝 Support
-
- Hop into the [LocalAI Discord](https://discord.gg/uJAeKSAGDy) for support and questions
- Hop into the [big-AGI Discord](https://discord.gg/MkH4qj2Jp9) for questions
- For big-AGI support, please open an issue in our [big-AGI issue tracker](https://bit.ly/agi-request)
+> NOTE: LocalAI does not list details about the mdoels. Every model is assumed to be
+> capable of chatting, and with a context window of 4096 tokens.
+> Please update the [src/modules/llms/transports/server/openai/models.data.ts](../src/modules/llms/transports/server/openai/models.data.ts)
+> file with the mapping information between LocalAI model IDs and names/descriptions/tokens, etc.
@@ -0,0 +1,54 @@
+# Local LLM Integration with `text-web-ui` :llama:
+
+Integrate local Large Language Models (LLMs) with
+[oobabooga/text-generation-webui](https://github.com/oobabooga/text-generation-webui),
+a specialized interface that includes a custom variant of the OpenAI API for a smooth integration process.
+
+_Last updated on Nov 7, 2023_
+
+### Components
+
+The implementation of local LLMs involves the following components:
+
+* **text-generation-webui**: A Python application with a Gradio web UI for operating Large Language Models.
+    * **Local Large Language Models "LLMs"**: Use large language models on your personal computer with consumer-grade GPUs or CPUs.
+* **big-AGI**: An LLM UI that offers features such as Personas, OCR, Voice Support, Code Execution, AGI functions, and more.
+
+## Instructions
+
+This guide assumes that **big-AGI** is already installed on your system. Note that the text-generation-webui IP address must be accessible from the server running **big-AGI**.
+
+### Text-web-ui Installation & Configuration:
+
+1. Install [text-generation-webui](https://github.com/oobabooga/text-generation-webui#Installation).
+    - Download the one-click installer, extract it, and double-click on "start" - ~10 minutes
+    - Close it afterwards as we need to modify the startup flags
+2. Enable the **openai extension**
+    - Edit `CMD_FLAGS.txt`
+    - Make sure that `--listen --extensions openai` is present and uncommented 
+3. Restart text-generation-webui
+    - Double-click on "start"
+    - You should see something like: 
+      ```
+      2023-11-07 21:24:26 INFO:Loading the extension "openai"...
+      2023-11-07 21:24:27 INFO:OpenAI compatible API URL:
+      
+      http://0.0.0.0:5000/v1
+      ```
+    - The OpenAI API is now running on port 5000, on both localhost (127.0.0.1) and your network IP address
+4. Load your first model
+    - Open the text-generation-webui at [127.0.0.1:7860](http://127.0.0.1:7860/)
+    - Switch to the **Model** tab
+    - Download, for instance, `TheBloke/Llama-2-7b-Chat-GPTQ:gptq-4bit-32g-actorder_True` - 4.3 GB
+    - Select the model once it's loaded
+
+### Integrating text-web-ui with big-AGI:
+1. Integrating Text-Generation-WebUI with big-AGI:
+    - Go to Models > Add a model source of type: **Oobabooga**
+    - Enter the address: `http://127.0.0.1:5000`
+        - If running remotely, replace 127.0.0.1 with the IP of the machine. Make sure to use the **IP:Port** format
+    - Load the models
+        - The active model must be selected and LOADED on the text-generation-webui as it doesn't support model switching or parallel requests.
+    - Select model & Chat
+
+Enjoy the privacy and flexibility of local LLMs with `big-AGI` and `text-generation-webui`!
@@ -5,49 +5,31 @@ This guide helps you connect [Ollama](https://ollama.ai) [models](https://ollama
 experience. The integration brings the popular big-AGI features to Ollama, including: voice chats,
 editing tools, models switching, personas, and more.

-_Last updated Dec 16, 2023_
-
 ![config-local-ollama-0-example.png](pixels/config-ollama-0-example.png)

 ## Quick Integration Guide

-1. **Ensure Ollama API Server is Running**: Follow the official instructions to get Ollama up and running on your machine
-   - For detailed instructions on setting up the Ollama API server, please refer to the
-   [Ollama download page](https://ollama.ai/download) and [instructions for linux](https://github.com/jmorganca/ollama/blob/main/docs/linux.md).
-2. **Add Ollama as a Model Source**: In `big-AGI`, navigate to the **Models** section, select **Add a model source**, and choose **Ollama**
-3. **Enter Ollama Host URL**: Provide the Ollama Host URL where the API server is accessible (e.g., `http://localhost:11434`)
-4. **Refresh Model List**: Once connected, refresh the list of available models to include the Ollama models
-   > Optional: use the Ollama Admin interface to see which models are available and 'Pull' them in your local machine. Note
-   that this operation will likely timeout due to Edge Functions timeout on the big-AGI server while pulling, and
-   you'll have to press the 'Pull' button again, until a green message appears.
-5. **Chat with Ollama models**: select an Ollama model and begin chatting with AI personas
+1. **Ensure Ollama API Server is Running**: Before starting, make sure your Ollama API server is up and running.
+2. **Add Ollama as a Model Source**: In `big-AGI`, navigate to the **Models** section, select **Add a model source**, and choose **Ollama**.
+3. **Enter Ollama Host URL**: Provide the Ollama Host URL where the API server is accessible (e.g., `http://localhost:11434`).
+4. **Refresh Model List**: Once connected, refresh the list of available models to include the Ollama models.
+5. **Start Using AI Personas**: Select an Ollama model and begin interacting with AI personas tailored to your needs.

-In addition to using the UI, configuration can also be done using
-[environment variables](environment-variables.md).
+### Ollama: installation and Setup

-**Visual Configuration Guide**:
+For detailed instructions on setting up the Ollama API server, please refer to the
+[Ollama download page](https://ollama.ai/download) and [instructions for linux](https://github.com/jmorganca/ollama/blob/main/docs/linux.md).

-* After adding the `Ollama` model vendor, entering the IP address of an Ollama server, and refreshing models:<br/>
-  <img src="pixels/config-ollama-1-models.png" alt="config-local-ollama-1-models.png" width="320">
+### Visual Guide

-* The `Ollama` admin panel, with the `Pull` button highlighted, after pulling the "Yi" model:<br/>
-  <img src="pixels/config-ollama-2-admin-pull.png" alt="config-local-ollama-2-admin-pull.png" width="320">
+* After adding the `Ollama` model vendor, entering the IP address of an Ollama server, and refreshing models:
+  <img src="pixels/config-ollama-1-models.png" alt="config-local-ollama-1-models.png" style="max-width: 320px;">

-* You can now switch model/persona dynamically and text/voice chat with the models:<br/>
-  <img src="pixels/config-ollama-3-chat.png" alt="config-local-ollama-3-chat.png" width="320">
+* The `Ollama` admin panel, with the `Pull` button highlighted, after pulling the "Yi" model:
+  <img src="pixels/config-ollama-2-admin-pull.png" alt="config-local-ollama-2-admin-pull.png" style="max-width: 320px;">

-<br/>
-
-### ⚠️ Network Troubleshooting
-
-If you get errors about the server having trouble connecting with Ollama, please see
-[this message](https://github.com/enricoros/big-AGI/issues/276#issuecomment-1858591483) on Issue #276.
-
-And in brief, make sure the Ollama endpoint is accessible from the servers where you run big-AGI (which could
-be localhost or cloud servers).
-![Ollama Networking Chart](pixels/config-ollama-network.png)
-
-<br/>
+* You can now switch model/persona dynamically and text/voice chat with the models:
+  <img src="pixels/config-ollama-3-chat.png" alt="config-local-ollama-3-chat.png" style="max-width: 320px;">

 ### Advanced: Model parameters

@@ -72,27 +54,20 @@ Then, edit the nginx configuration file `/etc/nginx/sites-enabled/default` and a

 ```nginx
    location /ollama/ {
-        proxy_pass http://127.0.0.1:11434/;
-
-        # Disable buffering for the streaming responses (SSE)
-        proxy_set_header Connection '';
+        proxy_pass http://localhost:11434;
        proxy_http_version 1.1;
-        chunked_transfer_encoding off;
-        proxy_buffering off;
-        proxy_cache off;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_cache_bypass $http_upgrade;
        
-        # Longer timeouts (1hr)
-        keepalive_timeout 3600;
-        proxy_read_timeout 3600;
-        proxy_connect_timeout 3600;
-        proxy_send_timeout 3600;
+        # Disable buffering for the streaming responses
+        proxy_buffering off;
    }
 ```

 Reach out to our community if you need help with this.

-<br/>
-
 ### Community and Support

 Join our community to share your experiences, get help, and discuss best practices:
@@ -103,4 +78,4 @@ Join our community to share your experiences, get help, and discuss best practic
 ---

 `big-AGI` is committed to providing a powerful, intuitive, and privacy-respecting AI experience.
-We are excited for you to explore the possibilities with Ollama models. Happy creating!
+We are excited for you to explore the possibilities with Ollama models. Happy creating!
@@ -22,9 +22,6 @@ This document details the process of integrating OpenRouter with big-AGI.
   ![feature-openrouter-configure.png](pixels/feature-openrouter-configure.png)
 4. OpenAI GPT4-32k and other models will now be accessible and selectable in the application.

-In addition to using the UI, configuration can also be done using
-[environment variables](environment-variables.md).
-
 ### Pricing

 OpenRouter independently manages its service and pricing and is not affiliated with big-AGI.
@@ -1,91 +0,0 @@
-# Customizing and Creating Derivative Applications
-
-This document outlines how to develop applications derived from big-AGI.
-
-## Manual Customization
-
-Application customization _requires manual code modifications or the use of environment variables_. Currently, **there is no admin panel to "managed" deployment customization** for enterprise use cases.
-
-| Required Code Alteration                                                              | Not Required                                                                                                              |
-|---------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------|
-| - Persona changes<br>- UI theme customization<br>- Feature additions or modifications | - Setting API keys in [environment variables](environment-variables.md)<br>- Toggling features with environment variables |
-| Apply these to the source code before building the application                        | Set these post-build on local machines or cloud deployment, before application launch                                     |
-
-<br/>
-
-## Code Alterations
-
-Start by creating a fork of the [big-AGI repository](https://github.com/enricoros/big-AGI) on GitHub for a personal development space.
-Understand the Architecture: big-AGI uses Next.js, React for the front end, and Node.js (Next.js edge functions) for the back end.
-
-### Add Authentication
-
-This necessitates a code change (file renaming) before build initiation, detailed in [deploy-authentication.md](deploy-authentication.md).
-
-### Increase Vercel Functions Timeout
-
-For long-running operations, Vercel allows paid deployments to increase the timeout on Functions.
-Note that this applies to old-style Vercel Functions (based on Node.js) and not the new Edge Functions.
-
-At time of writing, big-AGI has only 2 operations that run on Node.js Functions:
-browsing (fetching web pages) and sharing. They both can exceed 10 seconds, especially
-when fetching large pages or waiting for websites to be completed.
-
-We provide `vercel_PRODUCTION.json` to raise the duration to 25 seconds (from a default of 10), to use it,
-make sure to rename it to `vercel.json` before build.
-
-From the Vercel Project > Settings > General > Build & Development Settings,
-you can for instance set the build command to:
-
-```bash
-mv vercel_PRODUCTION.json vercel.json; next build
-```
-
-### Change the Personas
-
-Edit the `src/data.ts` file to customize personas. This file houses the default personas. You can add, remove, or modify these to meet your project's needs.
-
- [ ] Modify `src/data.ts` to alter default personas
-
-### Change the UI
-
-Adapt the UI to match your project's aesthetic, incorporate new features, or exclude unnecessary ones.
-
- [ ] Adjust `src/common/app.theme.ts` for theme changes: colors, spacing, button appearance, animations, etc
- [ ] Modify `src/common/app.config.tsx` to alter the application's name
- [ ] Update `src/common/app.nav.tsx` to revise the navigation bar
-
-## Testing & Deployment
-
-Test your application thoroughly using local development (refer to README.md for local build instructions). Deploy using your preferred hosting service. big-AGI supports deployment on platforms like Vercel, Docker, or any Node.js-compatible service, especially those supporting NextJS's "Edge Runtime."
-
- [deploy-cloudflare.md](deploy-cloudflare.md): for Cloudflare Workers deployment
- [deploy-docker.md](deploy-docker.md): for Docker deployment instructions and examples
- [deploy-k8s.md](deploy-k8s.md): for Kubernetes deployment instructions and examples
-
-## Debugging
-
-We introduced the `/info/debug` page that provides a detailed overview of the application's environment, including the API keys, environment variables, and other configuration settings.
-
-<br/>
-
-## Community Projects - Share Your Project
-
-After deployment, share your project with the community. We will link to your project to help others discover and learn from your work.
-
-| Project                                                                                                                                                        | Features                                                                                                  | GitHub                                                                              |
-|----------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------|
-| 🚀 CoolAGI: Where AI meets Imagination<br/>![CoolAGI Logo](https://github.com/nextgen-user/freegpt4plus/assets/150797204/9b0e1232-4791-4d61-b949-16f9eb284c22) | Code Interpreter, Vision, Mind maps, Web Searches, Advanced Data Analytics, Large Data Handling and more! | [nextgen-user/CoolAGI](https://github.com/nextgen-user/CoolAGI)                     |
-| HL-GPT                                                                                                                                                         | Fully remodeled UI                                                                                        | [harlanlewis/nextjs-chatgpt-app](https://github.com/harlanlewis/nextjs-chatgpt-app) |
-
-For public projects, update your README.md with your modifications and submit a pull request to add your project to our list, aiding in its discovery.
-
-<br/>
-
-## Best Practices
-
- **Stay Updated**: Frequently merge updates from the main big-AGI repository to incorporate bug fixes and new features.
- **Keep It Open Source**: Consider maintaining your derivative as open source to foster community contributions.
- **Engage with the Community**: Leverage platforms like GitHub, Discord, or Reddit for feedback, collaboration, and project promotion.
-
-Developing a derivative application is an opportunity to explore new possibilities with AI and share your innovations with the global community. We look forward to seeing your contributions.
@@ -1,63 +0,0 @@
-# big-AGI Analytics
-
-The open-source big-AGI project provides support for the following analytics services:
-
- **Vercel Analytics**: automatic when deployed to Vercel
- **Google Analytics 4**: manual setup required
-
-The following is a quick overview of the Analytics options for the deployers of this open-source project.
-big-AGI is deployed to many large-scale and enterprise though various ways (custom builds, Docker, Vercel, Cloudflare, etc.),
-and this guide is for its customization.
-
-## Service Configuration
-
-### Vercel Analytics
-
- Why: understand coarse traction, and identify deployment issues - all without tracking individual users
- What: top pages, top referrers, country of origin, operating system, browser, and page speed metrics
-
-Vercel Analytics and Speed Insights are local API endpoints deployed to your domain, so everything stays within your
-domain. Furthermore, the Vercel Analytics service is privacy-friendly, and does not track individual users.
-
-This service is avaialble to system administrators when deploying to Vercel. It is automatically enabled when deploying to Vercel.
-The code that activates Vercel Analytics is located in the `src/pages/_app.tsx` file:
-
-```tsx
-const MyApp = ({ Component, emotionCache, pageProps }: MyAppProps) => <>
-  ...
-  {isVercelFromFrontend && <VercelAnalytics debug={false} />}
-  {isVercelFromFrontend && <VercelSpeedInsights debug={false} sampleRate={1 / 2} />}
-  ...
-</>;
-```
-
-When big-AGI is served on Vercel hosts, the ```process.env.NEXT_PUBLIC_VERCEL_URL``` environment variable is trueish, and
-analytics will be sent by default to the Vercel Analytics service which is deployed by Vercel IF configured from the
-Vercel project dashboard.
-
-In summary: to turn it on: activate the `Analytics` service in the Vercel project dashboard.
-
-### Google Analytics 4
-
- Why: user engagement and retention, performance insights, personalization, content optimization
- What: https://support.google.com/analytics/answer/11593727
-
-Google Analytics 4 (GA4) is a powerful tool for understanding user behavior and engagement.
-This can help optimize big-AGI, understanding which features are needed/users and which aren't.
-
-To enable Google Analytics 4, you need to set the `NEXT_PUBLIC_GA4_MEASUREMENT_ID` environment variable
-before starting the local build or the docker build (i.e. at build time), at which point the
-server/container will be able to report analytics to your Google Analytics 4 property.
-
-As of Feb 27, 2024, this feature is in development.
-
-## Configurations
-
-| Scope                                                                                   | Default          | Description / Instructions                                                                                              |
-|-----------------------------------------------------------------------------------------|------------------|-------------------------------------------------------------------------------------------------------------------------|
-| Your source builds of big-AGI                                                           | None             | **Vercel**: enable Vercel Analytics from the dashboard. · **Google Analytics**: set environment variable at build time. |
-| Your docker builds of big-AGI                                                           | None             | **Vercel**: n/a. · **Google Analytics**: set environment variable at `docker build` time.                               |
-| [big-agi.com](https://big-agi.com)                                                      | Vercel + Google  | The main website ([privacy policy](https://big-agi.com/privacy)) hosted for free for anyone.                            |
-| [official Docker packages](https://github.com/enricoros/big-AGI/pkgs/container/big-agi) | Google Analytics | **Vercel**: n/a · **Google Analytics**: set to the big-agi.com Google Analytics for analytics and improvements.         |
-
-Note: this information is updated as of Feb 27, 2024 and can change at any time.
@@ -1,45 +0,0 @@
-# Authentication
-
-`big-AGI` does not come with built-in authentication. To secure your deployment, you can implement authentication
-in one of the following ways:
-
-1. Build `big-AGI` with support for ⬇️ [HTTP Authentication](#http-authentication)
-2. Utilize user authentication features provided by your ⬇️ [cloud deployment platform](#cloud-deployments-authentication)
-3. Develop a custom authentication solution
-
-<br/>
-
-### HTTP Authentication
-
-[HTTP Basic Authentication](https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication) is a simple method
-to secure your application.
-
-To enable it in `big-AGI`, you **must manually build the application**:
-
- Build `big-AGI` with HTTP authentication enabled:
-  - Clone the repository
-  - Rename `middleware_BASIC_AUTH.ts` to `middleware.ts`
-  - Build: usual simple build procedure (e.g. [Deploy manually](installation.md#Local-Production-build) or [Deploying with Docker](deploy-docker.md))
-
- Configure the following [environment variables](environment-variables.md) before launching `big-AGI`:
-```dotenv
-HTTP_BASIC_AUTH_USERNAME=<your username>
-HTTP_BASIC_AUTH_PASSWORD=<your password>
-```
-
- Start the application 🔒
-
-<br/>
-
-### Cloud Deployments Authentication
-
-> This approach allows you to enable authentication without rebuilding the application by using the features
-> provided by your cloud platform to manage user accounts and access.
-
-Many cloud deployment platforms offer built-in authentication mechanisms. Refer to the platform's documentation
-for setup instructions:
-
-1. [CloudFlare Access / Zero Trust](https://www.cloudflare.com/zero-trust/products/access/)
-2. [Vercel Authentication](https://vercel.com/docs/security/deployment-protection/methods-to-protect-deployments/vercel-authentication)
-3. [Vercel Password Protection](https://vercel.com/docs/security/deployment-protection/methods-to-protect-deployments/password-protection)
-4. Let us know when you test more solutions (Heroku, AWS IAM, Google IAP, etc.)
@@ -34,7 +34,7 @@ Fork the repository to your personal GitHub account.
 2. On this page, set your **Project name**, **Production branch** (e.g., main), and your Build settings
 3. Choose `Next.js` from the **Framework preset** dropdown menu
 4. Set a custom **Build Command**:
-    - `rm app/api/cloud/[trpc]/route.ts && npx @cloudflare/next-on-pages@1`
+    - `rm app/api/trpc-node/[trpc]/route.ts && npx @cloudflare/next-on-pages@1`
    - see the tradeoffs for this deletion on the notice at the top
 5. Keep the **Build output directory** as default
 6. Click the **Save and Deploy** button
@@ -1,66 +0,0 @@
-**Connecting Your Database for Enhanced Features:**
-
-This guide outlines the database options and setup steps for enabling features like Chat Link Sharing in your application.
-
-### Choose Your Database:
-
-**1. Serverless Postgres (default):**
-
- Available on Vercel, Neon, and other platforms.
- Less feature-rich but a suitable option depending on your needs.
- **Connection String:** Replace placeholders with your Postgres credentials.
-  - `postgres://USER:PASS@SOMEHOST.postgres.vercel-storage.com/SOMEDB?pgbouncer=true&connect_timeout=15`
-
-**2. MongoDB Atlas (alternative):**
-
- **Highly Recommended:** More than a database, it's a data platform. MongoDB Atlas is a robust cloud-based platform that offers scalability, security, and a suite of developer tools. No need for a separate vector database, you can query your vector embeddings right within your operational database!
- **Additional Features:** MongoDB Atlas is packed with unique features designed to streamline the development process such as: Atlas App Services, Atlas search (with vector search), Atlas charts, Data Federation, and more.
- **Connection String:** Replace placeholders with your Atlas credentials.
-  - `mongodb://USER:PASS@CLUSTER-NAME.mongodb.net/DATABASE-NAME?retryWrites=true&w=majority`
-
-### Environment Variables:
-
-#### Postgres:
-
-| Variable                              |                                                                                                      |
-|---------------------------------------|------------------------------------------------------------------------------------------------------|
-| `POSTGRES_PRISMA_URL`                 | `postgres://USER:PASS@SOMEHOST.postgres.vercel-storage.com/SOMEDB?pgbouncer=true&connect_timeout=15` |
-| `POSTGRES_URL_NON_POOLING` (optional) | URL for the Postgres database without pooling (specific use cases)                                   |
-
-#### MongoDB:
-
-| Variable  |                                                                                          |
-|-----------|------------------------------------------------------------------------------------------|
-| `MDB_URI` | `mongodb://USER:PASS@CLUSTER-NAME.mongodb.net/DATABASE-NAME?retryWrites=true&w=majority` |
-
-### MongoDB Atlas + Prisma
-
-When using MongoDB Atlas, you'll need to make the below changes to the file [`src/server/prisma/schema.prisma`](../src/server/prisma/schema.prisma).
-
-```
-...
-datasource db {
-  provider  = "mongodb"
-  url       = env("MDB_URI")
-}
-
-//
-// Storage of Linked Data
-//
-model LinkStorage {
-  id String @id @default(uuid()) @map("_id")
-
-// ...rest of file
-```
-
-### Initial Setup Steps:
-
-1. **Run `npx prisma db push`:** Create or update the database schema (run once after connecting).
-
-### Additional Resources:
-
- Prisma documentation: [https://www.prisma.io/docs/](https://www.prisma.io/docs/)
- MongoDB Atlas: [https://www.mongodb.com/atlas/database](https://www.mongodb.com/atlas/database)
- Atlas App Services: [https://www.mongodb.com/docs/atlas/app-services/](https://www.mongodb.com/docs/atlas/app-services/)
- Atlas vector search: [https://www.mongodb.com/products/platform/atlas-vector-search/](https://www.mongodb.com/products/platform/atlas-vector-search)
- Atlas Data Federation: [https://www.mongodb.com/products/platform/atlas-data-federation](https://www.mongodb.com/products/platform/atlas-data-federation)
@@ -3,41 +3,38 @@
 Utilize Docker containers to deploy the big-AGI application for an efficient and automated deployment process.
 Docker ensures faster development cycles, easier collaboration, and seamless environment management.

-## Build and run your container 🔧
+## 🔧 Local Build & Deployment

 1. **Clone big-AGI**
-   ```bash
-   git clone https://github.com/enricoros/big-agi.git
-   cd big-agi
-   ```
-2. **Build the Docker Image**: Build a local docker image from the provided Dockerfile:
-   ```bash
-   docker build -t big-agi .
-   ```
-3. **Run the Docker Container**: start a Docker container from the newly built image,
-   and expose its http port 3000 to your `localhost:3000` using:
-   ```bash
-   docker run -d -p 3000:3000 big-agi
-   ```
-4. Browse to [http://localhost:3000](http://localhost:3000)
+2. **Build the Docker Image**: Build a local docker image from the provided Dockerfile. The command is typically `docker build -t big-agi .`
+3. **Run the Docker Container**: Start a Docker container using the built image with the command `docker run -d -p 3000:3000 big-agi`

-<br/>
+> Note: If the Docker container is built without setting environment variables,
+> the frontend UI will be unaware of them, despite the backend being able to use them at runtime.
+> Therefore, ensure all necessary environment variables are set during the build process.

-## Run Official Containers 📦
+## Documentation

-`big-AGI` is pre-built from source code and published as a Docker image on the GitHub Container Registry (ghcr).
-The build process is transparent, and happens via GitHub Actions, as described in the
-file.
+The big-AGI repository includes a Dockerfile and a GitHub Actions workflow for building and publishing a
+Docker image of the application.

-### Official Images: [ghcr.io/enricoros/big-agi](https://github.com/enricoros/big-agi/pkgs/container/big-agi)
+### Dockerfile: Containers

-#### Run using *docker* 🚀
+> A local build is recommended, as the 'ghcr' container is built without environment variables.

-```bash
-docker run -d -p 3000:3000 ghcr.io/enricoros/big-agi:latest
-```
+The [`Dockerfile`](../Dockerfile) is used to create a Docker image. It establishes a Node.js environment,
+installs dependencies, and creates a production-ready version of the application as a local container.

-#### Run using *docker-compose* 🚀
+### GitHub Actions workflow
+
+The [`.github/workflows/docker-image.yml`](../.github/workflows/docker-image.yml) file automates the
+building and publishing of the Docker images to the GitHub Container Registry (ghcr) when changes are
+pushed to the `main` branch.
+
+### Docker Compose
+
+In addition, the repository also includes a `docker-compose.yaml` file, configured to run the pre-built
+'ghcr image'. This file is used to define the `big-agi` service, the ports to expose, and the command to run.

 If you have Docker Compose installed, you can run the Docker container with `docker-compose up`
 to pull the Docker image (if it hasn't been pulled already) and start a Docker container. If you want to
@@ -47,42 +44,4 @@ update the image to the latest version, you can run `docker-compose pull` before
 docker-compose up -d
 ```

-### Make Local Services Visible to Docker 🌐
-
-To make local services running on your host machine accessible to a Docker container, such as a
-[Browseless](./config-feature-browse.md) service or a local API, you can follow this simplified guide:
-
-| Operating System  | Steps to Make Local Services Visible to Docker                                                                                                                                                                                                                                                                                                                                               |
-|:------------------|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| Windows and macOS | Use the special DNS name `host.docker.internal` to refer to the host machine from within the Docker container. No additional network configuration is required. Access local services using `host.docker.internal:<PORT>`.                                                                                                                                                                   |
-| Linux             | Two options: *A*. Use <ins>--network="host"</ins> (`docker run --network="host" -d big-agi`) when running the Docker container to merge the container within the host network stack; however, this reduces container isolation. Alternatively: *B*. Connect to local services <ins>using the host's IP address</ins> directly, as host.docker.internal is not available by default on Linux. |
-
-<br/>
-
-### Reverse Proxy Configuration
-
-A reverse proxy is a server that sits in front of big-AGI's container and can forwards web
-requests to it. Often used to run multiple web applications, expose them to the internet,
-increase security.
-
-If you're deploying big-AGI behind a reverse proxy, you may want to see
-our [Reverse Proxy Deployment Guide](deploy-reverse-proxy.md) for more information.
-
-<br/>
-
-### More Information
-
-The [`Dockerfile`](../Dockerfile) describes how to create a Docker image. It establishes a Node.js environment,
-installs dependencies, and creates a production-ready version of the application as a local container.
-
-The [`docker-compose.yaml`](../docker-compose.yaml) file is configured to run the
-official image (big-agi:latest). This file is used to define the `big-agi` service, to expose
-port 3000 on the host, and launch big-AGI within the container (startup command).
-
-The [`.github/workflows/docker-image.yml`](../.github/workflows/docker-image.yml) file is used
-to build the Official Docker images and publish them to the GitHub Container Registry (ghcr).
-The build process is transparent and happens via GitHub Actions.
-
-<br/>
-
-Leverage Docker's capabilities for a reliable and efficient big-AGI deployment!
+Leverage Docker's capabilities for a reliable and efficient big-AGI deployment.
@@ -1,85 +0,0 @@
-# Deploy `big-AGI` with Kubernetes ☸️
-
-In this tutorial, we will guide you through the process of deploying big-AGI
-in a Kubernetes environment using the kubectl command-line tool.
-
-## First Deployment
-
-### Step 1: Clone the big-AGI repository
-
-```bash
-$ git clone https://github.com/enricoros/big-agi
-$ cd ./big-agi/docs/k8s
-```
-
-### Step 2: Create the namespace
-
-```bash
-$ kubectl create namespace ns-big-agi
-```
-
-### Step 3: Fill in the key information into env-secret.yaml
-
-All variables are optional. By default, Kubernetes Secret uses Base64 for
-encode/decode, so please don't do a git commit after filling in the keys
-to avoid leaking sensitive information.
-
-We provide an empty `env-secret.yaml` file as a template.
-You can fill in the necessary information using a text editor.
-
-```bash
-$ nano env-secret.yaml
-```
-
-### Step 4: Deploying Kubernetes Resources
-
-```bash
-$ kubectl apply -f big-agi-deployment.yaml -f env-secret.yaml
-```
-
-### Step 5: Verifying the Resource Statuses
-
-```bash
-$ kubectl -n ns-big-agi get svc,pod,deployment
-NAME                  TYPE        CLUSTER-IP     EXTERNAL-IP   PORT(S)    AGE
-service/svc-big-agi   ClusterIP   10.0.198.118   <none>        3000/TCP   63m
-
-NAME                                     READY   STATUS    RESTARTS   AGE
-pod/deployment-big-agi-xxxxxxxx-yyyyy    1/1     Running   0          39m
-
-NAME                              READY   UP-TO-DATE   AVAILABLE   AGE
-deployment.apps/deployment-big-agi   1/1     1            1           63m
-```
-
-### Step 6: Testing the Service
-
-You can test the service by port-forwarding the service to your local machine:
-
-```bash
-$ kubectl -n ns-big-agi port-forward service/svc-big-agi 3000
-Forwarding from 127.0.0.1:3000 -> 3000
-Forwarding from [::1]:3000 -> 3000
-```
-
-Now you can access the service at `http://localhost:3000`, and you should see the big-AGI homepage.
-
-## Updating big-AGI
-
-To update big-AGI to the latest version:
-
-1. Pull the latest changes from the repository:
-   ```bash
-   $ git pull origin main
-   ```
-
-2. Apply the updated deployment:
-   ```bash
-   $ kubectl apply -f big-agi-deployment.yaml
-   ```
-
-This will trigger a rolling update of the deployment with the latest image.
-
-**Note**: If you're deploying big-AGI behind a reverse proxy, you may need to configure
-your proxy to support streaming. See our [Reverse Proxy Deployment Guide](deploy-reverse-proxy.md) for more information.
-
-Note: For production use, consider setting up an Ingress Controller or Load Balancer instead of using port-forward.
@@ -1,58 +0,0 @@
-# Advanced: Deploying big-AGI behind a Reverse Proxy
-
-Note: if you don't have a reverse proxy set up, you can skip this guide.
-
-If you're deploying big-AGI behind a reverse proxy, you may want to configure your proxy to support streaming output.
-This guide provides instructions on how to configure your reverse proxy to support streaming output from big-AGI.
-
-This is for advanced deployments, and you should have a basic understanding of how reverse proxies work.
-
-## Nginx Configuration
-
-If you're using Nginx as your reverse proxy, add the following configuration to your server block:
-
-```nginx
-server {
-    listen 80;
-    server_name your-domain.com;
-
-    location / {
-        # ...your specific proxy_pass configuration, example below...
-        proxy_pass http://localhost:3000;  # Assuming big-AGI is running on port 3000
-        proxy_http_version 1.1;
-        proxy_set_header Upgrade $http_upgrade;
-        proxy_set_header Connection 'upgrade';
-        proxy_set_header Host $host;
-        proxy_cache_bypass $http_upgrade;
-        # ...
-
-        # Important: Disable buffering for the streaming responses (SSE)
-        chunked_transfer_encoding on;   # Turn on chunked transfer encoding
-        proxy_buffering off;            # Turn off proxy buffering
-        proxy_cache off;                # Turn off caching
-        tcp_nodelay on;                 # Turn on TCP NODELAY option, disable delay ACK algorithm
-        tcp_nopush on;                  # Turn on TCP NOPUSH option, disable Nagle algorithm
-
-        # Important: Longer timeouts (5 min)
-        keepalive_timeout 300;
-        proxy_connect_timeout 300;
-        proxy_read_timeout 300;
-        proxy_send_timeout 300;
-    }
-}
-```
-
-This configuration disables caching and buffering, enables chunked transfer encoding, and adjusts TCP settings to optimize for streaming content.
-
-## Troubleshooting
-
-If you're experiencing issues with streaming not working, especially when deploying behind a reverse proxy,
-ensure that your proxy is configured to support streaming output as described above.
-
-## Additional Resources
-
- For Docker deployments, see our [Docker Deployment Guide](deploy-docker.md)
- For Kubernetes deployments, see our [Kubernetes Deployment Guide](deploy-k8s.md)
- For general installation instructions, see our [Installation Guide](installation.md)
-
-If you continue to experience issues, please reach out to our [community support channels](../README.md#-get-involved).
@@ -1,31 +0,0 @@
-# This file is used to run `big-AGI` and `browserless` with Docker Compose.
-#
-# The two containers are linked together and `big-AGI` is configured to use `browserless`
-# as its Puppeteer endpoint (from the containers intranet, it is available browserless:3000).
-#
-# From your host, you can access big-AGI on http://127.0.0.1:3000 and browserless on http://127.0.0.1:9222.
-#
-# To start the containers, run:
-#   docker-compose -f docs/docker/docker-compose-browserless.yaml up
-
-version: '3.9'
-
-services:
-  big-agi:
-    image: ghcr.io/enricoros/big-agi:latest
-    ports:
-      - "3000:3000"
-    env_file:
-      - .env
-    environment:
-      - PUPPETEER_WSS_ENDPOINT=ws://browserless:3000
-    command: [ "next", "start", "-p", "3000" ]
-    depends_on:
-      - browserless
-
-  browserless:
-    image: browserless/chrome:latest
-    ports:
-      - "9222:3000"  # Map host's port 9222 to container's port 3000
-    environment:
-      - MAX_CONCURRENT_SESSIONS=10
@@ -1,14 +0,0 @@
-# Why big-AGI?
-Placeholder for a document that demonstrates the productivity and unique features of Big-AGI.
-
-## Exclusive features
- [x] Call AGI
- [x] Continuous Voice mode
- [x] Diagram generation
- [ ] ...
-
-## Productivity Features
- [x] Multi-window to never wait
- [x] Multi-Chat to explore different solutions
- [x] Rendering of graphs, charts, mindmaps
- [ ] ...
@@ -3,22 +3,23 @@
 This document provides an explanation of the environment variables used in the big-AGI application.

 **All variables are optional**; and _UI options_ take precedence over _backend environment variables_,
-which take place over _defaults_. This file is kept in sync with [`../src/server/env.mjs`](../src/server/env.mjs).
+which take place over _defaults_. This file is kept in sync with [`../src/common/types/env.d.ts`](../src/common/types/env.d.ts).

 ### Setting Environment Variables

 Environment variables can be set by creating a `.env` file in the root directory of the project.

+> For Docker deployment, ensure all necessary environment variables are set **both during build and run**.
+> If the Docker container is built without setting environment variables, the frontend UI will be unaware
+> of them, despite the backend being able to use them at runtime.
+
 The following is an example `.env` for copy-paste convenience:

 ```bash
-# Database (Postgres)
+# Database
 POSTGRES_PRISMA_URL=
 POSTGRES_URL_NON_POOLING=

-# Database (MongoDB)
-MDB_URI=
-
 # LLMs
 OPENAI_API_KEY=
 OPENAI_API_HOST=
@@ -27,85 +28,56 @@ AZURE_OPENAI_API_ENDPOINT=
 AZURE_OPENAI_API_KEY=
 ANTHROPIC_API_KEY=
 ANTHROPIC_API_HOST=
-DEEPSEEK_API_KEY=
-GEMINI_API_KEY=
-GROQ_API_KEY=
-LOCALAI_API_HOST=
-LOCALAI_API_KEY=
-MISTRAL_API_KEY=
 OLLAMA_API_HOST=
-OPENPIPE_API_KEY=
 OPENROUTER_API_KEY=
-PERPLEXITY_API_KEY=
-TOGETHERAI_API_KEY=
-XAI_API_KEY=

 # Model Observability: Helicone
 HELICONE_API_KEY=

-# Browse
-PUPPETEER_WSS_ENDPOINT=
-
-# Search
-GOOGLE_CLOUD_API_KEY=
-GOOGLE_CSE_ID=
-
-# Text-To-Speech: ElevenLabs
+# Text-To-Speech
 ELEVENLABS_API_KEY=
 ELEVENLABS_API_HOST=
 ELEVENLABS_VOICE_ID=
-# Text-To-Image: Prodia
+# Google Custom Search
+GOOGLE_CLOUD_API_KEY=
+GOOGLE_CSE_ID=
+# Text-To-Image
 PRODIA_API_KEY=
-
-# Backend HTTP Basic Authentication (see `deploy-authentication.md` for turning on authentication)
-HTTP_BASIC_AUTH_USERNAME=
-HTTP_BASIC_AUTH_PASSWORD=
-
-
-# Frontend variables
-NEXT_PUBLIC_GA4_MEASUREMENT_ID=
-NEXT_PUBLIC_PLANTUML_SERVER_URL=
 ```

-## Backend Variables
-
-These variables are used only by the server-side code, at runtime. Define them before running the nextjs local server (in development or
-cloud deployment), or pass them to Docker (--env-file or -e) when starting the container.
+## Variables Documentation

 ### Database

-To enable Chat Link Sharing, you need to connect the backend to a database. We currently support Postgres and MongoDB.
+To enable features such as Chat Link Shring, you need to connect the backend to a database. We require
+serverless Postgres, which is available on Vercel, Neon and more.

-For Database configuration see [deploy-database.md](deploy-database.md).
+Also make sure that you run `npx prisma db:push` to create the initial schema on the database for the
+first time (or update it on a later stage).
+
+| Variable                   | Description                                                                                                                                                     |
+|----------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `POSTGRES_PRISMA_URL`      | The URL of the Postgres database used by Prisma - example: `postgres://USER:PASS@SOMEHOST.postgres.vercel-storage.com/SOMEDB?pgbouncer=true&connect_timeout=15` |
+| `POSTGRES_URL_NON_POOLING` | The URL of the Postgres database without pooling                                                                                                                |

 ### LLMs

 The following variables when set will enable the corresponding LLMs on the server-side, without
 requiring the user to enter an API key

-| Variable                    | Description                                                                                                    | Required                                                          |
-|-----------------------------|----------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------|
-| `OPENAI_API_KEY`            | API key for OpenAI                                                                                             | Recommended                                                       |
-| `OPENAI_API_HOST`           | Changes the backend host for the OpenAI vendor, to enable platforms such as Helicone and CloudFlare AI Gateway | Optional                                                          |
-| `OPENAI_API_ORG_ID`         | Sets the "OpenAI-Organization" header field to support organization users                                      | Optional                                                          |
-| `AZURE_OPENAI_API_ENDPOINT` | Azure OpenAI endpoint - host only, without the path                                                            | Optional, but if set `AZURE_OPENAI_API_KEY` must also be set      |
-| `AZURE_OPENAI_API_KEY`      | Azure OpenAI API key, see [config-azure-openai.md](config-azure-openai.md)                                     | Optional, but if set `AZURE_OPENAI_API_ENDPOINT` must also be set |
-| `ANTHROPIC_API_KEY`         | The API key for Anthropic                                                                                      | Optional                                                          |
-| `ANTHROPIC_API_HOST`        | Changes the backend host for the Anthropic vendor, to enable platforms such as AWS Bedrock                     | Optional                                                          |
-| `DEEPSEEK_API_KEY`          | The API key for Deepseek AI                                                                                    | Optional                                                          |
-| `GEMINI_API_KEY`            | The API key for Google AI's Gemini                                                                             | Optional                                                          |
-| `GROQ_API_KEY`              | The API key for Groq Cloud                                                                                     | Optional                                                          |
-| `LOCALAI_API_HOST`          | Sets the URL of the LocalAI server, or defaults to http://127.0.0.1:8080                                       | Optional                                                          |
-| `LOCALAI_API_KEY`           | The (Optional) API key for LocalAI                                                                             | Optional                                                          |
-| `MISTRAL_API_KEY`           | The API key for Mistral                                                                                        | Optional                                                          |
-| `OLLAMA_API_HOST`           | Changes the backend host for the Ollama vendor. See [config-local-ollama.md](config-local-ollama.md)           |                                                                   |
-| `OPENPIPE_API_KEY`          | The API key for OpenPipe                                                                                       | Optional                                                          |
-| `OPENROUTER_API_KEY`        | The API key for OpenRouter                                                                                     | Optional                                                          |
-| `PERPLEXITY_API_KEY`        | The API key for Perplexity                                                                                     | Optional                                                          |
-| `TOGETHERAI_API_KEY`        | The API key for Together AI                                                                                    | Optional                                                          |
-| `XAI_API_KEY`               | The API key for xAI                                                                                            | Optional                                                          |
+| Variable                    | Description                                                                                                                   | Required                                                          |
+|-----------------------------|-------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------|
+| `OPENAI_API_KEY`            | API key for OpenAI                                                                                                            | Recommended                                                       |
+| `OPENAI_API_HOST`           | Changes the backend host for the OpenAI vendor, to enable platforms such as Helicone and CloudFlare AI Gateway                | Optional                                                          |
+| `OPENAI_API_ORG_ID`         | Sets the "OpenAI-Organization" header field to support organization users                                                     | Optional                                                          |
+| `AZURE_OPENAI_API_ENDPOINT` | Azure OpenAI endpoint - host only, without the path                                                                           | Optional, but if set `AZURE_OPENAI_API_KEY` must also be set      |
+| `AZURE_OPENAI_API_KEY`      | Azure OpenAI API key, see [config-azure-openai.md](config-azure-openai.md)                                                    | Optional, but if set `AZURE_OPENAI_API_ENDPOINT` must also be set |
+| `ANTHROPIC_API_KEY`         | The API key for Anthropic                                                                                                     | Optional                                                          |
+| `ANTHROPIC_API_HOST`        | Changes the backend host for the Anthropic vendor, to enable platforms such as [config-aws-bedrock.md](config-aws-bedrock.md) | Optional                                                          |
+| `OLLAMA_API_HOST`           | Changes the backend host for the Ollama vendor. See [config-ollama.md](config-ollama.md)                                      |                                                                   |
+| `OPENROUTER_API_KEY`        | The API key for OpenRouter                                                                                                    | Optional                                                          |

-### LLM Observability: Helicone
+### Model Observability: Helicone

 Helicone provides observability to your LLM calls. It is a paid service, with a generous free tier.
 It is currently supported for:
@@ -117,40 +89,23 @@ It is currently supported for:
 |--------------------|--------------------------|
 | `HELICONE_API_KEY` | The API key for Helicone |

-### Features
+### Specials

 Enable the app to Talk, Draw, and Google things up.

-| Variable                   | Description                                                                                                             |
-|:---------------------------|:------------------------------------------------------------------------------------------------------------------------|
-| **Text-To-Speech**         | [ElevenLabs](https://elevenlabs.io/) is a high quality speech synthesis service                                         |
-| `ELEVENLABS_API_KEY`       | ElevenLabs API Key - used for calls, etc.                                                                               |
-| `ELEVENLABS_API_HOST`      | Custom host for ElevenLabs                                                                                              |
-| `ELEVENLABS_VOICE_ID`      | Default voice ID for ElevenLabs                                                                                         |
-| **Text-To-Image**          | [Prodia](https://prodia.com/) is a reliable image generation service                                                    |
-| `PRODIA_API_KEY`           | Prodia API Key - used with '/imagine ...'                                                                               |
-| **Google Custom Search**   | [Google Programmable Search Engine](https://programmablesearchengine.google.com/about/)  produces links to pages        |
-| `GOOGLE_CLOUD_API_KEY`     | Google Cloud API Key, used with the '/react' command - [Link to GCP](https://console.cloud.google.com/apis/credentials) |
-| `GOOGLE_CSE_ID`            | Google Custom/Programmable Search Engine ID - [Link to PSE](https://programmablesearchengine.google.com/)               |
-| **Browse**                 |                                                                                                                         |
-| `PUPPETEER_WSS_ENDPOINT`   | Puppeteer WebSocket endpoint - used for browsing (pade downloadeing), etc.                                              |
-| **Backend**                |                                                                                                                         |
-| `HTTP_BASIC_AUTH_USERNAME` | See the [Authentication](deploy-authentication.md) guide. Username for HTTP Basic Authentication.                       |
-| `HTTP_BASIC_AUTH_PASSWORD` | Password for HTTP Basic Authentication.                                                                                 |
-
-### Frontend Variables
-
-The value of these variables are passed to the frontend (Web UI) - make sure they do not contain secrets.
-
-| Variable                          | Description                                                                              |
-|:----------------------------------|:-----------------------------------------------------------------------------------------|
-| `NEXT_PUBLIC_GA4_MEASUREMENT_ID`  | The measurement ID for Google Analytics 4. (see [deploy-analytics](deploy-analytics.md)) |
-| `NEXT_PUBLIC_PLANTUML_SERVER_URL` | The URL of the PlantUML server, used for rendering UML diagrams. (code in RederCode.tsx) |
-
-> Important: these variables must be set at build time, which is required by Next.js to pass them to the frontend.
-> This is in contrast to the backend variables, which can be set when starting the local server/container.
+| Variable                 | Description                                                                                                             |
+|:-------------------------|:------------------------------------------------------------------------------------------------------------------------|
+| **Text-To-Speech**       | [ElevenLabs](https://elevenlabs.io/) is a high quality speech synthesis service                                         |
+| `ELEVENLABS_API_KEY`     | ElevenLabs API Key - used for calls, etc.                                                                               |
+| `ELEVENLABS_API_HOST`    | Custom host for ElevenLabs                                                                                              |
+| `ELEVENLABS_VOICE_ID`    | Default voice ID for ElevenLabs                                                                                         |
+| **Google Custom Search** | [Google Programmable Search Engine](https://programmablesearchengine.google.com/about/)  produces links to pages        |
+| `GOOGLE_CLOUD_API_KEY`   | Google Cloud API Key, used with the '/react' command - [Link to GCP](https://console.cloud.google.com/apis/credentials) |
+| `GOOGLE_CSE_ID`          | Google Custom/Programmable Search Engine ID - [Link to PSE](https://programmablesearchengine.google.com/)               |
+| **Text-To-Image**        | [Prodia](https://prodia.com/) is a reliable image generation service                                                    |
+| `PRODIA_API_KEY`         | Prodia API Key - used with '/imagine ...'                                                                               |

 ---

-For a higher level overview of backend code and environment customization,
-see the [big-AGI Customization](customizations.md) guide.
+
+
@@ -1,42 +0,0 @@
-# Big-AGI Advanced Tips & Tricks
-
-> 🚨 This file is not meant for publication, and it's just been created as a handbook with tips
-> and tricks to make Big-AGI more efficient and productive. 🚨
-
-Welcome to the advanced tips and tricks guide for Big-AGI. This document will help you make the most of the platform's existing features.
-
---
-
-## Hidden Gems
-
- **Shift + Double-Click** on a chat message to **edit** it.
- **Shift + Trash Icon** to **delete** a chats and messages without confirmation.
-  - also applies elsewhere: delete Attachments, etc.
- **Shift + Click** on **New Chat** to create an incognito chat.
- Drag a big-AGI saved chat into Big-AGI to load (or attach) it.
-
-## Not-so-obvious Shortcuts
-
- When sending a message:
-  - Enter is for newlines
-  - **Shift + Enter** to send the message.
-  - **Ctrl + Enter** to **Beam** the message.
-  - **Alt/Option + Enter** to send the message without an answer.
- When editing a message:
-  - **Ctrl + Enter** to **Save** the changes.
-  - **Shift + Ctrl + Enter** to **Save & Regenerate**.
- Scroll between messages:
-  - **Ctrl + Up/Down** to scroll between **messages** and/or **Beams**.
-  
-## Worth the Effort:
-
- [LiveFile](help-feature-livefile.md) works on **Chrome**: Pair and synchronize your documents and code blocks with files on your local system: refresh, save, update them.
-
-## Best User Hacks:
-
- 
-
---
-
-Note: this document is just at the beginning. It's here so we can capture
-the best tips over time.
@@ -1,167 +0,0 @@
-# LiveFile: Synchronize Your Documents with Local Files
-
-## Introduction
-
-**LiveFile** is a powerful feature in big-AGI that allows you to **pair and synchronize
-your documents and code blocks** with files on your local system.
-
-This feature enables a **two-way connection between big-AGI and your local files on disk**,
-saving you time and effort.
-
-With LiveFile, you can:
-
- **Pair** documents and code blocks with local files.
- **Monitor** changes in local files and update content in big-AGI.
- **Refresh** chat attachments with the latest content.
- **Save** edits made in big-AGI back to your local files.
- **Store** AI-generated code and content.
-
---
-
-## Requirements
-
- **Supported Browsers:**
-  - **Google Chrome** (desktop)
-  - **Microsoft Edge** (desktop)
- **Operating Systems:**
-  - **Desktop platforms only**
-  - **Note:** Mobile devices (iOS and Android) are **not supported** due to browser limitations.
- **File Types:**
-  - Designed for **text-based files** (e.g., `.txt`, `.md`, `.js`, `.py`).
- **Performance:**
-  - Can handle **dozens of files efficiently**.
- **Limitations:**
-  - **File Size Limit**: 
-    - Supports text files up to **10 MB**.
-  - **Pairing Persistence:**
-    - LiveFile connections **do not persist across sessions**.
-    - After reloading the page, you will need to re-pair your files.
-  - **Saving Overwrites:**
-    - Saving changes in big-AGI will **overwrite the entire file**.
-    - Use external tools for version control or incremental backups.
-
---
-
-## Enabling LiveFile
-
-LiveFile can be enabled automatically or manually in your Big-AGI workflow.
-
-### Automatic Pairing
-
-When you:
-
- **Attach**, **drop**, or **paste** a file into a chat message,
-
-LiveFile is **automatically enabled** for that attachment. This means you can start
-monitoring and reloading changes without any additional setup.
-
-### Manual Pairing
-
-For existing attachments or code blocks that:
-
- **Do not have LiveFile enabled** (e.g., created on other devices),
- **Are AI-generated code snippets without an associated file**,
-
-You can manually pair them with a local file.
-
-#### Pairing Attachments
-
-1. **Select the Attachment:**
-  - Click on the attachment in the chat to view it in the previewer.
-
-2. **Initiate Pairing:**
-  - Click on **"Pair File"** (🔗).
-  - If you have open LiveFiles, they will be listed for easy selection.
-  - Alternatively, you can select a new file from your local system.
-
-3. **Grant Permissions**
-  - When prompted, allow big-AGI to access the file.
-
-#### Pairing Code Blocks
-
-1. **Access Code Block Options:**
-  - Click on the code block to reveal the header with options.
-
-2. **Initiate Pairing:**
-  - Click the **"Pair File"** button (🔗).
-  - Select from your open LiveFiles or choose a new file.
-
-3. **Confirm Pairing:**
-  - Grant permission when prompted.
-
---
-
-## Using LiveFile
-
-### Monitoring Changes
-
- **Automatic Monitoring:**
-  - LiveFile watches for changes in your paired local files.
-  - If the file is modified outside of big-AGI, you'll be shown the changes in the LiveFile bar.
-  - There is also a **"Replace with File"** option to manually load the latest content and see the changes.
-
- **Refreshing Content:**
-  - Click **"Replace with File"** (🔄) to load the latest content from the paired file into big-AGI.
-
-### Saving Edits Back to Paired Files
-
- **Editing Attachments or Code Blocks:**
-  - Modify the content directly within big-AGI.
-  - Attachments: Click on the attachment to open the previewer and click on "Edit" to make changes.
-  - Code Blocks: Select "Edit" on the chat message to update code blocks.
-
- **Saving Changes:**
-  - Click **"Save to File"** (💾) to overwrite the local file with your changes.
-  - **Note:** This action overwrites the entire file. Ensure this is what you want before proceeding.
-
---
-
-## Best Practices
-
- **Monitor External Changes:**
-  - Refresh content in big-AGI if the local file has been modified outside the application.
-
- **Use a Version Control System:**
-  - For critical files, consider using Git or other version control systems to track and monitor changes, authorship, and history.
-
---
-
-## Troubleshooting
-
- **LiveFile Options Not Visible:**
-  - Ensure you are using a **supported desktop browser**.
-  - Check that you have the latest version of big-AGI.
-
- **Permission Issues:**
-  - Confirm that you granted big-AGI permission to access your files.
-  - Check your browser's settings to ensure file access is allowed.
-
---
-
-## Technical Details
-
-LiveFile uses the [File System Access API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API) to 
-interact with your local files securely. It leverages the [browser-fs-access](https://github.com/GoogleChromeLabs/browser-fs-access) library, 
-an open-source project by Google Chrome Labs, which provides an easy interface to the File System Access API with fallbacks for broader browser support.
-
- **Security:**
-  - Access to files requires explicit user permission.
-
- **Performance:** 
-  - Designed to handle dozens of files efficiently (tested on hundreds).
-  - Works with the Big-AGI attachment system to recursively add directories.
-
- **Browser Support:**
-  - Fully supported on **Google Chrome** and **Microsoft Edge** desktop versions.
-
---
-
-## Another Big-AGI First!
-
-You can significantly boost your productivity and streamline your workflow within big-AGI
-by understanding how to utilize LiveFile's features fully.
-
-This Feature is in Beta as there are a few limitations and improvements to be made. 
-Join us in enjoying and enhancing this feature on [big-AGI.com](https://big-agi.com), or
-[GitHub](https://github.com/enricoros/big-AGI) for support and [Discord](https://discord.gg/MkH4qj2Jp9)
-to share the love.
@@ -1,141 +0,0 @@
-# Enabling Microphone Access for Speech Recognition
-
-This guide explains how to enable microphone access for speech recognition in various browsers and mobile devices.
-Ensuring microphone access is essential for using voice features in applications like big-AGI.
-
-## Desktop Browsers
-
-### Google Chrome (All Platforms, recommended)
-
-1. Open the website (e.g., big-AGI) in Chrome.
-2. Click the **lock icon** in the address bar.
-3. In the dropdown, find **"Microphone"**.
-   - Set it to **"Allow"**.
-4. If "Microphone" isn't listed:
-   - Click on **"Site settings"**.
-   - Find **"Microphone"** in the permissions list.
-   - Change the setting to **"Allow"**.
-5. **Refresh** the page.
-
-### Safari (macOS)
-
-**[Watch the video tutorial: How to enable Speech Recognition in Safari](https://vimeo.com/1010342201)**
-
-If you're seeing a "Speech Recognition permission denied" error, follow these steps:
-
-1. Open **System Settings**.
-   - Go to **Privacy & Security** > **Speech Recognition**.
-   - Enable Safari in the list of allowed applications.
-   - Quit & Open Safari.
-2. Click **Safari** in the top menu bar.
-   - Select **Settings**.
-   - Go to the **Websites** tab.
-   - Select **Microphone** from the sidebar.
-   - Find big-AGI (or localhost for developers) in the list and set it to **Allow**.
-   - Close the Settings window.
-3. **Refresh** the page.
-
-This quick and simple fix should get essential voice input working in big-AGI on your Mac.
-
-### Microsoft Edge (Windows)
-
-1. Open the website in Edge.
-2. Click the **lock icon** in the address bar.
-3. Click **"Permissions for this site"**.
-4. Find **"Microphone"**.
-   - Set it to **"Allow"**.
-5. **Refresh** the page.
-
-### Firefox (All Platforms)
-
-> **Note:** The Speech Recognition API is **not supported** in Firefox. If you're using Firefox, please switch to a supported browser to use speech recognition
-> features.
-
-## Mobile Devices
-
-### Android (Chrome)
-
-1. Open the website in Chrome.
-2. Tap the **lock icon** in the address bar.
-3. Tap **"Permissions"**.
-4. Find **"Microphone"**.
-   - Set it to **"Allow"**.
-5. **Refresh** the page.
-
-### iOS (Safari)
-
-1. Open the **Settings** app on your device.
-2. Scroll down and tap **"Safari"**.
-3. Tap **"Microphone"**.
-4. Ensure **"Ask"** or **"Allow"** is selected.
-5. Return to Safari and open the website.
-6. If prompted, allow microphone access.
-7. **Refresh** the page.
-
-### iOS (Chrome)
-
-> **Note:** Chrome on iOS uses Safari's engine due to system limitations. Microphone permissions are managed through iOS settings.
-
-1. Open the **Settings** app.
-2. Scroll down and tap **"Chrome"**.
-3. Ensure **"Microphone"** is toggled **on**.
-4. Open Chrome and navigate to the website.
-5. If prompted, allow microphone access.
-6. **Refresh** the page.
-
-## Troubleshooting
-
-If you're still experiencing issues after enabling microphone access:
-
-**Check System Permissions (macOS):**
-
- Open **System Settings**.
- Go to **"Privacy & Security"**.
- Select the **"Privacy"** tab.
- Click **"Microphone"** in the sidebar.
- Ensure your browser (e.g., Chrome, Safari) is checked.
- You may need to unlock the settings by clicking the lock icon at the bottom.
-
-**Check Microphone Access (Windows):**
-
- Open **Settings**.
- Go to **"Privacy"** > **"Microphone"**.
- Ensure **"Allow apps to access your microphone"** is **on**.
- Scroll down and make sure your browser is allowed.
-
-**Close Other Applications:**
-
- Close any applications that might be using the microphone.
-
-**Restart the Browser:**
-
- Close all browser windows and reopen.
-
-**Update Your Browser:**
-
- Ensure you're using the latest version.
-
-**Check for Browser Extensions:**
-
- Disable extensions that might block access to the microphone.
-
-For persistent issues, consult your browser's official support resources or contact big-AGI support.
-
-## Technical Details
-
-Big-AGI uses the [Web Speech API (SpeechRecognition)](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition)
-to transcribe spoken words into text. This API provides real-time transcription with live previews and works on most
-modern mobile and desktop browsers.
-
-**Note on Browser Support:**
-
-| Browser        | Support Level   | Notes                                                                  |
-|----------------|-----------------|------------------------------------------------------------------------|
-| Google Chrome  | ✅ Recommended   | Fully supported on desktop and Android. Preferred for best experience. |
-| Safari         | ✅ Supported     | Requires macOS/iOS 14 or later.                                        |
-| Microsoft Edge | ✅ Supported     | Fully supported on desktop.                                            |
-| Firefox        | ❌ Not Supported | SpeechRecognition API not available.                                   |
-
-**Recommendation:**
-For the best experience with speech recognition features, we strongly recommend using Google Chrome. 
-Ensure your browser is up to date to benefit from the latest features and security updates.
@@ -1,156 +0,0 @@
-# Installation Guide
-
-Welcome to the big-AGI Installation Guide - Whether you're a developer
-eager to explore, a system integrator, or an enterprise looking for a
-white-label solution, this comprehensive guide ensures a smooth setup
-process for your own instance of big-AGI and related products.
-
-**Try big-AGI** - You don't need to install anything if you want to play with big-AGI
-and have your API keys to various model services. You can access our free instance on [big-AGI.com](https://big-agi.com).
-The free instance runs the latest `main-stable` branch from this repository.
-
-## 🧩 Build-your-own
-
-If you want to change the code, have a deeper configuration,
-add your own models, or run your own instance, follow the steps below.
-
-### Local Development
-
-**Prerequisites:**
-
- Node.js and npm installed on your machine.
-
-**Steps:**
-
-1. Clone the big-AGI repository:
-   ```bash
-   git clone https://github.com/enricoros/big-AGI.git
-   cd big-AGI
-   ```
-2. Install dependencies:
-   ```bash
-   npm install
-   ```
-3. Run the development server:
-   ```bash
-   npm run dev
-   ```
-   Your big-AGI instance is now running at `http://localhost:3000`.
-
-### Local Production build
-
-The production build is optimized for performance and follows
-the same steps 1 and 2 as for [local development](#local-development).
-
-3. Build the production version:
-   ```bash
-   # .. repeat the steps above up to `npm install`, then:
-   npm run build
-   ```
-4. Start the production server (`npx` may be optional):
-   ```bash
-   npx next start --port 3000
-   ```
-   Your big-AGI production instance is on `http://localhost:3000`.
-
-### Advanced Customization
-
-Want to pre-enable models, customize the interface, or deploy with username/password or alter code to your needs?
-Check out the [Customizations Guide](README.md) for detailed instructions.
-
-## ☁️ Cloud Deployment Options
-
-To deploy big-AGI on a public server, you have several options. Choose the one that best fits your needs.
-
-### Deploy on Vercel
-
-Install big-AGI on Vercel with just a few clicks.
-
-Create your GitHub fork, create a Vercel project over that fork, and deploy it. Or press the button below for convenience.
-
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fenricoros%2Fbig-AGI&env=OPENAI_API_KEY&envDescription=Backend%20API%20keys%2C%20optional%20and%20may%20be%20overridden%20by%20the%20UI.&envLink=https%3A%2F%2Fgithub.com%2Fenricoros%2Fbig-AGI%2Fblob%2Fmain%2Fdocs%2Fenvironment-variables.md&project-name=big-AGI)
-
-### Deploy on Cloudflare
-
-Deploy on Cloudflare's global network by installing big-AGI on
-Cloudflare Pages. Check out the [Cloudflare Installation Guide](deploy-cloudflare.md)
-for step-by-step instructions.
-
-### Docker Deployments
-
-Containerize your big-AGI installation using Docker for portability and scalability.
-Our [Docker Deployment Guide](deploy-docker.md) will walk you through the process,
-or follow the steps below for a quick start.
-
-1. (optional) Build the Docker image - if you do not want to use the [pre-built Docker images](https://github.com/enricoros/big-AGI/pkgs/container/big-agi):
-   ```bash
-   docker build -t big-agi .
-   ```
-2. Run the Docker container with either:
-   ```bash
-   # 2A. if you built the image yourself:
-   docker run -d -p 3000:3000 big-agi
-
-   # 2B. or use the pre-built image:
-   docker run -d -p 3000:3000 ghcr.io/enricoros/big-agi
-
-   # 2C. or use docker-compose:
-   docker-compose up
-   ```
-   Access your big-AGI instance at `http://localhost:3000`.
-
-If you deploy big-AGI behind a reverse proxy, you may want to check out the [Reverse Proxy Configuration Guide](deploy-reverse-proxy.md).
-
-### Kubernetes Deployment
-
-Deploy big-AGI on a Kubernetes cluster for enhanced scalability and management. Follow these steps for a Kubernetes deployment:
-
-1. Clone the big-AGI repository:
-   ```bash
-   git clone https://github.com/enricoros/big-AGI.git
-   cd big-AGI
-   ```
-
-2. Configure the environment variables:
-   ```bash
-   cp docs/k8s/env-secret.yaml env-secret.yaml
-   vim env-secret.yaml  # Edit the file to set your environment variables
-   ```
-
-3. Apply the Kubernetes configurations:
-   ```bash
-   kubectl create namespace ns-big-agi
-   kubectl apply -f docs/k8s/big-agi-deployment.yaml -f env-secret.yaml
-   ```
-
-4. Verify the deployment:
-   ```bash
-   kubectl -n ns-big-agi get svc,pod,deployment
-   ```
-
-5. Access the big-AGI application:
-   ```bash
-   kubectl -n ns-big-agi port-forward service/svc-big-agi 3000:3000
-   ```
-   Your big-AGI instance is now accessible at `http://localhost:3000`.
-
-For more detailed instructions on Kubernetes deployment, including updating and troubleshooting, refer to our [Kubernetes Deployment Guide](deploy-k8s.md).
-
-### Midori AI Subsystem for Docker Deployment
-
-Follow the instructions found on [Midori AI Subsystem Site](https://io.midori-ai.xyz/subsystem/manager/)
-for your host OS. After completing the setup process, install the Big-AGI docker backend to the Midori AI Subsystem.
-
-## Enterprise-Grade Installation
-
-For businesses seeking a fully-managed, scalable solution, consider our managed installations.
-Enjoy all the features of big-AGI without the hassle of infrastructure management. [hello@big-agi.com](mailto:hello@big-agi.com) to learn more.
-
-## Support
-
-Join our vibrant community of developers, researchers, and AI enthusiasts. Share your projects, get help, and collaborate with others.
-
- [Discord Community](https://discord.gg/MkH4qj2Jp9)
- [Twitter](https://twitter.com/yourusername)
-
-For any questions or inquiries, please don't hesitate to [reach out to our team](mailto:hello@big-agi.com).
@@ -1,52 +0,0 @@
---
-apiVersion: v1
-kind: Namespace
-metadata:
-  name: ns-big-agi
---
-apiVersion: apps/v1
-kind: Deployment
-metadata:
-  labels:
-    app: big-agi
-  name: deployment-big-agi
-  namespace: ns-big-agi
-spec:
-  replicas: 1
-  selector:
-    matchLabels:
-      app: big-agi
-  strategy: {}
-  template:
-    metadata:
-      labels:
-        app: big-agi
-    spec:
-      containers:
-        - image: ghcr.io/enricoros/big-agi:latest
-          name: big-agi
-          ports:
-            - containerPort: 3000
-          args:
-            - next
-            - start
-            - -p
-            - "3000"
-          envFrom:
-            - secretRef:
-                name: env
---
-apiVersion: v1
-kind: Service
-metadata:
-  labels:
-    app: big-agi
-  name: svc-big-agi
-  namespace: ns-big-agi
-spec:
-  ports:
-    - name: "http"
-      port: 3000
-      targetPort: 3000
-  selector:
-    app: big-agi
@@ -1,49 +0,0 @@
---
-apiVersion: v1
-kind: Secret
-metadata:
-  name: env
-  namespace: ns-big-agi
-type: Opaque
-stringData:
-  # IMPORTANT: This file contains sensitive information. Do not commit changes to version control.
-  # All variables are optional. Fill in only the ones you need.
-  #
-  # For the latest information on all the environment variables, see /docs/environment-variables.md
-  #
-
-  # LLMs
-  OPENAI_API_KEY: ""
-  OPENAI_API_HOST: ""
-  OPENAI_API_ORG_ID: ""
-  AZURE_OPENAI_API_ENDPOINT: ""
-  AZURE_OPENAI_API_KEY: ""
-  ANTHROPIC_API_KEY: ""
-  ANTHROPIC_API_HOST: ""
-  DEEPSEEK_API_KEY: ""
-  GEMINI_API_KEY: ""
-  GROQ_API_KEY: ""
-  LOCALAI_API_HOST: ""
-  LOCALAI_API_KEY: ""
-  MISTRAL_API_KEY: ""
-  OLLAMA_API_HOST: ""
-  OPENPIPE_API_KEY: ""
-  OPENROUTER_API_KEY: ""
-  PERPLEXITY_API_KEY: ""
-  TOGETHERAI_API_KEY: ""
-  XAI_API_KEY: ""
-
-  # Browse
-  PUPPETEER_WSS_ENDPOINT: ""
-
-  # Search
-  GOOGLE_CLOUD_API_KEY: ""
-  GOOGLE_CSE_ID: ""
-
-  # Text-To-Speech: Eleven Labs
-  ELEVENLABS_API_KEY: ""
-  ELEVENLABS_API_HOST: ""
-  ELEVENLABS_VOICE_ID: ""
-
-  # Text-To-Image: Prodia
-  PRODIA_API_KEY: ""
@@ -1,43 +0,0 @@
-# ReAct: question answering with Reasoning and Actions
-
-## What is ReAct?
-
-[ReAct](https://arxiv.org/abs/2210.03629) (Reason+Act) is a classis AI question-answering feature,
-that combines reasoning with actions to provide informed answers.
-
-Within Big-AGI, users can invoke ReAct to ask complex questions that require multiple steps to answer.
-
-| Mode  | Activation                        | Information Sources                                  | Reasoning Visibility               | When to Use                                      |
-|-------|-----------------------------------|------------------------------------------------------|------------------------------------|--------------------------------------------------|
-| Chat  | Just type and send                | **Pre-trained knowledge only**                       | Only shows final response          | Quick answers, general knowledge queries         |
-| ReAct | Type "/react" before the question | **Web loads, Web searches, Wikipedia, calculations** | Shows step-by-step thought process | Complex, multi-step, or research-based questions |
-
-Example of ReAct in action, taking a question about current events, googling results, opening a page, and summarizing the information:
-
-https://github.com/user-attachments/assets/c3480428-9ab8-4257-a869-2541bf44a062
-
-The following tools are implemented in Big-AGI:
-
- **browse**: loads web pages (URLs) and extracts information, using a correctly configured `Tools > Browsing` API
- **search**: searches the web to produce page URLs, using a correctly configured `Tools > Google Search` ([Google Programmable Search Engine](https://programmablesearchengine.google.com/about/)) API
- **wikipedia**: looks up information on Wikipedia pages
- **calculate**: performs mathematical calculations by executing typescript code
-  - warning: (!) unsafe and dangerous, do not use for untrusted code/LLMs
-
-## How to Use ReAct in Big-AGI
-
-1. **Invoking ReAct**: Type "/react" followed by your question in the chat.
-2. **What to Expect**:
-
- An ephemeral space will show the AI's thought process and actions, showing all the steps taken.
- The final answer will appear in the main chat.
-
-3. **Available Actions**: Web searches, Wikipedia lookups, calculations, and optionally web browsing.
-
-## Good to know:
-
- **ReAct operates in isolation** from the main chat history.
- It **will take longer than standard responses** due to multiple steps.
- Web searches and browsing may have privacy implications, and require **tool configuration** in the UI.
- Errors or limitations in accessing external resources may affect results.
- ReAct does not use the [Tool or Function Calling](https://platform.openai.com/docs/guides/function-calling) feature of AI models, rather uses the old school approach of parsing and executing actions.
@@ -1,59 +0,0 @@
-/**
- * Middleware to protect `big-AGI` with HTTP Basic Authentication
- *
- * For more information on how to deploy with HTTP Basic Authentication, see:
- *  - [deploy-authentication.md](docs/deploy-authentication.md)
- */
-
-import type { NextRequest } from 'next/server';
-import { NextResponse } from 'next/server';
-
-
-// noinspection JSUnusedGlobalSymbols
-export function middleware(request: NextRequest) {
-
-  // Validate deployment configuration
-  if (!process.env.HTTP_BASIC_AUTH_USERNAME || !process.env.HTTP_BASIC_AUTH_PASSWORD) {
-    console.warn('HTTP Basic Authentication is enabled but not configured');
-    return new Response('Unauthorized/Unconfigured', unauthResponse);
-  }
-
-  // Request client authentication if no credentials are provided
-  const authHeader = request.headers.get('authorization');
-  if (!authHeader?.startsWith('Basic '))
-    return new Response('Unauthorized', unauthResponse);
-
-  // Request authentication if credentials are invalid
-  const base64Credentials = authHeader.split(' ')[1];
-  const credentials = Buffer.from(base64Credentials, 'base64').toString('ascii');
-  const [username, password] = credentials.split(':');
-  if (
-    !username || !password ||
-    username !== process.env.HTTP_BASIC_AUTH_USERNAME ||
-    password !== process.env.HTTP_BASIC_AUTH_PASSWORD
-  )
-    return new Response('Unauthorized', unauthResponse);
-
-  return NextResponse.next();
-}
-
-
-// Response to send when authentication is required
-const unauthResponse: ResponseInit = {
-  status: 401,
-  headers: {
-    'WWW-Authenticate': 'Basic realm="Secure big-AGI"',
-  },
-};
-
-export const config = {
-  matcher: [
-    // Include root
-    '/',
-    // Include pages
-    '/(call|index|news|personas|link)(.*)',
-    // Include API routes
-    '/api(.*)',
-    // Note: this excludes _next, /images etc..
-  ],
-};
@@ -0,0 +1,39 @@
+/** @type {import('next').NextConfig} */
+let nextConfig = {
+  reactStrictMode: true,
+  modularizeImports: {
+    '@mui/icons-material': {
+      transform: '@mui/icons-material/{{member}}',
+    },
+  },
+  webpack: (config, _options) => {
+    // @mui/joy: anything material gets redirected to Joy
+    config.resolve.alias['@mui/material'] = '@mui/joy';
+
+    // @dqbd/tiktoken: enable asynchronous WebAssembly
+    config.experiments = {
+      asyncWebAssembly: true,
+      layers: true,
+    };
+
+    return config;
+  },
+  // NOTE: the following shall be replaced by runtime config
+  env: {
+    HAS_SERVER_DB_PRISMA: !!process.env.POSTGRES_PRISMA_URL && !!process.env.POSTGRES_URL_NON_POOLING,
+    HAS_SERVER_KEYS_GOOGLE_CSE: !!process.env.GOOGLE_CLOUD_API_KEY && !!process.env.GOOGLE_CSE_ID,
+    HAS_SERVER_KEY_ANTHROPIC: !!process.env.ANTHROPIC_API_KEY,
+    HAS_SERVER_KEY_AZURE_OPENAI: !!process.env.AZURE_OPENAI_API_KEY && !!process.env.AZURE_OPENAI_API_ENDPOINT,
+    HAS_SERVER_KEY_ELEVENLABS: !!process.env.ELEVENLABS_API_KEY,
+    HAS_SERVER_HOST_OLLAMA: !!process.env.OLLAMA_API_HOST,
+    HAS_SERVER_KEY_OPENAI: !!process.env.OPENAI_API_KEY,
+    HAS_SERVER_KEY_OPENROUTER: !!process.env.OPENROUTER_API_KEY,
+    HAS_SERVER_KEY_PRODIA: !!process.env.PRODIA_API_KEY,
+  },
+};
+
+// conditionally enable the nextjs bundle analyzer
+if (process.env.ANALYZE_BUNDLE)
+  nextConfig = require('@next/bundle-analyzer')()(nextConfig);
+
+module.exports = nextConfig;
@@ -1,85 +0,0 @@
-import { readFile } from 'node:fs/promises';
-
-// Build information
-process.env.NEXT_PUBLIC_BUILD_HASH = 'big-agi-2-dev';
-process.env.NEXT_PUBLIC_BUILD_PKGVER = JSON.parse('' + await readFile(new URL('./package.json', import.meta.url))).version;
-process.env.NEXT_PUBLIC_BUILD_TIMESTAMP = new Date().toISOString();
-console.log(` 🧠 \x1b[1mbig-AGI\x1b[0m v${process.env.NEXT_PUBLIC_BUILD_PKGVER} (@${process.env.NEXT_PUBLIC_BUILD_HASH})`);
-
-// Non-default build types
-const buildType =
-  process.env.BIG_AGI_BUILD === 'standalone' ? 'standalone'
-    : process.env.BIG_AGI_BUILD === 'static' ? 'export'
-      : undefined;
-
-buildType && console.log(` 🧠 big-AGI: building for ${buildType}...\n`);
-
-/** @type {import('next').NextConfig} */
-let nextConfig = {
-  reactStrictMode: true,
-
-  // [exports] https://nextjs.org/docs/advanced-features/static-html-export
-  ...buildType && {
-    output: buildType,
-    distDir: 'dist',
-
-    // disable image optimization for exports
-    images: { unoptimized: true },
-
-    // Optional: Change links `/me` -> `/me/` and emit `/me.html` -> `/me/index.html`
-    // trailingSlash: true,
-  },
-
-  // [puppeteer] https://github.com/puppeteer/puppeteer/issues/11052
-  // NOTE: we may not be needing this anymore, as we use '@cloudflare/puppeteer'
-  serverExternalPackages: ['puppeteer-core'],
-
-  webpack: (config, { isServer }) => {
-    // @mui/joy: anything material gets redirected to Joy
-    config.resolve.alias['@mui/material'] = '@mui/joy';
-
-    // @dqbd/tiktoken: enable asynchronous WebAssembly
-    config.experiments = {
-      asyncWebAssembly: true,
-      layers: true,
-    };
-
-    // fix warnings for async functions in the browser (https://github.com/vercel/next.js/issues/64792)
-    if (!isServer) {
-      config.output.environment = { ...config.output.environment, asyncFunction: true };
-    }
-
-    // prevent too many small chunks (40kb min) on 'client' packs (not 'server' or 'edge-server')
-    // noinspection JSUnresolvedReference
-    if (typeof config.optimization.splitChunks === 'object' && config.optimization.splitChunks.minSize) {
-      // noinspection JSUnresolvedReference
-      config.optimization.splitChunks.minSize = 40 * 1024;
-    }
-
-    return config;
-  },
-
-  // Note: disabled to check whether the project becomes slower with this
-  // modularizeImports: {
-  //   '@mui/icons-material': {
-  //     transform: '@mui/icons-material/{{member}}',
-  //   },
-  // },
-
-  // Uncomment the following leave console messages in production
-  // compiler: {
-  //   removeConsole: false,
-  // },
-};
-
-// Validate environment variables, if set at build time. Will be actually read and used at runtime.
-// This is the reason both this file and the servr/env.mjs files have this extension.
-await import('./src/server/env.mjs');
-
-// conditionally enable the nextjs bundle analyzer
-if (process.env.ANALYZE_BUNDLE) {
-  const { default: withBundleAnalyzer } = await import('@next/bundle-analyzer');
-  nextConfig = withBundleAnalyzer({ openAnalyzer: true })(nextConfig);
-}
-
-export default nextConfig;
@@ -1,111 +1,71 @@
 {
  "name": "big-agi",
-  "version": "1.91.0",
+  "version": "1.4.0",
  "private": true,
-  "author": "Enrico Ros <enrico.ros@gmail.com>",
-  "repository": "https://github.com/enricoros/big-agi",
  "scripts": {
-    "dev": "next dev --turbopack",
-    "dev-debug": "cross-env NODE_OPTIONS='--inspect' next dev",
-    "dev-https": "next dev --experimental-https",
+    "dev": "next dev --turbo",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
-    "postinstall": "prisma generate --no-hints",
+    "env:pull": "npx vercel env pull .env.development.local",
+    "postinstall": "prisma generate",
    "db:push": "prisma db push",
-    "db:studio": "prisma studio",
-    "vercel:env:pull": "npx vercel env pull .env.development.local"
-  },
-  "prisma": {
-    "schema": "src/server/prisma/schema.prisma"
+    "db:studio": "prisma studio"
  },
  "dependencies": {
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/modifiers": "^9.0.0",
-    "@dnd-kit/sortable": "^10.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
-    "@emotion/cache": "^11.14.0",
-    "@emotion/react": "^11.14.0",
+    "@dqbd/tiktoken": "^1.0.7",
+    "@emotion/cache": "^11.11.0",
+    "@emotion/react": "^11.11.1",
    "@emotion/server": "^11.11.0",
-    "@emotion/styled": "^11.14.0",
-    "@mui/icons-material": "^5.16.14",
-    "@mui/joy": "^5.0.0-beta.51",
-    "@mui/material": "^5.16.14",
-    "@next/bundle-analyzer": "^15.1.4",
-    "@next/third-parties": "^15.1.4",
-    "@prisma/client": "~5.22.0",
-    "@t3-oss/env-nextjs": "^0.11.1",
-    "@tanstack/react-query": "^5.63.0",
-    "@tanstack/react-virtual": "^3.11.2",
-    "@trpc/client": "11.0.0-rc.688",
-    "@trpc/next": "11.0.0-rc.688",
-    "@trpc/react-query": "11.0.0-rc.688",
-    "@trpc/server": "11.0.0-rc.688",
-    "@vercel/analytics": "^1.4.1",
-    "@vercel/speed-insights": "^1.1.0",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.14.16",
+    "@mui/joy": "^5.0.0-beta.14",
+    "@next/bundle-analyzer": "~14.0.2",
+    "@prisma/client": "^5.5.2",
+    "@sanity/diff-match-patch": "^3.1.1",
+    "@tanstack/react-query": "^4.36.1",
+    "@trpc/client": "^10.43.3",
+    "@trpc/next": "^10.43.3",
+    "@trpc/react-query": "^10.43.3",
+    "@trpc/server": "^10.43.3",
+    "@vercel/analytics": "^1.1.1",
    "browser-fs-access": "^0.35.0",
-    "cheerio": "^1.0.0",
-    "dexie": "^4.0.10",
-    "dexie-react-hooks": "^1.1.7",
-    "diff": "^7.0.0",
-    "eventsource-parser": "^3.0.0",
+    "eventsource-parser": "^1.1.1",
    "idb-keyval": "^6.2.1",
-    "mammoth": "^1.9.0",
-    "nanoid": "^5.0.9",
-    "next": "^15.1.4",
-    "nprogress": "^0.2.0",
-    "pdfjs-dist": "4.10.38",
+    "next": "~14.0.2",
+    "pdfjs-dist": "3.11.174",
    "plantuml-encoder": "^1.4.0",
    "prismjs": "^1.29.0",
-    "react": "^18.3.1",
-    "react-csv": "^2.2.2",
-    "react-dom": "^18.3.1",
-    "react-hook-form": "^7.54.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
    "react-katex": "^3.0.1",
-    "react-markdown": "^9.0.3",
-    "react-player": "^2.16.0",
-    "react-resizable-panels": "^2.1.7",
+    "react-markdown": "^9.0.0",
    "react-timeago": "^7.2.0",
-    "rehype-katex": "^7.0.1",
    "remark-gfm": "^4.0.0",
-    "remark-mark-highlight": "^0.1.1",
-    "remark-math": "^6.0.0",
-    "sharp": "^0.33.5",
-    "superjson": "^2.2.2",
-    "tesseract.js": "^6.0.0",
-    "tiktoken": "^1.0.18",
-    "turndown": "^7.2.0",
-    "zod": "^3.24.1",
-    "zod-to-json-schema": "^3.24.1",
-    "zustand": "^5.0.3"
+    "superjson": "^2.2.1",
+    "tesseract.js": "^5.0.3",
+    "uuid": "^9.0.1",
+    "zod": "^3.22.4",
+    "zustand": "~4.3.9"
  },
  "devDependencies": {
-    "@types/diff": "^7.0.0",
-    "@types/node": "^22.10.5",
-    "@types/nprogress": "^0.2.3",
+    "@types/node": "^20.9.0",
    "@types/plantuml-encoder": "^1.4.2",
-    "@types/prismjs": "^1.26.5",
-    "@types/react": "^18.3.18",
-    "@types/react-beautiful-dnd": "^13.1.8",
-    "@types/react-csv": "^1.1.10",
-    "@types/react-dom": "^18.3.5",
-    "@types/react-katex": "^3.0.4",
-    "@types/react-timeago": "^4.1.7",
-    "@types/turndown": "^5.0.5",
-    "cross-env": "^7.0.3",
-    "eslint": "^9.17.0",
-    "eslint-config-next": "^15.1.4",
-    "prettier": "^3.4.2",
-    "prisma": "~5.22.0",
-    "puppeteer-core": "^23.11.1",
-    "typescript": "^5.7.3"
+    "@types/prismjs": "^1.26.3",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "@types/react-katex": "^3.0.3",
+    "@types/react-timeago": "^4.1.6",
+    "@types/uuid": "^9.0.7",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
+    "eslint": "^8.53.0",
+    "eslint-config-next": "~14.0.2",
+    "prettier": "^3.0.3",
+    "prisma": "^5.5.2",
+    "typescript": "^5.2.2"
  },
  "engines": {
-    "node": "^22.0.0 || ^20.0.0"
-  },
-  "overrides": {
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
-    "uri-js": "npm:uri-js-replace"
+    "node": "^20.0.0 || ^18.0.0"
  }
 }
@@ -1,62 +1,56 @@
 import * as React from 'react';
 import Head from 'next/head';
-import { MyAppProps } from 'next/app';
-import { Analytics as VercelAnalytics } from '@vercel/analytics/next';
-import { SpeedInsights as VercelSpeedInsights } from '@vercel/speed-insights/next';
+import { Analytics as VercelAnalytics } from '@vercel/analytics/react';
+import { AppProps } from 'next/app';
+import { CacheProvider, EmotionCache } from '@emotion/react';
+import { CssBaseline, CssVarsProvider } from '@mui/joy';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

-import { Brand } from '~/common/app.config';
 import { apiQuery } from '~/common/util/trpc.client';

 import 'katex/dist/katex.min.css';
-import '~/common/styles/CodePrism.css';
+import '~/common/styles/CodePrism.css'
 import '~/common/styles/GithubMarkdown.css';
-import '~/common/styles/NProgress.css';
-import '~/common/styles/agi.effects.css';
-import '~/common/styles/app.styles.css';
-
-import { Is } from '~/common/util/pwaUtils';
-import { OverlaysInsert } from '~/common/layout/overlays/OverlaysInsert';
-import { ProviderBackendCapabilities } from '~/common/providers/ProviderBackendCapabilities';
-import { ProviderBootstrapLogic } from '~/common/providers/ProviderBootstrapLogic';
-import { ProviderSingleTab } from '~/common/providers/ProviderSingleTab';
-import { ProviderTheming } from '~/common/providers/ProviderTheming';
-import { SnackbarInsert } from '~/common/components/snackbar/SnackbarInsert';
-import { hasGoogleAnalytics, OptionalGoogleAnalytics } from '~/common/components/GoogleAnalytics';
+import { Brand } from '~/common/brand';
+import { createEmotionCache, theme } from '~/common/theme';


-const Big_AGI_App = ({ Component, emotionCache, pageProps }: MyAppProps) => {
+// Client-side cache, shared for the whole session of the user in the browser.
+const clientSideEmotionCache = createEmotionCache();

-  // We are using a nextjs per-page layout pattern to bring the (Optima) layout creation to a shared place
-  // This reduces the flicker and the time switching between apps, and seems to not have impact on
-  // the build. This is a good trade-off for now.
-  const getLayout = Component.getLayout ?? ((page: any) => page);
+export interface MyAppProps extends AppProps {
+  emotionCache?: EmotionCache;
+}

+function MyApp({ Component, emotionCache = clientSideEmotionCache, pageProps }: MyAppProps) {
+  const [queryClient] = React.useState(() => new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+      mutations: {
+        retry: false,
+      },
+    },
+  }));
  return <>
-
-    <Head>
-      <title>{Brand.Title.Common}</title>
-      <meta name='viewport' content='minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no' />
-    </Head>
-
-    <ProviderTheming emotionCache={emotionCache}>
-      <ProviderSingleTab>
-        <ProviderBackendCapabilities>
-          {/* ^ Backend capabilities & SSR boundary */}
-          <ProviderBootstrapLogic>
-            <SnackbarInsert />
-            {getLayout(<Component {...pageProps} />)}
-            <OverlaysInsert />
-          </ProviderBootstrapLogic>
-        </ProviderBackendCapabilities>
-      </ProviderSingleTab>
-    </ProviderTheming>
-
-    {Is.Deployment.VercelFromFrontend && <VercelAnalytics debug={false} />}
-    {Is.Deployment.VercelFromFrontend && <VercelSpeedInsights debug={false} sampleRate={1 / 2} />}
-    {hasGoogleAnalytics && <OptionalGoogleAnalytics />}
-
+    <CacheProvider value={emotionCache}>
+      <Head>
+        <title>{Brand.Title.Common}</title>
+        <meta name='viewport' content='minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no' />
+      </Head>
+      {/* Rect-query provider */}
+      <QueryClientProvider client={queryClient}>
+        <CssVarsProvider defaultMode='light' theme={theme}>
+          {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+          <CssBaseline />
+          <Component {...pageProps} />
+        </CssVarsProvider>
+      </QueryClientProvider>
+    </CacheProvider>
+    <VercelAnalytics debug={false} />
  </>;
-};
+}

-// Initializes React Query and tRPC, and enables the tRPC React Query hooks (apiQuery).
-export default apiQuery.withTRPC(Big_AGI_App);
+// enables the react-query api invocation
+export default apiQuery.withTRPC(MyApp);
@@ -1,11 +1,13 @@
 import * as React from 'react';
-import { AppType, MyAppProps } from 'next/app';
+import { AppType } from 'next/app';
 import { default as Document, DocumentContext, DocumentProps, Head, Html, Main, NextScript } from 'next/document';
 import createEmotionServer from '@emotion/server/create-instance';
-import InitColorSchemeScript from '@mui/joy/InitColorSchemeScript';
+import { getInitColorSchemeScript } from '@mui/joy/styles';

-import { Brand } from '~/common/app.config';
-import { createEmotionCache } from '~/common/app.theme';
+import { Brand } from '~/common/brand';
+import { bodyFontClassName, createEmotionCache } from '~/common/theme';
+
+import { MyAppProps } from './_app';


 interface MyDocumentProps extends DocumentProps {
@@ -14,7 +16,7 @@ interface MyDocumentProps extends DocumentProps {

 export default function MyDocument({ emotionStyleTags }: MyDocumentProps) {
  return (
-    <Html lang='en'>
+    <Html lang='en' className={bodyFontClassName}>
      <Head>
        {/* Meta (missing Title, set by the App or Page) */}
        <meta name='description' content={Brand.Meta.Description} />
@@ -24,9 +26,9 @@ export default function MyDocument({ emotionStyleTags }: MyDocumentProps) {
        <link rel='shortcut icon' href='/favicon.ico' />
        <link rel='icon' type='image/png' sizes='32x32' href='/icons/favicon-32x32.png' />
        <link rel='icon' type='image/png' sizes='16x16' href='/icons/favicon-16x16.png' />
-        <link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png' />
+        <link rel='apple-touch-icon' sizes='180x180' href='/icons/apple-touch-icon.png' />
        <link rel='manifest' href='/manifest.json' />
-        <meta name='mobile-web-app-capable' content='yes' />
+        <meta name='apple-mobile-web-app-capable' content='yes' />
        <meta name='apple-mobile-web-app-status-bar-style' content='black' />

        {/* Opengraph */}
@@ -51,9 +53,9 @@ export default function MyDocument({ emotionStyleTags }: MyDocumentProps) {
        {emotionStyleTags}
      </Head>
      <body>
-      <InitColorSchemeScript />
-      <Main />
-      <NextScript />
+        {getInitColorSchemeScript()}
+        <Main />
+        <NextScript />
      </body>
    </Html>
  );
@@ -2,7 +2,13 @@ import * as React from 'react';

 import { AppCall } from '../src/apps/call/AppCall';

-import { withNextJSPerPageLayout } from '~/common/layout/withLayout';
+import { AppLayout } from '~/common/layout/AppLayout';


-export default withNextJSPerPageLayout({ type: 'optima' }, () => <AppCall />);
+export default function CallPage() {
+  return (
+    <AppLayout>
+      <AppCall />
+    </AppLayout>
+  );
+}
@@ -1,8 +0,0 @@
-import * as React from 'react';
-
-import { AppBeam } from '../../src/apps/beam/AppBeam';
-
-import { withNextJSPerPageLayout } from '~/common/layout/withLayout';
-
-
-export default withNextJSPerPageLayout({ type: 'optima' }, () => <AppBeam />);
@@ -1,8 +0,0 @@
-import * as React from 'react';
-
-import { AppDiff } from '../src/apps/diff/AppDiff';
-
-import { withNextJSPerPageLayout } from '~/common/layout/withLayout';
-
-
-export default withNextJSPerPageLayout({ type: 'optima' }, () => <AppDiff />);
@@ -1,8 +0,0 @@
-import * as React from 'react';
-
-import { AppDraw } from '../src/apps/draw/AppDraw';
-
-import { withNextJSPerPageLayout } from '~/common/layout/withLayout';
-
-
-export default withNextJSPerPageLayout({ type: 'optima' }, () => <AppDraw />);
@@ -1,14 +1,18 @@
 import * as React from 'react';

 import { AppChat } from '../src/apps/chat/AppChat';
+import { useShowNewsOnUpdate } from '../src/apps/news/news.hooks';

-import { withNextJSPerPageLayout } from '~/common/layout/withLayout';
+import { AppLayout } from '~/common/layout/AppLayout';


-export default withNextJSPerPageLayout({ type: 'optima' }, () => {
+export default function ChatPage() {
+  // show the News page on updates
+  useShowNewsOnUpdate();

-  // TODO: This Index page will point to the Dashboard (or a landing page)
-  // For now it offers the chat experience, but this will change. #299
-
-  return <AppChat />;
-});
+  return (
+    <AppLayout>
+      <AppChat />
+    </AppLayout>
+  );
+}
@@ -1,166 +0,0 @@
-import * as React from 'react';
-import { fileSave } from 'browser-fs-access';
-
-import { Box, Button, Card, CardContent, Typography } from '@mui/joy';
-import DownloadIcon from '@mui/icons-material/Download';
-
-import { AppPlaceholder } from '../../src/apps/AppPlaceholder';
-
-import { getBackendCapabilities } from '~/modules/backend/store-backend-capabilities';
-import { getPlantUmlServerUrl } from '~/modules/blocks/code/code-renderers/RenderCodePlantUML';
-
-import { withNextJSPerPageLayout } from '~/common/layout/withLayout';
-
-
-// basics
-import { Brand } from '~/common/app.config';
-import { ROUTE_APP_CHAT, ROUTE_INDEX } from '~/common/app.routes';
-import { Release } from '~/common/app.release';
-
-// capabilities access
-import { useCapabilityBrowserSpeechRecognition, useCapabilityElevenLabs, useCapabilityTextToImage } from '~/common/components/useCapabilities';
-
-// stores access
-import { getLLMsDebugInfo } from '~/common/stores/llms/store-llms';
-import { useChatStore } from '~/common/stores/chat/store-chats';
-import { useFolderStore } from '~/common/stores/folders/store-chat-folders';
-import { useLogicSherpaStore } from '~/common/logic/store-logic-sherpa';
-import { useUXLabsStore } from '~/common/state/store-ux-labs';
-
-// utils access
-import { BrowserLang, clientHostName, Is, isPwa } from '~/common/util/pwaUtils';
-import { getGA4MeasurementId } from '~/common/components/GoogleAnalytics';
-import { prettyTimestampForFilenames } from '~/common/util/timeUtils';
-import { supportsClipboardRead } from '~/common/util/clipboardUtils';
-import { supportsScreenCapture } from '~/common/util/screenCaptureUtils';
-
-
-function DebugCard(props: { title: string, children: React.ReactNode }) {
-  return (
-    <Box>
-      <Typography level='title-lg'>
-        {props.title}
-      </Typography>
-      {props.children}
-    </Box>
-  );
-}
-
-function prettifyJsonString(jsonString: string, deleteChars: number, removeDoubleQuotes: boolean, removeTrailComma: boolean): string {
-  return jsonString.split('\n').map(l => {
-    if (deleteChars > 0)
-      l = l.substring(deleteChars);
-    if (removeDoubleQuotes)
-      l = l.replaceAll('\"', '');
-    if (removeTrailComma && l.endsWith(','))
-      l = l.substring(0, l.length - 1);
-    return l;
-  }).join('\n').trim();
-}
-
-function DebugJsonCard(props: { title: string, data: any }) {
-  return (
-    <DebugCard title={props.title}>
-      <Typography level='body-sm' sx={{ whiteSpace: 'break-spaces', fontFamily: 'code', fontSize: { xs: 'xs' } }}>
-        {prettifyJsonString(JSON.stringify(props.data, null, 2), 2, true, true)}
-      </Typography>
-    </DebugCard>
-  );
-}
-
-
-const frontendBuild = Release.buildInfo('frontend');
-
-function AppDebug() {
-
-  // state
-  const [saved, setSaved] = React.useState(false);
-
-  // external state
-  const backendCaps = getBackendCapabilities();
-  const chatsCount = useChatStore.getState().conversations?.length;
-  const uxLabsExperiments = Object.entries(useUXLabsStore.getState()).filter(([_k, v]) => v === true).map(([k, _]) => k).join(', ');
-  const { folders, enableFolders } = useFolderStore.getState();
-  const { lastSeenNewsVersion, usageCount } = useLogicSherpaStore.getState();
-
-  // derived state
-  const cClient = {
-    // isBrowser,
-    Is,
-    BrowserLang,
-    isPWA: isPwa(),
-    supportsClipboardPaste: supportsClipboardRead(),
-    supportsScreenCapture,
-  };
-  const cProduct = {
-    capabilities: {
-      mic: useCapabilityBrowserSpeechRecognition(),
-      elevenLabs: useCapabilityElevenLabs(),
-      textToImage: useCapabilityTextToImage(),
-    },
-    models: getLLMsDebugInfo(),
-    state: {
-      chatsCount,
-      foldersCount: folders?.length,
-      foldersEnabled: enableFolders,
-      newsCurrent: Release.Monotonics.NewsVersion,
-      newsSeen: lastSeenNewsVersion,
-      labsActive: uxLabsExperiments,
-      reloads: usageCount,
-    },
-    release: {
-      app: Release.App,
-      build: frontendBuild,
-    },
-  };
-  const cBackend = {
-    configuration: backendCaps,
-    deployment: {
-      home: Brand.URIs.Home,
-      hostName: clientHostName(),
-      measurementId: getGA4MeasurementId(),
-      plantUmlServerUrl: getPlantUmlServerUrl(),
-      routeIndex: ROUTE_INDEX,
-      routeChat: ROUTE_APP_CHAT,
-    },
-  };
-
-  const handleDownload = async () => {
-    fileSave(
-      new Blob([JSON.stringify({ client: cClient, agi: cProduct, backend: cBackend }, null, 2)], { type: 'application/json' }),
-      { fileName: `big-agi_debug_${prettyTimestampForFilenames()}.json`, extensions: ['.json'] },
-    )
-      .then(() => setSaved(true))
-      .catch(e => console.error('Error saving debug.json', e));
-  };
-
-  return (
-    <AppPlaceholder title={`${Brand.Title.Common} Debug`}>
-      <Box sx={{ display: 'grid', gap: 3, my: 3 }}>
-        <Button
-          variant={saved ? 'soft' : 'outlined'} color={saved ? 'success' : 'neutral'}
-          onClick={handleDownload}
-          endDecorator={<DownloadIcon />}
-          sx={{
-            backgroundColor: saved ? undefined : 'background.surface',
-            boxShadow: 'sm',
-            placeSelf: 'start',
-            minWidth: 260,
-          }}
-        >
-          Download debug JSON
-        </Button>
-        <Card>
-          <CardContent sx={{ display: 'grid', gap: 3 }}>
-            <DebugJsonCard title='Client' data={cClient} />
-            <DebugJsonCard title='AGI' data={cProduct} />
-            <DebugJsonCard title='Backend' data={cBackend} />
-          </CardContent>
-        </Card>
-      </Box>
-    </AppPlaceholder>
-  );
-}
-
-
-export default withNextJSPerPageLayout({ type: 'container' }, () => <AppDebug />);
@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+import { AppLabs } from '../src/apps/labs/AppLabs';
+
+import { AppLayout } from '~/common/layout/AppLayout';
+
+
+export default function LabsPage() {
+  return (
+    <AppLayout suspendAutoModelsSetup>
+      <AppLabs />
+    </AppLayout>
+  );
+}
@@ -1,16 +1,14 @@
 import * as React from 'react';
+import { useRouter } from 'next/router';

 import { Alert, Box, Button, Typography } from '@mui/joy';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';

-import { setComposerStartupText } from '~/common/logic/store-logic-sherpa';
-
-import { callBrowseFetchPageOrThrow } from '~/modules/browse/browse.client';
+import { setComposerStartupText } from '../src/apps/chat/components/composer/store-composer';

+import { AppLayout } from '~/common/layout/AppLayout';
 import { LogoProgress } from '~/common/components/LogoProgress';
 import { asValidURL } from '~/common/util/urlUtils';
-import { navigateToIndex, useRouterQuery } from '~/common/app.routes';
-import { withNextJSPerPageLayout } from '~/common/layout/withLayout';


 /**
@@ -30,25 +28,23 @@ function AppShareTarget() {
  const [isDownloading, setIsDownloading] = React.useState(false);

  // external state
-  const { url: queryUrl, text: queryText } = useRouterQuery<{
-    url: string | string[] | undefined,
-    text: string | string[] | undefined,
-  }>();
+  const { query, push: routerPush, replace: routerReplace } = useRouter();
+

  const queueComposerTextAndLaunchApp = React.useCallback((text: string) => {
    setComposerStartupText(text);
-    void navigateToIndex(true);
-  }, []);
+    void routerReplace('/');
+  }, [routerReplace]);


  // Detect the share Intent from the query
  React.useEffect(() => {
    // skip when query is not parsed yet
-    let queryTextItem = queryUrl || queryText || null;
-    if (!queryTextItem)
+    if (!Object.keys(query).length)
      return;

    // single item from the query
+    let queryTextItem: string[] | string | null = query.url || query.text || null;
    if (Array.isArray(queryTextItem))
      queryTextItem = queryTextItem[0];

@@ -59,9 +55,9 @@ function AppShareTarget() {
    else if (queryTextItem)
      setIntentText(queryTextItem);
    else
-      setErrorMessage('No text or url. Received: ' + JSON.stringify({ queryText, queryUrl }));
+      setErrorMessage('No text or url. Received: ' + JSON.stringify(query));

-  }, [queryText, queryUrl]);
+  }, [query.url, query.text, query]);


  // Text -> Composer
@@ -75,22 +71,18 @@ function AppShareTarget() {
  React.useEffect(() => {
    if (intentURL) {
      setIsDownloading(true);
-      callBrowseFetchPageOrThrow(intentURL)
-        .then(page => {
-          if (page.stopReason !== 'error') {
-            if (!page.content) {
-              setErrorMessage(page.file ? 'No web page found, and we do not support files at the moment.' : 'No content found');
-              return;
-            }
-            let pageContent = page.content.markdown || page.content.text || page.content.html || '';
-            if (pageContent)
-              pageContent = '\n\n```' + intentURL + '\n' + pageContent + '\n```\n';
-            queueComposerTextAndLaunchApp(pageContent);
-          } else
-            setErrorMessage('Could not read any data' + page.error ? ': ' + page.error : '');
+      // TEMP: until the Browse module is ready, just use the URL, verbatim
+      queueComposerTextAndLaunchApp(intentURL);
+      setIsDownloading(false);
+      /*callBrowseFetchSinglePage(intentURL)
+        .then(pageContent => {
+          if (pageContent)
+            queueComposerTextAndLaunchApp('\n\n```' + intentURL + '\n' + pageContent + '\n```\n');
+          else
+            setErrorMessage('Could not read any data');
        })
        .catch(error => setErrorMessage(error?.message || error || 'Unknown error'))
-        .finally(() => setIsDownloading(false));
+        .finally(() => setIsDownloading(false));*/
    }
  }, [intentURL, queueComposerTextAndLaunchApp]);

@@ -98,6 +90,7 @@ function AppShareTarget() {
  return (

    <Box sx={{
+      backgroundColor: 'background.level2',
      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
      flexGrow: 1,
    }}>
@@ -117,7 +110,7 @@ function AppShareTarget() {
        </Alert>
        <Button
          variant='solid' color='danger'
-          onClick={() => navigateToIndex()}
+          onClick={() => routerPush('/')}
          endDecorator={<ArrowBackIcon />}
          sx={{ mt: 2 }}
        >
@@ -137,6 +130,12 @@ function AppShareTarget() {

 /**
 * This page will be invoked on mobile when sharing Text/URLs/Files from other APPs
- * Example URL: https://localhost:3000/link/share_target?title=This+Title&text=https%3A%2F%2Fexample.com%2Fapp%2Fpath
+ * Example URL: https://get.big-agi.com/launch?title=This+Title&text=https%3A%2F%2Fexample.com%2Fapp%2Fpath
 */
-export default withNextJSPerPageLayout({ type: 'container' }, () => <AppShareTarget />);
+export default function LaunchPage() {
+  return (
+    <AppLayout>
+      <AppShareTarget />
+    </AppLayout>
+  );
+}
@@ -1,90 +0,0 @@
-import * as React from 'react';
-
-import { Box, Typography } from '@mui/joy';
-
-import { llmsStoreActions } from '~/common/stores/llms/store-llms';
-
-import { InlineError } from '~/common/components/InlineError';
-import { apiQuery } from '~/common/util/trpc.client';
-import { navigateToIndex, useRouterQuery } from '~/common/app.routes';
-import { withNextJSPerPageLayout } from '~/common/layout/withLayout';
-
-
-function CallbackOpenRouterPage(props: { openRouterCode: string | undefined }) {
-
-  // external state
-  const { data, isError, error, isPending } = apiQuery.backend.exchangeOpenRouterKey.useQuery({ code: props.openRouterCode || '' }, {
-    enabled: !!props.openRouterCode,
-    staleTime: Infinity,
-  });
-
-  // derived state
-  const isErrorInput = !props.openRouterCode;
-  const openRouterKey = data?.key ?? undefined;
-  const isSuccess = !!openRouterKey;
-
-
-  // Success: save the key and redirect to the chat app
-  React.useEffect(() => {
-    if (!isSuccess)
-      return;
-
-    // 1. Save the key as the client key
-    llmsStoreActions().setOpenRouterKey(openRouterKey);
-
-    // 2. Navigate to the chat app
-    void navigateToIndex(true); //.then(openModelsSetup);
-
-  }, [isSuccess, openRouterKey]);
-
-  return (
-    <Box sx={{
-      flexGrow: 1,
-      overflowY: 'auto',
-      display: 'flex', justifyContent: 'center',
-      p: { xs: 3, md: 6 },
-    }}>
-
-      <Box sx={{
-        // my: 'auto',
-        display: 'flex', flexDirection: 'column', alignItems: 'center',
-        gap: 4,
-      }}>
-
-        <Typography level='title-lg'>
-          Welcome Back
-        </Typography>
-
-        {isPending && <Typography level='body-sm'>Loading...</Typography>}
-
-        {isErrorInput && <InlineError error='There was an issue retrieving the code from OpenRouter.' />}
-
-        {isError && <InlineError error={error} />}
-
-        {data && (
-          <Typography level='body-md'>
-            Success! You can now close this window.
-          </Typography>
-        )}
-
-      </Box>
-
-    </Box>
-  );
-}
-
-
-/**
- * This page will be invoked by OpenRouter as a Callback
- *
- * Docs: https://openrouter.ai/docs#oauth
- * Example URL: https://localhost:3000/link/callback_openrouter?code=SomeCode
- */
-export default withNextJSPerPageLayout({ type: 'container' }, () => {
-
-  // external state - get the 'code=...' from the URL
-  const { code } = useRouterQuery<{ code: string | undefined }>();
-
-  return <CallbackOpenRouterPage openRouterCode={code} />;
-
-});
@@ -1,16 +1,18 @@
 import * as React from 'react';
+import { useRouter } from 'next/router';

-import { AppLinkChat } from '../../../src/apps/link-chat/AppLinkChat';
+import { AppChatLink } from '../../../src/apps/link/AppChatLink';

-import { useRouterQuery } from '~/common/app.routes';
-import { withNextJSPerPageLayout } from '~/common/layout/withLayout';
+import { AppLayout } from '~/common/layout/AppLayout';


-export default withNextJSPerPageLayout({ type: 'optima', suspendAutoModelsSetup: true }, () => {
+export default function ChatLinkPage() {
+  const { query } = useRouter();
+  const chatLinkId = query?.chatLinkId as string ?? '';

-  // external state
-  const { chatLinkId } = useRouterQuery<{ chatLinkId: string | undefined }>();
-
-  return <AppLinkChat chatLinkId={chatLinkId || null} />;
-
-});
+  return (
+    <AppLayout suspendAutoModelsSetup>
+      <AppChatLink linkId={chatLinkId} />
+    </AppLayout>
+  );
+}
@@ -1,15 +1,18 @@
 import * as React from 'react';

 import { AppNews } from '../src/apps/news/AppNews';
+import { useMarkNewsAsSeen } from '../src/apps/news/news.hooks';

-import { markNewsAsSeen } from '~/common/logic/store-logic-sherpa';
-import { withNextJSPerPageLayout } from '~/common/layout/withLayout';
+import { AppLayout } from '~/common/layout/AppLayout';


-export default withNextJSPerPageLayout({ type: 'optima', suspendAutoModelsSetup: true }, () => {
+export default function NewsPage() {
+  // update the last seen news version
+  useMarkNewsAsSeen();

-  // 'touch' the last seen news version
-  React.useEffect(() => markNewsAsSeen(), []);
-
-  return <AppNews />;
-});
+  return (
+    <AppLayout suspendAutoModelsSetup>
+      <AppNews />
+    </AppLayout>
+  );
+}
@@ -2,7 +2,13 @@ import * as React from 'react';

 import { AppPersonas } from '../src/apps/personas/AppPersonas';

-import { withNextJSPerPageLayout } from '~/common/layout/withLayout';
+import { AppLayout } from '~/common/layout/AppLayout';


-export default withNextJSPerPageLayout({ type: 'optima' }, () => <AppPersonas />);
+export default function PersonasPage() {
+  return (
+    <AppLayout>
+      <AppPersonas />
+    </AppLayout>
+  );
+}
@@ -1,8 +0,0 @@
-import * as React from 'react';
-
-import { AppTokens } from '../src/apps/tokens/AppTokens';
-
-import { withNextJSPerPageLayout } from '~/common/layout/withLayout';
-
-
-export default withNextJSPerPageLayout({ type: 'optima' }, () => <AppTokens />);
@@ -1,8 +0,0 @@
-import * as React from 'react';
-
-import { AppPlaceholder } from '../src/apps/AppPlaceholder';
-
-import { withNextJSPerPageLayout } from '~/common/layout/withLayout';
-
-
-export default withNextJSPerPageLayout({ type: 'optima' }, () => <AppPlaceholder />);
@@ -3,49 +3,29 @@
  "short_name": "big-AGI",
  "theme_color": "#32383E",
  "background_color": "#9FA6AD",
-  "description": "Your Generative AI Suite",
-  "categories": [
-    "productivity",
-    "AI",
-    "tool",
-    "utilities"
-  ],
+  "description": "Personal AGI App",
  "display": "standalone",
-  "start_url": "/?source=pwa",
-  "scope": "/",
+  "start_url": "/",
  "icons": [
-    {
-      "src": "/icons/icon-1024x1024.png",
-      "sizes": "1024x1024",
-      "type": "image/png",
-      "purpose": "any maskable"
-    },
-    {
-      "src": "/icons/icon-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png",
-      "purpose": "any"
-    },
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
-      "purpose": "any"
-    }
-  ],
-  "file_handlers": [
+      "purpose": "maskable"
+    },
    {
-      "action": "/link/share_target",
-      "accept": {
-        "application/big-agi": [
-          ".agi",
-          ".agi.json"
-        ]
-      }
+      "src": "/icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/icon-1024x1024.png",
+      "sizes": "1024x1024",
+      "type": "image/png"
    }
  ],
  "share_target": {
-    "action": "/link/share_target",
+    "action": "/launch",
    "method": "GET",
    "enctype": "application/x-www-form-urlencoded",
    "params": {
@@ -53,31 +33,5 @@
      "text": "text",
      "url": "url"
    }
-  },
-  "shortcuts": [
-    {
-      "name": "Call",
-      "url": "/call",
-      "description": "Call a Persona",
-      "icons": [
-        {
-          "src": "/icons/icon-call-96x96.png",
-          "sizes": "96x96",
-          "type": "image/png"
-        }
-      ]
-    },
-    {
-      "name": "New Voice Chat",
-      "url": "/?newChat=voiceInput",
-      "description": "Start a new chat with voice input",
-      "icons": [
-        {
-          "src": "/icons/icon-voicechat-96x96.png",
-          "sizes": "96x96",
-          "type": "image/png"
-        }
-      ]
-    }
-  ]
+  }
 }
@@ -1,56 +0,0 @@
-import * as React from 'react';
-
-import { Box, Typography } from '@mui/joy';
-
-import { capitalizeFirstLetter } from '~/common/util/textUtils';
-import { useRouterRoute } from '~/common/app.routes';
-
-
-/**
- * https://github.com/enricoros/big-AGI/issues/299
- */
-export function AppPlaceholder(props: {
-  title?: string | null,
-  text?: React.ReactNode,
-  children?: React.ReactNode,
-}) {
-
-  // external state
-  const route = useRouterRoute();
-
-  // derived state
-  const placeholderAppName = props.title || capitalizeFirstLetter(route.replace('/', '') || 'Home');
-
-  return (
-    <Box sx={{
-      flexGrow: 1,
-      overflowY: 'auto',
-      p: { xs: 3, md: 6 },
-      border: '1px solid blue',
-    }}>
-
-      {(props.title !== null || !!props.text) && (
-        <Box sx={{
-          my: 'auto',
-          display: 'flex', flexDirection: 'column', alignItems: 'center',
-          gap: 4,
-          border: '1px solid red',
-        }}>
-
-          <Typography level='h1'>
-            {placeholderAppName}
-          </Typography>
-          {!!props.text && (
-            <Typography>
-              {props.text}
-            </Typography>
-          )}
-
-        </Box>
-      )}
-
-      {props.children}
-
-    </Box>
-  );
-}
@@ -1,27 +0,0 @@
-import * as React from 'react';
-
-import { Box, Container, Typography } from '@mui/joy';
-
-
-export function AppSmallContainer({ title, description, children }: {
-  title: string;
-  description: React.ReactNode;
-  children: React.ReactNode;
-}) {
-  return (
-    <Box sx={{ flexGrow: 1, overflowY: 'auto', p: { xs: 3, md: 6 } }}>
-
-      <Container disableGutters maxWidth='md' sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
-
-        <Box sx={{ mb: 2 }}>
-          <Typography level='h1' sx={{ mb: 1 }}>{title}</Typography>
-          <Typography>{description}</Typography>
-        </Box>
-
-        {children}
-
-      </Container>
-
-    </Box>
-  );
-}
@@ -1,108 +0,0 @@
-import * as React from 'react';
-import { useShallow } from 'zustand/react/shallow';
-
-import { Box, Button, Typography } from '@mui/joy';
-
-import { BeamStoreApi, useBeamStore } from '~/modules/beam/store-beam.hooks';
-import { BeamView } from '~/modules/beam/BeamView';
-import { createBeamVanillaStore } from '~/modules/beam/store-beam_vanilla';
-
-import { OptimaToolbarIn } from '~/common/layout/optima/portals/OptimaPortalsIn';
-import { createDConversation, DConversation } from '~/common/stores/chat/chat.conversation';
-import { createDMessageTextContent, DMessage } from '~/common/stores/chat/chat.message';
-import { getChatLLMId } from '~/common/stores/llms/store-llms';
-import { useIsMobile } from '~/common/components/useMatchMedia';
-
-
-function initTestConversation(): DConversation {
-  const conversation = createDConversation();
-  conversation.messages.push(createDMessageTextContent('system', 'You are a helpful assistant.')); // Beam Test - seed1
-  conversation.messages.push(createDMessageTextContent('user', 'Hello, who are you? (please expand...)')); // Beam Test - seed2
-  return conversation;
-}
-
-function initTestBeamStore(messages: DMessage[], beamStore: BeamStoreApi = createBeamVanillaStore()): BeamStoreApi {
-  beamStore.getState().open(messages, getChatLLMId(), false, (content) => alert(content));
-  return beamStore;
-}
-
-
-export function AppBeam() {
-
-  // state
-  const [showDebug, setShowDebug] = React.useState(false);
-
-  const [conversation, setConversation] = React.useState<DConversation>(() => initTestConversation());
-  const [beamStoreApi] = React.useState(() => createBeamVanillaStore());
-
-
-  // reinit the beam store if the conversation changes
-  React.useEffect(() => {
-    initTestBeamStore(conversation.messages, beamStoreApi);
-  }, [beamStoreApi, conversation]);
-
-
-  // external state
-  const isMobile = useIsMobile();
-  const { isOpen, beamState } = useBeamStore(beamStoreApi, useShallow(state => {
-    return {
-      isOpen: state.isOpen,
-      beamState: showDebug ? state : null,
-    };
-  }));
-
-
-  const handleClose = React.useCallback(() => {
-    beamStoreApi.getState().terminateKeepingSettings();
-  }, [beamStoreApi]);
-
-
-  const toolbarItems = React.useMemo(() => <>
-    {/* button to toggle debug info */}
-    <Button size='sm' variant='plain' color='neutral' onClick={() => setShowDebug(on => !on)}>
-      {showDebug ? 'Hide' : 'Show'} debug
-    </Button>
-
-    {/* 'open' */}
-    <Button size='sm' variant='plain' color='neutral' onClick={() => setConversation(initTestConversation())}>
-      .open
-    </Button>
-
-    {/* 'close' */}
-    <Button size='sm' variant='plain' color='neutral' onClick={handleClose}>
-      .close
-    </Button>
-  </>, [handleClose, showDebug]);
-
-
-  return <>
-    <OptimaToolbarIn>{toolbarItems}</OptimaToolbarIn>
-
-    <Box sx={{ flexGrow: 1, overflowY: 'auto', position: 'relative' }}>
-
-      {isOpen && (
-        <BeamView
-          beamStore={beamStoreApi}
-          isMobile={isMobile}
-        />
-      )}
-
-      {showDebug && (
-        <Typography level='body-xs' sx={{
-          whiteSpace: 'pre',
-          position: 'absolute',
-          inset: 0,
-          zIndex: 1 /* debug on top of BeamView */,
-          backdropFilter: 'blur(4px)',
-          padding: '1rem',
-        }}>
-          {JSON.stringify(beamState, null, 2)
-            // add an extra newline between first level properties (space, space, double quote) to make it more readable
-            .split('\n').map(line => line.replace(/^\s\s"/g, '\n  ')).join('\n')}
-        </Typography>
-      )}
-
-    </Box>
-
-  </>;
-}
@@ -1,79 +1,46 @@
 import * as React from 'react';
+import { useRouter } from 'next/router';

 import { Container, Sheet } from '@mui/joy';

-import type { DConversationId } from '~/common/stores/chat/chat.conversation';
-import { useRouterQuery } from '~/common/app.routes';
+import { AppCallQueryParams } from '~/common/routes';
+import { InlineError } from '~/common/components/InlineError';

+import { CallUI } from './CallUI';
 import { CallWizard } from './CallWizard';
-import { Contacts } from './Contacts';
-import { Telephone } from './Telephone';
-import { useAppCallStore } from './state/store-app-call';


-/**
- * Used to define the intent of the call from other apps (via query params) or
- * from the contacts list (via the 'call' button).
- */
-export interface AppCallIntent {
-  conversationId: DConversationId | null;
-  personaId: string;
-  backTo: 'app-chat' | 'app-call-contacts';
-}
+export const APP_CALL_ENABLED = false;


 export function AppCall() {
-
-  // state
-  const [callIntent, setCallIntent] = React.useState<AppCallIntent | null>(null);
-
  // external state
-  const grayUI = useAppCallStore(state => state.grayUI);
-  const query = useRouterQuery<Partial<AppCallIntent>>();
+  const { query } = useRouter();

-
-  // [effect] set intent from the query parameters
-  React.useEffect(() => {
-    if (query.personaId) {
-      setCallIntent({
-        conversationId: query.conversationId ?? null,
-        personaId: query.personaId,
-        backTo: query.backTo || 'app-chat',
-      });
-    }
-  }, [query.backTo, query.conversationId, query.personaId]);
-
-
-  const hasIntent = !!callIntent && !!callIntent.personaId;
+  // derived state
+  const { conversationId, personaId } = query as any as AppCallQueryParams;
+  const validInput = !!conversationId && !!personaId;

  return (
-    <Sheet
-      variant={grayUI ? 'solid' : 'soft'}
-      invertedColors={grayUI ? true : undefined}
-      sx={{
-        // take the full V-area (we're inside PageWrapper) and scroll as needed
-        flexGrow: 1,
-        overflowY: 'auto',
+    <Sheet variant='solid' color='neutral' invertedColors sx={{
+      display: 'flex', flexDirection: 'column', justifyContent: 'center',
+      flexGrow: 1,
+      overflowY: 'auto',
+      minHeight: 96,
+    }}>

-        // container will take the full v-area
-        display: 'grid',
+      <Container maxWidth='sm' sx={{
+        display: 'flex', flexDirection: 'column',
+        alignItems: 'center',
+        minHeight: '80dvh', justifyContent: 'space-evenly',
+        gap: { xs: 2, md: 4 },
      }}>

-      <Container
-        maxWidth={hasIntent ? 'sm' : 'md'}
-        sx={{
-          display: 'flex', flexDirection: 'column', alignItems: 'center',
-          justifyContent: hasIntent ? 'space-evenly' : undefined,
-          gap: hasIntent ? 1 : undefined,
-          // shall force the contacts or telephone to stay within the container
-          overflowY: hasIntent ? 'hidden' : undefined,
-        }}>
+        {!validInput && <InlineError error={`Something went wrong. ${JSON.stringify(query)}`} />}

-        {!hasIntent ? (
-          <Contacts setCallIntent={setCallIntent} />
-        ) : (
-          <CallWizard conversationId={callIntent.conversationId}>
-            <Telephone callIntent={callIntent} backToContacts={() => setCallIntent(null)} />
+        {validInput && (
+          <CallWizard conversationId={conversationId}>
+            <CallUI conversationId={conversationId} personaId={personaId} />
          </CallWizard>
        )}

@@ -0,0 +1,392 @@
+import * as React from 'react';
+import { shallow } from 'zustand/shallow';
+import { useRouter } from 'next/router';
+
+import { Box, Card, ListItemDecorator, MenuItem, Switch, Typography } from '@mui/joy';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import CallEndIcon from '@mui/icons-material/CallEnd';
+import CallIcon from '@mui/icons-material/Call';
+import ChatOutlinedIcon from '@mui/icons-material/ChatOutlined';
+import MicIcon from '@mui/icons-material/Mic';
+import MicNoneIcon from '@mui/icons-material/MicNone';
+import RecordVoiceOverIcon from '@mui/icons-material/RecordVoiceOver';
+
+import { useChatLLMDropdown } from '../chat/components/applayout/useLLMDropdown';
+
+import { EXPERIMENTAL_speakTextStream } from '~/modules/elevenlabs/elevenlabs.client';
+import { SystemPurposeId, SystemPurposes } from '../../data';
+import { VChatMessageIn } from '~/modules/llms/transports/chatGenerate';
+import { streamChat } from '~/modules/llms/transports/streamChat';
+import { useVoiceDropdown } from '~/modules/elevenlabs/useVoiceDropdown';
+
+import { Link } from '~/common/components/Link';
+import { SpeechResult, useSpeechRecognition } from '~/common/components/useSpeechRecognition';
+import { conversationTitle, createDMessage, DMessage, useChatStore } from '~/common/state/store-chats';
+import { playSoundUrl, usePlaySoundUrl } from '~/common/util/audioUtils';
+import { useLayoutPluggable } from '~/common/layout/store-applayout';
+
+import { CallAvatar } from './components/CallAvatar';
+import { CallButton } from './components/CallButton';
+import { CallMessage } from './components/CallMessage';
+import { CallStatus } from './components/CallStatus';
+
+
+function CallMenuItems(props: {
+  pushToTalk: boolean,
+  setPushToTalk: (pushToTalk: boolean) => void,
+  override: boolean,
+  setOverride: (overridePersonaVoice: boolean) => void,
+}) {
+
+  // external state
+  const { voicesDropdown } = useVoiceDropdown(false, !props.override);
+
+  const handlePushToTalkToggle = () => props.setPushToTalk(!props.pushToTalk);
+
+  const handleChangeVoiceToggle = () => props.setOverride(!props.override);
+
+  return <>
+
+    <MenuItem onClick={handlePushToTalkToggle}>
+      <ListItemDecorator>{props.pushToTalk ? <MicNoneIcon /> : <MicIcon />}</ListItemDecorator>
+      Push to talk
+      <Switch checked={props.pushToTalk} onChange={handlePushToTalkToggle} sx={{ ml: 'auto' }} />
+    </MenuItem>
+
+    <MenuItem onClick={handleChangeVoiceToggle}>
+      <ListItemDecorator><RecordVoiceOverIcon /></ListItemDecorator>
+      Change Voice
+      <Switch checked={props.override} onChange={handleChangeVoiceToggle} sx={{ ml: 'auto' }} />
+    </MenuItem>
+
+    <MenuItem>
+      <ListItemDecorator>{' '}</ListItemDecorator>
+      {voicesDropdown}
+    </MenuItem>
+
+    <MenuItem component={Link} href='https://github.com/enricoros/big-agi/issues/175' target='_blank'>
+      <ListItemDecorator><ChatOutlinedIcon /></ListItemDecorator>
+      Voice Calls Feedback
+    </MenuItem>
+
+  </>;
+}
+
+
+export function CallUI(props: {
+  conversationId: string,
+  personaId: string,
+}) {
+
+  // state
+  const [avatarClickCount, setAvatarClickCount] = React.useState<number>(0);// const [micMuted, setMicMuted] = React.useState(false);
+  const [callElapsedTime, setCallElapsedTime] = React.useState<string>('00:00');
+  const [callMessages, setCallMessages] = React.useState<DMessage[]>([]);
+  const [overridePersonaVoice, setOverridePersonaVoice] = React.useState<boolean>(false);
+  const [personaTextInterim, setPersonaTextInterim] = React.useState<string | null>(null);
+  const [pushToTalk, setPushToTalk] = React.useState(true);
+  const [stage, setStage] = React.useState<'ring' | 'declined' | 'connected' | 'ended'>('ring');
+  const responseAbortController = React.useRef<AbortController | null>(null);
+
+  // external state
+  const { push: routerPush } = useRouter();
+  const { chatLLMId, chatLLMDropdown } = useChatLLMDropdown();
+  const { chatTitle, messages } = useChatStore(state => {
+    const conversation = state.conversations.find(conversation => conversation.id === props.conversationId);
+    return {
+      chatTitle: conversation ? conversationTitle(conversation) : 'no conversation',
+      messages: conversation ? conversation.messages : [],
+    };
+  }, shallow);
+  const persona = SystemPurposes[props.personaId as SystemPurposeId] ?? undefined;
+  const personaCallStarters = persona?.call?.starters ?? undefined;
+  const personaVoiceId = overridePersonaVoice ? undefined : (persona?.voices?.elevenLabs?.voiceId ?? undefined);
+  const personaSystemMessage = persona?.systemMessage ?? undefined;
+
+  // hooks and speech
+  const [speechInterim, setSpeechInterim] = React.useState<SpeechResult | null>(null);
+  const onSpeechResultCallback = React.useCallback((result: SpeechResult) => {
+    setSpeechInterim(result.done ? null : { ...result });
+    if (result.done) {
+      const transcribed = result.transcript.trim();
+      if (transcribed.length >= 1)
+        setCallMessages(messages => [...messages, createDMessage('user', transcribed)]);
+    }
+  }, []);
+  const { isSpeechEnabled, isRecording, isRecordingAudio, isRecordingSpeech, startRecording, stopRecording, toggleRecording } = useSpeechRecognition(onSpeechResultCallback, 1000);
+
+  // derived state
+  const isRinging = stage === 'ring';
+  const isConnected = stage === 'connected';
+  const isDeclined = stage === 'declined';
+  const isEnded = stage === 'ended';
+
+
+  /// Sounds
+
+  // pickup / hangup
+  React.useEffect(() => {
+    !isRinging && playSoundUrl(isConnected ? '/sounds/chat-begin.mp3' : '/sounds/chat-end.mp3');
+  }, [isRinging, isConnected]);
+
+  // ringtone
+  usePlaySoundUrl(isRinging ? '/sounds/chat-ringtone.mp3' : null, 300, 2800 * 2);
+
+
+  /// CONNECTED
+
+  const handleCallStop = () => {
+    stopRecording();
+    setStage('ended');
+  };
+
+  // [E] pickup -> seed message and call timer
+  // FIXME: Overriding the voice will reset the call - not a desired behavior
+  React.useEffect(() => {
+    if (!isConnected) return;
+
+    // show the call timer
+    setCallElapsedTime('00:00');
+    const start = Date.now();
+    const interval = setInterval(() => {
+      const elapsedSeconds = Math.floor((Date.now() - start) / 1000);
+      const minutes = Math.floor(elapsedSeconds / 60);
+      const seconds = elapsedSeconds % 60;
+      setCallElapsedTime(`${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`);
+    }, 1000);
+
+    // seed the first message
+    const phoneMessages = personaCallStarters || ['Hello?', 'Hey!'];
+    const firstMessage = phoneMessages[Math.floor(Math.random() * phoneMessages.length)];
+
+    setCallMessages([createDMessage('assistant', firstMessage)]);
+    // fire/forget
+    void EXPERIMENTAL_speakTextStream(firstMessage, personaVoiceId);
+
+    return () => clearInterval(interval);
+  }, [isConnected, personaCallStarters, personaVoiceId]);
+
+  // [E] persona streaming response - upon new user message
+  React.useEffect(() => {
+    // only act when we have a new user message
+    if (!isConnected || callMessages.length < 1 || callMessages[callMessages.length - 1].role !== 'user')
+      return;
+    switch (callMessages[callMessages.length - 1].text) {
+      // do not respond
+      case 'Stop.':
+        return;
+      // command: close the call
+      case 'Goodbye.':
+        setStage('ended');
+        setTimeout(() => {
+          void routerPush('/');
+        }, 2000);
+        return;
+      // command: regenerate answer
+      case 'Retry.':
+      case 'Try again.':
+        setCallMessages(messages => messages.slice(0, messages.length - 2));
+        return;
+      // command: restart chat
+      case 'Restart.':
+        setCallMessages([]);
+        return;
+    }
+
+    // bail if no llm selected
+    if (!chatLLMId) return;
+
+    // temp fix: when the chat has no messages, only assume a single system message
+    const chatMessages: { role: VChatMessageIn['role'], text: string }[] = messages.length > 0
+      ? messages
+      : personaSystemMessage
+        ? [{ role: 'system', text: personaSystemMessage }]
+        : [];
+
+    // 'prompt' for a "telephone call"
+    // FIXME: can easily run ouf of tokens - if this gets traction, we'll fix it
+    const callPrompt: VChatMessageIn[] = [
+      { role: 'system', content: 'You are having a phone call. Your response style is brief and to the point, and according to your personality, defined below.' },
+      ...chatMessages.map(message => ({ role: message.role, content: message.text })),
+      { role: 'system', content: 'You are now on the phone call related to the chat above. Respect your personality and answer with short, friendly and accurate thoughtful lines.' },
+      ...callMessages.map(message => ({ role: message.role, content: message.text })),
+    ];
+
+    // perform completion
+    responseAbortController.current = new AbortController();
+    let finalText = '';
+    let error: any | null = null;
+    streamChat(chatLLMId, callPrompt, responseAbortController.current.signal, (updatedMessage: Partial<DMessage>) => {
+      const text = updatedMessage.text?.trim();
+      if (text) {
+        finalText = text;
+        setPersonaTextInterim(text);
+      }
+    }).catch((err: DOMException) => {
+      if (err?.name !== 'AbortError')
+        error = err;
+    }).finally(() => {
+      setPersonaTextInterim(null);
+      setCallMessages(messages => [...messages, createDMessage('assistant', finalText + (error ? ` (ERROR: ${error.message || error.toString()})` : ''))]);
+      // fire/forget
+      void EXPERIMENTAL_speakTextStream(finalText, personaVoiceId);
+    });
+
+    return () => {
+      responseAbortController.current?.abort();
+      responseAbortController.current = null;
+    };
+  }, [isConnected, callMessages, chatLLMId, messages, personaVoiceId, personaSystemMessage, routerPush]);
+
+  // [E] Message interrupter
+  const abortTrigger = isConnected && isRecordingSpeech;
+  React.useEffect(() => {
+    if (abortTrigger && responseAbortController.current) {
+      responseAbortController.current.abort();
+      responseAbortController.current = null;
+    }
+    // TODO.. abort current speech
+  }, [abortTrigger]);
+
+
+  // [E] continuous speech recognition (reload)
+  const shouldStartRecording = isConnected && !pushToTalk && speechInterim === null && !isRecordingAudio;
+  React.useEffect(() => {
+    if (shouldStartRecording)
+      startRecording();
+  }, [shouldStartRecording, startRecording]);
+
+
+  // more derived state
+  const personaName = persona?.title ?? 'Unknown';
+  const isMicEnabled = isSpeechEnabled;
+  const isTTSEnabled = true;
+  const isEnabled = isMicEnabled && isTTSEnabled;
+
+
+  // pluggable UI
+
+  const menuItems = React.useMemo(() =>
+      <CallMenuItems
+        pushToTalk={pushToTalk} setPushToTalk={setPushToTalk}
+        override={overridePersonaVoice} setOverride={setOverridePersonaVoice} />
+    , [overridePersonaVoice, pushToTalk],
+  );
+
+  useLayoutPluggable(chatLLMDropdown, null, menuItems);
+
+
+  return <>
+
+    <Typography
+      level='h1'
+      sx={{
+        fontSize: { xs: '2.5rem', md: '3rem' },
+        textAlign: 'center',
+        mx: 2,
+      }}
+    >
+      {isConnected ? personaName : 'Hello'}
+    </Typography>
+
+    <CallAvatar
+      symbol={persona?.symbol || '?'}
+      imageUrl={persona?.imageUri}
+      isRinging={isRinging}
+      onClick={() => setAvatarClickCount(avatarClickCount + 1)}
+    />
+
+    <CallStatus
+      callerName={isConnected ? undefined : personaName}
+      statusText={isRinging ? 'is calling you' : isDeclined ? 'call declined' : isEnded ? 'call ended' : callElapsedTime}
+      regardingText={chatTitle}
+      micError={!isMicEnabled} speakError={!isTTSEnabled}
+    />
+
+    {/* Live Transcript, w/ streaming messages, audio indication, etc. */}
+    {(isConnected || isEnded) && (
+      <Card variant='soft' sx={{
+        flexGrow: 1,
+        minHeight: '15dvh', maxHeight: '24dvh',
+        overflow: 'auto',
+        width: '100%',
+        borderRadius: 'lg',
+        flexDirection: 'column-reverse',
+      }}>
+
+        {/* Messages in reverse order, for auto-scroll from the bottom */}
+        <Box sx={{ display: 'flex', flexDirection: 'column-reverse', gap: 1 }}>
+
+          {/* Listening... */}
+          {isRecording && (
+            <CallMessage
+              text={<>{speechInterim?.transcript ? speechInterim.transcript + ' ' : ''}<i>{speechInterim?.interimTranscript}</i></>}
+              variant={isRecordingSpeech ? 'solid' : 'outlined'}
+              role='user'
+            />
+          )}
+
+          {/* Persona streaming text... */}
+          {!!personaTextInterim && (
+            <CallMessage
+              text={personaTextInterim}
+              variant='solid' color='neutral'
+              role='assistant'
+            />
+          )}
+
+          {/* Messages (last 6 messages, in reverse order) */}
+          {callMessages.slice(-6).reverse().map((message) =>
+            <CallMessage
+              key={message.id}
+              text={message.text}
+              variant={message.role === 'assistant' ? 'solid' : 'soft'} color='neutral'
+              role={message.role} />,
+          )}
+        </Box>
+      </Card>
+    )}
+
+    {/* Call Buttons */}
+    <Box sx={{ width: '100%', display: 'flex', justifyContent: 'space-evenly' }}>
+
+      {/* [ringing] Decline / Accept */}
+      {isRinging && <CallButton Icon={CallEndIcon} text='Decline' color='danger' onClick={() => setStage('declined')} />}
+      {isRinging && isEnabled && <CallButton Icon={CallIcon} text='Accept' color='success' variant='soft' onClick={() => setStage('connected')} />}
+
+      {/* [Calling] Hang / PTT (mute not enabled yet) */}
+      {isConnected && <CallButton Icon={CallEndIcon} text='Hang up' color='danger' onClick={handleCallStop} />}
+      {isConnected && (pushToTalk
+          ? <CallButton Icon={MicIcon} onClick={toggleRecording}
+                        text={isRecordingSpeech ? 'Listening...' : isRecording ? 'Listening' : 'Push To Talk'}
+                        variant={isRecordingSpeech ? 'solid' : isRecording ? 'soft' : 'outlined'} />
+          : null
+        // <CallButton disabled={true} Icon={MicOffIcon} onClick={() => setMicMuted(muted => !muted)}
+        //               text={micMuted ? 'Muted' : 'Mute'}
+        //               color={micMuted ? 'warning' : undefined} variant={micMuted ? 'solid' : 'outlined'} />
+      )}
+
+      {/* [ended] Back / Call Again */}
+      {(isEnded || isDeclined) && <Link noLinkStyle href='/'><CallButton Icon={ArrowBackIcon} text='Back' variant='soft' /></Link>}
+      {(isEnded || isDeclined) && <CallButton Icon={CallIcon} text='Call Again' color='success' variant='soft' onClick={() => setStage('connected')} />}
+
+    </Box>
+
+    {/* DEBUG state */}
+    {avatarClickCount > 10 && (avatarClickCount % 2 === 0) && (
+      <Card variant='outlined' sx={{ maxHeight: '25dvh', overflow: 'auto', whiteSpace: 'pre', py: 0, width: '100%' }}>
+        Special commands: Stop, Retry, Try Again, Restart, Goodbye.
+        {JSON.stringify({ isSpeechEnabled, isRecordingAudio, speechInterim }, null, 2)}
+      </Card>
+    )}
+
+    {/*{isEnded && <Card variant='solid' size='lg' color='primary'>*/}
+    {/*  <CardContent>*/}
+    {/*    <Typography>*/}
+    {/*      Please rate the call quality, 1 to 5 - Just a Joke*/}
+    {/*    </Typography>*/}
+    {/*  </CardContent>*/}
+    {/*</Card>}*/}
+
+  </>;
+}
@@ -1,22 +1,60 @@
 import * as React from 'react';
+import { keyframes } from '@emotion/react';

 import { Box, Button, Card, CardContent, IconButton, ListItemDecorator, Typography } from '@mui/joy';
-import ArrowForwardRoundedIcon from '@mui/icons-material/ArrowForwardRounded';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import ChatIcon from '@mui/icons-material/Chat';
-import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
-import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+import CheckIcon from '@mui/icons-material/Check';
+import CloseIcon from '@mui/icons-material/Close';
 import MicIcon from '@mui/icons-material/Mic';
-import RecordVoiceOverTwoToneIcon from '@mui/icons-material/RecordVoiceOverTwoTone';
-import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
+import RecordVoiceOverIcon from '@mui/icons-material/RecordVoiceOver';
+import WarningIcon from '@mui/icons-material/Warning';

-import { animationColorRainbow } from '~/common/util/animUtils';
-import { navigateBack } from '~/common/app.routes';
-import { optimaOpenPreferences } from '~/common/layout/optima/useOptima';
+import { navigateBack } from '~/common/routes';
+import { openLayoutPreferences } from '~/common/layout/store-applayout';
 import { useCapabilityBrowserSpeechRecognition, useCapabilityElevenLabs } from '~/common/components/useCapabilities';
-import { useChatStore } from '~/common/stores/chat/store-chats';
+import { useChatStore } from '~/common/state/store-chats';
 import { useUICounter } from '~/common/state/store-ui';


+const cssRainbowBackgroundKeyframes = keyframes`
+    100%, 0% {
+        background-color: rgb(128, 0, 0);
+    }
+    8% {
+        background-color: rgb(102, 51, 0);
+    }
+    16% {
+        background-color: rgb(64, 64, 0);
+    }
+    25% {
+        background-color: rgb(38, 76, 0);
+    }
+    33% {
+        background-color: rgb(0, 89, 0);
+    }
+    41% {
+        background-color: rgb(0, 76, 41);
+    }
+    50% {
+        background-color: rgb(0, 64, 64);
+    }
+    58% {
+        background-color: rgb(0, 51, 102);
+    }
+    66% {
+        background-color: rgb(0, 0, 128);
+    }
+    75% {
+        background-color: rgb(63, 0, 128);
+    }
+    83% {
+        background-color: rgb(76, 0, 76);
+    }
+    91% {
+        background-color: rgb(102, 0, 51);
+    }`;
+
 function StatusCard(props: { icon: React.JSX.Element, hasIssue: boolean, text: string, button?: React.JSX.Element }) {
  return (
    <Card sx={{ width: '100%' }}>
@@ -29,7 +67,7 @@ function StatusCard(props: { icon: React.JSX.Element, hasIssue: boolean, text: s
          {props.button}
        </Typography>
        <ListItemDecorator>
-          {props.hasIssue ? <WarningRoundedIcon color='warning' /> : <CheckRoundedIcon color='success' />}
+          {props.hasIssue ? <WarningIcon color='warning' /> : <CheckIcon color='success' />}
        </ListItemDecorator>
      </CardContent>
    </Card>
@@ -37,8 +75,7 @@ function StatusCard(props: { icon: React.JSX.Element, hasIssue: boolean, text: s
 }


-export function CallWizard(props: { strict?: boolean, conversationId: string | null, children: React.ReactNode }) {
-
+export function CallWizard(props: { strict?: boolean, conversationId: string, children: React.ReactNode }) {
  // state
  const [chatEmptyOverride, setChatEmptyOverride] = React.useState(false);
  const [recognitionOverride, setRecognitionOverride] = React.useState(false);
@@ -47,47 +84,49 @@ export function CallWizard(props: { strict?: boolean, conversationId: string | n
  const recognition = useCapabilityBrowserSpeechRecognition();
  const synthesis = useCapabilityElevenLabs();
  const chatIsEmpty = useChatStore(state => {
-    if (!props.conversationId)
-      return false;
    const conversation = state.conversations.find(conversation => conversation.id === props.conversationId);
    return !(conversation?.messages?.length);
  });
  const { novel, touch } = useUICounter('call-wizard');

  // derived state
-  const outOfTheBlue = !props.conversationId;
  const overriddenEmptyChat = chatEmptyOverride || !chatIsEmpty;
  const overriddenRecognition = recognitionOverride || recognition.mayWork;
  const allGood = overriddenEmptyChat && overriddenRecognition && synthesis.mayWork;
  const fatalGood = overriddenRecognition && synthesis.mayWork;

+  if (!novel && fatalGood)
+    return props.children;

-  const handleOverrideChatEmpty = React.useCallback(() => setChatEmptyOverride(true), []);
+  const handleOverrideChatEmpty = () => setChatEmptyOverride(true);

-  const handleOverrideRecognition = React.useCallback(() => setRecognitionOverride(true), []);
+  const handleOverrideRecognition = () => setRecognitionOverride(true);

-  const handleConfigureElevenLabs = React.useCallback(() => optimaOpenPreferences('voice'), []);
+  const handleConfigureElevenLabs = () => {
+    openLayoutPreferences(3);
+  };

-  const handleFinishButton = React.useCallback(() => {
+  const handleFinishButton = () => {
    if (!allGood)
      return navigateBack();
    touch();
-  }, [allGood, touch]);
-
-
-  if (!novel && fatalGood)
-    return props.children;
+  };


  return <>

    <Box sx={{ flexGrow: 0.5 }} />

-    <Typography level='title-lg' sx={{ fontSize: '3rem', fontWeight: 'sm', textAlign: 'center' }}>
+    <Typography level='title-lg' sx={{ fontSize: '3rem', fontWeight: 200, lineHeight: '1.5em', textAlign: 'center' }}>
      Welcome to<br />
-      <Box component='span' sx={{ animation: `${animationColorRainbow} 15s linear infinite` }}>
+      <Typography
+        component='span'
+        sx={{
+          backgroundColor: 'primary.solidActiveBg', mx: -0.5, px: 0.5,
+          animation: `${cssRainbowBackgroundKeyframes} 15s linear infinite`,
+        }}>
        your first call
-      </Box>
+      </Typography>
    </Typography>

    <Box sx={{ flexGrow: 0.5 }} />
@@ -98,7 +137,7 @@ export function CallWizard(props: { strict?: boolean, conversationId: string | n
    </Typography>

    {/* Chat Empty status */}
-    {!outOfTheBlue && <StatusCard
+    <StatusCard
      icon={<ChatIcon />}
      hasIssue={!overriddenEmptyChat}
      text={overriddenEmptyChat ? 'Great! Your chat has messages.' : 'The chat is empty. Calls are effective when the caller has context.'}
@@ -107,7 +146,7 @@ export function CallWizard(props: { strict?: boolean, conversationId: string | n
          Ignore
        </Button>
      )}
-    />}
+    />

    {/* Add the speech to text feature status */}
    <StatusCard
@@ -128,7 +167,7 @@ export function CallWizard(props: { strict?: boolean, conversationId: string | n

    {/* Text to Speech status */}
    <StatusCard
-      icon={<RecordVoiceOverTwoToneIcon />}
+      icon={<RecordVoiceOverIcon />}
      text={
        (synthesis.mayWork ? 'Voice synthesis should be ready.' : 'There might be an issue with ElevenLabs voice synthesis.')
        + (synthesis.isConfiguredServerSide ? '' : (synthesis.isConfiguredClientSide ? '' : ' Please add your API key in the settings.'))
@@ -159,21 +198,14 @@ export function CallWizard(props: { strict?: boolean, conversationId: string | n
      </Typography>

      <IconButton
-        size='lg'
-        variant='solid' color={allGood ? 'success' : 'danger'}
-        onClick={handleFinishButton}
-        sx={{
-          borderRadius: '50px',
-          mr: 0.5,
-          // animation: `${cssRainbowBackgroundKeyframes} 15s linear infinite`,
-          // boxShadow: allGood ? 'md' : 'none',
-        }}
+        size='lg' variant={allGood ? 'soft' : 'solid'} color={allGood ? 'success' : 'danger'}
+        onClick={handleFinishButton} sx={{ borderRadius: '50px' }}
      >
-        {allGood ? <ArrowForwardRoundedIcon sx={{ fontSize: '1.5em' }} /> : <CloseRoundedIcon sx={{ fontSize: '1.5em' }} />}
+        {allGood ? <ArrowForwardIcon sx={{ fontSize: '1.5em' }} /> : <CloseIcon sx={{ fontSize: '1.5em' }} />}
      </IconButton>
    </Box>

-    <Box sx={{ flexGrow: 2 }} />
+    <Box sx={{ flexGrow: 0.5 }} />

  </>;
 }
@@ -1,324 +0,0 @@
-import * as React from 'react';
-
-import type { SxProps } from '@mui/joy/styles/types';
-import { Avatar, Box, Card, CardContent, Chip, IconButton, Link as MuiLink, ListDivider, MenuItem, Sheet, Switch, Typography } from '@mui/joy';
-import CallIcon from '@mui/icons-material/Call';
-
-import { GitHubProjectIssueCard } from '~/common/components/GitHubProjectIssueCard';
-import { OptimaPanelGroup } from '~/common/layout/optima/panel/OptimaPanelGroup';
-import { animationShadowRingLimey } from '~/common/util/animUtils';
-import { conversationTitle, DConversation, DConversationId } from '~/common/stores/chat/chat.conversation';
-import { useChatStore } from '~/common/stores/chat/store-chats';
-import { useSetOptimaAppMenu } from '~/common/layout/optima/useOptima';
-
-import type { AppCallIntent } from './AppCall';
-import { MockPersona, useMockPersonas } from './state/useMockPersonas';
-import { useAppCallStore } from './state/store-app-call';
-
-
-// number of conversations to show before collapsing
-const COLLAPSED_COUNT = 2;
-
-
-const ContactCardAvatar = (props: { size: string, symbol?: string, imageUrl?: string, onClick?: () => void, sx?: SxProps }) =>
-  <Avatar
-    // variant='outlined'
-    onClick={props.onClick}
-    src={props.imageUrl}
-    sx={{
-      '--Avatar-size': props.size,
-      fontSize: props.size,
-      backgroundColor: 'background.popup',
-      boxShadow: !props.imageUrl ? 'sm' : null,
-      ...props.sx,
-    }}
-  >
-    {/* As fallback, show the large Persona Symbol */}
-    {!props.imageUrl && <Box>{props.symbol}</Box>}
-  </Avatar>;
-
-
-const ContactCardConversationCall = (props: { conversation: DConversation, onConversationClicked: (conversationId: DConversationId) => void, }) =>
-  <Chip
-    variant='plain' color='primary' size='sm'
-    endDecorator={<CallIcon />}
-    onClick={() => props.onConversationClicked(props.conversation.id)}
-    slotProps={{
-      root: {
-        sx: {
-          maxWidth: 'unset',
-          mx: -1,
-          px: 1,
-          py: 0.25,
-        },
-      },
-    }}
-  >
-    {conversationTitle(props.conversation, 'Chat')}
-  </Chip>;
-
-
-function CallContactCard(props: {
-  persona: MockPersona,
-  callGrayUI: boolean,
-  conversations: Readonly<DConversation[]>,
-  setCallIntent: (intent: AppCallIntent) => void,
-}) {
-
-  // state
-  const [conversationsExpanded, setConversationsExpanded] = React.useState(false);
-
-  // derived state
-  const { persona, setCallIntent } = props;
-  const conversations = props.conversations.slice(0, conversationsExpanded ? undefined : COLLAPSED_COUNT);
-  const hasConversations = !!conversations.length;
-  const showExpander = props.conversations.length > COLLAPSED_COUNT && !conversationsExpanded;
-
-
-  const handleCallPersona = React.useCallback(() => setCallIntent({
-    conversationId: null,
-    personaId: persona.personaId,
-    backTo: 'app-call-contacts',
-  }), [persona.personaId, setCallIntent]);
-
-  const handleCallPersonaRe = React.useCallback((conversationId: DConversationId | null) => setCallIntent({
-    conversationId: conversationId,
-    personaId: persona.personaId,
-    backTo: 'app-call-contacts',
-  }), [persona.personaId, setCallIntent]);
-
-  return (
-
-    <Box sx={{ mt: 3.5 }}>
-
-      <Card sx={{
-        // boxShadow: 'lg',
-        height: '100%',
-        gap: 0,
-      }}>
-
-        {/* Persona Symbol - Overlapping */}
-        <ContactCardAvatar
-          size='6rem'
-          symbol={persona.symbol}
-          imageUrl={persona?.imageUri}
-          sx={{
-            mx: 'auto',
-            mt: '-2.5rem',
-          }}
-        />
-
-        <CardContent sx={{ my: 2, display: 'flex' }}>
-          {/* Persona Description */}
-          <Typography level='body-xs' sx={{ minHeight: '3em', mb: hasConversations ? 1.5 : undefined }}>
-            {typeof persona.description === 'string' ? persona.description : 'Custom persona'}
-          </Typography>
-
-          {/*{hasConversations && <Divider>*/}
-          {/*<Typography level='body-xs'>call about</Typography>*/}
-          {/*</Divider>}*/}
-
-          {/* Persona Recent Converstions */}
-          {conversations.map(conversation =>
-            <ContactCardConversationCall
-              key={conversation.id}
-              conversation={conversation}
-              onConversationClicked={handleCallPersonaRe}
-            />,
-          )}
-
-          {showExpander && <Chip
-            variant='plain' color='primary' size='sm'
-            onClick={() => setConversationsExpanded(true)}
-            slotProps={{
-              root: {
-                sx: {
-                  maxWidth: 'unset',
-                  mx: -1,
-                  px: 1,
-                  py: 0.25,
-                },
-              },
-            }}
-          >
-            {`+${props.conversations.length - COLLAPSED_COUNT} more`}
-          </Chip>}
-
-        </CardContent>
-
-        {/*<Divider />*/}
-
-        {/* Bottom Name and "Call" Button */}
-        <Sheet
-          variant='soft' color='primary'
-          invertedColors={props.callGrayUI ? undefined : true}
-          sx={{
-            // emulate CardOverflow, because CardOverflow doesn't work well with Sheet/Inverted
-            // (there's also a potential top-level inversion)
-            '--variant-borderWidth': '1px',
-            '--CardOverflow-offset': 'calc(-1 * var(--Card-padding))',
-            '--CardOverflow-radius': 'calc(var(--Card-radius) - var(--variant-borderWidth, 0px))',
-            margin: '0 var(--CardOverflow-offset) var(--CardOverflow-offset)',
-            borderRadius: '0 0 var(--CardOverflow-radius) var(--CardOverflow-radius)',
-            padding: '0.5rem var(--Card-padding)',
-
-            // contents
-            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-            gap: 1,
-          }}
-        >
-          <Typography level='title-md'>
-            {persona.title}
-          </Typography>
-          <MuiLink overlay onClick={handleCallPersona}>
-            <IconButton size='md' variant='soft' sx={{
-              // borderRadius: '50%',
-              ml: 'auto',
-              mr: -1,
-            }}>
-              <CallIcon />
-            </IconButton>
-          </MuiLink>
-        </Sheet>
-
-      </Card>
-
-    </Box>
-
-  );
-}
-
-
-function useConversationsByPersona() {
-  const conversations = useChatStore(state => state.conversations);
-
-  return React.useMemo(() => {
-    // group by personaId
-    const groupedConversations: { [personaId: string]: DConversation[] } = conversations.reduce((acc, conversation) => {
-      const personaId = conversation.systemPurposeId;
-      acc[personaId] = [...acc[personaId] || [], conversation];
-      return acc;
-    }, {} as { [personaId: string]: DConversation[] });
-
-    // sort conversations by time and limit to 3
-    Object.values(groupedConversations).forEach(conversations =>
-      conversations.sort((a, b) => (b.updated || b.created) - (a.updated || a.created)),
-    );
-
-    return groupedConversations;
-  }, [conversations]);
-}
-
-
-export function Contacts(props: { setCallIntent: (intent: AppCallIntent) => void }) {
-
-  // external state
-  const {
-    grayUI, toggleGrayUI,
-    showConversations, toggleShowConversations,
-    showSupport, toggleShowSupport,
-  } = useAppCallStore();
-  const { personas } = useMockPersonas();
-  const conversationsByPersona = useConversationsByPersona();
-
-
-  // pluggable UI
-
-  const menuItems = React.useMemo(() => <OptimaPanelGroup title='Contacts Settings'>
-
-    <MenuItem onClick={toggleGrayUI}>
-      Grayed UI
-      <Switch checked={grayUI} sx={{ ml: 'auto' }} />
-    </MenuItem>
-
-    <MenuItem onClick={toggleShowConversations}>
-      Conversations
-      <Switch checked={showConversations} sx={{ ml: 'auto' }} />
-    </MenuItem>
-
-    <MenuItem onClick={toggleShowSupport}>
-      Show Support
-      <Switch checked={showSupport} sx={{ ml: 'auto' }} />
-    </MenuItem>
-
-  </OptimaPanelGroup>, [grayUI, showConversations, showSupport, toggleGrayUI, toggleShowConversations, toggleShowSupport]);
-
-  useSetOptimaAppMenu(menuItems, 'CallUI-Contacts');
-
-
-  return <>
-
-    {/* Header "Call AGI" */}
-    <Box sx={{
-      my: 6,
-      display: 'flex', alignItems: 'center',
-      gap: 3,
-    }}>
-      <IconButton
-        variant='soft' color='success'
-        sx={{
-          '--IconButton-size': { xs: '4.2rem', md: '5rem' },
-          borderRadius: '50%',
-          pointerEvents: 'none',
-          backgroundColor: 'background.popup',
-          animation: `${animationShadowRingLimey} 5s infinite`,
-        }}>
-        <CallIcon />
-      </IconButton>
-
-      <Box>
-        <Typography level='title-lg'>
-          Call AGI
-        </Typography>
-        <Typography level='title-sm' sx={{ mt: 1 }}>
-          Explore ideas and ignite creativity
-        </Typography>
-        <Chip variant='outlined' size='sm' sx={{ px: 1, py: 0.5, mt: 0.25, ml: -1, textWrap: 'wrap' }}>
-          Out-of-the-blue, or within a conversation
-        </Chip>
-      </Box>
-    </Box>
-
-    <ListDivider>
-      Personas
-    </ListDivider>
-
-    {/* Personas Cards */}
-    <Box
-      sx={{
-        width: '100%',
-        my: 5,
-        display: 'grid',
-        gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))',
-        gap: { xs: 1, md: 2 },
-      }}
-    >
-      {personas.map((persona) =>
-        <CallContactCard
-          key={persona.personaId}
-          persona={persona}
-          callGrayUI={grayUI}
-          conversations={!showConversations ? [] : conversationsByPersona[persona.personaId] || []}
-          setCallIntent={props.setCallIntent}
-        />,
-      )}
-    </Box>
-
-    {showSupport && <ListDivider sx={{ my: 1 }} />}
-
-    {showSupport && <GitHubProjectIssueCard
-      issue={354}
-      text='Call App: Support thread and compatibility matrix'
-      note={<>
-        Voice input uses the HTML Web Speech API, and speech output requires an ElevenLabs API Key.
-      </>}
-      // note2='Please report any issues you encounter'
-      sx={{
-        width: '100%',
-        mb: 2,
-        mt: 5,
-      }}
-    />}
-
-  </>;
-}
@@ -1,463 +0,0 @@
-import * as React from 'react';
-import { useShallow } from 'zustand/react/shallow';
-
-import { Box, Card, ListDivider, ListItemDecorator, MenuItem, Switch, Typography } from '@mui/joy';
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import CallEndIcon from '@mui/icons-material/CallEnd';
-import CallIcon from '@mui/icons-material/Call';
-import MicIcon from '@mui/icons-material/Mic';
-import MicNoneIcon from '@mui/icons-material/MicNone';
-import RecordVoiceOverTwoToneIcon from '@mui/icons-material/RecordVoiceOverTwoTone';
-
-import { ScrollToBottom } from '~/common/scroll-to-bottom/ScrollToBottom';
-import { ScrollToBottomButton } from '~/common/scroll-to-bottom/ScrollToBottomButton';
-import { useChatLLMDropdown } from '../chat/components/layout-bar/useLLMDropdown';
-
-import { SystemPurposeId, SystemPurposes } from '../../data';
-import { elevenLabsSpeakText } from '~/modules/elevenlabs/elevenlabs.client';
-import { AixChatGenerateContent_DMessage, aixChatGenerateContent_DMessage_FromConversation } from '~/modules/aix/client/aix.client';
-import { useElevenLabsVoiceDropdown } from '~/modules/elevenlabs/useElevenLabsVoiceDropdown';
-
-import type { OptimaBarControlMethods } from '~/common/layout/optima/bar/OptimaBarDropdown';
-import { AudioPlayer } from '~/common/util/audio/AudioPlayer';
-import { Link } from '~/common/components/Link';
-import { OptimaPanelGroup } from '~/common/layout/optima/panel/OptimaPanelGroup';
-import { OptimaToolbarIn } from '~/common/layout/optima/portals/OptimaPortalsIn';
-import { SpeechResult, useSpeechRecognition } from '~/common/components/speechrecognition/useSpeechRecognition';
-import { conversationTitle, remapMessagesSysToUsr } from '~/common/stores/chat/chat.conversation';
-import { createDMessageFromFragments, createDMessageTextContent, DMessage, messageFragmentsReduceText } from '~/common/stores/chat/chat.message';
-import { createErrorContentFragment } from '~/common/stores/chat/chat.fragments';
-import { launchAppChat, navigateToIndex } from '~/common/app.routes';
-import { useChatStore } from '~/common/stores/chat/store-chats';
-import { useGlobalShortcuts } from '~/common/components/shortcuts/useGlobalShortcuts';
-import { usePlayUrl } from '~/common/util/audio/usePlayUrl';
-import { useSetOptimaAppMenu } from '~/common/layout/optima/useOptima';
-
-import type { AppCallIntent } from './AppCall';
-import { CallAvatar } from './components/CallAvatar';
-import { CallButton } from './components/CallButton';
-import { CallMessage } from './components/CallMessage';
-import { CallStatus } from './components/CallStatus';
-import { useAppCallStore } from './state/store-app-call';
-
-
-function CallMenuItems(props: {
-  pushToTalk: boolean,
-  setPushToTalk: (pushToTalk: boolean) => void,
-  override: boolean,
-  setOverride: (overridePersonaVoice: boolean) => void,
-}) {
-
-  // external state
-  const { grayUI, toggleGrayUI } = useAppCallStore();
-  const { voicesDropdown } = useElevenLabsVoiceDropdown(false, !props.override);
-
-  const handlePushToTalkToggle = () => props.setPushToTalk(!props.pushToTalk);
-
-  const handleChangeVoiceToggle = () => props.setOverride(!props.override);
-
-  return <OptimaPanelGroup title='Call'>
-
-    <MenuItem onClick={handlePushToTalkToggle}>
-      <ListItemDecorator>{props.pushToTalk ? <MicNoneIcon /> : <MicIcon />}</ListItemDecorator>
-      Push to talk
-      <Switch checked={props.pushToTalk} onChange={handlePushToTalkToggle} sx={{ ml: 'auto' }} />
-    </MenuItem>
-
-    <MenuItem onClick={handleChangeVoiceToggle}>
-      <ListItemDecorator><RecordVoiceOverTwoToneIcon /></ListItemDecorator>
-      Change Voice
-      <Switch checked={props.override} onChange={handleChangeVoiceToggle} sx={{ ml: 'auto' }} />
-    </MenuItem>
-
-    <MenuItem>
-      <ListItemDecorator>{' '}</ListItemDecorator>
-      {voicesDropdown}
-    </MenuItem>
-
-    <ListDivider />
-
-    <MenuItem onClick={toggleGrayUI}>
-      Grayed UI
-      <Switch checked={grayUI} sx={{ ml: 'auto' }} />
-    </MenuItem>
-
-    <MenuItem component={Link} href='https://github.com/enricoros/big-agi/issues/175' target='_blank'>
-      Voice Calls Feedback
-    </MenuItem>
-
-  </OptimaPanelGroup>;
-}
-
-
-export function Telephone(props: {
-  callIntent: AppCallIntent,
-  backToContacts: () => void,
-}) {
-
-  // state
-  const [avatarClickCount, setAvatarClickCount] = React.useState<number>(0);// const [micMuted, setMicMuted] = React.useState(false);
-  const [callElapsedTime, setCallElapsedTime] = React.useState<string>('00:00');
-  const [callMessages, setCallMessages] = React.useState<DMessage[]>([]);
-  const [overridePersonaVoice, setOverridePersonaVoice] = React.useState<boolean>(false);
-  const [personaTextInterim, setPersonaTextInterim] = React.useState<string | null>(null);
-  const [pushToTalk, setPushToTalk] = React.useState(true);
-  const [stage, setStage] = React.useState<'ring' | 'declined' | 'connected' | 'ended'>('ring');
-  const llmDropdownRef = React.useRef<OptimaBarControlMethods>(null);
-  const responseAbortController = React.useRef<AbortController | null>(null);
-
-  // external state
-  const { chatLLMId, chatLLMDropdown } = useChatLLMDropdown(llmDropdownRef);
-  const { chatTitle, reMessages } = useChatStore(useShallow(state => {
-    const conversation = props.callIntent.conversationId
-      ? state.conversations.find(conversation => conversation.id === props.callIntent.conversationId) ?? null
-      : null;
-    return {
-      chatTitle: conversation ? conversationTitle(conversation) : null,
-      reMessages: conversation ? conversation.messages : null,
-    };
-  }));
-  const persona = SystemPurposes[props.callIntent.personaId as SystemPurposeId] ?? undefined;
-  const personaCallStarters = persona?.call?.starters ?? undefined;
-  const personaVoiceId = overridePersonaVoice ? undefined : (persona?.voices?.elevenLabs?.voiceId ?? undefined);
-  const personaSystemMessage = persona?.systemMessage ?? undefined;
-
-  // hooks and speech
-  const [speechInterim, setSpeechInterim] = React.useState<SpeechResult | null>(null);
-  const onSpeechResultCallback = React.useCallback((result: SpeechResult) => {
-    setSpeechInterim(result.done ? null : { ...result });
-    if (result.done) {
-      const userSpeechTranscribed = result.transcript.trim();
-      if (userSpeechTranscribed.length >= 1)
-        setCallMessages(messages => [...messages, createDMessageTextContent('user', userSpeechTranscribed)]); // [state] append user:speech
-    }
-  }, []);
-  const { recognitionState, startRecognition, stopRecognition, toggleRecognition } = useSpeechRecognition('webSpeechApi', onSpeechResultCallback, 1000);
-
-  // derived state
-  const isRinging = stage === 'ring';
-  const isConnected = stage === 'connected';
-  const isDeclined = stage === 'declined';
-  const isEnded = stage === 'ended';
-
-
-  /// Sounds
-
-  // pickup / hangup
-  React.useEffect(() => {
-    !isRinging && AudioPlayer.playUrl(isConnected ? '/sounds/chat-begin.mp3' : '/sounds/chat-end.mp3');
-  }, [isRinging, isConnected]);
-
-  // ringtone
-  usePlayUrl(isRinging ? '/sounds/chat-ringtone.mp3' : null, 300, 2800 * 2);
-
-
-  /// Shortcuts
-
-  useGlobalShortcuts('Telephone', React.useMemo(() => [
-    { key: 'm', ctrl: true, action: toggleRecognition },
-  ], [toggleRecognition]));
-
-  /// CONNECTED
-
-  const handleCallStop = () => {
-    stopRecognition(false);
-    setStage('ended');
-  };
-
-  // [E] pickup -> seed message and call timer
-  // FIXME: Overriding the voice will reset the call - not a desired behavior
-  React.useEffect(() => {
-    if (!isConnected) return;
-
-    // show the call timer
-    setCallElapsedTime('00:00');
-    const start = Date.now();
-    const interval = setInterval(() => {
-      const elapsedSeconds = Math.floor((Date.now() - start) / 1000);
-      const minutes = Math.floor(elapsedSeconds / 60);
-      const seconds = elapsedSeconds % 60;
-      setCallElapsedTime(`${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`);
-    }, 1000);
-
-    // seed the first message
-    const phoneMessages = personaCallStarters || ['Hello?', 'Hey!'];
-    const firstMessage = phoneMessages[Math.floor(Math.random() * phoneMessages.length)];
-
-    setCallMessages([createDMessageTextContent('assistant', firstMessage)]); // [state] set assistant:hello message
-
-    // fire/forget
-    void elevenLabsSpeakText(firstMessage, personaVoiceId, true, true);
-
-    return () => clearInterval(interval);
-  }, [isConnected, personaCallStarters, personaVoiceId]);
-
-  // [E] persona streaming response - upon new user message
-  React.useEffect(() => {
-    // only act when we have a new user message
-    if (!isConnected || callMessages.length < 1)
-      return;
-
-    // Voice commands
-    const lastUserMessage = callMessages[callMessages.length - 1];
-    if (lastUserMessage.role !== 'user')
-      return;
-    switch (messageFragmentsReduceText(lastUserMessage.fragments)) {
-      // do not respond
-      case 'Stop.':
-        return;
-
-      // command: close the call
-      case 'Goodbye.':
-        setStage('ended');
-        setTimeout(launchAppChat, 2000);
-        return;
-
-      // command: regenerate answer
-      case 'Retry.':
-      case 'Try again.':
-        setCallMessages(messages => messages.slice(0, messages.length - 2));
-        return;
-
-      // command: restart chat
-      case 'Restart.':
-        setCallMessages([]);
-        return;
-    }
-
-    // bail if no llm selected
-    if (!chatLLMId) return;
-
-
-    // Call Message Generation Prompt
-    const callSystemInstruction = createDMessageTextContent('system', 'You are having a phone call. Your response style is brief and to the point, and according to your personality, defined below.');
-    const reMessagesRemapSysToUsr = remapMessagesSysToUsr(reMessages);
-    const callGenerationInputHistory: DMessage[] = [
-      // Chat messages, including the system prompt which is casted to a user message
-      // TODO: when upgrading to dynamic personas, we need to inject the persona message instead - not rely on reMessages, as messages[0] !== 'system'
-      ...(reMessagesRemapSysToUsr ? reMessagesRemapSysToUsr : [createDMessageTextContent('user', personaSystemMessage)]),
-      // Call system prompt 2, to indicate the call has started
-      createDMessageTextContent('user', '**You are now on the phone call related to the chat above**.\nRespect your personality and answer with short, friendly and accurate thoughtful brief lines.'),
-      // Call history
-      ...callMessages,
-    ];
-
-
-    // perform completion
-    responseAbortController.current = new AbortController();
-    let finalText = '';
-    setPersonaTextInterim('💭...');
-
-    aixChatGenerateContent_DMessage_FromConversation(
-      chatLLMId,
-      callSystemInstruction,
-      callGenerationInputHistory,
-      'call',
-      callMessages[0].id,
-      { abortSignal: responseAbortController.current.signal },
-      (update: AixChatGenerateContent_DMessage, _isDone: boolean) => {
-        const updatedText = messageFragmentsReduceText(update.fragments).trim();
-        if (updatedText)
-          setPersonaTextInterim(finalText = updatedText);
-      },
-    ).then((status) => {
-
-      // whether status.outcome === 'success' or not, we get a valid DMessage, eventually with Error Fragments inside
-      const fullMessage = createDMessageFromFragments('assistant', status.lastDMessage.fragments);
-      fullMessage.generator = status.lastDMessage.generator;
-      setCallMessages(messages => [...messages, fullMessage]); // [state] append assistant:call_response
-
-      // fire/forget
-      if (status.outcome === 'success' && finalText?.length >= 1)
-        void elevenLabsSpeakText(finalText, personaVoiceId, true, true);
-
-    }).catch((err: DOMException) => {
-      if (err?.name !== 'AbortError') {
-        // create an error message to explain the exception
-        const errorMesage = createDMessageFromFragments('assistant', [createErrorContentFragment(err.message || err.toString())]);
-        setCallMessages(messages => [...messages, errorMesage]); // [state] append assistant:call_response-ERROR
-      }
-    }).finally(() => {
-      setPersonaTextInterim(null);
-    });
-
-    return () => {
-      responseAbortController.current?.abort();
-      responseAbortController.current = null;
-    };
-  }, [isConnected, callMessages, chatLLMId, personaVoiceId, personaSystemMessage, reMessages]);
-
-  // [E] Message interrupter
-  const abortTrigger = isConnected && recognitionState.hasSpeech;
-  React.useEffect(() => {
-    if (abortTrigger && responseAbortController.current) {
-      responseAbortController.current.abort();
-      responseAbortController.current = null;
-    }
-    // TODO.. abort current speech
-  }, [abortTrigger]);
-
-
-  // [E] continuous speech recognition (reload)
-  const shouldStartRecording = isConnected && !pushToTalk && speechInterim === null && !recognitionState.hasAudio;
-  React.useEffect(() => {
-    if (shouldStartRecording)
-      startRecognition();
-  }, [shouldStartRecording, startRecognition]);
-
-
-  // more derived state
-  const personaName = persona?.title ?? 'Unknown';
-  const isMicEnabled = recognitionState.isAvailable;
-  const isTTSEnabled = true;
-  const isEnabled = isMicEnabled && isTTSEnabled;
-
-
-  // pluggable UI
-
-  const menuItems = React.useMemo(() =>
-      <CallMenuItems
-        pushToTalk={pushToTalk} setPushToTalk={setPushToTalk}
-        override={overridePersonaVoice} setOverride={setOverridePersonaVoice} />
-    , [overridePersonaVoice, pushToTalk],
-  );
-
-  useSetOptimaAppMenu(menuItems, 'CallUI-Call');
-
-
-  return <>
-    <OptimaToolbarIn>{chatLLMDropdown}</OptimaToolbarIn>
-
-    <Typography
-      level='h1'
-      sx={{
-        fontSize: { xs: '2.5rem', md: '3rem' },
-        textAlign: 'center',
-        mx: 2,
-      }}
-    >
-      {isConnected ? personaName : 'Hello'}
-    </Typography>
-
-    <CallAvatar
-      symbol={persona?.symbol || '?'}
-      imageUrl={persona?.imageUri}
-      isRinging={isRinging}
-      onClick={() => setAvatarClickCount(avatarClickCount + 1)}
-    />
-
-    <CallStatus
-      callerName={isConnected ? undefined : personaName}
-      statusText={isRinging ? '' /*'is calling you'*/ : isDeclined ? 'call declined' : isEnded ? 'call ended' : callElapsedTime}
-      regardingText={chatTitle}
-      micError={!isMicEnabled} speakError={!isTTSEnabled}
-    />
-
-    {/* Live Transcript, w/ streaming messages, audio indication, etc. */}
-    {(isConnected || isEnded) && (
-      <Card variant='outlined' sx={{
-        flexGrow: 1,
-        maxHeight: '28%',
-        minHeight: '20%',
-        width: '100%',
-
-        // style
-        // backgroundColor: 'background.surface',
-        borderRadius: 'lg',
-        // boxShadow: 'sm',
-
-        // children
-        padding: 0, // move this to the ScrollToBottom component
-      }}>
-
-        <ScrollToBottom stickToBottomInitial>
-
-          <Box sx={{ minHeight: '100%', p: 1, display: 'flex', flexDirection: 'column', gap: 1 }}>
-
-            {/* Call Messages [] */}
-            {callMessages.map((message) =>
-              <CallMessage
-                key={message.id}
-                text={messageFragmentsReduceText(message.fragments)}
-                variant={message.role === 'assistant' ? 'solid' : 'soft'}
-                color={message.role === 'assistant' ? 'neutral' : 'primary'}
-                role={message.role}
-              />,
-            )}
-
-            {/* Persona streaming text... */}
-            {!!personaTextInterim && (
-              <CallMessage
-                text={personaTextInterim}
-                variant='outlined'
-                color='neutral'
-                role='assistant'
-              />
-            )}
-
-            {/* Listening... */}
-            {recognitionState.isActive && (
-              <CallMessage
-                text={<>{speechInterim?.transcript.trim() || null}{speechInterim?.interimTranscript.trim() ? <i> {speechInterim.interimTranscript}</i> : null}</>}
-                variant={(recognitionState.hasSpeech || !!speechInterim?.transcript) ? 'soft' : 'outlined'}
-                color='primary'
-                role='user'
-              />
-            )}
-
-          </Box>
-
-          {/* Visibility and actions are handled via Context */}
-          <ScrollToBottomButton />
-
-        </ScrollToBottom>
-      </Card>
-    )}
-
-    {/* Call Buttons */}
-    <Box sx={{ width: '100%', display: 'flex', justifyContent: 'space-evenly', gap: 4 }}>
-
-      {/* [ringing] Decline / Accept */}
-      {isRinging && <CallButton Icon={CallEndIcon} text='Decline' color='danger' variant='solid' onClick={() => setStage('declined')} />}
-      {isRinging && isEnabled && <CallButton Icon={CallIcon} text='Accept' color='success' variant='solid' onClick={() => setStage('connected')} />}
-
-      {/* [Calling] Hang / PTT (mute not enabled yet) */}
-      {isConnected && <CallButton Icon={CallEndIcon} text='Hang up' color='danger' variant='soft' onClick={handleCallStop} />}
-      {isConnected && (pushToTalk ? (
-          <CallButton
-            Icon={MicIcon} onClick={toggleRecognition}
-            text={recognitionState.hasSpeech ? 'Listening...' : recognitionState.isActive ? 'Listening' : 'Push To Talk'}
-            variant={recognitionState.hasSpeech ? 'solid' : recognitionState.isActive ? 'soft' : 'outlined'}
-            color='primary'
-            sx={!recognitionState.isActive ? { backgroundColor: 'background.surface' } : undefined}
-          />
-        ) : null
-        // <CallButton disabled={true} Icon={MicOffIcon} onClick={() => setMicMuted(muted => !muted)}
-        //               text={micMuted ? 'Muted' : 'Mute'}
-        //               color={micMuted ? 'warning' : undefined} variant={micMuted ? 'solid' : 'outlined'} />
-      )}
-
-      {/* [ended] Back / Call Again */}
-      {(isEnded || isDeclined) && <CallButton Icon={ArrowBackIcon} text='Back' variant='soft' onClick={() => props.callIntent.backTo === 'app-chat' ? navigateToIndex() : props.backToContacts()} />}
-      {(isEnded || isDeclined) && <CallButton Icon={CallIcon} text='Call Again' color='success' variant='soft' onClick={() => setStage('connected')} />}
-
-    </Box>
-
-    {/* DEBUG state */}
-    {avatarClickCount > 10 && (avatarClickCount % 2 === 0) && (
-      <Card variant='outlined' sx={{ maxHeight: '25dvh', fontSize: 'sm', overflow: 'auto', whiteSpace: 'pre', py: 0, width: '100%' }}>
-        Special commands: Stop, Retry, Try Again, Restart, Goodbye.<br />
-        {JSON.stringify({ ...recognitionState, speechInterim }, null, 2)}
-      </Card>
-    )}
-
-    {/*{isEnded && <Card variant='solid' size='lg' color='primary'>*/}
-    {/*  <CardContent>*/}
-    {/*    <Typography>*/}
-    {/*      Please rate the call quality, 1 to 5 - Just a Joke*/}
-    {/*    </Typography>*/}
-    {/*  </CardContent>*/}
-    {/*</Card>}*/}
-
-  </>;
-}
@@ -1,20 +1,32 @@
 import * as React from 'react';
+import { keyframes } from '@emotion/react';

 import { Avatar, Box } from '@mui/joy';

-import { animationScalePulse } from '~/common/util/animUtils';
+
+const cssScaleKeyframes = keyframes`
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.2);
+    }
+    100% {
+        transform: scale(1);
+    }`;


-export function CallAvatar(props: { symbol: string, imageUrl?: string, isRinging?: boolean, onClick: () => void }) {
+export function CallAvatar(props: { symbol: string, imageUrl?: string, isRinging: boolean, onClick: () => void }) {
  return (
    <Avatar
+      variant='soft' color='neutral'
      onClick={props.onClick}
      src={props.imageUrl}
      sx={{
-        '--Avatar-size': { xs: '10rem', md: '11.5rem' },
-        backgroundColor: 'background.popup',
-        boxShadow: !props.imageUrl ? 'sm' : null,
-        fontSize: { xs: '6rem', md: '7rem' },
+        '--Avatar-size': { xs: '160px', md: '200px' },
+        '--variant-borderWidth': '4px',
+        boxShadow: !props.imageUrl ? 'md' : null,
+        fontSize: { xs: '100px', md: '120px' },
      }}
    >

@@ -23,7 +35,7 @@ export function CallAvatar(props: { symbol: string, imageUrl?: string, isRinging
        <Box
          sx={{
            ...(props.isRinging
-              ? { animation: `${animationScalePulse} 1.4s ease-in-out infinite` }
+              ? { animation: `${cssScaleKeyframes} 1.4s ease-in-out infinite` }
              : {}),
          }}
        >
@@ -1,7 +1,6 @@
 import * as React from 'react';

-import { ColorPaletteProp, FormControl, IconButton, Typography, VariantProp } from '@mui/joy';
-import { SxProps } from '@mui/joy/styles/types';
+import { Box, ColorPaletteProp, IconButton, Typography, VariantProp } from '@mui/joy';


 /**
@@ -15,10 +14,9 @@ export function CallButton(props: {
  Icon: React.FC, text: string,
  variant?: VariantProp, color?: ColorPaletteProp, disabled?: boolean,
  onClick?: () => void,
-  sx?: SxProps,
 }) {
  return (
-    <FormControl
+    <Box
      onClick={() => !props.disabled && props.onClick?.()}
      sx={{
        display: 'flex', flexDirection: 'column', alignItems: 'center',
@@ -27,23 +25,19 @@ export function CallButton(props: {
    >

      <IconButton
-        aria-label={props.text}
-        variant={props.variant || 'solid'} color={props.color}
-        disabled={props.disabled}
+        disabled={props.disabled} variant={props.variant || 'solid'} color={props.color}
        sx={{
          '--IconButton-size': { xs: '4.2rem', md: '5rem' },
          borderRadius: '50%',
          // boxShadow: 'lg',
-          ...props.sx,
-        }}
-      >
+        }}>
        <props.Icon />
      </IconButton>

-      <Typography aria-hidden level='title-md' variant={props.disabled ? 'soft' : undefined}>
+      <Typography level='title-md' variant={props.disabled ? 'soft' : undefined}>
        {props.text}
      </Typography>

-    </FormControl>
+    </Box>
  );
 }
@@ -1,33 +1,27 @@
 import * as React from 'react';

 import { Chip, ColorPaletteProp, VariantProp } from '@mui/joy';
-import { SxProps } from '@mui/joy/styles/types';
+import { SxProps } from '@mui/system';

-import type { DMessage } from '~/common/stores/chat/chat.message';
+import { VChatMessageIn } from '~/modules/llms/transports/chatGenerate';


 export function CallMessage(props: {
  text?: string | React.JSX.Element,
  variant?: VariantProp, color?: ColorPaletteProp,
-  role: DMessage['role'],
+  role: VChatMessageIn['role'],
  sx?: SxProps,
 }) {
-  const isUserMessage = props.role === 'user';
  return (
    <Chip
      color={props.color} variant={props.variant}
      sx={{
-        alignSelf: isUserMessage ? 'end' : 'start',
+        alignSelf: props.role === 'user' ? 'end' : 'start',
        whiteSpace: 'break-spaces',
        borderRadius: 'lg',
-        ...(isUserMessage ? {
-          borderBottomRightRadius: 0,
-        } : {
-          borderBottomLeftRadius: 0,
-        }),
+        mt: 'auto',
        // boxShadow: 'md',
        py: 1,
-        px: 1.5,
        ...(props.sx || {}),
      }}
    >
--- a/Show More
+++ b/Show More