Merge branch 'release-1.9.0'

- Optima Layout: new Context based pluggable layout system
   - Now children have context functions, for better behaviors
   - Removed `store-applayout`
   - using withLayout on top-level Pages
 - ScrollToBottom: grounds-up subsystem for smooth scrolling with snap-to-bottom
 - Panes subsystem: use react-resizeable-panels together with our Panes subsystem
   - New: Split window chats, Drag to close windows, Button to split
   - using: https://github.com/bvaughn/react-resizable-panels
 - Cosmetic: Colors: update Light and Dark themes
 - Bootstrap Logic provider: will enable Mobile use cases
 - Removed NoSSR (the backend provided natually acts as the same)
 - Next load progress: loading indicator for slower pages (>300ms)
 - withLayout() system

Additional benefits include: no-pluggable-flashing, pane-ready,
fixed X-scrolling on Firefox, and more.

Closes #308, #304, #255, #59.
Progress on #305, #201, #296, #233, #208, #203.

.github/ISSUE_TEMPLATE/maintainers-release.md

@@ -9,18 +9,22 @@ assignees: enricoros
 
 ## Release checklist:
 
+- [x] Create a new [Release Issue](https://github.com/enricoros/big-AGI/issues/new?assignees=enricoros&projects=enricoros/4&template=maintainers-release.md&title=Release+1.2.3)
+  - [ ] Replace 1.1.0 with the _former_ release, and _1.2.3_ with THIS
 - [ ] Update the [Roadmap](https://github.com/users/enricoros/projects/4/views/2) calling out shipped features
 - [ ] Create and update a [Milestone](https://github.com/enricoros/big-agi/milestones) for the release
   - [ ] Assign this task
   - [ ] Assign all the shipped roadmap Issues
   - [ ] Assign the relevant [recently closed Isssues](https://github.com/enricoros/big-agi/issues?q=is%3Aclosed+sort%3Aupdated-desc)
 - Code changes:
-  - [ ] Create a release branch 'release-x.y.z', 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 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)
+  - [ ] Copy the highlights to the [docs/changelog.md](/docs/changelog.md)
 - Release:
   - [ ] merge onto main
   - [ ] verify deployment on Vercel
@@ -32,26 +36,61 @@ assignees: enricoros
   - [ ] Discord announcement
   - [ ] Twitter announcement
 
-## Artifacts
+### Links
 
-1) first copy and paste the former release `discord announcement`, `news.data.ts`, `changelog.md`, `README.md`
-2) then copy and paste the milestone and each indivdual issue (content will be downloaded)
-3) then paste the git changelog 1.2.2...1.2.3
+- Milestone: https://github.com/enricoros/big-AGI/milestone/X
+- GitHub release: https://github.com/enricoros/big-AGI/releases/tag/vX.Y.Z
+- Former release task: https://github.com/enricoros/big-AGI/issues/XXX
 
-### news.data.tsx
+## 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/main/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, changelog.md).
+```
+
+- paste the former: `discord announcement`,
+- `GitHub release`,
+- `news.data.tsx`,
+- `changelog.md`
+
+```markdown
+The following are the new developments for 1.2.3:
+```
+
+- paste the link to the milestone (closed) and each individual issue (content will be downloaded)
+- paste the git changelog  `git log v1.1.0..v1.2.3 | clip`
+
+### news.data.TSX
 
 ```markdown
 I need the following from you:
 
-1. a table summarizing all the new features in 1.2.3, which will be used for the artifacts later
+1. a table summarizing all the new features in 1.2.3 (description, significance, usefulness, do not link the commit, but have the issue number), which will be used for the artifacts later
 2. after the table score each feature from a user impact and magnitude point of view
-3. Improve the table, in decreasing order of importance for features, fixing any detail that's missing
+3. 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
 4. I want you then to update the news.data.tsx for the new release
 ```
 
 ### GitHub release
 
-Now paste the former release (or 1.5.0 which was accurate and great), including the new contributors and
+```markdown
+Please create the 1.2.3 Release Notes for GitHub.
+Use a truthful and honest tone, understanding that people's time and attention span is short.
+Today is 2024-1-1.
+```
+
+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

.github/workflows/docker-image.yml

@@ -7,11 +7,15 @@
 # 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:
+      - main
+      #- main-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
@@ -26,7 +30,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Log in to the Container registry
         uses: docker/login-action@65b78e6e13532edd9afa3aa52ac7964289d1a9c1
@@ -40,11 +44,17 @@ jobs:
         uses: docker/metadata-action@9ec57ed1fcdbf14dcef7dfbe97b2010124a938b7
         with:
           images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: |
+            type=raw,value=development,enable=${{ github.ref == 'refs/heads/main' }}
+            type=raw,value=stable,enable=${{ github.ref == 'refs/heads/main-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
 
       - name: Build and push Docker image
         uses: docker/build-push-action@f2a1d5e99d037542a71f64918e516c093c6f3fc4
         with:
           context: .
+          file: Dockerfile
           push: true
           tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
+          labels: ${{ steps.meta.outputs.labels }}

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,8 +1,8 @@
 # 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,
+Welcome to big-AGI 👋, the GPT application for professionals that need function, form,
+simplicity, and speed. Powered by the latest models from 8 vendors and
+open-source model servers, `big-AGI` offers best-in-class Voice and Chat with AI Personas,
 visualizations, coding, drawing, calling, and quite more -- all in a polished UX.
 
 Pros use big-AGI. 🚀 Developers love big-AGI. 🤖
@@ -11,7 +11,7 @@ Pros use big-AGI. 🚀 Developers love big-AGI. 🤖
 
 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)
 
 ## 👉 [roadmap](https://github.com/users/enricoros/projects/4/views/2)
 
@@ -21,30 +21,32 @@ shows the current developments and future ideas.
 - 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_
 
-### What's New in 1.6.0 - Nov 28, 2023 🌟
+### What's New in 1.9.0 · Dec 28, 2023 · Creative Horizons
 
-- **Web Browsing**: Download web pages within chats - [browsing guide](https://github.com/enricoros/big-agi/blob/main/docs/config-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
+- **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.5.0 - Nov 19, 2023
+### What's New in 1.8.0 · Dec 20, 2023
 
-- **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
+- **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
 
-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... ?
+
+> [To The Moon And Back, Attachment Theory, Surf's Up, Loaded, and more releases...](docs/changelog.md).  
+> Check out the [big-AGI open roadmap](https://github.com/users/enricoros/projects/4/views/2)
 
 ## ✨ Key Features 👊
 
@@ -82,7 +84,8 @@ the [past releases changelog](docs/changelog.md).
 ![React](https://img.shields.io/badge/React-61DAFB?style=&logo=react&logoColor=black)
 ![Next.js](https://img.shields.io/badge/Next.js-000000?style=&logo=vercel&logoColor=white)
 
-Clone this repo, install the dependencies, and run the development server:
+Clone this repo, install the dependencies (all locally), and run the development server (which auto-watches the
+files for changes):
 
 ```bash
 git clone https://github.com/enricoros/big-agi.git
@@ -91,15 +94,23 @@ npm install
 npm run dev
 ```
 
-The app will be running on `http://localhost:3000`
+The development app will be running on `http://localhost:3000`. Development builds have the advantage of not requiring
+a build step, but can be slower than production builds. Also, development builds won't have timeout on edge functions.
 
-Integrations:
+## 🌐 Deploy manually
 
-* 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
+The _production_ build of the application is optimized for performance and is performed by the `npm run build` command,
+after installing the required dependencies.
+
+```bash
+# .. repeat the steps above up to `npm install`, then:
+npm run build
+npm run start --port 3000
+```
+
+The app will be running on the specified port, e.g. `http://localhost:3000`.
+
+Want to deploy with username/password? See the [Authentication](docs/deploy-authentication.md) guide.
 
 ## 🐳 Deploy with Docker
 
@@ -115,7 +126,7 @@ 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`
+- or, with docker-compose: `docker-compose up` or see [the documentation](docs/deploy-docker.md) for a composer file with integrated browsing
 
 ## ☁️ Deploy on Cloudflare Pages
 
@@ -125,9 +136,15 @@ Please refer to the [Cloudflare deployment documentation](docs/deploy-cloudflare
 
 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.)
+[![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)
 
+## Integrations:
 
+* 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
 
 <br/>
 

app/api/llms/stream/route.ts

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

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/changelog.md

@@ -5,12 +5,45 @@ by release.
 
 - For the live roadmap, please see [the GitHub project](https://github.com/users/enricoros/projects/4/views/2)
 
-### 1.7.0 - Dec 2023
+### 1.10.0 - Jan 2024
 
+- milestone: [1.10.0](https://github.com/enricoros/big-agi/milestone/10)
 - 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)
-- milestone: [1.7.0](https://github.com/enricoros/big-agi/milestone/7)
 
-### ✨ What's New in 1.6.0 👊 - Nov 28, 2023
+### 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-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 and Oobabooga 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-browse.md)
 - **Branching Discussions**: Create new conversations from any message
@@ -20,7 +53,7 @@ by release.
 - **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
+### 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

docs/config-browse.md

@@ -3,25 +3,68 @@
 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 this 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
+
 First of all, you need to procure a Puppteer web browsing service endpoint. `big-AGI` supports services like:
 
-- [BrightData](https://brightdata.com/products/scraping-browser) Scraping Browser
-- [Cloudflare](https://developers.cloudflare.com/browser-rendering/) Browser Rendering, or
-- any other Puppeteer-based service that provides a WebSocket endpoint (WSS)
-- **including [your own browser](#your-own-chrome-browser)**
+| 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 and has a WebSocket endpoint available:
-    - this mustbe in the form: `wss://${auth}@{some host}:{port}`
+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** and enter the 'wss://...' connection
-   string provided by your browsing service
+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
+   - **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.
+
+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
 
@@ -33,26 +76,6 @@ Always deploy your own user authentication, authorization and security solution.
 route that provides browsing service, shall be secured with a user authentication and authorization solution,
 to prevent unauthorized access to the browsing service.
 
-### 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 above)
-
-## Usage
-
-Once configured, you can start using the browse functionality:
-
-- **Paste a URL**: Simply paste a URL into the chat, and `big-AGI` will load the page if the Attach URLs feature is enabled
-- **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
-
 ## Support
 
 If you encounter any issues or have questions about configuring the browse functionality, join our community on Discord for support and discussions.

docs/config-local-localai.md

@@ -30,5 +30,5 @@ For instance with [Use luna-ai-llama2 with docker compose](https://localai.io/ba
 
 > 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)
+> Please update the [src/modules/llms/transports/server/openai/models.data.ts](../src/modules/llms/server/openai/models.data.ts)
 > file with the mapping information between LocalAI model IDs and names/descriptions/tokens, etc.

docs/config-local-oobabooga.md

@@ -4,7 +4,7 @@ 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_
+_Last updated on Dec 7, 2023_
 
 ### Components
 
@@ -20,26 +20,31 @@ This guide assumes that **big-AGI** is already installed on your system. Note th
 
 ### 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
+1. Install [text-generation-webui](https://github.com/oobabooga/text-generation-webui#Installation):
+    - Follow the instructions in the official page (basicall clone the repo and run a script) [~10 minutes]
+    - Stop the Web UI as we need to modify the startup flags to enable the OpenAI API
 2. Enable the **openai extension**
     - Edit `CMD_FLAGS.txt`
-    - Make sure that `--listen --extensions openai` is present and uncommented 
+    - Make sure that `--listen --api` 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:
+      2023-12-07 21:51:21 INFO:Loading the extension "openai"...
+      2023-12-07 21:51:21 INFO:OpenAI-compatible API URL:
       
-      http://0.0.0.0:5000/v1
+      http://0.0.0.0:5000 
+      ...
+      INFO:     Uvicorn running on http://0.0.0.0:5000 (Press CTRL+C to quit)
+      Running on local URL:  http://0.0.0.0:7860
       ```
-    - The OpenAI API is now running on port 5000, on both localhost (127.0.0.1) and your network IP address
+    - This shows that:
+      - The Web UI is running on port 7860: http://127.0.0.1:7860
+      - **The OpenAI API is running on port 5000: http://127.0.0.1:5000**
 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
+    - Download, for instance, `TheBloke/Llama-2-7B-Chat-GPTQ`
     - Select the model once it's loaded
 
 ### Integrating text-web-ui with big-AGI:
@@ -51,4 +56,6 @@ This guide assumes that **big-AGI** is already installed on your system. Note th
         - 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
 
+![config-oobabooga-0.png](pixels/config-oobabooga-0.png)
+
 Enjoy the privacy and flexibility of local LLMs with `big-AGI` and `text-generation-webui`!

docs/config-ollama.md

@@ -5,31 +5,46 @@ 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
+**Visual Configuration Guide**:
 
-For detailed instructions on setting up the Ollama API server, please refer to the
-[Ollama download page](https://ollama.ai/download) and [instructions for linux](https://github.com/jmorganca/ollama/blob/main/docs/linux.md).
+* After adding the `Ollama` model vendor, entering the IP address of an Ollama server, and refreshing models:<br/>
+  <img src="pixels/config-ollama-1-models.png" alt="config-local-ollama-1-models.png" width="320">
 
-### Visual Guide
+* The `Ollama` admin panel, with the `Pull` button highlighted, after pulling the "Yi" model:<br/>
+  <img src="pixels/config-ollama-2-admin-pull.png" alt="config-local-ollama-2-admin-pull.png" width="320">
 
-* After adding the `Ollama` model vendor, entering the IP address of an Ollama server, and refreshing models:
-  <img src="pixels/config-ollama-1-models.png" alt="config-local-ollama-1-models.png" style="max-width: 320px;">
+* You can now switch model/persona dynamically and text/voice chat with the models:<br/>
+  <img src="pixels/config-ollama-3-chat.png" alt="config-local-ollama-3-chat.png" width="320">
 
-* The `Ollama` admin panel, with the `Pull` button highlighted, after pulling the "Yi" model:
-  <img src="pixels/config-ollama-2-admin-pull.png" alt="config-local-ollama-2-admin-pull.png" style="max-width: 320px;">
+<br/>
 
-* 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;">
+### ⚠️ 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
 
@@ -68,6 +83,8 @@ Then, edit the nginx configuration file `/etc/nginx/sites-enabled/default` and a
 
 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 +95,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/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](../README.md#-deploy-manually) 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-docker.md

@@ -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,31 @@ 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-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/>
+
+### 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/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/environment-variables.md

@@ -9,10 +9,6 @@ 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
@@ -28,6 +24,8 @@ AZURE_OPENAI_API_ENDPOINT=
 AZURE_OPENAI_API_KEY=
 ANTHROPIC_API_KEY=
 ANTHROPIC_API_HOST=
+GEMINI_API_KEY=
+MISTRAL_API_KEY=
 OLLAMA_API_HOST=
 OPENROUTER_API_KEY=
 
@@ -45,6 +43,13 @@ GOOGLE_CLOUD_API_KEY=
 GOOGLE_CSE_ID=
 # Browse
 PUPPETEER_WSS_ENDPOINT=
+
+# Backend Analytics
+BACKEND_ANALYTICS=
+
+# Backend HTTP Basic Authentication (see `deploy-authentication.md` for turning on authentication)
+HTTP_BASIC_AUTH_USERNAME=
+HTTP_BASIC_AUTH_PASSWORD=
 ```
 
 ## Variables Documentation
@@ -76,6 +81,8 @@ requiring the user to enter an API key
 | `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                                                          |
+| `GEMINI_API_KEY`            | The API key for Google AI's Gemini                                                                                            | Optional                                                          |
+| `MISTRAL_API_KEY`           | The API key for Mistral                                                                                                       | 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                                                          |
 
@@ -95,21 +102,22 @@ It is currently supported for:
 
 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 ...'                                                                               |
-| **Browse**               |                                                                                                                         |
-| `PUPPETEER_WSS_ENDPOINT` | Puppeteer WebSocket endpoint - used for browsing, etc.                                                                  |
+| 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 ...'                                                                               |
+| **Browse**                 |                                                                                                                         |
+| `PUPPETEER_WSS_ENDPOINT`   | Puppeteer WebSocket endpoint - used for browsing, etc.                                                                  |
+| **Backend**                |                                                                                                                         | 
+| `BACKEND_ANALYTICS`        | Semicolon-separated list of analytics flags (see backend.analytics.ts). Flags: `domain` logs the responding domain.     |
+| `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.                                                                                 |
 
 ---
-
-
-

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..
+  ],
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "big-agi",
-  "version": "1.6.0",
+  "version": "1.9.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -18,13 +18,13 @@
     "@emotion/react": "^11.11.1",
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.14.18",
-    "@mui/joy": "^5.0.0-beta.15",
-    "@next/bundle-analyzer": "^14.0.3",
-    "@prisma/client": "^5.6.0",
+    "@mui/icons-material": "^5.15.1",
+    "@mui/joy": "^5.0.0-beta.19",
+    "@next/bundle-analyzer": "^14.0.4",
+    "@prisma/client": "^5.7.1",
     "@sanity/diff-match-patch": "^3.1.1",
     "@t3-oss/env-nextjs": "^0.7.1",
-    "@tanstack/react-query": "^4.36.1",
+    "@tanstack/react-query": "~4.36.1",
     "@trpc/client": "^10.44.1",
     "@trpc/next": "^10.44.1",
     "@trpc/react-query": "^10.44.1",
@@ -33,37 +33,40 @@
     "browser-fs-access": "^0.35.0",
     "eventsource-parser": "^1.1.1",
     "idb-keyval": "^6.2.1",
-    "next": "^14.0.3",
-    "pdfjs-dist": "4.0.189",
+    "next": "^14.0.4",
+    "nprogress": "^0.2.0",
+    "pdfjs-dist": "4.0.269",
     "plantuml-encoder": "^1.4.0",
     "prismjs": "^1.29.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-katex": "^3.0.1",
     "react-markdown": "^9.0.1",
+    "react-resizable-panels": "^1.0.5",
     "react-timeago": "^7.2.0",
     "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"
+    "zustand": "^4.4.7"
   },
   "devDependencies": {
     "@cloudflare/puppeteer": "^0.0.5",
-    "@types/node": "^20.10.0",
+    "@types/node": "^20.10.5",
+    "@types/nprogress": "^0.2.3",
     "@types/plantuml-encoder": "^1.4.2",
     "@types/prismjs": "^1.26.3",
-    "@types/react": "^18.2.38",
-    "@types/react-dom": "^18.2.17",
-    "@types/react-katex": "^3.0.3",
-    "@types/react-timeago": "^4.1.6",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
+    "@types/react-katex": "^3.0.4",
+    "@types/react-timeago": "^4.1.7",
     "@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.3.2"
+    "eslint": "^8.56.0",
+    "eslint-config-next": "^14.0.4",
+    "prettier": "^3.1.1",
+    "prisma": "^5.7.1",
+    "typescript": "^5.3.3"
   },
   "engines": {
     "node": "^20.0.0 || ^18.0.0"

pages/_app.tsx

@@ -10,10 +10,12 @@ import 'katex/dist/katex.min.css';
 import '~/common/styles/CodePrism.css';
 import '~/common/styles/GithubMarkdown.css';
 
-import { ProviderBackend } from '~/common/state/ProviderBackend';
-import { ProviderSnacks } from '~/common/state/ProviderSnacks';
-import { ProviderTRPCQueryClient } from '~/common/state/ProviderTRPCQueryClient';
-import { ProviderTheming } from '~/common/state/ProviderTheming';
+import { ProviderBackendAndNoSSR } from '~/common/providers/ProviderBackendAndNoSSR';
+import { ProviderBootstrapLogic } from '~/common/providers/ProviderBootstrapLogic';
+import { ProviderSingleTab } from '~/common/providers/ProviderSingleTab';
+import { ProviderSnacks } from '~/common/providers/ProviderSnacks';
+import { ProviderTRPCQueryClient } from '~/common/providers/ProviderTRPCQueryClient';
+import { ProviderTheming } from '~/common/providers/ProviderTheming';
 
 
 const MyApp = ({ Component, emotionCache, pageProps }: MyAppProps) =>
@@ -25,13 +27,17 @@ const MyApp = ({ Component, emotionCache, pageProps }: MyAppProps) =>
     </Head>
 
     <ProviderTheming emotionCache={emotionCache}>
-      <ProviderTRPCQueryClient>
-        <ProviderSnacks>
-          <ProviderBackend>
-            <Component {...pageProps} />
-          </ProviderBackend>
-        </ProviderSnacks>
-      </ProviderTRPCQueryClient>
+      <ProviderSingleTab>
+        <ProviderBootstrapLogic>
+          <ProviderTRPCQueryClient>
+            <ProviderSnacks>
+              <ProviderBackendAndNoSSR>
+                <Component {...pageProps} />
+              </ProviderBackendAndNoSSR>
+            </ProviderSnacks>
+          </ProviderTRPCQueryClient>
+        </ProviderBootstrapLogic>
+      </ProviderSingleTab>
     </ProviderTheming>
 
     <VercelAnalytics debug={false} />

pages/call.tsx

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

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 { useRedirectToNewsOnUpdates } from '../src/apps/news/news.hooks';
 
-import { AppLayout } from '~/common/layout/AppLayout';
+import { withLayout } from '~/common/layout/withLayout';
 
 
 export default function ChatPage() {
-  // show the News page on updates
-  useShowNewsOnUpdate();
+  // show the News page if there are unseen updates
+  useRedirectToNewsOnUpdates();
 
-  return (
-    <AppLayout>
-      <AppChat />
-    </AppLayout>
-  );
+  return withLayout({ type: 'optima' }, <AppChat />);
 }

pages/link/callback_openrouter.tsx

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import { useRouter } from 'next/router';
+
+import { Box, Typography } from '@mui/joy';
+
+import { useModelsStore } from '~/modules/llms/store-llms';
+
+import { InlineError } from '~/common/components/InlineError';
+import { apiQuery } from '~/common/util/trpc.client';
+import { navigateToIndex } from '~/common/app.routes';
+import { themeBgApp } from '~/common/app.theme';
+import { withLayout } from '~/common/layout/withLayout';
+
+
+function CallbackOpenRouterPage(props: { openRouterCode: string | undefined }) {
+
+  // external state
+  const { data, isError, error, isLoading } = apiQuery.backend.exchangeOpenRouterKey.useQuery({ code: props.openRouterCode || '' }, {
+    enabled: !!props.openRouterCode,
+    refetchOnWindowFocus: false,
+    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
+    useModelsStore.getState().setOpenRoutersKey(openRouterKey);
+
+    // 2. Navigate to the chat app
+    void navigateToIndex(true); //.then(openModelsSetup);
+
+  }, [isSuccess, openRouterKey]);
+
+  return (
+    <Box sx={{
+      flexGrow: 1,
+      backgroundColor: themeBgApp,
+      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>
+
+        {isLoading && <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 function CallbackPage() {
+
+  // get the 'code=...' from the URL
+  const { query } = useRouter();
+  const { code: openRouterCode } = query;
+
+  return withLayout({ type: 'plain' }, <CallbackOpenRouterPage openRouterCode={openRouterCode as (string | undefined)} />);
+}

pages/link/chat/[chatLinkId].tsx

@@ -3,16 +3,12 @@ import { useRouter } from 'next/router';
 
 import { AppChatLink } from '../../../src/apps/link/AppChatLink';
 
-import { AppLayout } from '~/common/layout/AppLayout';
+import { withLayout } from '~/common/layout/withLayout';
 
 
 export default function ChatLinkPage() {
   const { query } = useRouter();
   const chatLinkId = query?.chatLinkId as string ?? '';
 
-  return (
-    <AppLayout suspendAutoModelsSetup>
-      <AppChatLink linkId={chatLinkId} />
-    </AppLayout>
-  );
+  return withLayout({ type: 'optima', suspendAutoModelsSetup: true }, <AppChatLink linkId={chatLinkId} />);
 }

pages/link/share_target.tsx

@@ -8,10 +8,11 @@ import { setComposerStartupText } from '../../src/apps/chat/components/composer/
 
 import { callBrowseFetchPage } 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 } from '~/common/app.routes';
+import { themeBgApp } from '~/common/app.theme';
+import { withLayout } from '~/common/layout/withLayout';
 
 
 /**
@@ -75,11 +76,11 @@ function AppShareTarget() {
     if (intentURL) {
       setIsDownloading(true);
       callBrowseFetchPage(intentURL)
-        .then(pageContent => {
-          if (pageContent)
-            queueComposerTextAndLaunchApp('\n\n```' + intentURL + '\n' + pageContent + '\n```\n');
+        .then(page => {
+          if (page.stopReason !== 'error')
+            queueComposerTextAndLaunchApp('\n\n```' + intentURL + '\n' + page.content + '\n```\n');
           else
-            setErrorMessage('Could not read any data');
+            setErrorMessage('Could not read any data' + page.error ? ': ' + page.error : '');
         })
         .catch(error => setErrorMessage(error?.message || error || 'Unknown error'))
         .finally(() => setIsDownloading(false));
@@ -90,7 +91,7 @@ function AppShareTarget() {
   return (
 
     <Box sx={{
-      backgroundColor: 'background.level2',
+      backgroundColor: themeBgApp,
       display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
       flexGrow: 1,
     }}>
@@ -132,10 +133,6 @@ function AppShareTarget() {
  * This page will be invoked on mobile when sharing Text/URLs/Files from other APPs
  * Example URL: https://localhost:3000/link/share_target?title=This+Title&text=https%3A%2F%2Fexample.com%2Fapp%2Fpath
  */
-export default function LaunchPage() {
-  return (
-    <AppLayout>
-      <AppShareTarget />
-    </AppLayout>
-  );
+export default function ShareTargetPage() {
+  return withLayout({ type: 'plain' }, <AppShareTarget />);
 }

pages/news.tsx

@@ -3,16 +3,12 @@ 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 { withLayout } from '~/common/layout/withLayout';
 
 
 export default function NewsPage() {
-  // update the last seen news version
+  // 'touch' the last seen news version
   useMarkNewsAsSeen();
 
-  return (
-    <AppLayout suspendAutoModelsSetup>
-      <AppNews />
-    </AppLayout>
-  );
+  return withLayout({ type: 'optima', suspendAutoModelsSetup: true }, <AppNews />);
 }

pages/personas.tsx

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

src/apps/call/CallUI.tsx

@@ -15,20 +15,20 @@ 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 { llmStreamingChatGenerate, VChatMessageIn } from '~/modules/llms/llm.client';
 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 { usePluggableOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
 
 import { CallAvatar } from './components/CallAvatar';
 import { CallButton } from './components/CallButton';
 import { CallMessage } from './components/CallMessage';
 import { CallStatus } from './components/CallStatus';
+import { ROUTE_APP_CHAT } from '~/common/app.routes';
 
 
 function CallMenuItems(props: {
@@ -113,7 +113,7 @@ export function CallUI(props: {
         setCallMessages(messages => [...messages, createDMessage('user', transcribed)]);
     }
   }, []);
-  const { isSpeechEnabled, isRecording, isRecordingAudio, isRecordingSpeech, startRecording, stopRecording, toggleRecording } = useSpeechRecognition(onSpeechResultCallback, 1000, false);
+  const { isSpeechEnabled, isRecording, isRecordingAudio, isRecordingSpeech, startRecording, stopRecording, toggleRecording } = useSpeechRecognition(onSpeechResultCallback, 1000);
 
   // derived state
   const isRinging = stage === 'ring';
@@ -179,7 +179,7 @@ export function CallUI(props: {
       case 'Goodbye.':
         setStage('ended');
         setTimeout(() => {
-          void routerPush('/');
+          void routerPush(ROUTE_APP_CHAT);
         }, 2000);
         return;
       // command: regenerate answer
@@ -216,7 +216,7 @@ export function CallUI(props: {
     responseAbortController.current = new AbortController();
     let finalText = '';
     let error: any | null = null;
-    streamChat(chatLLMId, callPrompt, responseAbortController.current.signal, (updatedMessage: Partial<DMessage>) => {
+    llmStreamingChatGenerate(chatLLMId, callPrompt, null, null, responseAbortController.current.signal, (updatedMessage: Partial<DMessage>) => {
       const text = updatedMessage.text?.trim();
       if (text) {
         finalText = text;
@@ -273,7 +273,7 @@ export function CallUI(props: {
     , [overridePersonaVoice, pushToTalk],
   );
 
-  useLayoutPluggable(chatLLMDropdown, null, menuItems);
+  usePluggableOptimaLayout(null, chatLLMDropdown, menuItems, 'CallUI');
 
 
   return <>
@@ -367,7 +367,7 @@ export function CallUI(props: {
       )}
 
       {/* [ended] Back / Call Again */}
-      {(isEnded || isDeclined) && <Link noLinkStyle href='/'><CallButton Icon={ArrowBackIcon} text='Back' variant='soft' /></Link>}
+      {(isEnded || isDeclined) && <Link noLinkStyle href={ROUTE_APP_CHAT}><CallButton Icon={ArrowBackIcon} text='Back' variant='soft' /></Link>}
       {(isEnded || isDeclined) && <CallButton Icon={CallIcon} text='Call Again' color='success' variant='soft' onClick={() => setStage('connected')} />}
 
     </Box>

src/apps/call/CallWizard.tsx

@@ -11,9 +11,9 @@ import RecordVoiceOverIcon from '@mui/icons-material/RecordVoiceOver';
 import WarningIcon from '@mui/icons-material/Warning';
 
 import { navigateBack } from '~/common/app.routes';
-import { openLayoutPreferences } from '~/common/layout/store-applayout';
 import { useCapabilityBrowserSpeechRecognition, useCapabilityElevenLabs } from '~/common/components/useCapabilities';
 import { useChatStore } from '~/common/state/store-chats';
+import { useOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
 import { useUICounter } from '~/common/state/store-ui';
 
 
@@ -81,6 +81,7 @@ export function CallWizard(props: { strict?: boolean, conversationId: string, ch
   const [recognitionOverride, setRecognitionOverride] = React.useState(false);
 
   // external state
+  const { openPreferences } = useOptimaLayout();
   const recognition = useCapabilityBrowserSpeechRecognition();
   const synthesis = useCapabilityElevenLabs();
   const chatIsEmpty = useChatStore(state => {
@@ -103,7 +104,7 @@ export function CallWizard(props: { strict?: boolean, conversationId: string, ch
   const handleOverrideRecognition = () => setRecognitionOverride(true);
 
   const handleConfigureElevenLabs = () => {
-    openLayoutPreferences(3);
+    openPreferences(3);
   };
 
   const handleFinishButton = () => {

src/apps/call/components/CallMessage.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { Chip, ColorPaletteProp, VariantProp } from '@mui/joy';
 import { SxProps } from '@mui/joy/styles/types';
 
-import { VChatMessageIn } from '~/modules/llms/transports/chatGenerate';
+import type { VChatMessageIn } from '~/modules/llms/llm.client';
 
 
 export function CallMessage(props: {

src/apps/chat/AppChat.tsx

@@ -1,26 +1,29 @@
 import * as React from 'react';
-
-import { Box } from '@mui/joy';
 import ForkRightIcon from '@mui/icons-material/ForkRight';
+import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
+
+import { Box, useTheme } from '@mui/joy';
 
 import { CmdRunBrowse } from '~/modules/browse/browse.client';
-import { CmdRunProdia } from '~/modules/prodia/prodia.client';
 import { CmdRunReact } from '~/modules/aifn/react/react';
+import { CmdRunT2I, useCapabilityTextToImage } from '~/modules/t2i/t2i.client';
 import { DiagramConfig, DiagramsModal } from '~/modules/aifn/digrams/DiagramsModal';
 import { FlattenerModal } from '~/modules/aifn/flatten/FlattenerModal';
 import { TradeConfig, TradeModal } from '~/modules/trade/TradeModal';
 import { imaginePromptFromText } from '~/modules/aifn/imagine/imaginePromptFromText';
 import { speakText } from '~/modules/elevenlabs/elevenlabs.client';
 import { useBrowseStore } from '~/modules/browse/store-module-browsing';
-import { useModelsStore } from '~/modules/llms/store-llms';
+import { useChatLLM, useModelsStore } from '~/modules/llms/store-llms';
 
 import { ConfirmationModal } from '~/common/components/ConfirmationModal';
+import { GlobalShortcutItem, ShortcutKeyName, useGlobalShortcuts } from '~/common/components/useGlobalShortcut';
 import { addSnackbar, removeSnackbar } from '~/common/components/useSnackbarsStore';
 import { createDMessage, DConversationId, DMessage, getConversation, useConversation } from '~/common/state/store-chats';
-import { GlobalShortcutItem, ShortcutKeyName, useGlobalShortcuts } from '~/common/components/useGlobalShortcut';
-import { useLayoutPluggable } from '~/common/layout/store-applayout';
+import { themeBgApp, themeBgAppChatComposer } from '~/common/app.theme';
+import { useOptimaLayout, usePluggableOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
 import { useUXLabsStore } from '~/common/state/store-ux-labs';
 
+import type { ComposerOutputMultiPart } from './components/composer/composer.types';
 import { ChatDrawerItemsMemo } from './components/applayout/ChatDrawerItems';
 import { ChatDropdowns } from './components/applayout/ChatDropdowns';
 import { ChatMenuItems } from './components/applayout/ChatMenuItems';
@@ -28,7 +31,9 @@ import { ChatMessageList } from './components/ChatMessageList';
 import { CmdAddRoleMessage, CmdHelp, createCommandsHelpMessage, extractCommands } from './editors/commands';
 import { Composer } from './components/composer/Composer';
 import { Ephemerals } from './components/Ephemerals';
-import { usePanesManager } from './components/usePanesManager';
+import { ScrollToBottom } from './components/scroll-to-bottom/ScrollToBottom';
+import { ScrollToBottomButton } from './components/scroll-to-bottom/ScrollToBottomButton';
+import { usePanesManager } from './components/panes/usePanesManager';
 
 import { runAssistantUpdatingState } from './editors/chat-stream';
 import { runBrowseUpdatingState } from './editors/browse-load';
@@ -39,7 +44,11 @@ import { runReActUpdatingState } from './editors/react-tangent';
 /**
  * Mode: how to treat the input from the Composer
  */
-export type ChatModeId = 'immediate' | 'write-user' | 'react' | 'draw-imagine' | 'draw-imagine-plus';
+export type ChatModeId =
+  | 'generate-text'
+  | 'append-user'
+  | 'generate-image'
+  | 'generate-react';
 
 
 const SPECIAL_ID_WIPE_ALL: DConversationId = 'wipe-chats';
@@ -57,13 +66,22 @@ export function AppChat() {
   const composerTextAreaRef = React.useRef<HTMLTextAreaElement>(null);
 
   // external state
+  const theme = useTheme();
+
+  const { openLlmOptions } = useOptimaLayout();
+
+  const { chatLLM } = useChatLLM();
+
   const {
     chatPanes,
     focusedConversationId,
     navigateHistoryInFocusedPane,
     openConversationInFocusedPane,
     openConversationInSplitPane,
-    setFocusedPaneIndex,
+    paneIndex,
+    duplicatePane,
+    removePane,
+    setFocusedPane,
   } = usePanesManager();
 
   const {
@@ -80,14 +98,13 @@ export function AppChat() {
     setMessages,
   } = useConversation(focusedConversationId);
 
+  const { mayWork: capabilityHasT2I } = useCapabilityTextToImage();
+
 
   // Window actions
 
-  const chatPaneIDs = chatPanes.length > 0 ? chatPanes.map(pane => pane.conversationId) : [null];
-
-  const setActivePaneIndex = React.useCallback((idx: number) => {
-    setFocusedPaneIndex(idx);
-  }, [setFocusedPaneIndex]);
+  const panesConversationIDs = chatPanes.length > 0 ? chatPanes.map(pane => pane.conversationId) : [null];
+  const isSplitPane = chatPanes.length > 1;
 
   const setFocusedConversationId = React.useCallback((conversationId: DConversationId | null) => {
     conversationId && openConversationInFocusedPane(conversationId);
@@ -97,6 +114,13 @@ export function AppChat() {
     conversationId && openConversationInSplitPane(conversationId);
   }, [openConversationInSplitPane]);
 
+  const toggleSplitPane = React.useCallback(() => {
+    if (isSplitPane)
+      removePane(paneIndex ?? chatPanes.length - 1);
+    else
+      duplicatePane(paneIndex ?? chatPanes.length - 1);
+  }, [chatPanes.length, duplicatePane, isSplitPane, paneIndex, removePane]);
+
   const handleNavigateHistory = React.useCallback((direction: 'back' | 'forward') => {
     if (navigateHistoryInFocusedPane(direction))
       showNextTitle.current = true;
@@ -124,7 +148,7 @@ export function AppChat() {
       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)) {
+        if (CmdRunT2I.includes(command)) {
           setMessages(conversationId, history);
           return await runImageGenerationUpdatingState(conversationId, prompt);
         }
@@ -151,27 +175,26 @@ export function AppChat() {
     // synchronous long-duration tasks, which update the state as they go
     if (chatLLMId && focusedSystemPurposeId) {
       switch (chatModeId) {
-        case 'immediate':
+        case 'generate-text':
           return await runAssistantUpdatingState(conversationId, history, chatLLMId, focusedSystemPurposeId);
-        case 'write-user':
+
+        case 'append-user':
           return setMessages(conversationId, history);
-        case 'react':
+
+        case 'generate-image':
+          if (!lastMessage?.text)
+            break;
+          setMessages(conversationId, history.map(message => message.id !== lastMessage.id ? message : {
+            ...message,
+            text: `${CmdRunT2I[0]} ${lastMessage.text}`,
+          }));
+          return await runImageGenerationUpdatingState(conversationId, lastMessage.text);
+
+        case 'generate-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);
       }
     }
 
@@ -180,23 +203,43 @@ export function AppChat() {
     setMessages(conversationId, history);
   }, [focusedSystemPurposeId, setMessages]);
 
-  const handleComposerNewMessage = async (chatModeId: ChatModeId, conversationId: DConversationId, userText: string) => {
+  const handleComposerAction = (chatModeId: ChatModeId, conversationId: DConversationId, multiPartMessage: ComposerOutputMultiPart): boolean => {
+
+    // validate inputs
+    if (multiPartMessage.length !== 1 || multiPartMessage[0].type !== 'text-block') {
+      addSnackbar({
+        key: 'chat-composer-action-invalid',
+        message: 'Only a single text part is supported for now.',
+        type: 'issue',
+        overrides: {
+          autoHideDuration: 2000,
+        },
+      });
+      return false;
+    }
+    const userText = multiPartMessage[0].text;
+
+    // find conversation
     const conversation = getConversation(conversationId);
-    if (conversation)
-      return await _handleExecute(chatModeId, conversationId, [
-        ...conversation.messages,
-        createDMessage('user', userText),
-      ]);
+    if (!conversation)
+      return false;
+
+    // start execution (async)
+    void _handleExecute(chatModeId, conversationId, [
+      ...conversation.messages,
+      createDMessage('user', userText),
+    ]);
+    return true;
   };
 
   const handleConversationExecuteHistory = async (conversationId: DConversationId, history: DMessage[]) =>
-    await _handleExecute('immediate', conversationId, history);
+    await _handleExecute('generate-text', conversationId, history);
 
   const handleMessageRegenerateLast = React.useCallback(async () => {
     const focusedConversation = getConversation(focusedConversationId);
     if (focusedConversation?.messages?.length) {
       const lastMessage = focusedConversation.messages[focusedConversation.messages.length - 1];
-      return await _handleExecute('immediate', focusedConversation.id, lastMessage.role === 'assistant'
+      return await _handleExecute('generate-text', focusedConversation.id, lastMessage.role === 'assistant'
         ? focusedConversation.messages.slice(0, -1)
         : [...focusedConversation.messages],
       );
@@ -205,13 +248,15 @@ export function AppChat() {
 
   const handleTextDiagram = async (diagramConfig: DiagramConfig | null) => setDiagramConfig(diagramConfig);
 
-  const handleTextImaginePlus = async (conversationId: DConversationId, messageText: string) => {
+  const handleTextImagine = async (conversationId: DConversationId, messageText: string) => {
     const conversation = getConversation(conversationId);
-    if (conversation)
-      return await _handleExecute('draw-imagine-plus', conversationId, [
-        ...conversation.messages,
-        createDMessage('user', messageText),
-      ]);
+    if (!conversation)
+      return;
+    const imaginedPrompt = await imaginePromptFromText(messageText) || 'An error sign.';
+    return await _handleExecute('generate-image', conversationId, [
+      ...conversation.messages,
+      createDMessage('user', imaginedPrompt),
+    ]);
   };
 
   const handleTextSpeak = async (text: string) => {
@@ -291,7 +336,14 @@ export function AppChat() {
 
   // Shortcuts
 
+  const handleOpenChatLlmOptions = React.useCallback(() => {
+    const { chatLLMId } = useModelsStore.getState();
+    if (!chatLLMId) return;
+    openLlmOptions(chatLLMId);
+  }, [openLlmOptions]);
+
   const shortcuts = React.useMemo((): GlobalShortcutItem[] => [
+    ['o', true, true, false, handleOpenChatLlmOptions],
     ['r', true, true, false, handleMessageRegenerateLast],
     ['n', true, false, true, handleConversationNew],
     ['b', true, false, true, () => isFocusedChatEmpty || focusedConversationId && handleConversationBranch(focusedConversationId, null)],
@@ -299,15 +351,19 @@ export function AppChat() {
     ['d', true, false, true, () => focusedConversationId && handleConversationDelete(focusedConversationId, false)],
     [ShortcutKeyName.Left, true, false, true, () => handleNavigateHistory('back')],
     [ShortcutKeyName.Right, true, false, true, () => handleNavigateHistory('forward')],
-  ], [focusedConversationId, handleConversationBranch, handleConversationDelete, handleConversationNew, handleMessageRegenerateLast, handleNavigateHistory, isFocusedChatEmpty]);
+  ], [focusedConversationId, handleConversationBranch, handleConversationDelete, handleConversationNew, handleMessageRegenerateLast, handleNavigateHistory, handleOpenChatLlmOptions, isFocusedChatEmpty]);
   useGlobalShortcuts(shortcuts);
 
 
   // Pluggable ApplicationBar components
 
   const centerItems = React.useMemo(() =>
-      <ChatDropdowns conversationId={focusedConversationId} />,
-    [focusedConversationId],
+      <ChatDropdowns
+        conversationId={focusedConversationId}
+        isSplitPanes={isSplitPane}
+        onToggleSplitPanes={toggleSplitPane}
+      />,
+    [focusedConversationId, isSplitPane, toggleSplitPane],
   );
 
   const drawerItems = React.useMemo(() =>
@@ -338,70 +394,107 @@ export function AppChat() {
     [areChatsEmpty, focusedConversationId, handleConversationBranch, isFocusedChatEmpty, isMessageSelectionMode],
   );
 
-  useLayoutPluggable(centerItems, drawerItems, menuItems);
+  usePluggableOptimaLayout(drawerItems, centerItems, menuItems, 'AppChat');
 
   return <>
 
-    <Box sx={{
-      flexGrow: 1,
-      display: 'flex', flexDirection: { xs: 'column', md: 'row' },
-      overflow: 'clip',
-    }}>
+    <PanelGroup direction='horizontal'>
 
-      {chatPaneIDs.map((_conversationId, idx) => (
-        <Box key={'chat-pane-' + idx} onClick={() => setActivePaneIndex(idx)} sx={{
-          flexGrow: 1, flexBasis: 1,
-          display: 'flex', flexDirection: 'column',
-          overflow: 'clip',
-        }}>
+      {panesConversationIDs.map((_conversationId, idx, panels) => <React.Fragment key={`chat-pane-${idx}-${panels.length}-${_conversationId}`}>
 
-          <ChatMessageList
-            conversationId={_conversationId}
-            isMessageSelectionMode={isMessageSelectionMode}
-            setIsMessageSelectionMode={setIsMessageSelectionMode}
-            onConversationBranch={handleConversationBranch}
-            onConversationExecuteHistory={handleConversationExecuteHistory}
-            onTextDiagram={handleTextDiagram}
-            onTextImagine={handleTextImaginePlus}
-            onTextSpeak={handleTextSpeak}
+        <Panel
+          id={'chat-pane-' + _conversationId}
+          order={idx}
+          collapsible
+          defaultSize={panels.length > 0 ? Math.round(100 / panels.length) : undefined}
+          minSize={20}
+          onClick={() => setFocusedPane(idx)}
+          onCollapse={() => setTimeout(() => removePane(idx), 50)}
+          style={{
+            // for anchoring the scroll button in place
+            position: 'relative',
+            // border only for active pane (if two or more panes)
+            ...(panesConversationIDs.length < 2 ? {}
+              : (_conversationId === focusedConversationId)
+                ? { border: `2px solid ${theme.palette.primary.solidBg}` }
+                : { border: `2px solid ${theme.palette.background.level1}` }),
+          }}
+        >
+
+          <ScrollToBottom
+            bootToBottom
+            stickToBottom
             sx={{
-              flexGrow: 1,
-              backgroundColor: 'background.level1',
+              // allows the content to be scrolled (all browsers)
               overflowY: 'auto',
-              minHeight: 96,
-              // outline the current focused pane
-              ...(chatPaneIDs.length < 2 ? {}
-                : (_conversationId === focusedConversationId)
-                  ? {
-                    border: '2px solid',
-                    borderColor: 'primary.solidBg',
-                  } : {
-                    padding: '2px',
-                  }),
+              // actually make sure this scrolls & fills
+              height: '100%',
             }}
-          />
+          >
 
-          <Ephemerals
-            conversationId={_conversationId}
-            sx={{
-              // flexGrow: 0.1,
-              flexShrink: 0.5,
-              overflowY: 'auto',
-              minHeight: 64,
+            <ChatMessageList
+              conversationId={_conversationId}
+              capabilityHasT2I={capabilityHasT2I}
+              chatLLMContextTokens={chatLLM?.contextTokens}
+              isMessageSelectionMode={isMessageSelectionMode}
+              setIsMessageSelectionMode={setIsMessageSelectionMode}
+              onConversationBranch={handleConversationBranch}
+              onConversationExecuteHistory={handleConversationExecuteHistory}
+              onTextDiagram={handleTextDiagram}
+              onTextImagine={handleTextImagine}
+              onTextSpeak={handleTextSpeak}
+              sx={{
+                backgroundColor: themeBgApp,
+                minHeight: '100%', // ensures filling of the blank space on newer chats
+              }}
+            />
+
+            <Ephemerals
+              conversationId={_conversationId}
+              sx={{
+                // TODO: Fixme post panels?
+                // flexGrow: 0.1,
+                flexShrink: 0.5,
+                overflowY: 'auto',
+                minHeight: 64,
+              }} />
+
+            {/* Visibility and actions are handled via Context */}
+            <ScrollToBottomButton />
+
+          </ScrollToBottom>
+
+        </Panel>
+
+        {/* Panel Separators & Resizers */}
+        {idx < panels.length - 1 && (
+          <PanelResizeHandle>
+            <Box sx={{
+              backgroundColor: themeBgApp,
+              height: '100%',
+              width: '4px',
+              '&:hover': {
+                backgroundColor: 'primary.softActiveBg',
+              },
             }} />
+          </PanelResizeHandle>
+        )}
 
-        </Box>
-      ))}
-    </Box>
+      </React.Fragment>)}
+
+    </PanelGroup>
 
     <Composer
-      conversationId={focusedConversationId}
-      isDeveloperMode={focusedSystemPurposeId === 'Developer'}
+      chatLLM={chatLLM}
       composerTextAreaRef={composerTextAreaRef}
-      onNewMessage={handleComposerNewMessage}
+      conversationId={focusedConversationId}
+      capabilityHasT2I={capabilityHasT2I}
+      isDeveloperMode={focusedSystemPurposeId === 'Developer'}
+      onAction={handleComposerAction}
+      onTextImagine={handleTextImagine}
       sx={{
         zIndex: 21, // position: 'sticky', bottom: 0,
-        backgroundColor: 'background.surface',
+        backgroundColor: themeBgAppChatComposer,
         borderTop: `1px solid`,
         borderTopColor: 'divider',
         p: { xs: 1, md: 2 },
@@ -427,7 +520,7 @@ export function AppChat() {
     {/* [confirmation] Reset Conversation */}
     {!!clearConversationId && <ConfirmationModal
       open onClose={() => setClearConversationId(null)} onPositive={handleConfirmedClearConversation}
-      confirmationText={'Are you sure you want to discard all the messages?'} positiveActionText={'Clear conversation'}
+      confirmationText={'Are you sure you want to discard all messages?'} positiveActionText={'Clear conversation'}
     />}
 
     {/* [confirmation] Delete All */}

src/apps/chat/components/ChatMessageList.tsx

@@ -4,19 +4,19 @@ import { shallow } from 'zustand/shallow';
 import { Box, List } from '@mui/joy';
 import { SxProps } from '@mui/joy/styles/types';
 
-import { DiagramConfig } from '~/modules/aifn/digrams/DiagramsModal';
-import { useChatLLM } from '~/modules/llms/store-llms';
+import type { DiagramConfig } from '~/modules/aifn/digrams/DiagramsModal';
 
 import { ShortcutKeyName, useGlobalShortcut } from '~/common/components/useGlobalShortcut';
 import { InlineError } from '~/common/components/InlineError';
 import { createDMessage, DConversationId, DMessage, getConversation, useChatStore } from '~/common/state/store-chats';
-import { openLayoutPreferences } from '~/common/layout/store-applayout';
-import { useCapabilityElevenLabs, useCapabilityProdia } from '~/common/components/useCapabilities';
+import { useCapabilityElevenLabs } from '~/common/components/useCapabilities';
+import { useOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
 
 import { ChatMessageMemo } from './message/ChatMessage';
 import { CleanerMessage, MessagesSelectionHeader } from './message/CleanerMessage';
 import { PersonaSelector } from './persona-selector/PersonaSelector';
 import { useChatShowSystemMessages } from '../store-app-chat';
+import { useScrollToBottom } from './scroll-to-bottom/useScrollToBottom';
 
 
 /**
@@ -24,6 +24,8 @@ import { useChatShowSystemMessages } from '../store-app-chat';
  */
 export function ChatMessageList(props: {
   conversationId: DConversationId | null,
+  capabilityHasT2I: boolean,
+  chatLLMContextTokens?: number,
   isMessageSelectionMode: boolean, setIsMessageSelectionMode: (isMessageSelectionMode: boolean) => void,
   onConversationBranch: (conversationId: DConversationId, messageId: string) => void,
   onConversationExecuteHistory: (conversationId: DConversationId, history: DMessage[]) => void,
@@ -39,21 +41,23 @@ export function ChatMessageList(props: {
   const [selectedMessages, setSelectedMessages] = React.useState<Set<string>>(new Set());
 
   // external state
+  const { notifyBooting } = useScrollToBottom();
+  const { openPreferences } = useOptimaLayout();
   const [showSystemMessages] = useChatShowSystemMessages();
-  const { conversationMessages, editMessage, deleteMessage, historyTokenCount } = useChatStore(state => {
+  const { conversationMessages, historyTokenCount, editMessage, deleteMessage, setMessages } = useChatStore(state => {
     const conversation = state.conversations.find(conversation => conversation.id === props.conversationId);
     return {
       conversationMessages: conversation ? conversation.messages : [],
-      editMessage: state.editMessage, deleteMessage: state.deleteMessage,
       historyTokenCount: conversation ? conversation.tokenCount : 0,
+      deleteMessage: state.deleteMessage,
+      editMessage: state.editMessage,
+      setMessages: state.setMessages,
     };
   }, shallow);
-  const { chatLLM } = useChatLLM();
-  const { mayWork: isImaginable } = useCapabilityProdia();
   const { mayWork: isSpeakable } = useCapabilityElevenLabs();
 
   // derived state
-  const { conversationId, onConversationExecuteHistory, onConversationBranch, onTextDiagram, onTextImagine, onTextSpeak } = props;
+  const { conversationId, capabilityHasT2I, onConversationBranch, onConversationExecuteHistory, onTextDiagram, onTextImagine, onTextSpeak } = props;
 
 
   // text actions
@@ -76,6 +80,14 @@ export function ChatMessageList(props: {
     }
   }, [conversationId, onConversationExecuteHistory]);
 
+  const handleConversationTruncate = React.useCallback((messageId: string) => {
+    const messages = getConversation(conversationId)?.messages;
+    if (conversationId && messages) {
+      const truncatedHistory = messages.slice(0, messages.findIndex(m => m.id === messageId) + 1);
+      setMessages(conversationId, truncatedHistory);
+    }
+  }, [conversationId, setMessages]);
+
   const handleMessageDelete = React.useCallback((messageId: string) => {
     conversationId && deleteMessage(conversationId, messageId);
   }, [conversationId, deleteMessage]);
@@ -89,22 +101,22 @@ export function ChatMessageList(props: {
   }, [conversationId, onTextDiagram]);
 
   const handleTextImagine = React.useCallback(async (text: string) => {
-    if (!isImaginable)
-      return openLayoutPreferences(2);
+    if (!capabilityHasT2I)
+      return openPreferences(2);
     if (conversationId) {
       setIsImagining(true);
       await onTextImagine(conversationId, text);
       setIsImagining(false);
     }
-  }, [conversationId, isImaginable, onTextImagine]);
+  }, [capabilityHasT2I, conversationId, onTextImagine, openPreferences]);
 
   const handleTextSpeak = React.useCallback(async (text: string) => {
     if (!isSpeakable)
-      return openLayoutPreferences(3);
+      return openPreferences(3);
     setIsSpeaking(true);
     await onTextSpeak(text);
     setIsSpeaking(false);
-  }, [isSpeakable, onTextSpeak]);
+  }, [isSpeakable, onTextSpeak, openPreferences]);
 
 
   // operate on the local selection set
@@ -148,11 +160,19 @@ export function ChatMessageList(props: {
     return { diffMessage: undefined, diffText: undefined };
   }, [conversationMessages]);
 
+
+  // scroll to the very bottom of a new chat
+  React.useEffect(() => {
+    if (conversationId)
+      notifyBooting();
+  }, [conversationId, notifyBooting]);
+
+
   // no content: show the persona selector
 
   const filteredMessages = conversationMessages
-    .filter(m => m.role !== 'system' || showSystemMessages) // hide the System message if the user choses to
-    .reverse(); // 'reverse' is because flexDirection: 'column-reverse' to auto-snap-to-bottom
+    .filter(m => m.role !== 'system' || showSystemMessages); // hide the System message if the user choses to
+
 
   if (!filteredMessages.length)
     return (
@@ -167,18 +187,29 @@ export function ChatMessageList(props: {
     <List sx={{
       p: 0, ...(props.sx || {}),
       // this makes sure that the the window is scrolled to the bottom (column-reverse)
-      display: 'flex', flexDirection: 'column-reverse',
+      display: 'flex',
+      flexDirection: 'column',
       // fix for the double-border on the last message (one by the composer, one to the bottom of the message)
       // marginBottom: '-1px',
     }}>
 
-      {filteredMessages.map((message, idx) =>
+      {props.isMessageSelectionMode && (
+        <MessagesSelectionHeader
+          hasSelected={selectedMessages.size > 0}
+          sumTokens={historyTokenCount}
+          onClose={() => props.setIsMessageSelectionMode(false)}
+          onSelectAll={handleSelectAll}
+          onDeleteMessages={handleSelectionDelete}
+        />
+      )}
+
+      {filteredMessages.map((message, idx, { length: count }) =>
         props.isMessageSelectionMode ? (
 
           <CleanerMessage
             key={'sel-' + message.id}
             message={message}
-            isBottom={idx === 0} remainingTokens={(chatLLM ? chatLLM.contextTokens : 0) - historyTokenCount}
+            remainingTokens={(props.chatLLMContextTokens || 0) - historyTokenCount}
             selected={selectedMessages.has(message.id)} onToggleSelected={handleSelectMessage}
           />
 
@@ -188,10 +219,11 @@ export function ChatMessageList(props: {
             key={'msg-' + message.id}
             message={message}
             diffPreviousText={message === diffMessage ? diffText : undefined}
-            isBottom={idx === 0}
+            isBottom={idx === count - 1}
             isImagining={isImagining} isSpeaking={isSpeaking}
             onConversationBranch={handleConversationBranch}
             onConversationRestartFrom={handleConversationRestartFrom}
+            onConversationTruncate={handleConversationTruncate}
             onMessageDelete={handleMessageDelete}
             onMessageEdit={handleMessageEdit}
             onTextDiagram={handleTextDiagram}
@@ -202,18 +234,6 @@ export function ChatMessageList(props: {
         ),
       )}
 
-      {/* Header at the bottom because of 'row-reverse' */}
-      {props.isMessageSelectionMode && (
-        <MessagesSelectionHeader
-          hasSelected={selectedMessages.size > 0}
-          isBottom={filteredMessages.length === 0}
-          sumTokens={historyTokenCount}
-          onClose={() => props.setIsMessageSelectionMode(false)}
-          onSelectAll={handleSelectAll}
-          onDeleteMessages={handleSelectionDelete}
-        />
-      )}
-
     </List>
   );
 }

src/apps/chat/components/applayout/ChatDrawerItems.tsx

@@ -8,7 +8,7 @@ import FileUploadIcon from '@mui/icons-material/FileUpload';
 
 import { DConversationId, useChatStore } from '~/common/state/store-chats';
 import { OpenAIIcon } from '~/common/components/icons/OpenAIIcon';
-import { closeLayoutDrawer } from '~/common/layout/store-applayout';
+import { useOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
 import { useUIPreferencesStore } from '~/common/state/store-ui';
 import { useUXLabsStore } from '~/common/state/store-ux-labs';
 
@@ -34,6 +34,7 @@ function ChatDrawerItems(props: {
   // const [grouping] = React.useState<ListGrouping>('off');
 
   // external state
+  const { closeAppDrawer } = useOptimaLayout();
   const conversations = useChatStore(state => state.conversations, shallow);
   const showSymbols = useUIPreferencesStore(state => state.zenMode !== 'cleaner');
   const labsEnhancedUI = useUXLabsStore(state => state.labsEnhancedUI);
@@ -48,14 +49,14 @@ function ChatDrawerItems(props: {
 
   const handleButtonNew = React.useCallback(() => {
     onConversationNew();
-    closeLayoutDrawer();
-  }, [onConversationNew]);
+    closeAppDrawer();
+  }, [closeAppDrawer, onConversationNew]);
 
   const handleConversationActivate = React.useCallback((conversationId: DConversationId, closeMenu: boolean) => {
     onConversationActivate(conversationId);
     if (closeMenu)
-      closeLayoutDrawer();
-  }, [onConversationActivate]);
+      closeAppDrawer();
+  }, [closeAppDrawer, onConversationActivate]);
 
   const handleConversationDelete = React.useCallback((conversationId: DConversationId) => {
     !singleChat && conversationId && onConversationDelete(conversationId, true);

src/apps/chat/components/applayout/ChatDropdowns.tsx

@@ -1,6 +1,10 @@
 import * as React from 'react';
 
+import { IconButton } from '@mui/joy';
+import VerticalSplitIcon from '@mui/icons-material/VerticalSplit';
+
 import type { DConversationId } from '~/common/state/store-chats';
+import { useUXLabsStore } from '~/common/state/store-ux-labs';
 
 import { useChatLLMDropdown } from './useLLMDropdown';
 import { usePersonaIdDropdown } from './usePersonaDropdown';
@@ -8,12 +12,17 @@ import { usePersonaIdDropdown } from './usePersonaDropdown';
 
 export function ChatDropdowns(props: {
   conversationId: DConversationId | null
+  isSplitPanes: boolean
+  onToggleSplitPanes: () => void
 }) {
 
   // state
   const { chatLLMDropdown } = useChatLLMDropdown();
   const { personaDropdown } = usePersonaIdDropdown(props.conversationId);
 
+  // external state
+  const labsSplitBranching = useUXLabsStore(state => state.labsSplitBranching);
+
   return <>
 
     {/* Model selector */}
@@ -22,5 +31,17 @@ export function ChatDropdowns(props: {
     {/* Persona selector */}
     {personaDropdown}
 
+    {/* Split Panes button */}
+    {labsSplitBranching && <IconButton
+      variant={props.isSplitPanes ? 'solid' : 'plain'}
+      color='neutral'
+      onClick={props.onToggleSplitPanes}
+      sx={{
+        ml: 'auto',
+      }}
+    >
+      <VerticalSplitIcon />
+    </IconButton>}
+
   </>;
 }

src/apps/chat/components/applayout/ChatMenuItems.tsx

@@ -11,7 +11,7 @@ import SettingsSuggestIcon from '@mui/icons-material/SettingsSuggest';
 
 import type { DConversationId } from '~/common/state/store-chats';
 import { KeyStroke } from '~/common/components/KeyStroke';
-import { closeLayoutMenu } from '~/common/layout/store-applayout';
+import { useOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
 import { useUICounter } from '~/common/state/store-ui';
 
 import { useChatShowSystemMessages } from '../../store-app-chat';
@@ -30,6 +30,7 @@ export function ChatMenuItems(props: {
 }) {
 
   // external state
+  const { closeAppMenu } = useOptimaLayout();
   const { touch: shareTouch } = useUICounter('export-share');
   const [showSystemMessages, setShowSystemMessages] = useChatShowSystemMessages();
 
@@ -39,7 +40,7 @@ export function ChatMenuItems(props: {
 
   const closeMenu = (event: React.MouseEvent) => {
     event.stopPropagation();
-    closeLayoutMenu();
+    closeAppMenu();
   };
 
   const handleConversationClear = (event: React.MouseEvent<HTMLDivElement>) => {

src/apps/chat/components/applayout/useLLMDropdown.tsx

@@ -7,52 +7,70 @@ import SettingsIcon from '@mui/icons-material/Settings';
 
 import { DLLM, DLLMId, DModelSourceId, useModelsStore } from '~/modules/llms/store-llms';
 
-import { AppBarDropdown, DropdownItems } from '~/common/layout/AppBarDropdown';
+import { GoodDropdown, DropdownItems } from '~/common/components/GoodDropdown';
 import { KeyStroke } from '~/common/components/KeyStroke';
-import { openLayoutLLMOptions, openLayoutModelsSetup } from '~/common/layout/store-applayout';
+import { useOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
 
 
 function AppBarLLMDropdown(props: {
   llms: DLLM[],
-  llmId: DLLMId | null,
-  setLlmId: (llmId: DLLMId | null) => void,
+  chatLlmId: DLLMId | null,
+  setChatLlmId: (llmId: DLLMId | null) => void,
   placeholder?: string,
 }) {
 
+  // external state
+  const { openLlmOptions, openModelsSetup } = useOptimaLayout();
+
   // build model menu items, filtering-out hidden models, and add Source separators
   const llmItems: DropdownItems = {};
   let prevSourceId: DModelSourceId | null = null;
   for (const llm of props.llms) {
-    if (!llm.hidden || llm.id === props.llmId) {
-      if (!prevSourceId || llm.sId !== prevSourceId) {
-        if (prevSourceId)
-          llmItems[`sep-${llm.id}`] = { type: 'separator', title: llm.sId };
-        prevSourceId = llm.sId;
-      }
-      llmItems[llm.id] = { title: llm.label };
+
+    // filter-out hidden models
+    if (!(!llm.hidden || llm.id === props.chatLlmId))
+      continue;
+
+    // add separators when changing sources
+    if (!prevSourceId || llm.sId !== prevSourceId) {
+      if (prevSourceId)
+        llmItems[`sep-${llm.id}`] = {
+          type: 'separator',
+          title: llm.sId,
+        };
+      prevSourceId = llm.sId;
     }
+
+    // add the model item
+    llmItems[llm.id] = {
+      title: llm.label,
+      // icon: llm.id.startsWith('some vendor') ? <VendorIcon /> : undefined,
+    };
   }
 
-  const handleChatLLMChange = (_event: any, value: DLLMId | null) => value && props.setLlmId(value);
+  const handleChatLLMChange = (_event: any, value: DLLMId | null) => value && props.setChatLlmId(value);
 
-  const handleOpenLLMOptions = () => props.llmId && openLayoutLLMOptions(props.llmId);
+  const handleOpenLLMOptions = () => props.chatLlmId && openLlmOptions(props.chatLlmId);
 
 
   return (
-    <AppBarDropdown
+    <GoodDropdown
       items={llmItems}
-      value={props.llmId} onChange={handleChatLLMChange}
+      value={props.chatLlmId} onChange={handleChatLLMChange}
       placeholder={props.placeholder || 'Models …'}
       appendOption={<>
 
-        {props.llmId && (
+        {props.chatLlmId && (
           <ListItemButton key='menu-opt' onClick={handleOpenLLMOptions}>
             <ListItemDecorator><SettingsIcon color='success' /></ListItemDecorator>
-            Options
+            <Box sx={{ flexGrow: 1, display: 'flex', justifyContent: 'space-between', gap: 1 }}>
+              Options
+              <KeyStroke combo='Ctrl + Shift + O' />
+            </Box>
           </ListItemButton>
         )}
 
-        <ListItemButton key='menu-llms' onClick={openLayoutModelsSetup}>
+        <ListItemButton key='menu-llms' onClick={openModelsSetup}>
           <ListItemDecorator><BuildCircleIcon color='success' /></ListItemDecorator>
           <Box sx={{ flexGrow: 1, display: 'flex', justifyContent: 'space-between', gap: 1 }}>
             Models
@@ -74,7 +92,7 @@ export function useChatLLMDropdown() {
   }), shallow);
 
   const chatLLMDropdown = React.useMemo(
-    () => <AppBarLLMDropdown llms={llms} llmId={chatLLMId} setLlmId={setChatLLMId} />,
+    () => <AppBarLLMDropdown llms={llms} chatLlmId={chatLLMId} setChatLlmId={setChatLLMId} />,
     [llms, chatLLMId, setChatLLMId],
   );
 

src/apps/chat/components/applayout/usePersonaDropdown.tsx

@@ -6,8 +6,8 @@ import CallIcon from '@mui/icons-material/Call';
 
 import { SystemPurposeId, SystemPurposes } from '../../../../data';
 
-import { AppBarDropdown } from '~/common/layout/AppBarDropdown';
 import { DConversationId, useChatStore } from '~/common/state/store-chats';
+import { GoodDropdown } from '~/common/components/GoodDropdown';
 import { launchAppCall } from '~/common/app.routes';
 import { useUIPreferencesStore } from '~/common/state/store-ui';
 import { useUXLabsStore } from '~/common/state/store-ux-labs';
@@ -42,7 +42,7 @@ function AppBarPersonaDropdown(props: {
   }
 
   return (
-    <AppBarDropdown
+    <GoodDropdown
       items={SystemPurposes} showSymbols={zenMode !== 'cleaner'}
       value={props.systemPurposeId} onChange={handleSystemPurposeChange}
       appendOption={appendOption}

src/apps/chat/components/composer/ButtonAttachCamera.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+
+import { Box, Button, IconButton, Tooltip } from '@mui/joy';
+import AddAPhotoIcon from '@mui/icons-material/AddAPhoto';
+
+import { CameraCaptureModal } from './CameraCaptureModal';
+
+
+const attachCameraLegend = (isMobile: boolean) =>
+  <Box sx={{ px: 1, py: 0.75, lineHeight: '1.5rem' }}>
+    <b>Attach photo</b><br />
+    {isMobile ? 'Auto-OCR to read text' : 'See the world, on the go'}
+  </Box>;
+
+
+export const ButtonAttachCameraMemo = React.memo(ButtonAttachCamera);
+
+function ButtonAttachCamera(props: { isMobile?: boolean, onAttachImage: (file: File) => void }) {
+  // state
+  const [open, setOpen] = React.useState(false);
+
+  return <>
+
+    {/* The Button */}
+    {props.isMobile ? (
+      <IconButton variant='plain' color='neutral' onClick={() => setOpen(true)}>
+        <AddAPhotoIcon />
+      </IconButton>
+    ) : (
+      <Tooltip variant='solid' placement='top-start' title={attachCameraLegend(!!props.isMobile)}>
+        <Button fullWidth variant='plain' color='neutral' onClick={() => setOpen(true)} startDecorator={<AddAPhotoIcon />}
+                sx={{ justifyContent: 'flex-start' }}>
+          Camera
+        </Button>
+      </Tooltip>
+    )}
+
+    {/* The actual capture dialog, which will stream the video */}
+    {open && (
+      <CameraCaptureModal
+        onCloseModal={() => setOpen(false)}
+        onAttachImage={props.onAttachImage}
+      />
+    )}
+
+  </>;
+}

src/apps/chat/components/composer/ButtonAttachClipboard.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+
+import { Box, Button, IconButton, Tooltip } from '@mui/joy';
+import ContentPasteGoIcon from '@mui/icons-material/ContentPasteGo';
+
+import { KeyStroke } from '~/common/components/KeyStroke';
+
+
+const pasteClipboardLegend =
+  <Box sx={{ px: 1, py: 0.75, lineHeight: '1.5rem' }}>
+    <b>Attach clipboard 📚</b><br />
+    Auto-converts to the best types<br />
+    <KeyStroke combo='Ctrl + Shift + V' sx={{ mt: 1, mb: 0.5 }} />
+  </Box>;
+
+
+export const ButtonAttachClipboardMemo = React.memo(ButtonAttachClipboard);
+
+function ButtonAttachClipboard(props: { isMobile?: boolean, onClick: () => void }) {
+  return props.isMobile ? (
+    <IconButton onClick={props.onClick}>
+      <ContentPasteGoIcon />
+    </IconButton>
+  ) : (
+    <Tooltip variant='solid' placement='top-start' title={pasteClipboardLegend}>
+      <Button fullWidth variant='plain' color='neutral' startDecorator={<ContentPasteGoIcon />} onClick={props.onClick}
+              sx={{ justifyContent: 'flex-start' }}>
+        Paste
+      </Button>
+    </Tooltip>
+  );
+}

src/apps/chat/components/composer/ButtonAttachFile.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+import { Box, Button, IconButton, Tooltip } from '@mui/joy';
+import AttachFileOutlinedIcon from '@mui/icons-material/AttachFileOutlined';
+
+
+const attachFileLegend =
+  <Box sx={{ px: 1, py: 0.75, lineHeight: '1.5rem' }}>
+    <b>Attach files</b><br />
+    Drag & drop in chat for faster loads ⚡
+  </Box>;
+
+
+export const ButtonAttachFileMemo = React.memo(ButtonAttachFile);
+
+function ButtonAttachFile(props: { isMobile?: boolean, onAttachFilePicker: () => void }) {
+  return props.isMobile ? (
+    <IconButton onClick={props.onAttachFilePicker}>
+      <AttachFileOutlinedIcon />
+    </IconButton>
+  ) : (
+    <Tooltip variant='solid' placement='top-start' title={attachFileLegend}>
+      <Button fullWidth variant='plain' color='neutral' onClick={props.onAttachFilePicker} startDecorator={<AttachFileOutlinedIcon />}
+              sx={{ justifyContent: 'flex-start' }}>
+        File
+      </Button>
+    </Tooltip>
+  );
+}

src/apps/chat/components/composer/ButtonCall.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+import { Box, Button, IconButton, Tooltip } from '@mui/joy';
+import { SxProps } from '@mui/joy/styles/types';
+import CallIcon from '@mui/icons-material/Call';
+
+
+const callConversationLegend =
+  <Box sx={{ px: 1, py: 0.75, lineHeight: '1.5rem' }}>
+    Quick call regarding this chat
+  </Box>;
+
+export function ButtonCall(props: { isMobile?: boolean, disabled?: boolean, onClick: () => void, sx?: SxProps }) {
+  return props.isMobile ? (
+    <IconButton variant='soft' color='primary' disabled={props.disabled} onClick={props.onClick} sx={props.sx}>
+      <CallIcon />
+    </IconButton>
+  ) : (
+    <Tooltip variant='solid' arrow placement='right' title={callConversationLegend}>
+      <Button variant='soft' color='primary' disabled={props.disabled} onClick={props.onClick} endDecorator={<CallIcon />} sx={props.sx}>
+        Call
+      </Button>
+    </Tooltip>
+  );
+}

src/apps/chat/components/composer/ButtonCameraCapture.tsx

@@ -1,34 +0,0 @@
-import * as React from 'react';
-
-import { Button, IconButton } from '@mui/joy';
-import AddAPhotoIcon from '@mui/icons-material/AddAPhoto';
-
-import { CameraCaptureModal } from './CameraCaptureModal';
-
-const CAMERA_ENABLE_ON_DESKTOP = false;
-
-
-export function ButtonCameraCapture(props: { isMobile: boolean, onOCR: (ocrText: string) => void }) {
-  // state
-  const [open, setOpen] = React.useState(false);
-
-  return <>
-
-    {/* The Button */}
-    {props.isMobile ? (
-      <IconButton variant='plain' color='neutral' onClick={() => setOpen(true)}>
-        <AddAPhotoIcon />
-      </IconButton>
-    ) : CAMERA_ENABLE_ON_DESKTOP ? (
-      <Button
-        fullWidth variant='plain' color='neutral' onClick={() => setOpen(true)} startDecorator={<AddAPhotoIcon />}
-        sx={{ justifyContent: 'flex-start' }}>
-        OCR
-      </Button>
-    ) : undefined}
-
-    {/* The actual capture dialog, which will stream the video */}
-    {open && <CameraCaptureModal onCloseModal={() => setOpen(false)} onOCR={props.onOCR} />}
-
-  </>;
-}

src/apps/chat/components/composer/ButtonClipboardPaste.tsx

@@ -1,31 +0,0 @@
-import * as React from 'react';
-
-import { Box, Button, IconButton, Tooltip } from '@mui/joy';
-import ContentPasteGoIcon from '@mui/icons-material/ContentPasteGo';
-
-import { KeyStroke } from '~/common/components/KeyStroke';
-
-
-const pasteClipboardLegend =
-  <Box sx={{ p: 1, lineHeight: 2 }}>
-    <b>Paste as 📚 Markdown attachment</b><br />
-    Also converts Code and Tables<br />
-    <KeyStroke combo='Ctrl + Shift + V' />
-  </Box>;
-
-export function ButtonClipboardPaste(props: { isMobile: boolean, isDeveloperMode: boolean, onPaste: () => void }) {
-  return props.isMobile ? (
-    <IconButton onClick={props.onPaste}>
-      <ContentPasteGoIcon />
-    </IconButton>
-  ) : (
-    <Tooltip
-      variant='solid' placement='top-start'
-      title={pasteClipboardLegend}>
-      <Button fullWidth variant='plain' color='neutral' startDecorator={<ContentPasteGoIcon />} onClick={props.onPaste}
-              sx={{ justifyContent: 'flex-start' }}>
-        {props.isDeveloperMode ? 'Paste code' : 'Paste'}
-      </Button>
-    </Tooltip>
-  );
-}

src/apps/chat/components/composer/ButtonFileAttach.tsx

@@ -1,70 +0,0 @@
-import { Box, Button, IconButton, Stack, Tooltip } from '@mui/joy';
-import * as React from 'react';
-import AttachFileOutlinedIcon from '@mui/icons-material/AttachFileOutlined';
-
-const attachFileLegend =
-  <Stack sx={{ p: 1, gap: 1 }}>
-    <Box sx={{ mb: 1 }}>
-      <b>Attach a file</b>
-    </Box>
-    <table>
-      <tbody>
-      <tr>
-        <td><b>Text</b></td>
-        <td align='center' style={{ opacity: 0.5 }}>→</td>
-        <td>📝 As-is</td>
-      </tr>
-      <tr>
-        <td><b>Code</b></td>
-        <td align='center' style={{ opacity: 0.5 }}>→</td>
-        <td>📚 Markdown</td>
-      </tr>
-      <tr>
-        <td><b>PDF</b></td>
-        <td width={36} align='center' style={{ opacity: 0.5 }}>→</td>
-        <td>📝 Text (summarized)</td>
-      </tr>
-      </tbody>
-    </table>
-    <Box sx={{ mt: 1, fontSize: '14px' }}>
-      Drag & drop in chat for faster loads ⚡
-    </Box>
-  </Stack>;
-
-
-export function ButtonFileAttach(props: { isMobile: boolean, onAttachFiles: (files: FileList) => Promise<void> }) {
-
-  // state
-  const attachmentFileInputRef = React.useRef<HTMLInputElement>(null);
-
-  const handleShowFilePicker = () => attachmentFileInputRef.current?.click();
-
-  const handleLoadAttachment = (event: React.ChangeEvent<HTMLInputElement>) => {
-    // NOTE: resetting the target value allows for the selector dialog to pop-up again
-    const files = event.target?.files;
-    if (files && files.length >= 1)
-      props.onAttachFiles(files).finally(() => event.target.value = '');
-    else
-      event.target.value = '';
-  };
-
-  return <>
-
-    {/* Mobile icon or Desktop button */}
-    {props.isMobile ? (
-      <IconButton onClick={handleShowFilePicker}>
-        <AttachFileOutlinedIcon />
-      </IconButton>
-    ) : (
-      <Tooltip variant='solid' placement='top-start' title={attachFileLegend}>
-        <Button fullWidth variant='plain' color='neutral' onClick={handleShowFilePicker} startDecorator={<AttachFileOutlinedIcon />}
-                sx={{ justifyContent: 'flex-start' }}>
-          Attach
-        </Button>
-      </Tooltip>
-    )}
-
-    <input type='file' multiple hidden ref={attachmentFileInputRef} onChange={handleLoadAttachment} />
-
-  </>;
-}

src/apps/chat/components/composer/ButtonMic.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+import { Box, IconButton } from '@mui/joy';
+import { ColorPaletteProp, VariantProp } from '@mui/joy/styles/types';
+import MicIcon from '@mui/icons-material/Mic';
+
+import { GoodTooltip } from '~/common/components/GoodTooltip';
+import { KeyStroke } from '~/common/components/KeyStroke';
+
+
+const micLegend =
+  <Box sx={{ px: 1, py: 0.75, lineHeight: '1.5rem' }}>
+    Voice input<br />
+    <KeyStroke combo='Ctrl + M' sx={{ mt: 1, mb: 0.5 }} />
+  </Box>;
+
+
+export const ButtonMicMemo = React.memo(ButtonMic);
+
+function ButtonMic(props: { variant: VariantProp, color: ColorPaletteProp, noBackground?: boolean, onClick: () => void }) {
+  return <GoodTooltip placement='top' title={micLegend}>
+    <IconButton variant={props.variant} color={props.color} onClick={props.onClick} sx={props.noBackground ? { background: 'none' } : {}}>
+      <MicIcon />
+    </IconButton>
+  </GoodTooltip>;
+}

src/apps/chat/components/composer/ButtonMicContinuation.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import { Box, IconButton, Tooltip } from '@mui/joy';
+import { ColorPaletteProp, SxProps, VariantProp } from '@mui/joy/styles/types';
+import AutoModeIcon from '@mui/icons-material/AutoMode';
+
+
+const micContinuationLegend =
+  <Box sx={{ px: 1, py: 0.75, lineHeight: '1.5rem' }}>
+    Voice Continuation
+  </Box>;
+
+
+export const ButtonMicContinuationMemo = React.memo(ButtonMicContinuation);
+
+function ButtonMicContinuation(props: { variant: VariantProp, color: ColorPaletteProp, onClick: () => void, sx?: SxProps }) {
+  return <Tooltip placement='bottom' title={micContinuationLegend}>
+    <IconButton variant={props.variant} color={props.color} onClick={props.onClick} sx={props.sx}>
+      <AutoModeIcon />
+    </IconButton>
+  </Tooltip>;
+}

src/apps/chat/components/composer/ButtonOptionsDraw.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+import { Button, IconButton } from '@mui/joy';
+import { SxProps } from '@mui/joy/styles/types';
+import FormatPaintIcon from '@mui/icons-material/FormatPaint';
+
+
+export function ButtonOptionsDraw(props: { isMobile?: boolean, onClick: () => void, sx?: SxProps }) {
+  return props.isMobile ? (
+    <IconButton variant='soft' color='warning' onClick={props.onClick} sx={props.sx}>
+      <FormatPaintIcon />
+    </IconButton>
+  ) : (
+    <Button variant='soft' color='warning' onClick={props.onClick} sx={props.sx}>
+      Options
+    </Button>
+  );
+}

src/apps/chat/components/composer/CameraCaptureModal.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
-import { Box, Button, CircularProgress, IconButton, LinearProgress, Modal, ModalClose, Option, Select, Sheet, Typography } from '@mui/joy';
+import { Box, Button, IconButton, Modal, ModalClose, Option, Select, Sheet, Typography } from '@mui/joy';
+import CameraAltIcon from '@mui/icons-material/CameraAlt';
 import DownloadIcon from '@mui/icons-material/Download';
 import InfoIcon from '@mui/icons-material/Info';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
@@ -9,6 +10,12 @@ import { InlineError } from '~/common/components/InlineError';
 import { useCameraCapture } from '~/common/components/useCameraCapture';
 
 
+function prettyFileName(renderedFrame: HTMLCanvasElement) {
+  const prettyDate = new Date().toISOString().replace(/[:-]/g, '').replace('T', '-').replace('Z', '');
+  const prettyResolution = `${renderedFrame.width}x${renderedFrame.height}`;
+  return `camera-${prettyDate}-${prettyResolution}.png`;
+}
+
 function renderVideoFrameToCanvas(videoElement: HTMLVideoElement): HTMLCanvasElement {
   // paint the video on a canvas, to save it
   const canvas = document.createElement('canvas');
@@ -19,6 +26,19 @@ function renderVideoFrameToCanvas(videoElement: HTMLVideoElement): HTMLCanvasEle
   return canvas;
 }
 
+function renderVideoFrameToFile(videoElement: HTMLVideoElement, callback: (file: File) => void) {
+  // video to canvas
+  const renderedFrame = renderVideoFrameToCanvas(videoElement);
+
+  // canvas to blob to file to callback
+  renderedFrame.toBlob((blob) => {
+    if (blob) {
+      const file = new File([blob], prettyFileName(renderedFrame), { type: blob.type });
+      callback(file);
+    }
+  }, 'image/png');
+}
+
 function downloadVideoFrameAsPNG(videoElement: HTMLVideoElement) {
   // video to canvas to png
   const renderedFrame = renderVideoFrameToCanvas(videoElement);
@@ -26,15 +46,19 @@ function downloadVideoFrameAsPNG(videoElement: HTMLVideoElement) {
 
   // auto-download
   const link = document.createElement('a');
-  link.download = 'image.png';
+  link.download = prettyFileName(renderedFrame);
   link.href = imageDataURL;
   link.click();
 }
 
 
-export function CameraCaptureModal(props: { onCloseModal: () => void, onOCR: (ocrText: string) => void }) {
+export function CameraCaptureModal(props: {
+  onCloseModal: () => void,
+  onAttachImage: (file: File) => void
+  // onOCR: (ocrText: string) => void }
+}) {
   // state
-  const [ocrProgress, setOCRProgress] = React.useState<number | null>(null);
+  // const [ocrProgress/*, setOCRProgress*/] = React.useState<number | null>(null);
   const [showInfo, setShowInfo] = React.useState(false);
 
   // camera operations
@@ -51,7 +75,7 @@ export function CameraCaptureModal(props: { onCloseModal: () => void, onOCR: (oc
     props.onCloseModal();
   };
 
-  const handleVideoOCRClicked = async () => {
+  /*const handleVideoOCRClicked = async () => {
     if (!videoRef.current) return;
     const renderedFrame = renderVideoFrameToCanvas(videoRef.current);
 
@@ -68,6 +92,14 @@ export function CameraCaptureModal(props: { onCloseModal: () => void, onOCR: (oc
     setOCRProgress(null);
     stopAndClose();
     props.onOCR(result.data.text);
+  };*/
+
+  const handleVideoSnapClicked = () => {
+    if (!videoRef.current) return;
+    renderVideoFrameToFile(videoRef.current, (file) => {
+      props.onAttachImage(file);
+      stopAndClose();
+    });
   };
 
   const handleVideoDownloadClicked = () => {
@@ -111,7 +143,7 @@ export function CameraCaptureModal(props: { onCloseModal: () => void, onOCR: (oc
             ref={videoRef} autoPlay playsInline
             style={{
               display: 'block', width: '100%', maxHeight: 'calc(100vh - 200px)',
-              background: '#8888', opacity: ocrProgress !== null ? 0.5 : 1,
+              background: '#8888', //opacity: ocrProgress !== null ? 0.5 : 1,
             }}
           />
 
@@ -124,7 +156,7 @@ export function CameraCaptureModal(props: { onCloseModal: () => void, onOCR: (oc
             {info}
           </Typography>}
 
-          {ocrProgress !== null && <CircularProgress sx={{ position: 'absolute', top: 'calc(50% - 34px / 2)', left: 'calc(50% - 34px / 2)', zIndex: 2 }} />}
+          {/*{ocrProgress !== null && <CircularProgress sx={{ position: 'absolute', top: 'calc(50% - 34px / 2)', left: 'calc(50% - 34px / 2)', zIndex: 2 }} />}*/}
         </Box>
 
         {/* Bottom controls (zoom, ocr, download) & progress */}
@@ -134,16 +166,30 @@ export function CameraCaptureModal(props: { onCloseModal: () => void, onOCR: (oc
 
           {zoomControl}
 
-          {ocrProgress !== null && <LinearProgress color='primary' determinate value={100 * ocrProgress} sx={{ px: 2 }} />}
+          {/*{ocrProgress !== null && <LinearProgress color='primary' determinate value={100 * ocrProgress} sx={{ px: 2 }} />}*/}
 
           <Box sx={{ display: 'flex', gap: 1, justifyContent: 'space-between' }}>
-            <IconButton disabled={!info} variant='soft' color='neutral' size='lg' onClick={() => setShowInfo(info => !info)} sx={{ zIndex: 30 }}>
+            {/* Info */}
+            <IconButton disabled={!info} variant='soft' color='neutral' onClick={() => setShowInfo(info => !info)} sx={{ zIndex: 30 }}>
               <InfoIcon />
             </IconButton>
-            <Button disabled={ocrProgress !== null} fullWidth variant='solid' size='lg' onClick={handleVideoOCRClicked} sx={{ flex: 1, maxWidth: 260 }}>
-              Extract Text
+            {/*<Button disabled={ocrProgress !== null} fullWidth variant='solid' size='lg' onClick={handleVideoOCRClicked} sx={{ flex: 1, maxWidth: 260 }}>*/}
+            {/*  Extract Text*/}
+            {/*</Button>*/}
+
+            {/* Capture */}
+            <Button
+              fullWidth
+              variant='solid' color='neutral'
+              onClick={handleVideoSnapClicked}
+              endDecorator={<CameraAltIcon />}
+              sx={{ flex: 1, maxWidth: 200, py: 2, borderRadius: '3rem' }}
+            >
+              Capture
             </Button>
-            <IconButton variant='soft' color='neutral' size='lg' onClick={handleVideoDownloadClicked}>
+
+            {/* Download */}
+            <IconButton variant='soft' color='neutral' onClick={handleVideoDownloadClicked}>
               <DownloadIcon />
             </IconButton>
           </Box>

src/apps/chat/components/composer/ChatModeMenu.tsx

@@ -5,7 +5,6 @@ import { Box, MenuItem, Radio, Typography } from '@mui/joy';
 import { CloseableMenu } from '~/common/components/CloseableMenu';
 import { KeyStroke } from '~/common/components/KeyStroke';
 import { useUIPreferencesStore } from '~/common/state/store-ui';
-import { useUXLabsStore } from '~/common/state/store-ux-labs';
 
 import { ChatModeId } from '../../AppChat';
 
@@ -14,29 +13,25 @@ interface ChatModeDescription {
   label: string;
   description: string | React.JSX.Element;
   shortcut?: string;
-  experimental?: boolean;
+  requiresTTI?: boolean;
 }
 
 const ChatModeItems: { [key in ChatModeId]: ChatModeDescription } = {
-  'immediate': {
+  'generate-text': {
     label: 'Chat',
     description: 'Persona replies',
   },
-  'write-user': {
+  'append-user': {
     label: 'Write',
     description: 'Appends a message',
     shortcut: 'Alt + Enter',
   },
-  'draw-imagine': {
+  'generate-image': {
     label: 'Draw',
     description: 'AI Image Generation',
+    requiresTTI: true,
   },
-  'draw-imagine-plus': {
-    label: 'Assisted Draw',
-    description: 'Assisted Image Generation',
-    experimental: true,
-  },
-  'react': {
+  'generate-react': {
     label: 'Reason + Act · α',
     description: 'Answers questions in multiple steps',
   },
@@ -49,11 +44,14 @@ function fixNewLineShortcut(shortcut: string, enterIsNewLine: boolean) {
   return shortcut;
 }
 
-export function ChatModeMenu(props: { anchorEl: HTMLAnchorElement | null, onClose: () => void, chatModeId: ChatModeId, onSetChatModeId: (chatMode: ChatModeId) => void }) {
+export function ChatModeMenu(props: {
+  anchorEl: HTMLAnchorElement | null, onClose: () => void,
+  chatModeId: ChatModeId, onSetChatModeId: (chatMode: ChatModeId) => void
+  capabilityHasTTI: boolean,
+}) {
 
   // external state
   const enterIsNewline = useUIPreferencesStore(state => state.enterIsNewline);
-  const labsMagicDraw = useUXLabsStore(state => state.labsMagicDraw);
 
   return <CloseableMenu
     placement='top-end' sx={{ minWidth: 320 }}
@@ -68,14 +66,13 @@ export function ChatModeMenu(props: { anchorEl: HTMLAnchorElement | null, onClos
 
     {/* ChatMode items */}
     {Object.entries(ChatModeItems)
-      .filter(([, { experimental }]) => labsMagicDraw || !experimental)
       .map(([key, data]) =>
         <MenuItem key={'chat-mode-' + key} onClick={() => props.onSetChatModeId(key as ChatModeId)}>
           <Box sx={{ flexGrow: 1, display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 2 }}>
             <Radio checked={key === props.chatModeId} />
             <Box sx={{ flexGrow: 1 }}>
               <Typography>{data.label}</Typography>
-              <Typography level='body-xs'>{data.description}</Typography>
+              <Typography level='body-xs'>{data.description}{(data.requiresTTI && !props.capabilityHasTTI) ? 'Unconfigured' : ''}</Typography>
             </Box>
             {(key === props.chatModeId || !!data.shortcut) && (
               <KeyStroke combo={fixNewLineShortcut((key === props.chatModeId) ? 'ENTER' : data.shortcut ? data.shortcut : 'ENTER', enterIsNewline)} />

src/apps/chat/components/composer/TokenBadge.tsx

@@ -1,11 +1,18 @@
 import * as React from 'react';
 
-import { Badge, ColorPaletteProp, Tooltip } from '@mui/joy';
-import { SxProps } from '@mui/joy/styles/types';
+import { Badge, Box, ColorPaletteProp, Tooltip } from '@mui/joy';
 
 
-export function tokensPrettyMath(tokenLimit: number | 0, directTokens: number, indirectTokens?: number) {
-  const usedTokens = directTokens + (indirectTokens || 0);
+function alignRight(value: number, columnSize: number = 7) {
+  const str = value.toLocaleString();
+  return str.padStart(columnSize);
+}
+
+
+export function tokensPrettyMath(tokenLimit: number | 0, directTokens: number, historyTokens?: number, responseMaxTokens?: number): {
+  color: ColorPaletteProp, message: string, remainingTokens: number
+} {
+  const usedTokens = directTokens + (historyTokens || 0) + (responseMaxTokens || 0);
   const remainingTokens = tokenLimit - usedTokens;
   const gteLimit = (remainingTokens <= 0 && tokenLimit > 0);
 
@@ -17,23 +24,24 @@ export function tokensPrettyMath(tokenLimit: number | 0, directTokens: number, i
     message += `Requested: ${usedTokens.toLocaleString()} tokens`;
   }
   // has full information (d + i < l)
-  else if (indirectTokens) {
+  else if (historyTokens || responseMaxTokens) {
     message +=
-      `${Math.abs(remainingTokens).toLocaleString()} ${remainingTokens > 0 ? 'available' : 'excess'} tokens\n\n` +
-      `  = Model max tokens:  ${tokenLimit.toLocaleString()}\n` +
-      `      - Chat Message:  ${directTokens.toLocaleString()}` +
-      (indirectTokens ? `\n- History + Response:  ${indirectTokens?.toLocaleString()}` : '');
+      `${Math.abs(remainingTokens).toLocaleString()} ${remainingTokens >= 0 ? 'available' : 'excess'} message tokens\n\n` +
+      ` = Model max tokens: ${alignRight(tokenLimit)}\n` +
+      `     - This message: ${alignRight(directTokens)}\n` +
+      `          - History: ${alignRight(historyTokens || 0)}\n` +
+      `     - Max response: ${alignRight(responseMaxTokens || 0)}`;
   }
   // Cleaner mode: d + ? < R (total is the remaining in this case)
   else {
     message +=
       `${(tokenLimit + usedTokens).toLocaleString()} available tokens after deleting this\n\n` +
-      ` = Currently free: ${tokenLimit.toLocaleString()}\n` +
-      `   + This message: ${usedTokens.toLocaleString()}`;
+      ` = Currently free: ${alignRight(tokenLimit)}\n` +
+      `   + This message: ${alignRight(usedTokens)}`;
   }
 
   const color: ColorPaletteProp =
-    (tokenLimit && remainingTokens < 1)
+    (tokenLimit && remainingTokens < 0)
       ? 'danger'
       : remainingTokens < tokenLimit / 4
         ? 'warning'
@@ -43,35 +51,61 @@ export function tokensPrettyMath(tokenLimit: number | 0, directTokens: number, i
 }
 
 
+export const TokenTooltip = (props: { message: string | null, color: ColorPaletteProp, placement?: 'top' | 'top-end', children: React.JSX.Element }) =>
+  <Tooltip
+    placement={props.placement}
+    variant={props.color !== 'primary' ? 'solid' : 'soft'} color={props.color}
+    title={props.message
+      ? <Box sx={{ p: 2, whiteSpace: 'pre' }}>
+        {props.message}
+      </Box>
+      : null
+    }
+    sx={{
+      fontFamily: 'code',
+      boxShadow: 'xl',
+    }}
+  >
+    {props.children}
+  </Tooltip>;
+
+
 /**
  * Simple little component to show the token count (and a tooltip on hover)
  */
-export function TokenBadge({ directTokens, indirectTokens, tokenLimit, showExcess, absoluteBottomRight, inline, sx }: { directTokens: number, indirectTokens?: number, tokenLimit: number, showExcess?: boolean, absoluteBottomRight?: boolean, inline?: boolean, sx?: SxProps }) {
+export const TokenBadgeMemo = React.memo(TokenBadge);
 
-  const fontSx: SxProps = { fontFamily: 'code', ...(sx || {}) };
-  const outerSx: SxProps = absoluteBottomRight ? { position: 'absolute', bottom: 8, right: 8 } : {};
-  const innerSx: SxProps = (absoluteBottomRight || inline) ? { position: 'static', transform: 'none', ...fontSx } : fontSx;
+function TokenBadge(props: {
+  direct: number, history?: number, responseMax?: number, limit: number,
+  showExcess?: boolean, absoluteBottomRight?: boolean, inline?: boolean,
+}) {
 
-  const { message, color, remainingTokens } = tokensPrettyMath(tokenLimit, directTokens, indirectTokens);
+  const { message, color, remainingTokens } = tokensPrettyMath(props.limit, props.direct, props.history, props.responseMax);
 
   // show the direct tokens, unless we exceed the limit and 'showExcess' is enabled
-  const value = (showExcess && (tokenLimit && remainingTokens <= 0))
+  const value = (props.showExcess && (props.limit && remainingTokens <= 0))
     ? Math.abs(remainingTokens)
-    : directTokens;
+    : props.direct;
 
   return (
     <Badge
       variant='solid' color={color} max={100000}
-      invisible={!directTokens && remainingTokens >= 0}
+      invisible={!props.direct && remainingTokens >= 0}
       badgeContent={
-        <Tooltip title={<span style={{ whiteSpace: 'pre' }}>{message}</span>} color={color} sx={fontSx}>
+        <TokenTooltip color={color} message={message}>
           <span>{value.toLocaleString()}</span>
-        </Tooltip>
+        </TokenTooltip>
       }
-      sx={outerSx}
+      sx={{
+        ...((props.absoluteBottomRight) && { position: 'absolute', bottom: 8, right: 8 }),
+        cursor: 'help',
+      }}
       slotProps={{
         badge: {
-          sx: innerSx,
+          sx: {
+            fontFamily: 'code',
+            ...((props.absoluteBottomRight || props.inline) && { position: 'static', transform: 'none' }),
+          },
         },
       }}
     />

src/apps/chat/components/composer/TokenProgressbar.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 
-import { Box, Tooltip, useTheme } from '@mui/joy';
+import { Box, useTheme } from '@mui/joy';
 
-import { tokensPrettyMath } from './TokenBadge';
+import { tokensPrettyMath, TokenTooltip } from './TokenBadge';
 
 
 /**
@@ -10,15 +10,17 @@ import { tokensPrettyMath } from './TokenBadge';
  *
  * The Textarea contains it within the Composer (at least).
  */
-export function TokenProgressbar(props: { history: number, response: number, direct: number, limit: number }) {
+export const TokenProgressbarMemo = React.memo(TokenProgressbar);
+
+function TokenProgressbar(props: { direct: number, history: number, responseMax: number, limit: number }) {
   // external state
   const theme = useTheme();
 
-  if (!(props.limit > 0) || (!props.direct && !props.history && !props.response)) return null;
+  if (!(props.limit > 0) || (!props.direct && !props.history && !props.responseMax)) return null;
 
   // compute percentages
   let historyPct = 100 * props.history / props.limit;
-  let responsePct = 100 * props.response / props.limit;
+  let responsePct = 100 * props.responseMax / props.limit;
   let directPct = 100 * props.direct / props.limit;
   const totalPct = historyPct + responsePct + directPct;
   const isOverflow = totalPct >= 100;
@@ -38,7 +40,7 @@ export function TokenProgressbar(props: { history: number, response: number, dir
   const overflowColor = theme.palette.danger.softColor;
 
   // tooltip message/color
-  const { message, color } = tokensPrettyMath(props.limit, props.direct, props.history + props.response);
+  const { message, color } = tokensPrettyMath(props.limit, props.direct, props.history, props.responseMax);
 
   // sizes
   const containerHeight = 8;
@@ -46,11 +48,11 @@ export function TokenProgressbar(props: { history: number, response: number, dir
 
   return (
 
-    <Tooltip title={<span style={{ whiteSpace: 'pre' }}>{message}</span>} color={color} sx={{ fontFamily: 'code' }}>
+    <TokenTooltip color={color} message={props.direct ? null : message}>
 
       <Box sx={{
         position: 'absolute', left: 1, right: 1, bottom: 1, height: containerHeight,
-        overflow: 'hidden', borderBottomLeftRadius: 7, borderBottomRightRadius: 7,
+        overflow: 'hidden', borderBottomLeftRadius: 5, borderBottomRightRadius: 5,
       }}>
 
         {/* History */}
@@ -79,6 +81,6 @@ export function TokenProgressbar(props: { history: number, response: number, dir
 
       </Box>
 
-    </Tooltip>
+    </TokenTooltip>
   );
 }

src/apps/chat/components/composer/attachments/AttachmentItem.tsx

@@ -0,0 +1,201 @@
+import * as React from 'react';
+
+import { Box, Button, CircularProgress, ColorPaletteProp, Sheet, Typography } from '@mui/joy';
+import AbcIcon from '@mui/icons-material/Abc';
+import CodeIcon from '@mui/icons-material/Code';
+import ImageOutlinedIcon from '@mui/icons-material/ImageOutlined';
+import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
+import PivotTableChartIcon from '@mui/icons-material/PivotTableChart';
+import TextFieldsIcon from '@mui/icons-material/TextFields';
+import TextureIcon from '@mui/icons-material/Texture';
+import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
+
+import { GoodTooltip } from '~/common/components/GoodTooltip';
+import { ellipsizeFront, ellipsizeMiddle } from '~/common/util/textUtils';
+
+import type { Attachment, AttachmentConverterType, AttachmentId } from './store-attachments';
+import type { LLMAttachment } from './useLLMAttachments';
+
+
+// default attachment width
+const ATTACHMENT_MIN_STYLE = {
+  height: '100%',
+  minHeight: '40px',
+  minWidth: '64px',
+};
+
+
+const ellipsizeLabel = (label?: string) => {
+  if (!label)
+    return '';
+  return ellipsizeMiddle((label || '')
+    .replace(/https?:\/\/(?:www\.)?/, ''), 30)
+    .replace(/\/$/, '')
+    .replace('…', '…\n…');
+};
+
+
+/**
+ * Displayed while a source is loading
+ */
+const LoadingIndicator = React.forwardRef((props: { label: string }, _ref) =>
+  <Sheet
+    color='success' variant='soft'
+    sx={{
+      border: '1px solid',
+      borderColor: 'success.solidBg',
+      borderRadius: 'sm',
+      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 1,
+      ...ATTACHMENT_MIN_STYLE,
+      boxSizing: 'border-box',
+      px: 1,
+      py: 0.5,
+    }}
+  >
+    <CircularProgress color='success' size='sm' />
+    <Typography level='title-sm' sx={{ whiteSpace: 'nowrap' }}>
+      {ellipsizeLabel(props.label)}
+    </Typography>
+  </Sheet>,
+);
+LoadingIndicator.displayName = 'LoadingIndicator';
+
+
+const InputErrorIndicator = () =>
+  <WarningRoundedIcon sx={{ color: 'danger.solidBg' }} />;
+
+
+const converterTypeToIconMap: { [key in AttachmentConverterType]: React.ComponentType<any> } = {
+  'text': TextFieldsIcon,
+  'rich-text': CodeIcon,
+  'rich-text-table': PivotTableChartIcon,
+  'pdf-text': PictureAsPdfIcon,
+  'pdf-images': PictureAsPdfIcon,
+  'image': ImageOutlinedIcon,
+  'image-ocr': AbcIcon,
+  'unhandled': TextureIcon,
+};
+
+function attachmentConverterIcon(attachment: Attachment) {
+  const converter = attachment.converterIdx !== null ? attachment.converters[attachment.converterIdx] ?? null : null;
+  if (converter && converter.id) {
+    const Icon = converterTypeToIconMap[converter.id] ?? null;
+    if (Icon)
+      return <Icon sx={{ width: 24, height: 24 }} />;
+  }
+  return null;
+}
+
+function attachmentLabelText(attachment: Attachment): string {
+  return ellipsizeFront(attachment.label, 24);
+}
+
+
+export function AttachmentItem(props: {
+  llmAttachment: LLMAttachment,
+  menuShown: boolean,
+  onItemMenuToggle: (attachmentId: AttachmentId, anchor: HTMLAnchorElement) => void,
+}) {
+
+  // derived state
+
+  const { onItemMenuToggle } = props;
+
+  const {
+    attachment,
+    isUnconvertible,
+    isOutputMissing,
+    isOutputAttachable,
+  } = props.llmAttachment;
+
+  const {
+    inputError,
+    inputLoading: isInputLoading,
+    outputsConverting: isOutputLoading,
+  } = attachment;
+
+  const isInputError = !!inputError;
+  const showWarning = isUnconvertible || isOutputMissing || !isOutputAttachable;
+
+
+  const handleToggleMenu = React.useCallback((event: React.MouseEvent<HTMLAnchorElement>) => {
+    event.stopPropagation();
+    onItemMenuToggle(attachment.id, event.currentTarget);
+  }, [attachment, onItemMenuToggle]);
+
+
+  // compose tooltip
+  let tooltip: string | null = '';
+  if (attachment.source.media !== 'text')
+    tooltip += attachment.source.media + ': ';
+  tooltip += attachment.label;
+  // if (hasInput)
+  //   tooltip += `\n(${aInput.mimeType}: ${aInput.dataSize.toLocaleString()} bytes)`;
+  // if (aOutputs && aOutputs.length >= 1)
+  //   tooltip += `\n\n${JSON.stringify(aOutputs)}`;
+
+  // choose variants and color
+  let color: ColorPaletteProp;
+  let variant: 'soft' | 'outlined' | 'contained' = 'soft';
+  if (isInputLoading || isOutputLoading) {
+    color = 'success';
+  } else if (isInputError) {
+    tooltip = `Issue loading the attachment: ${attachment.inputError}\n\n${tooltip}`;
+    color = 'danger';
+  } else if (showWarning) {
+    tooltip = props.menuShown
+      ? null
+      : isUnconvertible
+        ? `Attachments of type '${attachment.input?.mimeType}' are not supported yet. You can open a feature request on GitHub.\n\n${tooltip}`
+        : `Not compatible with the selected LLM or not supported. Please select another format.\n\n${tooltip}`;
+    color = 'warning';
+  } else {
+    // all good
+    tooltip = null;
+    color = /*props.menuShown ? 'primary' :*/ 'neutral';
+    variant = 'outlined';
+  }
+
+
+  return <Box>
+
+    <GoodTooltip
+      title={tooltip}
+      isError={isInputError}
+      isWarning={showWarning}
+      sx={{ p: 1, whiteSpace: 'break-spaces' }}
+    >
+      {isInputLoading
+        ? <LoadingIndicator label={attachment.label} />
+        : (
+          <Button
+            size='sm'
+            variant={variant} color={color}
+            onClick={handleToggleMenu}
+            sx={{
+              backgroundColor: props.menuShown ? `${color}.softActiveBg` : variant === 'outlined' ? 'background.popup' : undefined,
+              border: variant === 'soft' ? '1px solid' : undefined,
+              borderColor: variant === 'soft' ? `${color}.solidBg` : undefined,
+              borderRadius: 'sm',
+              fontWeight: 'normal',
+              ...ATTACHMENT_MIN_STYLE,
+              px: 1, py: 0.5,
+              display: 'flex', flexDirection: 'row', gap: 1,
+            }}
+          >
+            {isInputError
+              ? <InputErrorIndicator />
+              : <>
+                {attachmentConverterIcon(attachment)}
+                {isOutputLoading
+                  ? <>Converting <CircularProgress color='success' size='sm' /></>
+                  : <Typography level='title-sm' sx={{ whiteSpace: 'nowrap' }}>
+                    {attachmentLabelText(attachment)}
+                  </Typography>}
+              </>}
+          </Button>
+        )}
+    </GoodTooltip>
+
+  </Box>;
+}

src/apps/chat/components/composer/attachments/AttachmentMenu.tsx

@@ -0,0 +1,186 @@
+import * as React from 'react';
+
+import { Box, ListDivider, ListItemDecorator, MenuItem, Radio, Typography } from '@mui/joy';
+import ClearIcon from '@mui/icons-material/Clear';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import VerticalAlignBottomIcon from '@mui/icons-material/VerticalAlignBottom';
+
+import { CloseableMenu } from '~/common/components/CloseableMenu';
+import { copyToClipboard } from '~/common/util/clipboardUtils';
+
+import type { LLMAttachment } from './useLLMAttachments';
+import { useAttachmentsStore } from './store-attachments';
+
+
+// enable for debugging
+export const DEBUG_ATTACHMENTS = true;
+
+
+export function AttachmentMenu(props: {
+  llmAttachment: LLMAttachment,
+  menuAnchor: HTMLAnchorElement,
+  isPositionFirst: boolean,
+  isPositionLast: boolean,
+  onAttachmentInlineText: (attachmentId: string) => void,
+  onClose: () => void,
+}) {
+
+  // derived state
+
+  const isPositionFixed = props.isPositionFirst && props.isPositionLast;
+
+  const {
+    attachment,
+    attachmentOutputs,
+    isUnconvertible,
+    isOutputMissing,
+    isOutputTextInlineable,
+    tokenCountApprox,
+  } = props.llmAttachment;
+
+  const {
+    id: aId,
+    input: aInput,
+    converters: aConverters,
+    converterIdx: aConverterIdx,
+    outputs: aOutputs,
+  } = attachment;
+
+
+  // operations
+
+  const { onClose, onAttachmentInlineText } = props;
+
+  const handleInlineText = React.useCallback(() => {
+    onClose();
+    onAttachmentInlineText(aId);
+  }, [aId, onAttachmentInlineText, onClose]);
+
+  const handleMoveUp = React.useCallback(() => {
+    useAttachmentsStore.getState().moveAttachment(aId, -1);
+  }, [aId]);
+
+  const handleMoveDown = React.useCallback(() => {
+    useAttachmentsStore.getState().moveAttachment(aId, 1);
+  }, [aId]);
+
+  const handleRemove = React.useCallback(() => {
+    onClose();
+    useAttachmentsStore.getState().removeAttachment(aId);
+  }, [aId, onClose]);
+
+  const handleSetConverterIdx = React.useCallback(async (converterIdx: number | null) => {
+    return useAttachmentsStore.getState().setConverterIdx(aId, converterIdx);
+  }, [aId]);
+
+  // const handleSummarizeText = React.useCallback(() => {
+  //   onAttachmentSummarizeText(aId);
+  // }, [aId, onAttachmentSummarizeText]);
+
+  const handleCopyOutputToClipboard = React.useCallback(() => {
+    if (attachmentOutputs.length >= 1) {
+      const concat = attachmentOutputs.map(output => {
+        if (output.type === 'text-block')
+          return output.text;
+        else if (output.type === 'image-part')
+          return output.base64Url;
+        else
+          return null;
+      }).join('\n\n---\n\n');
+      copyToClipboard(concat.trim(), 'Converted attachment');
+    }
+  }, [attachmentOutputs]);
+
+
+  return (
+    <CloseableMenu
+      dense placement='top' sx={{ minWidth: 200 }}
+      open anchorEl={props.menuAnchor} onClose={props.onClose}
+      noTopPadding noBottomPadding
+    >
+
+      {/* Move Arrows */}
+      {!isPositionFixed && <Box sx={{ display: 'flex', alignItems: 'center' }}>
+        <MenuItem
+          disabled={props.isPositionFirst}
+          onClick={handleMoveUp}
+          sx={{ flex: 1, display: 'flex', justifyContent: 'center' }}
+        >
+          <KeyboardArrowLeftIcon />
+        </MenuItem>
+        <MenuItem
+          disabled={props.isPositionLast}
+          onClick={handleMoveDown}
+          sx={{ flex: 1, display: 'flex', justifyContent: 'center' }}
+        >
+          <KeyboardArrowRightIcon />
+        </MenuItem>
+      </Box>}
+      {!isPositionFixed && <ListDivider sx={{ mt: 0 }} />}
+
+      {/* Render Converters as menu items */}
+      {/*{!isUnconvertible && <ListItem>*/}
+      {/*  <Typography level='body-md'>*/}
+      {/*    Attach as:*/}
+      {/*  </Typography>*/}
+      {/*</ListItem>}*/}
+      {!isUnconvertible && aConverters.map((c, idx) =>
+        <MenuItem
+          disabled={c.disabled}
+          key={'c-' + c.id}
+          onClick={async () => idx !== aConverterIdx && await handleSetConverterIdx(idx)}
+        >
+          <ListItemDecorator>
+            <Radio checked={idx === aConverterIdx} />
+          </ListItemDecorator>
+          {c.unsupported
+            ? <Box>Unsupported 🤔 <Typography level='body-xs'>{c.name}</Typography></Box>
+            : c.name}
+        </MenuItem>,
+      )}
+      {!isUnconvertible && <ListDivider />}
+
+      {DEBUG_ATTACHMENTS && !!aInput && (
+        <MenuItem onClick={handleCopyOutputToClipboard} disabled={!isOutputTextInlineable}>
+          <ListItemDecorator><ContentCopyIcon /></ListItemDecorator>
+          <Box>
+            {!!aInput && <Typography level='body-xs'>
+              🡐 {aInput.mimeType}, {aInput.dataSize.toLocaleString()} bytes
+            </Typography>}
+            {/*<Typography level='body-xs'>*/}
+            {/*  Converters: {aConverters.map(((converter, idx) => ` ${converter.id}${(idx === aConverterIdx) ? '*' : ''}`)).join(', ')}*/}
+            {/*</Typography>*/}
+            <Typography level='body-xs'>
+              🡒 {isOutputMissing ? 'empty' : aOutputs.map(output => `${output.type}, ${output.type === 'text-block' ? output.text.length.toLocaleString() : '(base64 image)'} bytes`).join(' · ')}
+            </Typography>
+            {!!tokenCountApprox && <Typography level='body-xs'>
+              🡒 {tokenCountApprox.toLocaleString()} tokens
+            </Typography>}
+          </Box>
+        </MenuItem>
+      )}
+      {DEBUG_ATTACHMENTS && !!aInput && <ListDivider />}
+
+      {/* Destructive Operations */}
+      {/*<MenuItem onClick={handleCopyOutputToClipboard} disabled={!isOutputTextInlineable}>*/}
+      {/*  <ListItemDecorator><ContentCopyIcon /></ListItemDecorator>*/}
+      {/*  Copy*/}
+      {/*</MenuItem>*/}
+      {/*<MenuItem onClick={handleSummarizeText} disabled={!isOutputTextInlineable}>*/}
+      {/*  <ListItemDecorator><CompressIcon color='success' /></ListItemDecorator>*/}
+      {/*  Shrink*/}
+      {/*</MenuItem>*/}
+      <MenuItem onClick={handleInlineText} disabled={!isOutputTextInlineable}>
+        <ListItemDecorator><VerticalAlignBottomIcon /></ListItemDecorator>
+        Inline text
+      </MenuItem>
+      <MenuItem onClick={handleRemove}>
+        <ListItemDecorator><ClearIcon /></ListItemDecorator>
+        Remove
+      </MenuItem>
+
+    </CloseableMenu>
+  );
+}

src/apps/chat/components/composer/attachments/Attachments.tsx

@@ -0,0 +1,170 @@
+import * as React from 'react';
+
+import { Box, IconButton, ListItemDecorator, MenuItem } from '@mui/joy';
+import ClearIcon from '@mui/icons-material/Clear';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import VerticalAlignBottomIcon from '@mui/icons-material/VerticalAlignBottom';
+
+import { CloseableMenu } from '~/common/components/CloseableMenu';
+import { ConfirmationModal } from '~/common/components/ConfirmationModal';
+
+import type { AttachmentId } from './store-attachments';
+import type { LLMAttachments } from './useLLMAttachments';
+import { AttachmentItem } from './AttachmentItem';
+import { AttachmentMenu } from './AttachmentMenu';
+
+
+/**
+ * Renderer of attachments, with menus, etc.
+ */
+export function Attachments(props: {
+  llmAttachments: LLMAttachments,
+  onAttachmentInlineText: (attachmentId: AttachmentId) => void,
+  onAttachmentsClear: () => void,
+  onAttachmentsInlineText: () => void,
+}) {
+
+  // state
+  const [confirmClearAttachments, setConfirmClearAttachments] = React.useState<boolean>(false);
+  const [itemMenu, setItemMenu] = React.useState<{ anchor: HTMLAnchorElement, attachmentId: AttachmentId } | null>(null);
+  const [overallMenuAnchor, setOverallMenuAnchor] = React.useState<HTMLAnchorElement | null>(null);
+
+  // derived state
+  const { llmAttachments, onAttachmentsClear, onAttachmentInlineText, onAttachmentsInlineText } = props;
+
+  const { attachments, isOutputTextInlineable } = llmAttachments;
+
+  const hasAttachments = attachments.length >= 1;
+
+  // derived item menu state
+
+  const itemMenuAnchor = itemMenu?.anchor;
+  const itemMenuAttachmentId = itemMenu?.attachmentId;
+  const itemMenuAttachment = itemMenuAttachmentId ? attachments.find(la => la.attachment.id === itemMenu.attachmentId) : undefined;
+  const itemMenuIndex = itemMenuAttachment ? attachments.indexOf(itemMenuAttachment) : -1;
+
+
+  // item menu
+
+  const handleItemMenuToggle = React.useCallback((attachmentId: AttachmentId, anchor: HTMLAnchorElement) => {
+    handleOverallMenuHide();
+    setItemMenu(prev => prev?.attachmentId === attachmentId ? null : { anchor, attachmentId });
+  }, []);
+
+  const handleItemMenuHide = React.useCallback(() => {
+    setItemMenu(null);
+  }, []);
+
+
+  // item menu operations
+
+  const handleAttachmentInlineText = React.useCallback((attachmentId: string) => {
+    handleItemMenuHide();
+    onAttachmentInlineText(attachmentId);
+  }, [handleItemMenuHide, onAttachmentInlineText]);
+
+
+  // menu
+
+  const handleOverallMenuHide = () => setOverallMenuAnchor(null);
+
+  const handleOverallMenuToggle = (event: React.MouseEvent<HTMLAnchorElement>) =>
+    setOverallMenuAnchor(anchor => anchor ? null : event.currentTarget);
+
+
+  // overall operations
+
+  const handleAttachmentsInlineText = React.useCallback(() => {
+    handleOverallMenuHide();
+    onAttachmentsInlineText();
+  }, [onAttachmentsInlineText]);
+
+  const handleClearAttachments = () => setConfirmClearAttachments(true);
+
+  const handleClearAttachmentsConfirmed = React.useCallback(() => {
+    handleOverallMenuHide();
+    setConfirmClearAttachments(false);
+    onAttachmentsClear();
+  }, [onAttachmentsClear]);
+
+
+  // no components without attachments
+  if (!hasAttachments)
+    return null;
+
+  return <>
+
+    {/* Attachments bar */}
+    <Box sx={{ position: 'relative' }}>
+
+      {/* Horizontally scrollable Attachments */}
+      <Box sx={{ display: 'flex', overflowX: 'auto', gap: 1, height: '100%', pr: 5 }}>
+        {attachments.map((llmAttachment) =>
+          <AttachmentItem
+            key={llmAttachment.attachment.id}
+            llmAttachment={llmAttachment}
+            menuShown={llmAttachment.attachment.id === itemMenuAttachmentId}
+            onItemMenuToggle={handleItemMenuToggle}
+          />,
+        )}
+      </Box>
+
+      {/* Overall Menu button */}
+      <IconButton
+        variant='plain' onClick={handleOverallMenuToggle}
+        sx={{
+          // borderRadius: 'sm',
+          borderRadius: 0,
+          position: 'absolute', right: 0, top: 0,
+          backgroundColor: 'neutral.softDisabledBg',
+        }}
+      >
+        <ExpandLessIcon />
+      </IconButton>
+
+    </Box>
+
+
+    {/* Attachment Menu */}
+    {!!itemMenuAnchor && !!itemMenuAttachment && (
+      <AttachmentMenu
+        llmAttachment={itemMenuAttachment}
+        menuAnchor={itemMenuAnchor}
+        isPositionFirst={itemMenuIndex === 0}
+        isPositionLast={itemMenuIndex === attachments.length - 1}
+        onAttachmentInlineText={handleAttachmentInlineText}
+        onClose={handleItemMenuHide}
+      />
+    )}
+
+
+    {/* Overall Menu */}
+    {!!overallMenuAnchor && (
+      <CloseableMenu
+        placement='top-start'
+        open anchorEl={overallMenuAnchor} onClose={handleOverallMenuHide}
+        noTopPadding noBottomPadding
+      >
+        <MenuItem onClick={handleAttachmentsInlineText} disabled={!isOutputTextInlineable}>
+          <ListItemDecorator><VerticalAlignBottomIcon /></ListItemDecorator>
+          Inline <span style={{ opacity: 0.5 }}>text attachments</span>
+        </MenuItem>
+        <MenuItem onClick={handleClearAttachments}>
+          <ListItemDecorator><ClearIcon /></ListItemDecorator>
+          Clear
+        </MenuItem>
+      </CloseableMenu>
+    )}
+
+    {/* 'Clear' Confirmation */}
+    {confirmClearAttachments && (
+      <ConfirmationModal
+        open onClose={() => setConfirmClearAttachments(false)} onPositive={handleClearAttachmentsConfirmed}
+        title='Confirm Removal'
+        positiveActionText='Remove All'
+        confirmationText={`This action will remove all (${attachments.length}) attachments. Do you want to proceed?`}
+      />
+    )}
+
+  </>;
+}

src/apps/chat/components/composer/attachments/pipeline.tsx

@@ -0,0 +1,335 @@
+import { callBrowseFetchPage } from '~/modules/browse/browse.client';
+
+import { createBase36Uid } from '~/common/util/textUtils';
+import { htmlTableToMarkdown } from '~/common/util/htmlTableToMarkdown';
+import { pdfToText } from '~/common/util/pdfUtils';
+
+import type { Attachment, AttachmentConverter, AttachmentId, AttachmentInput, AttachmentSource } from './store-attachments';
+import type { ComposerOutputMultiPart } from '../composer.types';
+
+
+// extensions to treat as plain text
+const PLAIN_TEXT_EXTENSIONS: string[] = ['.ts', '.tsx'];
+
+/**
+ * Creates a new Attachment object.
+ */
+export function attachmentCreate(source: AttachmentSource, checkDuplicates: AttachmentId[]): Attachment {
+  return {
+    id: createBase36Uid(checkDuplicates),
+    source: source,
+    label: 'Loading...',
+    ref: '',
+    inputLoading: false,
+    inputError: null,
+    input: undefined,
+    converters: [],
+    converterIdx: null,
+    outputsConverting: false,
+    outputs: [],
+    // metadata: {},
+  };
+}
+
+/**
+ * Asynchronously loads the input for an Attachment object.
+ *
+ * @param {Readonly<AttachmentSource>} source - The source of the attachment.
+ * @param {(changes: Partial<Attachment>) => void} edit - A function to edit the Attachment object.
+ */
+export async function attachmentLoadInputAsync(source: Readonly<AttachmentSource>, edit: (changes: Partial<Attachment>) => void) {
+  edit({ inputLoading: true });
+
+  switch (source.media) {
+
+    // Download URL (page, file, ..) and attach as input
+    case 'url':
+      edit({ label: source.refUrl, ref: source.refUrl });
+      try {
+        const page = await callBrowseFetchPage(source.url);
+        if (page.content) {
+          edit({
+            input: {
+              mimeType: 'text/plain',
+              data: page.content,
+              dataSize: page.content.length,
+            },
+          });
+        } else
+          edit({ inputError: 'No content found at this link' });
+      } catch (error: any) {
+        edit({ inputError: `Issue downloading page: ${error?.message || (typeof error === 'string' ? error : JSON.stringify(error))}` });
+      }
+      break;
+
+    // Attach file as input
+    case 'file':
+      edit({ label: source.refPath, ref: source.refPath });
+
+      // fix missing/wrong mimetypes
+      let mimeType = source.fileWithHandle.type;
+      if (!mimeType) {
+        // see note on 'attachAppendDataTransfer'; this is a fallback for drag/drop missing Mimes sometimes
+        console.warn('Assuming the attachment is text/plain. From:', source.origin, ', name:', source.refPath);
+        mimeType = 'text/plain';
+      } else {
+        // possibly fix wrongly assigned mimetypes (from the extension alone)
+        if (!mimeType.startsWith('text/') && PLAIN_TEXT_EXTENSIONS.some(ext => source.refPath.endsWith(ext)))
+          mimeType = 'text/plain';
+      }
+
+      // UX: just a hint of a loading state
+      await new Promise(resolve => setTimeout(resolve, 100));
+
+      try {
+        const fileArrayBuffer = await source.fileWithHandle.arrayBuffer();
+        edit({
+          input: {
+            mimeType,
+            data: fileArrayBuffer,
+            dataSize: fileArrayBuffer.byteLength,
+          },
+        });
+      } catch (error: any) {
+        edit({ inputError: `Issue loading file: ${error?.message || (typeof error === 'string' ? error : JSON.stringify(error))}` });
+      }
+      break;
+
+    case 'text':
+      if (source.textHtml && source.textPlain) {
+        edit({
+          label: 'Rich Text',
+          ref: '',
+          input: {
+            mimeType: 'text/plain',
+            data: source.textPlain,
+            dataSize: source.textPlain!.length,
+            altMimeType: 'text/html',
+            altData: source.textHtml,
+          },
+        });
+      } else {
+        const text = source.textHtml || source.textPlain || '';
+        edit({
+          label: 'Text',
+          ref: '',
+          input: {
+            mimeType: 'text/plain',
+            data: text,
+            dataSize: text.length,
+          },
+        });
+      }
+      break;
+  }
+
+  edit({ inputLoading: false });
+}
+
+/**
+ * Defines the possible converters for an Attachment object based on its input type.
+ *
+ * @param {AttachmentSource['media']} sourceType - The media type of the attachment source.
+ * @param {Readonly<AttachmentInput>} input - The input of the attachment.
+ * @param {(changes: Partial<Attachment>) => void} edit - A function to edit the Attachment object.
+ */
+export function attachmentDefineConverters(sourceType: AttachmentSource['media'], input: Readonly<AttachmentInput>, edit: (changes: Partial<Attachment>) => void) {
+
+  // return all the possible converters for the input
+  const converters: AttachmentConverter[] = [];
+
+  switch (true) {
+
+    // plain text types
+    case ['text/plain', 'text/html', 'text/markdown', 'text/csv', 'application/json'].includes(input.mimeType):
+      // handle a secondary layer of HTML 'text' origins: drop, paste, and clipboard-read
+      const textOriginHtml = sourceType === 'text' && input.altMimeType === 'text/html' && !!input.altData;
+      const isHtmlTable = !!input.altData?.startsWith('<table');
+
+      // p1: Tables
+      if (textOriginHtml && isHtmlTable) {
+        converters.push({
+          id: 'rich-text-table',
+          name: 'Markdown Table',
+        });
+      }
+
+      // p2: Text
+      converters.push({
+        id: 'text',
+        name: 'Text',
+      });
+
+      // p3: Html
+      if (textOriginHtml) {
+        converters.push({
+          id: 'rich-text',
+          name: 'HTML',
+        });
+      }
+      break;
+
+    // PDF
+    case ['application/pdf', 'application/x-pdf', 'application/acrobat'].includes(input.mimeType):
+      converters.push({ id: 'pdf-text', name: `PDF To Text` });
+      converters.push({ id: 'pdf-images', name: `PDF To Images`, disabled: true });
+      break;
+
+    // images
+    case input.mimeType.startsWith('image/'):
+      converters.push({ id: 'image', name: `Image (coming soon)` });
+      converters.push({ id: 'image-ocr', name: 'As Text (OCR)' });
+      break;
+
+    // catch-all
+    default:
+      converters.push({ id: 'unhandled', name: `${input.mimeType}`, unsupported: true });
+      converters.push({ id: 'text', name: 'As Text' });
+      break;
+  }
+
+  edit({ converters });
+}
+
+/**
+ * Converts the input of an Attachment object based on the selected converter.
+ *
+ * @param {Readonly<Attachment>} attachment - The Attachment object to convert.
+ * @param {number | null} converterIdx - The index of the selected conversion in the Attachment object's converters array.
+ * @param {(changes: Partial<Attachment>) => void} edit - A function to edit the Attachment object.
+ */
+export async function attachmentPerformConversion(attachment: Readonly<Attachment>, converterIdx: number | null, edit: (changes: Partial<Attachment>) => void) {
+
+  // set converter index
+  converterIdx = (converterIdx !== null && converterIdx >= 0 && converterIdx < attachment.converters.length) ? converterIdx : null;
+  edit({
+    converterIdx: converterIdx,
+    outputs: [],
+  });
+
+  // get converter
+  const { ref, input } = attachment;
+  const converter = converterIdx !== null ? attachment.converters[converterIdx] : null;
+  if (!converter || !input)
+    return;
+
+  edit({
+    outputsConverting: true,
+  });
+
+  // input datacould be a string or an ArrayBuffer
+  function inputDataToString(data: string | ArrayBuffer | null | undefined): string {
+    if (typeof data === 'string')
+      return data;
+    if (data instanceof ArrayBuffer)
+      return new TextDecoder().decode(data);
+    return '';
+  }
+
+  // apply converter to the input
+  const outputs: ComposerOutputMultiPart = [];
+  switch (converter.id) {
+
+    // text as-is
+    case 'text':
+      outputs.push({
+        type: 'text-block',
+        text: inputDataToString(input.data),
+        title: ref,
+        collapsible: true,
+      });
+      break;
+
+    // html as-is
+    case 'rich-text':
+      outputs.push({
+        type: 'text-block',
+        text: input.altData!,
+        title: ref,
+        collapsible: true,
+      });
+      break;
+
+    // html to markdown table
+    case 'rich-text-table':
+      let mdTable: string;
+      try {
+        mdTable = htmlTableToMarkdown(input.altData!, false);
+      } catch (error) {
+        // fallback to text/plain
+        mdTable = inputDataToString(input.data);
+      }
+      outputs.push({
+        type: 'text-block',
+        text: mdTable,
+        title: ref,
+        collapsible: true,
+      });
+      break;
+
+    case 'pdf-text':
+      if (!(input.data instanceof ArrayBuffer)) {
+        console.log('Expected ArrayBuffer for PDF converter, got:', typeof input.data);
+        break;
+      }
+      // duplicate the ArrayBuffer to avoid mutation
+      const pdfData = new Uint8Array(input.data.slice(0));
+      const pdfText = await pdfToText(pdfData);
+      outputs.push({
+        type: 'text-block',
+        text: pdfText,
+        title: ref,
+        collapsible: true,
+      });
+      break;
+
+    case 'pdf-images':
+      // TODO: extract all pages as individual images
+      break;
+
+    case 'image':
+      // TODO: continue here
+      /*outputs.push({
+        type: 'image-part',
+        base64Url: `data:notImplemented.yet:)`,
+        collapsible: false,
+      });*/
+      break;
+
+    case 'image-ocr':
+      if (!(input.data instanceof ArrayBuffer)) {
+        console.log('Expected ArrayBuffer for Image OCR converter, got:', typeof input.data);
+        break;
+      }
+      try {
+        const { recognize } = await import('tesseract.js');
+        const buffer = Buffer.from(input.data);
+        const result = await recognize(buffer, undefined, {
+          errorHandler: e => console.error(e),
+          logger: (message) => {
+            if (message.status === 'recognizing text')
+              console.log('OCR progress:', message.progress);
+          },
+        });
+        outputs.push({
+          type: 'text-block',
+          text: result.data.text,
+          title: ref,
+          collapsible: true,
+        });
+      } catch (error) {
+        console.error(error);
+      }
+      break;
+
+    case 'unhandled':
+      // force the user to explicitly select 'as text' if they want to proceed
+      break;
+  }
+
+  // update
+  edit({
+    outputsConverting: false,
+    outputs,
+  });
+}

src/apps/chat/components/composer/attachments/port.ts

@@ -0,0 +1,42 @@
+/*
+
+/// REDUCER
+
+import { ContentReducer } from '~/modules/aifn/summarize/ContentReducer';
+
+  const [reducerText, setReducerText] = React.useState('');
+  const [reducerTextTokens, setReducerTextTokens] = React.useState(0);
+
+{reducerText?.length >= 1 &&
+<ContentReducer
+  initialText={reducerText} initialTokens={reducerTextTokens} tokenLimit={remainingTokens}
+  onReducedText={handleReducedText} onClose={handleReducerClose}
+  />
+}
+  const handleReducerClose = () => setReducerText('');
+
+  const handleReducedText = (text: string) => {
+    handleReducerClose();
+    setComposeText(_t => _t + text);
+  };
+
+  const handleAttachFiles = async (files: FileList, overrideFileNames?: string[]): Promise<void> => {
+
+    // see how we fare on budget
+    if (chatLLMId) {
+      const newTextTokens = countModelTokens(newText, chatLLMId, 'reducer trigger');
+
+      // simple trigger for the reduction dialog
+      if (newTextTokens > remainingTokens) {
+        setReducerTextTokens(newTextTokens);
+        setReducerText(newText);
+        return;
+      }
+    }
+
+    // within the budget, so just append
+    setComposeText(text => expandPromptTemplate(PromptTemplates.Concatenate, { text: newText })(text));
+
+
+
+*/

src/apps/chat/components/composer/attachments/store-attachments.tsx

@@ -0,0 +1,201 @@
+import { create } from 'zustand';
+import type { FileWithHandle } from 'browser-fs-access';
+
+import type { ComposerOutputMultiPart } from '../composer.types';
+import { attachmentPerformConversion, attachmentCreate, attachmentDefineConverters, attachmentLoadInputAsync } from './pipeline';
+
+
+// Attachment Types
+
+export type AttachmentSourceOriginDTO = 'drop' | 'paste';
+export type AttachmentSourceOriginFile = 'camera' | 'file-open' | 'clipboard-read' | AttachmentSourceOriginDTO;
+
+export type AttachmentSource = {
+  media: 'url';
+  url: string;
+  refUrl: string;
+} | {
+  media: 'file';
+  origin: AttachmentSourceOriginFile,
+  fileWithHandle: FileWithHandle;
+  refPath: string;
+} | {
+  media: 'text';
+  method: 'clipboard-read' | AttachmentSourceOriginDTO;
+  textPlain?: string;
+  textHtml?: string;
+};
+
+
+export type AttachmentInput = {
+  mimeType: string; // Original MIME type of the file
+  data: string | ArrayBuffer; // The original data of the attachment
+  dataSize: number; // Size of the original data in bytes
+  altMimeType?: string; // Alternative MIME type for the input
+  altData?: string; // Alternative data for the input
+  // preview?: AttachmentPreview; // Preview of the input
+};
+
+
+export type AttachmentConverterType =
+  | 'text' | 'rich-text' | 'rich-text-table'
+  | 'pdf-text' | 'pdf-images'
+  | 'image' | 'image-ocr'
+  | 'unhandled';
+
+export type AttachmentConverter = {
+  id: AttachmentConverterType;
+  name: string;
+  disabled?: boolean;
+  unsupported?: boolean;
+  // outputType: ComposerOutputPartType; // The type of the output after conversion
+  // isAutonomous: boolean; // Whether the conversion does not require user input
+  // isAsync: boolean; // Whether the conversion is asynchronous
+  // progress: number; // Conversion progress percentage (0..1)
+  // errorMessage?: string; // Error message if the conversion failed
+}
+
+
+export type AttachmentId = string;
+
+export type Attachment = {
+  readonly id: AttachmentId;
+  readonly source: AttachmentSource,
+  label: string;
+  ref: string;
+
+  inputLoading: boolean;
+  inputError: string | null;
+  input?: AttachmentInput;
+
+  // options to convert the input
+  converters: AttachmentConverter[]; // List of available converters for this attachment
+  converterIdx: number | null; // Index of the selected converter
+
+  outputsConverting: boolean;
+  outputs: ComposerOutputMultiPart; // undefined: not yet converted, []: conversion failed, [ {}+ ]: conversion succeeded
+
+  // metadata: {
+  //   size?: number; // Size of the attachment in bytes
+  //   creationDate?: Date; // Creation date of the file
+  //   modifiedDate?: Date; // Last modified date of the file
+  //   altText?: string; // Alternative text for images for screen readers
+  // };
+};
+
+
+/*export type AttachmentPreview = {
+  renderer: 'noPreview',
+  title: string; // A title for the preview
+} | {
+  renderer: 'textPreview'
+  fileName: string; // The name of the file
+  snippet: string; // A text snippet for documents
+  tooltip?: string; // A tooltip for the preview
+} | {
+  renderer: 'imagePreview'
+  thumbnail: string; // A thumbnail preview for images, videos, etc.
+  tooltip?: string; // A tooltip for the preview
+};*/
+
+
+/// Store
+
+interface AttachmentsStore {
+
+  attachments: Attachment[];
+
+  createAttachment: (source: AttachmentSource) => Promise<void>;
+  clearAttachments: () => void;
+  removeAttachment: (attachmentId: AttachmentId) => void;
+  moveAttachment: (attachmentId: AttachmentId, delta: 1 | -1) => void;
+  setConverterIdx: (attachmentId: AttachmentId, converterIdx: number | null) => Promise<void>;
+
+  _editAttachment: (attachmentId: AttachmentId, update: Partial<Attachment> | ((attachment: Attachment) => Partial<Attachment>)) => void;
+  _getAttachment: (attachmentId: AttachmentId) => Attachment | undefined;
+
+}
+
+export const useAttachmentsStore = create<AttachmentsStore>()(
+  (_set, _get) => ({
+
+    attachments: [],
+
+    createAttachment: async (source: AttachmentSource) => {
+      const { attachments, _getAttachment, _editAttachment, setConverterIdx } = _get();
+
+      const attachment = attachmentCreate(source, attachments.map(a => a.id));
+
+      _set({
+        attachments: [...attachments, attachment],
+      });
+
+      const editFn = (changes: Partial<Attachment>) => _editAttachment(attachment.id, changes);
+
+      // 1.Resolve the Input
+      await attachmentLoadInputAsync(source, editFn);
+      const loaded = _getAttachment(attachment.id);
+      if (!loaded || !loaded.input)
+        return;
+
+      // 2. Define the I->O Converters
+      attachmentDefineConverters(source.media, loaded.input, editFn);
+      const defined = _getAttachment(attachment.id);
+      if (!defined || !defined.converters.length || defined.converterIdx !== null)
+        return;
+
+      // 3. Select the first Converter
+      const firstEnabledIndex = defined.converters.findIndex(_c => !_c.disabled);
+      await setConverterIdx(attachment.id, firstEnabledIndex > -1 ? firstEnabledIndex : 0);
+    },
+
+    clearAttachments: () => _set({
+      attachments: [],
+    }),
+
+    removeAttachment: (attachmentId: AttachmentId) =>
+      _set(state => ({
+        attachments: state.attachments.filter(attachment => attachment.id !== attachmentId),
+      })),
+
+    moveAttachment: (attachmentId: AttachmentId, delta: 1 | -1) =>
+      _set(state => {
+        const attachments = [...state.attachments];
+        const currentIdx = attachments.findIndex(a => a.id === attachmentId);
+
+        // If the attachment is not found, or if trying to move beyond the array boundaries, no move is needed
+        if (currentIdx === -1 || (currentIdx === 0 && delta === -1) || (currentIdx === attachments.length - 1 && delta === 1))
+          return state;
+
+        // Swap the attachment with the adjacent one in the direction of delta
+        const targetIdx = currentIdx + delta;
+        [attachments[currentIdx], attachments[targetIdx]] = [attachments[targetIdx], attachments[currentIdx]];
+
+        return { attachments };
+      }),
+
+    setConverterIdx: async (attachmentId: AttachmentId, converterIdx: number | null) => {
+      const { _getAttachment, _editAttachment } = _get();
+      const attachment = _getAttachment(attachmentId);
+      if (!attachment || attachment.converterIdx === converterIdx)
+        return;
+
+      const editFn = (changes: Partial<Attachment>) => _editAttachment(attachmentId, changes);
+
+      await attachmentPerformConversion(attachment, converterIdx, editFn);
+    },
+
+    _editAttachment: (attachmentId: AttachmentId, update: Partial<Attachment> | ((attachment: Attachment) => Partial<Attachment>)) =>
+      _set(state => ({
+        attachments: state.attachments.map((attachment: Attachment): Attachment =>
+          attachment.id === attachmentId
+            ? { ...attachment, ...(typeof update === 'function' ? update(attachment) : update) }
+            : attachment,
+        ),
+      })),
+
+    _getAttachment: (attachmentId: AttachmentId) =>
+      _get().attachments.find(a => a.id === attachmentId),
+
+  }),
+);

src/apps/chat/components/composer/attachments/useAttachments.tsx

@@ -0,0 +1,165 @@
+import * as React from 'react';
+import { shallow } from 'zustand/shallow';
+import type { FileWithHandle } from 'browser-fs-access';
+
+import { addSnackbar } from '~/common/components/useSnackbarsStore';
+import { asValidURL } from '~/common/util/urlUtils';
+import { extractFilePathsWithCommonRadix } from '~/common/util/dropTextUtils';
+import { getClipboardItems } from '~/common/util/clipboardUtils';
+
+import { AttachmentSourceOriginDTO, AttachmentSourceOriginFile, useAttachmentsStore } from './store-attachments';
+
+
+export const useAttachments = (enableLoadURLs: boolean) => {
+
+  // state
+
+  const { attachments, clearAttachments, createAttachment, removeAttachment } = useAttachmentsStore(state => ({
+    attachments: state.attachments,
+    clearAttachments: state.clearAttachments,
+    createAttachment: state.createAttachment,
+    removeAttachment: state.removeAttachment,
+  }), shallow);
+
+
+  // Creation helpers
+
+  const attachAppendFile = React.useCallback((origin: AttachmentSourceOriginFile, fileWithHandle: FileWithHandle, overrideFileName?: string) =>
+      createAttachment({
+        media: 'file', origin, fileWithHandle, refPath: overrideFileName || fileWithHandle.name,
+      })
+    , [createAttachment]);
+
+
+  const attachAppendDataTransfer = React.useCallback((dt: DataTransfer, method: AttachmentSourceOriginDTO, attachText: boolean): 'as_files' | 'as_url' | 'as_text' | false => {
+
+    // attach File(s)
+    if (dt.files.length >= 1) {
+      // rename files from a common prefix, to better relate them (if the transfer contains a list of paths)
+      let overrideFileNames: string[] = [];
+      if (dt.types.includes('text/plain')) {
+        const plainText = dt.getData('text/plain');
+        overrideFileNames = extractFilePathsWithCommonRadix(plainText);
+      }
+      const overrideNames = overrideFileNames.length === dt.files.length;
+
+      // attach as Files (paste and drop keep the original filename)
+      for (let i = 0; i < dt.files.length; i++) {
+        const file = dt.files[i];
+        // drag/drop of folders (or .tsx from IntelliJ) will have no type
+        if (!file.type) {
+          // NOTE: we are fixing it in attachmentLoadInputAsync, but would be better to do it here
+        }
+        void attachAppendFile(method, file, overrideNames ? overrideFileNames[i] || undefined : undefined);
+      }
+      return 'as_files';
+    }
+
+    // attach as URL
+    const textPlain = dt.getData('text/plain') || '';
+    if (textPlain && enableLoadURLs) {
+      const textPlainUrl = asValidURL(textPlain);
+      if (textPlainUrl && textPlainUrl) {
+        void createAttachment({
+          media: 'url', url: textPlainUrl, refUrl: textPlain,
+        });
+        return 'as_url';
+      }
+    }
+
+    // attach as Text/Html (further conversion, e.g. to markdown is done later)
+    const textHtml = dt.getData('text/html') || '';
+    if (attachText && (textHtml || textPlain)) {
+      void createAttachment({
+        media: 'text', method, textPlain, textHtml,
+      });
+      return 'as_text';
+    }
+
+    if (attachText)
+      console.warn(`Unhandled '${method}' attachment: `, dt.types?.map(t => `${t}: ${dt.getData(t)}`));
+
+    // did not attach anything from this data transfer
+    return false;
+  }, [attachAppendFile, createAttachment, enableLoadURLs]);
+
+
+  const attachAppendClipboardItems = React.useCallback(async () => {
+
+    // if there's an issue accessing the clipboard, show it passively
+    const clipboardItems = await getClipboardItems();
+    if (clipboardItems === null) {
+      addSnackbar({
+        key: 'clipboard-issue',
+        type: 'issue',
+        message: 'Clipboard empty or access denied',
+        overrides: {
+          autoHideDuration: 2000,
+        },
+      });
+      return;
+    }
+
+    // loop on all the possible attachments
+    for (const clipboardItem of clipboardItems) {
+
+      // attach as image
+      let imageAttached = false;
+      for (const mimeType of clipboardItem.types) {
+        if (mimeType.startsWith('image/')) {
+          try {
+            const imageBlob = await clipboardItem.getType(mimeType);
+            const imageName = mimeType.replace('image/', 'clipboard.').replaceAll('/', '.') || 'clipboard.png';
+            const imageFile = new File([imageBlob], imageName, { type: mimeType });
+            void attachAppendFile('clipboard-read', imageFile);
+            imageAttached = true;
+          } catch (error) {
+            // ignore getType error..
+          }
+        }
+      }
+      if (imageAttached)
+        continue;
+
+      // get the Plain text
+      const textPlain = clipboardItem.types.includes('text/plain') ? await clipboardItem.getType('text/plain').then(blob => blob.text()) : '';
+
+      // attach as URL
+      if (textPlain && enableLoadURLs) {
+        const textPlainUrl = asValidURL(textPlain);
+        if (textPlainUrl && textPlainUrl.trim()) {
+          void createAttachment({
+            media: 'url', url: textPlainUrl.trim(), refUrl: textPlain,
+          });
+          continue;
+        }
+      }
+
+      // attach as Text
+      const textHtml = clipboardItem.types.includes('text/html') ? await clipboardItem.getType('text/html').then(blob => blob.text()) : '';
+      if (textHtml || textPlain) {
+        void createAttachment({
+          media: 'text', method: 'clipboard-read', textPlain, textHtml,
+        });
+        continue;
+      }
+
+      console.warn('Clipboard item has no text/html or text/plain item.', clipboardItem.types, clipboardItem);
+    }
+  }, [attachAppendFile, createAttachment, enableLoadURLs]);
+
+
+  return {
+    // state
+    attachments,
+
+    // create attachments
+    attachAppendClipboardItems,
+    attachAppendDataTransfer,
+    attachAppendFile,
+
+    // manage attachments
+    clearAttachments,
+    removeAttachment,
+  };
+};

src/apps/chat/components/composer/attachments/useLLMAttachments.ts

@@ -0,0 +1,147 @@
+import * as React from 'react';
+
+import type { DLLMId } from '~/modules/llms/store-llms';
+
+import { countModelTokens } from '~/common/util/token-counter';
+
+import type { Attachment, AttachmentId } from './store-attachments';
+import type { ComposerOutputMultiPart, ComposerOutputPartType } from '../composer.types';
+
+
+export interface LLMAttachments {
+  attachments: LLMAttachment[];
+  getAttachmentOutputs: (initialTextBlockText: string | null, attachmentId: AttachmentId) => ComposerOutputMultiPart;
+  getAttachmentsOutputs: (initialTextBlockText: string | null) => ComposerOutputMultiPart;
+  isOutputAttacheable: boolean;
+  isOutputTextInlineable: boolean;
+  tokenCountApprox: number;
+}
+
+export interface LLMAttachment {
+  attachment: Attachment;
+  attachmentOutputs: ComposerOutputMultiPart;
+  isUnconvertible: boolean;
+  isOutputMissing: boolean;
+  isOutputAttachable: boolean;
+  isOutputTextInlineable: boolean;
+  tokenCountApprox: number | null;
+}
+
+
+export function useLLMAttachments(attachments: Attachment[], chatLLMId: DLLMId | null): LLMAttachments {
+  return React.useMemo(() => {
+
+    // HACK: in the future, switch to LLM capabilities (LLM_IF_OAI_Chat, LLM_IF_OAI_Vision, etc.)
+    const supportsImages = !!chatLLMId?.endsWith('-vision-preview');
+    const supportedOutputPartTypes: ComposerOutputPartType[] = supportsImages ? ['text-block', 'image-part'] : ['text-block'];
+
+    const llmAttachments = attachments.map(attachment => toLLMAttachment(attachment, supportedOutputPartTypes, chatLLMId));
+
+    const getAttachmentOutputs = (initialTextBlockText: string | null, attachmentId: AttachmentId): ComposerOutputMultiPart => {
+      // get outputs of a specific attachment
+      const outputs = attachments.find(a => a.id === attachmentId)?.outputs || [];
+      return attachmentCollapseOutputs(initialTextBlockText, outputs);
+    };
+
+    const getAttachmentsOutputs = (initialTextBlockText: string | null): ComposerOutputMultiPart => {
+      // accumulate all outputs of all attachments
+      const allOutputs = llmAttachments.reduce((acc, a) => acc.concat(a.attachment.outputs), [] as ComposerOutputMultiPart);
+      return attachmentCollapseOutputs(initialTextBlockText, allOutputs);
+    };
+
+    return {
+      attachments: llmAttachments,
+      getAttachmentOutputs,
+      getAttachmentsOutputs,
+      isOutputAttacheable: llmAttachments.every(a => a.isOutputAttachable),
+      isOutputTextInlineable: llmAttachments.every(a => a.isOutputTextInlineable),
+      tokenCountApprox: llmAttachments.reduce((acc, a) => acc + (a.tokenCountApprox || 0), 0),
+    };
+  }, [attachments, chatLLMId]);
+}
+
+export function getTextBlockText(outputs: ComposerOutputMultiPart): string | null {
+  const textOutputs = outputs.filter(part => part.type === 'text-block');
+  return (textOutputs.length === 1 && textOutputs[0].type === 'text-block') ? textOutputs[0].text : null;
+}
+
+
+function toLLMAttachment(attachment: Attachment, supportedOutputPartTypes: ComposerOutputPartType[], llmForTokenCount: DLLMId | null): LLMAttachment {
+  const { converters, outputs } = attachment;
+
+  const isUnconvertible = converters.length === 0;
+  const isOutputMissing = outputs.length === 0;
+  const isOutputAttachable = areAllOutputsSupported(outputs, supportedOutputPartTypes);
+  const isOutputTextInlineable = areAllOutputsSupported(outputs, supportedOutputPartTypes.filter(pt => pt === 'text-block'));
+
+  const attachmentOutputs = attachmentCollapseOutputs(null, outputs);
+  const tokenCountApprox = llmForTokenCount
+    ? attachmentOutputs.reduce((acc, output) => {
+      if (output.type === 'text-block')
+        return acc + countModelTokens(output.text, llmForTokenCount, 'attachments tokens count');
+      console.warn('Unhandled token preview for output type:', output.type);
+      return acc;
+    }, 0)
+    : null;
+
+  return {
+    attachment,
+    attachmentOutputs,
+    isUnconvertible,
+    isOutputMissing,
+    isOutputAttachable,
+    isOutputTextInlineable,
+    tokenCountApprox,
+  };
+}
+
+function areAllOutputsSupported(outputs: ComposerOutputMultiPart, supportedOutputPartTypes: ComposerOutputPartType[]) {
+  return outputs.length
+    ? outputs.every(output => supportedOutputPartTypes.includes(output.type))
+    : false;
+}
+
+function attachmentCollapseOutputs(initialTextBlockText: string | null, outputs: ComposerOutputMultiPart): ComposerOutputMultiPart {
+  const accumulatedOutputs: ComposerOutputMultiPart = [];
+
+  // if there's initial text, make it a collapsible default (unquited) text block
+  if (initialTextBlockText !== null) {
+    accumulatedOutputs.push({
+      type: 'text-block',
+      text: initialTextBlockText,
+      title: null,
+      collapsible: true,
+    });
+  }
+
+  // Accumulate attachment outputs of the same type and 'collapsible' into a single object of that type.
+  for (const output of outputs) {
+    const last = accumulatedOutputs[accumulatedOutputs.length - 1];
+
+    // accumulationg over an existing part of the same type
+    if (last && last.type === output.type && output.collapsible) {
+      switch (last.type) {
+        case 'text-block':
+          last.text += `\n\n\`\`\`${output.title}\n${output.text}\n\`\`\``;
+          break;
+        default:
+          console.warn('Unhandled collapsing for output type:', output.type);
+      }
+    }
+    // start a new part
+    else {
+      if (output.type === 'text-block') {
+        accumulatedOutputs.push({
+          type: 'text-block',
+          text: `\n\n\`\`\`${output.title}\n${output.text}\n\`\`\``,
+          title: null,
+          collapsible: false,
+        });
+      } else {
+        accumulatedOutputs.push(output);
+      }
+    }
+  }
+
+  return accumulatedOutputs;
+}

src/apps/chat/components/composer/composer.types.ts

@@ -0,0 +1,15 @@
+export type ComposerOutputPartType = 'text-block' | 'image-part';
+
+export type ComposerOutputPart = {
+  type: 'text-block',
+  text: string,
+  title: string | null,
+  collapsible: boolean,
+} | {
+  // TODO: not implemented yet
+  type: 'image-part',
+  base64Url: string,
+  collapsible: false,
+};
+
+export type ComposerOutputMultiPart = ComposerOutputPart[];

src/apps/chat/components/message/ChatMessage.tsx

@@ -14,12 +14,12 @@ import Face6Icon from '@mui/icons-material/Face6';
 import ForkRightIcon from '@mui/icons-material/ForkRight';
 import FormatPaintIcon from '@mui/icons-material/FormatPaint';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
-import PaletteOutlinedIcon from '@mui/icons-material/PaletteOutlined';
 import RecordVoiceOverIcon from '@mui/icons-material/RecordVoiceOver';
 import ReplayIcon from '@mui/icons-material/Replay';
 import SettingsSuggestIcon from '@mui/icons-material/SettingsSuggest';
 import SmartToyOutlinedIcon from '@mui/icons-material/SmartToyOutlined';
 import TelegramIcon from '@mui/icons-material/Telegram';
+import VerticalAlignBottomIcon from '@mui/icons-material/VerticalAlignBottom';
 
 import { CloseableMenu } from '~/common/components/CloseableMenu';
 import { DMessage } from '~/common/state/store-chats';
@@ -77,38 +77,42 @@ export function makeAvatar(messageAvatar: string | null, messageRole: DMessage['
     case 'system':
       return <SettingsSuggestIcon sx={iconSx} />;  // https://em-content.zobj.net/thumbs/120/apple/325/robot_1f916.png
 
+    case 'user':
+      return <Face6Icon sx={iconSx} />;            // https://www.svgrepo.com/show/306500/openai.svg
+
     case 'assistant':
-      // display a gif avatar when the assistant is typing (people seem to love this, so keeping it after april fools')
+      // typing gif (people seem to love this, so keeping it after april fools')
+      const isTextToImage = messageOriginLLM === 'DALL·E' || messageOriginLLM === 'Prodia';
+      const isReact = messageOriginLLM?.startsWith('react-');
       if (messageTyping) {
         return <Avatar
           alt={messageSender} variant='plain'
-          src={messageOriginLLM === 'prodia'
-            ? 'https://i.giphy.com/media/5t9ujj9cMisyVjUZ0m/giphy.webp'
-            : messageOriginLLM?.startsWith('react-')
-              ? 'https://i.giphy.com/media/l44QzsOLXxcrigdgI/giphy.webp'
+          src={isTextToImage ? 'https://i.giphy.com/media/5t9ujj9cMisyVjUZ0m/giphy.webp'
+            : isReact ? 'https://i.giphy.com/media/l44QzsOLXxcrigdgI/giphy.webp'
               : 'https://i.giphy.com/media/jJxaUysjzO9ri/giphy.webp'}
-          sx={{ ...mascotSx, borderRadius: 'var(--joy-radius-sm)' }}
+          sx={{ ...mascotSx, borderRadius: 'sm' }}
         />;
       }
-      // display the purpose symbol
-      if (messageOriginLLM === 'prodia')
-        return <PaletteOutlinedIcon sx={iconSx} />;
+
+      // text-to-image: icon
+      if (isTextToImage)
+        return <FormatPaintIcon sx={{
+          ...iconSx,
+          animation: `${cssRainbowColorKeyframes} 1s linear 2.66`,
+        }} />;
+
+      // purpose symbol (if present)
       const symbol = SystemPurposes[messagePurposeId!]?.symbol;
-      if (symbol)
-        return <Box
-          sx={{
-            fontSize: '24px',
-            textAlign: 'center',
-            width: '100%', minWidth: `${iconSx.width}px`, lineHeight: `${iconSx.height}px`,
-          }}
-        >
-          {symbol}
-        </Box>;
+      if (symbol) return <Box sx={{
+        fontSize: '24px',
+        textAlign: 'center',
+        width: '100%', minWidth: `${iconSx.width}px`, lineHeight: `${iconSx.height}px`,
+      }}>
+        {symbol}
+      </Box>;
+
       // default assistant avatar
       return <SmartToyOutlinedIcon sx={iconSx} />; // https://mui.com/static/images/avatar/2.jpg
-
-    case 'user':
-      return <Face6Icon sx={iconSx} />;            // https://www.svgrepo.com/show/306500/openai.svg
   }
   return <Avatar alt={messageSender} />;
 }
@@ -166,6 +170,8 @@ function explainErrorInMessage(text: string, isAssistant: boolean, modelId?: str
       make sure the usage is under <Link noLinkStyle href='https://platform.openai.com/account/billing/limits' target='_blank'>the limits</Link>.
     </>;
   }
+  // else
+  //  errorMessage = <>{text || 'Unknown error'}</>;
 
   return { errorMessage, isAssistantError };
 }
@@ -205,6 +211,7 @@ export function ChatMessage(props: {
   isImagining?: boolean, isSpeaking?: boolean,
   onConversationBranch?: (messageId: string) => void,
   onConversationRestartFrom?: (messageId: string, offset: number) => void,
+  onConversationTruncate?: (messageId: string) => void,
   onMessageDelete?: (messageId: string) => void,
   onMessageEdit?: (messageId: string, text: string) => void,
   onTextDiagram?: (messageId: string, text: string) => Promise<void>
@@ -252,9 +259,9 @@ export function ChatMessage(props: {
   const showAvatars = props.hideAvatars !== true && !cleanerLooks;
 
   const textSel = selMenuText ? selMenuText : messageText;
-  const isSpecialProdia = textSel.startsWith('https://images.prodia.xyz/') || textSel.startsWith('/imagine') || textSel.startsWith('/img');
-  const couldDiagram = textSel?.length >= 100 && !isSpecialProdia;
-  const couldImagine = textSel?.length >= 2 && !isSpecialProdia;
+  const isSpecialT2I = textSel.startsWith('https://images.prodia.xyz/') || textSel.startsWith('/draw ') || textSel.startsWith('/imagine ') || textSel.startsWith('/img ');
+  const couldDiagram = textSel?.length >= 100 && !isSpecialT2I;
+  const couldImagine = textSel?.length >= 2 && !isSpecialT2I;
   const couldSpeak = couldImagine;
 
 
@@ -326,7 +333,12 @@ export function ChatMessage(props: {
     }
   };
 
-  const handleOpsDelete = (e: React.MouseEvent) => {
+  const handleOpsTruncate = (_e: React.MouseEvent) => {
+    props.onConversationTruncate && props.onConversationTruncate(messageId);
+    closeOperationsMenu();
+  };
+
+  const handleOpsDelete = (_e: React.MouseEvent) => {
     props.onMessageDelete && props.onMessageDelete(messageId);
   };
 
@@ -432,7 +444,6 @@ export function ChatMessage(props: {
           borderBottomColor: 'divider',
         }),
         ...(ENABLE_COPY_MESSAGE_OVERLAY && { position: 'relative' }),
-        ...(props.isBottom === true && { mb: 'auto' }),
         '&:hover > button': { opacity: 1 },
         ...props.sx,
       }}
@@ -513,12 +524,12 @@ export function ChatMessage(props: {
                   : block.type === 'code'
                     ? <RenderCode key={'code-' + index} codeBlock={block} sx={codeSx} noCopyButton={props.diagramMode} />
                     : block.type === 'image'
-                      ? <RenderImage key={'image-' + index} imageBlock={block} allowRunAgain={props.isBottom === true} onRunAgain={handleOpsConversationRestartFrom} />
+                      ? <RenderImage key={'image-' + index} imageBlock={block} isFirst={!index} allowRunAgain={props.isBottom === true} onRunAgain={handleOpsConversationRestartFrom} />
                       : block.type === 'latex'
                         ? <RenderLatex key={'latex-' + index} latexBlock={block} />
                         : block.type === 'diff'
                           ? <RenderTextDiff key={'latex-' + index} diffBlock={block} />
-                          : (renderMarkdown && props.noMarkdown !== true && !fromSystem)
+                          : (renderMarkdown && props.noMarkdown !== true && !fromSystem && !(fromUser && block.content.startsWith('/')))
                             ? <RenderMarkdown key={'text-md-' + index} textBlock={block} />
                             : <RenderText key={'text-' + index} textBlock={block} />)}
 
@@ -554,7 +565,7 @@ export function ChatMessage(props: {
       {/* Operations Menu (3 dots) */}
       {!!opsMenuAnchor && (
         <CloseableMenu
-          placement='bottom-end' sx={{ minWidth: 280 }}
+          dense placement='bottom-end' sx={{ minWidth: 280 }}
           open anchorEl={opsMenuAnchor} onClose={closeOperationsMenu}
         >
           <Box sx={{ display: 'flex', alignItems: 'center' }}>
@@ -608,17 +619,23 @@ export function ChatMessage(props: {
           </MenuItem>}
           {!!props.onTextImagine && <MenuItem onClick={handleOpsImagine} disabled={!couldImagine || props.isImagining}>
             <ListItemDecorator>{props.isImagining ? <CircularProgress size='sm' /> : <FormatPaintIcon color='success' />}</ListItemDecorator>
-            Imagine
+            Draw ...
           </MenuItem>}
           {!!props.onTextSpeak && <MenuItem onClick={handleOpsSpeak} disabled={!couldSpeak || props.isSpeaking}>
             <ListItemDecorator>{props.isSpeaking ? <CircularProgress size='sm' /> : <RecordVoiceOverIcon color='success' />}</ListItemDecorator>
             Speak
           </MenuItem>}
           {!!props.onConversationRestartFrom && <ListDivider />}
+          {!!props.onConversationTruncate && (
+            <MenuItem onClick={handleOpsTruncate} disabled={props.isBottom}>
+              <ListItemDecorator><VerticalAlignBottomIcon /></ListItemDecorator>
+              Truncate <span style={{ opacity: 0.5 }}>after</span>
+            </MenuItem>
+          )}
           {!!props.onMessageDelete && (
             <MenuItem onClick={handleOpsDelete} disabled={false /*fromSystem*/}>
               <ListItemDecorator><ClearIcon /></ListItemDecorator>
-              Delete
+              Delete <span style={{ opacity: 0.5 }}>message</span>
             </MenuItem>
           )}
         </CloseableMenu>
@@ -627,12 +644,12 @@ export function ChatMessage(props: {
       {/* Selection (Contextual) Menu */}
       {!!selMenuAnchor && (
         <CloseableMenu
-          placement='bottom-start' sx={{ minWidth: 220 }}
+          dense placement='bottom-start' sx={{ minWidth: 220 }}
           open anchorEl={selMenuAnchor} onClose={closeSelectionMenu}
         >
           <MenuItem onClick={handleOpsCopy} sx={{ flex: 1 }}>
             <ListItemDecorator><ContentCopyIcon /></ListItemDecorator>
-            Copy selection
+            Copy <span style={{ opacity: 0.5 }}>selection</span>
           </MenuItem>
           {!!props.onTextDiagram && <MenuItem onClick={handleOpsDiagram} disabled={!couldDiagram || props.isImagining}>
             <ListItemDecorator><AccountTreeIcon color='success' /></ListItemDecorator>

src/apps/chat/components/message/CleanerMessage.tsx

@@ -6,14 +6,14 @@ import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 
 import { DMessage } from '~/common/state/store-chats';
 
-import { TokenBadge } from '../composer/TokenBadge';
+import { TokenBadgeMemo } from '../composer/TokenBadge';
 import { makeAvatar, messageBackground } from './ChatMessage';
 
 
 /**
  * Header bar for controlling the operations during the Selection mode
  */
-export const MessagesSelectionHeader = (props: { hasSelected: boolean, isBottom: boolean, sumTokens: number, onClose: () => void, onSelectAll: (selected: boolean) => void, onDeleteMessages: () => void }) =>
+export const MessagesSelectionHeader = (props: { hasSelected: boolean, sumTokens: number, onClose: () => void, onSelectAll: (selected: boolean) => void, onDeleteMessages: () => void }) =>
   <Sheet color='warning' variant='solid' invertedColors sx={{
     display: 'flex', flexDirection: 'row', alignItems: 'center',
     position: 'fixed', top: 0, left: 0, right: 0, zIndex: 101,
@@ -39,7 +39,7 @@ export const MessagesSelectionHeader = (props: { hasSelected: boolean, isBottom:
  *
  * Shall look similarly to the main ChatMessage, for consistency, but just allow a simple checkbox selection
  */
-export function CleanerMessage(props: { message: DMessage, isBottom: boolean, selected: boolean, remainingTokens?: number, onToggleSelected?: (messageId: string, selected: boolean) => void }) {
+export function CleanerMessage(props: { message: DMessage, selected: boolean, remainingTokens?: number, onToggleSelected?: (messageId: string, selected: boolean) => void }) {
 
   // derived state
   const {
@@ -77,7 +77,6 @@ export function CleanerMessage(props: { message: DMessage, isBottom: boolean, se
       borderBottom: '1px solid',
       borderBottomColor: 'divider',
       // position: 'relative',
-      ...(props.isBottom && { mb: 'auto' }),
       '&:hover > button': { opacity: 1 },
     }}>
 
@@ -94,7 +93,7 @@ export function CleanerMessage(props: { message: DMessage, isBottom: boolean, se
       </Typography>
 
       {props.remainingTokens !== undefined && <Box sx={{ display: 'flex', minWidth: { xs: 32, sm: 45 }, justifyContent: 'flex-end' }}>
-        <TokenBadge directTokens={messageTokenCount} tokenLimit={props.remainingTokens} inline />
+        <TokenBadgeMemo direct={messageTokenCount} limit={props.remainingTokens} inline />
       </Box>}
 
       <Typography level='body-md' sx={{

src/apps/chat/components/message/RenderImage.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 
-import { Box, IconButton, Tooltip } from '@mui/joy';
+import { Alert, Box, IconButton, Tooltip, Typography } from '@mui/joy';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import ReplayIcon from '@mui/icons-material/Replay';
-import ZoomOutMapIcon from '@mui/icons-material/ZoomOutMap';
 
 import { Link } from '~/common/components/Link';
 
@@ -10,25 +10,116 @@ import { ImageBlock } from './blocks';
 import { overlayButtonsSx } from './RenderCode';
 
 
-export const RenderImage = (props: { imageBlock: ImageBlock, allowRunAgain: boolean, onRunAgain?: (e: React.MouseEvent) => void }) => {
-  const imageUrls = props.imageBlock.url.split('\n');
+const mdImageReferenceRegex = /^!\[([^\]]*)]\(([^)]+)\)$/;
+const imageExtensions = /\.(jpg|jpeg|png|gif|bmp|svg)/i;
 
-  return imageUrls.map((url, index) => (
-    <Box
+
+/**
+ * Checks if the entire content consists solely of Markdown image references.
+ * If so, returns an array of ImageBlock objects for each image reference.
+ * If any non-image content is present or if there are no image references, returns null.
+ */
+export function heuristicMarkdownImageReferenceBlocks(fullText: string) {
+
+  // Check if all lines are valid Markdown image references with image URLs
+  const imageBlocks: ImageBlock[] = [];
+  for (const line of fullText.split('\n')) {
+    if (line.trim() === '') continue; // skip empty lines
+    const match = mdImageReferenceRegex.exec(line);
+    if (match && imageExtensions.test(match[2])) {
+      const alt = match[1];
+      const url = match[2];
+      imageBlocks.push({ type: 'image', url, alt });
+    } else {
+      // if there is any outlier line, return null
+      return null;
+    }
+  }
+
+  // Return the image blocks if all lines are image references with valid image URLs
+  return imageBlocks.length > 0 ? imageBlocks : null;
+}
+
+const prodiaUrlRegex = /^(https?:\/\/images\.prodia\.\S+)$/i;
+
+/**
+ * Legacy heuristic for detecting images from "images.prodia." URLs.
+ */
+export function heuristicLegacyImageBlocks(fullText: string): ImageBlock[] | null {
+
+  // Check if all lines are URLs starting with "http://images.prodia." or "https://images.prodia."
+  const imageBlocks: ImageBlock[] = [];
+  for (const line of fullText.split('\n')) {
+    const match = prodiaUrlRegex.exec(line);
+    if (match) {
+      const url = match[1];
+      imageBlocks.push({ type: 'image', url });
+    } else {
+      // if there is any outlier line, return null
+      return null;
+    }
+  }
+
+  // Return the image blocks if all lines are URLs from "images.prodia."
+  return imageBlocks.length > 0 ? imageBlocks : null;
+}
+
+
+export const RenderImage = (props: { imageBlock: ImageBlock, isFirst: boolean, allowRunAgain: boolean, onRunAgain?: (e: React.MouseEvent) => void }) => {
+  const { url, alt } = props.imageBlock;
+  const imageUrls = url.split('\n');
+
+  return imageUrls.map((url, index) => {
+
+    // display a notice for temporary images DallE
+    const isTempDalleUrl = url.startsWith('https://oaidalle');
+
+    return <Box
       key={'gen-img-' + index}
       sx={{
         display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', position: 'relative',
-        mx: 1.5, mt: index > 0 ? 1.5 : 0,
+        mx: 1.5, mb: 1.5, // mt: (index > 0 || !props.isFirst) ? 1.5 : 0,
         // p: 1, border: '1px solid', borderColor: 'divider', borderRadius: 1,
-        minWidth: 64, minHeight: 64, boxShadow: 'lg',
+        minWidth: 128, minHeight: 128,
+        boxShadow: 'md',
         backgroundColor: 'neutral.solidBg',
         '& picture': { display: 'flex' },
         '& img': { maxWidth: '100%', maxHeight: '100%' },
         '&:hover > .overlay-buttons': { opacity: 1 },
-      }}>
+      }}
+    >
 
       {/* External Image */}
-      <picture><img src={url} alt='Generated Image' /></picture>
+      {alt ? (
+        <Tooltip
+          variant='outlined' color='neutral'
+          title={
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+              {isTempDalleUrl && <Alert variant='soft' color='warning' sx={{ flexDirection: 'column', alignItems: 'start' }}>
+                <Typography level='title-sm'>⚠️ Temporary Image</Typography>
+                <Typography level='body-sm'>
+                  This image will be deleted from the OpenAI servers in one hour. <b>Please save it to your device</b>.
+                </Typography>
+                {/*<Typography level='body-xs'>*/}
+                {/*  The following is the re-written DALL·E prompt that generated this image.*/}
+                {/*</Typography>*/}
+              </Alert>}
+              <Typography level='title-sm' sx={{ p: 2 }}>
+                {alt}
+              </Typography>
+            </Box>
+          }
+          placement='top-start'
+          sx={{
+            maxWidth: { sm: '90vw', md: '70vw' },
+            boxShadow: 'md',
+          }}
+        >
+          <picture><img src={url} alt={`Generated Image: ${alt}`} /></picture>
+        </Tooltip>
+      ) : (
+        <picture><img src={url} alt='Generated Image' /></picture>
+      )}
 
       {/* Image Buttons */}
       <Box className='overlay-buttons' sx={{ ...overlayButtonsSx, pt: 0.5, px: 0.5, gap: 0.5 }}>
@@ -39,10 +130,12 @@ export const RenderImage = (props: { imageBlock: ImageBlock, allowRunAgain: bool
             </IconButton>
           </Tooltip>
         )}
-        <IconButton component={Link} href={url} target='_blank' variant='solid' color='neutral'>
-          <ZoomOutMapIcon />
-        </IconButton>
+        <Tooltip title='Open in new tab'>
+          <IconButton component={Link} href={url} target='_blank' variant='solid' color='neutral'>
+            <OpenInNewIcon />
+          </IconButton>
+        </Tooltip>
       </Box>
-    </Box>
-  ));
+    </Box>;
+  });
 };

src/apps/chat/components/message/blocks.ts

@@ -1,12 +1,13 @@
 import type { Diff as TextDiff } from '@sanity/diff-match-patch';
 
 import { heuristicIsHtml } from './RenderHtml';
+import { heuristicMarkdownImageReferenceBlocks, heuristicLegacyImageBlocks } from './RenderImage';
 
 type Block = CodeBlock | DiffBlock | HtmlBlock | ImageBlock | LatexBlock | TextBlock;
 export type CodeBlock = { type: 'code'; blockTitle: string; blockCode: string; complete: boolean; };
 export type DiffBlock = { type: 'diff'; textDiffs: TextDiff[] };
 export type HtmlBlock = { type: 'html'; html: string; };
-export type ImageBlock = { type: 'image'; url: string; };
+export type ImageBlock = { type: 'image'; url: string; alt?: string }; // Added optional alt property
 export type LatexBlock = { type: 'latex'; latex: string; };
 export type TextBlock = { type: 'text'; content: string; }; // for Text or Markdown
 
@@ -21,9 +22,18 @@ export function parseBlocks(text: string, forceText: boolean, textDiffs: TextDif
   if (heuristicIsHtml(text))
     return [{ type: 'html', html: text }];
 
+  // special case: markdown image references (e.g. ![alt text](https://example.com/image.png))
+  const mdImageBlocks = heuristicMarkdownImageReferenceBlocks(text);
+  if (mdImageBlocks)
+    return mdImageBlocks;
+
+  // special case: legacy prodia images
+  const legacyImageBlocks = heuristicLegacyImageBlocks(text);
+  if (legacyImageBlocks)
+    return legacyImageBlocks;
+
   const regexPatterns = {
     codeBlock: /`{3,}([\w\\.+-_]+)?\n([\s\S]*?)(`{3,}\n?|$)/g,
-    imageBlock: /(https:\/\/images\.prodia\.xyz\/.*?\.png)/g, // NOTE: only Prodia for now - but this shall be expanded to markdown images ![alt](url) or any png/jpeg
     latexBlock: /\$\$([\s\S]*?)\$\$/g,
     // latexBlockOrInline: /\$\$([\s\S]*?)\$\$|\$([^$]*?)\$/g,
   };
@@ -61,11 +71,6 @@ export function parseBlocks(text: string, forceText: boolean, textDiffs: TextDif
         blocks.push({ type: 'code', blockTitle, blockCode, complete: blockEnd.startsWith('```') });
         break;
 
-      case 'imageBlock':
-        const url: string = match[1];
-        blocks.push({ type: 'image', url });
-        break;
-
       case 'latexBlock':
         const latex: string = match[1];
         blocks.push({ type: 'latex', latex });

src/apps/chat/components/panes/usePanesManager.ts

@@ -33,9 +33,9 @@ interface AppChatPanesStore {
   openConversationInFocusedPane: (conversationId: DConversationId) => void;
   openConversationInSplitPane: (conversationId: DConversationId) => void;
   navigateHistoryInFocusedPane: (direction: 'back' | 'forward') => boolean;
-  setFocusedPaneIndex: (paneIndex: number) => void;
-  splitChatPane: (numberOfPanes: number) => void;
-  unsplitChatPane: (paneIndexToKeep: number) => void;
+  duplicatePane: (paneIndex: number) => void;
+  removePane: (paneIndex: number) => void;
+  setFocusedPane: (paneIndex: number) => void;
   onConversationsChanged: (conversationIds: DConversationId[]) => void;
 
 }
@@ -160,7 +160,52 @@ const useAppChatPanesStore = create<AppChatPanesStore>()(persist(
       return true;
     },
 
-    setFocusedPaneIndex: (paneIndex: number) =>
+    duplicatePane: (paneIndex: number) =>
+      _set(state => {
+        const { chatPanes } = state;
+
+        // Validate index
+        if (paneIndex < 0 || paneIndex >= chatPanes.length) {
+          console.warn('Attempted to duplicate a pane with an out-of-range index:', paneIndex);
+          return state; // Return the existing state without changes
+        }
+
+        // Clone the pane at the specified index, including a deep copy of the history array
+        const paneToDuplicate = chatPanes[paneIndex];
+        const duplicatedPane = {
+          ...paneToDuplicate,
+          history: [...paneToDuplicate.history], // Deep copy of the history array
+        };
+
+        // Insert the duplicated pane into the array, right after the original pane
+        const newPanes = [
+          ...chatPanes.slice(0, paneIndex + 1),
+          duplicatedPane,
+          ...chatPanes.slice(paneIndex + 1),
+        ];
+
+        return {
+          chatPanes: newPanes,
+          chatPaneFocusIndex: paneIndex + 1,
+        };
+      }),
+
+    removePane: (paneIndex: number) =>
+      _set(state => {
+        const { chatPanes } = state;
+        if (paneIndex < 0 || paneIndex >= chatPanes.length)
+          return state;
+
+        const newPanes = chatPanes.toSpliced(paneIndex, 1);
+
+        // when a pane is removed, focus the pane 0, or null if no panes remain
+        return {
+          chatPanes: newPanes,
+          chatPaneFocusIndex: newPanes.length ? 0 : null,
+        };
+      }),
+
+    setFocusedPane: (paneIndex: number) =>
       _set(state => {
         if (state.chatPaneFocusIndex === paneIndex)
           return state;
@@ -169,22 +214,6 @@ const useAppChatPanesStore = create<AppChatPanesStore>()(persist(
         };
       }),
 
-    splitChatPane: (numberOfPanes: number) => {
-      const { chatPanes, chatPaneFocusIndex } = _get();
-      const focusedPane = (chatPaneFocusIndex !== null ? chatPanes[chatPaneFocusIndex] : null) ?? createPane();
-
-      _set({
-        chatPanes: Array.from({ length: numberOfPanes }, () => ({ ...focusedPane })),
-        chatPaneFocusIndex: 0,
-      });
-    },
-
-    unsplitChatPane: (paneIndexToKeep: number) =>
-      _set(state => ({
-        chatPanes: [state.chatPanes[paneIndexToKeep] || createPane()],
-        chatPaneFocusIndex: 0,
-      })),
-
 
     /**
      * This function is vital, as is invoked when the conversationId[] changes in the global chats store.
@@ -258,7 +287,9 @@ export function usePanesManager() {
       onConversationsChanged,
       openConversationInFocusedPane,
       openConversationInSplitPane,
-      setFocusedPaneIndex,
+      duplicatePane,
+      removePane,
+      setFocusedPane,
     } = state;
     const focusedConversationId = chatPaneFocusIndex !== null ? chatPanes[chatPaneFocusIndex]?.conversationId ?? null : null;
     return {
@@ -268,7 +299,10 @@ export function usePanesManager() {
       onConversationsChanged,
       openConversationInFocusedPane,
       openConversationInSplitPane,
-      setFocusedPaneIndex,
+      paneIndex: chatPaneFocusIndex,
+      duplicatePane,
+      removePane,
+      setFocusedPane,
     };
   }, shallow);
 

src/apps/chat/components/persona-selector/PersonaSelector.tsx

@@ -3,19 +3,20 @@ import { shallow } from 'zustand/shallow';
 
 import { Box, Button, Checkbox, Grid, IconButton, Input, Stack, Textarea, Typography } from '@mui/joy';
 import ClearIcon from '@mui/icons-material/Clear';
-import ScienceIcon from '@mui/icons-material/Science';
 import SearchIcon from '@mui/icons-material/Search';
 import TelegramIcon from '@mui/icons-material/Telegram';
 
 import { DConversationId, useChatStore } from '~/common/state/store-chats';
-import { Link } from '~/common/components/Link';
+import { navigateToPersonas } from '~/common/app.routes';
 import { useUIPreferencesStore } from '~/common/state/store-ui';
-import { useUXLabsStore } from '~/common/state/store-ux-labs';
 
 import { SystemPurposeId, SystemPurposes } from '../../../../data';
 import { usePurposeStore } from './store-purposes';
 
 
+// 'special' purpose IDs, for tile hiding purposes
+const PURPOSE_ID_PERSONA_CREATOR = '__persona-creator__';
+
 // Constants for tile sizes / grid width - breakpoints need to be computed here to work around
 // the "flex box cannot shrink over wrapped content" issue
 //
@@ -47,7 +48,6 @@ export function PersonaSelector(props: { conversationId: DConversationId, runExa
 
   // external state
   const showFinder = useUIPreferencesStore(state => state.showPurposeFinder);
-  const labsPersonaYTCreator = useUXLabsStore(state => state.labsPersonaYTCreator);
   const { systemPurposeId, setSystemPurposeId } = useChatStore(state => {
     const conversation = state.conversations.find(conversation => conversation.id === props.conversationId);
     return {
@@ -113,6 +113,8 @@ export function PersonaSelector(props: { conversationId: DConversationId, runExa
   const unfilteredPurposeIDs = (filteredIDs && showFinder) ? filteredIDs : Object.keys(SystemPurposes);
   const purposeIDs = editMode ? unfilteredPurposeIDs : unfilteredPurposeIDs.filter(id => !hiddenPurposeIDs.includes(id));
 
+  const hidePersonaCreator = hiddenPurposeIDs.includes(PURPOSE_ID_PERSONA_CREATOR);
+
   const selectedPurpose = purposeIDs.length ? (SystemPurposes[systemPurposeId] ?? null) : null;
   const selectedExample = selectedPurpose?.examples && getRandomElement(selectedPurpose.examples) || null;
 
@@ -156,10 +158,14 @@ export function PersonaSelector(props: { conversationId: DConversationId, runExa
               <Button
                 variant={(!editMode && systemPurposeId === spId) ? 'solid' : 'soft'}
                 color={(!editMode && systemPurposeId === spId) ? 'primary' : SystemPurposes[spId as SystemPurposeId]?.highlighted ? 'warning' : 'neutral'}
-                onClick={() => !editMode && handlePurposeChanged(spId as SystemPurposeId)}
+                onClick={() => editMode
+                  ? toggleHiddenPurposeId(spId)
+                  : handlePurposeChanged(spId as SystemPurposeId)
+                }
                 sx={{
                   flexDirection: 'column',
                   fontWeight: 500,
+                  // paddingInline: 1,
                   gap: bpTileGap,
                   height: bpTileSize,
                   width: bpTileSize,
@@ -171,9 +177,10 @@ export function PersonaSelector(props: { conversationId: DConversationId, runExa
               >
                 {editMode && (
                   <Checkbox
-                    label={<Typography level='body-sm'>show</Typography>}
-                    checked={!hiddenPurposeIDs.includes(spId)} onChange={() => toggleHiddenPurposeId(spId)}
-                    sx={{ alignSelf: 'flex-start' }}
+                    color='neutral'
+                    checked={!hiddenPurposeIDs.includes(spId)}
+                    // label={<Typography level='body-xs'>show</Typography>}
+                    sx={{ position: 'absolute', left: 8, top: 8 }}
                   />
                 )}
                 <div style={{ fontSize: '2rem' }}>
@@ -185,28 +192,43 @@ export function PersonaSelector(props: { conversationId: DConversationId, runExa
               </Button>
             </Grid>
           ))}
-          {/* Button to start the YouTube persona creator */}
-          {labsPersonaYTCreator && <Grid>
+          {/* Button to start the Persona Creator */}
+          {(editMode || !hidePersonaCreator) && <Grid>
             <Button
               variant='soft' color='neutral'
-              component={Link} noLinkStyle href='/personas'
+              onClick={() => editMode
+                ? toggleHiddenPurposeId(PURPOSE_ID_PERSONA_CREATOR)
+                : void navigateToPersonas()
+              }
               sx={{
-                '--Icon-fontSize': '2rem',
                 flexDirection: 'column',
                 fontWeight: 500,
-                // gap: bpTileGap,
+                // paddingInline: 1,
+                gap: bpTileGap,
                 height: bpTileSize,
                 width: bpTileSize,
-                border: `1px dashed`,
-                boxShadow: 'md',
-                backgroundColor: 'background.surface',
+                // border: `1px dashed`,
+                // borderColor: 'neutral.softActiveBg',
+                boxShadow: 'xs',
+                backgroundColor: 'neutral.softDisabledBg',
               }}
             >
+              {editMode && (
+                <Checkbox
+                  color='neutral'
+                  checked={!hidePersonaCreator}
+                  // label={<Typography level='body-xs'>show</Typography>}
+                  sx={{ position: 'absolute', left: 8, top: 8 }}
+                />
+              )}
               <div>
-                <ScienceIcon />
+                <div style={{ fontSize: '2rem' }}>
+                  🎭
+                </div>
+                {/*<SettingsAccessibilityIcon style={{ opacity: 0.5 }} />*/}
               </div>
-              <div>
-                YouTube persona creator
+              <div style={{ textAlign: 'center' }}>
+                Persona Creator
               </div>
             </Button>
           </Grid>}

src/apps/chat/components/scroll-to-bottom/ScrollToBottom.tsx

@@ -0,0 +1,228 @@
+/**
+ * Copyright (c) 2023-2024 Enrico Ros
+ *
+ * This subsystem is responsible for 'snap-to-bottom' and 'scroll-to-bottom' features,
+ * with an animated, gradual scroll.
+ *
+ * See the `ScrollToBottomButton` component for the button that triggers the scroll.
+ *
+ * Example usage:
+ *   <ScrollToBottom bootToBottom stickToBottom sx={{ overflowY: 'auto', height: '100%' }}>
+ *     <LongMessagesList />
+ *     <ScrollToBottomButton />
+ *   </ScrollToBottom>
+ *
+ * Within the Context (children components), functions are made available by using:
+ *  const { notifyBooting, setStickToBottom } = useScrollToBottom();
+ *
+ */
+import * as React from 'react';
+
+import { Box } from '@mui/joy';
+import type { SxProps } from '@mui/joy/styles/types';
+
+import { isBrowser } from '~/common/util/pwaUtils';
+
+import { ScrollToBottomState, UseScrollToBottomProvider } from './useScrollToBottom';
+
+
+// set this to true to debug this component
+const DEBUG_SCROLL_TO_BOTTOM = false;
+
+// NOTE: in Chrome a wheel scroll event is 100px
+const USER_STICKY_MARGIN = 60;
+
+// during the 'booting' timeout, scrolls happen instantly instead of smoothly
+const BOOTING_TIMEOUT = 400;
+
+
+function DebugBorderBox(props: { heightPx: number, color: string }) {
+  return (
+    <Box sx={{
+      position: 'absolute', bottom: 0, right: 0, left: 0,
+      height: `${props.heightPx}px`,
+      border: `1px solid ${props.color}`,
+      pointerEvents: 'none',
+    }} />
+  );
+}
+
+
+export function ScrollToBottom(props: {
+  bootToBottom?: boolean
+  stickToBottom?: boolean
+  sx?: SxProps
+  children: React.ReactNode,
+}) {
+
+  // state
+
+  const [state, setState] = React.useState<ScrollToBottomState>({
+    stickToBottom: props.stickToBottom || false,
+    booting: props.bootToBottom || false,
+    atBottom: undefined,
+  });
+
+  // track scrollable (for events and to scroll it)
+  const scrollableElementRef = React.useRef<HTMLDivElement>(null);
+
+  // track programmatic scrolls
+  const isProgrammaticScroll = React.useRef(false);
+
+
+  // derived state
+
+  const bootToBottom = props.bootToBottom || false;
+  const scrollBehavior: ScrollBehavior = state.booting ? 'auto' : 'smooth';
+
+
+  // [Debugging]
+  if (DEBUG_SCROLL_TO_BOTTOM)
+    console.log('ScrollToBottom', { ...state });
+
+
+  // main programmatic scroll to bottom function
+
+  const doScrollToBottom = React.useCallback(() => {
+    const scrollable = scrollableElementRef.current;
+    if (scrollable) {
+      if (DEBUG_SCROLL_TO_BOTTOM)
+        console.log('  -> doScrollToBottom()', { scrollHeight: scrollable.scrollHeight, offsetHeight: scrollable.offsetHeight });
+
+      // eat the next scroll event
+      isProgrammaticScroll.current = true;
+
+      // smooth scrolling only after booting
+      scrollable.scrollTo({ top: scrollable.scrollHeight, behavior: scrollBehavior });
+    }
+  }, [scrollBehavior]);
+
+
+  /**
+   * Booting state reset (after BOOTING_TIMEOUT ms)
+   *  - the "Booting" window will scroll instantly instead of smoothly
+   */
+  React.useEffect(() => {
+    if (!state.booting || !isBrowser) return;
+
+    const _clearBootingHandler = () => {
+      if (DEBUG_SCROLL_TO_BOTTOM)
+        console.log(' -> booting done');
+
+      setState(state => ({ ...state, booting: false }));
+
+      if (bootToBottom)
+        doScrollToBottom();
+    };
+
+    // cancelable listener
+    const timeout = window.setTimeout(_clearBootingHandler, BOOTING_TIMEOUT);
+    return () => clearTimeout(timeout);
+  }, [bootToBottom, doScrollToBottom, state.booting]);
+
+  /**
+   * Children elements resize event listener
+   *  - note that the 'scrollable' will likely have a fixed size, while its children are the ones who become scrollable
+   */
+  React.useEffect(() => {
+    const scrollable = scrollableElementRef.current;
+    if (!scrollable) return;
+
+    const _containerResizeObserver = new ResizeObserver(entries => {
+      if (DEBUG_SCROLL_TO_BOTTOM)
+        console.log(' -> scrollable children resized', entries.length);
+
+      if (entries.length > 0 && state.stickToBottom)
+        doScrollToBottom();
+    });
+
+
+    // cancelable observer of resize of scrollable's children elements
+    Array.from(scrollable.children).forEach(child => _containerResizeObserver.observe(child));
+    return () => _containerResizeObserver.disconnect();
+
+  }, [state.stickToBottom, doScrollToBottom]);
+
+  /**
+   * (User) Scroll events listener
+   *  - will cancel any state.stickToBottom, if the user dragged the scroll bar
+   */
+  React.useEffect(() => {
+    if (state.booting) return;
+
+    const scrollable = scrollableElementRef.current;
+    if (!scrollable) return;
+
+    const _scrollEventsListener = () => {
+      // ignore scroll events during programmatic scrolls
+      // NOTE: some will go through, but somewhat the framework is stable
+      if (isProgrammaticScroll.current) {
+        isProgrammaticScroll.current = false;
+        return;
+      }
+
+      // compute intersections
+      const atBottom = scrollable.scrollHeight - scrollable.scrollTop <= scrollable.offsetHeight + USER_STICKY_MARGIN;
+
+      // assume this is = to the user intention
+      const stickToBottom = atBottom;
+
+      // update state only if anything changed
+      setState(state => (state.stickToBottom !== stickToBottom || state.atBottom !== atBottom)
+        ? ({ ...state, stickToBottom, atBottom })
+        : state,
+      );
+    };
+
+    // _scrollEventsListener(true);
+
+    // cancelable listener (user and programatic scroll events)
+    scrollable.addEventListener('scroll', _scrollEventsListener);
+    return () => scrollable.removeEventListener('scroll', _scrollEventsListener);
+
+  }, [state.booting]);
+
+
+  // actions for this context
+
+  const notifyBooting = React.useCallback(() => {
+    if (bootToBottom)
+      setState(state => state.booting ? state : ({ ...state, booting: true }));
+  }, [bootToBottom]);
+
+  /*const notifyContentUpdated = React.useCallback(() => {
+    if (DEBUG_SCROLL_TO_BOTTOM)
+      console.log('-= notifyContentUpdated');
+
+    if (state.stickToBottom)
+      doScrollToBottom();
+  }, [doScrollToBottom, state.stickToBottom]);*/
+
+  const setStickToBottom = React.useCallback((stickToBottom: boolean) => {
+    if (DEBUG_SCROLL_TO_BOTTOM)
+      console.log('-= setStickToBottom', stickToBottom);
+
+    setState(state => state.stickToBottom !== stickToBottom
+      ? ({ ...state, stickToBottom })
+      : state,
+    );
+
+    if (stickToBottom)
+      doScrollToBottom();
+  }, [doScrollToBottom]);
+
+
+  return (
+    <UseScrollToBottomProvider value={{
+      ...state,
+      notifyBooting,
+      setStickToBottom,
+    }}>
+      <Box ref={scrollableElementRef} sx={props.sx}>
+        {props.children}
+        {DEBUG_SCROLL_TO_BOTTOM && <DebugBorderBox heightPx={USER_STICKY_MARGIN} color='red' />}
+        {DEBUG_SCROLL_TO_BOTTOM && <DebugBorderBox heightPx={100} color='blue' />}
+      </Box>
+    </UseScrollToBottomProvider>
+  );
+}

src/apps/chat/components/scroll-to-bottom/ScrollToBottomButton.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+
+import { IconButton } from '@mui/joy';
+import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
+
+import { useScrollToBottom } from './useScrollToBottom';
+
+
+export function ScrollToBottomButton() {
+
+  // state
+  const { atBottom, stickToBottom, setStickToBottom } = useScrollToBottom();
+
+  const handleStickToBottom = React.useCallback(() => {
+    setStickToBottom(true);
+  }, [setStickToBottom]);
+
+  // do not render the button at all if we're already snapping
+  if (atBottom || stickToBottom)
+    return null;
+
+  return (
+    // <Tooltip title={
+    //   <Typography variant='solid' level='title-sm' sx={{ px: 1 }}>
+    //     Scroll to bottom
+    //   </Typography>
+    // }>
+    <IconButton
+      variant='outlined' color='neutral' size='md'
+      onClick={handleStickToBottom}
+      sx={{
+        // place this on the bottom-right corner (FAB-like)
+        position: 'absolute',
+        bottom: '2rem',
+        right: {
+          xs: '1rem',
+          md: '2rem',
+        },
+
+        // style it
+        backgroundColor: 'background.surface',
+        borderRadius: '50%',
+        boxShadow: 'md',
+
+        // fade it in when hovering
+        // transition: 'all 0.15s',
+        // '&:hover': {
+        //   transform: 'scale(1.1)',
+        // },
+      }}
+    >
+      <KeyboardDoubleArrowDownIcon />
+    </IconButton>
+    // </Tooltip>
+  );
+}

src/apps/chat/components/scroll-to-bottom/useScrollToBottom.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+
+/**
+ * State is minimal - to keep state machinery stable and simple
+ */
+export interface ScrollToBottomState {
+  // config
+  stickToBottom: boolean;
+
+  // state
+  booting: boolean;
+  atBottom: boolean | undefined;
+}
+
+/**
+ * Actions are very simplified, for providing a minimal control surface from the outside
+ */
+export interface ScrollToBottomActions {
+  notifyBooting: () => void;
+  setStickToBottom: (stick: boolean) => void;
+}
+
+type ScrollToBottomContext = ScrollToBottomState & ScrollToBottomActions;
+
+const UseScrollToBottom = React.createContext<ScrollToBottomContext | undefined>(undefined);
+
+export const UseScrollToBottomProvider = UseScrollToBottom.Provider;
+
+export const useScrollToBottom = (): ScrollToBottomContext => {
+  const context = React.useContext(UseScrollToBottom);
+  if (!context)
+    throw new Error('useScrollToBottom must be used within a ScrollToBottomProvider');
+  return context;
+};

src/apps/chat/editors/browse-load.ts

@@ -18,13 +18,13 @@ export const runBrowseUpdatingState = async (conversationId: string, url: string
 
   try {
 
-    const text = await callBrowseFetchPage(url);
-    if (!text) {
+    const page = await callBrowseFetchPage(url);
+    if (!page.content) {
       // noinspection ExceptionCaughtLocallyJS
       throw new Error('No text found.');
     }
     updateAssistantMessage({
-      text: text,
+      text: page.content,
       typing: false,
     });
 

src/apps/chat/editors/chat-stream.ts

@@ -2,8 +2,8 @@ import { DLLMId } from '~/modules/llms/store-llms';
 import { SystemPurposeId } from '../../../data';
 import { autoSuggestions } from '~/modules/aifn/autosuggestions/autoSuggestions';
 import { autoTitle } from '~/modules/aifn/autotitle/autoTitle';
+import { llmStreamingChatGenerate } from '~/modules/llms/llm.client';
 import { speakText } from '~/modules/elevenlabs/elevenlabs.client';
-import { streamChat } from '~/modules/llms/transports/streamChat';
 
 import { DMessage, useChatStore } from '~/common/state/store-chats';
 
@@ -63,7 +63,7 @@ async function streamAssistantMessage(
   const messages = history.map(({ role, text }) => ({ role, content: text }));
 
   try {
-    await streamChat(llmId, messages, abortSignal,
+    await llmStreamingChatGenerate(llmId, messages, null, null, abortSignal,
       (updatedMessage: Partial<DMessage>) => {
         // update the message in the store (and thus schedule a re-render)
         editMessage(updatedMessage);

src/apps/chat/editors/commands.ts

@@ -1,7 +1,7 @@
 import { CmdRunBrowse } from '~/modules/browse/browse.client';
-import { CmdRunProdia } from '~/modules/prodia/prodia.client';
 import { CmdRunReact } from '~/modules/aifn/react/react';
 import { CmdRunSearch } from '~/modules/google/search.client';
+import { CmdRunT2I } from '~/modules/t2i/t2i.client';
 import { Brand } from '~/common/app.config';
 import { createDMessage, DMessage } from '~/common/state/store-chats';
 
@@ -10,7 +10,7 @@ export const CmdAddRoleMessage: string[] = ['/assistant', '/a', '/system', '/s']
 
 export const CmdHelp: string[] = ['/help', '/h', '/?'];
 
-export const commands = [...CmdRunBrowse, ...CmdRunProdia, ...CmdRunReact, ...CmdRunSearch, ...CmdAddRoleMessage, ...CmdHelp];
+export const commands = [...CmdRunBrowse, ...CmdRunT2I, ...CmdRunReact, ...CmdRunSearch, ...CmdAddRoleMessage, ...CmdHelp];
 
 export interface SentencePiece {
   type: 'text' | 'cmd';

src/apps/chat/editors/editors.ts

@@ -4,7 +4,7 @@ import { SystemPurposeId, SystemPurposes } from '../../../data';
 import { createDMessage, DMessage, useChatStore } from '~/common/state/store-chats';
 
 
-export function createAssistantTypingMessage(conversationId: string, assistantLlmLabel: DLLMId | 'prodia' | 'react-...' | 'web', assistantPurposeId: SystemPurposeId | undefined, text: string): string {
+export function createAssistantTypingMessage(conversationId: string, assistantLlmLabel: DLLMId | string /* 'DALL·E' | 'Prodia' | 'react-...' | 'web' */, assistantPurposeId: SystemPurposeId | undefined, text: string): string {
   const assistantMessage: DMessage = createDMessage('assistant', text);
   assistantMessage.typing = true;
   assistantMessage.purposeId = assistantPurposeId;

src/apps/chat/editors/image-generate.ts

@@ -1,4 +1,4 @@
-import { prodiaGenerateImage } from '~/modules/prodia/prodia.client';
+import { getActiveTextToImageProviderOrThrow, t2iGenerateImageOrThrow } from '~/modules/t2i/t2i.client';
 
 import { useChatStore } from '~/common/state/store-chats';
 
@@ -6,7 +6,7 @@ import { createAssistantTypingMessage } from './editors';
 
 
 /**
- * The main 'image generation' function - for now specialized to the 'imagine' command.
+ * Text to image, appended as an 'assistant' message
  */
 export async function runImageGenerationUpdatingState(conversationId: string, imageText: string) {
 
@@ -17,21 +17,23 @@ export async function runImageGenerationUpdatingState(conversationId: string, im
     imageText = imageText.replace(/x(\d+)$|\[(\d+)]$/, '').trim(); // Remove the "xN" or "[N]" part from the imageText
 
   // create a blank and 'typing' message for the assistant
-  const assistantMessageId = createAssistantTypingMessage(conversationId, 'prodia', undefined,
+  const assistantMessageId = createAssistantTypingMessage(conversationId, '', undefined,
     `Give me a few seconds while I draw ${imageText?.length > 20 ? 'that' : '"' + imageText + '"'}...`);
 
   // reference the state editing functions
   const { editMessage } = useChatStore.getState();
 
   try {
-    const imageUrls = await prodiaGenerateImage(count, imageText);
 
-    // Concatenate all the resulting URLs and update the assistant message with these URLs
-    const allImageUrls = imageUrls.join('\n');
-    editMessage(conversationId, assistantMessageId, { text: allImageUrls, typing: false }, false);
+    const t2iProvider = getActiveTextToImageProviderOrThrow();
+    editMessage(conversationId, assistantMessageId, { originLLM: t2iProvider.painter }, false);
+
+    const imageUrls = await t2iGenerateImageOrThrow(t2iProvider, imageText, count);
+    editMessage(conversationId, assistantMessageId, { text: imageUrls.join('\n'), typing: false }, true);
 
   } catch (error: any) {
     const errorMessage = error?.message || error?.toString() || 'Unknown error';
-    editMessage(conversationId, assistantMessageId, { text: `Sorry, I couldn't create an image for you. ${errorMessage}`, typing: false }, false);
+    if (assistantMessageId)
+      editMessage(conversationId, assistantMessageId, { text: `[Issue] Sorry, I couldn't create an image for you. ${errorMessage}`, typing: false }, false);
   }
 }

src/apps/chat/store-app-chat.ts

@@ -22,6 +22,9 @@ interface AppChatStore {
   autoTitleChat: boolean;
   setAutoTitleChat: (autoTitleChat: boolean) => void;
 
+  micTimeoutMs: number;
+  setMicTimeoutMs: (micTimeoutMs: number) => void;
+
   showTextDiff: boolean;
   setShowTextDiff: (showTextDiff: boolean) => void;
 
@@ -46,6 +49,9 @@ const useAppChatStore = create<AppChatStore>()(persist(
     autoTitleChat: true,
     setAutoTitleChat: (autoTitleChat: boolean) => _set({ autoTitleChat }),
 
+    micTimeoutMs: 2000,
+    setMicTimeoutMs: (micTimeoutMs: number) => _set({ micTimeoutMs }),
+
     showTextDiff: false,
     setShowTextDiff: (showTextDiff: boolean) => _set({ showTextDiff }),
 
@@ -91,6 +97,12 @@ export const getChatAutoAI = (): {
   autoTitleChat: boolean,
 } => useAppChatStore.getState();
 
+export const useChatMicTimeoutMsValue = (): number =>
+  useAppChatStore(state => state.micTimeoutMs);
+
+export const useChatMicTimeoutMs = (): [number, (micTimeoutMs: number) => void] =>
+  useAppChatStore(state => [state.micTimeoutMs, state.setMicTimeoutMs], shallow);
+
 export const useChatShowTextDiff = (): [boolean, (showDiff: boolean) => void] =>
   useAppChatStore(state => [state.showTextDiff, state.setShowTextDiff], shallow);
 

src/apps/link/AppChatLink.tsx

@@ -13,7 +13,8 @@ import { LogoProgress } from '~/common/components/LogoProgress';
 import { apiAsyncNode } from '~/common/util/trpc.client';
 import { capitalizeFirstLetter } from '~/common/util/textUtils';
 import { conversationTitle } from '~/common/state/store-chats';
-import { useLayoutPluggable } from '~/common/layout/store-applayout';
+import { themeBgAppDarker } from '~/common/app.theme';
+import { usePluggableOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
 
 import { AppChatLinkDrawerItems } from './AppChatLinkDrawerItems';
 import { AppChatLinkMenuItems } from './AppChatLinkMenuItems';
@@ -30,7 +31,7 @@ const Centerer = (props: { backgroundColor: string, children?: React.ReactNode }
   </Box>;
 
 const ShowLoading = () =>
-  <Centerer backgroundColor='background.level3'>
+  <Centerer backgroundColor={themeBgAppDarker}>
     <LogoProgress showProgress={true} />
     <Typography level='title-sm' sx={{ mt: 2 }}>
       Loading Chat...
@@ -38,7 +39,7 @@ const ShowLoading = () =>
   </Centerer>;
 
 const ShowError = (props: { error: any }) =>
-  <Centerer backgroundColor='background.level2'>
+  <Centerer backgroundColor={themeBgAppDarker}>
     <InlineError error={props.error} severity='warning' />
   </Centerer>;
 
@@ -85,7 +86,7 @@ export function AppChatLink(props: { linkId: string }) {
 
   const drawerItems = React.useMemo(() => <AppChatLinkDrawerItems />, []);
   const menuItems = React.useMemo(() => <AppChatLinkMenuItems />, []);
-  useLayoutPluggable(null, hasLinkItems ? drawerItems : null, menuItems);
+  usePluggableOptimaLayout(hasLinkItems ? drawerItems : null, null, menuItems, 'AppChatLink');
 
 
   const pageTitle = (data?.conversation && conversationTitle(data.conversation)) || 'Chat Link';
@@ -102,7 +103,7 @@ export function AppChatLink(props: { linkId: string }) {
         ? <ShowError error={error} />
         : !!data?.conversation
           ? <ViewChatLink conversation={data.conversation} storedAt={data.storedAt} expiresAt={data.expiresAt} />
-          : <Centerer backgroundColor='background.level3' />}
+          : <Centerer backgroundColor={themeBgAppDarker} />}
 
   </>;
 }

src/apps/link/AppChatLinkDrawerItems.tsx

@@ -8,8 +8,8 @@ import { useChatLinkItems } from '~/modules/trade/store-module-trade';
 
 import { Brand } from '~/common/app.config';
 import { Link } from '~/common/components/Link';
-import { closeLayoutDrawer } from '~/common/layout/store-applayout';
 import { getChatLinkRelativePath, ROUTE_INDEX } from '~/common/app.routes';
+import { useOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
 
 
 /**
@@ -19,6 +19,7 @@ import { getChatLinkRelativePath, ROUTE_INDEX } from '~/common/app.routes';
 export function AppChatLinkDrawerItems() {
 
   // external state
+  const { closeAppDrawer } = useOptimaLayout();
   const chatLinkItems = useChatLinkItems()
     .slice()
     .sort((a, b) => b.createdAt.localeCompare(a.createdAt));
@@ -27,7 +28,7 @@ export function AppChatLinkDrawerItems() {
   return <>
 
     <MenuItem
-      onClick={closeLayoutDrawer}
+      onClick={closeAppDrawer}
       component={Link} href={ROUTE_INDEX} noLinkStyle
     >
       <ListItemDecorator><ArrowBackIcon /></ListItemDecorator>

src/apps/link/ViewChatLink.tsx

@@ -9,7 +9,8 @@ import { useChatShowSystemMessages } from '../chat/store-app-chat';
 
 import { Brand } from '~/common/app.config';
 import { conversationTitle, DConversation, useChatStore } from '~/common/state/store-chats';
-import { navigateToChat } from '~/common/app.routes';
+import { launchAppChat } from '~/common/app.routes';
+import { themeBgAppDarker } from '~/common/app.theme';
 import { useUIPreferencesStore } from '~/common/state/store-ui';
 
 
@@ -58,7 +59,7 @@ export function ViewChatLink(props: { conversation: DConversation, storedAt: Dat
   const handleClone = async (canOverwrite: boolean) => {
     setCloning(true);
     const importedId = useChatStore.getState().importConversation({ ...props.conversation }, !canOverwrite);
-    await navigateToChat(importedId);
+    await launchAppChat(importedId);
     setCloning(false);
   };
 
@@ -67,7 +68,7 @@ export function ViewChatLink(props: { conversation: DConversation, storedAt: Dat
 
     <Box sx={{
       flexGrow: 1,
-      backgroundColor: 'background.level3',
+      backgroundColor: themeBgAppDarker,
       display: 'flex', flexFlow: 'column nowrap', minHeight: 96, alignItems: 'center',
       gap: { xs: 4, md: 5, xl: 6 },
       px: { xs: 2 },

src/apps/news/AppNews.tsx

@@ -1,19 +1,40 @@
 import * as React from 'react';
+import { keyframes } from '@emotion/react';
+import TimeAgo from 'react-timeago';
 
 import { Box, Button, Card, CardContent, Container, IconButton, Typography } from '@mui/joy';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
 import { Brand } from '~/common/app.config';
+import { GoodTooltip } from '~/common/components/GoodTooltip';
 import { Link } from '~/common/components/Link';
 import { ROUTE_INDEX } from '~/common/app.routes';
 import { capitalizeFirstLetter } from '~/common/util/textUtils';
+import { themeBgApp } from '~/common/app.theme';
 
 import { newsCallout, NewsItems } from './news.data';
 
+// number of news items to show by default, before the expander
+const DEFAULT_NEWS_COUNT = 2;
+
+export const cssColorKeyframes = keyframes`
+    0%, 100% {
+        color: #636B74; /* Neutral main color (500) */
+    }
+    25% {
+        color: #12467B; /* Primary darker shade (700) */
+    }
+    50% {
+        color: #0B6BCB; /* Primary main color (500) */
+    }
+    75% {
+        color: #97C3F0; /* Primary lighter shade (300) */
+    }`;
+
 
 export function AppNews() {
   // state
-  const [lastNewsIdx, setLastNewsIdx] = React.useState<number>(0);
+  const [lastNewsIdx, setLastNewsIdx] = React.useState<number>(DEFAULT_NEWS_COUNT - 1);
 
   // news selection
   const news = NewsItems.filter((_, idx) => idx <= lastNewsIdx);
@@ -23,7 +44,7 @@ export function AppNews() {
 
     <Box sx={{
       flexGrow: 1,
-      backgroundColor: 'background.level1',
+      backgroundColor: themeBgApp,
       overflowY: 'auto',
       display: 'flex', justifyContent: 'center',
       p: { xs: 3, md: 6 },
@@ -36,11 +57,11 @@ export function AppNews() {
       }}>
 
         <Typography level='h1' sx={{ fontSize: '3rem' }}>
-          Welcome to {Brand.Title.Base} {firstNews?.versionName}!
+          Welcome to {Brand.Title.Base} <Box component='span' sx={{ animation: `${cssColorKeyframes} 10s infinite` }}>{firstNews?.versionCode}</Box>!
         </Typography>
 
         <Typography>
-          {capitalizeFirstLetter(Brand.Title.Base)} has been updated to version {firstNews?.versionName}.
+          {capitalizeFirstLetter(Brand.Title.Base)} has been updated to version {firstNews?.versionCode}
         </Typography>
 
         <Box>
@@ -58,30 +79,33 @@ export function AppNews() {
 
         {!!news && <Container disableGutters maxWidth='sm'>
           {news?.map((ni, idx) => {
-            const firstCard = idx === 0;
+            // const firstCard = idx === 0;
             const hasCardAfter = news.length < NewsItems.length;
             const showExpander = hasCardAfter && (idx === news.length - 1);
-            const addPadding = !firstCard; // || showExpander;
+            const addPadding = false; //!firstCard; // || showExpander;
             return <Card key={'news-' + idx} sx={{ mb: 2, minHeight: 32 }}>
               <CardContent sx={{ position: 'relative', pr: addPadding ? 4 : 0 }}>
-                {!!ni.text && <Typography level='title-lg' component='div'>
-                  {ni.text}
-                </Typography>}
+                <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 0 }}>
+                  <GoodTooltip title={ni.versionName ? `${ni.versionName} ${ni.versionMoji || ''}` : null} placement='top-start'>
+                    <Typography level='title-sm' component='div' sx={{ flexGrow: 1 }}>
+                      {ni.text ? ni.text : ni.versionName ? `${ni.versionCode} · ${ni.versionName}` : `Version ${ni.versionCode}:`}
+                    </Typography>
+                  </GoodTooltip>
+                  {/*!firstCard &&*/ (
+                    <Typography level='body-sm'>
+                      {!!ni.versionDate && <TimeAgo date={ni.versionDate} />}
+                    </Typography>
+                  )}
+                </Box>
 
                 {!!ni.items && (ni.items.length > 0) && <ul style={{ marginTop: 8, marginBottom: 8, paddingInlineStart: 24 }}>
                   {ni.items.filter(item => item.dev !== true).map((item, idx) => <li key={idx}>
-                    <Typography component='div'>
+                    <Typography component='div' level='body-sm'>
                       {item.text}
                     </Typography>
                   </li>)}
                 </ul>}
 
-                {/*!firstCard &&*/ (
-                  <Typography level='body-sm' sx={{ position: 'absolute', right: 0, top: 0 }}>
-                    {ni.versionName}
-                  </Typography>
-                )}
-
                 {showExpander && (
                   <IconButton
                     variant='plain' size='sm'

src/apps/news/news.data.tsx

@@ -6,13 +6,14 @@ import LaunchIcon from '@mui/icons-material/Launch';
 import { Brand } from '~/common/app.config';
 import { Link } from '~/common/components/Link';
 import { clientUtmSource } from '~/common/util/pwaUtils';
+import { platformAwareKeystrokes } from '~/common/components/KeyStroke';
 
 
 // update this variable every time you want to broadcast a new version to clients
-export const incrementalVersion: number = 7;
+export const incrementalVersion: number = 10;
 
 const B = (props: { href?: string, children: React.ReactNode }) => {
-  const boldText = <Typography color={!!props.href ? 'primary' : 'warning'} sx={{ fontWeight: 600 }}>{props.children}</Typography>;
+  const boldText = <Typography color={!!props.href ? 'primary' : 'neutral'} sx={{ fontWeight: 600 }}>{props.children}</Typography>;
   return props.href ?
     <Link href={props.href + clientUtmSource()} target='_blank' sx={{ /*textDecoration: 'underline'*/ }}>{boldText} <LaunchIcon sx={{ ml: 1 }} /></Link> :
     boldText;
@@ -26,11 +27,12 @@ const RIssues = `${OpenRepo}/issues`;
 export const newsCallout =
   <Card>
     <CardContent sx={{ gap: 2 }}>
-      <Typography level='h3'>
+      <Typography level='title-lg'>
         Open Roadmap
       </Typography>
-      <Typography>
-        The roadmap is officially out. For the first time you get a look at what&apos;s brewing, up and coming, and get a chance to pick up cool features!
+      <Typography level='body-md'>
+        Take a peek at our roadmap to see what&apos;s in the pipeline.
+        Discover upcoming features and let us know what excites you the most!
       </Typography>
       <Grid container spacing={1}>
         <Grid xs={12} sm={7}>
@@ -38,7 +40,7 @@ export const newsCallout =
             fullWidth variant='soft' color='primary' endDecorator={<LaunchIcon />}
             component={Link} href={OpenProject} noLinkStyle target='_blank'
           >
-            Explore the Roadmap
+            Explore
           </Button>
         </Grid>
         <Grid xs={12} sm={5} sx={{ display: 'flex', flexAlign: 'center', justifyContent: 'center' }}>
@@ -56,22 +58,63 @@ export const newsCallout =
 
 // news and feature surfaces
 export const NewsItems: NewsItem[] = [
-  /*{
-  // https://github.com/enricoros/big-agi/milestone/7
-  // https://github.com/users/enricoros/projects/4/views/2
-    versionName: '1.7.0',
-    items: [
-    // multi-window support
-    // phone calls
-    ],
-  },*/
+  // still unannounced: phone calls, split windows, ...
   {
-    versionName: '1.6.0',
-    text: 'Surf\'s Up in Chat Waves:',
+    versionCode: '1.9.0',
+    versionName: 'Creative Horizons',
+    versionMoji: '🎨🌌',
+    versionDate: new Date('2023-12-28T22:30:00Z'),
+    items: [
+      { text: <><B href={RIssues + '/212'}>DALL·E 3</B> support (/draw), with advanced control</>, issue: 212 },
+      { text: <><B href={RIssues + '/304'}>Perfect scrolling</B> UX, on all devices</>, issue: 304 },
+      { text: <>Create personas <B href={RIssues + '/287'}>from text</B></>, issue: 287 },
+      { text: <>Openrouter: auto-detect models, support free-tiers and rates</>, issue: 291 },
+      { text: <>Image drawing: unified UX, including auto-prompting</> },
+      { text: <>Fix layout on Firefox</>, issue: 255 },
+      { text: <>Developers: new Text2Image subsystem, Optima layout subsystem, ScrollToBottom library, using new Panes library, improved Llms subsystem</>, dev: true },
+    ],
+  },
+  {
+    versionCode: '1.8.0',
+    versionName: 'To The Moon And Back',
+    // versionMoji: '🚀🌕🔙❤️',
+    versionDate: new Date('2023-12-20T09:30:00Z'),
+    items: [
+      { text: <><B href={RIssues + '/275'}>Google Gemini</B> models support</> },
+      { text: <><B href={RIssues + '/273'}>Mistral Platform</B> support</> },
+      { text: <><B href={RIssues + '/270'}>Ollama chats</B> perfection</> },
+      { text: <>Custom <B href={RIssues + '/280'}>diagrams instructions</B> (@joriskalz)</> },
+      { text: <><B>Single-Tab</B> mode, enhances data integrity and prevents DB corruption</> },
+      { text: <>Updated Ollama (v0.1.17) and OpenRouter models</> },
+      { text: <>More: fixed ⌘ shortcuts on Mac</> },
+      { text: <><Link href='https://big-agi.com'>Website</Link>: official downloads</> },
+      { text: <>Easier Vercel deployment, documented <Link href='https://github.com/enricoros/big-AGI/issues/276#issuecomment-1858591483'>network troubleshooting</Link></>, dev: true },
+    ],
+  },
+  {
+    versionCode: '1.7.0',
+    versionName: 'Attachment Theory',
+    // versionDate: new Date('2023-12-11T06:00:00Z'), // 1.7.3
+    versionDate: new Date('2023-12-10T12:00:00Z'), // 1.7.0
+    items: [
+      { text: <>Redesigned <B href={RIssues + '/251'}>attachments system</B>: drag, paste, link, snap, images, text, pdfs</> },
+      { text: <>Desktop <B href={RIssues + '/253'}>webcam access</B> for direct image capture (Labs option)</> },
+      { text: <>Independent browsing with <B href={RCode + '/docs/config-browse.md'}>Browserless</B> support</> },
+      { text: <><B href={RIssues + '/256'}>Overheat</B> LLMs with higher temperature limits</> },
+      { text: <>Enhanced security via <B href={RCode + '/docs/deploy-authentication.md'}>password protection</B></> },
+      { text: <>{platformAwareKeystrokes('Ctrl+Shift+O')}: quick access to model options</> },
+      { text: <>Optimized voice input and performance</> },
+      { text: <>Latest Ollama and Oobabooga models</> },
+    ],
+  },
+  {
+    versionCode: '1.6.0',
+    versionName: 'Surf\'s Up',
+    versionDate: new Date('2023-11-28T21:00:00Z'),
     items: [
       { text: <><B href={RIssues + '/237'}>Web Browsing</B> support, see the <B href={RCode + '/docs/config-browse.md'}>browsing user guide</B></> },
       { text: <><B href={RIssues + '/235'}>Branching Discussions</B> at any message</> },
-      { text: <><B href={RIssues + '/207'}>Keyboard Navigation</B>: use Ctrl+Shift+Left/Right to navigate chats</> },
+      { text: <><B href={RIssues + '/207'}>Keyboard Navigation</B>: use {platformAwareKeystrokes('Ctrl+Shift+Left/Right')} to navigate chats</> },
       { text: <><B href={RIssues + '/236'}>UI fixes</B> (thanks to the first sponsor)</> },
       { text: <>Added support for Anthropic Claude 2.1</> },
       { text: <>Large rendering performance optimization</> },
@@ -80,8 +123,9 @@ export const NewsItems: NewsItem[] = [
     ],
   },
   {
-    versionName: '1.5.0',
-    text: 'Enjoy what\'s new:',
+    versionCode: '1.5.0',
+    versionName: 'Loaded!',
+    versionDate: new Date('2023-11-19T21:00:00Z'),
     items: [
       { text: <><B href={RIssues + '/190'}>Continued Voice</B> for hands-free interaction</> },
       { text: <><B href={RIssues + '/192'}>Visualization</B> Tool for data representations</> },
@@ -95,7 +139,7 @@ export const NewsItems: NewsItem[] = [
     ],
   },
   {
-    versionName: '1.4.0',
+    versionCode: '1.4.0',
     items: [
       { text: <><B>Share and clone</B> conversations, with public links</> },
       { text: <><B href={RCode + '/docs/config-azure-openai.md'}>Azure</B> models, incl. gpt-4-32k</> },
@@ -105,7 +149,7 @@ export const NewsItems: NewsItem[] = [
     ],
   },
   {
-    versionName: '1.3.5',
+    versionCode: '1.3.5',
     items: [
       { text: <>AI in the real world with <B>Camera OCR</B> - MOBILE-ONLY</> },
       { text: <><B>Anthropic</B> models full support</> },
@@ -116,7 +160,7 @@ export const NewsItems: NewsItem[] = [
     ],
   },
   {
-    versionName: '1.3.1',
+    versionCode: '1.3.1',
     items: [
       { text: <><B>Flattener</B> - 4-mode conversations summarizer</> },
       { text: <><B>Forking</B> - branch your conversations</> },
@@ -126,7 +170,7 @@ export const NewsItems: NewsItem[] = [
     ],
   },
   {
-    versionName: '1.2.1',
+    versionCode: '1.2.1',
     // text: '',
     items: [
       { text: <>New home page: <b><Link href={Brand.URIs.Home + clientUtmSource()} target='_blank'>{Brand.URIs.Home.replace('https://', '')}</Link></b></> },
@@ -138,10 +182,14 @@ export const NewsItems: NewsItem[] = [
 
 
 interface NewsItem {
-  versionName: string;
+  versionCode: string;
+  versionName?: string;
+  versionMoji?: string;
+  versionDate?: Date;
   text?: string | React.JSX.Element;
   items?: {
     text: string | React.JSX.Element;
     dev?: boolean;
+    issue?: number;
   }[];
 }

src/apps/news/news.hooks.ts

@@ -1,25 +1,20 @@
 import * as React from 'react';
-import { shallow } from 'zustand/shallow';
-import { useRouter } from 'next/router';
 
+import { navigateToNews } from '~/common/app.routes';
 import { useAppStateStore } from '~/common/state/store-appstate';
 
 import { incrementalVersion } from './news.data';
 
 
-export function useShowNewsOnUpdate() {
-  const { push: routerPush } = useRouter();
-  const { usageCount, lastSeenNewsVersion } = useAppStateStore(state => ({
-    usageCount: state.usageCount,
-    lastSeenNewsVersion: state.lastSeenNewsVersion,
-  }), shallow);
+export function useRedirectToNewsOnUpdates() {
   React.useEffect(() => {
+    const { usageCount, lastSeenNewsVersion } = useAppStateStore.getState();
     const isNewsOutdated = (lastSeenNewsVersion || 0) < incrementalVersion;
     if (isNewsOutdated && usageCount > 2) {
       // Disable for now
-      void routerPush('/news');
+      void navigateToNews();
     }
-  }, [lastSeenNewsVersion, routerPush, usageCount]);
+  }, []);
 }
 
 export function useMarkNewsAsSeen() {

src/apps/personas/AppPersonas.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
 
-import { Box, Container, ListDivider, Sheet, Typography } from '@mui/joy';
+import { Container, ListDivider, Sheet, Typography } from '@mui/joy';
 
-import { YTPersonaCreator } from './YTPersonaCreator';
-import ScienceIcon from '@mui/icons-material/Science';
+import { themeBgApp } from '~/common/app.theme';
+
+import { PersonaCreator } from './PersonaCreator';
 
 
 export function AppPersonas() {
@@ -11,26 +12,19 @@ export function AppPersonas() {
     <Sheet sx={{
       flexGrow: 1,
       overflowY: 'auto',
-      backgroundColor: 'background.level1',
+      backgroundColor: themeBgApp,
       p: { xs: 3, md: 6 },
     }}>
 
       <Container disableGutters maxWidth='md' sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
 
         <Typography level='title-lg' sx={{ textAlign: 'center' }}>
-          Advanced AI Personas
+          AI Personas Creator
         </Typography>
 
-        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 1 }}>
-          <Typography>
-            Experimental
-          </Typography>
-          <ScienceIcon color='primary' />
-        </Box>
-
         <ListDivider sx={{ my: 2 }} />
 
-        <YTPersonaCreator />
+        <PersonaCreator />
 
       </Container>
 

src/apps/personas/PersonaCreator.tsx

@@ -1,11 +1,13 @@
 import * as React from 'react';
 
-import { Alert, Box, Button, Card, CardContent, CircularProgress, Grid, IconButton, Input, LinearProgress, Tooltip, Typography } from '@mui/joy';
+import { Alert, Box, Button, Card, CardContent, CircularProgress, Grid, Input, LinearProgress, Tab, TabList, TabPanel, Tabs, Textarea, Typography } from '@mui/joy';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
-import WhatshotIcon from '@mui/icons-material/Whatshot';
+import SettingsAccessibilityIcon from '@mui/icons-material/SettingsAccessibility';
+import TextFieldsIcon from '@mui/icons-material/TextFields';
 import YouTubeIcon from '@mui/icons-material/YouTube';
 
 import { GoodModal } from '~/common/components/GoodModal';
+import { GoodTooltip } from '~/common/components/GoodTooltip';
 import { apiQuery } from '~/common/util/trpc.client';
 import { copyToClipboard } from '~/common/util/clipboardUtils';
 import { useFormRadioLlmType } from '~/common/components/forms/useFormRadioLlmType';
@@ -37,9 +39,9 @@ function useTranscriptFromVideo(videoID: string | null) {
 }
 
 
-const YouTubePersonaSteps: LLMChainStep[] = [
+const PersonaCreationSteps: LLMChainStep[] = [
   {
-    name: 'Analyzing the transcript',
+    name: 'Analyzing the transcript / text',
     setSystem: 'You are skilled in analyzing and embodying diverse characters. You meticulously study transcripts to capture key attributes, draft comprehensive character sheets, and refine them for authenticity. Feel free to make assumptions without hedging, be concise and be creative.',
     addUserInput: true,
     addUser: 'Conduct comprehensive research on the provided transcript. Identify key characteristics of the speaker, including age, professional field, distinct personality traits, style of communication, narrative context, and self-awareness. Additionally, consider any unique aspects such as their use of humor, their cultural background, core values, passions, fears, personal history, and social interactions. Your output for this stage is an in-depth written analysis that exhibits an understanding of both the superficial and more profound aspects of the speaker\'s persona.',
@@ -62,23 +64,34 @@ const YouTubePersonaSteps: LLMChainStep[] = [
 ];
 
 
-export function YTPersonaCreator() {
+export function PersonaCreator() {
   // state
   const [videoURL, setVideoURL] = React.useState('');
   const [videoID, setVideoID] = React.useState('');
   const [personaTranscript, setPersonaTranscript] = React.useState<string | null>(null);
+  const [personaText, setPersonaText] = React.useState('');
+  const [selectedTab, setSelectedTab] = React.useState(0);
 
   // external state
-  const [diagramLlm, llmComponent] = useFormRadioLlmType();
+  const [personaLlm, llmComponent] = useFormRadioLlmType('Persona Creation Model');
 
   // fetch transcript when the Video ID is ready, then store it
   const { transcript, thumbnailUrl, title, isFetching, isError, error: transcriptError } =
     useTranscriptFromVideo(videoID);
   React.useEffect(() => setPersonaTranscript(transcript), [transcript]);
 
+  // Reset the relevant state when the selected tab changes
+  React.useEffect(() => {
+      // reset state
+      setVideoURL('');
+      setVideoID('');
+      setPersonaTranscript(null);
+      setPersonaText('');
+  }, [selectedTab]);
+
   // use the transformation sequence to create a persona
   const { isFinished, isTransforming, chainProgress, chainIntermediates, chainStepName, chainOutput, chainError, abortChain } =
-    useLLMChain(YouTubePersonaSteps, diagramLlm?.id, personaTranscript ?? undefined);
+    useLLMChain(PersonaCreationSteps, personaLlm?.id, personaTranscript ?? undefined);
 
   const handleVideoIdChange = (e: React.ChangeEvent<HTMLInputElement>) => setVideoURL(e.target.value);
 
@@ -93,61 +106,89 @@ export function YTPersonaCreator() {
     }
   };
 
+  // New handler for persona text change
+  const handlePersonaTextChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setPersonaText(e.target.value);
+  };
+
   return <>
 
-    <Box sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 1 }}>
-      <YouTubeIcon sx={{ color: '#f00' }} />
-      <Typography level='title-lg'>
-        YouTube -&gt; AI persona
-      </Typography>
-    </Box>
+    <Typography level='title-sm' mb={3}>
+      Create the <em>System Prompt</em> of an AI Persona from YouTube or Text.
+    </Typography>
 
-    <form onSubmit={handleFetchTranscript}>
-      <Box sx={{ display: 'flex', flexDirection: 'row', gap: 2 }}>
-        <Input
-          required
-          type='url'
-          fullWidth
+    <Tabs defaultValue={0} variant='outlined'
+      value={selectedTab}
+      onChange={(event, newValue) => setSelectedTab(newValue as number)}>
+      <TabList sx={{ minHeight: 48 }}>
+        <Tab>From YouTube Video</Tab>
+        <Tab>From Text</Tab>
+      </TabList>
+
+      {/* YouTube URL inputs */}
+      <TabPanel value={0} sx={{ p: 3 }}>
+
+        <Typography level='title-md' startDecorator={<YouTubeIcon sx={{ color: '#f00' }} />} sx={{ mb: 3 }}>
+          YouTube -&gt; Persona
+        </Typography>
+
+        <form onSubmit={handleFetchTranscript}>
+          <Input
+            required
+            type='url'
+            fullWidth
+            variant='outlined'
+            placeholder='YouTube Video URL'
+            value={videoURL}
+            onChange={handleVideoIdChange}
+            sx={{ mb: 1.5 }}
+          />
+          <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+            <Button type='submit' variant='solid' disabled={isFetching || isTransforming || !videoURL} loading={isFetching} sx={{ minWidth: 140 }}>
+              Create
+            </Button>
+            <GoodTooltip title='This example comes from the popular Fireship YouTube channel, which presents technical topics with irreverent humor.'>
+              <Button variant='outlined' color='neutral' onClick={() => setVideoURL('https://www.youtube.com/watch?v=M_wZpSEvOkc')}>
+                Example
+              </Button>
+            </GoodTooltip>
+          </Box>
+        </form>
+      </TabPanel>
+
+      {/* Text area for users to paste copied text */}
+      <TabPanel value={1} sx={{ p: 3 }}>
+
+        <Typography level='title-md' startDecorator={<TextFieldsIcon />} sx={{ mb: 3 }}>
+          <b>Text</b> -&gt; Persona
+        </Typography>
+
+        <Textarea
           variant='outlined'
-          placeholder='YouTube Video URL'
-          value={videoURL} onChange={handleVideoIdChange}
-          endDecorator={
-            <IconButton
-              variant='outlined' color='neutral'
-              onClick={() => setVideoURL('https://www.youtube.com/watch?v=M_wZpSEvOkc')}
-            >
-              <WhatshotIcon />
-            </IconButton>
-          }
+          minRows={4} maxRows={8}
+          placeholder='Paste your text here...'
+          value={personaText}
+          onChange={handlePersonaTextChange}
+          sx={{
+            backgroundColor: 'background.level1',
+            '&:focus-within': {
+              backgroundColor: 'background.popup',
+            },
+            lineHeight: 1.75,
+            mb: 1.5,
+          }}
         />
-        <Button
-          type='submit'
-          variant='solid' disabled={isFetching || isTransforming} loading={isFetching}
-          sx={{ minWidth: 120 }}>
-          Create
-        </Button>
-      </Box>
-    </form>
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <Button variant='solid' disabled={isFetching || isTransforming || !personaText} onClick={() => setPersonaTranscript(personaText)} sx={{ minWidth: 140 }}>
+            Create
+          </Button>
+          {!!personaText?.length && <Typography level='body-sm'>{personaText.length.toLocaleString()}</Typography>}
+        </Box>
+      </TabPanel>
+    </Tabs>
 
     {/* LLM selector (chat vs fast) */}
-    {!isTransforming && !isFinished && llmComponent}
-
-    {/* 1. Transcript*/}
-    {personaTranscript && (
-      <Card sx={{ mt: 2, boxShadow: 'md' }}>
-        <CardContent>
-          <Typography level='title-md' sx={{ mb: 1 }}>
-            {title || 'Transcript'}
-          </Typography>
-          <Box>
-            {!!thumbnailUrl && <picture><img src={thumbnailUrl} alt='YouTube Video Image' height={80} style={{ float: 'left', marginRight: 8 }} /></picture>}
-            <Typography level='body-sm'>
-              {personaTranscript.slice(0, 280)}...
-            </Typography>
-          </Box>
-        </CardContent>
-      </Card>
-    )}
+    {!isTransforming && !isFinished && <Box sx={{ mt: 3 }}>{llmComponent}</Box>}
 
     {/* Errors */}
     {isError && (
@@ -161,49 +202,64 @@ export function YTPersonaCreator() {
       </Alert>
     )}
 
-
     {/* Persona! */}
-    {chainOutput && <Box sx={{ mt: 2 }}>
-      <Typography level='title-lg'>
-        YouTuber Persona System Prompt
-      </Typography>
-      <Card sx={{ boxShadow: 'md' }}>
-        <CardContent sx={{
-          position: 'relative',
-          '&:hover > button': { opacity: 1 },
-        }}>
+    {chainOutput && <>
+      <Card sx={{ boxShadow: 'md', mt: 3 }}>
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <Typography level='title-lg' color='success' startDecorator={<SettingsAccessibilityIcon color='success' />}>
+            Persona Prompt
+          </Typography>
+          <GoodTooltip title='Copy system prompt'>
+            <Button color='success' onClick={() => copyToClipboard(chainOutput, 'Persona prompt')} endDecorator={<ContentCopyIcon />} sx={{ minWidth: 120 }}>
+              Copy
+            </Button>
+          </GoodTooltip>
+        </Box>
+        <CardContent>
           <Alert variant='soft' color='success' sx={{ mb: 1 }}>
-            You can now copy the following text and use it as Custom prompt!
+            You may now copy the text below and use it as Custom prompt!
           </Alert>
-          <Tooltip title='Copy system prompt' variant='solid'>
-            <IconButton
-              variant='outlined' color='neutral' onClick={() => copyToClipboard(chainOutput, 'Persona prompt')}
-              sx={{
-                position: 'absolute', right: 0, zIndex: 10,
-                // opacity: 0, transition: 'opacity 0.3s',
-              }}>
-              <ContentCopyIcon />
-            </IconButton>
-          </Tooltip>
-          <Typography level='body-sm'>
+          <Typography level='title-sm' sx={{ lineHeight: 1.75 }}>
             {chainOutput}
           </Typography>
         </CardContent>
       </Card>
-    </Box>}
+    </>}
+
+    {/* Input: Transcript*/}
+    {personaTranscript && <>
+      <Typography level='title-lg' sx={{ mt: 3, mb: 0.5 }}>
+        Input Data
+      </Typography>
+
+      <Card>
+        <CardContent>
+          <Typography level='title-md' sx={{ mb: 1 }}>
+            {title || 'Transcript / Text'}
+          </Typography>
+          <Box>
+            {!!thumbnailUrl && <picture><img src={thumbnailUrl} alt='YouTube Video Thumbnail' height={80} style={{ float: 'left', marginRight: 8 }} /></picture>}
+            <Typography level='body-sm'>
+              {personaTranscript.slice(0, 280)}...
+            </Typography>
+          </Box>
+        </CardContent>
+      </Card>
+    </>}
 
     {/* Intermediate outputs rendered as cards in a grid */}
-    {chainIntermediates && chainIntermediates.length > 0 && <Box sx={{ mt: 2 }}>
-      <Typography level='title-lg'>
+    {chainIntermediates && chainIntermediates.length > 0 && <>
+      <Typography level='title-lg' sx={{ mt: 3, mb: 0.5 }}>
         {isTransforming ? 'Working...' : 'Intermediate Work'}
       </Typography>
+
       <Grid container spacing={2}>
         {chainIntermediates.map((intermediate, i) =>
           <Grid xs={12} sm={6} md={4} key={i}>
-            <Card>
+            <Card sx={{ height: '100%' }}>
               <CardContent>
                 <Typography level='title-sm' sx={{ mb: 1 }}>
-                  {i + 1}. {YouTubePersonaSteps[i].name}
+                  {i + 1}. {PersonaCreationSteps[i].name}
                 </Typography>
                 <Typography level='body-sm'>
                   {intermediate?.slice(0, 140)}...
@@ -213,27 +269,35 @@ export function YTPersonaCreator() {
           </Grid>,
         )}
       </Grid>
-    </Box>}
+    </>}
 
 
-    {/* Embodiment Progress */}
+    {/* Dialog: Embodiment Progress */}
     {isTransforming && <GoodModal open>
       <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', my: 2 }}>
         <CircularProgress color='primary' value={Math.max(10, 100 * chainProgress)} />
       </Box>
-      <Typography color='success' level='title-lg' sx={{ mt: 1 }}>
-        Embodying Persona ...
-      </Typography>
-      <Typography color='success' level='title-sm' sx={{ mt: 1, fontWeight: 600 }}>
-        {chainStepName}
-      </Typography>
-      <LinearProgress color='success' determinate value={Math.max(10, 100 * chainProgress)} sx={{ mt: 1, mb: 2 }} />
+      <Box>
+        <Typography color='success' level='title-lg'>
+          Embodying Persona ...
+        </Typography>
+        <Typography level='title-sm' sx={{ mt: 1 }}>
+          Using: {personaLlm?.label}
+        </Typography>
+      </Box>
+      <Box>
+        <Typography color='success' level='title-sm' sx={{ fontWeight: 600 }}>
+          {chainStepName}
+        </Typography>
+        <LinearProgress color='success' determinate value={Math.max(10, 100 * chainProgress)} sx={{ mt: 1.5 }} />
+      </Box>
       <Typography level='title-sm'>
         This may take 1-2 minutes. Do not close this window or the progress will be lost.
-        If you experience any errors (e.g. LLM timeouts, or context overflows for larger videos)
+        While larger models will produce higher quality prompts,
+        if you experience any errors (e.g. LLM timeouts, or context overflows for larger videos)
         please try again with faster/smaller models.
       </Typography>
-      <Button variant='soft' color='neutral' onClick={abortChain} sx={{ ml: 'auto', minWidth: 100, mt: 5 }}>
+      <Button variant='soft' color='neutral' onClick={abortChain} sx={{ ml: 'auto', minWidth: 100, mt: 3 }}>
         Cancel
       </Button>
     </GoodModal>}

src/apps/personas/useLLMChain.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { DLLMId, useModelsStore } from '~/modules/llms/store-llms';
-import { callChatGenerate, VChatMessageIn } from '~/modules/llms/transports/chatGenerate';
+import { llmChatGenerateOrThrow, VChatMessageIn } from '~/modules/llms/llm.client';
 
 
 export interface LLMChainStep {
@@ -80,7 +80,7 @@ export function useLLMChain(steps: LLMChainStep[], llmId: DLLMId | undefined, ch
     _chainAbortController.signal.addEventListener('abort', globalToStepListener);
 
     // LLM call
-    callChatGenerate(llmId, llmChatInput, chain.overrideResponseTokens)
+    llmChatGenerateOrThrow(llmId, llmChatInput, null, null, chain.overrideResponseTokens)
       .then(({ content }) => {
         stepDone = true;
         if (!stepAbortController.signal.aborted)

src/apps/settings-modal/AppChatSettingsUI.tsx

@@ -1,15 +1,16 @@
 import * as React from 'react';
 import { shallow } from 'zustand/shallow';
 
-import { Button, FormControl, Radio, RadioGroup, Switch } from '@mui/joy';
+import { Button, FormControl, Switch } from '@mui/joy';
 import BuildCircleIcon from '@mui/icons-material/BuildCircle';
 import WidthNormalIcon from '@mui/icons-material/WidthNormal';
 import WidthWideIcon from '@mui/icons-material/WidthWide';
 
 import { FormLabelStart } from '~/common/components/forms/FormLabelStart';
+import { FormRadioControl } from '~/common/components/forms/FormRadioControl';
 import { isPwa } from '~/common/util/pwaUtils';
-import { openLayoutModelsSetup } from '~/common/layout/store-applayout';
 import { useIsMobile } from '~/common/components/useMatchMedia';
+import { useOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
 import { useUIPreferencesStore } from '~/common/state/store-ui';
 
 
@@ -17,10 +18,14 @@ import { useUIPreferencesStore } from '~/common/state/store-ui';
 const SHOW_PURPOSE_FINDER = false;
 
 
-const ModelOptionsButton = () =>
-  <Button
+const ModelsSetupButton = () => {
+
+  // external state
+  const { openModelsSetup } = useOptimaLayout();
+
+  return <Button
     // variant='soft' color='success'
-    onClick={openLayoutModelsSetup}
+    onClick={openModelsSetup}
     startDecorator={<BuildCircleIcon />}
     sx={{
       '--Icon-fontSize': 'var(--joy-fontSize-xl2)',
@@ -28,6 +33,7 @@ const ModelOptionsButton = () =>
   >
     Models
   </Button>;
+};
 
 
 export function AppChatSettingsUI() {
@@ -50,14 +56,10 @@ export function AppChatSettingsUI() {
     zenMode: state.zenMode, setZenMode: state.setZenMode,
   }), shallow);
 
-  const handleCenterModeChange = (event: React.ChangeEvent<HTMLInputElement>) => setCenterMode(event.target.value as 'narrow' | 'wide' | 'full' || 'wide');
-
   const handleEnterIsNewlineChange = (event: React.ChangeEvent<HTMLInputElement>) => setEnterIsNewline(!event.target.checked);
 
   const handleDoubleClickToEditChange = (event: React.ChangeEvent<HTMLInputElement>) => setDoubleClickToEdit(event.target.checked);
 
-  const handleZenModeChange = (event: React.ChangeEvent<HTMLInputElement>) => setZenMode(event.target.value as 'clean' | 'cleaner');
-
   const handleRenderMarkdownChange = (event: React.ChangeEvent<HTMLInputElement>) => setRenderMarkdown(event.target.checked);
 
   const handleShowSearchBarChange = (event: React.ChangeEvent<HTMLInputElement>) => setShowPurposeFinder(event.target.checked);
@@ -67,7 +69,7 @@ export function AppChatSettingsUI() {
     <FormControl orientation='horizontal' sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
       <FormLabelStart title='AI Models'
                       description='Setup' />
-      <ModelOptionsButton />
+      <ModelsSetupButton />
     </FormControl>
 
     <FormControl orientation='horizontal' sx={{ justifyContent: 'space-between' }}>
@@ -102,25 +104,27 @@ export function AppChatSettingsUI() {
               slotProps={{ endDecorator: { sx: { minWidth: 26 } } }} />
     </FormControl>}
 
-    <FormControl orientation='horizontal' sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
-      <FormLabelStart title='Appearance'
-                      description={zenMode === 'clean' ? 'Show senders' : 'Minimal UI'} />
-      <RadioGroup orientation='horizontal' value={zenMode} onChange={handleZenModeChange}>
-        {/*<Radio value='clean' label={<Face6Icon sx={{ width: 24, height: 24, mt: -0.25 }} />} />*/}
-        <Radio value='clean' label='Clean' />
-        <Radio value='cleaner' label='Zen' />
-      </RadioGroup>
-    </FormControl>
+    <FormRadioControl
+      title='Appearance'
+      description={zenMode === 'clean' ? 'Show senders' : 'Minimal UI'}
+      options={[
+        { label: 'Clean', value: 'clean' },
+        { label: 'Zen', value: 'cleaner' },
+      ]}
+      value={zenMode} onChange={setZenMode} />
 
-    {!isPwa() && !isMobile && <FormControl orientation='horizontal' sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
-      <FormLabelStart title='Page Size'
-                      description={centerMode === 'full' ? 'Full screen chat' : centerMode === 'narrow' ? 'Narrow chat' : 'Wide'} />
-      <RadioGroup orientation='horizontal' value={centerMode} onChange={handleCenterModeChange}>
-        <Radio value='narrow' label={<WidthNormalIcon sx={{ width: 25, height: 24, mt: -0.25 }} />} />
-        <Radio value='wide' label={<WidthWideIcon sx={{ width: 25, height: 24, mt: -0.25 }} />} />
-        <Radio value='full' label='Full' />
-      </RadioGroup>
-    </FormControl>}
+    {!isPwa() && !isMobile && (
+      <FormRadioControl
+        title='Page Size'
+        description={centerMode === 'full' ? 'Full screen chat' : centerMode === 'narrow' ? 'Narrow chat' : 'Wide'}
+        options={[
+          { value: 'narrow', label: <WidthNormalIcon sx={{ width: 25, height: 24, mt: -0.25 }} /> },
+          { value: 'wide', label: <WidthWideIcon sx={{ width: 25, height: 24, mt: -0.25 }} /> },
+          { value: 'full', label: 'Full' },
+        ]}
+        value={centerMode} onChange={setCenterMode}
+      />
+    )}
 
   </>;
 }

src/apps/settings-modal/SettingsModal.tsx

@@ -6,12 +6,13 @@ import ScienceIcon from '@mui/icons-material/Science';
 import SearchIcon from '@mui/icons-material/Search';
 
 import { BrowseSettings } from '~/modules/browse/BrowseSettings';
+import { DallESettings } from '~/modules/t2i/dalle/DallESettings';
 import { ElevenlabsSettings } from '~/modules/elevenlabs/ElevenlabsSettings';
 import { GoogleSearchSettings } from '~/modules/google/GoogleSearchSettings';
-import { ProdiaSettings } from '~/modules/prodia/ProdiaSettings';
+import { ProdiaSettings } from '~/modules/t2i/prodia/ProdiaSettings';
+import { T2ISettings } from '~/modules/t2i/T2ISettings';
 
 import { GoodModal } from '~/common/components/GoodModal';
-import { closeLayoutPreferences, openLayoutShortcuts, useLayoutPreferencesTab } from '~/common/layout/store-applayout';
 import { settingsGap } from '~/common/app.theme';
 import { useIsMobile } from '~/common/components/useMatchMedia';
 
@@ -100,20 +101,24 @@ function Topic(props: { title?: string, icon?: string | React.ReactNode, startCo
  * Component that allows the User to modify the application settings,
  * persisted on the client via localStorage.
  */
-export function SettingsModal() {
+export function SettingsModal(props: {
+  open: boolean,
+  tabIndex: number,
+  onClose: () => void,
+  onOpenShortcuts: () => void,
+}) {
 
   // external state
   const isMobile = useIsMobile();
-  const settingsTabIndex = useLayoutPreferencesTab();
 
   const tabFixSx = { fontFamily: 'body', flex: 1, p: 0, m: 0 };
 
   return (
     <GoodModal
       title='Preferences' strongerTitle
-      open={!!settingsTabIndex} onClose={closeLayoutPreferences}
+      open={props.open} onClose={props.onClose}
       startButton={isMobile ? undefined : (
-        <Button variant='soft' onClick={openLayoutShortcuts}>
+        <Button variant='soft' onClick={props.onOpenShortcuts}>
           👉 See Shortcuts
         </Button>
       )}
@@ -124,7 +129,7 @@ export function SettingsModal() {
 
       <Divider />
 
-      <Tabs aria-label='Settings tabbed menu' defaultValue={settingsTabIndex}>
+      <Tabs aria-label='Settings tabbed menu' defaultValue={props.tabIndex}>
         <TabList
           variant='soft'
           disableUnderline
@@ -151,7 +156,7 @@ export function SettingsModal() {
           <Tab disableIndicator value={4} sx={tabFixSx}>Tools</Tab>
         </TabList>
 
-        <TabPanel value={1} sx={{ p: 'var(--Tabs-gap)' }}>
+        <TabPanel value={1} variant='outlined' sx={{ p: 'var(--Tabs-gap)', borderRadius: 'md' }}>
           <Topics>
             <Topic>
               <AppChatSettingsUI />
@@ -165,7 +170,7 @@ export function SettingsModal() {
           </Topics>
         </TabPanel>
 
-        <TabPanel value={3} sx={{ p: 'var(--Tabs-gap)' }}>
+        <TabPanel value={3} variant='outlined' sx={{ p: 'var(--Tabs-gap)', borderRadius: 'md' }}>
           <Topics>
             <Topic icon='🎙️' title='Voice settings'>
               <VoiceSettings />
@@ -176,15 +181,21 @@ export function SettingsModal() {
           </Topics>
         </TabPanel>
 
-        <TabPanel value={2} sx={{ p: 'var(--Tabs-gap)' }}>
+        <TabPanel value={2} variant='outlined' sx={{ p: 'var(--Tabs-gap)', borderRadius: 'md' }}>
           <Topics>
-            <Topic icon='🖍️️' title='Prodia API'>
+            <Topic>
+              <T2ISettings />
+            </Topic>
+            <Topic icon='🖍️️' title='OpenAI DALL·E' startCollapsed>
+              <DallESettings />
+            </Topic>
+            <Topic icon='🖍️️' title='Prodia API' startCollapsed>
               <ProdiaSettings />
             </Topic>
           </Topics>
         </TabPanel>
 
-        <TabPanel value={4} sx={{ p: 'var(--Tabs-gap)' }}>
+        <TabPanel value={4} variant='outlined' sx={{ p: 'var(--Tabs-gap)', borderRadius: 'md' }}>
           <Topics>
             <Topic icon={<SearchIcon />} title='Browsing' startCollapsed>
               <BrowseSettings />

src/apps/settings-modal/ShortcutsModal.tsx

@@ -3,7 +3,6 @@ import * as React from 'react';
 import { ChatMessage } from '../chat/components/message/ChatMessage';
 
 import { GoodModal } from '~/common/components/GoodModal';
-import { closeLayoutShortcuts, useLayoutShortcuts } from '~/common/layout/store-applayout';
 import { createDMessage } from '~/common/state/store-chats';
 import { platformAwareKeystrokes } from '~/common/components/KeyStroke';
 
@@ -26,8 +25,9 @@ const shortcutsMd = `
 | Ctrl + Alt + D      | **Delete** chat                                 |
 | Ctrl + Alt + B      | **Branch** chat                                 |
 | **Settings**        |                                                 |
-| Ctrl + Shift + M    | 🧠 Models                                       |
 | Ctrl + Shift + P    | ⚙️ Preferences                                  |
+| Ctrl + Shift + M    | 🧠 Models                                       |
+| Ctrl + Shift + O    | Options (current Chat Model)                    |
 | Ctrl + Shift + ?    | Shortcuts                                       |
 
 `.trim();
@@ -35,17 +35,9 @@ const shortcutsMd = `
 const shortcutsMessage = createDMessage('assistant', platformAwareKeystrokes(shortcutsMd));
 
 
-export function ShortcutsModal() {
-
-  // external state
-  const showShortcuts = useLayoutShortcuts();
-
+export function ShortcutsModal(props: { onClose: () => void }) {
   return (
-    <GoodModal
-      open={showShortcuts}
-      title='Desktop Shortcuts'
-      onClose={closeLayoutShortcuts}
-    >
+    <GoodModal open title='Desktop Shortcuts' onClose={props.onClose}>
       <ChatMessage message={shortcutsMessage} hideAvatars noBottomBorder sx={{ p: 0, m: 0 }} />
     </GoodModal>
   );

src/apps/settings-modal/UxLabsSettings.tsx

@@ -1,44 +1,40 @@
 import * as React from 'react';
 
 import { FormControl, Typography } from '@mui/joy';
+import AddAPhotoIcon from '@mui/icons-material/AddAPhoto';
 import CallIcon from '@mui/icons-material/Call';
-import FormatPaintIcon from '@mui/icons-material/FormatPaint';
 import VerticalSplitIcon from '@mui/icons-material/VerticalSplit';
-import YouTubeIcon from '@mui/icons-material/YouTube';
 
 import { FormLabelStart } from '~/common/components/forms/FormLabelStart';
 import { FormSwitchControl } from '~/common/components/forms/FormSwitchControl';
 import { Link } from '~/common/components/Link';
+import { useIsMobile } from '~/common/components/useMatchMedia';
 import { useUXLabsStore } from '~/common/state/store-ux-labs';
 
 
 export function UxLabsSettings() {
 
   // external state
+  const isMobile = useIsMobile();
   const {
-    labsCalling, /*labsEnhancedUI,*/ labsMagicDraw, labsPersonaYTCreator, labsSplitBranching,
-    setLabsCalling, /*setLabsEnhancedUI,*/ setLabsMagicDraw, setLabsPersonaYTCreator, setLabsSplitBranching,
+    labsCalling, labsCameraDesktop, /*labsEnhancedUI,*/ labsSplitBranching,
+    setLabsCalling, setLabsCameraDesktop, /*setLabsEnhancedUI,*/ setLabsSplitBranching,
   } = useUXLabsStore();
 
   return <>
 
     <FormSwitchControl
-      title={<><YouTubeIcon /> YouTube Personas</>} description={labsPersonaYTCreator ? 'Creator Enabled' : 'Disabled'}
-      checked={labsPersonaYTCreator} onChange={setLabsPersonaYTCreator}
-    />
-
-    <FormSwitchControl
-      title={<><FormatPaintIcon />Assisted Draw</>} description={labsMagicDraw ? 'Enabled' : 'Disabled'}
-      checked={labsMagicDraw} onChange={setLabsMagicDraw}
-    />
-
-    <FormSwitchControl
-      title={<><CallIcon /> Voice Calls</>} description={labsCalling ? 'Call AGI' : 'Disabled'}
+      title={<><CallIcon color={labsCalling ? 'primary' : undefined} sx={{ mr: 0.25 }} /> Voice Calls</>} description={labsCalling ? 'Call AGI' : 'Disabled'}
       checked={labsCalling} onChange={setLabsCalling}
     />
 
+    {!isMobile && <FormSwitchControl
+      title={<><AddAPhotoIcon color={labsCameraDesktop ? 'primary' : undefined} sx={{ mr: 0.25 }} /> Webcam</>} description={labsCameraDesktop ? 'Enabled' : 'Disabled'}
+      checked={labsCameraDesktop} onChange={setLabsCameraDesktop}
+    />}
+
     <FormSwitchControl
-      title={<><VerticalSplitIcon /> Split Branching</>} description={labsSplitBranching ? 'Enabled' : 'Disabled'} disabled
+      title={<><VerticalSplitIcon color={labsSplitBranching ? 'primary' : undefined} sx={{ mr: 0.25 }} /> Split Branching</>} description={labsSplitBranching ? 'Enabled' : 'Disabled'} disabled
       checked={labsSplitBranching} onChange={setLabsSplitBranching}
     />
 
@@ -50,7 +46,7 @@ export function UxLabsSettings() {
     <FormControl orientation='horizontal' sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
       <FormLabelStart title='Graduated' />
       <Typography level='body-xs'>
-        <Link href='https://github.com/enricoros/big-agi/issues/192' target='_blank'>Auto Diagrams</Link> · Relative chat size · Text Tools
+        <Link href='https://github.com/enricoros/big-AGI/issues/282' target='_blank'>Persona Creator</Link> · <Link href='https://github.com/enricoros/big-agi/issues/192' target='_blank'>Auto Diagrams</Link> · Imagine · Relative chat size · Text Tools · LLM Overheat
       </Typography>
     </FormControl>
 

src/apps/settings-modal/VoiceSettings.tsx

@@ -1,23 +1,29 @@
 import * as React from 'react';
 
-import { FormControl, Radio, RadioGroup } from '@mui/joy';
+import { FormControl } from '@mui/joy';
 
-import { ChatAutoSpeakType, useChatAutoAI } from '../chat/store-app-chat';
+import { useChatAutoAI, useChatMicTimeoutMs } from '../chat/store-app-chat';
 
 import { useElevenLabsVoices } from '~/modules/elevenlabs/useElevenLabsVoiceDropdown';
 
 import { FormLabelStart } from '~/common/components/forms/FormLabelStart';
+import { FormRadioControl } from '~/common/components/forms/FormRadioControl';
 import { LanguageSelect } from '~/common/components/LanguageSelect';
+import { useIsMobile } from '~/common/components/useMatchMedia';
 
 
 export function VoiceSettings() {
 
   // external state
+  const isMobile = useIsMobile();
   const { autoSpeak, setAutoSpeak } = useChatAutoAI();
   const { hasVoices } = useElevenLabsVoices();
+  const [chatTimeoutMs, setChatTimeoutMs] = useChatMicTimeoutMs();
 
 
-  const handleAutoSpeakChange = (e: React.ChangeEvent<HTMLInputElement>) => setAutoSpeak((e.target.value || 'off') as ChatAutoSpeakType);
+  // this converts from string keys to numbers and vice versa
+  const chatTimeoutValue: string = '' + chatTimeoutMs;
+  const setChatTimeoutValue = (value: string) => value && setChatTimeoutMs(parseInt(value));
 
   return <>
 
@@ -29,16 +35,29 @@ export function VoiceSettings() {
       <LanguageSelect />
     </FormControl>
 
-    <FormControl orientation='horizontal' sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
-      <FormLabelStart title='Speak Responses'
-                      description={autoSpeak === 'off' ? 'Off' : 'First paragraph'}
-                      tooltip={!hasVoices ? 'No voices available, please configure a voice synthesis service' : undefined} />
-      <RadioGroup orientation='horizontal' value={autoSpeak} onChange={handleAutoSpeakChange}>
-        <Radio disabled={!hasVoices} value='off' label='Off' />
-        <Radio disabled={!hasVoices} value='firstLine' label='Start' />
-        <Radio disabled={!hasVoices} value='all' label='Full' />
-      </RadioGroup>
-    </FormControl>
+    {!isMobile && <FormRadioControl
+      title='Mic Timeout'
+      description={chatTimeoutMs < 1000 ? 'Best for quick calls' : chatTimeoutMs > 5000 ? 'Best for thinking' : 'Standard'}
+      options={[
+        { value: '600', label: '.6s' },
+        { value: '2000', label: '2s' },
+        { value: '15000', label: '15s' },
+      ]}
+      value={chatTimeoutValue} onChange={setChatTimeoutValue}
+    />}
+
+    <FormRadioControl
+      title='Speak Responses'
+      description={autoSpeak === 'off' ? 'Off' : 'First paragraph'}
+      tooltip={!hasVoices ? 'No voices available, please configure a voice synthesis service' : undefined}
+      disabled={!hasVoices}
+      options={[
+        { value: 'off', label: 'Off' },
+        { value: 'firstLine', label: 'Start' },
+        { value: 'all', label: 'Full' },
+      ]}
+      value={autoSpeak} onChange={setAutoSpeak}
+    />
 
   </>;
 }

src/common/app.config.ts

@@ -12,8 +12,8 @@ export const Brand = {
     Common: (process.env.NODE_ENV === 'development' ? '[DEV] ' : '') + 'big-AGI',
   },
   Meta: {
-    Description: 'Leading open-source AI web interface to help you learn, think, and do. AI personas, superior privacy, advanced features, and fun UX.',
-    SiteName: 'big-AGI | Harnessing AI for You',
+    Description: 'Launch big-AGI to unlock the full potential of AI, with precise control over your data and models. Voice interface, AI personas, advanced features, and fun UX.',
+    SiteName: 'big-AGI | Precision AI for You',
     ThemeColor: '#32383E',
     TwitterSite: '@enricoros',
   },

src/common/app.routes.ts

@@ -7,40 +7,72 @@
 import Router from 'next/router';
 
 import type { DConversationId } from '~/common/state/store-chats';
+import { isBrowser } from './util/pwaUtils';
 
 
 export const ROUTE_INDEX = '/';
 export const ROUTE_APP_CHAT = '/';
+export const ROUTE_APP_CALL = '/call';
 export const ROUTE_APP_LINK_CHAT = '/link/chat/:linkId';
 export const ROUTE_APP_NEWS = '/news';
+export const ROUTE_APP_PERSONAS = '/personas';
+const ROUTE_CALLBACK_OPENROUTER = '/link/callback_openrouter';
 
-export const getIndexLink = () => ROUTE_INDEX;
+
+// Get Paths
+
+export const getCallbackUrl = (source: 'openrouter') => {
+  const callbackUrl = new URL(window.location.href);
+  switch (source) {
+    case 'openrouter':
+      callbackUrl.pathname = ROUTE_CALLBACK_OPENROUTER;
+      break;
+    default:
+      throw new Error(`Unknown source: ${source}`);
+  }
+  return callbackUrl.toString();
+};
 
 export const getChatLinkRelativePath = (chatLinkId: string) => ROUTE_APP_LINK_CHAT.replace(':linkId', chatLinkId);
 
-const navigateFn = (path: string) => (replace?: boolean): Promise<boolean> =>
-  Router[replace ? 'replace' : 'push'](path);
+
+/// Simple Navigation
 
 export const navigateToIndex = navigateFn(ROUTE_INDEX);
-export const navigateToChat = async (conversationId?: DConversationId) => {
-  if (conversationId) {
-    await Router.push(
-      {
-        pathname: ROUTE_APP_CHAT,
-        query: {
-          conversationId,
-        },
-      },
-      ROUTE_APP_CHAT,
-    );
-  } else {
-    await Router.push(ROUTE_APP_CHAT, ROUTE_APP_CHAT);
-  }
-};
+
 export const navigateToNews = navigateFn(ROUTE_APP_NEWS);
 
+export const navigateToPersonas = navigateFn(ROUTE_APP_PERSONAS);
+
 export const navigateBack = Router.back;
 
+export const reloadPage = () => isBrowser && window.location.reload();
+
+function navigateFn(path: string) {
+  return (replace?: boolean): Promise<boolean> => Router[replace ? 'replace' : 'push'](path);
+}
+
+
+/// Launch Apps
+
+/* Note: not used yet
+export interface AppChatQueryParams {
+  conversationId?: string;
+}*/
+
+export const launchAppChat = async (conversationId?: DConversationId) => {
+  await Router.push(
+    {
+      pathname: ROUTE_APP_CHAT,
+      query: conversationId ? {
+          conversationId,
+        } /*satisfies AppChatQueryParams*/
+        : undefined,
+    },
+    ROUTE_APP_CHAT,
+  );
+};
+
 export interface AppCallQueryParams {
   conversationId: string;
   personaId: string;
@@ -49,12 +81,12 @@ export interface AppCallQueryParams {
 export function launchAppCall(conversationId: string, personaId: string) {
   void Router.push(
     {
-      pathname: `/call`,
+      pathname: ROUTE_APP_CALL,
       query: {
         conversationId,
         personaId,
       } satisfies AppCallQueryParams,
     },
-    // '/call',
+    // ROUTE_APP_CALL,
   ).then();
 }

src/common/app.theme.ts

@@ -46,10 +46,17 @@ export const appTheme = extendTheme({
         text: {
           icon: 'var(--joy-palette-neutral-700)',           // <IconButton color='neutral' /> icon color
           secondary: 'var(--joy-palette-neutral-800)',      // increase contrast a bit
+          // tertiary: 'var(--joy-palette-neutral-700)',       // increase contrast a bit
         },
-        // popup [white] > surface [50] > level1 [100] > level2 [200] > level3 [300] > body [white -> 400]
+        // popup [white] > surface [50] > level1 [100] > level2 [200] > level3 [300 -> unused] > body [white -> 300]
         background: {
-          body: 'var(--joy-palette-neutral-400, #9FA6AD)',  // background to stand back after all levels
+          // New
+          surface: 'var(--joy-palette-neutral-50, #FBFCFE)',
+          level1: 'var(--joy-palette-neutral-100, #F0F4F8)',
+          level2: 'var(--joy-palette-neutral-200, #DDE7EE)',
+          body: 'var(--joy-palette-neutral-300, #CDD7E1)',
+          // Former
+          // body: 'var(--joy-palette-neutral-400, #9FA6AD)',
         },
       },
     },
@@ -61,10 +68,12 @@ export const appTheme = extendTheme({
           // tertiary: 'var(--joy-palette-neutral-400, #9FA6AD)',
         },
         background: {
-          surface: 'var(--joy-palette-neutral-900, #131318)',
-          level1: 'var(--joy-palette-common-black, #09090D)',
-          level2: 'var(--joy-palette-neutral-800, #25252D)',
-          // popup: 'var(--joy-palette-common-black, #09090D)',
+          // New
+          surface: 'var(--joy-palette-neutral-800, #171A1C)',
+          level1: 'var(--joy-palette-neutral-900, #0B0D0E)',
+          level2: 'var(--joy-palette-neutral-800, #171A1C)',
+          body: 'var(--joy-palette-common-black, #000)',
+          // Former: surface [900] > level 1 [black], level 2 [800] > body [black]
         },
       },
     },
@@ -133,6 +142,10 @@ export const appTheme = extendTheme({
   },
 });
 
+export const themeBgApp = 'background.level1';
+export const themeBgAppDarker = 'background.level2';
+export const themeBgAppChatComposer = 'background.surface';
+
 export const bodyFontClassName = inter.className;
 export const themeBreakpoints = appTheme.breakpoints.values;
 

src/common/components/CloseableMenu.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { KeyboardEvent } from 'react';
 
 import { ClickAwayListener, Popper, PopperPlacementType } from '@mui/base';
-import { MenuList, styled, VariantProp } from '@mui/joy';
+import { MenuList, styled } from '@mui/joy';
 import { SxProps } from '@mui/joy/styles/types';
 
 
@@ -23,7 +22,8 @@ const Popup = styled(Popper)({
  */
 export function CloseableMenu(props: {
   open: boolean, anchorEl: HTMLElement | null, onClose: () => void,
-  variant?: VariantProp,
+  dense?: boolean,
+  // variant?: VariantProp,
   // color?: ColorPaletteProp,
   // size?: 'sm' | 'md' | 'lg',
   placement?: PopperPlacementType,
@@ -36,12 +36,12 @@ export function CloseableMenu(props: {
   children?: React.ReactNode,
 }) {
 
-  const handleClose = (event: MouseEvent | TouchEvent | KeyboardEvent) => {
+  const handleClose = (event: MouseEvent | TouchEvent | React.KeyboardEvent) => {
     event.stopPropagation();
     props.onClose();
   };
 
-  const handleListKeyDown = (event: KeyboardEvent) => {
+  const handleListKeyDown = (event: React.KeyboardEvent) => {
     if (event.key === 'Tab') {
       handleClose(event);
     } else if (event.key === 'Escape') {
@@ -71,13 +71,12 @@ export function CloseableMenu(props: {
     >
       <ClickAwayListener onClickAway={handleClose}>
         <MenuList
-          variant={props.variant}
-          // color={props.color}
+          // variant={props.variant} color={props.color}
           onKeyDown={handleListKeyDown}
           sx={{
             '--Icon-fontSize': 'var(--joy-fontSize-xl2)',
-            '--ListItem-minHeight': '3rem',
-            '--ListItemDecorator-size': '2.75rem',
+            '--ListItem-minHeight': props.dense ? '2.5rem' : '3rem',
+            '--ListItemDecorator-size': '2.75rem', // icon width
             backgroundColor: 'background.popup',
             boxShadow: 'md',
             ...(props.maxHeightGapPx !== undefined ? { maxHeight: `calc(100dvh - ${props.maxHeightGapPx}px)`, overflowY: 'auto' } : {}),

src/common/components/ConfirmationModal.tsx

@@ -1,39 +1,41 @@
 import * as React from 'react';
 
-import { Box, Button, Divider, Modal, ModalDialog, Typography } from '@mui/joy';
+import { Box, Button, Divider, Typography } from '@mui/joy';
 import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
 
+import { GoodModal } from '~/common/components/GoodModal';
+
 
 /**
  * A confirmation dialog (Joy Modal)
  * Pass the question and the positive answer, and get called when it's time to close the dialog, or when the positive action is taken
  */
 export function ConfirmationModal(props: {
-  open: boolean, onClose: () => void, onPositive: () => void,
+  open?: boolean, onClose: () => void, onPositive: () => void,
   title?: string | React.JSX.Element,
   confirmationText: string | React.JSX.Element,
   positiveActionText: string
 }) {
   return (
-    <Modal open={props.open} onClose={props.onClose}>
-      <ModalDialog variant='outlined' color='neutral'>
-        <Typography component='h2' startDecorator={<WarningRoundedIcon />}>
-          {props.title || 'Confirmation'}
-        </Typography>
-        {/*<ModalClose/>*/}
-        <Divider sx={{ my: 2 }} />
-        <Typography level='body-md'>
-          {props.confirmationText}
-        </Typography>
-        <Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end', mt: 2 }}>
-          <Button variant='plain' color='neutral' onClick={props.onClose}>
-            Cancel
-          </Button>
-          <Button variant='solid' color='danger' onClick={props.onPositive} sx={{ lineHeight: '1.5em' }}>
-            {props.positiveActionText}
-          </Button>
-        </Box>
-      </ModalDialog>
-    </Modal>
+    <GoodModal
+      open={props.open === undefined ? true : props.open}
+      title={props.title || 'Confirmation'}
+      titleStartDecorator={<WarningRoundedIcon sx={{ color: 'danger.solidBg' }} />}
+      onClose={props.onClose}
+      hideBottomClose
+    >
+      <Divider />
+      <Typography level='body-md'>
+        {props.confirmationText}
+      </Typography>
+      <Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end', mt: 2 }}>
+        <Button autoFocus variant='plain' color='neutral' onClick={props.onClose}>
+          Cancel
+        </Button>
+        <Button variant='solid' color='danger' onClick={props.onPositive} sx={{ lineHeight: '1.5em' }}>
+          {props.positiveActionText}
+        </Button>
+      </Box>
+    </GoodModal>
   );
 }

src/common/components/GoodDropdown.tsx

@@ -9,13 +9,14 @@ export type DropdownItems = Record<string, {
   title: string,
   symbol?: string,
   type?: 'separator'
+  icon?: React.ReactNode,
 }>;
 
 
 /**
  * A Select component that blends-in nicely (cleaner, easier to the eyes)
  */
-export function AppBarDropdown<TValue extends string>(props: {
+export function GoodDropdown<TValue extends string>(props: {
   items: DropdownItems,
   prependOption?: React.JSX.Element,
   appendOption?: React.JSX.Element,
@@ -71,20 +72,25 @@ export function AppBarDropdown<TValue extends string>(props: {
     {!!props.prependOption && Object.keys(props.items).length >= 1 && <Divider />}
 
     <Box sx={{ overflowY: 'auto' }}>
-      {Object.keys(props.items).map((key: string, idx: number) => <React.Fragment key={'key-' + idx}>
-        {props.items[key].type === 'separator'
-          ? <ListDivider />
-          : <Option value={key} sx={{ whiteSpace: 'nowrap' }}>
-            {props.showSymbols && <ListItemDecorator sx={{ fontSize: 'xl' }}>{props.items[key]?.symbol + ' '}</ListItemDecorator>}
-            {props.items[key].title}
+      {Object.keys(props.items).map((key: string, idx: number) => {
+        const item = props.items[key];
+
+        if (item.type === 'separator')
+          return <ListDivider key={'key-' + idx} />;
+
+        return (
+          <Option key={'key-' + idx} value={key} sx={{ whiteSpace: 'nowrap' }}>
+            {props.showSymbols && <ListItemDecorator sx={{ fontSize: 'xl' }}>{item?.symbol + ' '}</ListItemDecorator>}
+            {props.showSymbols && !!item.icon && <ListItemDecorator>{item?.icon}</ListItemDecorator>}
+            {item.title}
             {/*{key === props.value && (*/}
             {/*  <IconButton variant='soft' onClick={() => alert('aa')} sx={{ ml: 'auto' }}>*/}
             {/*    <SettingsIcon color='success' />*/}
             {/*  </IconButton>*/}
             {/*)}*/}
           </Option>
-        }
-      </React.Fragment>)}
+        );
+      })}
     </Box>
 
     {!!props.appendOption && Object.keys(props.items).length >= 1 && <ListDivider />}

src/common/components/GoodModal.tsx

@@ -9,17 +9,21 @@ import { SxProps } from '@mui/joy/styles/types';
  */
 export function GoodModal(props: {
   title?: string | React.JSX.Element,
-  strongerTitle?: boolean, noTitleBar?: boolean,
+  titleStartDecorator?: React.JSX.Element,
+  strongerTitle?: boolean,
+  noTitleBar?: boolean,
   dividers?: boolean,
   open: boolean,
   onClose?: () => void,
+  hideBottomClose?: boolean,
   startButton?: React.JSX.Element,
   sx?: SxProps,
   children: React.ReactNode,
 }) {
+  const showBottomClose = !!props.onClose && props.hideBottomClose !== true;
   return (
     <Modal open={props.open} onClose={props.onClose}>
-      <ModalOverflow>
+      <ModalOverflow sx={{p:1}}>
         <ModalDialog
           sx={{
             minWidth: { xs: 360, sm: 500, md: 600, lg: 700 },
@@ -29,7 +33,7 @@ export function GoodModal(props: {
           }}>
 
           {!props.noTitleBar && <Box sx={{ mb: -1, display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
-            <Typography level={props.strongerTitle !== true ? 'title-md' : 'title-lg'}>
+            <Typography level={props.strongerTitle !== true ? 'title-md' : 'title-lg'} startDecorator={props.titleStartDecorator}>
               {props.title || ''}
             </Typography>
             {!!props.onClose && <ModalClose sx={{ position: 'static', mr: -1 }} />}
@@ -41,9 +45,9 @@ export function GoodModal(props: {
 
           {props.dividers === true && <Divider />}
 
-          {(!!props.startButton || !!props.onClose) && <Box sx={{ mt: 'auto', display: 'flex', flexWrap: 'wrap', gap: 1, justifyContent: 'space-between' }}>
+          {(!!props.startButton || showBottomClose) && <Box sx={{ mt: 'auto', display: 'flex', flexWrap: 'wrap', gap: 1, justifyContent: 'space-between' }}>
             {props.startButton}
-            {!!props.onClose && <Button variant='solid' color='neutral' onClick={props.onClose} sx={{ ml: 'auto', minWidth: 100 }}>
+            {showBottomClose && <Button variant='solid' color='neutral' onClick={props.onClose} sx={{ ml: 'auto', minWidth: 100 }}>
               Close
             </Button>}
           </Box>}