ChatDrawer: virtualize scroll (for very numerous chats)

fix(gemini): fix FormHelperText for safety settings visibility

.dockerignore

@@ -1,7 +1,12 @@
 # big-AGI non-code files
 /docs/
+/dist/
 README.md
 
+# Ignore build and log files
+Dockerfile
+/.dockerignore
+
 # Node build artifacts
 /node_modules
 /.pnp

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,25 +0,0 @@
----
-name: Bug report
-about: Omg what's happening?
-title: "[BUG]"
-labels: ''
-assignees: ''
-
----
-
-**Describe the bug**
-A clear and concise description of what the bug is.
-
-Where is it happening?
- - Which device [Mobile/Desktop, os version]:
- - Which browser:
- - Which website:
-
-**To Reproduce**
-Steps to reproduce the behavior:
-
-**Expected behavior**
-A clear and concise description of what you expected to happen.
-
-**Screenshots / context**
-If applicable, please add screenshots or additional context

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,32 @@
+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.'

.github/ISSUE_TEMPLATE/maintainers-release.md

@@ -7,27 +7,126 @@ assignees: enricoros
 
 ---
 
-Release checklist:
+## 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', and commit:
+  - [ ] 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 in-app News [src/apps/news/news.data.tsx](src/apps/news/news.data.tsx)
   - [ ] Update the in-app News version number
-  - [ ] Update the readme with the new release
-  - [ ] Copy the highlights to the [changelog](docs/changelog.md)
+  - [ ] 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
+  - [ ] 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
-  - create a GitHub release
-    - [ ] name it 'vX.Y.Z'
-    - [ ] copy the release notes and link appropriate artifacts
+  - [ ] 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.
+```

.github/ISSUE_TEMPLATE/roadmap-request.md

@@ -8,10 +8,11 @@ assignees: ''
 ---
 
 **Why**
-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
+(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
 
-**Concise description**
-A clear and concise description of what you want to happen.
+**Description**
+Clear and concise description of what you want to happen.
 
 **Requirements**
-If you can, please detail the changes you expect in UX, user workflows, technology, architecture (if not, the reviewers will do it for you)
+If you can, Please break-down the changes use cases, UX, technology, architecture, etc.
+- [ ] ...

.github/workflows/docker-image.yml

@@ -7,11 +7,16 @@
 # 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 a Docker image
+name: Create and publish Docker images
 
 on:
   push:
-    branches: ['main']
+    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)
 
 env:
   REGISTRY: ghcr.io
@@ -23,13 +28,22 @@ jobs:
     permissions:
       contents: read
       packages: write
+      security-events: write
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        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
 
       - name: Log in to the Container registry
-        uses: docker/login-action@65b78e6e13532edd9afa3aa52ac7964289d1a9c1
+        uses: docker/login-action@v3
         with:
           registry: ${{ env.REGISTRY }}
           username: ${{ github.actor }}
@@ -37,14 +51,35 @@ jobs:
 
       - name: Extract metadata (tags, labels) for Docker
         id: meta
-        uses: docker/metadata-action@9ec57ed1fcdbf14dcef7dfbe97b2010124a938b7
+        uses: docker/metadata-action@v5
         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@f2a1d5e99d037542a71f64918e516c093c6f3fc4
+        uses: docker/build-push-action@v6
         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

.gitignore

@@ -1,5 +1,12 @@
 # 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
@@ -10,6 +17,7 @@
 
 # next.js
 /.next/
+/dist/
 /out/
 
 # production
@@ -37,4 +45,11 @@ yarn-error.log*
 next-env.d.ts
 
 # other
-.idea/
+.idea/
+
+# Ingore k8s/env-secret.yaml
+./k8s/env-secret.yaml
+/certificates
+.env*.local
+/.run/dev (ENV).run.xml
+/src/modules/3rdparty/aider/scratch*

Dockerfile

@@ -1,5 +1,5 @@
 # Base
-FROM node:18-alpine AS base
+FROM node:22-alpine AS base
 ENV NEXT_TELEMETRY_DISABLED 1
 
 # Dependencies
@@ -8,16 +8,24 @@ WORKDIR /app
 
 # Dependency files
 COPY package*.json ./
-COPY prisma ./prisma
+COPY src/server/prisma ./src/server/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"'
 
 # 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 . .
@@ -29,6 +37,7 @@ RUN npm run build
 # Reduce installed packages to production-only
 RUN npm prune --production
 
+
 # Runner
 FROM base AS runner
 WORKDIR /app
@@ -38,9 +47,10 @@ 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/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
@@ -53,4 +63,4 @@ USER nextjs
 EXPOSE 3000
 
 # Start the application
-CMD ["next", "start"]
+CMD ["next", "start"]

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Enrico Ros
+Copyright (c) 2023-2024 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

README.md

@@ -1,133 +1,244 @@
 # BIG-AGI 🧠✨
 
-Welcome to big-AGI 👋, the GPT application for Pro users that combines utility,
-simplicity, and speed. Powered by the latest models from 7 vendors, including
-open-source, `big-AGI` offers best-in-class Voice and Chat with AI Personas,
-visualizations, coding, drawing, calling, and quite more -- all in a polished UX.
+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.
 
-Pros use big-AGI. 🚀 Developers love big-AGI. 🤖
+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)
+
 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,OPENAI_API_HOST&envDescription=OpenAI%20KEY%20for%20your%20deployment.%20Set%20HOST%20only%20if%20non-default.)
+[![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)
 
-## 🗺️ Explore the Roadmap
+### New Version
 
-The development of big-AGI is an open book. Our **[public roadmap](https://github.com/users/enricoros/projects/4/views/2)** is
-live, providing a detailed look at the current and future development of the application.
+This repository contains two main versions:
 
-- Got a suggestion? [_Add your roadmap ideas_](https://github.com/enricoros/big-agi/issues/new?&template=roadmap-request.md)
-- Want to contribute? [_Pick up a task!_](https://github.com/users/enricoros/projects/4/views/4) - _easy_ to _pro_
+- 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
 
-### What's New in 1.5.0 🌟
+Note: After the V2 release in Q4, `v2-dev` will become the default branch and `v1-dev` will reach EOL.
 
-- **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
+### Quick links: 👉 [roadmap](https://github.com/users/enricoros/projects/4/views/2) 👉 [installation](docs/installation.md) 👉 [documentation](docs/README.md)
 
-Check out the [big-AGI open roadmap](https://github.com/users/enricoros/projects/4/views/2), or
-the [past releases changelog](docs/changelog.md).
+### What's New in 1.16.1...1.16.8 · Sep 13, 2024 (patch releases)
 
-## ✨ Key Features 👊
+- 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
 
-![Ask away, paste a ton, copy the gems](docs/pixels/big-AGI-compo1.png)
-[More](docs/pixels/big-AGI-compo2b.png), [screenshots](docs/pixels).
+### What's New in 1.16.0 · May 9, 2024 · Crystal Clear
 
-- **AI Personas**: Tailor your AI interactions with customizable personas
-- **Sleek UI/UX**: A smooth, intuitive, and mobile-responsive interface
-- **Efficient Interaction**: Voice commands, OCR, and drag-and-drop file uploads
-- **Multiple AI Models**: Choose from a variety of leading AI providers
-- **Privacy First**: Self-host and use your own API keys for full control
-- **Advanced Tools**: Execute code, import PDFs, and summarize documents
-- **Seamless Integrations**: Enhance functionality with various third-party services
-- **Open Roadmap**: Contribute to the progress of big-AGI
+- [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)
 
-## 💖 Support
+#### 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!
 
 [//]: # ([![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)
 
-* 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)
+- [ ] 📢️ [**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)
 
 <br/>
 
-## 🧩 Develop
+[//]: # ([![GitHub stars]&#40;https://img.shields.io/github/stars/enricoros/big-agi&#41;]&#40;https://github.com/enricoros/big-agi/stargazers&#41;)
 
-![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)
+[//]: # ([![GitHub forks]&#40;https://img.shields.io/github/forks/enricoros/big-agi&#41;]&#40;https://github.com/enricoros/big-agi/network&#41;)
 
-Clone this repo, install the dependencies, and run the development server:
+[//]: # ([![GitHub pull requests]&#40;https://img.shields.io/github/issues-pr/enricoros/big-agi&#41;]&#40;https://github.com/enricoros/big-agi/pulls&#41;)
 
-```bash
-git clone https://github.com/enricoros/big-agi.git
-cd big-agi
-npm install
-npm run dev
-```
+[//]: # ([![License]&#40;https://img.shields.io/github/license/enricoros/big-agi&#41;]&#40;https://github.com/enricoros/big-agi/LICENSE&#41;)
 
-The app will be running on `http://localhost:3000`
+## 📜 Licensing
 
-Integrations:
+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).
 
-* Local models: Ollama, Oobabooga, LocalAi, etc.
-* [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).
-
-Build and run:
-
-```bash
-docker build -t big-agi .
-docker run -d -p 3000:3000 big-agi
-``` 
-
-Or run the official container:
-
-- manually: `docker run -d -p 3000:3000 ghcr.io/enricoros/big-agi`
-- or, with docker-compose: `docker-compose up`
-
-## ☁️ Deploy on Cloudflare Pages
-
-Please refer to the [Cloudflare deployment documentation](docs/deploy-cloudflare.md).
-
-## 🚀 Deploy on 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 💙
+2023-2024 · Enrico Ros x [Big-AGI](https://big-agi.com) · Like this project? Leave a star! 💫⭐

app/api/cloud/[trpc]/route.ts

@@ -0,0 +1,24 @@
+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 };

app/api/edge/[trpc]/route.ts

@@ -0,0 +1,18 @@
+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 };

app/api/elevenlabs/speech/route.ts

@@ -1,52 +0,0 @@
-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 };

app/api/llms/stream/route.ts

@@ -1,2 +0,0 @@
-export const runtime = 'edge';
-export { openaiStreamingRelayHandler as POST } from '~/modules/llms/transports/server/openai/openai.streaming';

app/api/trpc-edge/[trpc]/route.ts

@@ -1,19 +0,0 @@
-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 };

app/api/trpc-node/[trpc]/route.ts

@@ -1,19 +0,0 @@
-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 };

docker-compose.yaml

@@ -1,8 +1,12 @@
+# 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:main
+    image: ghcr.io/enricoros/big-agi:latest
     ports:
       - "3000:3000"
     env_file:

docs/2024-AI-APIs-Comparison.md

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

docs/README.md

@@ -0,0 +1,62 @@
+# 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.

docs/changelog.md

@@ -2,10 +2,156 @@
 
 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)
 
+- For the live roadmap, please see [the GitHub project](https://github.com/users/enricoros/projects/4/views/2)
 
-### ✨ What's New in 1.5.0 👊 - Nov 19, 2023
+### 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
@@ -17,6 +163,17 @@ by release.
 - **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
@@ -30,9 +187,8 @@ by release.
 - **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
+- **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
@@ -60,7 +216,7 @@ by release.
 - **[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)
+- **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

docs/config-azure-openai.md

@@ -20,6 +20,9 @@ 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

docs/config-feature-browse.md

@@ -0,0 +1,118 @@
+# 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))

docs/config-local-lmstudio.md

@@ -0,0 +1,54 @@
+# 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/)

docs/config-local-localai.md

@@ -1,34 +1,64 @@
-# Local LLM integration with `localai`
+# Run your models with `LocalAI` x `big-AGI`
 
-Integrate local Large Language Models (LLMs) with [LocalAI](https://localai.io).
+[LocalAI](https://localai.io) lets you run your AI models locally, or in the cloud. It supports text, image, asr, speech, and more models.
 
-_Last updated Nov 7, 2023_
+We are deepening the integration between the two products. As of the time of writing, we integrate the following features:
 
-## Instructions
+- ✅ [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
 
 ### LocalAI installation and configuration
 
 Follow the guide at: https://localai.io/basics/getting_started/
 
-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):
+- 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.
 
-- 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
+### Integration: chat with LocalAI
 
 - Go to Models > Add a model source of type: **LocalAI**
-- 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
+- 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
 
-> 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.
+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)

docs/config-local-ollama.md

@@ -5,31 +5,49 @@ 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**: 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.
+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
 
-### Ollama: installation and Setup
+In addition to using the UI, configuration can also be done using
+[environment variables](environment-variables.md).
 
-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).
+**Visual Configuration Guide**:
 
-### Visual Guide
+* 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">
 
-* 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;">
+* 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">
 
-* 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;">
+* 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">
 
-* 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;">
+<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/>
 
 ### Advanced: Model parameters
 
@@ -54,20 +72,27 @@ Then, edit the nginx configuration file `/etc/nginx/sites-enabled/default` and a
 
 ```nginx
     location /ollama/ {
-        proxy_pass http://localhost:11434;
+        proxy_pass http://127.0.0.1:11434/;
+
+        # Disable buffering for the streaming responses (SSE)
+        proxy_set_header Connection '';
         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;
-        
-        # Disable buffering for the streaming responses
+        chunked_transfer_encoding off;
         proxy_buffering off;
+        proxy_cache off;
+        
+        # Longer timeouts (1hr)
+        keepalive_timeout 3600;
+        proxy_read_timeout 3600;
+        proxy_connect_timeout 3600;
+        proxy_send_timeout 3600;
     }
 ```
 
 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:
@@ -78,4 +103,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!

docs/config-local-oobabooga.md

@@ -1,54 +0,0 @@
-# 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`!

docs/config-openrouter.md

@@ -22,6 +22,9 @@ 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.

docs/customizations.md

@@ -0,0 +1,91 @@
+# 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.

docs/deploy-analytics.md

@@ -0,0 +1,63 @@
+# 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.

docs/deploy-authentication.md

@@ -0,0 +1,45 @@
+# 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.)

docs/deploy-cloudflare.md

@@ -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/trpc-node/[trpc]/route.ts && npx @cloudflare/next-on-pages@1`
+    - `rm app/api/cloud/[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

docs/deploy-database.md

@@ -0,0 +1,66 @@
+**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)

docs/deploy-docker.md

@@ -9,7 +9,7 @@ Docker ensures faster development cycles, easier collaboration, and seamless env
    ```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 .
@@ -21,33 +21,23 @@ Docker ensures faster development cycles, easier collaboration, and seamless env
    ```
 4. Browse to [http://localhost:3000](http://localhost:3000)
 
-## Documentation
+<br/>
 
-The big-AGI repository includes a Dockerfile and a GitHub Actions workflow for building and publishing a
-Docker image of the application.
+## Run Official Containers 📦
 
-### Dockerfile
+`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 [`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.
+### Official Images: [ghcr.io/enricoros/big-agi](https://github.com/enricoros/big-agi/pkgs/container/big-agi)
 
-### Official container images
+#### Run using *docker* 🚀
 
-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.
-
-Official pre-built containers: [ghcr.io/enricoros/big-agi](https://github.com/enricoros/big-agi/pkgs/container/big-agi)
-
-Run official pre-built containers:
 ```bash
-docker run -d -p 3000:3000 ghcr.io/enricoros/big-agi
+docker run -d -p 3000:3000 ghcr.io/enricoros/big-agi:latest
 ```
 
-### Run official containers
-
-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.
+#### Run using *docker-compose* 🚀
 
 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
@@ -57,4 +47,42 @@ update the image to the latest version, you can run `docker-compose pull` before
 docker-compose up -d
 ```
 
-Leverage Docker's capabilities for a reliable and efficient big-AGI deployment.
+### 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!

docs/deploy-k8s.md

@@ -0,0 +1,85 @@
+# 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.

docs/deploy-reverse-proxy.md

@@ -0,0 +1,58 @@
+# 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).

docs/docker/docker-compose-browserless.yaml

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

docs/draft-big-agi.md

@@ -0,0 +1,14 @@
+# 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
+- [ ] ...

docs/environment-variables.md

@@ -9,17 +9,16 @@ which take place over _defaults_. This file is kept in sync with [`../src/server
 
 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
+# Database (Postgres)
 POSTGRES_PRISMA_URL=
 POSTGRES_URL_NON_POOLING=
 
+# Database (MongoDB)
+MDB_URI=
+
 # LLMs
 OPENAI_API_KEY=
 OPENAI_API_HOST=
@@ -28,56 +27,85 @@ 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=
 
-# Text-To-Speech
+# Browse
+PUPPETEER_WSS_ENDPOINT=
+
+# Search
+GOOGLE_CLOUD_API_KEY=
+GOOGLE_CSE_ID=
+
+# Text-To-Speech: ElevenLabs
 ELEVENLABS_API_KEY=
 ELEVENLABS_API_HOST=
 ELEVENLABS_VOICE_ID=
-# Text-To-Image
+# Text-To-Image: Prodia
 PRODIA_API_KEY=
-# Google Custom Search
-GOOGLE_CLOUD_API_KEY=
-GOOGLE_CSE_ID=
+
+# 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=
 ```
 
-## Variables Documentation
+## 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.
 
 ### Database
 
-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.
+To enable Chat Link Sharing, you need to connect the backend to a database. We currently support Postgres and MongoDB.
 
-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                                                                                                                |
+For Database configuration see [deploy-database.md](deploy-database.md).
 
 ### 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 [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                                                          |
+| 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                                                          |
 
-### Model Observability: Helicone
+### LLM Observability: Helicone
 
 Helicone provides observability to your LLM calls. It is a paid service, with a generous free tier.
 It is currently supported for:
@@ -89,23 +117,40 @@ It is currently supported for:
 |--------------------|--------------------------|
 | `HELICONE_API_KEY` | The API key for Helicone |
 
-### Specials
+### Features
 
 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                                                                                         |
-| **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 ...'                                                                               |
+| 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.
 
 ---
 
-
-
+For a higher level overview of backend code and environment customization,
+see the [big-AGI Customization](customizations.md) guide.

docs/help-advanced-tricks.md

@@ -0,0 +1,42 @@
+# 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.

docs/help-feature-livefile.md

@@ -0,0 +1,167 @@
+# 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.

docs/help-feature-microphone.md

@@ -0,0 +1,141 @@
+# 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.

docs/installation.md

@@ -0,0 +1,156 @@
+# 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).

docs/k8s/big-agi-deployment.yaml

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

docs/k8s/env-secret.yaml

@@ -0,0 +1,49 @@
+---
+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: ""

docs/use-chat-react.md

@@ -0,0 +1,43 @@
+# 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.

middleware_BASIC_AUTH.ts

@@ -0,0 +1,59 @@
+/**
+ * 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..
+  ],
+};

next.config.mjs

@@ -1,15 +1,40 @@
+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,
 
-  // Note: disabled to chech whether the project becomes slower with this
-  // modularizeImports: {
-  //   '@mui/icons-material': {
-  //     transform: '@mui/icons-material/{{member}}',
-  //   },
-  // },
+  // [exports] https://nextjs.org/docs/advanced-features/static-html-export
+  ...buildType && {
+    output: buildType,
+    distDir: 'dist',
 
-  webpack: (config, _options) => {
+    // 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';
 
@@ -19,8 +44,32 @@ let nextConfig = {
       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.

package.json

@@ -1,70 +1,111 @@
 {
   "name": "big-agi",
-  "version": "1.5.0",
+  "version": "1.91.0",
   "private": true,
+  "author": "Enrico Ros <enrico.ros@gmail.com>",
+  "repository": "https://github.com/enricoros/big-agi",
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbopack",
+    "dev-debug": "cross-env NODE_OPTIONS='--inspect' next dev",
+    "dev-https": "next dev --experimental-https",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "env:pull": "npx vercel env pull .env.development.local",
-    "postinstall": "prisma generate",
+    "postinstall": "prisma generate --no-hints",
     "db:push": "prisma db push",
-    "db:studio": "prisma studio"
+    "db:studio": "prisma studio",
+    "vercel:env:pull": "npx vercel env pull .env.development.local"
+  },
+  "prisma": {
+    "schema": "src/server/prisma/schema.prisma"
   },
   "dependencies": {
-    "@dqbd/tiktoken": "^1.0.7",
-    "@emotion/cache": "^11.11.0",
-    "@emotion/react": "^11.11.1",
+    "@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",
     "@emotion/server": "^11.11.0",
-    "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.14.16",
-    "@mui/joy": "^5.0.0-beta.15",
-    "@next/bundle-analyzer": "^14.0.3",
-    "@prisma/client": "^5.6.0",
-    "@sanity/diff-match-patch": "^3.1.1",
-    "@t3-oss/env-nextjs": "^0.7.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",
+    "@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",
     "browser-fs-access": "^0.35.0",
-    "eventsource-parser": "^1.1.1",
+    "cheerio": "^1.0.0",
+    "dexie": "^4.0.10",
+    "dexie-react-hooks": "^1.1.7",
+    "diff": "^7.0.0",
+    "eventsource-parser": "^3.0.0",
     "idb-keyval": "^6.2.1",
-    "next": "^14.0.3",
-    "pdfjs-dist": "4.0.189",
+    "mammoth": "^1.9.0",
+    "nanoid": "^5.0.9",
+    "next": "^15.1.4",
+    "nprogress": "^0.2.0",
+    "pdfjs-dist": "4.10.38",
     "plantuml-encoder": "^1.4.0",
     "prismjs": "^1.29.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-csv": "^2.2.2",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.54.2",
     "react-katex": "^3.0.1",
-    "react-markdown": "^9.0.0",
+    "react-markdown": "^9.0.3",
+    "react-player": "^2.16.0",
+    "react-resizable-panels": "^2.1.7",
     "react-timeago": "^7.2.0",
+    "rehype-katex": "^7.0.1",
     "remark-gfm": "^4.0.0",
-    "superjson": "^2.2.1",
-    "tesseract.js": "^5.0.3",
-    "uuid": "^9.0.1",
-    "zod": "^3.22.4",
-    "zustand": "~4.3.9"
+    "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"
   },
   "devDependencies": {
-    "@types/node": "^20.9.2",
+    "@types/diff": "^7.0.0",
+    "@types/node": "^22.10.5",
+    "@types/nprogress": "^0.2.3",
     "@types/plantuml-encoder": "^1.4.2",
-    "@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",
-    "eslint": "^8.54.0",
-    "eslint-config-next": "^14.0.3",
-    "prettier": "^3.1.0",
-    "prisma": "^5.6.0",
-    "typescript": "^5.2.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"
   },
   "engines": {
-    "node": "^20.0.0 || ^18.0.0"
+    "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"
   }
 }

pages/_app.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import Head from 'next/head';
 import { MyAppProps } from 'next/app';
-import { Analytics as VercelAnalytics } from '@vercel/analytics/react';
+import { Analytics as VercelAnalytics } from '@vercel/analytics/next';
+import { SpeedInsights as VercelSpeedInsights } from '@vercel/speed-insights/next';
 
 import { Brand } from '~/common/app.config';
 import { apiQuery } from '~/common/util/trpc.client';
@@ -9,14 +10,28 @@ import { apiQuery } from '~/common/util/trpc.client';
 import 'katex/dist/katex.min.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 { ProviderBackend } from '~/common/state/ProviderBackend';
-import { ProviderTRPCQueryClient } from '~/common/state/ProviderTRPCQueryClient';
-import { ProviderTheming } from '~/common/state/ProviderTheming';
+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';
 
 
-const MyApp = ({ Component, emotionCache, pageProps }: MyAppProps) =>
-  <>
+const Big_AGI_App = ({ Component, emotionCache, pageProps }: MyAppProps) => {
+
+  // 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);
+
+  return <>
 
     <Head>
       <title>{Brand.Title.Common}</title>
@@ -24,16 +39,24 @@ const MyApp = ({ Component, emotionCache, pageProps }: MyAppProps) =>
     </Head>
 
     <ProviderTheming emotionCache={emotionCache}>
-      <ProviderTRPCQueryClient>
-        <ProviderBackend>
-          <Component {...pageProps} />
-        </ProviderBackend>
-      </ProviderTRPCQueryClient>
+      <ProviderSingleTab>
+        <ProviderBackendCapabilities>
+          {/* ^ Backend capabilities & SSR boundary */}
+          <ProviderBootstrapLogic>
+            <SnackbarInsert />
+            {getLayout(<Component {...pageProps} />)}
+            <OverlaysInsert />
+          </ProviderBootstrapLogic>
+        </ProviderBackendCapabilities>
+      </ProviderSingleTab>
     </ProviderTheming>
 
-    <VercelAnalytics debug={false} />
+    {Is.Deployment.VercelFromFrontend && <VercelAnalytics debug={false} />}
+    {Is.Deployment.VercelFromFrontend && <VercelSpeedInsights debug={false} sampleRate={1 / 2} />}
+    {hasGoogleAnalytics && <OptionalGoogleAnalytics />}
 
   </>;
+};
 
-// enables the React Query API invocation
-export default apiQuery.withTRPC(MyApp);
+// Initializes React Query and tRPC, and enables the tRPC React Query hooks (apiQuery).
+export default apiQuery.withTRPC(Big_AGI_App);

pages/_document.tsx

@@ -2,10 +2,10 @@ import * as React from 'react';
 import { AppType, MyAppProps } from 'next/app';
 import { default as Document, DocumentContext, DocumentProps, Head, Html, Main, NextScript } from 'next/document';
 import createEmotionServer from '@emotion/server/create-instance';
-import { getInitColorSchemeScript } from '@mui/joy/styles';
+import InitColorSchemeScript from '@mui/joy/InitColorSchemeScript';
 
 import { Brand } from '~/common/app.config';
-import { bodyFontClassName, createEmotionCache } from '~/common/app.theme';
+import { createEmotionCache } from '~/common/app.theme';
 
 
 interface MyDocumentProps extends DocumentProps {
@@ -14,7 +14,7 @@ interface MyDocumentProps extends DocumentProps {
 
 export default function MyDocument({ emotionStyleTags }: MyDocumentProps) {
   return (
-    <Html lang='en' className={bodyFontClassName}>
+    <Html lang='en'>
       <Head>
         {/* Meta (missing Title, set by the App or Page) */}
         <meta name='description' content={Brand.Meta.Description} />
@@ -24,9 +24,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='/icons/apple-touch-icon.png' />
+        <link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png' />
         <link rel='manifest' href='/manifest.json' />
-        <meta name='apple-mobile-web-app-capable' content='yes' />
+        <meta name='mobile-web-app-capable' content='yes' />
         <meta name='apple-mobile-web-app-status-bar-style' content='black' />
 
         {/* Opengraph */}
@@ -51,9 +51,9 @@ export default function MyDocument({ emotionStyleTags }: MyDocumentProps) {
         {emotionStyleTags}
       </Head>
       <body>
-        {getInitColorSchemeScript()}
-        <Main />
-        <NextScript />
+      <InitColorSchemeScript />
+      <Main />
+      <NextScript />
       </body>
     </Html>
   );

pages/call.tsx

@@ -2,13 +2,7 @@ import * as React from 'react';
 
 import { AppCall } from '../src/apps/call/AppCall';
 
-import { AppLayout } from '~/common/layout/AppLayout';
+import { withNextJSPerPageLayout } from '~/common/layout/withLayout';
 
 
-export default function CallPage() {
-  return (
-    <AppLayout>
-      <AppCall />
-    </AppLayout>
-  );
-}
+export default withNextJSPerPageLayout({ type: 'optima' }, () => <AppCall />);

pages/dev/beam.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+
+import { AppBeam } from '../../src/apps/beam/AppBeam';
+
+import { withNextJSPerPageLayout } from '~/common/layout/withLayout';
+
+
+export default withNextJSPerPageLayout({ type: 'optima' }, () => <AppBeam />);

pages/diff.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+
+import { AppDiff } from '../src/apps/diff/AppDiff';
+
+import { withNextJSPerPageLayout } from '~/common/layout/withLayout';
+
+
+export default withNextJSPerPageLayout({ type: 'optima' }, () => <AppDiff />);

pages/draw.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+
+import { AppDraw } from '../src/apps/draw/AppDraw';
+
+import { withNextJSPerPageLayout } from '~/common/layout/withLayout';
+
+
+export default withNextJSPerPageLayout({ type: 'optima' }, () => <AppDraw />);

pages/index.tsx

@@ -1,18 +1,14 @@
 import * as React from 'react';
 
 import { AppChat } from '../src/apps/chat/AppChat';
-import { useShowNewsOnUpdate } from '../src/apps/news/news.hooks';
 
-import { AppLayout } from '~/common/layout/AppLayout';
+import { withNextJSPerPageLayout } from '~/common/layout/withLayout';
 
 
-export default function ChatPage() {
-  // show the News page on updates
-  useShowNewsOnUpdate();
+export default withNextJSPerPageLayout({ type: 'optima' }, () => {
 
-  return (
-    <AppLayout>
-      <AppChat />
-    </AppLayout>
-  );
-}
+  // 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 />;
+});

pages/info/debug.tsx

@@ -0,0 +1,166 @@
+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 />);

pages/labs.tsx

@@ -1,14 +0,0 @@
-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>
-  );
-}

pages/link/callback_openrouter.tsx

@@ -0,0 +1,90 @@
+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} />;
+
+});

pages/link/chat/[chatLinkId].tsx

@@ -1,18 +1,16 @@
 import * as React from 'react';
-import { useRouter } from 'next/router';
 
-import { AppChatLink } from '../../../src/apps/link/AppChatLink';
+import { AppLinkChat } from '../../../src/apps/link-chat/AppLinkChat';
 
-import { AppLayout } from '~/common/layout/AppLayout';
+import { useRouterQuery } from '~/common/app.routes';
+import { withNextJSPerPageLayout } from '~/common/layout/withLayout';
 
 
-export default function ChatLinkPage() {
-  const { query } = useRouter();
-  const chatLinkId = query?.chatLinkId as string ?? '';
+export default withNextJSPerPageLayout({ type: 'optima', suspendAutoModelsSetup: true }, () => {
 
-  return (
-    <AppLayout suspendAutoModelsSetup>
-      <AppChatLink linkId={chatLinkId} />
-    </AppLayout>
-  );
-}
+  // external state
+  const { chatLinkId } = useRouterQuery<{ chatLinkId: string | undefined }>();
+
+  return <AppLinkChat chatLinkId={chatLinkId || null} />;
+
+});

pages/link/share_target.tsx

@@ -1,14 +1,16 @@
 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 '../src/apps/chat/components/composer/store-composer';
+import { setComposerStartupText } from '~/common/logic/store-logic-sherpa';
+
+import { callBrowseFetchPageOrThrow } from '~/modules/browse/browse.client';
 
-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';
 
 
 /**
@@ -28,23 +30,25 @@ function AppShareTarget() {
   const [isDownloading, setIsDownloading] = React.useState(false);
 
   // external state
-  const { query, push: routerPush, replace: routerReplace } = useRouter();
-
+  const { url: queryUrl, text: queryText } = useRouterQuery<{
+    url: string | string[] | undefined,
+    text: string | string[] | undefined,
+  }>();
 
   const queueComposerTextAndLaunchApp = React.useCallback((text: string) => {
     setComposerStartupText(text);
-    void routerReplace('/');
-  }, [routerReplace]);
+    void navigateToIndex(true);
+  }, []);
 
 
   // Detect the share Intent from the query
   React.useEffect(() => {
     // skip when query is not parsed yet
-    if (!Object.keys(query).length)
+    let queryTextItem = queryUrl || queryText || null;
+    if (!queryTextItem)
       return;
 
     // single item from the query
-    let queryTextItem: string[] | string | null = query.url || query.text || null;
     if (Array.isArray(queryTextItem))
       queryTextItem = queryTextItem[0];
 
@@ -55,9 +59,9 @@ function AppShareTarget() {
     else if (queryTextItem)
       setIntentText(queryTextItem);
     else
-      setErrorMessage('No text or url. Received: ' + JSON.stringify(query));
+      setErrorMessage('No text or url. Received: ' + JSON.stringify({ queryText, queryUrl }));
 
-  }, [query.url, query.text, query]);
+  }, [queryText, queryUrl]);
 
 
   // Text -> Composer
@@ -71,18 +75,22 @@ function AppShareTarget() {
   React.useEffect(() => {
     if (intentURL) {
       setIsDownloading(true);
-      // 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');
+      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 : '');
         })
         .catch(error => setErrorMessage(error?.message || error || 'Unknown error'))
-        .finally(() => setIsDownloading(false));*/
+        .finally(() => setIsDownloading(false));
     }
   }, [intentURL, queueComposerTextAndLaunchApp]);
 
@@ -90,7 +98,6 @@ function AppShareTarget() {
   return (
 
     <Box sx={{
-      backgroundColor: 'background.level2',
       display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
       flexGrow: 1,
     }}>
@@ -110,7 +117,7 @@ function AppShareTarget() {
         </Alert>
         <Button
           variant='solid' color='danger'
-          onClick={() => routerPush('/')}
+          onClick={() => navigateToIndex()}
           endDecorator={<ArrowBackIcon />}
           sx={{ mt: 2 }}
         >
@@ -130,12 +137,6 @@ function AppShareTarget() {
 
 /**
  * This page will be invoked on mobile when sharing Text/URLs/Files from other APPs
- * Example URL: https://get.big-agi.com/launch?title=This+Title&text=https%3A%2F%2Fexample.com%2Fapp%2Fpath
+ * Example URL: https://localhost:3000/link/share_target?title=This+Title&text=https%3A%2F%2Fexample.com%2Fapp%2Fpath
  */
-export default function LaunchPage() {
-  return (
-    <AppLayout>
-      <AppShareTarget />
-    </AppLayout>
-  );
-}
+export default withNextJSPerPageLayout({ type: 'container' }, () => <AppShareTarget />);

pages/news.tsx

@@ -1,18 +1,15 @@
 import * as React from 'react';
 
 import { AppNews } from '../src/apps/news/AppNews';
-import { useMarkNewsAsSeen } from '../src/apps/news/news.hooks';
 
-import { AppLayout } from '~/common/layout/AppLayout';
+import { markNewsAsSeen } from '~/common/logic/store-logic-sherpa';
+import { withNextJSPerPageLayout } from '~/common/layout/withLayout';
 
 
-export default function NewsPage() {
-  // update the last seen news version
-  useMarkNewsAsSeen();
+export default withNextJSPerPageLayout({ type: 'optima', suspendAutoModelsSetup: true }, () => {
 
-  return (
-    <AppLayout suspendAutoModelsSetup>
-      <AppNews />
-    </AppLayout>
-  );
-}
+  // 'touch' the last seen news version
+  React.useEffect(() => markNewsAsSeen(), []);
+
+  return <AppNews />;
+});

pages/personas.tsx

@@ -2,13 +2,7 @@ import * as React from 'react';
 
 import { AppPersonas } from '../src/apps/personas/AppPersonas';
 
-import { AppLayout } from '~/common/layout/AppLayout';
+import { withNextJSPerPageLayout } from '~/common/layout/withLayout';
 
 
-export default function PersonasPage() {
-  return (
-    <AppLayout>
-      <AppPersonas />
-    </AppLayout>
-  );
-}
+export default withNextJSPerPageLayout({ type: 'optima' }, () => <AppPersonas />);

pages/tokens.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+
+import { AppTokens } from '../src/apps/tokens/AppTokens';
+
+import { withNextJSPerPageLayout } from '~/common/layout/withLayout';
+
+
+export default withNextJSPerPageLayout({ type: 'optima' }, () => <AppTokens />);

pages/workspace.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+
+import { AppPlaceholder } from '../src/apps/AppPlaceholder';
+
+import { withNextJSPerPageLayout } from '~/common/layout/withLayout';
+
+
+export default withNextJSPerPageLayout({ type: 'optima' }, () => <AppPlaceholder />);

public/manifest.json

@@ -3,29 +3,49 @@
   "short_name": "big-AGI",
   "theme_color": "#32383E",
   "background_color": "#9FA6AD",
-  "description": "Personal AGI App",
+  "description": "Your Generative AI Suite",
+  "categories": [
+    "productivity",
+    "AI",
+    "tool",
+    "utilities"
+  ],
   "display": "standalone",
-  "start_url": "/",
+  "start_url": "/?source=pwa",
+  "scope": "/",
   "icons": [
     {
-      "src": "/icons/icon-192x192.png",
-      "sizes": "192x192",
+      "src": "/icons/icon-1024x1024.png",
+      "sizes": "1024x1024",
       "type": "image/png",
-      "purpose": "maskable"
+      "purpose": "any maskable"
     },
     {
       "src": "/icons/icon-512x512.png",
       "sizes": "512x512",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "any"
     },
     {
-      "src": "/icons/icon-1024x1024.png",
-      "sizes": "1024x1024",
-      "type": "image/png"
+      "src": "/icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    }
+  ],
+  "file_handlers": [
+    {
+      "action": "/link/share_target",
+      "accept": {
+        "application/big-agi": [
+          ".agi",
+          ".agi.json"
+        ]
+      }
     }
   ],
   "share_target": {
-    "action": "/launch",
+    "action": "/link/share_target",
     "method": "GET",
     "enctype": "application/x-www-form-urlencoded",
     "params": {
@@ -33,5 +53,31 @@
       "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"
+        }
+      ]
+    }
+  ]
 }

src/apps/AppPlaceholder.tsx

@@ -0,0 +1,56 @@
+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>
+  );
+}

src/apps/AppSmallContainer.tsx

@@ -0,0 +1,27 @@
+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>
+  );
+}

src/apps/beam/AppBeam.tsx

@@ -0,0 +1,108 @@
+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>
+
+  </>;
+}

src/apps/call/AppCall.tsx

@@ -1,46 +1,79 @@
 import * as React from 'react';
-import { useRouter } from 'next/router';
 
 import { Container, Sheet } from '@mui/joy';
 
-import { AppCallQueryParams } from '~/common/app.routes';
-import { InlineError } from '~/common/components/InlineError';
+import type { DConversationId } from '~/common/stores/chat/chat.conversation';
+import { useRouterQuery } from '~/common/app.routes';
 
-import { CallUI } from './CallUI';
 import { CallWizard } from './CallWizard';
+import { Contacts } from './Contacts';
+import { Telephone } from './Telephone';
+import { useAppCallStore } from './state/store-app-call';
 
 
-export const APP_CALL_ENABLED = false;
+/**
+ * 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 function AppCall() {
-  // external state
-  const { query } = useRouter();
 
-  // derived state
-  const { conversationId, personaId } = query as any as AppCallQueryParams;
-  const validInput = !!conversationId && !!personaId;
+  // state
+  const [callIntent, setCallIntent] = React.useState<AppCallIntent | null>(null);
+
+  // external state
+  const grayUI = useAppCallStore(state => state.grayUI);
+  const query = useRouterQuery<Partial<AppCallIntent>>();
+
+
+  // [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;
 
   return (
-    <Sheet variant='solid' color='neutral' invertedColors sx={{
-      display: 'flex', flexDirection: 'column', justifyContent: 'center',
-      flexGrow: 1,
-      overflowY: 'auto',
-      minHeight: 96,
-    }}>
+    <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',
 
-      <Container maxWidth='sm' sx={{
-        display: 'flex', flexDirection: 'column',
-        alignItems: 'center',
-        minHeight: '80dvh', justifyContent: 'space-evenly',
-        gap: { xs: 2, md: 4 },
+        // container will take the full v-area
+        display: 'grid',
       }}>
 
-        {!validInput && <InlineError error={`Something went wrong. ${JSON.stringify(query)}`} />}
+      <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 && (
-          <CallWizard conversationId={conversationId}>
-            <CallUI conversationId={conversationId} personaId={personaId} />
+        {!hasIntent ? (
+          <Contacts setCallIntent={setCallIntent} />
+        ) : (
+          <CallWizard conversationId={callIntent.conversationId}>
+            <Telephone callIntent={callIntent} backToContacts={() => setCallIntent(null)} />
           </CallWizard>
         )}
 

src/apps/call/CallUI.tsx

@@ -1,392 +0,0 @@
-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 { useElevenLabsVoiceDropdown } from '~/modules/elevenlabs/useElevenLabsVoiceDropdown';
-
-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 } = useElevenLabsVoiceDropdown(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, false);
-
-  // 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>}*/}
-
-  </>;
-}

src/apps/call/CallWizard.tsx

@@ -1,60 +1,22 @@
 import * as React from 'react';
-import { keyframes } from '@emotion/react';
 
 import { Box, Button, Card, CardContent, IconButton, ListItemDecorator, Typography } from '@mui/joy';
-import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import ArrowForwardRoundedIcon from '@mui/icons-material/ArrowForwardRounded';
 import ChatIcon from '@mui/icons-material/Chat';
-import CheckIcon from '@mui/icons-material/Check';
-import CloseIcon from '@mui/icons-material/Close';
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 import MicIcon from '@mui/icons-material/Mic';
-import RecordVoiceOverIcon from '@mui/icons-material/RecordVoiceOver';
-import WarningIcon from '@mui/icons-material/Warning';
+import RecordVoiceOverTwoToneIcon from '@mui/icons-material/RecordVoiceOverTwoTone';
+import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
 
+import { animationColorRainbow } from '~/common/util/animUtils';
 import { navigateBack } from '~/common/app.routes';
-import { openLayoutPreferences } from '~/common/layout/store-applayout';
+import { optimaOpenPreferences } from '~/common/layout/optima/useOptima';
 import { useCapabilityBrowserSpeechRecognition, useCapabilityElevenLabs } from '~/common/components/useCapabilities';
-import { useChatStore } from '~/common/state/store-chats';
+import { useChatStore } from '~/common/stores/chat/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%' }}>
@@ -67,7 +29,7 @@ function StatusCard(props: { icon: React.JSX.Element, hasIssue: boolean, text: s
           {props.button}
         </Typography>
         <ListItemDecorator>
-          {props.hasIssue ? <WarningIcon color='warning' /> : <CheckIcon color='success' />}
+          {props.hasIssue ? <WarningRoundedIcon color='warning' /> : <CheckRoundedIcon color='success' />}
         </ListItemDecorator>
       </CardContent>
     </Card>
@@ -75,7 +37,8 @@ function StatusCard(props: { icon: React.JSX.Element, hasIssue: boolean, text: s
 }
 
 
-export function CallWizard(props: { strict?: boolean, conversationId: string, children: React.ReactNode }) {
+export function CallWizard(props: { strict?: boolean, conversationId: string | null, children: React.ReactNode }) {
+
   // state
   const [chatEmptyOverride, setChatEmptyOverride] = React.useState(false);
   const [recognitionOverride, setRecognitionOverride] = React.useState(false);
@@ -84,49 +47,47 @@ export function CallWizard(props: { strict?: boolean, conversationId: string, ch
   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 = () => setChatEmptyOverride(true);
+  const handleOverrideChatEmpty = React.useCallback(() => setChatEmptyOverride(true), []);
 
-  const handleOverrideRecognition = () => setRecognitionOverride(true);
+  const handleOverrideRecognition = React.useCallback(() => setRecognitionOverride(true), []);
 
-  const handleConfigureElevenLabs = () => {
-    openLayoutPreferences(3);
-  };
+  const handleConfigureElevenLabs = React.useCallback(() => optimaOpenPreferences('voice'), []);
 
-  const handleFinishButton = () => {
+  const handleFinishButton = React.useCallback(() => {
     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: 200, lineHeight: '1.5em', textAlign: 'center' }}>
+    <Typography level='title-lg' sx={{ fontSize: '3rem', fontWeight: 'sm', textAlign: 'center' }}>
       Welcome to<br />
-      <Typography
-        component='span'
-        sx={{
-          backgroundColor: 'primary.solidActiveBg', mx: -0.5, px: 0.5,
-          animation: `${cssRainbowBackgroundKeyframes} 15s linear infinite`,
-        }}>
+      <Box component='span' sx={{ animation: `${animationColorRainbow} 15s linear infinite` }}>
         your first call
-      </Typography>
+      </Box>
     </Typography>
 
     <Box sx={{ flexGrow: 0.5 }} />
@@ -137,7 +98,7 @@ export function CallWizard(props: { strict?: boolean, conversationId: string, ch
     </Typography>
 
     {/* Chat Empty status */}
-    <StatusCard
+    {!outOfTheBlue && <StatusCard
       icon={<ChatIcon />}
       hasIssue={!overriddenEmptyChat}
       text={overriddenEmptyChat ? 'Great! Your chat has messages.' : 'The chat is empty. Calls are effective when the caller has context.'}
@@ -146,7 +107,7 @@ export function CallWizard(props: { strict?: boolean, conversationId: string, ch
           Ignore
         </Button>
       )}
-    />
+    />}
 
     {/* Add the speech to text feature status */}
     <StatusCard
@@ -167,7 +128,7 @@ export function CallWizard(props: { strict?: boolean, conversationId: string, ch
 
     {/* Text to Speech status */}
     <StatusCard
-      icon={<RecordVoiceOverIcon />}
+      icon={<RecordVoiceOverTwoToneIcon />}
       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.'))
@@ -198,14 +159,21 @@ export function CallWizard(props: { strict?: boolean, conversationId: string, ch
       </Typography>
 
       <IconButton
-        size='lg' variant={allGood ? 'soft' : 'solid'} color={allGood ? 'success' : 'danger'}
-        onClick={handleFinishButton} sx={{ borderRadius: '50px' }}
+        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',
+        }}
       >
-        {allGood ? <ArrowForwardIcon sx={{ fontSize: '1.5em' }} /> : <CloseIcon sx={{ fontSize: '1.5em' }} />}
+        {allGood ? <ArrowForwardRoundedIcon sx={{ fontSize: '1.5em' }} /> : <CloseRoundedIcon sx={{ fontSize: '1.5em' }} />}
       </IconButton>
     </Box>
 
-    <Box sx={{ flexGrow: 0.5 }} />
+    <Box sx={{ flexGrow: 2 }} />
 
   </>;
 }

src/apps/call/Contacts.tsx

@@ -0,0 +1,324 @@
+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,
+      }}
+    />}
+
+  </>;
+}

src/apps/call/Telephone.tsx

@@ -0,0 +1,463 @@
+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>}*/}
+
+  </>;
+}

src/apps/call/components/CallAvatar.tsx

@@ -1,32 +1,20 @@
 import * as React from 'react';
-import { keyframes } from '@emotion/react';
 
 import { Avatar, Box } from '@mui/joy';
 
-
-const cssScaleKeyframes = keyframes`
-    0% {
-        transform: scale(1);
-    }
-    50% {
-        transform: scale(1.2);
-    }
-    100% {
-        transform: scale(1);
-    }`;
+import { animationScalePulse } from '~/common/util/animUtils';
 
 
-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: '160px', md: '200px' },
-        '--variant-borderWidth': '4px',
-        boxShadow: !props.imageUrl ? 'md' : null,
-        fontSize: { xs: '100px', md: '120px' },
+        '--Avatar-size': { xs: '10rem', md: '11.5rem' },
+        backgroundColor: 'background.popup',
+        boxShadow: !props.imageUrl ? 'sm' : null,
+        fontSize: { xs: '6rem', md: '7rem' },
       }}
     >
 
@@ -35,7 +23,7 @@ export function CallAvatar(props: { symbol: string, imageUrl?: string, isRinging
         <Box
           sx={{
             ...(props.isRinging
-              ? { animation: `${cssScaleKeyframes} 1.4s ease-in-out infinite` }
+              ? { animation: `${animationScalePulse} 1.4s ease-in-out infinite` }
               : {}),
           }}
         >

src/apps/call/components/CallButton.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
-import { Box, ColorPaletteProp, IconButton, Typography, VariantProp } from '@mui/joy';
+import { ColorPaletteProp, FormControl, IconButton, Typography, VariantProp } from '@mui/joy';
+import { SxProps } from '@mui/joy/styles/types';
 
 
 /**
@@ -14,9 +15,10 @@ export function CallButton(props: {
   Icon: React.FC, text: string,
   variant?: VariantProp, color?: ColorPaletteProp, disabled?: boolean,
   onClick?: () => void,
+  sx?: SxProps,
 }) {
   return (
-    <Box
+    <FormControl
       onClick={() => !props.disabled && props.onClick?.()}
       sx={{
         display: 'flex', flexDirection: 'column', alignItems: 'center',
@@ -25,19 +27,23 @@ export function CallButton(props: {
     >
 
       <IconButton
-        disabled={props.disabled} variant={props.variant || 'solid'} color={props.color}
+        aria-label={props.text}
+        variant={props.variant || 'solid'} color={props.color}
+        disabled={props.disabled}
         sx={{
           '--IconButton-size': { xs: '4.2rem', md: '5rem' },
           borderRadius: '50%',
           // boxShadow: 'lg',
-        }}>
+          ...props.sx,
+        }}
+      >
         <props.Icon />
       </IconButton>
 
-      <Typography level='title-md' variant={props.disabled ? 'soft' : undefined}>
+      <Typography aria-hidden level='title-md' variant={props.disabled ? 'soft' : undefined}>
         {props.text}
       </Typography>
 
-    </Box>
+    </FormControl>
   );
 }

src/apps/call/components/CallMessage.tsx

@@ -1,27 +1,33 @@
 import * as React from 'react';
 
 import { Chip, ColorPaletteProp, VariantProp } from '@mui/joy';
-import { SxProps } from '@mui/system';
+import { SxProps } from '@mui/joy/styles/types';
 
-import { VChatMessageIn } from '~/modules/llms/transports/chatGenerate';
+import type { DMessage } from '~/common/stores/chat/chat.message';
 
 
 export function CallMessage(props: {
   text?: string | React.JSX.Element,
   variant?: VariantProp, color?: ColorPaletteProp,
-  role: VChatMessageIn['role'],
+  role: DMessage['role'],
   sx?: SxProps,
 }) {
+  const isUserMessage = props.role === 'user';
   return (
     <Chip
       color={props.color} variant={props.variant}
       sx={{
-        alignSelf: props.role === 'user' ? 'end' : 'start',
+        alignSelf: isUserMessage ? 'end' : 'start',
         whiteSpace: 'break-spaces',
         borderRadius: 'lg',
-        mt: 'auto',
+        ...(isUserMessage ? {
+          borderBottomRightRadius: 0,
+        } : {
+          borderBottomLeftRadius: 0,
+        }),
         // boxShadow: 'md',
         py: 1,
+        px: 1.5,
         ...(props.sx || {}),
       }}
     >

src/apps/call/components/CallStatus.tsx

@@ -15,7 +15,7 @@ import { InlineError } from '~/common/components/InlineError';
 export function CallStatus(props: {
   callerName?: string,
   statusText: string,
-  regardingText?: string,
+  regardingText: string | null,
   micError: boolean, speakError: boolean,
   // llmComponent?: React.JSX.Element,
 }) {
@@ -28,19 +28,19 @@ export function CallStatus(props: {
 
       {/*{props.llmComponent}*/}
 
-      <Typography level='body-md' sx={{ textAlign: 'center' }}>
+      {!!props.statusText && <Typography level='body-md' sx={{ textAlign: 'center' }}>
         {props.statusText}
-      </Typography>
+      </Typography>}
 
-      {!!props.regardingText && <Typography level='body-md' sx={{ textAlign: 'center', mt: 0 }}>
-        re: {props.regardingText}
+      {!!props.regardingText && <Typography level='body-md' sx={{ textAlign: 'center', mt: 1 }}>
+        Re: <Box component='span' sx={{ color: 'text.primary' }}>{props.regardingText}</Box>
       </Typography>}
 
       {props.micError && <InlineError
-        severity='danger' error='But this browser does not support speech recognition... 🤦‍♀️ - Try Chrome on Windows?' />}
+        severity='danger' error='Looks like this Browser may not support speech recognition. You can try Chrome on Windows or Android instead.' />}
 
       {props.speakError && <InlineError
-        severity='danger' error='And text-to-speech is not configured... 🤦‍♀️ - Configure it in Settings?' />}
+        severity='danger' error='Text-to-speech does not appear to be configured. Please set it up in Preferences > Voice.' />}
 
     </Box>
   );

src/apps/call/state/store-app-call.ts

@@ -0,0 +1,35 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+
+// Call settings
+
+interface AppCallStore {
+
+  grayUI: boolean;
+  toggleGrayUI: () => void;
+
+  showConversations: boolean;
+  toggleShowConversations: () => void;
+
+  showSupport: boolean;
+  toggleShowSupport: () => void;
+
+}
+
+export const useAppCallStore = create<AppCallStore>()(persist(
+  (_set, _get) => ({
+
+    grayUI: false,
+    toggleGrayUI: () => _set(state => ({ grayUI: !state.grayUI })),
+
+    showConversations: true,
+    toggleShowConversations: () => _set(state => ({ showConversations: !state.showConversations })),
+
+    showSupport: true,
+    toggleShowSupport: () => _set(state => ({ showSupport: !state.showSupport })),
+
+  }), {
+    name: 'app-app-call',
+  },
+));

src/apps/call/state/useMockPersonas.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+
+import { usePurposeStore } from '../../chat/components/persona-selector/store-purposes';
+
+import { SystemPurposeData, SystemPurposeId, SystemPurposes } from '../../../data';
+
+
+/**
+ * This is a 'mock' persona because Soon we'll have real personas definitions
+ * and stores. Until then, we just mimic a reactive system here.
+ */
+export interface MockPersona extends SystemPurposeData {
+  personaId: SystemPurposeId,
+}
+
+export function useMockPersonas(): { personas: MockPersona[], personaIDs: SystemPurposeId[] } {
+  // only react to hiddenPurposeIDs changes
+  const hiddenPurposeIDs = usePurposeStore(state => state.hiddenPurposeIDs);
+
+  // Dependency array is empty because SystemPurposes is constant
+  return React.useMemo(() => {
+    const personaIDs = Object.keys(SystemPurposes) as SystemPurposeId[];
+    const personas = personaIDs
+      .filter((key) => !hiddenPurposeIDs.includes(key))
+      .map((key) => ({
+        ...SystemPurposes[key as SystemPurposeId],
+        personaId: key as SystemPurposeId,
+      }));
+    return { personas, personaIDs };
+  }, [hiddenPurposeIDs]);
+}

src/apps/chat/AppChat.tsx

@@ -1,293 +1,741 @@
 import * as React from 'react';
-import { shallow } from 'zustand/shallow';
+import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
 
-import { CmdRunProdia } from '~/modules/prodia/prodia.client';
-import { CmdRunReact } from '~/modules/aifn/react/react';
+import type { SxProps } from '@mui/joy/styles/types';
+import { useTheme } from '@mui/joy';
+
+import { DEV_MODE_SETTINGS } from '../settings-modal/UxLabsSettings';
 import { DiagramConfig, DiagramsModal } from '~/modules/aifn/digrams/DiagramsModal';
 import { FlattenerModal } from '~/modules/aifn/flatten/FlattenerModal';
-import { imaginePromptFromText } from '~/modules/aifn/imagine/imaginePromptFromText';
-import { useModelsStore } from '~/modules/llms/store-llms';
+import { TradeConfig, TradeModal } from '~/modules/trade/TradeModal';
+import { downloadSingleChat, importConversationsFromFilesAtRest, openConversationsAtRestPicker } from '~/modules/trade/trade.client';
+import { imaginePromptFromTextOrThrow } from '~/modules/aifn/imagine/imaginePromptFromText';
+import { elevenLabsSpeakText } from '~/modules/elevenlabs/elevenlabs.client';
+import { useAreBeamsOpen } from '~/modules/beam/store-beam.hooks';
+import { useCapabilityTextToImage } from '~/modules/t2i/t2i.client';
 
-import { ConfirmationModal } from '~/common/components/ConfirmationModal';
-import { createDMessage, DMessage, useChatStore } from '~/common/state/store-chats';
-import { useGlobalShortcut } from '~/common/components/useGlobalShortcut';
-import { useLayoutPluggable } from '~/common/layout/store-applayout';
+import type { DConversation, DConversationId } from '~/common/stores/chat/chat.conversation';
+import type { OptimaBarControlMethods } from '~/common/layout/optima/bar/OptimaBarDropdown';
+import { ConfirmationModal } from '~/common/components/modals/ConfirmationModal';
+import { ConversationsManager } from '~/common/chat-overlay/ConversationsManager';
+import { LLM_IF_ANT_PromptCaching, LLM_IF_OAI_Vision } from '~/common/stores/llms/llms.types';
+import { OptimaDrawerIn, OptimaToolbarIn } from '~/common/layout/optima/portals/OptimaPortalsIn';
+import { PanelResizeInset } from '~/common/components/panes/GoodPanelResizeHandler';
+import { Release } from '~/common/app.release';
+import { ScrollToBottom } from '~/common/scroll-to-bottom/ScrollToBottom';
+import { ScrollToBottomButton } from '~/common/scroll-to-bottom/ScrollToBottomButton';
+import { ShortcutKey, useGlobalShortcuts } from '~/common/components/shortcuts/useGlobalShortcuts';
+import { WorkspaceIdProvider } from '~/common/stores/workspace/WorkspaceIdProvider';
+import { addSnackbar, removeSnackbar } from '~/common/components/snackbar/useSnackbarsStore';
+import { createDMessageFromFragments, createDMessagePlaceholderIncomplete, DMessageMetadata, duplicateDMessageMetadata } from '~/common/stores/chat/chat.message';
+import { createErrorContentFragment, createTextContentFragment, DMessageAttachmentFragment, DMessageContentFragment, duplicateDMessageFragmentsNoVoid } from '~/common/stores/chat/chat.fragments';
+import { gcChatImageAssets } from '~/common/stores/chat/chat.gc';
+import { getChatLLMId } from '~/common/stores/llms/store-llms';
+import { getConversation, getConversationSystemPurposeId, useConversation } from '~/common/stores/chat/store-chats';
+import { optimaActions, optimaOpenModels, optimaOpenPreferences, useSetOptimaAppMenu } from '~/common/layout/optima/useOptima';
+import { themeBgAppChatComposer } from '~/common/app.theme';
+import { useChatLLM } from '~/common/stores/llms/llms.hooks';
+import { useFolderStore } from '~/common/stores/folders/store-chat-folders';
+import { useIsMobile, useIsTallScreen } from '~/common/components/useMatchMedia';
+import { useOverlayComponents } from '~/common/layout/overlays/useOverlayComponents';
+import { useRouterQuery } from '~/common/app.routes';
+import { useUXLabsStore } from '~/common/state/store-ux-labs';
 
-import { ChatDrawerItems } from './components/applayout/ChatDrawerItems';
-import { ChatDropdowns } from './components/applayout/ChatDropdowns';
-import { ChatMenuItems } from './components/applayout/ChatMenuItems';
+import { ChatPane } from './components/layout-pane/ChatPane';
+import { ChatBarAltBeam } from './components/layout-bar/ChatBarAltBeam';
+import { ChatBarAltTitle } from './components/layout-bar/ChatBarAltTitle';
+import { ChatBarDropdowns } from './components/layout-bar/ChatBarDropdowns';
+import { ChatBeamWrapper } from './components/ChatBeamWrapper';
+import { ChatDrawerMemo } from './components/layout-drawer/ChatDrawer';
 import { ChatMessageList } from './components/ChatMessageList';
-import { ChatModeId } from './components/composer/store-composer';
-import { CmdAddRoleMessage, extractCommands } from './commands';
 import { Composer } from './components/composer/Composer';
-import { Ephemerals } from './components/Ephemerals';
+import { usePanesManager } from './components/panes/usePanesManager';
 
-import { TradeConfig, TradeModal } from './trade/TradeModal';
-import { runAssistantUpdatingState } from './editors/chat-stream';
-import { runImageGenerationUpdatingState } from './editors/image-generate';
-import { runReActUpdatingState } from './editors/react-tangent';
+import type { ChatExecuteMode } from './execute-mode/execute-mode.types';
+
+import { _handleExecute } from './editors/_handleExecute';
 
 
-const SPECIAL_ID_ALL_CHATS = 'all-chats';
+// what to say when a chat is new and has no title
+export const CHAT_NOVEL_TITLE = 'Chat';
+
+
+export interface AppChatIntent {
+  initialConversationId?: string;
+  newChat?: 'voiceInput';
+}
+
+const scrollToBottomSx = {
+  display: 'flex',
+  flexDirection: 'column',
+};
+
+const chatMessageListSx: SxProps = {
+  flexGrow: 1,
+};
+
+const chatBeamWrapperSx: SxProps = {
+  flexGrow: 1,
+  // minHeight: 'calc(100vh - 69px - var(--AGI-Nav-width))',
+};
+
+const composerOpenSx: SxProps = {
+  zIndex: 21, // just to allocate a surface, and potentially have a shadow
+  minWidth: { md: 480 }, // don't get compresses too much on desktop
+  backgroundColor: themeBgAppChatComposer,
+  borderTop: `1px solid`,
+  borderTopColor: 'rgba(var(--joy-palette-neutral-mainChannel, 99 107 116) / 0.4)',
+  // hack: eats the bottom of the last message (as it has a 1px divider)
+  mt: '-1px',
+};
+
+const composerClosedSx: SxProps = {
+  display: 'none',
+};
 
 
 export function AppChat() {
 
   // state
+  const { showPromisedOverlay } = useOverlayComponents();
+  const [isComposerMulticast, setIsComposerMulticast] = React.useState(false);
   const [isMessageSelectionMode, setIsMessageSelectionMode] = React.useState(false);
   const [diagramConfig, setDiagramConfig] = React.useState<DiagramConfig | null>(null);
   const [tradeConfig, setTradeConfig] = React.useState<TradeConfig | null>(null);
-  const [clearConfirmationId, setClearConfirmationId] = React.useState<string | null>(null);
-  const [deleteConfirmationId, setDeleteConfirmationId] = React.useState<string | null>(null);
-  const [flattenConversationId, setFlattenConversationId] = React.useState<string | null>(null);
+  const [flattenConversationId, setFlattenConversationId] = React.useState<DConversationId | null>(null);
+  const showNextTitleChange = React.useRef(false);
+  const llmDropdownRef = React.useRef<OptimaBarControlMethods>(null);
+  const personaDropdownRef = React.useRef<OptimaBarControlMethods>(null);
   const composerTextAreaRef = React.useRef<HTMLTextAreaElement>(null);
+  const [_activeFolderId, setActiveFolderId] = React.useState<string | null>(null);
 
   // external state
-  const { activeConversationId, isConversationEmpty, hasAnyContent, newConversation, duplicateConversation, deleteAllConversations, setMessages, systemPurposeId, setAutoTitle } = useChatStore(state => {
-    const conversation = state.conversations.find(conversation => conversation.id === state.activeConversationId);
-    const isConversationEmpty = conversation ? !conversation.messages.length : true;
-    const hasAnyContent = state.conversations.length > 1 || !isConversationEmpty;
+  const theme = useTheme();
+
+  const isMobile = useIsMobile();
+  const isTallScreen = useIsTallScreen();
+
+  const intent = useRouterQuery<Partial<AppChatIntent>>();
+
+  const showAltTitleBar = useUXLabsStore(state => DEV_MODE_SETTINGS && state.labsChatBarAlt === 'title');
+
+  const { chatLLM } = useChatLLM();
+
+  const {
+    // state
+    chatPanes,
+    focusedPaneIndex,
+    focusedPaneConversationId,
+    // actions
+    navigateHistoryInFocusedPane,
+    openConversationInFocusedPane,
+    openConversationInSplitPane,
+    removePane,
+    setFocusedPaneIndex,
+  } = usePanesManager();
+
+  const { paneUniqueConversationIds, paneHandlers, paneBeamStores } = React.useMemo(() => {
+    const paneConversationIds: (DConversationId | null)[] = chatPanes.map(pane => pane.conversationId || null);
+    const paneHandlers = paneConversationIds.map(cId => cId ? ConversationsManager.getHandler(cId) : null);
+    const paneBeamStores = paneHandlers.map(handler => handler?.getBeamStore() ?? null);
+    const paneUniqueConversationIds = Array.from(new Set(paneConversationIds.filter(Boolean))) as DConversationId[];
     return {
-      activeConversationId: state.activeConversationId,
-      isConversationEmpty,
-      hasAnyContent,
-      newConversation: state.createConversationOrSwitch,
-      duplicateConversation: state.duplicateConversation,
-      deleteAllConversations: state.deleteAllConversations,
-      setMessages: state.setMessages,
-      systemPurposeId: conversation?.systemPurposeId ?? null,
-      setAutoTitle: state.setAutoTitle,
+      paneHandlers: paneHandlers,
+      paneBeamStores: paneBeamStores,
+      paneUniqueConversationIds: paneUniqueConversationIds,
     };
-  }, shallow);
+  }, [chatPanes]);
 
+  const beamsOpens = useAreBeamsOpen(paneBeamStores);
+  const beamOpenStoreInFocusedPane = React.useMemo(() => {
+    const open = focusedPaneIndex !== null ? (beamsOpens?.[focusedPaneIndex] ?? false) : false;
+    return open ? paneBeamStores?.[focusedPaneIndex!] ?? null : null;
+  }, [beamsOpens, focusedPaneIndex, paneBeamStores]);
 
-  const handleExecuteConversation = async (chatModeId: ChatModeId, conversationId: string, history: DMessage[]) => {
-    const { chatLLMId } = useModelsStore.getState();
-    if (!chatModeId || !conversationId || !chatLLMId) return;
+  const {
+    // focused
+    title: focusedChatTitle,
+    isEmpty: isFocusedChatEmpty,
+    isDeveloper: isFocusedChatDeveloper,
+    conversationIdx: focusedChatNumber,
+    // all
+    hasConversations,
+    recycleNewConversationId,
+    // actions
+    prependNewConversation,
+    branchConversation,
+    deleteConversations,
+  } = useConversation(focusedPaneConversationId);
 
-    // "/command ...": overrides the chat mode
-    const lastMessage = history.length > 0 ? history[history.length - 1] : null;
-    if (lastMessage?.role === 'user') {
-      const pieces = extractCommands(lastMessage.text);
-      if (pieces.length == 2 && pieces[0].type === 'cmd' && pieces[1].type === 'text') {
-        const [command, prompt] = [pieces[0].value, pieces[1].value];
-        if (CmdRunProdia.includes(command)) {
-          setMessages(conversationId, history);
-          return await runImageGenerationUpdatingState(conversationId, prompt);
-        }
-        if (CmdRunReact.includes(command) && chatLLMId) {
-          setMessages(conversationId, history);
-          return await runReActUpdatingState(conversationId, prompt, chatLLMId);
-        }
-        if (CmdAddRoleMessage.includes(command)) {
-          lastMessage.role = command.startsWith('/s') ? 'system' : command.startsWith('/a') ? 'assistant' : 'user';
-          lastMessage.sender = 'Bot';
-          lastMessage.text = prompt;
-          return setMessages(conversationId, history);
-        }
-      }
-    }
+  // this will be used for the side panel
+  // const focusedConversationWorkspaceId = workspaceForConversationIdentity(focusedPaneConversationId);
+  //// const focusedConversationWorkspace = useWorkspaceIdForConversation(focusedPaneConversationId);
 
-    // synchronous long-duration tasks, which update the state as they go
-    if (chatLLMId && systemPurposeId) {
-      switch (chatModeId) {
-        case 'immediate':
-          return await runAssistantUpdatingState(conversationId, history, chatLLMId, systemPurposeId);
-        case 'write-user':
-          return setMessages(conversationId, history);
-        case 'react':
-          if (!lastMessage?.text)
-            break;
-          setMessages(conversationId, history);
-          return await runReActUpdatingState(conversationId, lastMessage.text, chatLLMId);
-        case 'draw-imagine':
-        case 'draw-imagine-plus':
-          if (!lastMessage?.text)
-            break;
-          const imagePrompt = chatModeId == 'draw-imagine-plus'
-            ? await imaginePromptFromText(lastMessage.text) || 'An error sign.'
-            : lastMessage.text;
-          setMessages(conversationId, history.map(message => message.id !== lastMessage.id ? message : {
-            ...message,
-            text: `${CmdRunProdia[0]} ${imagePrompt}`,
-          }));
-          return await runImageGenerationUpdatingState(conversationId, imagePrompt);
-      }
-    }
+  const { mayWork: capabilityHasT2I } = useCapabilityTextToImage();
 
-    // ISSUE: if we're here, it means we couldn't do the job, at least sync the history
-    console.log('handleExecuteConversation: issue running', chatModeId, conversationId, lastMessage);
-    setMessages(conversationId, history);
-  };
-
-  const _findConversation = (conversationId: string) =>
-    conversationId ? useChatStore.getState().conversations.find(c => c.id === conversationId) ?? null : null;
-
-  const handleExecuteChatHistory = async (conversationId: string, history: DMessage[]) =>
-    await handleExecuteConversation('immediate', conversationId, history);
-
-  const handleDiagramFromText = async (diagramConfig: DiagramConfig | null) => setDiagramConfig(diagramConfig);
-
-  const handleImagineFromText = async (conversationId: string, messageText: string) => {
-    const conversation = _findConversation(conversationId);
-    if (conversation)
-      return await handleExecuteConversation('draw-imagine-plus', conversationId, [...conversation.messages, createDMessage('user', messageText)]);
-  };
-
-  const handleComposerNewMessage = async (chatModeId: ChatModeId, conversationId: string, userText: string) => {
-    const conversation = _findConversation(conversationId);
-    if (conversation)
-      return await handleExecuteConversation(chatModeId, conversationId, [...conversation.messages, createDMessage('user', userText)]);
-  };
-
-  const handleRegenerateAssistant = async () => {
-    const conversation = activeConversationId ? _findConversation(activeConversationId) : null;
-    if (conversation?.messages?.length) {
-      const lastMessage = conversation.messages[conversation.messages.length - 1];
-      if (lastMessage.role === 'assistant') {
-        const newMessages = [...conversation.messages];
-        newMessages.pop();
-        return await handleExecuteConversation('immediate', conversation.id, newMessages);
-      }
-    }
-  };
-  useGlobalShortcut('r', true, true, false, handleRegenerateAssistant);
-
-
-  const handleImportConversation = () => setTradeConfig({ dir: 'import' });
-
-  const handleExportConversation = (conversationId: string | null) => setTradeConfig({ dir: 'export', conversationId });
-
-  const handleFlattenConversation = (conversationId: string) => setFlattenConversationId(conversationId);
-
-
-  useGlobalShortcut('n', true, false, true, () => {
-    newConversation();
-    composerTextAreaRef.current?.focus();
+  const activeFolderId = useFolderStore(({ enableFolders, folders }) => {
+    const activeFolderId = enableFolders ? _activeFolderId : null;
+    const activeFolder = activeFolderId ? folders.find(folder => folder.id === activeFolderId) : null;
+    return activeFolder?.id ?? null;
   });
 
-  const handleCloneConversation = (conversationId: string) => duplicateConversation(conversationId);
-  useGlobalShortcut('f', true, false, true, () => isConversationEmpty || activeConversationId && handleCloneConversation(activeConversationId));
 
-  const handleClearConversation = (conversationId: string) => setClearConfirmationId(conversationId);
-  useGlobalShortcut('x', true, false, true, () => isConversationEmpty || setClearConfirmationId(activeConversationId));
+  // Window actions
 
-  const handleConfirmedClearConversation = () => {
-    if (clearConfirmationId) {
-      setMessages(clearConfirmationId, []);
-      setAutoTitle(clearConfirmationId, '');
-      setClearConfirmationId(null);
+  const isMultiPane = chatPanes.length >= 2;
+  const isMultiAddable = chatPanes.length < 4;
+  const isMultiConversationId = paneUniqueConversationIds.length >= 2;
+  const willMulticast = isComposerMulticast && isMultiConversationId;
+  const disableNewButton = isFocusedChatEmpty && !isMultiPane;
+
+  const handleOpenConversationInFocusedPane = React.useCallback((conversationId: DConversationId | null) => {
+    conversationId && openConversationInFocusedPane(conversationId);
+  }, [openConversationInFocusedPane]);
+
+  const handleOpenConversationInSplitPane = React.useCallback((conversationId: DConversationId | null) => {
+    conversationId && openConversationInSplitPane(conversationId);
+  }, [openConversationInSplitPane]);
+
+  const handleNavigateHistoryInFocusedPane = React.useCallback((direction: 'back' | 'forward') => {
+    if (navigateHistoryInFocusedPane(direction))
+      showNextTitleChange.current = true;
+  }, [navigateHistoryInFocusedPane]);
+
+
+  // Execution
+
+  const handleExecuteAndOutcome = React.useCallback(async (chatExecuteMode: ChatExecuteMode, conversationId: DConversationId, callerNameDebug: string) => {
+    const outcome = await _handleExecute(chatExecuteMode, conversationId, callerNameDebug);
+    if (outcome === 'err-no-chatllm')
+      optimaOpenModels();
+    else if (outcome === 'err-t2i-unconfigured')
+      optimaOpenPreferences('draw');
+    else if (outcome === 'err-no-persona')
+      addSnackbar({ key: 'chat-no-persona', message: 'No persona selected.', type: 'issue' });
+    else if (outcome === 'err-no-conversation')
+      addSnackbar({ key: 'chat-no-conversation', message: 'No active conversation.', type: 'issue' });
+    else if (outcome === 'err-no-last-message')
+      addSnackbar({ key: 'chat-no-conversation', message: 'No conversation history.', type: 'issue' });
+    return outcome === true;
+  }, []);
+
+  const handleComposerAction = React.useCallback((conversationId: DConversationId, chatExecuteMode: ChatExecuteMode, fragments: (DMessageContentFragment | DMessageAttachmentFragment)[], metadata?: DMessageMetadata): boolean => {
+
+    // [multicast] send the message to all the panes
+    const uniqueConversationIds = willMulticast
+      ? Array.from(new Set([conversationId, ...paneUniqueConversationIds]))
+      : [conversationId];
+
+    // validate conversation existence
+    const uniqueConverations = uniqueConversationIds.map(cId => getConversation(cId)).filter(Boolean) as DConversation[];
+    if (!uniqueConverations.length)
+      return false;
+
+    // we loop to handle both the normal and multicast modes
+    for (const conversation of uniqueConverations) {
+
+      // create the user:message
+      // NOTE: this can lead to multiple chat messages with data refs that are referring to the same dblobs,
+      //       however, we already got transferred ownership of the dblobs at this point.
+      const userMessage = createDMessageFromFragments('user', duplicateDMessageFragmentsNoVoid(fragments)); // [chat] create user:message to send per-chat
+      if (metadata) userMessage.metadata = duplicateDMessageMetadata(metadata);
+
+      ConversationsManager.getHandler(conversation.id).messageAppend(userMessage); // [chat] append user message in each conversation
+
+      // fire/forget
+      void handleExecuteAndOutcome(chatExecuteMode /* various */, conversation.id, 'chat-composer-action'); // append user message, then '*-*'
     }
-  };
 
-  const handleDeleteAllConversations = () => setDeleteConfirmationId(SPECIAL_ID_ALL_CHATS);
+    return true;
+  }, [paneUniqueConversationIds, handleExecuteAndOutcome, willMulticast]);
 
-  const handleConfirmedDeleteConversation = () => {
-    if (deleteConfirmationId) {
-      if (deleteConfirmationId === SPECIAL_ID_ALL_CHATS) {
-        deleteAllConversations();
-      }// else
-      //  deleteConversation(deleteConfirmationId);
-      setDeleteConfirmationId(null);
+  const handleConversationExecuteHistory = React.useCallback(async (conversationId: DConversationId) => {
+    await handleExecuteAndOutcome('generate-content', conversationId, 'chat-execute-history'); // replace with 'history', then 'generate-content'
+  }, [handleExecuteAndOutcome]);
+
+  const handleMessageRegenerateLastInFocusedPane = React.useCallback(async () => {
+    // Ctrl + Shift + Z
+    if (!focusedPaneConversationId) return;
+    const cHandler = ConversationsManager.getHandler(focusedPaneConversationId);
+    if (!cHandler.isValid()) return;
+    const inputHistory = cHandler.historyViewHeadOrThrow('chat-regenerate-shortcut');
+    if (!inputHistory.length) return;
+
+    // remove the last message if assistant's
+    const lastMessage = inputHistory[inputHistory.length - 1];
+    if (lastMessage.role === 'assistant')
+      cHandler.historyTruncateTo(lastMessage.id, -1);
+
+    // generate: NOTE: this will replace the system message correctly
+    await handleExecuteAndOutcome('generate-content', focusedPaneConversationId, 'chat-regenerate-last'); // truncate if assistant, then gen-text
+  }, [focusedPaneConversationId, handleExecuteAndOutcome]);
+
+  const handleMessageBeamLastInFocusedPane = React.useCallback(async () => {
+    // Ctrl + Shift + B
+    if (!focusedPaneConversationId) return;
+    const cHandler = ConversationsManager.getHandler(focusedPaneConversationId);
+    if (!cHandler.isValid()) return;
+    const inputHistory = cHandler.historyViewHeadOrThrow('chat-beam-shortcut');
+    if (!inputHistory.length) return;
+
+    // TODO: replace the Persona and Auto-Cache-hint in the history?
+
+    // replace the prompt in history
+    const lastMessage = inputHistory[inputHistory.length - 1];
+    if (lastMessage.role === 'assistant')
+      cHandler.beamInvoke(inputHistory.slice(0, -1), [lastMessage], lastMessage.id);
+    else if (lastMessage.role === 'user')
+      cHandler.beamInvoke(inputHistory, [], null);
+  }, [focusedPaneConversationId]);
+
+  const handleTextDiagram = React.useCallback((diagramConfig: DiagramConfig | null) => setDiagramConfig(diagramConfig), []);
+
+  const handleImagineFromText = React.useCallback(async (conversationId: DConversationId, subjectText: string) => {
+    const cHandler = ConversationsManager.getHandler(conversationId);
+    if (!cHandler.isValid()) return;
+    const userImagineMessage = createDMessagePlaceholderIncomplete('user', `Thinking at the subject...`); // [chat] append user:imagine prompt
+    cHandler.messageAppend(userImagineMessage);
+    await imaginePromptFromTextOrThrow(subjectText, conversationId)
+      .then(imaginedPrompt => {
+        // Replace the placeholder with the message to draw, then execute the draw
+        cHandler.messageFragmentReplace(userImagineMessage.id, userImagineMessage.fragments[0].fId, createTextContentFragment(imaginedPrompt), true);
+        return handleExecuteAndOutcome('generate-image', conversationId, 'chat-imagine-from-text'); // append message for 'imagine', then generate-image
+      })
+      .catch((error: any) => {
+        // Replace the placeholder with the error message
+        cHandler.messageFragmentReplace(userImagineMessage.id, userImagineMessage.fragments[0].fId, createErrorContentFragment(`Issue requesting an Image prompt. ${error?.message || ''}`), true);
+      });
+  }, [handleExecuteAndOutcome]);
+
+  const handleTextSpeak = React.useCallback(async (text: string): Promise<void> => {
+    await elevenLabsSpeakText(text, undefined, true, true);
+  }, []);
+
+
+  // Chat actions
+
+  const handleConversationNewInFocusedPane = React.useCallback((forceNoRecycle: boolean, isIncognito: boolean) => {
+
+    // create conversation (or recycle the existing top-of-stack empty conversation)
+    const conversationId = (recycleNewConversationId && !forceNoRecycle && !isIncognito)
+      ? recycleNewConversationId
+      : prependNewConversation(getConversationSystemPurposeId(focusedPaneConversationId) ?? undefined, isIncognito);
+
+    // switch the focused pane to the new conversation
+    handleOpenConversationInFocusedPane(conversationId);
+
+    // if a folder is active, add the new conversation to the folder
+    if (activeFolderId && conversationId)
+      useFolderStore.getState().addConversationToFolder(activeFolderId, conversationId);
+
+    // focus the composer
+    composerTextAreaRef.current?.focus();
+
+  }, [activeFolderId, focusedPaneConversationId, handleOpenConversationInFocusedPane, prependNewConversation, recycleNewConversationId]);
+
+  const handleConversationImportDialog = React.useCallback(() => setTradeConfig({ dir: 'import' }), []);
+
+  const handleConversationExport = React.useCallback((conversationId: DConversationId | null, exportAll: boolean) => {
+    setTradeConfig({ dir: 'export', conversationId, exportAll });
+  }, []);
+
+  const handleConversationsImportFromFiles = React.useCallback(
+    (files: File[] | null): Promise<void> =>
+      importConversationsFromFilesAtRest(files, true)
+        .then((outcome) => {
+          // activate the last (most recent) imported conversation
+          if (outcome.activateConversationId) {
+            showNextTitleChange.current = true;
+            handleOpenConversationInFocusedPane(outcome.activateConversationId);
+          }
+        })
+        .catch(() => {
+          addSnackbar({ key: 'chat-import-fail', message: 'Could not open file.', type: 'issue' });
+        }),
+    [handleOpenConversationInFocusedPane],
+  );
+
+  const handleConversationsImportFormFilePicker = React.useCallback(
+    () => openConversationsAtRestPicker().then(handleConversationsImportFromFiles),
+    [handleConversationsImportFromFiles],
+  );
+
+  const handleFileSaveConversation = React.useCallback((conversationId: DConversationId | null) => {
+    const conversation = getConversation(conversationId);
+    conversation && downloadSingleChat(conversation, 'json')
+      .then(() => {
+        addSnackbar({ key: 'chat-save-as-ok', message: 'File saved.', type: 'success' });
+      })
+      .catch((err: any) => {
+        if (err?.name !== 'AbortError')
+          addSnackbar({ key: 'chat-save-as-fail', message: `Could not save the file. ${err?.message || ''}`, type: 'issue' });
+      });
+  }, []);
+
+  const handleConversationBranch = React.useCallback((srcConversationId: DConversationId, messageId: string | null, addSplitPane: boolean): DConversationId | null => {
+    // clone data
+    const branchedConversationId = branchConversation(srcConversationId, messageId);
+
+    // if a folder is active, add the new conversation to the folder
+    if (activeFolderId && branchedConversationId)
+      useFolderStore.getState().addConversationToFolder(activeFolderId, branchedConversationId);
+
+    // replace/open a new pane with this
+    showNextTitleChange.current = true;
+    if (addSplitPane && isMultiAddable)
+      handleOpenConversationInSplitPane(branchedConversationId);
+    else
+      handleOpenConversationInFocusedPane(branchedConversationId);
+
+    return branchedConversationId;
+  }, [activeFolderId, branchConversation, handleOpenConversationInFocusedPane, handleOpenConversationInSplitPane, isMultiAddable]);
+
+  const handleConversationFlatten = React.useCallback((conversationId: DConversationId) => setFlattenConversationId(conversationId), []);
+
+  const handleConversationReset = React.useCallback(async (conversationId: DConversationId) => {
+    if (await showPromisedOverlay('chat-reset-confirmation', { rejectWithValue: false }, ({ onResolve, onUserReject }) =>
+      <ConfirmationModal
+        open onClose={onUserReject} onPositive={() => onResolve(true)}
+        confirmationText='This will clear all messages while keeping the current chat settings, model, and persona. Do you want to continue?'
+        positiveActionText='Restart Chat'
+        title='Restart Chat'
+      />,
+    )) {
+      ConversationsManager.getHandler(conversationId).historyClear();
     }
-  };
-  useGlobalShortcut('d', true, false, true, () => isConversationEmpty || setDeleteConfirmationId(activeConversationId));
+  }, [showPromisedOverlay]);
 
+  const handleDeleteConversations = React.useCallback(async (conversationIds: DConversationId[], bypassConfirmation: boolean) => {
 
-  // Pluggable ApplicationBar components
-
-  const centerItems = React.useMemo(() =>
-      <ChatDropdowns conversationId={activeConversationId} />,
-    [activeConversationId],
-  );
-
-  const drawerItems = React.useMemo(() =>
-      <ChatDrawerItems
-        conversationId={activeConversationId}
-        onImportConversation={handleImportConversation}
-        onDeleteAllConversations={handleDeleteAllConversations}
+    // show confirmation dialog
+    if (!bypassConfirmation && !await showPromisedOverlay('chat-delete-confirmation', { rejectWithValue: false }, ({ onResolve, onUserReject }) =>
+      <ConfirmationModal
+        open onClose={onUserReject} onPositive={() => onResolve(true)}
+        confirmationText={`Are you absolutely sure you want to delete ${conversationIds.length === 1 ? 'this conversation' : 'these conversations'}? This action cannot be undone.`}
+        positiveActionText={conversationIds.length === 1 ? 'Delete conversation' : `Yes, delete all ${conversationIds.length} conversations`}
       />,
-    [activeConversationId],
+    )) return;
+
+    // perform deletion, and return the next (or a new) conversation
+    const nextConversationId = deleteConversations(conversationIds, /*focusedSystemPurposeId ??*/ undefined);
+
+    // switch the focused pane to the new conversation - NOTE: this makes the assumption that deletion had impact on the focused pane
+    handleOpenConversationInFocusedPane(nextConversationId);
+
+    // run GC for dblobs in this conversation
+    void gcChatImageAssets(); // fire/forget
+  }, [showPromisedOverlay, deleteConversations, handleOpenConversationInFocusedPane]);
+
+
+  // Pluggable Optima components
+
+  const barAltTitle = showAltTitleBar ? focusedChatTitle ?? 'No Chat' : null;
+
+  const focusedBarContent = React.useMemo(() => beamOpenStoreInFocusedPane
+      ? <ChatBarAltBeam beamStore={beamOpenStoreInFocusedPane} isMobile={isMobile} />
+      : (barAltTitle === null)
+        ? <ChatBarDropdowns conversationId={focusedPaneConversationId} llmDropdownRef={llmDropdownRef} personaDropdownRef={personaDropdownRef} />
+        : <ChatBarAltTitle conversationId={focusedPaneConversationId} conversationTitle={barAltTitle} />
+    , [barAltTitle, beamOpenStoreInFocusedPane, focusedPaneConversationId, isMobile],
   );
 
-  const menuItems = React.useMemo(() =>
-      <ChatMenuItems
-        conversationId={activeConversationId} isConversationEmpty={isConversationEmpty} hasConversations={hasAnyContent}
-        isMessageSelectionMode={isMessageSelectionMode} setIsMessageSelectionMode={setIsMessageSelectionMode}
-        onClearConversation={handleClearConversation}
-        onDuplicateConversation={duplicateConversation}
-        onExportConversation={handleExportConversation}
-        onFlattenConversation={handleFlattenConversation}
+
+  // Disabled by default, as it lags the opening of the drawer and immediatly vanishes during the closing animation
+  const isDrawerOpen = true; // useOptimaDrawerOpen();
+
+  const drawerContent = React.useMemo(() => !isDrawerOpen ? null :
+      <ChatDrawerMemo
+        // isMobile={isMobile /* expensive as it undoes the memo; not passed anymore */}
+        activeConversationId={focusedPaneConversationId}
+        activeFolderId={activeFolderId}
+        chatPanesConversationIds={paneUniqueConversationIds}
+        disableNewButton={disableNewButton}
+        onConversationActivate={handleOpenConversationInFocusedPane}
+        onConversationBranch={handleConversationBranch}
+        onConversationNew={handleConversationNewInFocusedPane}
+        onConversationsDelete={handleDeleteConversations}
+        onConversationsExportDialog={handleConversationExport}
+        onConversationsImportDialog={handleConversationImportDialog}
+        setActiveFolderId={setActiveFolderId}
       />,
-    [activeConversationId, duplicateConversation, hasAnyContent, isConversationEmpty, isMessageSelectionMode],
+    [activeFolderId, disableNewButton, focusedPaneConversationId, handleConversationBranch, handleConversationExport, handleConversationImportDialog, handleConversationNewInFocusedPane, handleDeleteConversations, handleOpenConversationInFocusedPane, isDrawerOpen, paneUniqueConversationIds],
   );
 
-  useLayoutPluggable(centerItems, drawerItems, menuItems);
+  const focusedMenuItems = React.useMemo(() =>
+      <ChatPane
+        conversationId={focusedPaneConversationId}
+        disableItems={!focusedPaneConversationId || isFocusedChatEmpty}
+        hasConversations={hasConversations}
+        isMessageSelectionMode={isMessageSelectionMode}
+        isVerticalSplit={isMobile || isTallScreen}
+        onConversationBranch={handleConversationBranch}
+        onConversationClear={handleConversationReset}
+        onConversationFlatten={handleConversationFlatten}
+        // onConversationNew={handleConversationNewInFocusedPane}
+        setIsMessageSelectionMode={setIsMessageSelectionMode}
+      />,
+    [focusedPaneConversationId, handleConversationBranch, handleConversationFlatten, handleConversationReset, hasConversations, isFocusedChatEmpty, isMessageSelectionMode, isMobile, isTallScreen],
+  );
+
+  useSetOptimaAppMenu(focusedMenuItems, 'AppChat');
+
+
+  // Effects
+
+  // [effect] Handle the conversation intent
+  React.useEffect(() => {
+    // Debug: open a null chat
+    if (Release.IsNodeDevBuild && intent.initialConversationId === 'null')
+      openConversationInFocusedPane(null! /* for debugging purporse */);
+    // Open the initial conversation if set
+    else if (intent.initialConversationId)
+      openConversationInFocusedPane(intent.initialConversationId);
+    // Create a new chat if requested
+    else if (intent.newChat !== undefined)
+      handleConversationNewInFocusedPane(false, false);
+  }, [handleConversationNewInFocusedPane, intent.initialConversationId, intent.newChat, openConversationInFocusedPane]);
+
+  // [effect] Show snackbar with the focused chat title after a history navigation in focused pane
+  React.useEffect(() => {
+    if (showNextTitleChange.current) {
+      showNextTitleChange.current = false;
+      const title = (focusedChatNumber >= 0 ? `#${focusedChatNumber + 1} · ` : '') + (focusedChatTitle || 'New Chat');
+      const id = addSnackbar({ key: 'focused-title', message: title, type: 'center-title' });
+      return () => removeSnackbar(id);
+    }
+  }, [focusedChatNumber, focusedChatTitle]);
+
+
+  // Shortcuts
+
+  const handleOpenChatLlmOptions = React.useCallback(() => {
+    const chatLLMId = getChatLLMId();
+    if (!chatLLMId) return;
+    optimaActions().openModelOptions(chatLLMId);
+  }, []);
+
+  const handleMoveFocus = React.useCallback((direction: number, wholeList?: boolean) => {
+    // find the parent list
+    let messageListElement: HTMLElement | null;
+    let withinBeam = false;
+    const activeElement = document.activeElement as HTMLElement;
+    if (activeElement) {
+      messageListElement = document.querySelector('[role=beam-list]') as HTMLElement;
+      if (!messageListElement)
+        messageListElement = activeElement.closest('[role=chat-messages-list]') as HTMLElement;
+      else
+        withinBeam = true;
+    } else
+      messageListElement = document.querySelector('[role=chat-messages-list]') as HTMLElement;
+    if (!messageListElement) return;
+
+    // find the scrollable container and if we're at the bottom
+    const scrollContainer = messageListElement.closest('[role=scrollable]') as HTMLElement;
+    if (!scrollContainer) return;
+    const isAtBottom = Math.abs(scrollContainer.scrollHeight - scrollContainer.scrollTop - scrollContainer.clientHeight) < 1;
+
+    // determine the current message and next index
+    const messageElements = Array.from(messageListElement.querySelectorAll(withinBeam ? '[role=beam-card]' : '[role=chat-message]')) as HTMLElement[];
+    const currentIndex = messageElements.findIndex(el => el.contains(activeElement));
+
+    // if going down and we're at/past the last message, scroll to bottom
+    const snapToBottom = direction > 0 && (wholeList || (currentIndex === -1 || currentIndex >= messageElements.length - 1));
+    const nextIndex = (wholeList && direction < 0) ? 0
+      : snapToBottom ? messageElements.length - 1
+        : (isAtBottom && direction < 0) ? currentIndex
+          : currentIndex === -1 ? (direction < 0 ? 0 : messageElements.length - 1)
+            : currentIndex + direction;
+    if (nextIndex < 0 || nextIndex >= messageElements.length) return;
+
+    // perform the smooth scroll and focus
+    const targetElement = messageElements[nextIndex];
+    targetElement.focus({ preventScroll: true, focusVisible: true } as FocusOptions);
+    targetElement.scrollIntoView({ behavior: 'smooth', block: snapToBottom ? 'end' : 'start' });
+  }, []);
+
+  useGlobalShortcuts('AppChat', React.useMemo(() => [
+    // focused conversation
+    { key: 'z', ctrl: true, shift: true, disabled: isFocusedChatEmpty, action: handleMessageRegenerateLastInFocusedPane, description: 'Retry' },
+    { key: 'b', ctrl: true, shift: true, disabled: isFocusedChatEmpty, action: handleMessageBeamLastInFocusedPane, description: 'Beam Edit' },
+    { key: 'o', ctrl: true, action: handleConversationsImportFormFilePicker },
+    { key: 's', ctrl: true, action: () => handleFileSaveConversation(focusedPaneConversationId) },
+    { key: 'n', ctrl: true, shift: true, action: () => handleConversationNewInFocusedPane(false, false) },
+    { key: 'x', ctrl: true, shift: true, action: () => isFocusedChatEmpty || (focusedPaneConversationId && handleConversationReset(focusedPaneConversationId)) },
+    { key: 'd', ctrl: true, shift: true, action: () => focusedPaneConversationId && handleDeleteConversations([focusedPaneConversationId], false) },
+    { key: '[', ctrl: true, action: () => handleNavigateHistoryInFocusedPane('back') },
+    { key: ']', ctrl: true, action: () => handleNavigateHistoryInFocusedPane('forward') },
+    // change active message (in any possible panel)
+    { key: ShortcutKey.Up, ctrl: true, action: () => handleMoveFocus(-1) },
+    { key: ShortcutKey.Down, ctrl: true, action: () => handleMoveFocus(1) },
+    { key: ShortcutKey.Up, ctrl: true, shift: true, action: () => handleMoveFocus(-1, true) },
+    { key: ShortcutKey.Down, ctrl: true, shift: true, action: () => handleMoveFocus(1, true) },
+    // open the dropdowns
+    { key: 'l', ctrl: true, action: () => llmDropdownRef.current?.openListbox() /*, description: 'Open Models Dropdown'*/ },
+    { key: 'p', ctrl: true, action: () => personaDropdownRef.current?.openListbox() /*, description: 'Open Persona Dropdown'*/ },
+    // focused conversation llm
+    { key: 'o', ctrl: true, shift: true, action: handleOpenChatLlmOptions },
+  ], [focusedPaneConversationId, handleConversationNewInFocusedPane, handleConversationReset, handleConversationsImportFormFilePicker, handleDeleteConversations, handleFileSaveConversation, handleMessageBeamLastInFocusedPane, handleMessageRegenerateLastInFocusedPane, handleMoveFocus, handleNavigateHistoryInFocusedPane, handleOpenChatLlmOptions, isFocusedChatEmpty]));
+
 
   return <>
+    <OptimaDrawerIn>{drawerContent}</OptimaDrawerIn>
+    <OptimaToolbarIn>{focusedBarContent}</OptimaToolbarIn>
 
-    <ChatMessageList
-      conversationId={activeConversationId}
-      isMessageSelectionMode={isMessageSelectionMode} setIsMessageSelectionMode={setIsMessageSelectionMode}
-      onExecuteChatHistory={handleExecuteChatHistory}
-      onDiagramFromText={handleDiagramFromText}
-      onImagineFromText={handleImagineFromText}
-      sx={{
-        flexGrow: 1,
-        backgroundColor: 'background.level1',
-        overflowY: 'auto', // overflowY: 'hidden'
-        minHeight: 96,
-      }} />
+    <PanelGroup
+      direction={(isMobile || isTallScreen) ? 'vertical' : 'horizontal'}
+      id='app-chat-panels'
+    >
 
-    <Ephemerals
-      conversationId={activeConversationId}
-      sx={{
-        // flexGrow: 0.1,
-        flexShrink: 0.5,
-        overflowY: 'auto',
-        minHeight: 64,
-      }} />
+      {chatPanes.map((pane, idx) => {
+        const _paneIsFocused = idx === focusedPaneIndex;
+        const _paneConversationId = pane.conversationId;
+        const _paneChatHandler = paneHandlers[idx] ?? null;
+        const _paneIsIncognito = _paneChatHandler?.isIncognito() ?? false;
+        const _paneBeamStoreApi = paneBeamStores[idx] ?? null;
+        const _paneBeamIsOpen = !!beamsOpens?.[idx] && !!_paneBeamStoreApi;
+        const _panesCount = chatPanes.length;
+        const _keyAndId = `chat-pane-${pane.paneId}`;
+        const _sepId = `sep-pane-${idx}`;
+        return <WorkspaceIdProvider conversationId={_paneIsFocused ? _paneConversationId : null} key={_keyAndId}>
+
+          <Panel
+            id={_keyAndId}
+            order={idx}
+            collapsible={chatPanes.length === 2}
+            defaultSize={(_panesCount === 3 && idx === 1) ? 34 : Math.round(100 / _panesCount)}
+            minSize={20}
+            onClick={(event) => {
+              const setFocus = chatPanes.length < 2 || !event.altKey;
+              setFocusedPaneIndex(setFocus ? idx : -1);
+            }}
+            onCollapse={() => {
+              // NOTE: despite the delay to try to let the draggin settle, there seems to be an issue with the Pane locking the screen
+              // setTimeout(() => removePane(idx), 50);
+              // more than 2 will result in an assertion from the framework
+              if (chatPanes.length === 2) removePane(idx);
+            }}
+            style={{
+              // for anchoring the scroll button in place
+              position: 'relative',
+              ...(isMultiPane ? {
+                borderRadius: '0.375rem',
+                border: `2px solid ${_paneIsFocused
+                  ? ((willMulticast || !isMultiConversationId) ? theme.palette.primary.solidBg : theme.palette.primary.solidBg)
+                  : ((willMulticast || !isMultiConversationId) ? theme.palette.primary.softActiveBg : theme.palette.background.level1)}`,
+                // DISABLED on 2024-03-13, it gets in the way quite a lot
+                // filter: (!willMulticast && !_paneIsFocused)
+                //   ? (!isMultiConversationId ? 'grayscale(66.67%)' /* clone of the same */ : 'grayscale(66.67%)')
+                //   : undefined,
+              } : {
+                // NOTE: this is a workaround for the 'stuck-after-collapse-close' issue. We will collapse the 'other' pane, which
+                // will get it removed (onCollapse), and somehow this pane will be stuck with a pointerEvents: 'none' style, which de-facto
+                // disables further interaction with the chat. This is a workaround to re-enable the pointer events.
+                // The root cause seems to be a Dragstate not being reset properly, however the pointerEvents has been set since 0.0.56 while
+                // it was optional before: https://github.com/bvaughn/react-resizable-panels/issues/241
+                pointerEvents: 'auto',
+              }),
+              ...((_paneIsIncognito && {
+                backgroundColor: theme.palette.background.level3,
+              })),
+            }}
+          >
+
+            <ScrollToBottom
+              bootToBottom
+              stickToBottomInitial
+              disableAutoStick={isMobile && _paneBeamIsOpen}
+              sx={scrollToBottomSx}
+            >
+
+              {!_paneBeamIsOpen && (
+                <ChatMessageList
+                  conversationId={_paneConversationId}
+                  conversationHandler={_paneChatHandler}
+                  capabilityHasT2I={capabilityHasT2I}
+                  chatLLMAntPromptCaching={chatLLM?.interfaces?.includes(LLM_IF_ANT_PromptCaching) ?? false}
+                  chatLLMContextTokens={chatLLM?.contextTokens ?? null}
+                  chatLLMSupportsImages={chatLLM?.interfaces?.includes(LLM_IF_OAI_Vision) ?? false}
+                  fitScreen={isMobile || isMultiPane}
+                  isMobile={isMobile}
+                  isMessageSelectionMode={isMessageSelectionMode}
+                  setIsMessageSelectionMode={setIsMessageSelectionMode}
+                  onConversationBranch={handleConversationBranch}
+                  onConversationExecuteHistory={handleConversationExecuteHistory}
+                  onConversationNew={handleConversationNewInFocusedPane}
+                  onTextDiagram={handleTextDiagram}
+                  onTextImagine={handleImagineFromText}
+                  onTextSpeak={handleTextSpeak}
+                  sx={chatMessageListSx}
+                />
+              )}
+
+              {_paneBeamIsOpen && (
+                <ChatBeamWrapper
+                  beamStore={_paneBeamStoreApi}
+                  isMobile={isMobile}
+                  inlineSx={chatBeamWrapperSx}
+                />
+              )}
+
+              {/* Visibility and actions are handled via Context */}
+              <ScrollToBottomButton />
+
+            </ScrollToBottom>
+
+          </Panel>
+
+          {/* Panel Separators & Resizers */}
+          {idx < _panesCount - 1 && (
+            <PanelResizeHandle id={_sepId}>
+              <PanelResizeInset />
+            </PanelResizeHandle>
+          )}
+
+        </WorkspaceIdProvider>;
+      })}
+
+    </PanelGroup>
 
     <Composer
-      conversationId={activeConversationId} messageId={null}
-      isDeveloperMode={systemPurposeId === 'Developer'}
+      isMobile={isMobile}
+      chatLLM={chatLLM}
       composerTextAreaRef={composerTextAreaRef}
-      onNewMessage={handleComposerNewMessage}
-      sx={{
-        zIndex: 21, // position: 'sticky', bottom: 0,
-        backgroundColor: 'background.surface',
-        borderTop: `1px solid`,
-        borderTopColor: 'divider',
-        p: { xs: 1, md: 2 },
-      }} />
-
+      targetConversationId={focusedPaneConversationId}
+      capabilityHasT2I={capabilityHasT2I}
+      isMulticast={!isMultiConversationId ? null : isComposerMulticast}
+      isDeveloperMode={isFocusedChatDeveloper}
+      onAction={handleComposerAction}
+      onConversationsImportFromFiles={handleConversationsImportFromFiles}
+      onTextImagine={handleImagineFromText}
+      setIsMulticast={setIsComposerMulticast}
+      sx={beamOpenStoreInFocusedPane ? composerClosedSx : composerOpenSx}
+    />
 
     {/* Diagrams */}
-    {!!diagramConfig && <DiagramsModal config={diagramConfig} onClose={() => setDiagramConfig(null)} />}
+    {!!diagramConfig && (
+      <DiagramsModal
+        config={diagramConfig}
+        onClose={() => setDiagramConfig(null)}
+      />
+    )}
 
     {/* Flatten */}
-    {!!flattenConversationId && <FlattenerModal conversationId={flattenConversationId} onClose={() => setFlattenConversationId(null)} />}
+    {!!flattenConversationId && (
+      <FlattenerModal
+        conversationId={flattenConversationId}
+        onConversationBranch={handleConversationBranch}
+        onClose={() => setFlattenConversationId(null)}
+      />
+    )}
 
     {/* Import / Export  */}
-    {!!tradeConfig && <TradeModal config={tradeConfig} onClose={() => setTradeConfig(null)} />}
-
-
-    {/* [confirmation] Reset Conversation */}
-    {!!clearConfirmationId && <ConfirmationModal
-      open onClose={() => setClearConfirmationId(null)} onPositive={handleConfirmedClearConversation}
-      confirmationText={'Are you sure you want to discard all the messages?'} positiveActionText={'Clear conversation'}
-    />}
-
-    {/* [confirmation] Delete All */}
-    {!!deleteConfirmationId && <ConfirmationModal
-      open onClose={() => setDeleteConfirmationId(null)} onPositive={handleConfirmedDeleteConversation}
-      confirmationText={deleteConfirmationId === SPECIAL_ID_ALL_CHATS
-        ? 'Are you absolutely sure you want to delete ALL conversations? This action cannot be undone.'
-        : 'Are you sure you want to delete this conversation?'}
-      positiveActionText={deleteConfirmationId === SPECIAL_ID_ALL_CHATS
-        ? 'Yes, delete all'
-        : 'Delete conversation'}
-    />}
+    {!!tradeConfig && (
+      <TradeModal
+        config={tradeConfig}
+        onConversationActivate={handleOpenConversationInFocusedPane}
+        onClose={() => setTradeConfig(null)}
+      />
+    )}
 
   </>;
 }

src/apps/chat/commands.ts

@@ -1,40 +0,0 @@
-import { CmdRunProdia } from '~/modules/prodia/prodia.client';
-import { CmdRunReact } from '~/modules/aifn/react/react';
-import { CmdRunSearch } from '~/modules/google/search.client';
-
-export const CmdAddRoleMessage: string[] = ['/assistant', '/a', '/system', '/s'];
-
-export const commands = [...CmdRunProdia, ...CmdRunReact, ...CmdRunSearch, ...CmdAddRoleMessage];
-
-export interface SentencePiece {
-  type: 'text' | 'cmd';
-  value: string;
-}
-
-/**
- * Sentence to pieces (must have a leading slash) from the provided text
- * Used by rendering functions, as well as input processing functions.
- */
-export function extractCommands(input: string): SentencePiece[] {
-  const regexFromTags = commands.map(tag => `^\\${tag} `).join('\\b|') + '\\b';
-  const pattern = new RegExp(regexFromTags, 'g');
-  const result: SentencePiece[] = [];
-  let lastIndex = 0;
-  let match: RegExpExecArray | null;
-
-  while ((match = pattern.exec(input)) !== null) {
-    if (match.index !== lastIndex)
-      result.push({ type: 'text', value: input.substring(lastIndex, match.index) });
-    result.push({ type: 'cmd', value: match[0].trim() });
-    lastIndex = pattern.lastIndex;
-
-    // Remove the space after the matched tag
-    if (input[lastIndex] === ' ')
-      lastIndex++;
-  }
-
-  if (lastIndex !== input.length)
-    result.push({ type: 'text', value: input.substring(lastIndex) });
-
-  return result;
-}