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

@@ -7,20 +7,24 @@ assignees: enricoros
 
 ---
 
-Release checklist:
+## Release checklist:
 
+- [x] Create a new [Release Issue](https://github.com/enricoros/big-AGI/issues/new?assignees=enricoros&projects=enricoros/4&template=maintainers-release.md&title=Release+1.2.3)
+  - [ ] Replace 1.1.0 with the _former_ release, and _1.2.3_ with THIS
 - [ ] Update the [Roadmap](https://github.com/users/enricoros/projects/4/views/2) calling out shipped features
 - [ ] Create and update a [Milestone](https://github.com/enricoros/big-agi/milestones) for the release
   - [ ] Assign this task
   - [ ] Assign all the shipped roadmap Issues
   - [ ] Assign the relevant [recently closed Isssues](https://github.com/enricoros/big-agi/issues?q=is%3Aclosed+sort%3Aupdated-desc)
 - Code changes:
-  - [ ] Create a release branch 'release-x.y.z', and commit:
+  - [ ] Create a release branch 'release-x.y.z': `git checkout -b release-1.2.3`
+  - [ ] Create a temporary tag `git tag v1.2.3 && git push opensource --tags`
+  - [ ] Create a [New Draft GitHub Release](https://github.com/enricoros/big-agi/releases/new), and generate the automated changelog (for new contributors)
   - [ ] Update the release version in package.json, and `npm i`
-  - [ ] Update in-app News [src/apps/news/news.data.tsx](src/apps/news/news.data.tsx)
+  - [ ] Update 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
@@ -31,3 +35,66 @@ Release checklist:
 - Announce:
   - [ ] Discord announcement
   - [ ] Twitter announcement
+
+### Links
+
+- Milestone: https://github.com/enricoros/big-AGI/milestone/X
+- GitHub release: https://github.com/enricoros/big-AGI/releases/tag/vX.Y.Z
+- Former release task: https://github.com/enricoros/big-AGI/issues/XXX
+
+## 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 (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, 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
+
+```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
+
+```markdown
+Can you generate my 1.2.3 big-AGI discord announcement from the GitHub Release announcement, and the in-app News?
+```

.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,30 +11,42 @@ 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)
 
-## 🗺️ Explore the Roadmap
+## 👉 [roadmap](https://github.com/users/enricoros/projects/4/views/2)
 
-The development of big-AGI is an open book. Our **[public roadmap](https://github.com/users/enricoros/projects/4/views/2)** is
-live, providing a detailed look at the current and future development of the application.
+big-AGI is an open book; our **[public roadmap](https://github.com/users/enricoros/projects/4/views/2)**
+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.5.0 🌟
+### What's New in 1.9.0 · Dec 28, 2023 · Creative Horizons
 
-- **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
+- **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.
 
-Check out the [big-AGI open roadmap](https://github.com/users/enricoros/projects/4/views/2), or
-the [past releases changelog](docs/changelog.md).
+### What's New in 1.8.0 · Dec 20, 2023
+
+- **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... ?
+
+> [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 👊
 
@@ -72,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
@@ -81,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
 
@@ -105,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
 
@@ -115,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';

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

@@ -1,6 +1,6 @@
 import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
 
-import { appRouterEdge } from '~/server/api/trpc.router';
+import { appRouterEdge } from '~/server/api/trpc.router-edge';
 import { createTRPCFetchContext } from '~/server/api/trpc.server';
 
 const handlerEdgeRoutes = (req: Request) =>

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

@@ -1,6 +1,6 @@
 import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
 
-import { appRouterNode } from '~/server/api/trpc.router';
+import { appRouterNode } from '~/server/api/trpc.router-node';
 import { createTRPCFetchContext } from '~/server/api/trpc.server';
 
 const handlerNodeRoutes = (req: Request) =>

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

@@ -2,10 +2,58 @@
 
 This is a high-level changelog. Calls out some of the high level features batched
 by release.
- - For the live roadmap, please see [the GitHub project](https://github.com/users/enricoros/projects/4/views/2)
 
+- For the live roadmap, please see [the GitHub project](https://github.com/users/enricoros/projects/4/views/2)
 
-### ✨ What's New in 1.5.0 👊 - Nov 19, 2023
+### 1.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)
+
+### 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
+- **Keyboard Navigation**: Swift chat navigation with new shortcuts (e.g. ctrl+alt+left/right)
+- **Performance Boost**: Faster rendering for a smoother experience
+- **UI Enhancements**: Refined interface based on user feedback
+- **New Features**: Anthropic Claude 2.1, `/help` command, and Flattener tool
+- **For Developers**: Code quality upgrades and snackbar notifications
+
+### What's New in 1.5.0 - Nov 19, 2023 · Loaded
 
 - **Continued Voice**: Engage with hands-free interaction for a seamless experience
 - **Visualization Tool**: Create data representations with our new visualization capabilities
@@ -17,6 +65,17 @@ by release.
 - **Cloudflare OpenAI API Gateway**: Integrate with Cloudflare for a robust API gateway
 - **Helicone for Anthropic**: Utilize Helicone's tools for Anthropic models
 
+For Developers:
+
+- Runtime Server-Side configuration:  https://github.com/enricoros/big-agi/issues/189. Env vars are
+  not required to be set at build time anymore. The frontend will roundtrip to the backend at the
+  first request to get the configuration. See
+  https://github.com/enricoros/big-agi/blob/main/src/modules/backend/backend.router.ts.
+- CloudFlare developers: please change the deployment command to
+  `rm app/api/trpc-node/[trpc]/route.ts && npx @cloudflare/next-on-pages@1`,
+  as we transitioned to the App router in NextJS 14. The documentation in
+  [docs/deploy-cloudflare.md](../docs/deploy-cloudflare.md) is updated
+
 ### 1.4.0: Sept/Oct: scale OUT
 
 - **Expanded Model Support**: Azure and [OpenRouter](https://openrouter.ai/docs#models) models, including gpt-4-32k
@@ -32,7 +91,7 @@ by release.
 - **Backup/Restore** - save chats, and restore them later
 - **[Local model support with Oobabooga server](../docs/config-local-oobabooga)** - run your own LLMs!
 - **Flatten conversations** - conversations summarizer with 4 modes
-- **Fork conversations** - create a new chat, to experiment with different endings
+- **Fork conversations** - create a new chat, to try with different endings
 - New commands: /s to add a System message, and /a for an Assistant message
 - New Chat modes: Write-only - just appends the message, without assistant response
 - Fix STOP generation - in sync with the Vercel team to fix a long-standing NextJS issue

docs/config-browse.md

@@ -0,0 +1,87 @@
+# Browse Functionality in big-AGI 🌐
+
+Allows users to load web pages across various components of `big-AGI`. This feature is supported by Puppeteer-based
+browsing services, which are the most common way to render web pages in a headless environment.
+
+Once configured, the Browsing service provides 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:
+
+| Service                                                                              | Working | Type        | Location       | Special Features                            |
+|--------------------------------------------------------------------------------------|---------|-------------|----------------|---------------------------------------------|
+| [BrightData Scraping Browser](https://brightdata.com/products/scraping-browser)      | Yes     | Proprietary | Cloud          | Advanced scraping tools, global IP pool     |
+| [Cloudflare Browser Rendering](https://developers.cloudflare.com/browser-rendering/) | ?       | Proprietary | Cloud          | Integrated CDN, optimized browser rendering |
+| ⬇️ [Browserless 2.0](#-browserless-20)                                               | Okay    | OpenSource  | Local (Docker) | Parallelism, debug viewer, advanced APIs    |
+| ⬇️ [Your Chrome Browser (ALPHA)](#-your-own-chrome-browser)                          | Alpha   | Proprietary | Local (Chrome) | Personal, experimental use (ALPHA!)         |
+| other Puppeteer-based WSS Services                                                   | ?       | Varied      | Cloud/Local    | Service-specific features                   |
+
+## Configuration
+
+1. **Procure an Endpoint**
+   - Ensure that your browsing service is running (remote or local) and has a WebSocket endpoint available
+   - Write down the address: `wss://${auth}@{some host}:{port}`, or ws:// for local services on your machine
+
+2. **Configure `big-AGI`**
+   - navigate to **Preferences** > **Tools** > **Browse**
+   - Enter the 'wss://...' connection string provided by your browsing service
+
+3. **Enable Features**: Choose which browse-related features you want to enable:
+   - **Attach URLs**: Automatically load and attach a page when pasting a URL into the composer
+   - **/browse Command**: Use the `/browse` command in the chat to load a web page
+   - **ReAct**: Enable the `loadURL()` function in ReAct for advanced interactions
+
+### 🌐 Browserless 2.0
+
+[Browserless 2.0](https://github.com/browserless/browserless) is a Docker-based service that provides a headless
+browsing experience compatible with `big-AGI`. An open-source solution that simplifies web automation tasks,
+in a scalable manner.
+
+Launch Browserless with:
+
+```bash
+docker run -p 9222:3000 browserless/chrome:latest
+```
+
+Now you can use the following connection string in `big-AGI`: `ws://127.0.0.1:9222`.
+You can also browse to [http://127.0.0.1:9222](http://127.0.0.1:9222) to see the Browserless debug viewer
+and configure some options.
+
+Note: if you are using `docker-compose`, please see the
+[docker/docker-compose-browserless.yaml](docker/docker-compose-browserless.yaml) file for an example
+on how to run `big-AGI` and Browserless simultaneously in a single application.
+
+### 🌐 Your own Chrome browser
+
+***EXPERIMENTAL - UNTESTED*** - You can use your own Chrome browser as a browsing service, by configuring it to expose
+a WebSocket endpoint.
+
+- close all the Chrome instances (on Windows, check the Task Manager if still running)
+- start Chrome with the following command line options (on Windows, you can edit the shortcut properties):
+  - `--remote-debugging-port=9222`
+- go to http://localhost:9222/json/version and copy the `webSocketDebuggerUrl` value
+  - it should be something like: `ws://localhost:9222/...`
+- paste the value into the Endpoint configuration (see point 2 in the configuration)
+
+### Server-Side Configuration
+
+You can set the Puppeteer WebSocket endpoint (`PUPPETEER_WSS_ENDPOINT`) in the deployment before running it.
+This is useful for self-hosted instances or when you want to pre-configure the endpoint for all users, and will
+allow your to skip points 2 and 3 above.
+
+Always deploy your own user authentication, authorization and security solution. For this feature, the tRPC
+route that provides browsing service, shall be secured with a user authentication and authorization solution,
+to prevent unauthorized access to the browsing service.
+
+## Support
+
+If you encounter any issues or have questions about configuring the browse functionality, join our community on Discord for support and discussions.
+
+[![Official Discord](https://discordapp.com/api/guilds/1098796266906980422/widget.png?style=banner2)](https://discord.gg/MkH4qj2Jp9)
+
+---
+
+Enjoy the enhanced browsing experience within `big-AGI` and explore the web without ever leaving your chat!

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=
 
@@ -43,6 +41,15 @@ PRODIA_API_KEY=
 # Google Custom Search
 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
@@ -74,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                                                          |
 
@@ -93,19 +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 ...'                                                                               |
+| 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..
+  ],
+};

next.config.mjs

@@ -9,6 +9,11 @@ let nextConfig = {
   //   },
   // },
 
+  // [puppeteer] https://github.com/puppeteer/puppeteer/issues/11052
+  experimental: {
+    serverComponentsExternalPackages: ['puppeteer-core'],
+  },
+
   webpack: (config, _options) => {
     // @mui/joy: anything material gets redirected to Joy
     config.resolve.alias['@mui/material'] = '@mui/joy';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "big-agi",
-  "version": "1.5.0",
+  "version": "1.9.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -18,51 +18,55 @@
     "@emotion/react": "^11.11.1",
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.14.16",
-    "@mui/joy": "^5.0.0-beta.15",
-    "@next/bundle-analyzer": "^14.0.3",
-    "@prisma/client": "^5.6.0",
+    "@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",
-    "@trpc/client": "^10.43.3",
-    "@trpc/next": "^10.43.3",
-    "@trpc/react-query": "^10.43.3",
-    "@trpc/server": "^10.43.3",
+    "@tanstack/react-query": "~4.36.1",
+    "@trpc/client": "^10.44.1",
+    "@trpc/next": "^10.44.1",
+    "@trpc/react-query": "^10.44.1",
+    "@trpc/server": "^10.44.1",
     "@vercel/analytics": "^1.1.1",
     "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.0",
+    "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": {
-    "@types/node": "^20.9.2",
+    "@cloudflare/puppeteer": "^0.0.5",
+    "@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.37",
-    "@types/react-dom": "^18.2.15",
-    "@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.2.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,9 +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 { 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) =>
@@ -24,11 +27,17 @@ const MyApp = ({ Component, emotionCache, pageProps }: MyAppProps) =>
     </Head>
 
     <ProviderTheming emotionCache={emotionCache}>
-      <ProviderTRPCQueryClient>
-        <ProviderBackend>
-          <Component {...pageProps} />
-        </ProviderBackend>
-      </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/labs.tsx

@@ -1,14 +0,0 @@
-import * as React from 'react';
-
-import { AppLabs } from '../src/apps/labs/AppLabs';
-
-import { AppLayout } from '~/common/layout/AppLayout';
-
-
-export default function LabsPage() {
-  return (
-    <AppLayout suspendAutoModelsSetup>
-      <AppLabs />
-    </AppLayout>
-  );
-}

pages/link/callback_openrouter.tsx

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

@@ -4,11 +4,15 @@ import { useRouter } from 'next/router';
 import { Alert, Box, Button, Typography } from '@mui/joy';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 
-import { setComposerStartupText } from '../src/apps/chat/components/composer/store-composer';
+import { setComposerStartupText } from '../../src/apps/chat/components/composer/store-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';
 
 
 /**
@@ -28,13 +32,13 @@ function AppShareTarget() {
   const [isDownloading, setIsDownloading] = React.useState(false);
 
   // external state
-  const { query, push: routerPush, replace: routerReplace } = useRouter();
+  const { query } = useRouter();
 
 
   const queueComposerTextAndLaunchApp = React.useCallback((text: string) => {
     setComposerStartupText(text);
-    void routerReplace('/');
-  }, [routerReplace]);
+    void navigateToIndex(true);
+  }, []);
 
 
   // Detect the share Intent from the query
@@ -71,18 +75,15 @@ function AppShareTarget() {
   React.useEffect(() => {
     if (intentURL) {
       setIsDownloading(true);
-      // TEMP: until the Browse module is ready, just use the URL, verbatim
-      queueComposerTextAndLaunchApp(intentURL);
-      setIsDownloading(false);
-      /*callBrowseFetchSinglePage(intentURL)
-        .then(pageContent => {
-          if (pageContent)
-            queueComposerTextAndLaunchApp('\n\n```' + intentURL + '\n' + pageContent + '\n```\n');
+      callBrowseFetchPage(intentURL)
+        .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));*/
+        .finally(() => setIsDownloading(false));
     }
   }, [intentURL, queueComposerTextAndLaunchApp]);
 
@@ -90,7 +91,7 @@ function AppShareTarget() {
   return (
 
     <Box sx={{
-      backgroundColor: 'background.level2',
+      backgroundColor: themeBgApp,
       display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
       flexGrow: 1,
     }}>
@@ -110,7 +111,7 @@ function AppShareTarget() {
         </Alert>
         <Button
           variant='solid' color='danger'
-          onClick={() => routerPush('/')}
+          onClick={() => navigateToIndex()}
           endDecorator={<ArrowBackIcon />}
           sx={{ mt: 2 }}
         >
@@ -130,12 +131,8 @@ function AppShareTarget() {
 
 /**
  * This page will be invoked on mobile when sharing Text/URLs/Files from other APPs
- * Example URL: https://get.big-agi.com/launch?title=This+Title&text=https%3A%2F%2Fexample.com%2Fapp%2Fpath
+ * Example URL: https://localhost:3000/link/share_target?title=This+Title&text=https%3A%2F%2Fexample.com%2Fapp%2Fpath
  */
-export default function LaunchPage() {
-  return (
-    <AppLayout>
-      <AppShareTarget />
-    </AppLayout>
-  );
+export default 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 />);
 }

public/manifest.json

@@ -25,7 +25,7 @@
     }
   ],
   "share_target": {
-    "action": "/launch",
+    "action": "/link/share_target",
     "method": "GET",
     "enctype": "application/x-www-form-urlencoded",
     "params": {

src/apps/call/AppCall.tsx

@@ -10,9 +10,6 @@ import { CallUI } from './CallUI';
 import { CallWizard } from './CallWizard';
 
 
-export const APP_CALL_ENABLED = false;
-
-
 export function AppCall() {
   // external state
   const { query } = useRouter();

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

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

src/apps/chat/AppChat.tsx

@@ -1,67 +1,144 @@
 import * as React from 'react';
-import { shallow } from 'zustand/shallow';
+import ForkRightIcon from '@mui/icons-material/ForkRight';
+import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
 
-import { CmdRunProdia } from '~/modules/prodia/prodia.client';
+import { Box, useTheme } from '@mui/joy';
+
+import { CmdRunBrowse } from '~/modules/browse/browse.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 { useModelsStore } from '~/modules/llms/store-llms';
+import { speakText } from '~/modules/elevenlabs/elevenlabs.client';
+import { useBrowseStore } from '~/modules/browse/store-module-browsing';
+import { useChatLLM, useModelsStore } from '~/modules/llms/store-llms';
 
 import { ConfirmationModal } from '~/common/components/ConfirmationModal';
-import { createDMessage, DMessage, useChatStore } from '~/common/state/store-chats';
-import { useGlobalShortcut } from '~/common/components/useGlobalShortcut';
-import { useLayoutPluggable } from '~/common/layout/store-applayout';
+import { 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 { themeBgApp, themeBgAppChatComposer } from '~/common/app.theme';
+import { useOptimaLayout, usePluggableOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
+import { useUXLabsStore } from '~/common/state/store-ux-labs';
 
-import { ChatDrawerItems } from './components/applayout/ChatDrawerItems';
+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';
 import { ChatMessageList } from './components/ChatMessageList';
-import { ChatModeId } from './components/composer/store-composer';
-import { CmdAddRoleMessage, extractCommands } from './commands';
+import { CmdAddRoleMessage, CmdHelp, createCommandsHelpMessage, extractCommands } from './editors/commands';
 import { Composer } from './components/composer/Composer';
 import { Ephemerals } from './components/Ephemerals';
+import { ScrollToBottom } from './components/scroll-to-bottom/ScrollToBottom';
+import { ScrollToBottomButton } from './components/scroll-to-bottom/ScrollToBottomButton';
+import { usePanesManager } from './components/panes/usePanesManager';
 
-import { TradeConfig, TradeModal } from './trade/TradeModal';
 import { runAssistantUpdatingState } from './editors/chat-stream';
+import { runBrowseUpdatingState } from './editors/browse-load';
 import { runImageGenerationUpdatingState } from './editors/image-generate';
 import { runReActUpdatingState } from './editors/react-tangent';
 
 
-const SPECIAL_ID_ALL_CHATS = 'all-chats';
+/**
+ * Mode: how to treat the input from the Composer
+ */
+export type ChatModeId =
+  | 'generate-text'
+  | 'append-user'
+  | 'generate-image'
+  | 'generate-react';
 
 
+const SPECIAL_ID_WIPE_ALL: DConversationId = 'wipe-chats';
+
 export function AppChat() {
 
   // state
   const [isMessageSelectionMode, setIsMessageSelectionMode] = React.useState(false);
   const [diagramConfig, setDiagramConfig] = React.useState<DiagramConfig | null>(null);
   const [tradeConfig, setTradeConfig] = React.useState<TradeConfig | null>(null);
-  const [clearConfirmationId, setClearConfirmationId] = React.useState<string | null>(null);
-  const [deleteConfirmationId, setDeleteConfirmationId] = React.useState<string | null>(null);
-  const [flattenConversationId, setFlattenConversationId] = React.useState<string | null>(null);
+  const [clearConversationId, setClearConversationId] = React.useState<DConversationId | null>(null);
+  const [deleteConversationId, setDeleteConversationId] = React.useState<DConversationId | null>(null);
+  const [flattenConversationId, setFlattenConversationId] = React.useState<DConversationId | null>(null);
+  const showNextTitle = React.useRef(false);
   const composerTextAreaRef = React.useRef<HTMLTextAreaElement>(null);
 
   // external state
-  const { activeConversationId, isConversationEmpty, hasAnyContent, newConversation, duplicateConversation, deleteAllConversations, setMessages, systemPurposeId, setAutoTitle } = useChatStore(state => {
-    const conversation = state.conversations.find(conversation => conversation.id === state.activeConversationId);
-    const isConversationEmpty = conversation ? !conversation.messages.length : true;
-    const hasAnyContent = state.conversations.length > 1 || !isConversationEmpty;
-    return {
-      activeConversationId: state.activeConversationId,
-      isConversationEmpty,
-      hasAnyContent,
-      newConversation: state.createConversationOrSwitch,
-      duplicateConversation: state.duplicateConversation,
-      deleteAllConversations: state.deleteAllConversations,
-      setMessages: state.setMessages,
-      systemPurposeId: conversation?.systemPurposeId ?? null,
-      setAutoTitle: state.setAutoTitle,
-    };
-  }, shallow);
+  const theme = useTheme();
+
+  const { openLlmOptions } = useOptimaLayout();
+
+  const { chatLLM } = useChatLLM();
+
+  const {
+    chatPanes,
+    focusedConversationId,
+    navigateHistoryInFocusedPane,
+    openConversationInFocusedPane,
+    openConversationInSplitPane,
+    paneIndex,
+    duplicatePane,
+    removePane,
+    setFocusedPane,
+  } = usePanesManager();
+
+  const {
+    title: focusedChatTitle,
+    chatIdx: focusedChatNumber,
+    isChatEmpty: isFocusedChatEmpty,
+    areChatsEmpty,
+    newConversationId,
+    _remove_systemPurposeId: focusedSystemPurposeId,
+    prependNewConversation,
+    branchConversation,
+    deleteConversation,
+    wipeAllConversations,
+    setMessages,
+  } = useConversation(focusedConversationId);
+
+  const { mayWork: capabilityHasT2I } = useCapabilityTextToImage();
 
 
-  const handleExecuteConversation = async (chatModeId: ChatModeId, conversationId: string, history: DMessage[]) => {
+  // Window actions
+
+  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);
+  }, [openConversationInFocusedPane]);
+
+  const openSplitConversationId = React.useCallback((conversationId: DConversationId | null) => {
+    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;
+  }, [navigateHistoryInFocusedPane]);
+
+  React.useEffect(() => {
+    if (showNextTitle.current) {
+      showNextTitle.current = false;
+      const title = (focusedChatNumber >= 0 ? `#${focusedChatNumber + 1} · ` : '') + (focusedChatTitle || 'New Chat');
+      const id = addSnackbar({ key: 'focused-title', message: title, type: 'title' });
+      return () => removeSnackbar(id);
+    }
+  }, [focusedChatNumber, focusedChatTitle]);
+
+
+  // Execution
+
+  const _handleExecute = React.useCallback(async (chatModeId: ChatModeId, conversationId: DConversationId, history: DMessage[]) => {
     const { chatLLMId } = useModelsStore.getState();
     if (!chatModeId || !conversationId || !chatLLMId) return;
 
@@ -71,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);
         }
@@ -79,183 +156,345 @@ export function AppChat() {
           setMessages(conversationId, history);
           return await runReActUpdatingState(conversationId, prompt, chatLLMId);
         }
+        if (CmdRunBrowse.includes(command) && prompt?.trim() && useBrowseStore.getState().enableCommandBrowse) {
+          setMessages(conversationId, history);
+          return await runBrowseUpdatingState(conversationId, prompt);
+        }
         if (CmdAddRoleMessage.includes(command)) {
           lastMessage.role = command.startsWith('/s') ? 'system' : command.startsWith('/a') ? 'assistant' : 'user';
           lastMessage.sender = 'Bot';
           lastMessage.text = prompt;
           return setMessages(conversationId, history);
         }
+        if (CmdHelp.includes(command)) {
+          return setMessages(conversationId, [...history, createCommandsHelpMessage()]);
+        }
       }
     }
 
     // synchronous long-duration tasks, which update the state as they go
-    if (chatLLMId && systemPurposeId) {
+    if (chatLLMId && focusedSystemPurposeId) {
       switch (chatModeId) {
-        case 'immediate':
-          return await runAssistantUpdatingState(conversationId, history, chatLLMId, systemPurposeId);
-        case 'write-user':
+        case 'generate-text':
+          return await runAssistantUpdatingState(conversationId, history, chatLLMId, focusedSystemPurposeId);
+
+        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);
       }
     }
 
     // ISSUE: if we're here, it means we couldn't do the job, at least sync the history
     console.log('handleExecuteConversation: issue running', chatModeId, conversationId, lastMessage);
     setMessages(conversationId, history);
-  };
+  }, [focusedSystemPurposeId, setMessages]);
 
-  const _findConversation = (conversationId: string) =>
-    conversationId ? useChatStore.getState().conversations.find(c => c.id === conversationId) ?? null : null;
+  const handleComposerAction = (chatModeId: ChatModeId, conversationId: DConversationId, multiPartMessage: ComposerOutputMultiPart): boolean => {
 
-  const handleExecuteChatHistory = async (conversationId: string, history: DMessage[]) =>
-    await handleExecuteConversation('immediate', conversationId, history);
-
-  const handleDiagramFromText = async (diagramConfig: DiagramConfig | null) => setDiagramConfig(diagramConfig);
-
-  const handleImagineFromText = async (conversationId: string, messageText: string) => {
-    const conversation = _findConversation(conversationId);
-    if (conversation)
-      return await handleExecuteConversation('draw-imagine-plus', conversationId, [...conversation.messages, createDMessage('user', messageText)]);
-  };
-
-  const handleComposerNewMessage = async (chatModeId: ChatModeId, conversationId: string, userText: string) => {
-    const conversation = _findConversation(conversationId);
-    if (conversation)
-      return await handleExecuteConversation(chatModeId, conversationId, [...conversation.messages, createDMessage('user', userText)]);
-  };
-
-  const handleRegenerateAssistant = async () => {
-    const conversation = activeConversationId ? _findConversation(activeConversationId) : null;
-    if (conversation?.messages?.length) {
-      const lastMessage = conversation.messages[conversation.messages.length - 1];
-      if (lastMessage.role === 'assistant') {
-        const newMessages = [...conversation.messages];
-        newMessages.pop();
-        return await handleExecuteConversation('immediate', conversation.id, newMessages);
-      }
+    // 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 false;
+
+    // start execution (async)
+    void _handleExecute(chatModeId, conversationId, [
+      ...conversation.messages,
+      createDMessage('user', userText),
+    ]);
+    return true;
+  };
+
+  const handleConversationExecuteHistory = async (conversationId: DConversationId, history: DMessage[]) =>
+    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('generate-text', focusedConversation.id, lastMessage.role === 'assistant'
+        ? focusedConversation.messages.slice(0, -1)
+        : [...focusedConversation.messages],
+      );
+    }
+  }, [focusedConversationId, _handleExecute]);
+
+  const handleTextDiagram = async (diagramConfig: DiagramConfig | null) => setDiagramConfig(diagramConfig);
+
+  const handleTextImagine = async (conversationId: DConversationId, messageText: string) => {
+    const conversation = getConversation(conversationId);
+    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) => {
+    await speakText(text);
   };
-  useGlobalShortcut('r', true, true, false, handleRegenerateAssistant);
 
 
-  const handleImportConversation = () => setTradeConfig({ dir: 'import' });
+  // Chat actions
 
-  const handleExportConversation = (conversationId: string | null) => setTradeConfig({ dir: 'export', conversationId });
-
-  const handleFlattenConversation = (conversationId: string) => setFlattenConversationId(conversationId);
-
-
-  useGlobalShortcut('n', true, false, true, () => {
-    newConversation();
+  const handleConversationNew = React.useCallback(() => {
+    // activate an existing new conversation if present, or create another
+    setFocusedConversationId(newConversationId
+      ? newConversationId
+      : prependNewConversation(focusedSystemPurposeId ?? undefined),
+    );
     composerTextAreaRef.current?.focus();
-  });
+  }, [focusedSystemPurposeId, newConversationId, prependNewConversation, setFocusedConversationId]);
 
-  const handleCloneConversation = (conversationId: string) => duplicateConversation(conversationId);
-  useGlobalShortcut('f', true, false, true, () => isConversationEmpty || activeConversationId && handleCloneConversation(activeConversationId));
+  const handleConversationImportDialog = () => setTradeConfig({ dir: 'import' });
 
-  const handleClearConversation = (conversationId: string) => setClearConfirmationId(conversationId);
-  useGlobalShortcut('x', true, false, true, () => isConversationEmpty || setClearConfirmationId(activeConversationId));
+  const handleConversationExport = (conversationId: DConversationId | null) => setTradeConfig({ dir: 'export', conversationId });
 
-  const handleConfirmedClearConversation = () => {
-    if (clearConfirmationId) {
-      setMessages(clearConfirmationId, []);
-      setAutoTitle(clearConfirmationId, '');
-      setClearConfirmationId(null);
+  const handleConversationBranch = React.useCallback((conversationId: DConversationId, messageId: string | null): DConversationId | null => {
+    showNextTitle.current = true;
+    const branchedConversationId = branchConversation(conversationId, messageId);
+    addSnackbar({
+      key: 'branch-conversation',
+      message: 'Branch started.',
+      type: 'success',
+      overrides: {
+        autoHideDuration: 3000,
+        startDecorator: <ForkRightIcon />,
+      },
+    });
+    const branchInAltPanel = useUXLabsStore.getState().labsSplitBranching;
+    if (branchInAltPanel)
+      openSplitConversationId(branchedConversationId);
+    else
+      setFocusedConversationId(branchedConversationId);
+    return branchedConversationId;
+  }, [branchConversation, openSplitConversationId, setFocusedConversationId]);
+
+  const handleConversationFlatten = (conversationId: DConversationId) => setFlattenConversationId(conversationId);
+
+
+  const handleConfirmedClearConversation = React.useCallback(() => {
+    if (clearConversationId) {
+      setMessages(clearConversationId, []);
+      setClearConversationId(null);
     }
-  };
+  }, [clearConversationId, setMessages]);
+
+  const handleConversationClear = (conversationId: DConversationId) => setClearConversationId(conversationId);
 
-  const handleDeleteAllConversations = () => setDeleteConfirmationId(SPECIAL_ID_ALL_CHATS);
 
   const handleConfirmedDeleteConversation = () => {
-    if (deleteConfirmationId) {
-      if (deleteConfirmationId === SPECIAL_ID_ALL_CHATS) {
-        deleteAllConversations();
-      }// else
-      //  deleteConversation(deleteConfirmationId);
-      setDeleteConfirmationId(null);
+    if (deleteConversationId) {
+      let nextConversationId: DConversationId | null;
+      if (deleteConversationId === SPECIAL_ID_WIPE_ALL)
+        nextConversationId = wipeAllConversations(focusedSystemPurposeId ?? undefined);
+      else
+        nextConversationId = deleteConversation(deleteConversationId);
+      setFocusedConversationId(nextConversationId);
+      setDeleteConversationId(null);
     }
   };
-  useGlobalShortcut('d', true, false, true, () => isConversationEmpty || setDeleteConfirmationId(activeConversationId));
+
+  const handleConversationsDeleteAll = () => setDeleteConversationId(SPECIAL_ID_WIPE_ALL);
+
+  const handleConversationDelete = React.useCallback((conversationId: DConversationId, bypassConfirmation: boolean) => {
+    if (bypassConfirmation)
+      setFocusedConversationId(deleteConversation(conversationId));
+    else
+      setDeleteConversationId(conversationId);
+  }, [deleteConversation, setFocusedConversationId]);
+
+
+  // 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)],
+    ['x', true, false, true, () => isFocusedChatEmpty || focusedConversationId && handleConversationClear(focusedConversationId)],
+    ['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, handleOpenChatLlmOptions, isFocusedChatEmpty]);
+  useGlobalShortcuts(shortcuts);
 
 
   // Pluggable ApplicationBar components
 
   const centerItems = React.useMemo(() =>
-      <ChatDropdowns conversationId={activeConversationId} />,
-    [activeConversationId],
+      <ChatDropdowns
+        conversationId={focusedConversationId}
+        isSplitPanes={isSplitPane}
+        onToggleSplitPanes={toggleSplitPane}
+      />,
+    [focusedConversationId, isSplitPane, toggleSplitPane],
   );
 
   const drawerItems = React.useMemo(() =>
-      <ChatDrawerItems
-        conversationId={activeConversationId}
-        onImportConversation={handleImportConversation}
-        onDeleteAllConversations={handleDeleteAllConversations}
+      <ChatDrawerItemsMemo
+        activeConversationId={focusedConversationId}
+        disableNewButton={isFocusedChatEmpty}
+        onConversationActivate={setFocusedConversationId}
+        onConversationDelete={handleConversationDelete}
+        onConversationImportDialog={handleConversationImportDialog}
+        onConversationNew={handleConversationNew}
+        onConversationsDeleteAll={handleConversationsDeleteAll}
       />,
-    [activeConversationId],
+    [focusedConversationId, handleConversationDelete, handleConversationNew, isFocusedChatEmpty, setFocusedConversationId],
   );
 
   const menuItems = React.useMemo(() =>
       <ChatMenuItems
-        conversationId={activeConversationId} isConversationEmpty={isConversationEmpty} hasConversations={hasAnyContent}
-        isMessageSelectionMode={isMessageSelectionMode} setIsMessageSelectionMode={setIsMessageSelectionMode}
-        onClearConversation={handleClearConversation}
-        onDuplicateConversation={duplicateConversation}
-        onExportConversation={handleExportConversation}
-        onFlattenConversation={handleFlattenConversation}
+        conversationId={focusedConversationId}
+        hasConversations={!areChatsEmpty}
+        isConversationEmpty={isFocusedChatEmpty}
+        isMessageSelectionMode={isMessageSelectionMode}
+        setIsMessageSelectionMode={setIsMessageSelectionMode}
+        onConversationBranch={handleConversationBranch}
+        onConversationClear={handleConversationClear}
+        onConversationExport={handleConversationExport}
+        onConversationFlatten={handleConversationFlatten}
       />,
-    [activeConversationId, duplicateConversation, hasAnyContent, isConversationEmpty, isMessageSelectionMode],
+    [areChatsEmpty, focusedConversationId, handleConversationBranch, isFocusedChatEmpty, isMessageSelectionMode],
   );
 
-  useLayoutPluggable(centerItems, drawerItems, menuItems);
+  usePluggableOptimaLayout(drawerItems, centerItems, menuItems, 'AppChat');
 
   return <>
 
-    <ChatMessageList
-      conversationId={activeConversationId}
-      isMessageSelectionMode={isMessageSelectionMode} setIsMessageSelectionMode={setIsMessageSelectionMode}
-      onExecuteChatHistory={handleExecuteChatHistory}
-      onDiagramFromText={handleDiagramFromText}
-      onImagineFromText={handleImagineFromText}
-      sx={{
-        flexGrow: 1,
-        backgroundColor: 'background.level1',
-        overflowY: 'auto', // overflowY: 'hidden'
-        minHeight: 96,
-      }} />
+    <PanelGroup direction='horizontal'>
 
-    <Ephemerals
-      conversationId={activeConversationId}
-      sx={{
-        // flexGrow: 0.1,
-        flexShrink: 0.5,
-        overflowY: 'auto',
-        minHeight: 64,
-      }} />
+      {panesConversationIDs.map((_conversationId, idx, panels) => <React.Fragment key={`chat-pane-${idx}-${panels.length}-${_conversationId}`}>
+
+        <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={{
+              // allows the content to be scrolled (all browsers)
+              overflowY: 'auto',
+              // actually make sure this scrolls & fills
+              height: '100%',
+            }}
+          >
+
+            <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>
+        )}
+
+      </React.Fragment>)}
+
+    </PanelGroup>
 
     <Composer
-      conversationId={activeConversationId} messageId={null}
-      isDeveloperMode={systemPurposeId === '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 },
@@ -266,25 +505,31 @@ export function AppChat() {
     {!!diagramConfig && <DiagramsModal config={diagramConfig} onClose={() => setDiagramConfig(null)} />}
 
     {/* Flatten */}
-    {!!flattenConversationId && <FlattenerModal conversationId={flattenConversationId} onClose={() => setFlattenConversationId(null)} />}
+    {!!flattenConversationId && (
+      <FlattenerModal
+        conversationId={flattenConversationId}
+        onConversationBranch={handleConversationBranch}
+        onClose={() => setFlattenConversationId(null)}
+      />
+    )}
 
     {/* Import / Export  */}
-    {!!tradeConfig && <TradeModal config={tradeConfig} onClose={() => setTradeConfig(null)} />}
+    {!!tradeConfig && <TradeModal config={tradeConfig} onConversationActivate={setFocusedConversationId} onClose={() => setTradeConfig(null)} />}
 
 
     {/* [confirmation] Reset Conversation */}
-    {!!clearConfirmationId && <ConfirmationModal
-      open onClose={() => setClearConfirmationId(null)} onPositive={handleConfirmedClearConversation}
-      confirmationText={'Are you sure you want to discard all the messages?'} positiveActionText={'Clear conversation'}
+    {!!clearConversationId && <ConfirmationModal
+      open onClose={() => setClearConversationId(null)} onPositive={handleConfirmedClearConversation}
+      confirmationText={'Are you sure you want to discard all messages?'} positiveActionText={'Clear conversation'}
     />}
 
     {/* [confirmation] Delete All */}
-    {!!deleteConfirmationId && <ConfirmationModal
-      open onClose={() => setDeleteConfirmationId(null)} onPositive={handleConfirmedDeleteConversation}
-      confirmationText={deleteConfirmationId === SPECIAL_ID_ALL_CHATS
+    {!!deleteConversationId && <ConfirmationModal
+      open onClose={() => setDeleteConversationId(null)} onPositive={handleConfirmedDeleteConversation}
+      confirmationText={deleteConversationId === SPECIAL_ID_WIPE_ALL
         ? 'Are you absolutely sure you want to delete ALL conversations? This action cannot be undone.'
         : 'Are you sure you want to delete this conversation?'}
-      positiveActionText={deleteConfirmationId === SPECIAL_ID_ALL_CHATS
+      positiveActionText={deleteConversationId === SPECIAL_ID_WIPE_ALL
         ? 'Yes, delete all'
         : 'Delete conversation'}
     />}

src/apps/chat/components/ChatMessageList.tsx

@@ -4,31 +4,35 @@ 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 { speakText } from '~/modules/elevenlabs/elevenlabs.client';
-import { useChatLLM } from '~/modules/llms/store-llms';
+import type { DiagramConfig } from '~/modules/aifn/digrams/DiagramsModal';
 
-import { GlobalShortcut, useGlobalShortcut } from '~/common/components/useGlobalShortcut';
-import { createDMessage, DMessage, useChatStore } from '~/common/state/store-chats';
-import { openLayoutPreferences } from '~/common/layout/store-applayout';
-import { useCapabilityElevenLabs, useCapabilityProdia } from '~/common/components/useCapabilities';
+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 { useCapabilityElevenLabs } from '~/common/components/useCapabilities';
+import { useOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
 
-import { ChatMessage } from './message/ChatMessage';
+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';
 
 
 /**
  * A list of ChatMessages
  */
 export function ChatMessageList(props: {
-  conversationId: string | null,
+  conversationId: DConversationId | null,
+  capabilityHasT2I: boolean,
+  chatLLMContextTokens?: number,
   isMessageSelectionMode: boolean, setIsMessageSelectionMode: (isMessageSelectionMode: boolean) => void,
-  onExecuteChatHistory: (conversationId: string, history: DMessage[]) => void,
-  onDiagramFromText: (diagramConfig: DiagramConfig | null) => Promise<any>,
-  onImagineFromText: (conversationId: string, selectedText: string) => Promise<any>,
-  sx?: SxProps
+  onConversationBranch: (conversationId: DConversationId, messageId: string) => void,
+  onConversationExecuteHistory: (conversationId: DConversationId, history: DMessage[]) => void,
+  onTextDiagram: (diagramConfig: DiagramConfig | null) => Promise<any>,
+  onTextImagine: (conversationId: DConversationId, selectedText: string) => Promise<any>,
+  onTextSpeak: (selectedText: string) => Promise<any>,
+  sx?: SxProps,
 }) {
 
   // state
@@ -37,66 +41,82 @@ 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 { messages, editMessage, deleteMessage, historyTokenCount } = useChatStore(state => {
+  const { conversationMessages, historyTokenCount, editMessage, deleteMessage, setMessages } = useChatStore(state => {
     const conversation = state.conversations.find(conversation => conversation.id === props.conversationId);
     return {
-      messages: conversation ? conversation.messages : [],
-      editMessage: state.editMessage, deleteMessage: state.deleteMessage,
+      conversationMessages: conversation ? conversation.messages : [],
       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, capabilityHasT2I, onConversationBranch, onConversationExecuteHistory, onTextDiagram, onTextImagine, onTextSpeak } = props;
+
 
   // text actions
 
-  const handleAppendMessage = (text: string) =>
-    props.conversationId && props.onExecuteChatHistory(props.conversationId, [...messages, createDMessage('user', text)]);
-
-  const handleTextDiagram = async (messageId: string, text: string) => {
-    if (props.conversationId) {
-      await props.onDiagramFromText({ conversationId: props.conversationId, messageId, text });
-    } else
-      return Promise.reject('No conversation');
-  };
-
-  const handleTextImagine = async (text: string) => {
-    if (!isImaginable) {
-      openLayoutPreferences(2);
-    } else if (props.conversationId) {
-      setIsImagining(true);
-      await props.onImagineFromText(props.conversationId, text);
-      setIsImagining(false);
-    } else
-      return Promise.reject('No conversation');
-  };
-
-  const handleTextSpeak = async (text: string) => {
-    if (!isSpeakable) {
-      openLayoutPreferences(3);
-    } else {
-      setIsSpeaking(true);
-      await speakText(text);
-      setIsSpeaking(false);
-    }
-  };
+  const handleRunExample = (text: string) =>
+    conversationId && onConversationExecuteHistory(conversationId, [...conversationMessages, createDMessage('user', text)]);
 
 
   // message menu methods proxy
 
-  const handleMessageDelete = (messageId: string) =>
-    props.conversationId && deleteMessage(props.conversationId, messageId);
+  const handleConversationBranch = React.useCallback((messageId: string) => {
+    conversationId && onConversationBranch(conversationId, messageId);
+  }, [conversationId, onConversationBranch]);
 
-  const handleMessageEdit = (messageId: string, newText: string) =>
-    props.conversationId && editMessage(props.conversationId, messageId, { text: newText }, true);
+  const handleConversationRestartFrom = React.useCallback((messageId: string, offset: number) => {
+    const messages = getConversation(conversationId)?.messages;
+    if (messages) {
+      const truncatedHistory = messages.slice(0, messages.findIndex(m => m.id === messageId) + offset + 1);
+      conversationId && onConversationExecuteHistory(conversationId, truncatedHistory);
+    }
+  }, [conversationId, onConversationExecuteHistory]);
 
-  const handleMessageRestartFrom = (messageId: string, offset: number) => {
-    const truncatedHistory = messages.slice(0, messages.findIndex(m => m.id === messageId) + offset + 1);
-    props.conversationId && props.onExecuteChatHistory(props.conversationId, truncatedHistory);
-  };
+  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]);
+
+  const handleMessageEdit = React.useCallback((messageId: string, newText: string) => {
+    conversationId && editMessage(conversationId, messageId, { text: newText }, true);
+  }, [conversationId, editMessage]);
+
+  const handleTextDiagram = React.useCallback(async (messageId: string, text: string) => {
+    conversationId && await onTextDiagram({ conversationId: conversationId, messageId, text });
+  }, [conversationId, onTextDiagram]);
+
+  const handleTextImagine = React.useCallback(async (text: string) => {
+    if (!capabilityHasT2I)
+      return openPreferences(2);
+    if (conversationId) {
+      setIsImagining(true);
+      await onTextImagine(conversationId, text);
+      setIsImagining(false);
+    }
+  }, [capabilityHasT2I, conversationId, onTextImagine, openPreferences]);
+
+  const handleTextSpeak = React.useCallback(async (text: string) => {
+    if (!isSpeakable)
+      return openPreferences(3);
+    setIsSpeaking(true);
+    await onTextSpeak(text);
+    setIsSpeaking(false);
+  }, [isSpeakable, onTextSpeak, openPreferences]);
 
 
   // operate on the local selection set
@@ -104,7 +124,7 @@ export function ChatMessageList(props: {
   const handleSelectAll = (selected: boolean) => {
     const newSelected = new Set<string>();
     if (selected)
-      for (const message of messages)
+      for (const message of conversationMessages)
         newSelected.add(message.id);
     setSelectedMessages(newSelected);
   };
@@ -116,13 +136,13 @@ export function ChatMessageList(props: {
   };
 
   const handleSelectionDelete = () => {
-    if (props.conversationId)
+    if (conversationId)
       for (const selectedMessage of selectedMessages)
-        deleteMessage(props.conversationId, selectedMessage);
+        deleteMessage(conversationId, selectedMessage);
     setSelectedMessages(new Set());
   };
 
-  useGlobalShortcut(props.isMessageSelectionMode && GlobalShortcut.Esc, false, false, false, () => {
+  useGlobalShortcut(props.isMessageSelectionMode && ShortcutKeyName.Esc, false, false, false, () => {
     props.setIsMessageSelectionMode(false);
   });
 
@@ -130,7 +150,7 @@ export function ChatMessageList(props: {
   // text-diff functionality, find the messages to diff with
 
   const { diffMessage, diffText } = React.useMemo(() => {
-    const [msgB, msgA] = messages.filter(m => m.role === 'assistant').reverse();
+    const [msgB, msgA] = conversationMessages.filter(m => m.role === 'assistant').reverse();
     if (msgB?.text && msgA?.text && !msgB?.typing) {
       const textA = msgA.text, textB = msgB.text;
       const lenA = textA.length, lenB = textB.length;
@@ -138,64 +158,44 @@ export function ChatMessageList(props: {
         return { diffMessage: msgB, diffText: textA };
     }
     return { diffMessage: undefined, diffText: undefined };
-  }, [messages]);
+  }, [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 = messages
-    .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
+  const filteredMessages = conversationMessages
+    .filter(m => m.role !== 'system' || showSystemMessages); // hide the System message if the user choses to
+
 
-  // when there are no messages, show the purpose selector
   if (!filteredMessages.length)
-    return props.conversationId ? (
-      <Box sx={props.sx || {}}>
-        <PersonaSelector conversationId={props.conversationId} runExample={handleAppendMessage} />
+    return (
+      <Box sx={{ ...props.sx }}>
+        {conversationId
+          ? <PersonaSelector conversationId={conversationId} runExample={handleRunExample} />
+          : <InlineError severity='info' error='Select a conversation' sx={{ m: 2 }} />}
       </Box>
-    ) : null;
+    );
 
   return (
     <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',
+      // marginBottom: '-1px',
     }}>
 
-      {filteredMessages.map((message, idx) =>
-        props.isMessageSelectionMode ? (
-
-          <CleanerMessage
-            key={'sel-' + message.id}
-            message={message}
-            isBottom={idx === 0} remainingTokens={(chatLLM ? chatLLM.contextTokens : 0) - historyTokenCount}
-            selected={selectedMessages.has(message.id)} onToggleSelected={handleSelectMessage}
-          />
-
-        ) : (
-
-          <ChatMessage
-            key={'msg-' + message.id}
-            message={message}
-            diffPreviousText={message === diffMessage ? diffText : undefined}
-            isBottom={idx === 0}
-            isImagining={isImagining} isSpeaking={isSpeaking}
-            onMessageDelete={() => handleMessageDelete(message.id)}
-            onMessageEdit={newText => handleMessageEdit(message.id, newText)}
-            onMessageRunFrom={(offset: number) => handleMessageRestartFrom(message.id, offset)}
-            onTextDiagram={(text: string) => handleTextDiagram(message.id, text)}
-            onTextImagine={handleTextImagine} onTextSpeak={handleTextSpeak}
-          />
-
-        ),
-      )}
-
-      {/* 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}
@@ -203,6 +203,37 @@ export function ChatMessageList(props: {
         />
       )}
 
+      {filteredMessages.map((message, idx, { length: count }) =>
+        props.isMessageSelectionMode ? (
+
+          <CleanerMessage
+            key={'sel-' + message.id}
+            message={message}
+            remainingTokens={(props.chatLLMContextTokens || 0) - historyTokenCount}
+            selected={selectedMessages.has(message.id)} onToggleSelected={handleSelectMessage}
+          />
+
+        ) : (
+
+          <ChatMessageMemo
+            key={'msg-' + message.id}
+            message={message}
+            diffPreviousText={message === diffMessage ? diffText : undefined}
+            isBottom={idx === count - 1}
+            isImagining={isImagining} isSpeaking={isSpeaking}
+            onConversationBranch={handleConversationBranch}
+            onConversationRestartFrom={handleConversationRestartFrom}
+            onConversationTruncate={handleConversationTruncate}
+            onMessageDelete={handleMessageDelete}
+            onMessageEdit={handleMessageEdit}
+            onTextDiagram={handleTextDiagram}
+            onTextImagine={handleTextImagine}
+            onTextSpeak={handleTextSpeak}
+          />
+
+        ),
+      )}
+
     </List>
   );
 }

src/apps/chat/components/Ephemerals.tsx

@@ -5,7 +5,7 @@ import { Box, Grid, IconButton, Sheet, Stack, styled, Typography, useTheme } fro
 import { SxProps } from '@mui/joy/styles/types';
 import CloseIcon from '@mui/icons-material/Close';
 
-import { DEphemeral, useChatStore } from '~/common/state/store-chats';
+import { DConversationId, DEphemeral, useChatStore } from '~/common/state/store-chats';
 
 
 const StateLine = styled(Typography)(({ theme }) => ({
@@ -124,7 +124,7 @@ function EphemeralItem({ conversationId, ephemeral }: { conversationId: string,
 }
 
 
-export function Ephemerals(props: { conversationId: string | null, sx?: SxProps }) {
+export function Ephemerals(props: { conversationId: DConversationId | null, sx?: SxProps }) {
   // global state
   const theme = useTheme();
   const ephemerals = useChatStore(state => {

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

@@ -6,63 +6,65 @@ import AddIcon from '@mui/icons-material/Add';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 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 { useChatStore } from '~/common/state/store-chats';
+import { useOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
 import { useUIPreferencesStore } from '~/common/state/store-ui';
+import { useUXLabsStore } from '~/common/state/store-ux-labs';
 
-import { ConversationItem } from './ConversationItem';
+import { ChatNavigationItemMemo } from './ChatNavigationItem';
 
 
-type ListGrouping = 'off' | 'persona';
+// type ListGrouping = 'off' | 'persona';
 
-export function ChatDrawerItems(props: {
-  conversationId: string | null
-  onDeleteAllConversations: () => void,
-  onImportConversation: () => void,
+export const ChatDrawerItemsMemo = React.memo(ChatDrawerItems);
+
+function ChatDrawerItems(props: {
+  activeConversationId: DConversationId | null,
+  disableNewButton: boolean,
+  onConversationActivate: (conversationId: DConversationId) => void,
+  onConversationDelete: (conversationId: DConversationId, bypassConfirmation: boolean) => void,
+  onConversationImportDialog: () => void,
+  onConversationNew: () => void,
+  onConversationsDeleteAll: () => void,
 }) {
 
   // local state
-  const [grouping] = React.useState<ListGrouping>('off');
+  const { onConversationDelete, onConversationNew, onConversationActivate } = props;
+  // const [grouping] = React.useState<ListGrouping>('off');
 
   // external state
-  const { conversationIDs, topNewConversationId, maxChatMessages, setActiveConversationId, createConversationOrSwitch, deleteConversation } = useChatStore(state => ({
-    conversationIDs: state.conversations.map(conversation => conversation.id),
-    topNewConversationId: state.conversations.length ? state.conversations[0].messages.length === 0 ? state.conversations[0].id : null : null,
-    maxChatMessages: state.conversations.reduce((longest, conversation) => Math.max(longest, conversation.messages.length), 0),
-    setActiveConversationId: state.setActiveConversationId,
-    createConversationOrSwitch: state.createConversationOrSwitch,
-    deleteConversation: state.deleteConversation,
-  }), shallow);
-  const { experimentalLabs, showSymbols } = useUIPreferencesStore(state => ({
-    experimentalLabs: state.experimentalLabs,
-    showSymbols: state.zenMode !== 'cleaner',
-  }), shallow);
+  const { closeAppDrawer } = useOptimaLayout();
+  const conversations = useChatStore(state => state.conversations, shallow);
+  const showSymbols = useUIPreferencesStore(state => state.zenMode !== 'cleaner');
+  const labsEnhancedUI = useUXLabsStore(state => state.labsEnhancedUI);
 
-
-  const totalConversations = conversationIDs.length;
+  // derived state
+  const maxChatMessages = conversations.reduce((longest, _c) => Math.max(longest, _c.messages.length), 1);
+  const totalConversations = conversations.length;
   const hasChats = totalConversations > 0;
   const singleChat = totalConversations === 1;
   const softMaxReached = totalConversations >= 50;
 
-  const handleNew = () => {
-    createConversationOrSwitch();
-    closeLayoutDrawer();
-  };
 
-  const handleConversationActivate = React.useCallback((conversationId: string, closeMenu: boolean) => {
-    setActiveConversationId(conversationId);
+  const handleButtonNew = React.useCallback(() => {
+    onConversationNew();
+    closeAppDrawer();
+  }, [closeAppDrawer, onConversationNew]);
+
+  const handleConversationActivate = React.useCallback((conversationId: DConversationId, closeMenu: boolean) => {
+    onConversationActivate(conversationId);
     if (closeMenu)
-      closeLayoutDrawer();
-  }, [setActiveConversationId]);
+      closeAppDrawer();
+  }, [closeAppDrawer, onConversationActivate]);
+
+  const handleConversationDelete = React.useCallback((conversationId: DConversationId) => {
+    !singleChat && conversationId && onConversationDelete(conversationId, true);
+  }, [onConversationDelete, singleChat]);
 
-  const handleConversationDelete = React.useCallback((conversationId: string) => {
-    if (!singleChat && conversationId)
-      deleteConversation(conversationId);
-  }, [deleteConversation, singleChat]);
 
   // grouping
-  let sortedIds = conversationIDs;
+  /*let sortedIds = conversationIDs;
   if (grouping === 'persona') {
     const conversations = useChatStore.getState().conversations;
 
@@ -79,7 +81,7 @@ export function ChatDrawerItems(props: {
 
     // flatten grouped conversations
     sortedIds = Object.values(groupedConversations).flat();
-  }
+  }*/
 
   return <>
 
@@ -89,7 +91,7 @@ export function ChatDrawerItems(props: {
     {/*  </Typography>*/}
     {/*</ListItem>*/}
 
-    <MenuItem disabled={!!topNewConversationId && topNewConversationId === props.conversationId} onClick={handleNew}>
+    <MenuItem disabled={props.disableNewButton} onClick={handleButtonNew}>
       <ListItemDecorator><AddIcon /></ListItemDecorator>
       <Box sx={{ flexGrow: 1, display: 'flex', justifyContent: 'space-between', gap: 1 }}>
         New
@@ -114,22 +116,22 @@ export function ChatDrawerItems(props: {
       {/*  </ToggleButtonGroup>*/}
       {/*</ListItem>*/}
 
-      {sortedIds.map(conversationId =>
-        <ConversationItem
-          key={'c-id-' + conversationId}
-          conversationId={conversationId}
-          isActive={conversationId === props.conversationId}
-          isSingle={singleChat}
+      {conversations.map(conversation =>
+        <ChatNavigationItemMemo
+          key={'nav-' + conversation.id}
+          conversation={conversation}
+          isActive={conversation.id === props.activeConversationId}
+          isLonely={singleChat}
+          maxChatMessages={(labsEnhancedUI || softMaxReached) ? maxChatMessages : 0}
           showSymbols={showSymbols}
-          maxChatMessages={(experimentalLabs || softMaxReached) ? maxChatMessages : 0}
-          conversationActivate={handleConversationActivate}
-          conversationDelete={handleConversationDelete}
+          onConversationActivate={handleConversationActivate}
+          onConversationDelete={handleConversationDelete}
         />)}
     </Box>
 
     <ListDivider sx={{ mt: 0 }} />
 
-    <MenuItem onClick={props.onImportConversation}>
+    <MenuItem onClick={props.onConversationImportDialog}>
       <ListItemDecorator>
         <FileUploadIcon />
       </ListItemDecorator>
@@ -137,24 +139,12 @@ export function ChatDrawerItems(props: {
       <OpenAIIcon sx={{ fontSize: 'xl', ml: 'auto' }} />
     </MenuItem>
 
-    <MenuItem disabled={!hasChats} onClick={props.onDeleteAllConversations}>
+    <MenuItem disabled={!hasChats} onClick={props.onConversationsDeleteAll}>
       <ListItemDecorator><DeleteOutlineIcon /></ListItemDecorator>
       <Typography>
         Delete {totalConversations >= 2 ? `all ${totalConversations} chats` : 'chat'}
       </Typography>
     </MenuItem>
 
-    {/*<ListItem>*/}
-    {/*  <Typography level='body-sm'>*/}
-    {/*    Scratchpad*/}
-    {/*  </Typography>*/}
-    {/*</ListItem>*/}
-    {/*<MenuItem>*/}
-    {/*  <ListItemDecorator />*/}
-    {/*  <Typography sx={{ opacity: 0.5 }}>*/}
-    {/*    Feature <Link href={`${Brand.URIs.OpenRepo}/issues/17`} target='_blank'>#17</Link>*/}
-    {/*  </Typography>*/}
-    {/*</MenuItem>*/}
-
   </>;
 }

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

@@ -1,17 +1,28 @@
 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';
 
 
 export function ChatDropdowns(props: {
-  conversationId: string | null
+  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 */}
@@ -20,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

@@ -9,60 +9,68 @@ import FileDownloadIcon from '@mui/icons-material/FileDownload';
 import ForkRightIcon from '@mui/icons-material/ForkRight';
 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';
 
 
 export function ChatMenuItems(props: {
-  conversationId: string | null, isConversationEmpty: boolean, hasConversations: boolean,
-  isMessageSelectionMode: boolean, setIsMessageSelectionMode: (isMessageSelectionMode: boolean) => void,
-  onClearConversation: (conversationId: string) => void,
-  onDuplicateConversation: (conversationId: string) => void,
-  onExportConversation: (conversationId: string | null) => void,
-  onFlattenConversation: (conversationId: string) => void,
+  conversationId: DConversationId | null,
+  hasConversations: boolean,
+  isConversationEmpty: boolean,
+  isMessageSelectionMode: boolean,
+  setIsMessageSelectionMode: (isMessageSelectionMode: boolean) => void,
+  onConversationBranch: (conversationId: DConversationId, messageId: string | null) => void,
+  onConversationClear: (conversationId: DConversationId) => void,
+  onConversationExport: (conversationId: DConversationId | null) => void,
+  onConversationFlatten: (conversationId: DConversationId) => void,
 }) {
 
   // external state
+  const { closeAppMenu } = useOptimaLayout();
   const { touch: shareTouch } = useUICounter('export-share');
   const [showSystemMessages, setShowSystemMessages] = useChatShowSystemMessages();
 
   // derived state
   const disabled = !props.conversationId || props.isConversationEmpty;
 
-  const handleSystemMessagesToggle = () => setShowSystemMessages(!showSystemMessages);
 
-  const handleConversationExport = (e: React.MouseEvent<HTMLDivElement>) => {
-    e.stopPropagation();
-    closeLayoutMenu();
-    props.onExportConversation(!disabled ? props.conversationId : null);
+  const closeMenu = (event: React.MouseEvent) => {
+    event.stopPropagation();
+    closeAppMenu();
+  };
+
+  const handleConversationClear = (event: React.MouseEvent<HTMLDivElement>) => {
+    closeMenu(event);
+    props.conversationId && props.onConversationClear(props.conversationId);
+  };
+
+  const handleConversationBranch = (event: React.MouseEvent<HTMLDivElement>) => {
+    closeMenu(event);
+    props.conversationId && props.onConversationBranch(props.conversationId, null);
+  };
+
+  const handleConversationExport = (event: React.MouseEvent<HTMLDivElement>) => {
+    closeMenu(event);
+    props.onConversationExport(!disabled ? props.conversationId : null);
     shareTouch();
   };
 
-  const handleConversationDuplicate = (e: React.MouseEvent<HTMLDivElement>) => {
-    e.stopPropagation();
-    closeLayoutMenu();
-    props.conversationId && props.onDuplicateConversation(props.conversationId);
+  const handleConversationFlatten = (event: React.MouseEvent<HTMLDivElement>) => {
+    closeMenu(event);
+    props.conversationId && props.onConversationFlatten(props.conversationId);
   };
 
-  const handleConversationFlatten = (e: React.MouseEvent<HTMLDivElement>) => {
-    e.stopPropagation();
-    closeLayoutMenu();
-    props.conversationId && props.onFlattenConversation(props.conversationId);
-  };
-
-  const handleToggleMessageSelectionMode = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    closeLayoutMenu();
+  const handleToggleMessageSelectionMode = (event: React.MouseEvent) => {
+    closeMenu(event);
     props.setIsMessageSelectionMode(!props.isMessageSelectionMode);
   };
 
-  const handleConversationClear = (e: React.MouseEvent<HTMLDivElement>) => {
-    e.stopPropagation();
-    props.conversationId && props.onClearConversation(props.conversationId);
-  };
+  const handleToggleSystemMessages = () => setShowSystemMessages(!showSystemMessages);
+
 
   return <>
 
@@ -72,29 +80,21 @@ export function ChatMenuItems(props: {
     {/*  </Typography>*/}
     {/*</ListItem>*/}
 
-    <MenuItem onClick={handleSystemMessagesToggle}>
+    <MenuItem onClick={handleToggleSystemMessages}>
       <ListItemDecorator><SettingsSuggestIcon /></ListItemDecorator>
       System message
-      <Switch checked={showSystemMessages} onChange={handleSystemMessagesToggle} sx={{ ml: 'auto' }} />
+      <Switch checked={showSystemMessages} onChange={handleToggleSystemMessages} sx={{ ml: 'auto' }} />
     </MenuItem>
 
     <ListDivider inset='startContent' />
 
-    <MenuItem disabled={disabled} onClick={handleConversationDuplicate}>
-      <ListItemDecorator>
-        {/*<Badge size='sm' color='success'>*/}
-        <ForkRightIcon color='success' />
-        {/*</Badge>*/}
-      </ListItemDecorator>
-      Duplicate
+    <MenuItem disabled={disabled} onClick={handleConversationBranch}>
+      <ListItemDecorator><ForkRightIcon /></ListItemDecorator>
+      Branch
     </MenuItem>
 
     <MenuItem disabled={disabled} onClick={handleConversationFlatten}>
-      <ListItemDecorator>
-        {/*<Badge size='sm' color='success'>*/}
-        <CompressIcon color='success' />
-        {/*</Badge>*/}
-      </ListItemDecorator>
+      <ListItemDecorator><CompressIcon color='success' /></ListItemDecorator>
       Flatten
     </MenuItem>
 

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { shallow } from 'zustand/shallow';
 
 import { Avatar, Box, IconButton, ListItemDecorator, MenuItem, Typography } from '@mui/joy';
 import { SxProps } from '@mui/joy/styles/types';
@@ -9,96 +8,100 @@ import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import { SystemPurposes } from '../../../../data';
 
 import { InlineTextarea } from '~/common/components/InlineTextarea';
-import { conversationTitle, useChatStore } from '~/common/state/store-chats';
+import { conversationTitle, DConversation, DConversationId, useChatStore } from '~/common/state/store-chats';
 import { useUIPreferencesStore } from '~/common/state/store-ui';
 
 
 const DEBUG_CONVERSATION_IDs = false;
 
 
-export function ConversationItem(props: {
-  conversationId: string,
-  isActive: boolean, isSingle: boolean, showSymbols: boolean, maxChatMessages: number,
-  conversationActivate: (conversationId: string, closeMenu: boolean) => void,
-  conversationDelete: (conversationId: string) => void,
+export const ChatNavigationItemMemo = React.memo(ChatNavigationItem);
+
+function ChatNavigationItem(props: {
+  conversation: DConversation,
+  isActive: boolean,
+  isLonely: boolean,
+  maxChatMessages: number,
+  showSymbols: boolean,
+  onConversationActivate: (conversationId: DConversationId, closeMenu: boolean) => void,
+  onConversationDelete: (conversationId: DConversationId) => void,
 }) {
 
+  const { conversation, isActive } = props;
+
   // state
   const [isEditingTitle, setIsEditingTitle] = React.useState(false);
   const [deleteArmed, setDeleteArmed] = React.useState(false);
+
+  // external state
   const doubleClickToEdit = useUIPreferencesStore(state => state.doubleClickToEdit);
 
-  // bind to conversation
-  const cState = useChatStore(state => {
-    const conversation = state.conversations.find(conversation => conversation.id === props.conversationId);
-    return conversation && {
-      isNew: conversation.messages.length === 0,
-      messageCount: conversation.messages.length,
-      assistantTyping: !!conversation.abortController,
-      systemPurposeId: conversation.systemPurposeId,
-      title: conversationTitle(conversation, 'new conversation'),
-      setUserTitle: state.setUserTitle,
-    };
-  }, shallow);
+  // derived state
+  const { id: conversationId } = conversation;
+  const isNew = conversation.messages.length === 0;
+  const messageCount = conversation.messages.length;
+  const assistantTyping = !!conversation.abortController;
+  const systemPurposeId = conversation.systemPurposeId;
+  const title = conversationTitle(conversation, 'new conversation');
+  // const setUserTitle = state.setUserTitle;
 
   // auto-close the arming menu when clicking away
   // NOTE: there currently is a bug (race condition) where the menu closes on a new item right after opening
   //       because the isActive prop is not yet updated
   React.useEffect(() => {
-    if (deleteArmed && !props.isActive)
+    if (deleteArmed && !isActive)
       setDeleteArmed(false);
-  }, [deleteArmed, props.isActive]);
+  }, [deleteArmed, isActive]);
 
-  // sanity check: shouldn't happen, but just in case
-  if (!cState) return null;
-  const { isNew, messageCount, assistantTyping, setUserTitle, systemPurposeId, title } = cState;
 
-  const handleActivate = () => props.conversationActivate(props.conversationId, true);
+  const handleConversationActivate = () => props.onConversationActivate(conversationId, true);
 
-  const handleEditBegin = () => setIsEditingTitle(true);
+  const handleTitleEdit = () => setIsEditingTitle(true);
 
-  const handleEdited = (text: string) => {
+  const handleTitleEdited = (text: string) => {
     setIsEditingTitle(false);
-    setUserTitle(props.conversationId, text);
+    useChatStore.getState().setUserTitle(conversationId, text);
   };
 
-  const handleDeleteBegin = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    if (!props.isActive)
-      props.conversationActivate(props.conversationId, false);
+  const handleDeleteButtonShow = (event: React.MouseEvent) => {
+    event.stopPropagation();
+    if (!isActive)
+      props.onConversationActivate(conversationId, false);
     else
       setDeleteArmed(true);
   };
 
-  const handleDeleteConfirm = (e: React.MouseEvent) => {
+  const handleDeleteButtonHide = () => setDeleteArmed(false);
+
+  const handleConversationDelete = (event: React.MouseEvent) => {
     if (deleteArmed) {
       setDeleteArmed(false);
-      e.stopPropagation();
-      props.conversationDelete(props.conversationId);
+      event.stopPropagation();
+      props.onConversationDelete(conversationId);
     }
   };
 
-  const handleDeleteCancel = () => setDeleteArmed(false);
 
   const textSymbol = SystemPurposes[systemPurposeId]?.symbol || '❓';
-  const buttonSx: SxProps = { ml: 1, ...(props.isActive ? { color: 'white' } : {}) };
+  const buttonSx: SxProps = { ml: 1, ...(isActive ? { color: 'white' } : {}) };
 
   const progress = props.maxChatMessages ? 100 * messageCount / props.maxChatMessages : 0;
 
   return (
     <MenuItem
-      variant={props.isActive ? 'solid' : 'plain'} color='neutral'
-      selected={props.isActive}
-      onClick={handleActivate}
+      variant={isActive ? 'solid' : 'plain'} color='neutral'
+      selected={isActive}
+      onClick={handleConversationActivate}
       sx={{
         // py: 0,
         position: 'relative',
         border: 'none', // note, there's a default border of 1px and invisible.. hmm
         '&:hover > button': { opacity: 1 },
+        ...(isActive ? { bgcolor: 'red' } : {}),
       }}
     >
 
-      {/* Optional prgoress bar */}
+      {/* Optional progress bar, underlay */}
       {progress > 0 && (
         <Box sx={{
           backgroundColor: 'neutral.softActiveBg',
@@ -129,13 +132,13 @@ export function ConversationItem(props: {
       {/* Text */}
       {!isEditingTitle ? (
 
-        <Box onDoubleClick={() => doubleClickToEdit ? handleEditBegin() : null} sx={{ flexGrow: 1 }}>
-          {DEBUG_CONVERSATION_IDs ? props.conversationId.slice(0, 10) : title}{assistantTyping && '...'}
+        <Box onDoubleClick={() => doubleClickToEdit ? handleTitleEdit() : null} sx={{ flexGrow: 1 }}>
+          {DEBUG_CONVERSATION_IDs ? conversationId.slice(0, 10) : title}{assistantTyping && '...'}
         </Box>
 
       ) : (
 
-        <InlineTextarea initialText={title} onEdit={handleEdited} sx={{ ml: -1.5, mr: -0.5, flexGrow: 1 }} />
+        <InlineTextarea initialText={title} onEdit={handleTitleEdited} sx={{ ml: -1.5, mr: -0.5, flexGrow: 1 }} />
 
       )}
 
@@ -151,21 +154,21 @@ export function ConversationItem(props: {
       {/*</IconButton>*/}
 
       {/* Delete Arming */}
-      {!props.isSingle && !deleteArmed && (
+      {!props.isLonely && !deleteArmed && (
         <IconButton
-          variant={props.isActive ? 'solid' : 'outlined'} color='neutral'
+          variant={isActive ? 'solid' : 'outlined'} color='neutral'
           size='sm' sx={{ opacity: { xs: 1, sm: 0 }, transition: 'opacity 0.3s', ...buttonSx }}
-          onClick={handleDeleteBegin}>
+          onClick={handleDeleteButtonShow}>
           <DeleteOutlineIcon />
         </IconButton>
       )}
 
       {/* Delete / Cancel buttons */}
-      {!props.isSingle && deleteArmed && <>
-        <IconButton size='sm' variant='solid' color='danger' sx={buttonSx} onClick={handleDeleteConfirm}>
+      {!props.isLonely && deleteArmed && <>
+        <IconButton size='sm' variant='solid' color='danger' sx={buttonSx} onClick={handleConversationDelete}>
           <DeleteOutlineIcon />
         </IconButton>
-        <IconButton size='sm' variant='solid' color='neutral' sx={buttonSx} onClick={handleDeleteCancel}>
+        <IconButton size='sm' variant='solid' color='neutral' sx={buttonSx} onClick={handleDeleteButtonHide}>
           <CloseIcon />
         </IconButton>
       </>}

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

@@ -4,14 +4,13 @@ import { shallow } from 'zustand/shallow';
 import { ListItemButton, ListItemDecorator } from '@mui/joy';
 import CallIcon from '@mui/icons-material/Call';
 
-import { APP_CALL_ENABLED } from '../../../call/AppCall';
-
 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 { useChatStore } from '~/common/state/store-chats';
 import { useUIPreferencesStore } from '~/common/state/store-ui';
+import { useUXLabsStore } from '~/common/state/store-ux-labs';
 
 
 function AppBarPersonaDropdown(props: {
@@ -43,7 +42,7 @@ function AppBarPersonaDropdown(props: {
   }
 
   return (
-    <AppBarDropdown
+    <GoodDropdown
       items={SystemPurposes} showSymbols={zenMode !== 'cleaner'}
       value={props.systemPurposeId} onChange={handleSystemPurposeChange}
       appendOption={appendOption}
@@ -52,9 +51,10 @@ function AppBarPersonaDropdown(props: {
 
 }
 
-export function usePersonaIdDropdown(conversationId: string | null) {
+export function usePersonaIdDropdown(conversationId: DConversationId | null) {
 
   // external state
+  const labsCalling = useUXLabsStore(state => state.labsCalling);
   const { systemPurposeId } = useChatStore(state => {
     const conversation = state.conversations.find(conversation => conversation.id === conversationId);
     return {
@@ -69,12 +69,12 @@ export function usePersonaIdDropdown(conversationId: string | null) {
           if (conversationId && systemPurposeId)
             useChatStore.getState().setSystemPurposeId(conversationId, systemPurposeId);
         }}
-        onCall={APP_CALL_ENABLED ? () => {
+        onCall={labsCalling ? () => {
           if (conversationId && systemPurposeId)
             launchAppCall(conversationId, systemPurposeId);
         } : undefined}
       /> : null,
-    [conversationId, systemPurposeId],
+    [conversationId, labsCalling, systemPurposeId],
   );
 
   return { personaDropdown };

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

@@ -6,7 +6,36 @@ import { CloseableMenu } from '~/common/components/CloseableMenu';
 import { KeyStroke } from '~/common/components/KeyStroke';
 import { useUIPreferencesStore } from '~/common/state/store-ui';
 
-import { ChatModeId, ChatModeItems } from './store-composer';
+import { ChatModeId } from '../../AppChat';
+
+
+interface ChatModeDescription {
+  label: string;
+  description: string | React.JSX.Element;
+  shortcut?: string;
+  requiresTTI?: boolean;
+}
+
+const ChatModeItems: { [key in ChatModeId]: ChatModeDescription } = {
+  'generate-text': {
+    label: 'Chat',
+    description: 'Persona replies',
+  },
+  'append-user': {
+    label: 'Write',
+    description: 'Appends a message',
+    shortcut: 'Alt + Enter',
+  },
+  'generate-image': {
+    label: 'Draw',
+    description: 'AI Image Generation',
+    requiresTTI: true,
+  },
+  'generate-react': {
+    label: 'Reason + Act · α',
+    description: 'Answers questions in multiple steps',
+  },
+};
 
 
 function fixNewLineShortcut(shortcut: string, enterIsNewLine: boolean) {
@@ -15,7 +44,11 @@ function fixNewLineShortcut(shortcut: string, enterIsNewLine: boolean) {
   return shortcut;
 }
 
-export const ChatModeMenu = (props: { anchorEl: HTMLAnchorElement | null, onClose: () => void, experimental: boolean, 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);
@@ -33,20 +66,19 @@ export const ChatModeMenu = (props: { anchorEl: HTMLAnchorElement | null, onClos
 
     {/* ChatMode items */}
     {Object.entries(ChatModeItems)
-      .filter(([, { experimental }]) => props.experimental || !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)} />
+              <KeyStroke combo={fixNewLineShortcut((key === props.chatModeId) ? 'ENTER' : data.shortcut ? data.shortcut : 'ENTER', enterIsNewline)} />
             )}
           </Box>
         </MenuItem>)}
 
   </CloseableMenu>;
-};
+}

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/composer/store-composer.ts

@@ -1,45 +1,8 @@
-import * as React from 'react';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 import { shallow } from 'zustand/shallow';
 
 
-export type ChatModeId = 'immediate' | 'write-user' | 'react' | 'draw-imagine' | 'draw-imagine-plus';
-
-/// Describe the chat modes
-export const ChatModeItems: {
-  [key in ChatModeId]: {
-    label: string;
-    description: string | React.JSX.Element;
-    shortcut?: string;
-    experimental?: boolean
-  }
-} = {
-  'immediate': {
-    label: 'Chat',
-    description: 'Persona replies',
-  },
-  'write-user': {
-    label: 'Write',
-    description: 'Appends a message',
-    shortcut: 'Alt + Enter',
-  },
-  'draw-imagine': {
-    label: 'Draw',
-    description: 'AI Image Generation',
-  },
-  'draw-imagine-plus': {
-    label: 'Assisted Draw',
-    description: 'Assisted Image Generation',
-    experimental: true,
-  },
-  'react': {
-    label: 'Reason + Act · α',
-    description: 'Answers questions in multiple steps',
-  },
-};
-
-
 /// Composer Store
 
 interface ComposerStore {
@@ -59,20 +22,11 @@ const useComposerStore = create<ComposerStore>()(
     {
       name: 'app-composer',
       version: 1,
-      /*migrate: (state: any, version): ComposerStore => {
-        // 0 -> 1: rename history to sentMessages
-        if (state && version === 0) {
-          state.sentMessages = state.history;
-          delete state.history;
-        }
-        return state as ComposerStore;
-      },*/
     }),
 );
 
+export const setComposerStartupText = (text: string | null) =>
+  useComposerStore.getState().setStartupText(text);
 
 export const useComposerStartupText = (): [string | null, (text: string | null) => void] =>
-  useComposerStore(state => [state.startupText, state.setStartupText], shallow);
-
-export const setComposerStartupText = (text: string | null) =>
-  useComposerStore.getState().setStartupText(text);
+  useComposerStore(state => [state.startupText, state.setStartupText], shallow);

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

@@ -11,14 +11,15 @@ import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import DifferenceIcon from '@mui/icons-material/Difference';
 import EditIcon from '@mui/icons-material/Edit';
 import Face6Icon from '@mui/icons-material/Face6';
-import FastForwardIcon from '@mui/icons-material/FastForward';
+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';
@@ -76,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} />;
 }
@@ -165,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 };
 }
@@ -185,6 +192,8 @@ function useSanityTextDiffs(text: string, diffText: string | undefined, enabled:
 }
 
 
+export const ChatMessageMemo = React.memo(ChatMessage);
+
 /**
  * The Message component is a customizable chat message UI component that supports
  * different roles (user, assistant, and system), text editing, syntax highlighting,
@@ -200,10 +209,12 @@ export function ChatMessage(props: {
   noMarkdown?: boolean, diagramMode?: boolean,
   isBottom?: boolean, noBottomBorder?: boolean,
   isImagining?: boolean, isSpeaking?: boolean,
-  onMessageDelete?: () => void,
-  onMessageEdit?: (text: string) => void,
-  onMessageRunFrom?: (offset: number) => void,
-  onTextDiagram?: (text: string) => Promise<void>
+  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>
   onTextImagine?: (text: string) => Promise<void>
   onTextSpeak?: (text: string) => Promise<void>
   sx?: SxProps,
@@ -228,6 +239,7 @@ export function ChatMessage(props: {
 
   // derived state
   const {
+    id: messageId,
     text: messageText,
     sender: messageSender,
     avatar: messageAvatar,
@@ -247,16 +259,16 @@ 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;
 
 
   const handleTextEdited = (editedText: string) => {
     setIsEditing(false);
     if (props.onMessageEdit && editedText?.trim() && editedText !== messageText)
-      props.onMessageEdit(editedText);
+      props.onMessageEdit(messageId, editedText);
   };
 
   const handleUncollapse = () => setForceUserExpanded(true);
@@ -267,7 +279,7 @@ export function ChatMessage(props: {
   const closeOperationsMenu = () => setOpsMenuAnchor(null);
 
   const handleOpsCopy = (e: React.MouseEvent) => {
-    copyToClipboard(textSel);
+    copyToClipboard(textSel, 'Text');
     e.preventDefault();
     closeOperationsMenu();
     closeSelectionMenu();
@@ -280,12 +292,24 @@ export function ChatMessage(props: {
     closeOperationsMenu();
   };
 
+  const handleOpsConversationBranch = (e: React.MouseEvent) => {
+    e.preventDefault();
+    props.onConversationBranch && props.onConversationBranch(messageId);
+    closeOperationsMenu();
+  };
+
+  const handleOpsConversationRestartFrom = (e: React.MouseEvent) => {
+    e.preventDefault();
+    props.onConversationRestartFrom && props.onConversationRestartFrom(messageId, fromAssistant ? -1 : 0);
+    closeOperationsMenu();
+  };
+
   const handleOpsToggleShowDiff = () => setShowDiff(!showDiff);
 
   const handleOpsDiagram = async (e: React.MouseEvent) => {
     e.preventDefault();
     if (props.onTextDiagram) {
-      await props.onTextDiagram(textSel);
+      await props.onTextDiagram(messageId, textSel);
       closeOperationsMenu();
       closeSelectionMenu();
     }
@@ -309,12 +333,13 @@ export function ChatMessage(props: {
     }
   };
 
-  const handleOpsRunAgain = (e: React.MouseEvent) => {
-    e.preventDefault();
-    if (props.onMessageRunFrom) {
-      props.onMessageRunFrom(fromAssistant ? -1 : 0);
-      closeOperationsMenu();
-    }
+  const handleOpsTruncate = (_e: React.MouseEvent) => {
+    props.onConversationTruncate && props.onConversationTruncate(messageId);
+    closeOperationsMenu();
+  };
+
+  const handleOpsDelete = (_e: React.MouseEvent) => {
+    props.onMessageDelete && props.onMessageDelete(messageId);
   };
 
 
@@ -419,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,
       }}
@@ -500,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={handleOpsRunAgain} />
+                      ? <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} />)}
 
@@ -541,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' }}>
@@ -566,13 +590,13 @@ export function ChatMessage(props: {
             </MenuItem>
           )}
           <ListDivider />
-          {!!props.onMessageRunFrom && (
-            <MenuItem onClick={handleOpsRunAgain}>
-              <ListItemDecorator>{fromAssistant ? <ReplayIcon /> : <FastForwardIcon />}</ListItemDecorator>
+          {!!props.onConversationRestartFrom && (
+            <MenuItem onClick={handleOpsConversationRestartFrom}>
+              <ListItemDecorator>{fromAssistant ? <ReplayIcon /> : <TelegramIcon />}</ListItemDecorator>
               {!fromAssistant
-                ? 'Run from here'
+                ? <>Restart <span style={{ opacity: 0.5 }}>from here</span></>
                 : !props.isBottom
-                  ? 'Retry from here'
+                  ? <>Retry <span style={{ opacity: 0.5 }}>from here</span></>
                   : <Box sx={{ flexGrow: 1, display: 'flex', justifyContent: 'space-between', gap: 1 }}>
                     Retry
                     <KeyStroke combo='Ctrl + Shift + R' />
@@ -580,23 +604,38 @@ export function ChatMessage(props: {
               }
             </MenuItem>
           )}
-          {!!props.onTextDiagram && <MenuItem onClick={handleOpsDiagram} disabled={!couldDiagram || props.isImagining}>
+          {!!props.onConversationBranch && (
+            <MenuItem onClick={handleOpsConversationBranch} disabled={fromSystem}>
+              <ListItemDecorator>
+                <ForkRightIcon />
+              </ListItemDecorator>
+              Branch {!props.isBottom && <span style={{ opacity: 0.5 }}>from here</span>}
+            </MenuItem>
+          )}
+          {!!props.onConversationBranch && <ListDivider />}
+          {!!props.onTextDiagram && <MenuItem onClick={handleOpsDiagram} disabled={!couldDiagram}>
             <ListItemDecorator><AccountTreeIcon color='success' /></ListItemDecorator>
             Visualize ...
           </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.onMessageRunFrom && <ListDivider />}
+          {!!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={props.onMessageDelete} disabled={false /*fromSystem*/}>
+            <MenuItem onClick={handleOpsDelete} disabled={false /*fromSystem*/}>
               <ListItemDecorator><ClearIcon /></ListItemDecorator>
-              Delete
+              Delete <span style={{ opacity: 0.5 }}>message</span>
             </MenuItem>
           )}
         </CloseableMenu>
@@ -605,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/RenderCode.tsx

@@ -115,7 +115,7 @@ function RenderCodeImpl(props: {
 
   const handleCopyToClipboard = (e: React.MouseEvent) => {
     e.stopPropagation();
-    copyToClipboard(blockCode);
+    copyToClipboard(blockCode, 'Code');
   };
 
   return (

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

@@ -31,10 +31,12 @@ declare global {
   }
 }
 
-const useMermaidStore = create<{
+interface MermaidAPIStore {
   mermaidAPI: MermaidAPI | null,
   loadingError: string | null,
-}>()(
+}
+
+const useMermaidStore = create<MermaidAPIStore>()(
   () => ({
     mermaidAPI: null,
     loadingError: null,

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

@@ -59,7 +59,7 @@ export function RenderHtml(props: { htmlBlock: HtmlBlock, sx?: SxProps }) {
 
   const handleCopyToClipboard = (e: React.MouseEvent) => {
     e.stopPropagation();
-    copyToClipboard(props.htmlBlock.html);
+    copyToClipboard(props.htmlBlock.html, 'HTML');
   };
 
   return (

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

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { Chip, Typography } from '@mui/joy';
 import { SxProps } from '@mui/joy/styles/types';
 
-import { extractCommands } from '../../commands';
+import { extractCommands } from '../../editors/commands';
 
 import { TextBlock } from './blocks';
 

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

@@ -0,0 +1,322 @@
+import * as React from 'react';
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { shallow } from 'zustand/shallow';
+
+import { DConversationId, useChatStore } from '~/common/state/store-chats';
+
+
+// change this to increase/decrease the number history steps per pane
+const MAX_HISTORY_LENGTH = 10;
+
+// change to true to enable verbose console logging
+const DEBUG_PANES_MANAGER = false;
+
+
+interface ChatPane {
+
+  conversationId: DConversationId | null;
+
+  history: DConversationId[]; // History of the conversationIds for this pane
+  historyIndex: number; // Current position in the history for this pane
+
+}
+
+interface AppChatPanesStore {
+
+  // state
+  chatPanes: ChatPane[];
+  chatPaneFocusIndex: number | null;
+  chatPaneInputMode: 'focused' | 'broadcast';
+
+  // actions
+  openConversationInFocusedPane: (conversationId: DConversationId) => void;
+  openConversationInSplitPane: (conversationId: DConversationId) => void;
+  navigateHistoryInFocusedPane: (direction: 'back' | 'forward') => boolean;
+  duplicatePane: (paneIndex: number) => void;
+  removePane: (paneIndex: number) => void;
+  setFocusedPane: (paneIndex: number) => void;
+  onConversationsChanged: (conversationIds: DConversationId[]) => void;
+
+}
+
+function createPane(conversationId: DConversationId | null = null): ChatPane {
+  return {
+    conversationId,
+    history: conversationId ? [conversationId] : [],
+    historyIndex: conversationId ? 0 : -1,
+  };
+}
+
+const useAppChatPanesStore = create<AppChatPanesStore>()(persist(
+  (_set, _get) => ({
+
+    // Initial state: no panes
+    chatPanes: [] as ChatPane[],
+    chatPaneFocusIndex: null as number | null,
+    chatPaneInputMode: 'focused' as 'focused' | 'broadcast',
+
+    openConversationInFocusedPane: (conversationId: DConversationId) => {
+      _set((state) => {
+        const { chatPanes, chatPaneFocusIndex } = state;
+
+        // If there's no pane or no focused pane, create and focus a new one.
+        if (!chatPanes.length || chatPaneFocusIndex === null) {
+          const newPane = createPane(conversationId);
+          return {
+            chatPanes: [newPane],
+            chatPaneFocusIndex: 0, // Focus the new pane
+          };
+        }
+
+        // Check if the conversation is already open in the focused pane.
+        const focusedPane = chatPanes[chatPaneFocusIndex];
+        if (focusedPane.conversationId === conversationId) {
+          if (DEBUG_PANES_MANAGER)
+            console.log(`open-focuses: ${conversationId} is open in focused pane`, chatPaneFocusIndex, chatPanes);
+          return state;
+        }
+
+        // Truncate the future history before adding the new conversation.
+        const truncatedHistory = focusedPane.history.slice(0, focusedPane.historyIndex + 1);
+        const newHistory = [...truncatedHistory, conversationId].slice(-MAX_HISTORY_LENGTH);
+
+        // Update the focused pane with the new conversation.
+        const newPanes = [...chatPanes];
+        newPanes[chatPaneFocusIndex] = {
+          ...focusedPane,
+          conversationId,
+          history: newHistory,
+          historyIndex: newHistory.length - 1,
+        };
+
+        if (DEBUG_PANES_MANAGER)
+          console.log(`open-focuses: set ${conversationId} in focused pane`, chatPaneFocusIndex, chatPanes);
+
+        // Return the updated state.
+        return {
+          chatPanes: newPanes,
+        };
+      });
+    },
+
+    openConversationInSplitPane: (conversationId: DConversationId) => {
+      // Open a conversation in a new pane, reusing an existing pane if possible.
+      const { chatPanes, chatPaneFocusIndex, openConversationInFocusedPane } = _get();
+
+      // one pane open: split it
+      if (chatPanes.length === 1) {
+        _set({
+          chatPanes: Array.from({ length: 2 }, () => ({ ...chatPanes[0] })),
+          chatPaneFocusIndex: 1,
+        });
+      }
+      // more than 2 panes, reuse the alt pane
+      else if (chatPanes.length >= 2 && chatPaneFocusIndex !== null) {
+        _set({
+          chatPaneFocusIndex: chatPaneFocusIndex === 0 ? 1 : 0,
+        });
+      }
+
+      // will create a pane if none exists, or load the conversation in the focused pane
+      openConversationInFocusedPane(conversationId);
+
+      if (DEBUG_PANES_MANAGER)
+        console.log(`open-split-pane: after:`, _get().chatPanes);
+    },
+
+    navigateHistoryInFocusedPane: (direction: 'back' | 'forward'): boolean => {
+      const { chatPanes, chatPaneFocusIndex } = _get();
+      if (chatPaneFocusIndex === null)
+        return false;
+
+      const focusedPane = chatPanes[chatPaneFocusIndex];
+      let newHistoryIndex = focusedPane.historyIndex;
+
+      if (direction === 'back' && newHistoryIndex > 0)
+        newHistoryIndex--;
+      else if (direction === 'forward' && newHistoryIndex < focusedPane.history.length - 1)
+        newHistoryIndex++;
+      else {
+        if (DEBUG_PANES_MANAGER)
+          console.log(`navigateHistoryInFocusedPane: no history ${direction} for`, focusedPane);
+        return false;
+      }
+
+      const newPanes = [...chatPanes];
+      newPanes[chatPaneFocusIndex] = {
+        ...focusedPane,
+        conversationId: focusedPane.history[newHistoryIndex],
+        historyIndex: newHistoryIndex,
+      };
+
+      if (DEBUG_PANES_MANAGER)
+        console.log(`navigateHistoryInFocusedPane: ${direction} to`, focusedPane, newPanes);
+
+      _set({
+        chatPanes: newPanes,
+      });
+
+      return true;
+    },
+
+    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;
+        return {
+          chatPaneFocusIndex: paneIndex >= 0 && paneIndex < state.chatPanes.length ? paneIndex : null,
+        };
+      }),
+
+
+    /**
+     * This function is vital, as is invoked when the conversationId[] changes in the global chats store.
+     * It takes care of `creating the first pane` as well as `removing invalid history items, reassiging
+     * conversationIds, and re-focusing the pane`.
+     */
+    onConversationsChanged: (conversationIds: DConversationId[]) =>
+      _set(state => {
+        const { chatPanes, chatPaneFocusIndex } = state;
+
+        // handle panes
+        let untouched = true;
+        const newPanes: ChatPane[] = chatPanes.map(chatPane => {
+          const { conversationId, history, historyIndex } = chatPane;
+
+          // adjust history if any is deleted
+          let newHistoryIndex = historyIndex;
+          const newHistory = history.filter((_hId, index) => {
+            const historyStillPresent = conversationIds.includes(_hId);
+            if (!historyStillPresent && index <= historyIndex)
+              newHistoryIndex--;
+            return historyStillPresent;
+          });
+          if (newHistoryIndex < 0 && newHistory.length > 0)
+            newHistoryIndex = 0;
+
+          // check if pointing to a valid conversationId
+          const needsNewConversationId = !conversationId || !conversationIds.includes(conversationId);
+          if (!needsNewConversationId && newHistory.length === history.length)
+            return chatPane;
+
+          const nextConversationId = newHistoryIndex >= 0 && newHistoryIndex < newHistory.length
+            ? newHistory[newHistoryIndex]
+            : newHistory.length > 0
+              ? newHistory[newHistory.length - 1]
+              : conversationIds[0] ?? null;
+
+          untouched = false;
+          return {
+            ...chatPane,
+            conversationId: nextConversationId,
+            history: newHistory,
+            historyIndex: newHistoryIndex,
+          };
+        }).filter(pane => !!pane.conversationId);
+
+        // if untouched, return state as-is
+        if (untouched && newPanes.length >= 1)
+          return state;
+
+        // play it safe, and make sure a pane exists, and is focused
+        return {
+          chatPanes: newPanes.length ? newPanes : [createPane(conversationIds[0] ?? null)],
+          chatPaneFocusIndex: (newPanes.length && chatPaneFocusIndex !== null && chatPaneFocusIndex < newPanes.length) ? state.chatPaneFocusIndex : 0,
+        };
+      }),
+
+  }), {
+    name: 'app-app-chat-panes',
+  },
+));
+
+
+export function usePanesManager() {
+  // use Panes
+  const { onConversationsChanged, ...panesFunctions } = useAppChatPanesStore(state => {
+    const {
+      chatPaneFocusIndex,
+      chatPanes,
+      navigateHistoryInFocusedPane,
+      onConversationsChanged,
+      openConversationInFocusedPane,
+      openConversationInSplitPane,
+      duplicatePane,
+      removePane,
+      setFocusedPane,
+    } = state;
+    const focusedConversationId = chatPaneFocusIndex !== null ? chatPanes[chatPaneFocusIndex]?.conversationId ?? null : null;
+    return {
+      chatPanes: chatPanes as Readonly<ChatPane[]>,
+      focusedConversationId,
+      navigateHistoryInFocusedPane,
+      onConversationsChanged,
+      openConversationInFocusedPane,
+      openConversationInSplitPane,
+      paneIndex: chatPaneFocusIndex,
+      duplicatePane,
+      removePane,
+      setFocusedPane,
+    };
+  }, shallow);
+
+  // use Conversation IDs[]
+  const conversationIDs: DConversationId[] = useChatStore(state => {
+    return state.conversations.map(_c => _c.id);
+  }, shallow);
+
+  // [Effect] Ensure all Panes have a valid Conversation ID
+  React.useEffect(() => {
+    onConversationsChanged(conversationIDs);
+  }, [conversationIDs, onConversationsChanged]);
+
+  return {
+    ...panesFunctions,
+  };
+}

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

@@ -3,18 +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 { Link } from '~/common/components/Link';
-import { useChatStore } from '~/common/state/store-chats';
+import { DConversationId, useChatStore } from '~/common/state/store-chats';
+import { navigateToPersonas } from '~/common/app.routes';
 import { useUIPreferencesStore } from '~/common/state/store-ui';
 
 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
 //
@@ -38,7 +40,7 @@ const getRandomElement = <T, >(array: T[]): T | undefined =>
 /**
  * Purpose selector for the current chat. Clicking on any item activates it for the current chat.
  */
-export function PersonaSelector(props: { conversationId: string, runExample: (example: string) => void }) {
+export function PersonaSelector(props: { conversationId: DConversationId, runExample: (example: string) => void }) {
   // state
   const [searchQuery, setSearchQuery] = React.useState('');
   const [filteredIDs, setFilteredIDs] = React.useState<SystemPurposeId[] | null>(null);
@@ -111,6 +113,8 @@ export function PersonaSelector(props: { conversationId: string, runExample: (ex
   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;
 
@@ -154,10 +158,14 @@ export function PersonaSelector(props: { conversationId: string, runExample: (ex
               <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,
@@ -169,9 +177,10 @@ export function PersonaSelector(props: { conversationId: string, runExample: (ex
               >
                 {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' }}>
@@ -183,33 +192,47 @@ export function PersonaSelector(props: { conversationId: string, runExample: (ex
               </Button>
             </Grid>
           ))}
-          {/* Button to start the YouTube persona creator */}
-          <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>
+          </Grid>}
         </Grid>
-
         <Typography
           level='body-sm'
           sx={{

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

@@ -0,0 +1,38 @@
+import { callBrowseFetchPage } from '~/modules/browse/browse.client';
+
+import { DMessage, useChatStore } from '~/common/state/store-chats';
+
+import { createAssistantTypingMessage } from './editors';
+
+
+export const runBrowseUpdatingState = async (conversationId: string, url: string) => {
+
+  const { editMessage } = useChatStore.getState();
+
+  // create a blank and 'typing' message for the assistant - to be filled when we're done
+  // const assistantModelStr = 'react-' + assistantModelId.slice(4, 7); // HACK: this is used to change the Avatar animation
+  // noinspection HttpUrlsUsage
+  const shortUrl = url.replace('https://www.', '').replace('https://', '').replace('http://', '').replace('www.', '');
+  const assistantMessageId = createAssistantTypingMessage(conversationId, 'web', undefined, `Loading page at ${shortUrl}...`);
+  const updateAssistantMessage = (update: Partial<DMessage>) => editMessage(conversationId, assistantMessageId, update, false);
+
+  try {
+
+    const page = await callBrowseFetchPage(url);
+    if (!page.content) {
+      // noinspection ExceptionCaughtLocallyJS
+      throw new Error('No text found.');
+    }
+    updateAssistantMessage({
+      text: page.content,
+      typing: false,
+    });
+
+  } catch (error: any) {
+    console.error(error);
+    updateAssistantMessage({
+      text: 'Issue: browse did not produce an answer (error: ' + (error?.message || error?.toString() || 'unknown') + ').',
+      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';
 
@@ -20,7 +20,7 @@ export async function runAssistantUpdatingState(conversationId: string, history:
   const { autoSpeak, autoSuggestDiagrams, autoSuggestQuestions, autoTitleChat } = getChatAutoAI();
 
   // update the system message from the active Purpose, if not manually edited
-  history = updatePurposeInHistory(conversationId, history, systemPurpose);
+  history = updatePurposeInHistory(conversationId, history, assistantLlmId, systemPurpose);
 
   // create a blank and 'typing' message for the assistant
   const assistantMessageId = createAssistantTypingMessage(conversationId, assistantLlmId, history[0].purposeId, '...');
@@ -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,10 +1,16 @@
-import { CmdRunProdia } from '~/modules/prodia/prodia.client';
+import { CmdRunBrowse } from '~/modules/browse/browse.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';
+
 
 export const CmdAddRoleMessage: string[] = ['/assistant', '/a', '/system', '/s'];
 
-export const commands = [...CmdRunProdia, ...CmdRunReact, ...CmdRunSearch, ...CmdAddRoleMessage];
+export const CmdHelp: string[] = ['/help', '/h', '/?'];
+
+export const commands = [...CmdRunBrowse, ...CmdRunT2I, ...CmdRunReact, ...CmdRunSearch, ...CmdAddRoleMessage, ...CmdHelp];
 
 export interface SentencePiece {
   type: 'text' | 'cmd';
@@ -16,6 +22,9 @@ export interface SentencePiece {
  * Used by rendering functions, as well as input processing functions.
  */
 export function extractCommands(input: string): SentencePiece[] {
+  // 'help' commands are the only without a space and text after
+  if (CmdHelp.includes(input))
+    return [{ type: 'cmd', value: input }, { type: 'text', value: '' }];
   const regexFromTags = commands.map(tag => `^\\${tag} `).join('\\b|') + '\\b';
   const pattern = new RegExp(regexFromTags, 'g');
   const result: SentencePiece[] = [];
@@ -37,4 +46,12 @@ export function extractCommands(input: string): SentencePiece[] {
     result.push({ type: 'text', value: input.substring(lastIndex) });
 
   return result;
+}
+
+export function createCommandsHelpMessage(): DMessage {
+  let text = 'Available Chat Commands:\n';
+  text += commands.map(c => ` - ${c}`).join('\n');
+  const helpMessage = createDMessage('assistant', text);
+  helpMessage.originLLM = Brand.Title.Base;
+  return helpMessage;
 }

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-...', 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;
@@ -14,12 +14,13 @@ export function createAssistantTypingMessage(conversationId: string, assistantLl
 }
 
 
-export function updatePurposeInHistory(conversationId: string, history: DMessage[], purposeId: SystemPurposeId): DMessage[] {
+export function updatePurposeInHistory(conversationId: string, history: DMessage[], assistantLlmId: DLLMId, purposeId: SystemPurposeId): DMessage[] {
   const systemMessageIndex = history.findIndex(m => m.role === 'system');
   const systemMessage: DMessage = systemMessageIndex >= 0 ? history.splice(systemMessageIndex, 1)[0] : createDMessage('system', '');
   if (!systemMessage.updated && purposeId && SystemPurposes[purposeId]?.systemMessage) {
     systemMessage.purposeId = purposeId;
     systemMessage.text = SystemPurposes[purposeId].systemMessage
+      .replaceAll('{{Cutoff}}', assistantLlmId.includes('1106') ? '2023-04' : '2021-09')
       .replaceAll('{{Today}}', new Date().toISOString().split('T')[0]);
 
     // HACK: this is a special case for the "Custom" persona, to set the message in stone (so it doesn't get updated when switching to another persona)

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/editors/react-tangent.ts

@@ -1,5 +1,6 @@
 import { Agent } from '~/modules/aifn/react/react';
 import { DLLMId } from '~/modules/llms/store-llms';
+import { useBrowseStore } from '~/modules/browse/store-module-browsing';
 
 import { createDEphemeral, DMessage, useChatStore } from '~/common/state/store-chats';
 
@@ -11,6 +12,7 @@ import { createAssistantTypingMessage } from './editors';
  */
 export async function runReActUpdatingState(conversationId: string, question: string, assistantLlmId: DLLMId) {
 
+  const { enableReactTool: enableBrowse } = useBrowseStore.getState();
   const { appendEphemeral, updateEphemeralText, updateEphemeralState, deleteEphemeral, editMessage } = useChatStore.getState();
 
   // create a blank and 'typing' message for the assistant - to be filled when we're done
@@ -30,15 +32,13 @@ export async function runReActUpdatingState(conversationId: string, question: st
     ephemeralText += (text.length > 300 ? text.slice(0, 300) + '...' : text) + '\n';
     updateEphemeralText(conversationId, ephemeral.id, ephemeralText);
   };
+  const showStateInEphemeral = (state: object) => updateEphemeralState(conversationId, ephemeral.id, state);
 
   try {
 
     // react loop
     const agent = new Agent();
-    const reactResult = await agent.reAct(question, assistantLlmId, 5,
-      logToEphemeral,
-      (state: object) => updateEphemeralState(conversationId, ephemeral.id, state),
-    );
+    const reactResult = await agent.reAct(question, assistantLlmId, 5, enableBrowse, logToEphemeral, showStateInEphemeral);
 
     setTimeout(() => deleteEphemeral(conversationId, ephemeral.id), 2 * 1000);
     updateAssistantMessage({ text: reactResult, typing: false });

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

@@ -5,9 +5,10 @@ import { persist } from 'zustand/middleware';
 
 export type ChatAutoSpeakType = 'off' | 'firstLine' | 'all';
 
-interface AppChatState {
 
-  // Chat AI
+// Chat Settings (Chat AI & Chat UI)
+
+interface AppChatStore {
 
   autoSpeak: ChatAutoSpeakType;
   setAutoSpeak: (autoSpeak: ChatAutoSpeakType) => void;
@@ -19,9 +20,10 @@ interface AppChatState {
   setAutoSuggestQuestions: (autoSuggestQuestions: boolean) => void;
 
   autoTitleChat: boolean;
-  setautoTitleChat: (autoTitleChat: boolean) => void;
+  setAutoTitleChat: (autoTitleChat: boolean) => void;
 
-  // Chat
+  micTimeoutMs: number;
+  setMicTimeoutMs: (micTimeoutMs: number) => void;
 
   showTextDiff: boolean;
   setShowTextDiff: (showTextDiff: boolean) => void;
@@ -31,40 +33,43 @@ interface AppChatState {
 
 }
 
-const useAppChatStore = create<AppChatState>()(persist(
-  (set) => ({
 
-    // Chat AI
+const useAppChatStore = create<AppChatStore>()(persist(
+  (_set, _get) => ({
 
     autoSpeak: 'off',
-    setAutoSpeak: (autoSpeak: ChatAutoSpeakType) => set({ autoSpeak }),
+    setAutoSpeak: (autoSpeak: ChatAutoSpeakType) => _set({ autoSpeak }),
 
     autoSuggestDiagrams: false,
-    setAutoSuggestDiagrams: (autoSuggestDiagrams: boolean) => set({ autoSuggestDiagrams }),
+    setAutoSuggestDiagrams: (autoSuggestDiagrams: boolean) => _set({ autoSuggestDiagrams }),
 
     autoSuggestQuestions: false,
-    setAutoSuggestQuestions: (autoSuggestQuestions: boolean) => set({ autoSuggestQuestions }),
+    setAutoSuggestQuestions: (autoSuggestQuestions: boolean) => _set({ autoSuggestQuestions }),
 
     autoTitleChat: true,
-    setautoTitleChat: (autoTitleChat: boolean) => set({ autoTitleChat }),
+    setAutoTitleChat: (autoTitleChat: boolean) => _set({ autoTitleChat }),
+
+    micTimeoutMs: 2000,
+    setMicTimeoutMs: (micTimeoutMs: number) => _set({ micTimeoutMs }),
 
     showTextDiff: false,
-    setShowTextDiff: (showTextDiff: boolean) => set({ showTextDiff }),
+    setShowTextDiff: (showTextDiff: boolean) => _set({ showTextDiff }),
 
     showSystemMessages: false,
-    setShowSystemMessages: (showSystemMessages: boolean) => set({ showSystemMessages }),
+    setShowSystemMessages: (showSystemMessages: boolean) => _set({ showSystemMessages }),
 
   }), {
     name: 'app-app-chat',
     version: 1,
 
-    // for now, let text diff be off by default
     onRehydrateStorage: () => (state) => {
-      if (state)
-        state.showTextDiff = false;
+      if (!state) return;
+
+      // for now, let text diff be off by default
+      state.showTextDiff = false;
     },
 
-    migrate: (state: any, fromVersion: number): AppChatState => {
+    migrate: (state: any, fromVersion: number): AppChatStore => {
       // 0 -> 1: autoTitleChat was off by mistake - turn it on [Remove past Dec 1, 2023]
       if (state && fromVersion < 1)
         state.autoTitleChat = true;
@@ -74,18 +79,7 @@ const useAppChatStore = create<AppChatState>()(persist(
 ));
 
 
-// Chat AI
-
-export const useChatAutoAI = (): {
-  autoSpeak: ChatAutoSpeakType,
-  autoSuggestDiagrams: boolean,
-  autoSuggestQuestions: boolean,
-  autoTitleChat: boolean,
-  setAutoSpeak: (autoSpeak: ChatAutoSpeakType) => void,
-  setAutoSuggestDiagrams: (autoSuggestDiagrams: boolean) => void,
-  setAutoSuggestQuestions: (autoSuggestQuestions: boolean) => void,
-  setautoTitleChat: (autoTitleChat: boolean) => void,
-} => useAppChatStore(state => ({
+export const useChatAutoAI = () => useAppChatStore(state => ({
   autoSpeak: state.autoSpeak,
   autoSuggestDiagrams: state.autoSuggestDiagrams,
   autoSuggestQuestions: state.autoSuggestQuestions,
@@ -93,7 +87,7 @@ export const useChatAutoAI = (): {
   setAutoSpeak: state.setAutoSpeak,
   setAutoSuggestDiagrams: state.setAutoSuggestDiagrams,
   setAutoSuggestQuestions: state.setAutoSuggestQuestions,
-  setautoTitleChat: state.setautoTitleChat,
+  setAutoTitleChat: state.setAutoTitleChat,
 }), shallow);
 
 export const getChatAutoAI = (): {
@@ -103,12 +97,17 @@ export const getChatAutoAI = (): {
   autoTitleChat: boolean,
 } => useAppChatStore.getState();
 
-// Chat
+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);
 
-export const getChatShowSystemMessages = (): boolean => useAppChatStore.getState().showSystemMessages;
+export const getChatShowSystemMessages = (): boolean =>
+  useAppChatStore.getState().showSystemMessages;
 
 export const useChatShowSystemMessages = (): [boolean, (showSystemMessages: boolean) => void] =>
   useAppChatStore(state => [state.showSystemMessages, state.setShowSystemMessages], shallow);

src/apps/labs/AppLabs.tsx

@@ -1,68 +0,0 @@
-import * as React from 'react';
-import { shallow } from 'zustand/shallow';
-
-import { Box, Button, Card, CardContent, Container, Switch, Typography } from '@mui/joy';
-import ScienceIcon from '@mui/icons-material/Science';
-
-import { Link } from '~/common/components/Link';
-import { useUIPreferencesStore } from '~/common/state/store-ui';
-
-
-export function AppLabs() {
-
-  // external state
-  const { experimentalLabs, setExperimentalLabs } = useUIPreferencesStore(state => ({
-    experimentalLabs: state.experimentalLabs, setExperimentalLabs: state.setExperimentalLabs,
-  }), shallow);
-
-  const handleLabsChange = (event: React.ChangeEvent<HTMLInputElement>) => setExperimentalLabs(event.target.checked);
-
-  return (
-
-    <Box sx={{
-      backgroundColor: 'background.level1',
-      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
-      flexGrow: 1,
-      overflowY: 'auto',
-      minHeight: 96,
-      p: { xs: 3, md: 6 },
-      gap: 4,
-    }}>
-
-      <Typography level='h1' sx={{ fontSize: '3.6rem' }}>
-        Labs <ScienceIcon sx={{ fontSize: '3.3rem' }} />
-      </Typography>
-
-      <Switch checked={experimentalLabs} onChange={handleLabsChange}
-              endDecorator={experimentalLabs ? 'On' : 'Off'}
-              slotProps={{ endDecorator: { sx: { minWidth: 26 } } }} />
-
-      <Container disableGutters maxWidth='sm'>
-        <Card>
-          <CardContent>
-            <Typography>
-              The Labs section is where we experiment with new features and ideas.
-            </Typography>
-            <Typography level='title-md' sx={{ mt: 2 }}>
-              Features {experimentalLabs ? 'enabled' : 'disabled'}:
-            </Typography>
-            <ul style={{ marginTop: 8, marginBottom: 8, paddingInlineStart: 32 }}>
-              <li><b>Text tools</b> - complete (highlight differences)</li>
-              <li><b>YouTube persona synthesizer</b> - alpha, not persisted</li>
-              <li><b>Chat mode: follow-up/augmentation</b> - alpha (diagrams)</li>
-              <li><b>Relative chats size</b> - complete</li>
-            </ul>
-            <Typography sx={{ mt: 2 }}>
-              For any questions and creative idea, please join us on Discord, and let&apos;s talk!
-            </Typography>
-          </CardContent>
-        </Card>
-      </Container>
-
-      <Button variant='solid' color='neutral' size='lg' component={Link} href='/' noLinkStyle>
-        Got it!
-      </Button>
-
-    </Box>
-  );
-}

src/apps/link/AppChatLink.tsx

@@ -4,8 +4,8 @@ import { useQuery } from '@tanstack/react-query';
 
 import { Box, Typography } from '@mui/joy';
 
-import { createConversationFromJsonV1 } from '../chat/trade/trade.client';
-import { useHasChatLinkItems } from '../chat/trade/store-sharing';
+import { createConversationFromJsonV1 } from '~/modules/trade/trade.client';
+import { useHasChatLinkItems } from '~/modules/trade/store-module-trade';
 
 import { Brand } from '~/common/app.config';
 import { InlineError } from '~/common/components/InlineError';
@@ -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

@@ -4,12 +4,12 @@ import TimeAgo from 'react-timeago';
 import { Box, ListDivider, ListItem, ListItemDecorator, MenuItem, Typography } from '@mui/joy';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 
-import { useChatLinkItems } from '../chat/trade/store-sharing';
+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, getHomeLink } from '~/common/app.routes';
+import { getChatLinkRelativePath, ROUTE_INDEX } from '~/common/app.routes';
+import { useOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
 
 
 /**
@@ -19,6 +19,7 @@ import { getChatLinkRelativePath, getHomeLink } 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,8 +28,8 @@ export function AppChatLinkDrawerItems() {
   return <>
 
     <MenuItem
-      onClick={closeLayoutDrawer}
-      component={Link} href={getHomeLink()} noLinkStyle
+      onClick={closeAppDrawer}
+      component={Link} href={ROUTE_INDEX} noLinkStyle
     >
       <ListItemDecorator><ArrowBackIcon /></ListItemDecorator>
       {Brand.Title.Base}

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';
 
 
@@ -57,8 +58,8 @@ export function ViewChatLink(props: { conversation: DConversation, storedAt: Dat
 
   const handleClone = async (canOverwrite: boolean) => {
     setCloning(true);
-    useChatStore.getState().importConversation({ ...props.conversation }, !canOverwrite);
-    await navigateToChat();
+    const importedId = useChatStore.getState().importConversation({ ...props.conversation }, !canOverwrite);
+    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,18 +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);
@@ -22,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 },
@@ -35,41 +57,55 @@ 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>
+          <Button
+            variant='solid' color='neutral' size='lg'
+            component={Link} href={ROUTE_INDEX} noLinkStyle
+            endDecorator='✨'
+            sx={{ minWidth: 200 }}
+          >
+            Sweet
+          </Button>
+        </Box>
+
         {!!newsCallout && <Container disableGutters maxWidth='sm'>{newsCallout}</Container>}
 
         {!!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 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.map((item, idx) => <li key={idx}>
-                    <Typography component='div'>
+                  {ni.items.filter(item => item.dev !== true).map((item, idx) => <li key={idx}>
+                    <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'
@@ -85,12 +121,6 @@ export function AppNews() {
           })}
         </Container>}
 
-        <Box>
-          <Button variant='solid' color='neutral' size='lg' component={Link} href='/' noLinkStyle>
-            Got it!
-          </Button>
-        </Box>
-
         {/*<Typography sx={{ textAlign: 'center' }}>*/}
         {/*  Enjoy!*/}
         {/*  <br /><br />*/}

src/apps/news/news.data.tsx

@@ -1,18 +1,19 @@
 import * as React from 'react';
 
-import { Box, Button, Card, CardContent, Grid, Typography } from '@mui/joy';
+import { Box, Button, Card, CardContent, Chip, Grid, Typography } from '@mui/joy';
 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 = 6;
+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,24 +27,25 @@ const RIssues = `${OpenRepo}/issues`;
 export const newsCallout =
   <Card>
     <CardContent sx={{ gap: 2 }}>
-      <Typography level='h2'>
-        Open Roadmap ✨
+      <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}>
           <Button
-            fullWidth variant='solid' color='primary' size='lg' endDecorator={<LaunchIcon />}
+            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' }}>
           <Button
-            fullWidth variant='outlined' color='primary' endDecorator={<LaunchIcon />}
+            fullWidth variant='plain' color='primary' endDecorator={<LaunchIcon />}
             component={Link} href={RIssues + '/new?template=roadmap-request.md&title=%5BSuggestion%5D'} noLinkStyle target='_blank'
           >
             Suggest a Feature
@@ -56,15 +58,74 @@ export const newsCallout =
 
 // news and feature surfaces
 export const NewsItems: NewsItem[] = [
-  /*{
-    versionName: 'NEXT',
-    items: [
-      { text: <><B href='...'>Voice Calling</B> ...</> },
-    ],
-  },*/
+  // still unannounced: phone calls, split windows, ...
   {
-    versionName: '1.5.0',
-    text: 'Enjoy what\'s new:',
+    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 {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</> },
+      { text: <>More: <Chip>/help</Chip>, import ChatGPT from source, new Flattener</> },
+      { text: <>Devs: improved code quality, snackbar framework</>, dev: true },
+    ],
+  },
+  {
+    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</> },
@@ -78,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</> },
@@ -88,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</> },
@@ -99,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</> },
@@ -109,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></> },
@@ -121,9 +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() {